Cta 1

1"use client";
2 
3import SmoothButton from "@/components/smoothui/smooth-button";
4import { motion, useReducedMotion } from "motion/react";
5 
6const SPRING = {
7  bounce: 0.1,
8  duration: 0.25,
9  type: "spring" as const,
10};
11 
12export function CtaCentered() {
13  const shouldReduceMotion = useReducedMotion();
14 
15  return (
16    <section aria-labelledby="cta-centered-heading">
17      <div className="relative overflow-hidden bg-muted/50 py-24 md:py-32">
18        <div
19          aria-hidden="true"
20          className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--color-primary)/0.08,transparent_70%)]"
21        />
22        <motion.div
23          className="relative mx-auto max-w-3xl px-6 text-center"
24          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 24 }}
25          transition={
26            shouldReduceMotion
27              ? { duration: 0 }
28              : { ...SPRING, staggerChildren: 0.08 }
29          }
30          viewport={{ once: true }}
31          whileInView={
32            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
33          }
34        >
35          <h2
36            className="text-balance font-bold text-3xl tracking-tight md:text-4xl lg:text-5xl"
37            id="cta-centered-heading"
38          >
39            Ready to build something amazing?
40          </h2>
41          <p className="mx-auto mt-4 max-w-xl text-balance text-foreground/70 text-lg">
42            Start building with beautifully animated components today. Free,
43            open source, and ready for production.
44          </p>
45          <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
46            <SmoothButton size="lg" variant="candy">
47              Get Started
48            </SmoothButton>
49            <SmoothButton size="lg" variant="outline">
50              Learn More
51            </SmoothButton>
52          </div>
53        </motion.div>
54      </div>
55    </section>
56  );
57}
58 
59export default CtaCentered;