{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"newsletter-03","type":"registry:component","title":"Newsletter 03","description":"A testimonial-focused newsletter signup component with social proof, customer reviews, and company branding. Features centered layout with testimonials grid, star ratings, customer avatars, branded signup card, and company logos. Perfect for building trust and credibility through social proof while capturing newsletter subscriptions with professional presentation.","dependencies":["lucide-react"],"registryDependencies":["avatar","badge","button","card","input"],"files":[{"path":"src/registry/blocks/marketing/landing-pages/newsletter/newsletter-03.tsx","content":"\"use client\";\n\nimport { Quote, Star } from \"lucide-react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/registry/ui/avatar\";\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 Newsletter03Testimonial {\n  id: string;\n  content: string;\n  author: {\n    name: string;\n    title: string;\n    company: string;\n    avatar?: string;\n    initials: string;\n  };\n  rating?: number;\n}\n\nexport interface Newsletter03Company {\n  name: string;\n  className?: string;\n}\n\nexport interface Newsletter03Feature {\n  text: string;\n  icon?: string;\n}\n\nexport interface Newsletter03Props {\n  className?: string;\n}\n\nconst testimonials: Newsletter03Testimonial[] = [\n  {\n    id: \"1\",\n    content:\n      \"This newsletter has become an essential part of my weekly routine. The insights are always actionable and relevant.\",\n    author: {\n      name: \"Sarah Johnson\",\n      title: \"Product Manager\",\n      company: \"Tech Corp\",\n      avatar: \"/placeholder.svg?height=32&width=32\",\n      initials: \"SJ\",\n    },\n    rating: 5,\n  },\n  {\n    id: \"2\",\n    content:\n      \"The quality of content is outstanding. I've implemented several strategies from the newsletter with great results.\",\n    author: {\n      name: \"Mike Kim\",\n      title: \"Founder\",\n      company: \"StartupXYZ\",\n      avatar: \"/placeholder.svg?height=32&width=32\",\n      initials: \"MK\",\n    },\n    rating: 5,\n  },\n  {\n    id: \"3\",\n    content:\n      \"Perfect balance of industry news and practical advice. It's the only newsletter I actually look forward to reading.\",\n    author: {\n      name: \"Alex Lee\",\n      title: \"Marketing Director\",\n      company: \"Agency Pro\",\n      avatar: \"/placeholder.svg?height=32&width=32\",\n      initials: \"AL\",\n    },\n    rating: 5,\n  },\n];\n\nconst features: Newsletter03Feature[] = [\n  { text: \"Free forever\", icon: \"✓\" },\n  { text: \"Unsubscribe anytime\", icon: \"✓\" },\n  { text: \"No spam, ever\", icon: \"✓\" },\n];\n\nconst companies: Newsletter03Company[] = [\n  { name: \"Google\" },\n  { name: \"Microsoft\" },\n  { name: \"Apple\" },\n  { name: \"Netflix\" },\n  { name: \"Spotify\" },\n];\n\nconst content = {\n  title: \"Join Our Community Newsletter\",\n  description:\n    \"Get weekly insights, tips, and resources that help you grow your business and stay ahead of the curve.\",\n  badge: {\n    text: \"Trusted by 25,000+ Professionals\",\n    variant: \"outline\" as const,\n    className: \"bg-primary/5 text-primary border-primary/20\",\n  },\n  formTitle: \"Ready to Join 25,000+ Subscribers?\",\n  formDescription:\n    \"Get our weekly newsletter delivered to your inbox every Tuesday morning.\",\n  placeholder: \"Enter your email address\",\n  buttonText: \"Subscribe Free\",\n  buttonVariant: \"secondary\" as const,\n  socialProofText: \"Trusted by professionals at leading companies\",\n};\n\nconst maxWidth = \"max-w-4xl\";\nconst sectionPadding = \"py-16 px-4\";\n\nexport function Newsletter03({ className }: Newsletter03Props) {\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 renderStars = (rating: number = 5) => {\n    return Array.from({ length: rating }).map((_, i) => (\n      <Star key={i} className=\"h-4 w-4 fill-yellow-400 text-yellow-400\" />\n    ));\n  };\n\n  return (\n    <section className={cn(sectionPadding, className)}>\n      <div className={`${maxWidth} mx-auto`}>\n        {/* Header */}\n        <div className=\"text-center space-y-4 mb-12\">\n          <Badge\n            variant={content.badge.variant}\n            className={content.badge.className}\n          >\n            {content.badge.text}\n          </Badge>\n          <h2 className=\"text-3xl md:text-4xl font-bold\">{content.title}</h2>\n          <p className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\n            {content.description}\n          </p>\n        </div>\n\n        {/* Testimonials */}\n        <div className=\"grid md:grid-cols-3 gap-6 mb-12\">\n          {testimonials.map((testimonial) => (\n            <Card key={testimonial.id} className=\"bg-card border-border\">\n              <CardContent className=\"pt-6\">\n                <div className=\"flex items-center gap-1 mb-3\">\n                  {renderStars(testimonial.rating)}\n                </div>\n                <Quote className=\"h-8 w-8 text-muted-foreground/30 mb-3\" />\n                <p className=\"text-sm text-muted-foreground mb-4\">\n                  \"{testimonial.content}\"\n                </p>\n                <div className=\"flex items-center gap-3\">\n                  <Avatar className=\"h-8 w-8\">\n                    <AvatarImage src={testimonial.author.avatar} />\n                    <AvatarFallback>\n                      {testimonial.author.initials}\n                    </AvatarFallback>\n                  </Avatar>\n                  <div>\n                    <p className=\"text-sm font-medium\">\n                      {testimonial.author.name}\n                    </p>\n                    <p className=\"text-xs text-muted-foreground\">\n                      {testimonial.author.title}, {testimonial.author.company}\n                    </p>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n\n        {/* Newsletter Signup */}\n        <Card className=\"bg-primary text-primary-foreground\">\n          <CardContent className=\"p-8\">\n            <div className=\"text-center space-y-6\">\n              <div className=\"space-y-2\">\n                <h3 className=\"text-2xl font-bold\">{content.formTitle}</h3>\n                <p className=\"text-primary-foreground/80\">\n                  {content.formDescription}\n                </p>\n              </div>\n\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 bg-primary-foreground text-primary border-0 h-12\"\n                  required\n                />\n                <Button\n                  type=\"submit\"\n                  variant={content.buttonVariant}\n                  size=\"lg\"\n                  className=\"h-12 px-8 bg-primary-foreground text-primary hover:bg-primary-foreground/90\"\n                >\n                  {content.buttonText}\n                </Button>\n              </form>\n\n              <div className=\"flex flex-col sm:flex-row items-center justify-center gap-4 text-sm text-primary-foreground/80\">\n                {features.map((feature, index) => (\n                  <span key={index}>\n                    {feature.icon} {feature.text}\n                  </span>\n                ))}\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Social Proof */}\n        <div className=\"text-center mt-8\">\n          <p className=\"text-sm text-muted-foreground mb-4\">\n            {content.socialProofText}\n          </p>\n          <div className=\"flex flex-wrap items-center justify-center gap-8 opacity-60\">\n            {companies.map((company, index) => (\n              <div\n                key={index}\n                className={`text-lg font-semibold ${company.className || \"\"}`}\n              >\n                {company.name}\n              </div>\n            ))}\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"}]}