{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-integrations-featured-showcase","type":"registry:block","title":"Featured Showcase","files":[{"path":"components/blocks/marketing/integrations/featured-showcase.tsx","content":"import { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Badge } from '@/components/ui/badge';\nimport {\n  ExternalLink,\n  Star,\n  Users,\n  Clock,\n  Shield,\n  Zap,\n  CheckCircle,\n  ArrowRight,\n} from 'lucide-react';\n\nexport default function IntegrationsFeaturedShowcase() {\n  const featuredIntegrations = [\n    {\n      id: 1,\n      name: 'Stripe',\n      category: 'Payment Processing',\n      description:\n        \"The world's most powerful payment infrastructure. Accept payments globally with advanced fraud protection and industry-leading conversion rates.\",\n      logo: 'https://images.unsplash.com/photo-1563013544-824ae1b704d3?q=80&w=120&h=120&auto=format&fit=crop&ixlib=rb-4.0.3',\n      coverImage:\n        'https://images.unsplash.com/photo-1556742502-ec7c0e9f34b1?q=80&w=600&h=300&auto=format&fit=crop&ixlib=rb-4.0.3',\n      rating: 4.9,\n      reviews: 12450,\n      users: '2M+',\n      setupTime: '5 minutes',\n      tier: 'Enterprise Ready',\n      features: [\n        'Accept 135+ currencies',\n        'Advanced fraud protection',\n        'Real-time reporting',\n        'Subscription management',\n        'Mobile SDKs',\n        '24/7 support',\n      ],\n      stats: [\n        { label: 'Success Rate', value: '99.9%' },\n        { label: 'Integration Time', value: '< 1 hour' },\n        { label: 'Countries', value: '46+' },\n      ],\n    },\n    {\n      id: 2,\n      name: 'Slack',\n      category: 'Team Communication',\n      description:\n        \"Transform your team collaboration with Slack's powerful messaging platform. Connect, communicate, and coordinate work in organized spaces.\",\n      logo: 'https://images.unsplash.com/photo-1611224923853-80b023f02d71?q=80&w=120&h=120&auto=format&fit=crop&ixlib=rb-4.0.3',\n      coverImage:\n        'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=600&h=300&auto=format&fit=crop&ixlib=rb-4.0.3',\n      rating: 4.8,\n      reviews: 8970,\n      users: '10M+',\n      setupTime: '2 minutes',\n      tier: 'Team Favorite',\n      features: [\n        'Unlimited messaging',\n        'File sharing & search',\n        'App integrations',\n        'Video & voice calls',\n        'Workflow automation',\n        'Enterprise security',\n      ],\n      stats: [\n        { label: 'Active Users', value: '10M+' },\n        { label: 'Messages/Day', value: '1B+' },\n        { label: 'Integrations', value: '2,400+' },\n      ],\n    },\n    {\n      id: 3,\n      name: 'GitHub',\n      category: 'Developer Tools',\n      description:\n        'The complete developer platform to build, scale, and deliver secure software. Collaborate on code with powerful version control.',\n      logo: 'https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?q=80&w=120&h=120&auto=format&fit=crop&ixlib=rb-4.0.3',\n      coverImage:\n        'https://images.unsplash.com/photo-1556075798-4825dfaaf498?q=80&w=600&h=300&auto=format&fit=crop&ixlib=rb-4.0.3',\n      rating: 4.9,\n      reviews: 15680,\n      users: '100M+',\n      setupTime: '3 minutes',\n      tier: 'Developer Essential',\n      features: [\n        'Git repositories',\n        'Code reviews',\n        'Issue tracking',\n        'CI/CD pipelines',\n        'Security scanning',\n        'Project management',\n      ],\n      stats: [\n        { label: 'Repositories', value: '420M+' },\n        { label: 'Developers', value: '100M+' },\n        { label: 'Organizations', value: '4M+' },\n      ],\n    },\n  ];\n\n  const getTierColor = (tier: string) => {\n    switch (tier) {\n      case 'Enterprise Ready':\n        return 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300';\n      case 'Team Favorite':\n        return 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300';\n      case 'Developer Essential':\n        return 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300';\n      default:\n        return 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300';\n    }\n  };\n\n  return (\n    <>\n      {/* Featured Integrations Showcase */}\n      <div className=\"py-24 lg:py-32\">\n        <div className=\"container mx-auto px-4 md:px-6 2xl:max-w-[1400px]\">\n          {/* Header */}\n          <div className=\"mx-auto max-w-3xl text-center\">\n            <Badge className=\"mb-4\" variant=\"outline\">\n              <Zap className=\"mr-2 h-4 w-4\" />\n              Featured Integrations\n            </Badge>\n            <h2 className=\"text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl\">\n              Enterprise-Grade Integrations\n            </h2>\n            <p className=\"text-muted-foreground mt-6 text-lg\">\n              Connect with the most trusted and powerful tools used by millions\n              of developers and businesses worldwide. Each integration is\n              thoroughly tested and enterprise-ready.\n            </p>\n          </div>\n\n          {/* Featured Integration Cards */}\n          <div className=\"mt-16 space-y-12\">\n            {featuredIntegrations.map((integration, index) => (\n              <Card key={integration.id} className=\"overflow-hidden py-0\">\n                <div\n                  className={`grid gap-8 lg:grid-cols-2 ${index % 2 === 1 ? 'lg:grid-flow-col-dense' : ''}`}\n                >\n                  {/* Image Section */}\n                  <div\n                    className={`relative ${index % 2 === 1 ? 'lg:col-start-2' : ''}`}\n                  >\n                    <div className=\"relative h-64 w-full overflow-hidden lg:h-full\">\n                      <img\n                        src={integration.coverImage}\n                        alt={`${integration.name} showcase`}\n                        className=\"object-cover\"\n                      />\n                      <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent\" />\n\n                      {/* Floating Stats */}\n                      <div className=\"absolute right-4 bottom-4 left-4\">\n                        <div className=\"flex gap-2 overflow-x-auto\">\n                          {integration.stats.map((stat) => (\n                            <div\n                              key={stat.label}\n                              className=\"flex-shrink-0 rounded-lg bg-white/90 px-3 py-2 backdrop-blur-sm\"\n                            >\n                              <div className=\"text-xs font-medium text-gray-600\">\n                                {stat.label}\n                              </div>\n                              <div className=\"text-sm font-bold text-gray-900\">\n                                {stat.value}\n                              </div>\n                            </div>\n                          ))}\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n\n                  {/* Content Section */}\n                  <CardContent\n                    className={`p-8 ${index % 2 === 1 ? 'lg:col-start-1' : ''}`}\n                  >\n                    {/* Header */}\n                    <div className=\"flex items-start justify-between\">\n                      <div className=\"flex items-center gap-4\">\n                        <div className=\"relative h-16 w-16 overflow-hidden rounded-xl\">\n                          <img\n                            src={integration.logo}\n                            alt={`${integration.name} logo`}\n                            className=\"object-cover\"\n                          />\n                        </div>\n                        <div>\n                          <h3 className=\"text-2xl font-bold\">\n                            {integration.name}\n                          </h3>\n                          <p className=\"text-muted-foreground\">\n                            {integration.category}\n                          </p>\n                        </div>\n                      </div>\n                      <Badge className={`${getTierColor(integration.tier)}`}>\n                        {integration.tier}\n                      </Badge>\n                    </div>\n\n                    {/* Description */}\n                    <p className=\"text-muted-foreground mt-6 text-lg leading-relaxed\">\n                      {integration.description}\n                    </p>\n\n                    {/* Features Grid */}\n                    <div className=\"mt-6\">\n                      <h4 className=\"mb-4 text-sm font-semibold tracking-wide uppercase\">\n                        Key Features\n                      </h4>\n                      <div className=\"grid gap-2 sm:grid-cols-2\">\n                        {integration.features.map((feature) => (\n                          <div\n                            key={feature}\n                            className=\"flex items-center gap-2\"\n                          >\n                            <CheckCircle className=\"h-4 w-4 text-green-500\" />\n                            <span className=\"text-sm\">{feature}</span>\n                          </div>\n                        ))}\n                      </div>\n                    </div>\n\n                    {/* Stats Row */}\n                    <div className=\"mt-8 flex flex-wrap items-center gap-6 text-sm\">\n                      <div className=\"flex items-center gap-1\">\n                        <Star className=\"h-4 w-4 fill-yellow-400 text-yellow-400\" />\n                        <span className=\"font-medium\">\n                          {integration.rating}\n                        </span>\n                        <span className=\"text-muted-foreground\">\n                          ({integration.reviews.toLocaleString()} reviews)\n                        </span>\n                      </div>\n                      <div className=\"flex items-center gap-1\">\n                        <Users className=\"text-muted-foreground h-4 w-4\" />\n                        <span className=\"text-muted-foreground\">\n                          {integration.users} users\n                        </span>\n                      </div>\n                      <div className=\"flex items-center gap-1\">\n                        <Clock className=\"text-muted-foreground h-4 w-4\" />\n                        <span className=\"text-muted-foreground\">\n                          {integration.setupTime} setup\n                        </span>\n                      </div>\n                    </div>\n\n                    {/* Action Buttons */}\n                    <div className=\"mt-8 flex flex-col gap-3 sm:flex-row\">\n                      <Button size=\"lg\" className=\"flex-1\">\n                        <Shield className=\"mr-2 h-4 w-4\" />\n                        Connect Securely\n                      </Button>\n                      <Button size=\"lg\" variant=\"outline\">\n                        View Documentation\n                        <ExternalLink className=\"ml-2 h-4 w-4\" />\n                      </Button>\n                    </div>\n\n                    {/* Trust Indicators */}\n                    <div className=\"text-muted-foreground mt-6 flex items-center gap-4 text-sm\">\n                      <div className=\"flex items-center gap-1\">\n                        <Shield className=\"h-4 w-4\" />\n                        <span>Enterprise Security</span>\n                      </div>\n                      <div className=\"flex items-center gap-1\">\n                        <CheckCircle className=\"h-4 w-4\" />\n                        <span>SOC 2 Compliant</span>\n                      </div>\n                      <div className=\"flex items-center gap-1\">\n                        <Zap className=\"h-4 w-4\" />\n                        <span>99.9% Uptime</span>\n                      </div>\n                    </div>\n                  </CardContent>\n                </div>\n              </Card>\n            ))}\n          </div>\n\n          {/* Bottom CTA Section */}\n          <div className=\"mt-20\">\n            <Card className=\"bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-950/30 dark:to-purple-950/30\">\n              <CardContent className=\"p-12 text-center\">\n                <h3 className=\"text-2xl font-bold\">Ready to Get Started?</h3>\n                <p className=\"text-muted-foreground mt-4 text-lg\">\n                  Join thousands of companies already using these integrations\n                  to power their business.\n                </p>\n                <div className=\"mt-8 flex flex-col gap-4 sm:flex-row sm:justify-center\">\n                  <Button size=\"lg\">\n                    Browse All Integrations\n                    <ArrowRight className=\"ml-2 h-4 w-4\" />\n                  </Button>\n                  <Button size=\"lg\" variant=\"outline\">\n                    Contact Sales\n                  </Button>\n                </div>\n                <p className=\"text-muted-foreground mt-6 text-sm\">\n                  Free 14-day trial • No credit card required • Cancel anytime\n                </p>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n      {/* End Featured Integrations Showcase */}\n    </>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/integrations/featured-showcase.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/card.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/badge.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n","type":"registry:ui","target":"components/ui/badge.tsx"}],"description":"A large card spotlighting one key integration with its logo, summary, and a link. Use it to highlight a flagship partner above the full list.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}