{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-about-sections-diversity-inclusion","type":"registry:block","title":"Diversity & Inclusion","files":[{"path":"components/blocks/marketing/about-sections/diversity-inclusion.tsx","content":"import { useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';\nimport { Badge } from '@/components/ui/badge';\nimport {\n  UsersIcon,\n  GlobeIcon,\n  HeartHandshakeIcon,\n  MedalIcon,\n  UserPlusIcon,\n  BarChartIcon,\n} from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select';\n\n// Define types for DEI initiatives\ntype Initiative = {\n  id: string;\n  title: string;\n  description: string;\n  icon: React.ElementType;\n  metrics?: {\n    value: string;\n    label: string;\n  }[];\n  image?: string;\n};\n\n// Define categories\ntype Category = {\n  id: string;\n  title: string;\n  description: string;\n  initiatives: Initiative[];\n};\n\nconst categories: Category[] = [\n  {\n    id: 'workplace',\n    title: 'Inclusive Workplace',\n    description:\n      'Creating an environment where everyone feels welcome, respected, and able to contribute their best work.',\n    initiatives: [\n      {\n        id: 'hiring',\n        title: 'Inclusive Hiring',\n        description:\n          'We&apos;ve implemented structured interviewing and blind resume reviews to minimize bias in our hiring process. Our job descriptions are crafted to be inclusive, and we partner with organizations focused on underrepresented groups in tech.',\n        icon: UserPlusIcon,\n        metrics: [\n          { value: '45%', label: 'Women in leadership' },\n          { value: '38%', label: 'Employees from underrepresented groups' },\n          { value: '30+', label: 'Countries represented' },\n        ],\n        image:\n          'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=1200',\n      },\n      {\n        id: 'education',\n        title: 'Ongoing Education',\n        description:\n          'Regular workshops, training sessions, and open discussions that help our team understand the importance of diversity and how to be more inclusive in their daily interactions.',\n        icon: GlobeIcon,\n        metrics: [\n          { value: '100%', label: 'Employees trained in DEI' },\n          { value: '12', label: 'DEI workshops per year' },\n          { value: '4.8/5', label: 'Average workshop rating' },\n        ],\n      },\n      {\n        id: 'ergs',\n        title: 'Employee Resource Groups',\n        description:\n          'We support and fund employee-led groups that foster a diverse, inclusive workplace aligned with our organizational values. These groups serve as resources for employees and the company.',\n        icon: UsersIcon,\n        metrics: [\n          { value: '9', label: 'Active ERGs' },\n          { value: '68%', label: 'Employee participation' },\n          { value: '$150K', label: 'Annual ERG funding' },\n        ],\n        image:\n          'https://images.unsplash.com/photo-1558403194-611308249627?q=80&w=1200',\n      },\n    ],\n  },\n  {\n    id: 'product',\n    title: 'Inclusive Products',\n    description:\n      'Designing products and services that work for everyone, regardless of background or ability.',\n    initiatives: [\n      {\n        id: 'accessibility',\n        title: 'Accessibility Standards',\n        description:\n          'Our product teams adhere to WCAG 2.1 AA standards at minimum. We regularly conduct accessibility audits and include people with disabilities in our user testing to ensure our products work for everyone.',\n        icon: HeartHandshakeIcon,\n        metrics: [\n          { value: '100%', label: 'WCAG 2.1 AA compliance' },\n          { value: 'Quarterly', label: 'Accessibility audits' },\n          { value: '15+', label: 'Inclusive design patterns' },\n        ],\n        image:\n          'https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=1200',\n      },\n      {\n        id: 'localization',\n        title: 'Global Localization',\n        description:\n          'We design our products with global audiences in mind, accounting for cultural differences, language nuances, and regional preferences to create truly inclusive experiences.',\n        icon: GlobeIcon,\n        metrics: [\n          { value: '24', label: 'Supported languages' },\n          { value: '95%', label: 'Translation coverage' },\n          { value: '12', label: 'Localization specialists' },\n        ],\n      },\n      {\n        id: 'diverse-testing',\n        title: 'Diverse User Testing',\n        description:\n          'We ensure our user research and testing includes diverse participants across demographics, abilities, and backgrounds to capture a wide range of perspectives and needs.',\n        icon: UsersIcon,\n        metrics: [\n          { value: '500+', label: 'Diverse testers' },\n          { value: '40+', label: 'Countries represented' },\n          { value: '20%', label: 'Testers with disabilities' },\n        ],\n        image:\n          'https://images.unsplash.com/photo-1523240795612-9a054b0db644?q=80&w=1200',\n      },\n    ],\n  },\n  {\n    id: 'community',\n    title: 'Community Impact',\n    description:\n      'Extending our commitment beyond our company to create positive change in the broader community.',\n    initiatives: [\n      {\n        id: 'partnerships',\n        title: 'Strategic Partnerships',\n        description:\n          'We collaborate with organizations that promote diversity in tech and education, providing funding, volunteer hours, and expertise to support their important work.',\n        icon: HeartHandshakeIcon,\n        metrics: [\n          { value: '15+', label: 'Partner organizations' },\n          { value: '$2M', label: 'Annual contributions' },\n          { value: '5,000+', label: 'Volunteer hours' },\n        ],\n        image:\n          'https://images.unsplash.com/photo-1556484687-30636164638b?q=80&w=1200',\n      },\n      {\n        id: 'education',\n        title: 'Education Initiatives',\n        description:\n          'We run programs that introduce technology careers to underrepresented groups, including coding camps, mentorship programs, and scholarships for promising students.',\n        icon: UsersIcon,\n        metrics: [\n          { value: '250', label: 'Annual scholarships' },\n          { value: '1,200+', label: 'Students mentored' },\n          { value: '85%', label: 'Program graduation rate' },\n        ],\n      },\n      {\n        id: 'supplier-diversity',\n        title: 'Supplier Diversity',\n        description:\n          'We actively seek to work with diverse suppliers and vendors, ensuring our procurement practices reflect our commitment to economic inclusion.',\n        icon: BarChartIcon,\n        metrics: [\n          { value: '32%', label: 'Diverse suppliers' },\n          { value: '$12M+', label: 'Annual diverse spend' },\n          { value: '4×', label: 'Growth in 3 years' },\n        ],\n        image:\n          'https://images.unsplash.com/photo-1566669437687-7040a6926753?q=80&w=1200',\n      },\n    ],\n  },\n  {\n    id: 'transparency',\n    title: 'Transparency & Progress',\n    description:\n      'Measuring our progress, holding ourselves accountable, and sharing our journey openly.',\n    initiatives: [\n      {\n        id: 'reporting',\n        title: 'Public Reporting',\n        description:\n          'We publish annual diversity reports that share our demographics, goals, successes, and areas for improvement. We believe transparency drives accountability and progress.',\n        icon: BarChartIcon,\n        metrics: [\n          { value: '5', label: 'Years of public reporting' },\n          { value: '12', label: 'Tracked metrics' },\n          { value: 'Quarterly', label: 'Internal updates' },\n        ],\n        image:\n          'https://images.unsplash.com/photo-1551836022-deb4988cc6c0?q=80&w=1200',\n      },\n      {\n        id: 'goals',\n        title: 'Measurable Goals',\n        description:\n          'We set specific, measurable goals for diversity, equity, and inclusion across all aspects of our business, with executive accountability for progress.',\n        icon: MedalIcon,\n        metrics: [\n          { value: '15%', label: 'YoY diversity growth' },\n          { value: '100%', label: 'Pay equity achieved' },\n          { value: '90%', label: 'Belonging index score' },\n        ],\n      },\n      {\n        id: 'recognition',\n        title: 'External Recognition',\n        description:\n          \"While we don't pursue DEI work for awards, we're proud to be recognized for our efforts by independent organizations that evaluate workplace equality.\",\n        icon: MedalIcon,\n        metrics: [\n          { value: 'Top 10', label: 'Most inclusive employers' },\n          { value: '100%', label: 'HRC equality index' },\n          { value: '5 Stars', label: 'Disability equality index' },\n        ],\n        image:\n          'https://images.unsplash.com/photo-1507537297725-24a1c029d3ca?q=80&w=1200',\n      },\n    ],\n  },\n];\n\nexport default function AboutSectionDiversityInclusion() {\n  const [activeCategory, setActiveCategory] = useState(categories[0]!.id);\n\n  const currentCategory =\n    categories.find((category) => category.id === activeCategory) ||\n    categories[0]!;\n\n  return (\n    <section className=\"py-24\">\n      <div className=\"container mx-auto px-4 md:px-6 2xl:max-w-[1400px]\">\n        <div className=\"mx-auto mb-16 max-w-3xl space-y-4 text-center\">\n          <div className=\"bg-primary/10 text-primary inline-block rounded-lg px-3 py-1 text-sm\">\n            Diversity & Inclusion\n          </div>\n          <h2 className=\"text-3xl font-bold tracking-tight md:text-4xl\">\n            Building a More Equitable Future Together\n          </h2>\n          <p className=\"text-muted-foreground\">\n            Our commitment to diversity, equity, and inclusion runs deep in\n            everything we do—from how we build our teams to how we build our\n            products.\n          </p>\n        </div>\n\n        <Tabs\n          defaultValue={categories[0]!.id}\n          value={activeCategory}\n          onValueChange={setActiveCategory}\n          className=\"space-y-8\"\n        >\n          {/* Category selection - Tabs for md+ screens, Dropdown for smaller screens */}\n          <div className=\"flex justify-center\">\n            {/* Dropdown for small screens */}\n            <div className=\"mb-6 w-full md:hidden\">\n              <Select value={activeCategory} onValueChange={setActiveCategory}>\n                <SelectTrigger className=\"w-full\">\n                  <SelectValue placeholder=\"Select category\" />\n                </SelectTrigger>\n                <SelectContent>\n                  {categories.map((category) => (\n                    <SelectItem key={category.id} value={category.id}>\n                      {category.title}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n\n            {/* Tabs for medium screens and above */}\n            <TabsList className=\"hidden h-auto grid-cols-4 p-1 md:grid\">\n              {categories.map((category) => (\n                <TabsTrigger\n                  key={category.id}\n                  value={category.id}\n                  className=\"data-[state=active]:bg-primary data-[state=active]:text-primary-foreground px-3 py-2.5\"\n                >\n                  {category.title}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n          </div>\n\n          {/* Category description */}\n          <div className=\"mx-auto max-w-2xl text-center\">\n            <p className=\"text-muted-foreground\">\n              {currentCategory.description}\n            </p>\n          </div>\n\n          {/* Initiatives */}\n          {categories.map((category) => (\n            <TabsContent\n              key={category.id}\n              value={category.id}\n              className=\"space-y-12\"\n            >\n              {category.initiatives.map((initiative, index) => {\n                const Icon = initiative.icon;\n                const isEven = index % 2 === 0;\n\n                return (\n                  <div\n                    key={initiative.id}\n                    className=\"grid items-center gap-8 md:grid-cols-12\"\n                  >\n                    {/* Initiative details */}\n                    <div\n                      className={cn(\n                        'space-y-6 md:col-span-7',\n                        isEven ? 'md:order-1' : 'md:order-2'\n                      )}\n                    >\n                      <div className=\"flex items-center gap-3\">\n                        <div className=\"bg-primary/10 rounded-md p-2\">\n                          <Icon className=\"text-primary h-6 w-6\" />\n                        </div>\n                        <h3 className=\"text-2xl font-bold\">\n                          {initiative.title}\n                        </h3>\n                      </div>\n\n                      <p className=\"text-muted-foreground\">\n                        {initiative.description}\n                      </p>\n\n                      {initiative.metrics && (\n                        <div className=\"grid grid-cols-3 gap-4 pt-2\">\n                          {initiative.metrics.map((metric, i) => (\n                            <div key={i} className=\"text-center\">\n                              <div className=\"text-primary text-2xl font-bold\">\n                                {metric.value}\n                              </div>\n                              <div className=\"text-muted-foreground mt-1 text-xs\">\n                                {metric.label}\n                              </div>\n                            </div>\n                          ))}\n                        </div>\n                      )}\n                    </div>\n\n                    {/* Initiative image (if available) */}\n                    {initiative.image ? (\n                      <div\n                        className={cn(\n                          'md:col-span-5',\n                          isEven ? 'md:order-2' : 'md:order-1'\n                        )}\n                      >\n                        <div className=\"relative aspect-[4/3] overflow-hidden rounded-xl\">\n                          <img\n                            src={initiative.image}\n                            alt={initiative.title}\n                            className=\"object-cover\"\n                          />\n                        </div>\n                      </div>\n                    ) : (\n                      <div\n                        className={cn(\n                          'flex h-full items-center justify-center md:col-span-5',\n                          isEven ? 'md:order-2' : 'md:order-1'\n                        )}\n                      >\n                        <Card className=\"bg-muted/30 flex h-full min-h-[280px] w-full items-center justify-center\">\n                          <CardContent className=\"p-6 text-center\">\n                            <Icon className=\"text-muted-foreground/50 mx-auto mb-4 h-16 w-16\" />\n                            <Badge variant=\"secondary\" className=\"mx-auto\">\n                              Learn more about our{' '}\n                              {initiative.title.toLowerCase()} initiative\n                            </Badge>\n                          </CardContent>\n                        </Card>\n                      </div>\n                    )}\n                  </div>\n                );\n              })}\n            </TabsContent>\n          ))}\n        </Tabs>\n\n        {/* CTA section */}\n        <div className=\"mt-20 text-center\">\n          <div className=\"bg-muted mb-8 inline-flex items-center justify-center rounded-full p-1\">\n            <Badge className=\"bg-primary text-primary-foreground rounded-full px-4 py-1\">\n              Join us in making a difference\n            </Badge>\n          </div>\n\n          <h3 className=\"mb-4 text-2xl font-bold\">\n            Become Part of Our Inclusive Community\n          </h3>\n          <p className=\"text-muted-foreground mx-auto mb-8 max-w-2xl\">\n            We&apos;re always looking for passionate individuals who share our\n            commitment to diversity, equity, and inclusion to join our team.\n          </p>\n\n          <div className=\"flex flex-wrap justify-center gap-4\">\n            <Button asChild size=\"lg\">\n              <a href=\"#\">Join Our Team</a>\n            </Button>\n            <Button asChild variant=\"outline\" size=\"lg\">\n              <a href=\"#\">Read Our Annual Report</a>\n            </Button>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/about-sections/diversity-inclusion.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/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/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/select.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, CheckIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\"relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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\", position ===\"popper\"&&\"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\", className )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"pointer-events-none\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n","type":"registry:ui","target":"components/ui/select.tsx"}],"description":"A section pairing a statement on belonging with supporting stats and imagery. Use it to show how your company invests in people and fairness.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}