initial dev

src/pages/home/components/CtaSection.tsx

@@ -0,0 +1,48 @@
+import { motion } from 'framer-motion';
+
+export const CtaSection = () => {
+  return (
+    <section className="snap-start bg-mist">
+      <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"
+        >
+          Ready when you are
+        </motion.span>
+        <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-ink sm:text-5xl"
+        >
+          Drop in your call to action headline and invite people forward.
+        </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-ink/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.
+        </motion.p>
+        <motion.button
+          type="button"
+          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="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"
+        >
+          Placeholder CTA
+        </motion.button>
+      </div>
+    </section>
+  );
+};