Andres Santana
52 lines
2.0 KiB
React
52 lines
2.0 KiB
React
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Building } from 'lucide-react';
|
|
|
|
const ClientsSection = () => {
|
|
const clients = [
|
|
'Sinovensa', 'Chevron', 'Petromiranda', 'PDVSA',
|
|
'Pequiven', 'Supermetanol', 'Metor', 'Fertilizantes de Oriente'
|
|
];
|
|
|
|
return (
|
|
<section className="py-16 bg-grisClaro">
|
|
<div className="container mx-auto px-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-center mb-12"
|
|
>
|
|
<h2 className="text-3xl md:text-5xl font-bold mb-6 text-azulOscuro">
|
|
Nuestros <span className="text-naranjaAccento">Clientes</span>
|
|
</h2>
|
|
<p className="text-lg text-grisMedio max-w-2xl mx-auto">
|
|
Confianza de las empresas líderes del sector energético e industrial
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
{clients.map((client, index) => (
|
|
<motion.div
|
|
key={client}
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
whileHover={{ scale: 1.05 }}
|
|
className="bg-blanco border border-azulMedio/20 rounded-lg p-6 transition-all duration-300 shadow-md hover:shadow-lg flex flex-col items-center justify-center text-center"
|
|
>
|
|
<div className="w-12 h-12 bg-azulClaro/30 rounded-full flex items-center justify-center mb-3">
|
|
<Building className="w-6 h-6 text-azulPrincipal" />
|
|
</div>
|
|
<span className="text-azulOscuro font-bold">{client}</span>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default ClientsSection; |