About Us

1"use client";
2 
3import { motion, Variants } from "framer-motion";
4import { Award, Heart, Target, Users } from "lucide-react";
5 
6const values = [
7  {
8    icon: Target,
9    title: "Our Mission",
10    description:
11      "To deliver exceptional solutions that drive growth and innovation for our clients.",
12  },
13  {
14    icon: Users,
15    title: "Our Team",
16    description:
17      "A diverse group of talented professionals dedicated to excellence.",
18  },
19  {
20    icon: Award,
21    title: "Our Excellence",
22    description:
23      "Recognized for outstanding quality and innovation in everything we do.",
24  },
25  {
26    icon: Heart,
27    title: "Our Values",
28    description:
29      "Integrity, transparency, and commitment to our clients success.",
30  },
31];
32 
33export function AboutUsSectionBaseui() {
34  const containerVariants: Variants = {
35    hidden: { opacity: 0 },
36    visible: {
37      opacity: 1,
38      transition: {
39        staggerChildren: 0.15,
40      },
41    },
42  };
43 
44  const itemVariants: Variants = {
45    hidden: { opacity: 0, y: 30 },
46    visible: {
47      opacity: 1,
48      y: 0,
49      transition: { duration: 0.6, ease: "easeOut" },
50    },
51  };
52 
53  return (
54    <section className="bg-background px-4 py-20 md:py-24">
55      <div className="mx-auto max-w-7xl">
56        <motion.div
57          initial={{ opacity: 0, y: -20 }}
58          whileInView={{ opacity: 1, y: 0 }}
59          viewport={{ once: true }}
60          transition={{ duration: 0.6 }}
61          className="mb-16 text-center"
62        >
63          <span className="mb-4 inline-flex items-center rounded-full border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
64            About Us
65          </span>
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) => {
83            const Icon = value.icon;
84            return (
85// … truncated