emre/www_geomind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ready to add animations

Browse Source
This commit is contained in:
Emre
2025-10-11 02:55:49 +03:00
parent 60fa49c0ef
commit 16c1a09bc4
9 changed files with 109 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/home/components/CtaSection.tsx
View File

@@ -2,14 +2,14 @@ import { motion } from 'framer-motion';
export const CtaSection = () => {
return (
<section className="snap-start bg-[rgb(172,173,175)]">
<section className="snap-start bg-black">
<div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-10 px-6 py-40 text-center sm:px-10">
<motion.span
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-20%' }}
transition={{ duration: 0.6, ease: 'easeOut' }}
className="text-xs font-semibold uppercase tracking-[0.4em] text-ink/60"
className="text-xs font-semibold uppercase tracking-[0.4em] text-white"
>
Ready when you are
</motion.span>
@@ -18,7 +18,7 @@ export const CtaSection = () => {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-20%' }}
transition={{ duration: 0.7, ease: 'easeOut', delay: 0.15 }}
className="text-4xl font-medium leading-tight text-ink sm:text-5xl"
className="text-4xl font-medium leading-tight text-white sm:text-5xl"
>
Drop in your call to action headline and invite people forward.
</motion.h3>
@@ -27,7 +27,7 @@ export const CtaSection = () => {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-20%' }}
transition={{ duration: 0.7, ease: 'easeOut', delay: 0.25 }}
className="max-w-2xl text-lg text-ink/70"
className="max-w-2xl text-lg text-white/70"
>
Use this block to reinforce the value proposition and give your visitor a clear next step.
Consider pairing it with a lead capture form or direct contact pathway later.
@@ -38,7 +38,7 @@ export const CtaSection = () => {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-20%' }}
transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
className="rounded-full border border-ink/10 bg-ink px-10 py-4 text-sm font-semibold uppercase tracking-[0.35em] text-mist transition-transform duration-300 hover:-translate-y-0.5 hover:shadow-[0_16px_36px_-24px_rgba(0,0,0,0.65)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink/40 focus-visible:ring-offset-2 focus-visible:ring-offset-mist"
className="rounded-full border border-white/20 bg-white px-10 py-4 text-sm font-semibold uppercase tracking-[0.35em] text-black transition-transform duration-300 hover:-translate-y-0.5 hover:bg-white/90 hover:shadow-[0_16px_36px_-24px_rgba(0,0,0,0.65)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
>
Placeholder CTA
</motion.button>