76 lines
3.2 KiB
TypeScript
76 lines
3.2 KiB
TypeScript
"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>
|
|
);
|
|
}
|