CTA Hero Block

1"use client";
2 
3import { Button } from "@base-ui/react/button";
4import { Input } from "@base-ui/react/input";
5import { motion } from "framer-motion";
6import { ArrowRight, CheckCircle2, Play, Sparkles, Zap } from "lucide-react";
7import { useState } from "react";
8 
9const benefits = [
10  "No credit card required",
11  "Cancel anytime",
12  "Free 14-day trial",
13];
14 
15export function CTAHeroBlockBaseui() {
16  const [email, setEmail] = useState("");
17  const [isVideoHovered, setIsVideoHovered] = useState(false);
18 
19  return (
20    <section className="relative w-full overflow-hidden bg-gradient-to-b from-primary/5 via-background to-background px-4 py-16 md:py-24 lg:py-32">
21      {/* Animated background elements */}
22      <div className="absolute inset-0 -z-10 overflow-hidden">
23        <motion.div
24          animate={{
25            scale: [1, 1.2, 1],
26            rotate: [0, 180, 360],
27            opacity: [0.3, 0.5, 0.3],
28          }}
29          transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
30          className="absolute -right-1/4 -top-1/4 h-96 w-96 rounded-full bg-primary/10 blur-3xl md:h-[600px] md:w-[600px]"
31        />
32        <motion.div
33          animate={{
34            scale: [1.2, 1, 1.2],
35            rotate: [360, 180, 0],
36            opacity: [0.3, 0.5, 0.3],
37          }}
38          transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
39          className="absolute -bottom-1/4 -left-1/4 h-96 w-96 rounded-full bg-primary/10 blur-3xl md:h-[600px] md:w-[600px]"
40        />
41      </div>
42 
43      <div className="mx-auto max-w-7xl">
44        <div className="grid gap-8 lg:grid-cols-2 lg:gap-12">
45          {/* Left side - Content */}
46          <motion.div
47            initial={{ opacity: 0, x: -50 }}
48            animate={{ opacity: 1, x: 0 }}
49            transition={{ duration: 0.8, ease: [0.6, 0.05, 0.01, 0.9] }}
50            className="flex flex-col justify-center"
51          >
52            <motion.div
53              initial={{ opacity: 0, y: 20 }}
54              animate={{ opacity: 1, y: 0 }}
55              transition={{ delay: 0.2 }}
56            >
57              <span className="mb-4 md:mb-6 inline-flex items-center rounded-full border border-transparent bg-secondary px-2.5 py-0.5 text-xs font-semibold text-secondary-foreground">
58                <Sparkles className="mr-1 h-3 w-3" />
59                Limited Time Offer
60              </span>
61            </motion.div>
62 
63            <motion.h1
64// … truncated