{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"newsletter-01","type":"registry:component","title":"Newsletter 01","description":"A clean and professional newsletter signup component with centered card layout, icon branding, customizable features list, and form validation. Features responsive design, badge labeling, trust indicators, and privacy disclaimer. Perfect for marketing pages, landing pages, and subscription-based services requiring user email collection with professional presentation.","dependencies":["lucide-react"],"registryDependencies":["badge","button","card","input"],"files":[{"path":"src/registry/blocks/marketing/landing-pages/newsletter/newsletter-01.tsx","content":"\"use client\";\n\nimport { ArrowRight, Mail } from \"lucide-react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport { Button } from \"@/registry/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/ui/card\";\nimport { Input } from \"@/registry/ui/input\";\n\nexport interface Newsletter01Feature {\n  text: string;\n  color: string;\n}\n\nexport interface Newsletter01Props {\n  className?: string;\n}\n\nconst features: Newsletter01Feature[] = [\n  { text: \"Free forever\", color: \"bg-green-500\" },\n  { text: \"Unsubscribe anytime\", color: \"bg-blue-500\" },\n  { text: \"No spam\", color: \"bg-purple-500\" },\n];\n\nconst content = {\n  title: \"Join Our Newsletter\",\n  description:\n    \"Get the latest updates, exclusive content, and insider tips delivered straight to your inbox every week.\",\n  badge: { text: \"Stay Updated\", variant: \"secondary\" as const },\n  icon: { component: Mail, className: \"h-8 w-8 text-primary\" },\n  placeholder: \"Enter your email address\",\n  buttonText: \"Subscribe\",\n  buttonIcon: ArrowRight,\n  disclaimer:\n    \"By subscribing, you agree to our Privacy Policy and consent to receive updates from our company.\",\n};\n\nconst maxWidth = \"max-w-4xl\";\nconst sectionPadding = \"py-16 px-4\";\n\nexport function Newsletter01({ className }: Newsletter01Props) {\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    const email = formData.get(\"email\") as string;\n    console.log(\"Newsletter subscription:\", email);\n  };\n\n  const IconComponent = content.icon.component;\n  const ButtonIcon = content.buttonIcon;\n\n  return (\n    <section className={cn(sectionPadding, className)}>\n      <div className={`${maxWidth} mx-auto`}>\n        <Card className=\"bg-card border-border shadow-lg\">\n          <CardHeader className=\"text-center space-y-4 pb-8\">\n            <div className=\"mx-auto w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center\">\n              <IconComponent\n                className={content.icon.className || \"h-8 w-8 text-primary\"}\n              />\n            </div>\n            <div className=\"space-y-2\">\n              <Badge\n                variant={content.badge.variant}\n                className={`bg-primary/10 text-primary`}\n              >\n                {content.badge.text}\n              </Badge>\n              <CardTitle className=\"text-3xl md:text-4xl font-bold\">\n                {content.title}\n              </CardTitle>\n              <CardDescription className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\n                {content.description}\n              </CardDescription>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-6\">\n            <form\n              onSubmit={handleSubmit}\n              className=\"flex flex-col sm:flex-row gap-3 max-w-md mx-auto\"\n            >\n              <Input\n                type=\"email\"\n                name=\"email\"\n                placeholder={content.placeholder}\n                className=\"flex-1 h-12 bg-background border-border\"\n                required\n              />\n              <Button type=\"submit\" size=\"lg\" className=\"h-12 px-8\">\n                {content.buttonText}\n                {ButtonIcon && <ButtonIcon className=\"ml-2 h-4 w-4\" />}\n              </Button>\n            </form>\n\n            <div className=\"text-center space-y-4\">\n              <div className=\"flex items-center justify-center gap-4 text-sm text-muted-foreground\">\n                {features.map((feature, index) => (\n                  <div key={index} className=\"flex items-center gap-2\">\n                    <div\n                      className={`w-2 h-2 ${feature.color} rounded-full`}\n                    ></div>\n                    <span>{feature.text}</span>\n                  </div>\n                ))}\n              </div>\n\n              <p className=\"text-xs text-muted-foreground\">\n                {content.disclaimer.includes(\"Privacy Policy\") ? (\n                  <>\n                    {content.disclaimer.split(\"Privacy Policy\")[0]}\n                    <a href=\"#\" className=\"text-primary hover:underline\">\n                      Privacy Policy\n                    </a>\n                    {content.disclaimer.split(\"Privacy Policy\")[1]}\n                  </>\n                ) : (\n                  content.disclaimer\n                )}\n              </p>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}