46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
"use client";
|
|
import { Container } from "@/components/container";
|
|
import { motion } from "framer-motion";
|
|
|
|
const clients = [
|
|
"TechCorp", "InnovateLabs", "DigitalFlow", "CloudNine",
|
|
"FutureStack", "DataSync", "SmartWave", "NexGen"
|
|
];
|
|
|
|
export function Clients() {
|
|
return (
|
|
<section className="py-20 bg-slate-50 dark:bg-slate-950 border-y border-slate-200 dark:border-slate-800">
|
|
<Container>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-center mb-12"
|
|
>
|
|
<p className="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-8">
|
|
Trusted by Industry Leaders
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 items-center">
|
|
{clients.map((client, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.05 }}
|
|
className="flex items-center justify-center"
|
|
>
|
|
<div className="text-2xl font-bold text-slate-400 dark:text-slate-600 hover:text-slate-900 dark:hover:text-slate-300 transition-colors duration-300">
|
|
{client}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|