89 lines
3.4 KiB
TypeScript
89 lines
3.4 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import { Link } from 'react-router-dom';
|
|
import { cn } from '../../../lib/cn';
|
|
import { buttonBaseClass } from '../../../lib/buttonStyles';
|
|
|
|
export const CtaSection = () => {
|
|
return (
|
|
<section className="snap-start bg-black">
|
|
<div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 px-6 py-20 text-center sm:gap-10 sm:px-10 sm:py-32 lg:py-40">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-20%' }}
|
|
transition={{ duration: 0.6, ease: 'easeOut' }}
|
|
className="flex items-center justify-center gap-4"
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
className="hidden h-px w-16 bg-gradient-to-r from-transparent via-brand-500/40 to-brand-300/70 sm:block"
|
|
/>
|
|
<span className="text-xs font-semibold uppercase tracking-[0.4em] text-white">
|
|
Ready when you are
|
|
</span>
|
|
<span
|
|
aria-hidden="true"
|
|
className="hidden h-px w-16 bg-gradient-to-l from-transparent via-brand-500/40 to-brand-300/70 sm:block"
|
|
/>
|
|
</motion.div>
|
|
<motion.h3
|
|
initial={{ opacity: 0, y: 24 }}
|
|
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-white sm:text-5xl"
|
|
>
|
|
Join the Infrastructure Revolution
|
|
</motion.h3>
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 16 }}
|
|
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-white/70"
|
|
>
|
|
From record-breaking digital infrastructure to successful exits. The team behind GeoMind has built infrastructure at scale.
|
|
</motion.p>
|
|
<div className="flex w-full flex-col items-stretch gap-4 sm:w-auto sm:flex-row sm:items-center sm:justify-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 12 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-20%' }}
|
|
transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
|
|
className="w-full sm:w-auto"
|
|
>
|
|
<Link
|
|
to="/about"
|
|
className={cn(
|
|
buttonBaseClass,
|
|
'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:min-w-[12rem]',
|
|
)}
|
|
>
|
|
About us
|
|
</Link>
|
|
</motion.div>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 12 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-20%' }}
|
|
transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
|
|
className="w-full sm:w-auto"
|
|
>
|
|
<a
|
|
href="https://calendly.com/sachao/30min"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={cn(
|
|
buttonBaseClass,
|
|
'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:min-w-[12rem]',
|
|
)}
|
|
>
|
|
Book a Meeting
|
|
</a>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|