{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-hero-block-shadcnui",
  "type": "registry:block",
  "title": "CTA Hero Block",
  "description": "Engaging hero section with email signup, video preview, and social proof",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/cta-hero-block.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { motion } from \"framer-motion\";\nimport { ArrowRight, CheckCircle2, Play, Sparkles, Zap } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst benefits = [\n  \"No credit card required\",\n  \"Cancel anytime\",\n  \"Free 14-day trial\",\n];\n\nexport function CTAHeroBlock() {\n  const [email, setEmail] = useState(\"\");\n  const [isVideoHovered, setIsVideoHovered] = useState(false);\n\n  return (\n    <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\">\n      {/* Animated background elements */}\n      <div className=\"absolute inset-0 -z-10 overflow-hidden\">\n        <motion.div\n          animate={{\n            scale: [1, 1.2, 1],\n            rotate: [0, 180, 360],\n            opacity: [0.3, 0.5, 0.3],\n          }}\n          transition={{ duration: 25, repeat: Infinity, ease: \"linear\" }}\n          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]\"\n        />\n        <motion.div\n          animate={{\n            scale: [1.2, 1, 1.2],\n            rotate: [360, 180, 0],\n            opacity: [0.3, 0.5, 0.3],\n          }}\n          transition={{ duration: 20, repeat: Infinity, ease: \"linear\" }}\n          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]\"\n        />\n      </div>\n\n      <div className=\"mx-auto max-w-7xl\">\n        <div className=\"grid gap-8 lg:grid-cols-2 lg:gap-12\">\n          {/* Left side - Content */}\n          <motion.div\n            initial={{ opacity: 0, x: -50 }}\n            animate={{ opacity: 1, x: 0 }}\n            transition={{ duration: 0.8, ease: [0.6, 0.05, 0.01, 0.9] }}\n            className=\"flex flex-col justify-center\"\n          >\n            <motion.div\n              initial={{ opacity: 0, y: 20 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: 0.2 }}\n            >\n              <Badge className=\"mb-4 md:mb-6\" variant=\"secondary\">\n                <Sparkles className=\"mr-1 h-3 w-3\" />\n                Limited Time Offer\n              </Badge>\n            </motion.div>\n\n            <motion.h1\n              className=\"mb-4 bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-4xl font-bold tracking-tight text-transparent md:mb-6 md:text-5xl lg:text-6xl\"\n              initial={{ opacity: 0, y: 20 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: 0.3 }}\n            >\n              Transform Your Business{\" \"}\n              <span className=\"bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent\">\n                Today\n              </span>\n            </motion.h1>\n\n            <motion.p\n              className=\"mb-6 text-base text-muted-foreground md:mb-8 md:text-lg lg:text-xl\"\n              initial={{ opacity: 0, y: 20 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: 0.4 }}\n            >\n              Join thousands of companies using our platform to streamline their\n              workflow, boost productivity, and achieve remarkable results.\n            </motion.p>\n\n            {/* Email signup form */}\n            <motion.div\n              initial={{ opacity: 0, y: 20 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: 0.5 }}\n              className=\"mb-6 md:mb-8\"\n            >\n              <div className=\"flex flex-col gap-3 sm:flex-row\">\n                <Input\n                  type=\"email\"\n                  placeholder=\"Enter your email\"\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                  className=\"h-12 flex-1 text-base md:h-14\"\n                />\n                <Button size=\"lg\" className=\"group h-12 md:h-14\">\n                  Get Started\n                  <motion.div\n                    className=\"ml-2\"\n                    animate={{ x: [0, 5, 0] }}\n                    transition={{ repeat: Infinity, duration: 1.5 }}\n                  >\n                    <ArrowRight className=\"h-4 w-4\" />\n                  </motion.div>\n                </Button>\n              </div>\n            </motion.div>\n\n            {/* Benefits list */}\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              transition={{ delay: 0.6 }}\n              className=\"flex flex-wrap gap-4 md:gap-6\"\n            >\n              {benefits.map((benefit, index) => (\n                <motion.div\n                  key={benefit}\n                  initial={{ opacity: 0, x: -20 }}\n                  animate={{ opacity: 1, x: 0 }}\n                  transition={{ delay: 0.7 + index * 0.1 }}\n                  className=\"flex items-center gap-2\"\n                >\n                  <CheckCircle2 className=\"h-5 w-5 text-primary\" />\n                  <span className=\"text-sm text-muted-foreground md:text-base\">\n                    {benefit}\n                  </span>\n                </motion.div>\n              ))}\n            </motion.div>\n\n            {/* Social proof */}\n            <motion.div\n              initial={{ opacity: 0, y: 20 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: 0.9 }}\n              className=\"mt-8 flex flex-wrap items-center gap-4 md:mt-12\"\n            >\n              <div className=\"flex -space-x-2\">\n                {[1, 2, 3, 4].map((i) => (\n                  <motion.div\n                    key={i}\n                    initial={{ scale: 0 }}\n                    animate={{ scale: 1 }}\n                    transition={{ delay: 1 + i * 0.1, type: \"spring\" }}\n                    className=\"h-10 w-10 overflow-hidden rounded-full border-2 border-background\"\n                  >\n                    <img\n                      src={`https://api.dicebear.com/7.x/avataaars/svg?seed=user${i}`}\n                      alt={`User ${i}`}\n                      className=\"h-full w-full object-cover\"\n                    />\n                  </motion.div>\n                ))}\n              </div>\n              <div className=\"text-sm\">\n                <span className=\"font-semibold text-foreground\">10,000+</span>\n                <span className=\"text-muted-foreground\"> happy customers</span>\n              </div>\n            </motion.div>\n          </motion.div>\n\n          {/* Right side - Video/Visual */}\n          <motion.div\n            initial={{ opacity: 0, x: 50 }}\n            animate={{ opacity: 1, x: 0 }}\n            transition={{ duration: 0.8, ease: [0.6, 0.05, 0.01, 0.9] }}\n            className=\"flex items-center justify-center\"\n          >\n            <motion.div\n              onHoverStart={() => setIsVideoHovered(true)}\n              onHoverEnd={() => setIsVideoHovered(false)}\n              className=\"relative w-full max-w-lg\"\n            >\n              <Card className=\"relative overflow-hidden border-border/50 bg-gradient-to-br from-card to-card/50 p-4 shadow-2xl md:p-6\">\n                <motion.div\n                  className=\"relative aspect-video overflow-hidden rounded-lg bg-gradient-to-br from-primary/20 to-primary/5\"\n                  whileHover={{ scale: 1.02 }}\n                  transition={{ duration: 0.3 }}\n                >\n                  {/* Video thumbnail */}\n                  <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-primary/10 to-purple-500/10\">\n                    <motion.div\n                      animate={\n                        isVideoHovered\n                          ? { scale: 1.1, rotate: 0 }\n                          : { scale: 1, rotate: 0 }\n                      }\n                      transition={{ duration: 0.3 }}\n                      className=\"relative\"\n                    >\n                      <motion.div\n                        className=\"absolute inset-0 rounded-full bg-primary/20 blur-xl\"\n                        animate={{ scale: [1, 1.3, 1] }}\n                        transition={{ duration: 2, repeat: Infinity }}\n                      />\n                      <div className=\"relative flex h-16 w-16 items-center justify-center rounded-full bg-primary shadow-lg md:h-20 md:w-20\">\n                        <Play className=\"ml-1 h-8 w-8 text-primary-foreground md:h-10 md:w-10\" />\n                      </div>\n                    </motion.div>\n                  </div>\n\n                  {/* Floating elements */}\n                  <motion.div\n                    className=\"absolute right-4 top-4 rounded-lg bg-background/80 p-2 shadow-lg backdrop-blur-sm md:p-3\"\n                    animate={{ y: [0, -10, 0] }}\n                    transition={{ duration: 3, repeat: Infinity }}\n                  >\n                    <Zap className=\"h-4 w-4 text-primary md:h-5 md:w-5\" />\n                  </motion.div>\n\n                  <motion.div\n                    className=\"absolute bottom-4 left-4 rounded-lg bg-background/80 p-2 shadow-lg backdrop-blur-sm md:p-3\"\n                    animate={{ y: [0, 10, 0] }}\n                    transition={{ duration: 3, repeat: Infinity, delay: 1 }}\n                  >\n                    <CheckCircle2 className=\"h-4 w-4 text-primary md:h-5 md:w-5\" />\n                  </motion.div>\n                </motion.div>\n\n                {/* Stats overlay */}\n                <motion.div\n                  initial={{ opacity: 0, y: 20 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  transition={{ delay: 1.2 }}\n                  className=\"mt-4 grid grid-cols-3 gap-2 md:gap-4\"\n                >\n                  {[\n                    { label: \"Users\", value: \"50K+\" },\n                    { label: \"Rating\", value: \"4.9★\" },\n                    { label: \"Countries\", value: \"120+\" },\n                  ].map((stat, index) => (\n                    <motion.div\n                      key={stat.label}\n                      initial={{ scale: 0 }}\n                      animate={{ scale: 1 }}\n                      transition={{\n                        delay: 1.3 + index * 0.1,\n                        type: \"spring\",\n                      }}\n                      className=\"rounded-lg bg-muted/50 p-2 text-center backdrop-blur-sm md:p-3\"\n                    >\n                      <div className=\"text-base font-bold md:text-lg\">\n                        {stat.value}\n                      </div>\n                      <div className=\"text-xs text-muted-foreground\">\n                        {stat.label}\n                      </div>\n                    </motion.div>\n                  ))}\n                </motion.div>\n              </Card>\n            </motion.div>\n          </motion.div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/cta-hero-block-shadcnui.tsx"
    }
  ]
}