CTA Hero Block

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