{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comingsoon3",
  "title": "Social Connect Launch",
  "description": "Coming soon section featuring social media links with icons for Twitter, GitHub, LinkedIn, and Email in pill-style buttons. Perfect for building a community and keeping followers engaged before launch.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/comingsoon3/comingsoon3.tsx",
      "content": "\"use client\";\n\nimport { Github, Linkedin, Mail, Twitter } from \"lucide-react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport Link from \"next/link\";\nimport { cn } from \"@/lib/utils\";\n\ninterface SocialLink {\n  icon?: React.ReactNode;\n  label: string;\n  href?: string;\n}\n\ninterface ComingSoon3Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  description?: string;\n  socialHeading?: string;\n  socialLinks?: SocialLink[];\n  className?: string;\n}\n\nexport const comingsoon3Demo: ComingSoon3Props = {\n  badge: { label: \"Launching Soon\", variant: \"secondary\" },\n  heading: \"Stay connected\",\n  description:\n    \"Follow us on social media to get the latest updates and be the first to know when we launch.\",\n  socialHeading: \"Find us on\",\n  socialLinks: [\n    {\n      icon: <Twitter className=\"size-5\" />,\n      label: \"Twitter\",\n      href: \"https://x.com/withbeste\",\n    },\n    {\n      icon: <Github className=\"size-5\" />,\n      label: \"GitHub\",\n      href: \"#\",\n    },\n    {\n      icon: <Linkedin className=\"size-5\" />,\n      label: \"LinkedIn\",\n      href: \"#\",\n    },\n    {\n      icon: <Mail className=\"size-5\" />,\n      label: \"Email\",\n      href: \"#\",\n    },\n  ],\n};\n\nexport function ComingSoon3({\n  badge,\n  heading,\n  description,\n  socialHeading,\n  socialLinks = [],\n  className,\n}: ComingSoon3Props) {\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-4xl px-4 md:px-6\">\n        <div className=\"flex flex-col items-center text-center gap-6 md:gap-8\">\n          {badge && (\n            <div>\n              <Badge variant={badge.variant ?? \"default\"}>{badge.label}</Badge>\n            </div>\n          )}\n\n          {heading && (\n            <h2 className=\"text-4xl md:text-5xl lg:text-6xl font-bold text-balance max-w-4xl\">\n              {heading}\n            </h2>\n          )}\n\n          {description && (\n            <p className=\"text-lg md:text-xl text-balance max-w-2xl text-muted-foreground\">\n              {description}\n            </p>\n          )}\n\n          {socialLinks.length > 0 && (\n            <div className=\"mt-6\">\n              {socialHeading && (\n                <div className=\"text-sm font-medium mb-4 uppercase tracking-wider text-muted-foreground\">\n                  {socialHeading}\n                </div>\n              )}\n\n              <div className=\"flex flex-wrap justify-center gap-4\">\n                {socialLinks.map((social, index) => {\n                  const content = (\n                    <span className=\"flex items-center gap-3\">\n                      {social.icon && (\n                        <span className=\"transition-transform group-hover:scale-110\">\n                          {social.icon}\n                        </span>\n                      )}\n                      <span className=\"font-medium\">{social.label}</span>\n                    </span>\n                  );\n\n                  const linkClassName = cn(\n                    \"group flex items-center gap-3 px-6 py-3 rounded-full transition-all duration-300\",\n                    \"bg-muted hover:bg-muted/80\"\n                  );\n\n                  if (social.href) {\n                    return (\n                      <Link\n                        key={index}\n                        href={social.href}\n                        className={linkClassName}\n                      >\n                        {content}\n                      </Link>\n                    );\n                  }\n\n                  return (\n                    <div key={index} className={linkClassName}>\n                      {content}\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n          )}\n\n          <div className=\"mt-4 flex items-center gap-2 text-sm text-muted-foreground\">\n            <span className=\"inline-block w-2 h-2 rounded-full animate-pulse bg-green-500\" />\n            <span>Launching soon</span>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/comingsoon3.tsx"
    }
  ],
  "type": "registry:block"
}