Cta 2

1"use client";
2 
3import SmoothButton from "@/components/smoothui/smooth-button";
4import { getImageKitUrl } from "@/lib/smoothui-data";
5import { motion, useReducedMotion } from "motion/react";
6 
7const SPRING = {
8  bounce: 0.1,
9  duration: 0.25,
10  type: "spring" as const,
11};
12 
13export function CtaSplit() {
14  const shouldReduceMotion = useReducedMotion();
15 
16  return (
17    <section aria-labelledby="cta-split-heading">
18      <div className="py-24 md:py-32">
19        <div className="mx-auto grid max-w-6xl items-center gap-12 px-6 md:grid-cols-2">
20          <motion.div
21            initial={
22              shouldReduceMotion ? { opacity: 1 } : { opacity: 0, x: -24 }
23            }
24            transition={shouldReduceMotion ? { duration: 0 } : SPRING}
25            viewport={{ once: true }}
26            whileInView={
27              shouldReduceMotion ? { opacity: 1 } : { opacity: 1, x: 0 }
28            }
29          >
30            <h2
31              className="text-balance font-bold text-3xl tracking-tight md:text-4xl"
32              id="cta-split-heading"
33            >
34              Ship faster with animated components
35            </h2>
36            <p className="mt-4 text-foreground/70 text-lg leading-relaxed">
37              Stop building UI from scratch. Use production-ready, beautifully
38              animated components that work with your existing design system.
39            </p>
40            <div className="mt-8 flex flex-wrap gap-4">
41              <SmoothButton size="lg" variant="candy">
42                Browse Components
43              </SmoothButton>
44              <SmoothButton size="lg" variant="outline">
45                View on GitHub
46              </SmoothButton>
47            </div>
48          </motion.div>
49 
50          <motion.div
51            className="relative"
52            initial={
53              shouldReduceMotion ? { opacity: 1 } : { opacity: 0, x: 24 }
54            }
55            transition={shouldReduceMotion ? { duration: 0 } : SPRING}
56            viewport={{ once: true }}
57            whileInView={
58              shouldReduceMotion ? { opacity: 1 } : { opacity: 1, x: 0 }
59            }
60          >
61            <div className="overflow-hidden rounded-2xl border shadow-lg">
62              <img
63                alt="Product preview showing animated UI components"
64                className="h-auto w-full object-cover"
65                draggable={false}
66                src={getImageKitUrl("/images/hero-smoothui.png", {
67                  format: "auto",
68                  quality: 85,
69// … truncated