About Us

1"use client";
2 
3import { Badge } from "@/components/ui/badge";
4import { Card } from "@/components/ui/card";
5import { motion, Variants } from "framer-motion";
6import { Award, Heart, Target, Users } from "lucide-react";
7 
8const values = [
9  {
10    icon: Target,
11    title: "Our Mission",
12    description:
13      "To deliver exceptional solutions that drive growth and innovation for our clients.",
14  },
15  {
16    icon: Users,
17    title: "Our Team",
18    description:
19      "A diverse group of talented professionals dedicated to excellence.",
20  },
21  {
22    icon: Award,
23    title: "Our Excellence",
24    description:
25      "Recognized for outstanding quality and innovation in everything we do.",
26  },
27  {
28    icon: Heart,
29    title: "Our Values",
30    description:
31      "Integrity, transparency, and commitment to our clients success.",
32  },
33];
34 
35export function AboutUsSection() {
36  const containerVariants: Variants = {
37    hidden: { opacity: 0 },
38    visible: {
39      opacity: 1,
40      transition: {
41        staggerChildren: 0.15,
42      },
43    },
44  };
45 
46  const itemVariants: Variants = {
47    hidden: { opacity: 0, y: 30 },
48    visible: {
49      opacity: 1,
50      y: 0,
51      transition: { duration: 0.6, ease: "easeOut" },
52    },
53  };
54 
55  return (
56    <section className="bg-background px-4 py-20 md:py-24">
57      <div className="mx-auto max-w-7xl">
58        <motion.div
59          initial={{ opacity: 0, y: -20 }}
60          whileInView={{ opacity: 1, y: 0 }}
61          viewport={{ once: true }}
62          transition={{ duration: 0.6 }}
63          className="mb-16 text-center"
64        >
65          <Badge className="mb-4">About Us</Badge>
66          <h2 className="mb-4 text-3xl font-bold md:text-4xl lg:text-5xl">
67            Who We Are
68          </h2>
69          <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
70            We are a team of passionate professionals committed to delivering
71            excellence and driving innovation in everything we do.
72          </p>
73        </motion.div>
74 
75        <motion.div
76          variants={containerVariants}
77          initial="hidden"
78          whileInView="visible"
79          viewport={{ once: true }}
80          className="grid gap-6 md:grid-cols-2 lg:grid-cols-2"
81        >
82          {values.map((value, index) => {
83            const Icon = value.icon;
84            return (
85              <motion.div key={value.title} variants={itemVariants}>
86// … truncated