{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "newsletter-signup-block-baseui",
  "type": "registry:block",
  "title": "Newsletter Signup Block",
  "description": "Animated newsletter subscription form with success state and gradient background (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/sections/newsletter-signup-block-baseui.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@base-ui/react/button\";\nimport { Input } from \"@base-ui/react/input\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Check, Mail, Send, Sparkles } from \"lucide-react\";\nimport { useState } from \"react\";\n\nexport function NewsletterSignupBlockBaseui() {\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        <div className=\"overflow-hidden rounded-lg border border-border/50 bg-card/50 text-card-foreground 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                <span className=\"mb-4 inline-flex w-fit items-center rounded-full border border-transparent bg-secondary px-2.5 py-0.5 text-xs font-semibold text-secondary-foreground\">\n                  <Sparkles className=\"mr-1 h-3 w-3\" />\n                  Stay Updated\n                </span>\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                      <span className=\"inline-flex items-center gap-1 rounded-full border border-border px-2.5 py-0.5 text-xs font-semibold\">\n                        <Check className=\"h-3 w-3 text-primary\" />\n                        {feature}\n                      </span>\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=\"flex h-10 w-full rounded-md border border-input bg-background pl-10 pr-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n                            required\n                          />\n                        </div>\n                      </motion.div>\n                    </div>\n\n                    <Button\n                      type=\"submit\"\n                      className=\"group inline-flex h-11 w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\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        </div>\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-baseui.tsx"
    }
  ]
}