{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"newsletter-04","type":"registry:component","title":"Newsletter 04","description":"A hero-style newsletter signup component with full-width background image, gradient overlay, and floating form card. Features split-layout design with compelling hero content on the left and signup form on the right, background image with customizable overlay, gradient text effects, feature bullets with colored dots, statistics display, and glassmorphism form card. Perfect for creative agencies, design platforms, and premium services requiring high-impact visual presentation with immersive signup experience.","dependencies":["lucide-react"],"registryDependencies":["badge","button","card","input"],"files":[{"path":"src/registry/blocks/marketing/landing-pages/newsletter/newsletter-04.tsx","content":"\"use client\";\n\nimport { ArrowRight, Sparkles } from \"lucide-react\";\nimport Image from \"next/image\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport { Button } from \"@/registry/ui/button\";\nimport { Card, CardContent } from \"@/registry/ui/card\";\nimport { Input } from \"@/registry/ui/input\";\n\nexport interface Newsletter04Feature {\n  text: string;\n  color: string;\n}\n\nexport interface Newsletter04Stat {\n  value: string;\n  label: string;\n}\n\nexport interface Newsletter04FormField {\n  id: string;\n  type: \"text\" | \"email\" | \"select\";\n  placeholder?: string;\n  options?: Array<{ value: string; label: string }>;\n  required?: boolean;\n}\n\nexport interface Newsletter04Props {\n  className?: string;\n}\n\nconst features: Newsletter04Feature[] = [\n  { text: \"Exclusive design resources and templates\", color: \"bg-blue-400\" },\n  { text: \"Behind-the-scenes creative processes\", color: \"bg-purple-400\" },\n  { text: \"Interviews with industry leaders\", color: \"bg-pink-400\" },\n];\n\nconst stats: Newsletter04Stat[] = [\n  { value: \"15k+\", label: \"Creatives\" },\n  { value: \"4.9★\", label: \"Rating\" },\n  { value: \"Weekly\", label: \"Delivery\" },\n];\n\nconst formFields: Newsletter04FormField[] = [\n  {\n    id: \"name\",\n    type: \"text\",\n    placeholder: \"Your name\",\n    required: true,\n  },\n  {\n    id: \"email\",\n    type: \"email\",\n    placeholder: \"Your email address\",\n    required: true,\n  },\n  {\n    id: \"role\",\n    type: \"select\",\n    placeholder: \"What's your role?\",\n    options: [\n      { value: \"\", label: \"What's your role?\" },\n      { value: \"designer\", label: \"Designer\" },\n      { value: \"developer\", label: \"Developer\" },\n      { value: \"manager\", label: \"Product Manager\" },\n      { value: \"founder\", label: \"Founder\" },\n      { value: \"other\", label: \"Other\" },\n    ],\n    required: false,\n  },\n];\n\nconst trustFeatures = [\"100% Free\", \"No Spam\", \"Unsubscribe Anytime\"];\n\nconst content = {\n  title: \"Transform Your\",\n  subtitle: \"Creative Journey\",\n  description:\n    \"Discover cutting-edge design trends, creative techniques, and industry insights that will elevate your work to the next level.\",\n  badge: { text: \"Weekly Inspiration\", icon: Sparkles },\n  backgroundImage: {\n    src: \"/placeholder.svg?height=600&width=1200&text=Newsletter+Background+Image\",\n    alt: \"Newsletter background\",\n    className: \"w-full h-full object-cover\",\n  },\n  overlayGradient: \"bg-gradient-to-r from-black/80 via-black/60 to-black/80\",\n  formTitle: \"Join the Community\",\n  formDescription: \"Get weekly inspiration delivered to your inbox\",\n  buttonText: \"Start My Creative Journey\",\n  buttonIcon: ArrowRight,\n  disclaimer:\n    \"By signing up, you agree to our Terms of Service and Privacy Policy\",\n};\n\nconst maxWidth = \"max-w-4xl\";\nconst sectionPadding = \"py-16 px-4\";\nconst minHeight = \"min-h-[500px]\";\n\nexport function Newsletter04({ className }: Newsletter04Props) {\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    const data: Record<string, string> = {};\n\n    formFields.forEach((field) => {\n      data[field.id] = formData.get(field.id) as string;\n    });\n\n    console.log(\"Newsletter subscription:\", data);\n  };\n\n  const BadgeIcon = content.badge.icon;\n  const ButtonIcon = content.buttonIcon;\n\n  return (\n    <section\n      className={cn(sectionPadding, \"relative overflow-hidden\", className)}\n    >\n      {/* Background Image */}\n      <div className=\"absolute inset-0\">\n        <Image\n          src={content.backgroundImage.src}\n          alt={content.backgroundImage.alt}\n          fill\n          className={content.backgroundImage.className || \"object-cover\"}\n          priority\n        />\n        <div className={`absolute inset-0 ${content.overlayGradient}`} />\n      </div>\n\n      {/* Content */}\n      <div className={`relative z-10 ${maxWidth} mx-auto`}>\n        <div className={`grid lg:grid-cols-2 gap-12 items-center ${minHeight}`}>\n          {/* Left side - Hero Content */}\n          <div className=\"text-white space-y-6\">\n            <div className=\"space-y-4\">\n              <Badge className=\"bg-white/20 text-white border-white/30 backdrop-blur-sm\">\n                {BadgeIcon && <BadgeIcon className=\"w-3 h-3 mr-1\" />}\n                {content.badge.text}\n              </Badge>\n              <h2 className=\"text-4xl md:text-5xl font-bold leading-tight\">\n                {content.title}\n                <span className=\"block text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400\">\n                  {content.subtitle}\n                </span>\n              </h2>\n              <p className=\"text-xl text-white/90 leading-relaxed\">\n                {content.description}\n              </p>\n            </div>\n\n            {/* Features */}\n            <div className=\"space-y-3\">\n              {features.map((feature, index) => (\n                <div\n                  key={index}\n                  className=\"flex items-center gap-3 text-white/80\"\n                >\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            {/* Stats */}\n            <div className=\"flex gap-8 pt-4\">\n              {stats.map((stat, index) => (\n                <div key={index}>\n                  <div className=\"text-3xl font-bold text-white\">\n                    {stat.value}\n                  </div>\n                  <div className=\"text-sm text-white/60\">{stat.label}</div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {/* Right side - Signup Form */}\n          <div className=\"flex justify-center lg:justify-end\">\n            <Card className=\"w-full max-w-md bg-white/95 backdrop-blur-sm border-0 shadow-2xl\">\n              <CardContent className=\"p-8\">\n                <div className=\"space-y-6\">\n                  <div className=\"text-center space-y-2\">\n                    <h3 className=\"text-2xl font-bold\">{content.formTitle}</h3>\n                    <p className=\"text-muted-foreground\">\n                      {content.formDescription}\n                    </p>\n                  </div>\n\n                  <form onSubmit={handleSubmit} className=\"space-y-4\">\n                    {formFields.map((field) => (\n                      <div key={field.id} className=\"space-y-2\">\n                        {field.type === \"select\" ? (\n                          <select\n                            name={field.id}\n                            className=\"w-full h-12 px-3 bg-background border border-border rounded-md text-sm\"\n                            required={field.required}\n                          >\n                            {field.options?.map((option) => (\n                              <option key={option.value} value={option.value}>\n                                {option.label}\n                              </option>\n                            ))}\n                          </select>\n                        ) : (\n                          <Input\n                            name={field.id}\n                            type={field.type}\n                            placeholder={field.placeholder}\n                            className=\"h-12 bg-background border-border\"\n                            required={field.required}\n                          />\n                        )}\n                      </div>\n                    ))}\n                    <Button\n                      type=\"submit\"\n                      className=\"w-full h-12 text-base\"\n                      size=\"lg\"\n                    >\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-3\">\n                    <div className=\"flex items-center justify-center gap-4 text-xs text-muted-foreground\">\n                      {trustFeatures.map((feature, index) => (\n                        <span key={index}>✓ {feature}</span>\n                      ))}\n                    </div>\n\n                    <p className=\"text-xs text-muted-foreground\">\n                      {content.disclaimer.includes(\"Terms of Service\") &&\n                      content.disclaimer.includes(\"Privacy Policy\") ? (\n                        <>\n                          {content.disclaimer.split(\"Terms of Service\")[0]}\n                          <a href=\"#\" className=\"text-primary hover:underline\">\n                            Terms of Service\n                          </a>\n                          {\n                            content.disclaimer\n                              .split(\"Terms of Service\")[1]\n                              .split(\"Privacy Policy\")[0]\n                          }\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                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\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"}]}