{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"newsletter-02","type":"registry:component","title":"Newsletter 02","description":"A comprehensive newsletter signup component with split-layout design featuring benefits list, statistics, and detailed form. Features two-column responsive layout with content on the left and form card on the right, customizable benefits with checkmarks, statistics with icons, multi-field form, and professional styling. Perfect for B2B platforms, professional services, and content marketing requiring detailed user information collection.","dependencies":["lucide-react"],"registryDependencies":["badge","button","card","input"],"files":[{"path":"src/registry/blocks/marketing/landing-pages/newsletter/newsletter-02.tsx","content":"\"use client\";\n\nimport {\n  CheckCircle,\n  Gift,\n  type LucideIcon,\n  TrendingUp,\n  Users,\n  Zap,\n} 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 Newsletter02Benefit {\n  text: string;\n  icon?: LucideIcon;\n}\n\nexport interface Newsletter02Stat {\n  icon: LucideIcon;\n  value: string;\n  label: string;\n}\n\nexport interface Newsletter02FormField {\n  id: string;\n  label: string;\n  type: string;\n  placeholder: string;\n  required?: boolean;\n}\n\nexport interface Newsletter02Props {\n  className?: string;\n}\n\nconst benefits: Newsletter02Benefit[] = [\n  { text: \"Weekly industry insights and trends\" },\n  { text: \"Exclusive templates and resources\" },\n  { text: \"Early access to new features\" },\n  { text: \"Expert tips from industry leaders\" },\n];\n\nconst stats: Newsletter02Stat[] = [\n  { icon: Users, value: \"50k+\", label: \"Subscribers\" },\n  { icon: TrendingUp, value: \"98%\", label: \"Satisfaction\" },\n  { icon: Zap, value: \"5min\", label: \"Read Time\" },\n];\n\nconst formFields: Newsletter02FormField[] = [\n  {\n    id: \"name\",\n    label: \"Full Name\",\n    type: \"text\",\n    placeholder: \"Enter your full name\",\n    required: true,\n  },\n  {\n    id: \"email\",\n    label: \"Email Address\",\n    type: \"email\",\n    placeholder: \"Enter your email address\",\n    required: true,\n  },\n  {\n    id: \"company\",\n    label: \"Company (Optional)\",\n    type: \"text\",\n    placeholder: \"Your company name\",\n    required: false,\n  },\n];\n\nconst content = {\n  title: \"Get Exclusive Insights & Resources\",\n  description:\n    \"Join 50,000+ professionals who receive our weekly newsletter packed with actionable tips, industry insights, and exclusive resources.\",\n  badge: { text: \"Free Resources\", icon: Gift },\n  formTitle: \"Start Your Free Subscription\",\n  formDescription: \"No credit card required. Unsubscribe at any time.\",\n  buttonText: \"Subscribe Now\",\n  companiesText:\n    \"Join professionals from companies like Google, Microsoft, and Apple\",\n};\n\nconst maxWidth = \"max-w-6xl\";\nconst sectionPadding = \"py-16 px-4\";\nconst backgroundClassName = \"bg-muted/30\";\n\nexport function Newsletter02({ className }: Newsletter02Props) {\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\n  return (\n    <section className={cn(sectionPadding, backgroundClassName, className)}>\n      <div className={`${maxWidth} mx-auto`}>\n        <div className=\"grid lg:grid-cols-2 gap-8 items-center\">\n          {/* Left side - Content */}\n          <div className=\"space-y-6\">\n            <div className=\"space-y-4\">\n              <Badge className=\"bg-primary text-primary-foreground\">\n                {BadgeIcon && <BadgeIcon className=\"w-3 h-3 mr-1\" />}\n                {content.badge.text}\n              </Badge>\n              <h2 className=\"text-3xl md:text-4xl font-bold\">\n                {content.title}\n              </h2>\n              <p className=\"text-lg text-muted-foreground\">\n                {content.description}\n              </p>\n            </div>\n\n            {/* Benefits List */}\n            <div className=\"space-y-3\">\n              {benefits.map((benefit, index) => {\n                const BenefitIcon = benefit.icon || CheckCircle;\n                return (\n                  <div key={index} className=\"flex items-center gap-3\">\n                    <BenefitIcon className=\"h-5 w-5 text-green-500 flex-shrink-0\" />\n                    <span className=\"text-muted-foreground\">\n                      {benefit.text}\n                    </span>\n                  </div>\n                );\n              })}\n            </div>\n\n            {/* Stats */}\n            <div className=\"grid grid-cols-3 gap-4 pt-4\">\n              {stats.map((stat, index) => {\n                const StatIcon = stat.icon;\n                return (\n                  <div key={index} className=\"text-center\">\n                    <div className=\"flex items-center justify-center gap-1 mb-1\">\n                      <StatIcon className=\"h-4 w-4 text-primary\" />\n                      <span className=\"text-2xl font-bold\">{stat.value}</span>\n                    </div>\n                    <p className=\"text-xs text-muted-foreground\">\n                      {stat.label}\n                    </p>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n\n          {/* Right side - Form */}\n          <Card className=\"bg-card border-border shadow-xl\">\n            <CardHeader className=\"text-center\">\n              <CardTitle className=\"text-2xl\">{content.formTitle}</CardTitle>\n              <CardDescription>{content.formDescription}</CardDescription>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <form onSubmit={handleSubmit} className=\"space-y-4\">\n                {formFields.map((field) => (\n                  <div key={field.id} className=\"space-y-2\">\n                    <label htmlFor={field.id} className=\"text-sm font-medium\">\n                      {field.label}\n                    </label>\n                    <Input\n                      id={field.id}\n                      name={field.id}\n                      type={field.type}\n                      placeholder={field.placeholder}\n                      className=\"bg-background border-border\"\n                      required={field.required}\n                    />\n                  </div>\n                ))}\n                <Button type=\"submit\" className=\"w-full\" size=\"lg\">\n                  {content.buttonText}\n                </Button>\n              </form>\n\n              <div className=\"text-center\">\n                <p className=\"text-xs text-muted-foreground\">\n                  {content.companiesText}\n                </p>\n              </div>\n            </CardContent>\n          </Card>\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"}]}