From 66b4412514d52802786ca1ee765589a1312717ae Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 16:27:21 +0000
Subject: [PATCH] Update components/about.tsx

---
 components/about.tsx | 75 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 components/about.tsx

diff --git a/components/about.tsx b/components/about.tsx
new file mode 100644
index 0000000..57b1fb1
--- /dev/null
+++ b/components/about.tsx
@@ -0,0 +1,75 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { motion } from "framer-motion";
+import { Award, Users, Rocket, Heart } from "lucide-react";
+
+const stats = [
+  { number: "150+", label: "Projects Delivered", icon: Rocket },
+  { number: "50+", label: "Happy Clients", icon: Heart },
+  { number: "25+", label: "Team Members", icon: Users },
+  { number: "15+", label: "Awards Won", icon: Award },
+];
+
+export function About() {
+  return (
+    <section id="about" className="py-32 bg-white dark:bg-slate-900">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          <motion.div
+            initial={{ opacity: 0, x: -30 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+          >
+            <Heading className="mb-6">About NEXUS</Heading>
+            <div className="space-y-4 text-lg text-slate-600 dark:text-slate-400 leading-relaxed">
+              <p>
+                We're a collective of designers, developers, and strategists who believe in the power of exceptional digital experiences.
+              </p>
+              <p>
+                Founded in 2018, NEXUS has grown from a small studio to an award-winning agency, working with startups and Fortune 500 companies alike.
+              </p>
+              <p>
+                Our approach combines creative excellence with technical expertise, ensuring every project not only looks stunning but performs flawlessly.
+              </p>
+              <p className="font-semibold text-slate-900 dark:text-white">
+                We don't just build websites—we craft digital experiences that drive real business results.
+              </p>
+            </div>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, x: 30 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="grid grid-cols-2 gap-6"
+          >
+            {stats.map((stat, index) => {
+              const Icon = stat.icon;
+              return (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, scale: 0.8 }}
+                  whileInView={{ opacity: 1, scale: 1 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.6, delay: index * 0.1 }}
+                  className="p-8 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900 rounded-2xl text-center border border-slate-200 dark:border-slate-700"
+                >
+                  <Icon className="w-8 h-8 mx-auto mb-4 text-violet-600 dark:text-violet-400" />
+                  <div className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-violet-600 to-indigo-600 mb-2">
+                    {stat.number}
+                  </div>
+                  <div className="text-sm font-medium text-slate-600 dark:text-slate-400">
+                    {stat.label}
+                  </div>
+                </motion.div>
+              );
+            })}
+          </motion.div>
+        </div>
+      </Container>
+    </section>
+  );
+}