{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "newsletter-signup-block-shadcnui",
  "type": "registry:block",
  "title": "Newsletter Signup Block",
  "description": "Animated newsletter subscription form with success state and gradient background",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/newsletter-signup-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 { AnimatePresence, motion } from \"framer-motion\";\nimport { Check, Mail, Send, Sparkles } from \"lucide-react\";\nimport { useState } from \"react\";\n\nexport function NewsletterSignupBlock() {\n  const [email, setEmail] = useState(\"\");\n  const [isSubmitted, setIsSubmitted] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (email) {\n      setIsSubmitted(true);\n      setTimeout(() => {\n        setIsSubmitted(false);\n        setEmail(\"\");\n      }, 3000);\n    }\n  };\n\n  return (\n    <section className=\"relative w-full overflow-hidden bg-gradient-to-br from-primary/5 via-background to-primary/10 px-4 py-16\">\n      {/* Animated background elements */}\n      <motion.div\n        animate={{\n          scale: [1, 1.2, 1],\n          rotate: [0, 90, 0],\n        }}\n        transition={{\n          duration: 20,\n          repeat: Infinity,\n          ease: \"linear\",\n        }}\n        className=\"absolute right-0 top-0 h-64 w-64 rounded-full bg-primary/5 blur-3xl\"\n      />\n      <motion.div\n        animate={{\n          scale: [1.2, 1, 1.2],\n          rotate: [0, -90, 0],\n        }}\n        transition={{\n          duration: 15,\n          repeat: Infinity,\n          ease: \"linear\",\n        }}\n        className=\"absolute bottom-0 left-0 h-64 w-64 rounded-full bg-primary/5 blur-3xl\"\n      />\n\n      <div className=\"relative mx-auto max-w-4xl\">\n        <Card className=\"overflow-hidden border-border/50 bg-card/80 shadow-xl backdrop-blur-sm\">\n          <div className=\"grid gap-8 p-8 md:grid-cols-2 md:p-12\">\n            {/* Left side - Content */}\n            <motion.div\n              initial={{ opacity: 0, x: -20 }}\n              animate={{ opacity: 1, x: 0 }}\n              transition={{ duration: 0.6 }}\n              className=\"flex flex-col justify-center\"\n            >\n              <motion.div\n                animate={{ rotate: [0, 10, -10, 0] }}\n                transition={{ duration: 2, repeat: Infinity, repeatDelay: 3 }}\n              >\n                <Badge className=\"mb-4 w-fit\" variant=\"secondary\">\n                  <Sparkles className=\"mr-1 h-3 w-3\" />\n                  Stay Updated\n                </Badge>\n              </motion.div>\n\n              <h2 className=\"mb-4 text-3xl font-bold tracking-tight md:text-4xl\">\n                Join our newsletter\n              </h2>\n              <p className=\"mb-6 text-muted-foreground\">\n                Get the latest updates, articles, and resources delivered\n                directly to your inbox every week. No spam, unsubscribe anytime.\n              </p>\n\n              <div className=\"flex flex-wrap gap-2\">\n                {[\"Weekly updates\", \"Exclusive content\", \"Early access\"].map(\n                  (feature, index) => (\n                    <motion.div\n                      key={feature}\n                      initial={{ opacity: 0, scale: 0.8 }}\n                      animate={{ opacity: 1, scale: 1 }}\n                      transition={{ delay: 0.2 + index * 0.1 }}\n                    >\n                      <Badge variant=\"outline\" className=\"gap-1\">\n                        <Check className=\"h-3 w-3 text-primary\" />\n                        {feature}\n                      </Badge>\n                    </motion.div>\n                  )\n                )}\n              </div>\n            </motion.div>\n\n            {/* Right side - Form */}\n            <motion.div\n              initial={{ opacity: 0, x: 20 }}\n              animate={{ opacity: 1, x: 0 }}\n              transition={{ duration: 0.6, delay: 0.2 }}\n              className=\"flex flex-col justify-center\"\n            >\n              <AnimatePresence mode=\"wait\">\n                {!isSubmitted ? (\n                  <motion.form\n                    key=\"form\"\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0, scale: 0.9 }}\n                    onSubmit={handleSubmit}\n                    className=\"space-y-4\"\n                  >\n                    <div className=\"relative\">\n                      <motion.div\n                        animate={\n                          isFocused\n                            ? {\n                                scale: 1.02,\n                                boxShadow:\n                                  \"0 0 0 3px rgba(var(--primary), 0.1)\",\n                              }\n                            : { scale: 1 }\n                        }\n                        transition={{ duration: 0.2 }}\n                        className=\"rounded-md\"\n                      >\n                        <div className=\"relative\">\n                          <Mail className=\"absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground\" />\n                          <Input\n                            type=\"email\"\n                            placeholder=\"Enter your email\"\n                            value={email}\n                            onChange={(e) => setEmail(e.target.value)}\n                            onFocus={() => setIsFocused(true)}\n                            onBlur={() => setIsFocused(false)}\n                            className=\"pl-10\"\n                            required\n                          />\n                        </div>\n                      </motion.div>\n                    </div>\n\n                    <Button\n                      type=\"submit\"\n                      size=\"lg\"\n                      className=\"group w-full\"\n                      disabled={!email}\n                    >\n                      <span>Subscribe</span>\n                      <motion.div\n                        className=\"ml-2\"\n                        animate={{ x: [0, 5, 0] }}\n                        transition={{\n                          repeat: Infinity,\n                          duration: 1.5,\n                          ease: \"easeInOut\",\n                        }}\n                      >\n                        <Send className=\"h-4 w-4\" />\n                      </motion.div>\n                    </Button>\n\n                    <p className=\"text-center text-xs text-muted-foreground\">\n                      By subscribing, you agree to our Privacy Policy\n                    </p>\n                  </motion.form>\n                ) : (\n                  <motion.div\n                    key=\"success\"\n                    initial={{ opacity: 0, scale: 0.8 }}\n                    animate={{ opacity: 1, scale: 1 }}\n                    exit={{ opacity: 0 }}\n                    className=\"flex flex-col items-center justify-center space-y-4 py-8\"\n                  >\n                    <motion.div\n                      initial={{ scale: 0 }}\n                      animate={{ scale: 1, rotate: 360 }}\n                      transition={{\n                        type: \"spring\",\n                        stiffness: 200,\n                        damping: 15,\n                      }}\n                      className=\"flex h-16 w-16 items-center justify-center rounded-full bg-primary/10\"\n                    >\n                      <Check className=\"h-8 w-8 text-primary\" />\n                    </motion.div>\n\n                    <div className=\"text-center\">\n                      <h3 className=\"mb-2 text-xl font-semibold\">\n                        You're all set!\n                      </h3>\n                      <p className=\"text-sm text-muted-foreground\">\n                        Check your inbox to confirm your subscription\n                      </p>\n                    </div>\n                  </motion.div>\n                )}\n              </AnimatePresence>\n            </motion.div>\n          </div>\n        </Card>\n\n        {/* Trust indicators */}\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ delay: 0.8, duration: 0.5 }}\n          className=\"mt-8 text-center\"\n        >\n          <p className=\"text-sm text-muted-foreground\">\n            Join{\" \"}\n            <motion.span\n              className=\"font-semibold text-foreground\"\n              animate={{ scale: [1, 1.1, 1] }}\n              transition={{ repeat: Infinity, duration: 2, repeatDelay: 3 }}\n            >\n              10,000+\n            </motion.span>{\" \"}\n            subscribers already getting our updates\n          </p>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/newsletter-signup-block-shadcnui.tsx"
    }
  ]
}