Cta 3

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 CtaBanner() {
13  const shouldReduceMotion = useReducedMotion();
14 
15  return (
16    <section aria-labelledby="cta-banner-heading">
17      <div className="px-6 py-12">
18        <motion.div
19          className="mx-auto max-w-4xl overflow-hidden rounded-2xl border bg-gradient-to-r from-primary/5 via-background to-primary/5 p-8 md:p-12"
20          initial={
21            shouldReduceMotion ? { opacity: 1 } : { opacity: 0, scale: 0.97 }
22          }
23          transition={shouldReduceMotion ? { duration: 0 } : SPRING}
24          viewport={{ once: true }}
25          whileInView={
26            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1 }
27          }
28        >
29          <div className="flex flex-col items-center justify-between gap-6 md:flex-row">
30            <div>
31              <h2
32                className="font-bold text-xl md:text-2xl"
33                id="cta-banner-heading"
34              >
35                Start building today
36              </h2>
37              <p className="mt-1 text-foreground/70 text-sm md:text-base">
38                Install any component with a single command.
39              </p>
40            </div>
41            <SmoothButton variant="candy">Get Started →</SmoothButton>
42          </div>
43        </motion.div>
44      </div>
45    </section>
46  );
47}
48 
49export default CtaBanner;