4e: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"] 4f: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"] 50: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"] 51:T3a4c,import React, { useState } from 'react'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { AreaChart, ArrowUpRightIcon, Globe, Heart, Lightbulb, ShieldCheck, Users, } from 'lucide-react'; import { cn } from '@/lib/utils'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; // Types type CompanyValue = { id: string; name: string; description: string; icon: React.ElementType; color: string; principles: string[]; testimonial?: { quote: string; author: string; role: string; image: string; }; image?: string; }; // Company values data const companyValues: CompanyValue[] = [ { id: 'innovation', name: 'Innovation', description: 'We constantly push boundaries and challenge the status quo, fostering a culture where creative thinking and experimentation are encouraged at all levels of the organization.', icon: Lightbulb, color: 'text-amber-500', principles: [ 'Embrace experimentation and calculated risk-taking', 'Challenge assumptions and existing processes', 'Dedicate time and resources to exploring new ideas', 'Learn from failures and iterate quickly', ], testimonial: { quote: 'Working in an environment that truly values innovation isn't just about having the latest technology—it's about feeling empowered to question, experiment, and sometimes fail. This culture has allowed us to develop solutions no one else has thought of yet.', author: 'Alex Chen', role: 'Lead Product Engineer', image: 'https://images.unsplash.com/photo-1568602471122-7832951cc4c5?q=80&w=400', }, image: 'https://images.unsplash.com/photo-1534120247760-c44c3e4a62f1?q=80&w=800', }, { id: 'integrity', name: 'Integrity', description: 'We believe in transparency, honesty, and ethical conduct in everything we do. Trust is the foundation of our relationships with customers, partners, and each other.', icon: ShieldCheck, color: 'text-blue-500', principles: [ 'Be honest and transparent in all communications', 'Do what's right, even when it's difficult', 'Keep commitments and take accountability for mistakes', 'Protect private data and confidential information', ], testimonial: { quote: 'In my ten years with the company, I've seen us turn down lucrative opportunities that didn't align with our ethical standards. That consistent commitment to integrity isn't just good ethics—it's built an unparalleled level of trust with our customers.', author: 'Sarah Johnson', role: 'Senior Account Director', image: 'https://images.unsplash.com/photo-1531123897727-8f129e1688ce?q=80&w=400', }, image: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=800', }, { id: 'collaboration', name: 'Collaboration', description: 'We achieve more together than alone. By combining diverse perspectives and skills, we create solutions that are stronger, more innovative, and more effective than any individual could produce.', icon: Users, color: 'text-indigo-500', principles: [ 'Value and seek diverse perspectives', 'Share knowledge openly across teams', 'Give credit and celebrate team achievements', 'Support colleagues and prioritize team success', ], testimonial: { quote: 'The collaborative spirit here isn't just talk—it's built into how we work. Even as we've grown to multiple offices globally, we've maintained a culture where everyone's input is valued and people genuinely enjoy working together to solve challenging problems.', author: 'Miguel Hernandez', role: 'Global Operations Manager', image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=400', }, image: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=800', }, { id: 'customer-focus', name: 'Customer Focus', description: 'Our customers are at the center of everything we do. We're committed to understanding their needs, exceeding their expectations, and building lasting relationships based on mutual success.', icon: Heart, color: 'text-red-500', principles: [ 'Deeply understand customer needs and pain points', 'Prioritize features that deliver true customer value', 'Proactively gather and implement customer feedback', 'Measure success through customer outcomes', ], testimonial: { quote: 'I've been amazed at how customer feedback directly shapes our product roadmap. When I joined, I expected the usual lip service to customer-centricity, but here, customer success genuinely drives every decision from product features to support policies.', author: 'Avery Wilson', role: 'Customer Success Lead', image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400', }, image: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=800', }, { id: 'excellence', name: 'Excellence', description: 'We strive for excellence in everything we do, from the quality of our products to our customer service. We set high standards and continuously work to exceed them through learning and improvement.', icon: AreaChart, color: 'text-emerald-500', principles: [ 'Set ambitious goals and high standards', 'Pursue continuous improvement through feedback', 'Pay attention to details without losing sight of the big picture', 'Take pride in delivering exceptional quality', ], testimonial: { quote: 'The most inspiring thing about working here is how everyone strives for excellence while remaining humble. There's always a sense that we can do better—not from a place of dissatisfaction, but from genuine passion for creating the best possible experience for our users.', author: 'Jordan Taylor', role: 'Quality Assurance Director', image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400', }, image: 'https://images.unsplash.com/photo-1515187029135-18ee286d815b?q=80&w=800', }, { id: 'sustainability', name: 'Sustainability', description: 'We are committed to creating a positive environmental and social impact. Our business decisions consider long-term sustainability and our responsibility to future generations.', icon: Globe, color: 'text-green-500', principles: [ 'Minimize environmental impact in operations and products', 'Support community initiatives and social causes', 'Consider long-term sustainability in all business decisions', 'Measure and report on environmental and social performance', ], testimonial: { quote: 'When we announced our carbon-neutral initiative, I wasn't sure if it would be more than a marketing exercise. Three years later, we've reduced emissions by 68%, switched to renewable energy, and built sustainability requirements into our entire supply chain. It's real change.', author: 'Priya Patel', role: 'Sustainability Program Manager', image: 'https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?q=80&w=400', }, image: 'https://images.unsplash.com/photo-1536859355448-76f92ebdc33d?q=80&w=800', }, ]; export default function AboutSectionCompanyValues() { const [activeValue, setActiveValue] = useState(companyValues[0]!.id); // Get active value object const currentValue = companyValues.find((value) => value.id === activeValue) || companyValues[0]!; return (

Core Values

What Guides Our Decisions

Our values aren't just words on a wall—they're the principles that guide our daily actions and long-term vision, shaping our culture and driving our success.

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

{/* Dropdown for small screens */}

{/* Tabs for medium screens and above */} {companyValues.map((value) => ( {value.name} ))}

{/* Value content */}

{/* Left column: Value details */}

{currentValue.name}

{currentValue.description}

Key Principles:

{principle}

{currentValue.testimonial && (

{currentValue.testimonial.author}

{currentValue.testimonial.role}

"{currentValue.testimonial.quote}"

)}

{/* Right column: Value image */}

{currentValue.image ? (

{currentValue.name}

) : (

)}

{/* Call-to-action */}

These values guide every aspect of our work. Want to be part of a team that lives these values every day?

); } 52: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 } 53: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, } 54: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 } 55: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, } 4a:["$","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"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://www.shadcn-ui-blocks.com/r/marketing-about-sections-company-values.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/marketing-about-sections-company-values","itemId":"@shadcn-ui-blocks/marketing-about-sections-company-values"}],["$","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"}],["$","$L50",null,{"files":[{"path":"components/blocks/marketing/about-sections/company-values.tsx","content":"$51","type":"registry:component","target":"components/blocks/marketing/about-sections/company-values.tsx"},{"path":"components/ui/button.tsx","content":"$52","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/card.tsx","content":"$53","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/tabs.tsx","content":"$54","type":"registry:ui","target":"components/ui/tabs.tsx"},{"path":"components/ui/select.tsx","content":"$55","type":"registry:ui","target":"components/ui/select.tsx"}]}]]}],"$L56"]}]

Company Values

Installation

Files

components

Styles