{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-about-sections-company-culture","type":"registry:block","title":"Company Culture","files":[{"path":"components/blocks/marketing/about-sections/company-culture.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 { QuoteIcon } from 'lucide-react';\n\n// Define types for culture aspects\ntype CultureAspect = {\n  id: string;\n  title: string;\n  description: string;\n  images: string[];\n  testimonial: {\n    quote: string;\n    author: string;\n    role: string;\n    avatar: string;\n  };\n};\n\n// Company culture data\nconst cultureAspects: CultureAspect[] = [\n  {\n    id: 'innovation',\n    title: 'Innovation First',\n    description:\n      'We believe in challenging the status quo and constantly pushing boundaries to create new solutions. Our innovation-driven approach encourages experimentation, learning from failures, and celebrating breakthrough successes.',\n    images: [\n      'https://images.unsplash.com/photo-1536148935331-408321065b18?q=80&w=800',\n      'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=800',\n      'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=800',\n    ],\n    testimonial: {\n      quote:\n        'I&apos;ve never worked anywhere that so actively encourages creative thinking. We&apos;re given the time and resources to explore new ideas, even if they might not work out. That freedom to innovate without fear has led to our most successful products.',\n      author: 'Sarah Chen',\n      role: 'Product Designer',\n      avatar:\n        'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=150&h=150&fit=crop&crop=faces',\n    },\n  },\n  {\n    id: 'collaboration',\n    title: 'Collaborative Spirit',\n    description:\n      'Our collaborative culture fosters open communication and cross-functional teamwork. We believe that diverse perspectives drive better outcomes, and we create intentional spaces for sharing ideas and working together across departments.',\n    images: [\n      'https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=800',\n      'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=800',\n      'https://images.unsplash.com/photo-1558403194-611308249627?q=80&w=800',\n    ],\n    testimonial: {\n      quote:\n        \"The walls between teams simply don't exist here. Developers, designers, marketers—we all work together with mutual respect. I've seen ideas transform when people from different backgrounds contribute their unique perspectives.\",\n      author: 'Marcus Johnson',\n      role: 'Engineering Lead',\n      avatar:\n        'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=150&h=150&fit=crop&crop=faces',\n    },\n  },\n  {\n    id: 'wellbeing',\n    title: 'Wellbeing & Balance',\n    description:\n      'We prioritize the holistic wellbeing of our team, recognizing that the best work happens when people feel supported in all aspects of their lives. Our flexible policies and wellness initiatives reflect our commitment to sustainable work practices.',\n    images: [\n      'https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=800',\n      'https://images.unsplash.com/photo-1571844307880-751c6d86f3f3?q=80&w=800',\n      'https://images.unsplash.com/photo-1545128485-c400e7702796?q=80&w=800',\n    ],\n    testimonial: {\n      quote:\n        \"I joined from a company where burnout was considered a badge of honor. Here, I'm encouraged to take time off, pursue hobbies, and bring my whole self to work. The result? I'm happier, healthier, and doing the best work of my career.\",\n      author: 'Elena Rodriguez',\n      role: 'Customer Success Manager',\n      avatar:\n        'https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?q=80&w=150&h=150&fit=crop&crop=faces',\n    },\n  },\n  {\n    id: 'growth',\n    title: 'Continuous Growth',\n    description:\n      \"Learning is embedded in our culture. We invest in our team's professional development through mentorship programs, learning budgets, and career pathing that nurtures both technical expertise and leadership skills.\",\n    images: [\n      'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=800',\n      'https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=800',\n      'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=800',\n    ],\n    testimonial: {\n      quote:\n        \"In three years, I've grown from a junior role to leading a team, supported every step of the way with training, challenges that stretched my abilities, and leaders who saw potential in me before I saw it in myself.\",\n      author: 'James Wilson',\n      role: 'Marketing Director',\n      avatar:\n        'https://images.unsplash.com/photo-1568602471122-7832951cc4c5?q=80&w=150&h=150&fit=crop&crop=faces',\n    },\n  },\n];\n\nexport default function AboutSectionCompanyCulture() {\n  const [activeTab, setActiveTab] = useState('innovation');\n\n  return (\n    <section className=\"bg-muted/25 py-24\">\n      <div className=\"container mx-auto px-4 md:px-6 2xl:max-w-[1400px]\">\n        <div className=\"mx-auto mb-12 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            Our Culture\n          </div>\n          <h2 className=\"text-3xl font-bold tracking-tight md:text-4xl\">\n            What Makes Us Different\n          </h2>\n          <p className=\"text-muted-foreground\">\n            Our culture defines how we work together and the values that guide\n            our decisions. It&apos;s what makes our company a special place to\n            work and grow.\n          </p>\n        </div>\n\n        <Tabs\n          defaultValue=\"innovation\"\n          value={activeTab}\n          onValueChange={setActiveTab}\n          className=\"space-y-8\"\n        >\n          {/* Tabs navigation */}\n          <div className=\"flex justify-center\">\n            <TabsList className=\"grid h-auto grid-cols-2 p-1 md:grid-cols-4\">\n              {cultureAspects.map((aspect) => (\n                <TabsTrigger\n                  key={aspect.id}\n                  value={aspect.id}\n                  className=\"data-[state=active]:bg-primary data-[state=active]:text-primary-foreground px-3 py-2.5\"\n                >\n                  {aspect.title}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n          </div>\n\n          {/* Tab content */}\n          {cultureAspects.map((aspect) => (\n            <TabsContent\n              key={aspect.id}\n              value={aspect.id}\n              className=\"space-y-8\"\n            >\n              {/* Description */}\n              <div className=\"grid gap-6 md:grid-cols-2\">\n                <div className=\"space-y-4\">\n                  <h3 className=\"text-2xl font-bold tracking-tight\">\n                    {aspect.title}\n                  </h3>\n                  <p className=\"text-muted-foreground leading-relaxed\">\n                    {aspect.description}\n                  </p>\n                </div>\n\n                {/* Testimonial */}\n                <Card className=\"from-primary/5 to-primary/10 border-0 bg-gradient-to-br p-0\">\n                  <CardContent className=\"space-y-4 p-6 pt-6\">\n                    <QuoteIcon className=\"text-primary/40 h-8 w-8\" />\n                    <p className=\"text-muted-foreground italic\">\n                      &quot;{aspect.testimonial.quote}&quot;\n                    </p>\n                    <div className=\"flex items-center gap-3 pt-2\">\n                      <div className=\"relative h-10 w-10 overflow-hidden rounded-full\">\n                        <img\n                          src={aspect.testimonial.avatar}\n                          alt={aspect.testimonial.author}\n                          className=\"object-cover\"\n                        />\n                      </div>\n                      <div>\n                        <h4 className=\"text-sm font-medium\">\n                          {aspect.testimonial.author}\n                        </h4>\n                        <p className=\"text-muted-foreground text-xs\">\n                          {aspect.testimonial.role}\n                        </p>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n              </div>\n\n              {/* Images */}\n              <div className=\"grid grid-cols-1 gap-4 md:grid-cols-3\">\n                {aspect.images.map((image, idx) => (\n                  <div\n                    key={idx}\n                    className=\"relative aspect-[4/3] overflow-hidden rounded-lg\"\n                  >\n                    <img\n                      src={image}\n                      alt={`${aspect.title} culture`}\n                      className=\"transform object-cover transition-transform duration-500 hover:scale-105\"\n                    />\n                  </div>\n                ))}\n              </div>\n            </TabsContent>\n          ))}\n        </Tabs>\n\n        {/* Bottom CTA */}\n        <div className=\"bg-background relative mt-16 rounded-xl border p-8 md:p-12\">\n          <div className=\"grid items-center gap-8 md:grid-cols-2\">\n            <div>\n              <h3 className=\"mb-4 text-2xl font-bold\">Join Our Team</h3>\n              <p className=\"text-muted-foreground mb-6\">\n                We&apos;re always looking for talented individuals who share our\n                values and want to be part of building something meaningful.\n                Explore our open positions and find where you might fit in.\n              </p>\n              <div className=\"flex gap-4\">\n                <Button asChild>\n                  <a href=\"#\">View Open Positions</a>\n                </Button>\n                <Button variant=\"outline\" asChild>\n                  <a href=\"#\">Our Values</a>\n                </Button>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-3 gap-2\">\n              {[\n                'https://images.unsplash.com/photo-1543269865-cbf427effbad?q=80&w=300',\n                'https://images.unsplash.com/photo-1603201667141-5a2d4c673378?q=80&w=300',\n                'https://images.unsplash.com/photo-1596079890744-c1a0462d0975?q=80&w=300',\n              ].map((src, i) => (\n                <div\n                  key={i}\n                  className=\"relative aspect-square overflow-hidden rounded-md\"\n                >\n                  <img src={src} alt=\"Team culture\" className=\"object-cover\" />\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {/* Decorative shapes */}\n          <div className=\"bg-primary/10 absolute -top-5 -left-5 h-10 w-10 rounded-full\" />\n          <div className=\"bg-primary/10 absolute -right-5 -bottom-5 h-10 w-10 rounded-full\" />\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/about-sections/company-culture.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"}],"description":"Photos and short blurbs that show how the team works and what daily life feels like. Use it on a careers or about page to attract good people.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}