{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-blog-sections-case-study-showcase","type":"registry:block","title":"Case Study Showcase","files":[{"path":"components/blocks/marketing/blog-sections/case-study-showcase.tsx","content":"import { Button } from '@/components/ui/button';\nimport { Badge } from '@/components/ui/badge';\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/components/ui/card';\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';\nimport {\n  BarChart2,\n  Clock,\n  Calendar,\n  Quote,\n  Building,\n  Award,\n  Share2,\n  ArrowRight,\n  Download,\n} from 'lucide-react';\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/components/ui/hover-card';\n\n// Types for our case study data\ninterface Metric {\n  label: string;\n  value: string;\n  previous?: string;\n  percentageChange?: number;\n  isPositive?: boolean;\n}\n\ninterface CaseStudyContent {\n  challenge: string[];\n  solution: string[];\n  results: string[];\n}\n\ninterface Testimonial {\n  quote: string;\n  author: string;\n  position: string;\n  company: string;\n  avatarUrl?: string;\n}\n\ninterface CaseStudy {\n  id: string;\n  title: string;\n  subtitle: string;\n  client: {\n    name: string;\n    industry: string;\n    size: string;\n    logoUrl: string;\n  };\n  publishDate: string;\n  duration: string;\n  coverImageUrl: string;\n  projectType: string[];\n  metrics: Metric[];\n  content: CaseStudyContent;\n  testimonial?: Testimonial;\n  relatedCaseStudies?: { id: string; title: string }[];\n  downloadUrl?: string;\n}\n\n// Sample data for a case study\nconst caseStudyData: CaseStudy = {\n  id: 'ecommerce-platform-optimization',\n  title: 'Boosting E-Commerce Conversion with Data-Driven UX Redesign',\n  subtitle:\n    'How OptimizeNow helped Retail Giant increase mobile conversions by 37%',\n  client: {\n    name: 'FashionHub',\n    industry: 'Retail / Fashion',\n    size: 'Mid Enterprise (500-1000 employees)',\n    logoUrl:\n      'https://images.unsplash.com/photo-1526948128573-703ee1aeb6fa?q=80&w=100&h=100&auto=format&fit=crop',\n  },\n  publishDate: 'March 14, 2023',\n  duration: '3 months',\n  coverImageUrl:\n    'https://images.unsplash.com/photo-1600132806370-bf17e65e942f?q=80&w=2069&auto=format&fit=crop',\n  projectType: ['UX Optimization', 'Mobile Conversion', 'A/B Testing'],\n  metrics: [\n    {\n      label: 'Mobile Conversion Rate',\n      value: '3.8%',\n      previous: '2.3%',\n      percentageChange: 37,\n      isPositive: true,\n    },\n    {\n      label: 'Cart Abandonment',\n      value: '58%',\n      previous: '72%',\n      percentageChange: 19,\n      isPositive: true,\n    },\n    {\n      label: 'Average Order Value',\n      value: '$78.50',\n      previous: '$67.25',\n      percentageChange: 16,\n      isPositive: true,\n    },\n    {\n      label: 'Page Load Speed',\n      value: '1.2s',\n      previous: '3.5s',\n      percentageChange: 65,\n      isPositive: true,\n    },\n  ],\n  content: {\n    challenge: [\n      \"FashionHub's mobile conversion rates were significantly lower than desktop, despite 68% of traffic coming from mobile devices.\",\n      'The checkout process had a 72% abandonment rate, much higher than industry average.',\n      'Customer feedback indicated friction points in the product selection and payment processes.',\n      'The site suffered from slow load times on mobile, especially on 3G connections in key markets.',\n    ],\n    solution: [\n      'Conducted comprehensive user testing with 50 customers to identify specific pain points in the mobile journey.',\n      'Implemented a streamlined checkout process, reducing steps from 5 to 3 without sacrificing data collection.',\n      'Redesigned the product page layout with a focus on mobile-first interaction patterns.',\n      'Optimized image loading and implemented progressive web app features to improve performance.',\n      'Developed a robust A/B testing framework to validate all changes before full deployment.',\n    ],\n    results: [\n      'Increased mobile conversion rate by 37%, exceeding the initial goal of 25%.',\n      'Reduced cart abandonment rate from 72% to 58%, recovering an estimated $1.2M in monthly revenue.',\n      'Improved average order value by 16% through strategic cross-sell implementation.',\n      \"Decreased page load time by 65%, bringing the site well within Google's recommended performance metrics.\",\n      'Achieved a 98% customer satisfaction score for the new mobile checkout experience.',\n    ],\n  },\n  testimonial: {\n    quote:\n      'The OptimizeNow team went beyond simple UI tweaks to deliver a fundamental rethinking of our mobile experience. Their data-driven approach gave us confidence at every step, and the results speak for themselves.',\n    author: 'Sarah Chen',\n    position: 'Chief Digital Officer',\n    company: 'FashionHub',\n    avatarUrl:\n      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=100&h=100&auto=format&fit=crop',\n  },\n  relatedCaseStudies: [\n    {\n      id: 'omnichannel-retail-strategy',\n      title: 'Omnichannel Retail Strategy for BoutiqueBrands',\n    },\n    {\n      id: 'personalization-engine',\n      title: 'AI-Powered Personalization Engine Implementation',\n    },\n  ],\n  downloadUrl: '#',\n};\n\nexport default function BlogSectionCaseStudyShowcase() {\n  const {\n    title,\n    subtitle,\n    client,\n    publishDate,\n    duration,\n    coverImageUrl,\n    projectType,\n    metrics,\n    content,\n    testimonial,\n    relatedCaseStudies,\n    downloadUrl,\n  } = caseStudyData;\n\n  return (\n    <section className=\"bg-background py-24\">\n      <div className=\"container mx-auto max-w-6xl px-4 md:px-6 2xl:max-w-[1400px]\">\n        {/* Header and Cover */}\n        <div className=\"mb-12\">\n          <div className=\"mb-8 flex flex-col justify-between gap-8 lg:flex-row lg:items-center\">\n            <div className=\"space-y-4\">\n              <div className=\"flex items-center gap-2\">\n                <div className=\"relative h-8 w-8 overflow-hidden rounded\">\n                  <img\n                    src={client.logoUrl}\n                    alt={client.name}\n                    className=\"object-cover\"\n                  />\n                </div>\n                <HoverCard>\n                  <HoverCardTrigger asChild>\n                    <Button\n                      variant=\"link\"\n                      className=\"text-muted-foreground hover:text-foreground h-auto p-0\"\n                    >\n                      {client.name}\n                    </Button>\n                  </HoverCardTrigger>\n                  <HoverCardContent className=\"w-80\">\n                    <div className=\"flex justify-between space-x-4\">\n                      <div className=\"space-y-1\">\n                        <h4 className=\"text-sm font-semibold\">{client.name}</h4>\n                        <div className=\"text-muted-foreground flex items-center gap-2 text-xs\">\n                          <Building className=\"h-3.5 w-3.5\" />\n                          <span>{client.industry}</span>\n                        </div>\n                        <div className=\"text-muted-foreground text-xs\">\n                          Company Size: {client.size}\n                        </div>\n                      </div>\n                      <div className=\"relative h-16 w-16 overflow-hidden rounded\">\n                        <img\n                          src={client.logoUrl}\n                          alt={client.name}\n                          className=\"object-cover\"\n                        />\n                      </div>\n                    </div>\n                  </HoverCardContent>\n                </HoverCard>\n              </div>\n              <h1 className=\"text-4xl font-bold tracking-tight\">{title}</h1>\n              <p className=\"text-muted-foreground text-xl\">{subtitle}</p>\n              <div className=\"flex flex-wrap items-center gap-3 text-sm\">\n                <div className=\"text-muted-foreground flex items-center gap-1\">\n                  <Calendar className=\"h-4 w-4\" />\n                  <span>{publishDate}</span>\n                </div>\n                <div className=\"text-muted-foreground flex items-center gap-1\">\n                  <Clock className=\"h-4 w-4\" />\n                  <span>{duration}</span>\n                </div>\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3 sm:flex-row\">\n              {downloadUrl && (\n                <Button variant=\"outline\" size=\"sm\" className=\"gap-2\" asChild>\n                  <a href={downloadUrl}>\n                    <Download className=\"h-4 w-4\" />\n                    Download PDF\n                  </a>\n                </Button>\n              )}\n              <Button variant=\"outline\" size=\"sm\" className=\"gap-2\">\n                <Share2 className=\"h-4 w-4\" />\n                Share Case Study\n              </Button>\n            </div>\n          </div>\n\n          {/* Project Type Tags */}\n          <div className=\"mb-8 flex flex-wrap gap-2\">\n            {projectType.map((type, index) => (\n              <Badge key={index} variant=\"secondary\">\n                {type}\n              </Badge>\n            ))}\n          </div>\n\n          {/* Cover Image */}\n          <div className=\"relative aspect-[21/9] w-full overflow-hidden rounded-lg\">\n            <img\n              src={coverImageUrl}\n              alt={title}\n              className=\"object-cover\"\n            />\n          </div>\n        </div>\n\n        {/* Key Metrics */}\n        <div className=\"mb-16\">\n          <h2 className=\"mb-6 flex items-center gap-2 text-2xl font-bold\">\n            <BarChart2 className=\"text-primary h-5 w-5\" />\n            Key Results\n          </h2>\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n            {metrics.map((metric, index) => (\n              <Card key={index} className=\"bg-background border\">\n                <CardHeader className=\"pb-2\">\n                  <h3 className=\"text-muted-foreground text-sm font-medium\">\n                    {metric.label}\n                  </h3>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"text-3xl font-bold\">{metric.value}</div>\n                  {metric.previous && metric.percentageChange && (\n                    <div\n                      className={`mt-1 flex items-center text-sm ${\n                        metric.isPositive ? 'text-green-500' : 'text-red-500'\n                      }`}\n                    >\n                      <span>\n                        {metric.isPositive ? '+' : ''}\n                        {metric.percentageChange}%\n                      </span>\n                      <span className=\"text-muted-foreground ml-2\">\n                        from {metric.previous}\n                      </span>\n                    </div>\n                  )}\n                </CardContent>\n              </Card>\n            ))}\n          </div>\n        </div>\n\n        {/* Case Study Tabs */}\n        <div className=\"mb-16\">\n          <Tabs defaultValue=\"challenge\">\n            <TabsList className=\"grid w-full grid-cols-3\">\n              <TabsTrigger value=\"challenge\">Challenge</TabsTrigger>\n              <TabsTrigger value=\"solution\">Solution</TabsTrigger>\n              <TabsTrigger value=\"results\">Results</TabsTrigger>\n            </TabsList>\n\n            <TabsContent value=\"challenge\" className=\"mt-6 space-y-4\">\n              {content.challenge.map((paragraph, i) => (\n                <p key={i} className=\"text-muted-foreground\">\n                  {paragraph}\n                </p>\n              ))}\n            </TabsContent>\n\n            <TabsContent value=\"solution\" className=\"mt-6 space-y-4\">\n              {content.solution.map((paragraph, i) => (\n                <p key={i} className=\"text-muted-foreground\">\n                  {paragraph}\n                </p>\n              ))}\n            </TabsContent>\n\n            <TabsContent value=\"results\" className=\"mt-6 space-y-4\">\n              {content.results.map((paragraph, i) => (\n                <p key={i} className=\"text-muted-foreground\">\n                  {paragraph}\n                </p>\n              ))}\n            </TabsContent>\n          </Tabs>\n        </div>\n\n        {/* Testimonial */}\n        {testimonial && (\n          <div className=\"mb-16\">\n            <Card className=\"bg-muted/50\">\n              <CardContent className=\"pt-6\">\n                <div className=\"flex flex-col items-start gap-6 md:flex-row\">\n                  {testimonial.avatarUrl && (\n                    <div className=\"border-background relative h-16 w-16 overflow-hidden rounded-full border-4\">\n                      <img\n                        src={testimonial.avatarUrl}\n                        alt={testimonial.author}\n                        className=\"object-cover\"\n                      />\n                    </div>\n                  )}\n                  <div className=\"space-y-4\">\n                    <div className=\"relative\">\n                      <Quote className=\"text-primary/20 absolute -top-4 -left-2 h-8 w-8\" />\n                      <p className=\"relative z-10 pl-7 text-lg italic\">\n                        &quot;{testimonial.quote}&quot;\n                      </p>\n                    </div>\n                    <div>\n                      <div className=\"font-semibold\">{testimonial.author}</div>\n                      <div className=\"text-muted-foreground text-sm\">\n                        {testimonial.position}, {testimonial.company}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        )}\n\n        {/* Related Case Studies */}\n        {relatedCaseStudies && relatedCaseStudies.length > 0 && (\n          <div>\n            <h2 className=\"mb-6 flex items-center gap-2 text-2xl font-bold\">\n              <Award className=\"text-primary h-5 w-5\" />\n              Related Case Studies\n            </h2>\n            <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n              {relatedCaseStudies.map((study, index) => (\n                <Card\n                  key={index}\n                  className=\"group gap-3 transition-all hover:shadow-md\"\n                >\n                  <CardContent className=\"\">\n                    <h3 className=\"group-hover:text-primary mb-2 text-xl font-medium transition-colors\">\n                      {study.title}\n                    </h3>\n                  </CardContent>\n                  <CardFooter>\n                    <Button\n                      variant=\"ghost\"\n                      className=\"group-hover:text-primary gap-1 p-0\"\n                      asChild\n                    >\n                      <a href={`/case-studies/${study.id}`}>\n                        View Case Study\n                        <ArrowRight className=\"h-4 w-4 transition-transform group-hover:translate-x-1\" />\n                      </a>\n                    </Button>\n                  </CardFooter>\n                </Card>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/blog-sections/case-study-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/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"},{"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/tabs.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n","type":"registry:ui","target":"components/ui/tabs.tsx"},{"path":"components/ui/hover-card.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n","type":"registry:ui","target":"components/ui/hover-card.tsx"}],"description":"A grid of case study cards with logos, results, and short summaries. Use it to present customer stories and proof on a results focused blog page.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}