4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T4091,import { useState } from 'react'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Badge } from '@/components/ui/badge'; import { UsersIcon, GlobeIcon, HeartHandshakeIcon, MedalIcon, UserPlusIcon, BarChartIcon, } from 'lucide-react'; import { cn } from '@/lib/utils'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; // Define types for DEI initiatives type Initiative = { id: string; title: string; description: string; icon: React.ElementType; metrics?: { value: string; label: string; }[]; image?: string; }; // Define categories type Category = { id: string; title: string; description: string; initiatives: Initiative[]; }; const categories: Category[] = [ { id: 'workplace', title: 'Inclusive Workplace', description: 'Creating an environment where everyone feels welcome, respected, and able to contribute their best work.', initiatives: [ { id: 'hiring', title: 'Inclusive Hiring', description: 'We'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.', icon: UserPlusIcon, metrics: [ { value: '45%', label: 'Women in leadership' }, { value: '38%', label: 'Employees from underrepresented groups' }, { value: '30+', label: 'Countries represented' }, ], image: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=1200', }, { id: 'education', title: 'Ongoing Education', description: '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.', icon: GlobeIcon, metrics: [ { value: '100%', label: 'Employees trained in DEI' }, { value: '12', label: 'DEI workshops per year' }, { value: '4.8/5', label: 'Average workshop rating' }, ], }, { id: 'ergs', title: 'Employee Resource Groups', description: '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.', icon: UsersIcon, metrics: [ { value: '9', label: 'Active ERGs' }, { value: '68%', label: 'Employee participation' }, { value: '$150K', label: 'Annual ERG funding' }, ], image: 'https://images.unsplash.com/photo-1558403194-611308249627?q=80&w=1200', }, ], }, { id: 'product', title: 'Inclusive Products', description: 'Designing products and services that work for everyone, regardless of background or ability.', initiatives: [ { id: 'accessibility', title: 'Accessibility Standards', description: '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.', icon: HeartHandshakeIcon, metrics: [ { value: '100%', label: 'WCAG 2.1 AA compliance' }, { value: 'Quarterly', label: 'Accessibility audits' }, { value: '15+', label: 'Inclusive design patterns' }, ], image: 'https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=1200', }, { id: 'localization', title: 'Global Localization', description: 'We design our products with global audiences in mind, accounting for cultural differences, language nuances, and regional preferences to create truly inclusive experiences.', icon: GlobeIcon, metrics: [ { value: '24', label: 'Supported languages' }, { value: '95%', label: 'Translation coverage' }, { value: '12', label: 'Localization specialists' }, ], }, { id: 'diverse-testing', title: 'Diverse User Testing', description: 'We ensure our user research and testing includes diverse participants across demographics, abilities, and backgrounds to capture a wide range of perspectives and needs.', icon: UsersIcon, metrics: [ { value: '500+', label: 'Diverse testers' }, { value: '40+', label: 'Countries represented' }, { value: '20%', label: 'Testers with disabilities' }, ], image: 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?q=80&w=1200', }, ], }, { id: 'community', title: 'Community Impact', description: 'Extending our commitment beyond our company to create positive change in the broader community.', initiatives: [ { id: 'partnerships', title: 'Strategic Partnerships', description: 'We collaborate with organizations that promote diversity in tech and education, providing funding, volunteer hours, and expertise to support their important work.', icon: HeartHandshakeIcon, metrics: [ { value: '15+', label: 'Partner organizations' }, { value: '$2M', label: 'Annual contributions' }, { value: '5,000+', label: 'Volunteer hours' }, ], image: 'https://images.unsplash.com/photo-1556484687-30636164638b?q=80&w=1200', }, { id: 'education', title: 'Education Initiatives', description: 'We run programs that introduce technology careers to underrepresented groups, including coding camps, mentorship programs, and scholarships for promising students.', icon: UsersIcon, metrics: [ { value: '250', label: 'Annual scholarships' }, { value: '1,200+', label: 'Students mentored' }, { value: '85%', label: 'Program graduation rate' }, ], }, { id: 'supplier-diversity', title: 'Supplier Diversity', description: 'We actively seek to work with diverse suppliers and vendors, ensuring our procurement practices reflect our commitment to economic inclusion.', icon: BarChartIcon, metrics: [ { value: '32%', label: 'Diverse suppliers' }, { value: '$12M+', label: 'Annual diverse spend' }, { value: '4×', label: 'Growth in 3 years' }, ], image: 'https://images.unsplash.com/photo-1566669437687-7040a6926753?q=80&w=1200', }, ], }, { id: 'transparency', title: 'Transparency & Progress', description: 'Measuring our progress, holding ourselves accountable, and sharing our journey openly.', initiatives: [ { id: 'reporting', title: 'Public Reporting', description: 'We publish annual diversity reports that share our demographics, goals, successes, and areas for improvement. We believe transparency drives accountability and progress.', icon: BarChartIcon, metrics: [ { value: '5', label: 'Years of public reporting' }, { value: '12', label: 'Tracked metrics' }, { value: 'Quarterly', label: 'Internal updates' }, ], image: 'https://images.unsplash.com/photo-1551836022-deb4988cc6c0?q=80&w=1200', }, { id: 'goals', title: 'Measurable Goals', description: 'We set specific, measurable goals for diversity, equity, and inclusion across all aspects of our business, with executive accountability for progress.', icon: MedalIcon, metrics: [ { value: '15%', label: 'YoY diversity growth' }, { value: '100%', label: 'Pay equity achieved' }, { value: '90%', label: 'Belonging index score' }, ], }, { id: 'recognition', title: 'External Recognition', description: "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.", icon: MedalIcon, metrics: [ { value: 'Top 10', label: 'Most inclusive employers' }, { value: '100%', label: 'HRC equality index' }, { value: '5 Stars', label: 'Disability equality index' }, ], image: 'https://images.unsplash.com/photo-1507537297725-24a1c029d3ca?q=80&w=1200', }, ], }, ]; export default function AboutSectionDiversityInclusion() { const [activeCategory, setActiveCategory] = useState(categories[0]!.id); const currentCategory = categories.find((category) => category.id === activeCategory) || categories[0]!; return (

Diversity & Inclusion

Building a More Equitable Future Together

Our commitment to diversity, equity, and inclusion runs deep in everything we do—from how we build our teams to how we build our products.

{/* Category selection - Tabs for md+ screens, Dropdown for smaller screens */}

{/* Dropdown for small screens */}

{/* Tabs for medium screens and above */} {categories.map((category) => ( {category.title} ))}

{/* Category description */}

{currentCategory.description}

{/* Initiatives */} {categories.map((category) => ( {category.initiatives.map((initiative, index) => { const Icon = initiative.icon; const isEven = index % 2 === 0; return (

{/* Initiative details */}

{initiative.title}

{initiative.description}

{initiative.metrics && (

{initiative.metrics.map((metric, i) => (

{metric.value}

{metric.label}

))}

)}

{/* Initiative image (if available) */} {initiative.image ? (

) : (

Learn more about our{' '} {initiative.title.toLowerCase()} initiative

)}

); })} ))} {/* CTA section */}

Join us in making a difference

Become Part of Our Inclusive Community

We're always looking for passionate individuals who share our commitment to diversity, equity, and inclusion to join our team.

); } 53:Td06,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const buttonVariants = cva( "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", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/80", outline: "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", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground", ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50", destructive: "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", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "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", 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", 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", lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", icon: "size-9", "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3", "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md", "icon-lg": "size-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) function Button({ className, variant = "default", size = "default", asChild = false, ...props }: React.ComponentProps<"button"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "button" return ( ) } export { Button, buttonVariants } 54:Ta35,import * as React from "react" import { cn } from "@/lib/utils" function Card({ className, size = "default", ...props }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) { return (

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", className )} {...props} /> ) } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } 55:Tdf4,"use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Tabs as TabsPrimitive } from "radix-ui" import { cn } from "@/lib/utils" function Tabs({ className, orientation = "horizontal", ...props }: React.ComponentProps) { return ( ) } const tabsListVariants = cva( "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", { variants: { variant: { default: "bg-muted", line: "gap-1 bg-transparent", }, }, defaultVariants: { variant: "default", }, } ) function TabsList({ className, variant = "default", ...props }: React.ComponentProps & VariantProps) { return ( ) } function TabsTrigger({ className, ...props }: React.ComponentProps) { return ( ) } function TabsContent({ className, ...props }: React.ComponentProps) { return ( ) } export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants } 56:T749,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const badgeVariants = cva( "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!", { variants: { variant: { default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80", destructive: "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", outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground", ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50", link: "text-primary underline-offset-4 hover:underline", }, }, defaultVariants: { variant: "default", }, } ) function Badge({ className, variant = "default", asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "span" return ( ) } export { Badge, badgeVariants } 57:T19eb,"use client" import * as React from "react" import { Select as SelectPrimitive } from "radix-ui" import { cn } from "@/lib/utils" import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react" function Select({ ...props }: React.ComponentProps) { return } function SelectGroup({ className, ...props }: React.ComponentProps) { return ( ) } function SelectValue({ ...props }: React.ComponentProps) { return } function SelectTrigger({ className, size = "default", children, ...props }: React.ComponentProps & { size?: "sm" | "default" }) { return ( {children} ) } function SelectContent({ className, children, position = "item-aligned", align = "center", ...props }: React.ComponentProps) { return ( {children} ) } function SelectLabel({ className, ...props }: React.ComponentProps) { return ( ) } function SelectItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } function SelectSeparator({ className, ...props }: React.ComponentProps) { return ( ) } function SelectScrollUpButton({ className, ...props }: React.ComponentProps) { return ( ) } function SelectScrollDownButton({ className, ...props }: React.ComponentProps) { return ( ) } export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","radix-ui",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://www.shadcn-ui-blocks.com/r/marketing-about-sections-diversity-inclusion.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/marketing-about-sections-diversity-inclusion","itemId":"@shadcn-ui-blocks/marketing-about-sections-diversity-inclusion"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"components/blocks/marketing/about-sections/diversity-inclusion.tsx","content":"$52","type":"registry:component","target":"components/blocks/marketing/about-sections/diversity-inclusion.tsx"},{"path":"components/ui/button.tsx","content":"$53","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/card.tsx","content":"$54","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/tabs.tsx","content":"$55","type":"registry:ui","target":"components/ui/tabs.tsx"},{"path":"components/ui/badge.tsx","content":"$56","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/select.tsx","content":"$57","type":"registry:ui","target":"components/ui/select.tsx"}]}]]}],"$L58"]}]

Diversity & Inclusion

Installation

Files

components

Styles