{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-careers-workplace-culture","type":"registry:block","title":"Workplace Culture","files":[{"path":"components/blocks/marketing/careers/workplace-culture.tsx","content":"import * as React from 'react';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';\nimport {\n  BookOpen,\n  Compass,\n  Heart,\n  Lightbulb,\n  Medal,\n  PartyPopper,\n  Users,\n} from 'lucide-react';\n\ninterface CultureValue {\n  id: string;\n  icon: React.ReactNode;\n  title: string;\n  description: string;\n}\n\ninterface Testimonial {\n  id: string;\n  quote: string;\n  name: string;\n  role: string;\n  imageUrl: string;\n}\n\ninterface CultureActivity {\n  id: string;\n  title: string;\n  description: string;\n  imageUrl: string;\n}\n\nexport default function WorkplaceCulture() {\n  const values: CultureValue[] = [\n    {\n      id: 'innovation',\n      icon: <Lightbulb className=\"h-8 w-8\" />,\n      title: 'Innovation',\n      description:\n        \"We embrace creative thinking and encourage experimentation. We're not afraid to try new approaches and learn from our failures.\",\n    },\n    {\n      id: 'teamwork',\n      icon: <Users className=\"h-8 w-8\" />,\n      title: 'Teamwork',\n      description:\n        'We believe in the power of collaboration and diverse perspectives. Our best work happens when we combine our unique strengths.',\n    },\n    {\n      id: 'excellence',\n      icon: <Medal className=\"h-8 w-8\" />,\n      title: 'Excellence',\n      description:\n        \"We hold ourselves to high standards and take pride in our work. We're committed to delivering quality in everything we do.\",\n    },\n    {\n      id: 'passion',\n      icon: <Heart className=\"h-8 w-8\" />,\n      title: 'Passion',\n      description:\n        \"We're driven by a genuine enthusiasm for our work and its impact. We bring energy and dedication to each challenge.\",\n    },\n    {\n      id: 'integrity',\n      icon: <Compass className=\"h-8 w-8\" />,\n      title: 'Integrity',\n      description:\n        'We build trust through honest communication and ethical decision-making. We do the right thing, even when it&apos;s difficult.',\n    },\n    {\n      id: 'growth',\n      icon: <BookOpen className=\"h-8 w-8\" />,\n      title: 'Growth',\n      description:\n        \"We're committed to continuous learning and development. We help each other expand our skills and reach our potential.\",\n    },\n  ];\n\n  const testimonials: Testimonial[] = [\n    {\n      id: '1',\n      quote:\n        \"The culture here is unlike any place I've worked before. There's a perfect balance of autonomy and support, and I feel like my ideas are truly valued.\",\n      name: 'Elena Martinez',\n      role: 'Product Designer',\n      imageUrl:\n        'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    },\n    {\n      id: '2',\n      quote:\n        \"What I appreciate most is how everyone is genuinely invested in each other's success. We celebrate wins together and support each other through challenges.\",\n      name: 'Marcus Chen',\n      role: 'Senior Developer',\n      imageUrl:\n        'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    },\n    {\n      id: '3',\n      quote:\n        \"The emphasis on work-life balance here isn't just talk — it's built into how we work. I've never felt more productive while also having time for my personal life.\",\n      name: 'Sarah Johnson',\n      role: 'Marketing Manager',\n      imageUrl:\n        'https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=1922&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    },\n  ];\n\n  const activities: CultureActivity[] = [\n    {\n      id: '1',\n      title: 'Team Retreats',\n      description:\n        'Twice a year, we gather for company-wide retreats where we reflect on our progress, plan for the future, and strengthen our connections through fun activities.',\n      imageUrl:\n        'https://images.unsplash.com/photo-1527525443983-6e60c75fff46?q=80&w=1970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    },\n    {\n      id: '2',\n      title: 'Hackathons',\n      description:\n        'Our quarterly hackathons give everyone the chance to work on passion projects, explore new technologies, and collaborate across teams.',\n      imageUrl:\n        'https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    },\n    {\n      id: '3',\n      title: 'Lunch & Learn',\n      description:\n        'Weekly Lunch & Learn sessions provide a casual environment to share knowledge, present ideas, and discuss industry trends while enjoying a meal together.',\n      imageUrl:\n        'https://images.unsplash.com/photo-1515169067868-5387ec356754?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    },\n    {\n      id: '4',\n      title: 'Volunteer Days',\n      description:\n        'We dedicate time for community service, allowing teams to volunteer with organizations that align with our values and make a positive impact.',\n      imageUrl:\n        'https://images.unsplash.com/photo-1559027615-cd4628902d4a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    },\n    {\n      id: '5',\n      title: 'Celebrations',\n      description:\n        'From birthdays to work anniversaries and major milestones, we take time to celebrate our people and accomplishments.',\n      imageUrl:\n        'https://images.unsplash.com/photo-1528605248644-14dd04022da1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    },\n    {\n      id: '6',\n      title: 'Wellness Programs',\n      description:\n        'Regular wellness activities including yoga sessions, fitness challenges, and mental health workshops help our team stay balanced and healthy.',\n      imageUrl:\n        'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    },\n  ];\n\n  return (\n    <div className=\"container mx-auto px-4 py-12\">\n      <div className=\"mb-12 text-center\">\n        <div className=\"bg-primary/10 text-primary mb-4 inline-block rounded-full p-2\">\n          <PartyPopper className=\"h-6 w-6\" />\n        </div>\n        <h2 className=\"mb-3 text-3xl font-bold tracking-tight\">\n          Our Culture & Values\n        </h2>\n        <p className=\"text-muted-foreground mx-auto max-w-2xl\">\n          More than just a workplace, we&apos;re building a community where\n          talented people collaborate, grow, and create amazing things together.\n        </p>\n      </div>\n\n      {/* Values Grid */}\n      <div className=\"mb-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n        {values.map((value) => (\n          <Card\n            key={value.id}\n            className=\"flex flex-col items-center px-6 text-center\"\n          >\n            <div className=\"bg-primary/10 text-primary rounded-full p-3\">\n              {value.icon}\n            </div>\n            <h3 className=\"text-xl font-semibold\">{value.title}</h3>\n            <p className=\"text-muted-foreground\">{value.description}</p>\n          </Card>\n        ))}\n      </div>\n\n      {/* Testimonials Section */}\n      <div className=\"bg-primary/5 relative mb-16 overflow-hidden rounded-xl p-8\">\n        <div className=\"absolute top-0 right-0 -mt-8 -mr-8 opacity-20\">\n          <svg\n            width=\"200\"\n            height=\"200\"\n            viewBox=\"0 0 200 200\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M38.8 43.6C19.6 43.6 0 60.4 0 87.6C0 114.8 19.6 128.8 38.8 128.8C73.6 128.8 54.4 180.4 31.6 180.4C54.4 212.4 116.8 174 116.8 119.6C116.8 72.8 70.4 43.6 38.8 43.6ZM152 43.6C132.8 43.6 113.2 60.4 113.2 87.6C113.2 114.8 132.8 128.8 152 128.8C186.8 128.8 167.6 180.4 144.8 180.4C167.6 212.4 230 174 230 119.6C230 72.8 183.6 43.6 152 43.6Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </div>\n\n        <h3 className=\"mb-8 text-center text-2xl font-semibold\">\n          Hear From Our Team\n        </h3>\n\n        <div className=\"grid gap-8 md:grid-cols-3\">\n          {testimonials.map((testimonial) => (\n            <div key={testimonial.id} className=\"flex flex-col\">\n              <div className=\"mb-4 flex-1\">\n                <p className=\"italic\">&quot;{testimonial.quote}&quot;</p>\n              </div>\n              <div className=\"flex items-center gap-3\">\n                <div className=\"h-12 w-12 overflow-hidden rounded-full\">\n                  <img\n                    src={testimonial.imageUrl}\n                    alt={testimonial.name}\n                    width={48}\n                    height={48}\n                    className=\"h-full w-full object-cover\"\n                  />\n                </div>\n                <div>\n                  <p className=\"font-medium\">{testimonial.name}</p>\n                  <p className=\"text-muted-foreground text-sm\">\n                    {testimonial.role}\n                  </p>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Activities Section */}\n      <div>\n        <h3 className=\"mb-8 text-center text-2xl font-semibold\">\n          Life at Our Company\n        </h3>\n\n        <Tabs defaultValue=\"gallery\" className=\"w-full\">\n          <div className=\"mb-8 flex justify-center\">\n            <TabsList>\n              <TabsTrigger value=\"gallery\">Photo Gallery</TabsTrigger>\n              <TabsTrigger value=\"activities\">Activities</TabsTrigger>\n            </TabsList>\n          </div>\n\n          <TabsContent value=\"gallery\" className=\"space-y-8\">\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3\">\n              {activities.map((activity) => (\n                <div\n                  key={activity.id}\n                  className=\"group relative aspect-video overflow-hidden rounded-md\"\n                >\n                  <img\n                    src={activity.imageUrl}\n                    alt={activity.title}\n                    className=\"object-cover transition-transform duration-300 group-hover:scale-105\"\n                  />\n                  <div className=\"absolute inset-0 bg-gradient-to-t from-black/60 to-transparent\">\n                    <div className=\"absolute bottom-0 left-0 p-4\">\n                      <h4 className=\"text-lg font-medium text-white\">\n                        {activity.title}\n                      </h4>\n                    </div>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </TabsContent>\n\n          <TabsContent value=\"activities\" className=\"space-y-8\">\n            <div className=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n              {activities.map((activity) => (\n                <Card key={activity.id} className=\"pt-0\">\n                  <div className=\"relative aspect-video overflow-hidden\">\n                    <img\n                      src={activity.imageUrl}\n                      alt={activity.title}\n                      className=\"rounded-t-xl object-cover\"\n                    />\n                  </div>\n                  <CardContent className=\"\">\n                    <h4 className=\"mb-2 text-lg font-medium\">\n                      {activity.title}\n                    </h4>\n                    <p className=\"text-muted-foreground text-sm\">\n                      {activity.description}\n                    </p>\n                  </CardContent>\n                </Card>\n              ))}\n            </div>\n          </TabsContent>\n        </Tabs>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/careers/workplace-culture.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":"A workplace culture section with photos and short stories about daily life. Gives candidates a feel for the team before they decide to apply.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}