Portfolio Mission And Values
Discover fully responsive Portfolio Mission And Values for your Shadcn UI projects, each meticulously designed for seamless integration and customization.
Discover fully responsive Portfolio Mission And Values for your Shadcn UI projects, each meticulously designed for seamless integration and customization.
import {HeartHandshake,Lightbulb,Shield,Users,Target,RefreshCw,PackageOpen,Sparkles,Globe,} from "lucide-react";export default function MissionAndValuesGrid() {const values = [{title: "Innovation",description:"We continuously challenge assumptions and explore new possibilities.",icon: <Lightbulb className="h-6 w-6" />,},{title: "Integrity",description:"We operate with honesty, transparency, and ethical responsibility.",icon: <Shield className="h-6 w-6" />,},{title: "Collaboration",description:"We bring diverse perspectives together to achieve extraordinary results.",icon: <Users className="h-6 w-6" />,},{title: "Excellence",description: "We strive for outstanding quality in everything we create.",icon: <Sparkles className="h-6 w-6" />,},{title: "Adaptability",description: "We embrace change and evolve to meet new challenges.",icon: <RefreshCw className="h-6 w-6" />,},{title: "Empathy",description:"We design with a deep understanding of human needs and experiences.",icon: <HeartHandshake className="h-6 w-6" />,},{title: "Purpose",description: "We focus on creating meaningful impact that matters.",icon: <Target className="h-6 w-6" />,},{title: "Transparency",description:"We communicate openly and honestly with clients and team members.",icon: <PackageOpen className="h-6 w-6" />,},{title: "Sustainability",description:"We consider long-term environmental and social impact in our work.",icon: <Globe className="h-6 w-6" />,},];return (<section className="py-16 md:py-24"><div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">{/* Header */}<div className="mb-16 text-center"><h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">Our Core Values</h2><p className="text-muted-foreground mx-auto max-w-3xl text-lg">These principles guide our decisions, shape our culture, and definehow we collaborate with our clients.</p></div>{/* Values Grid */}<div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3">{values.map((value, index) => (<divkey={index}className="bg-card flex flex-col rounded-lg border p-6 shadow-sm transition-all hover:shadow-md"><div className="bg-primary/10 text-primary mb-4 flex h-12 w-12 items-center justify-center rounded-md">{value.icon}</div><h3 className="mb-2 text-xl font-semibold">{value.title}</h3><p className="text-muted-foreground">{value.description}</p></div>))}</div></div></section>);}