102 lines
4.0 KiB
JavaScript
102 lines
4.0 KiB
JavaScript
import React from 'react';
|
|
import { motion, useReducedMotion } from 'framer-motion';
|
|
|
|
const fadeUpPreset = (delay = 0, duration = 1.2) => ({
|
|
initial: { opacity: 0, y: 20 },
|
|
whileInView: { opacity: 1, y: 0 },
|
|
viewport: { once: true, amount: 0.2 },
|
|
transition: { delay, duration, ease: "easeOut" }
|
|
});
|
|
|
|
function CompanyLogos() {
|
|
const shouldReduce = useReducedMotion();
|
|
|
|
const companies = [
|
|
{ name: 'Sanofi', logo: 'https://enterprise.nestjs.com/assets/logos/sanofi.svg' },
|
|
{ name: 'Adidas', logo: 'https://enterprise.nestjs.com/assets/logos/adidas.svg' },
|
|
{ name: 'Autodesk', logo: 'https://enterprise.nestjs.com/assets/logos/autodesk.svg' },
|
|
{ name: 'Mercedes-Benz', logo: 'https://enterprise.nestjs.com/assets/logos/mercedes.svg' },
|
|
{ name: 'GitLab', logo: 'https://enterprise.nestjs.com/assets/logos/gitlab.svg' },
|
|
{ name: 'Red Hat', logo: 'https://enterprise.nestjs.com/assets/logos/redhat.svg' },
|
|
{ name: 'Roche', logo: 'https://enterprise.nestjs.com/assets/logos/roche.svg' },
|
|
{ name: 'IBM', logo: 'https://enterprise.nestjs.com/assets/logos/ibm.svg' },
|
|
{ name: 'Decathlon', logo: 'https://enterprise.nestjs.com/assets/logos/decathlon.svg' },
|
|
{ name: 'Societe Generale', logo: 'https://enterprise.nestjs.com/assets/logos/sg.svg' },
|
|
{ name: 'Capgemini', logo: 'https://enterprise.nestjs.com/assets/logos/capgemini.svg' },
|
|
{ name: 'REWE', logo: 'https://enterprise.nestjs.com/assets/logos/rewe.svg' }
|
|
];
|
|
|
|
if (shouldReduce) {
|
|
return (
|
|
<section className="section-padding bg-white">
|
|
<div className="container-custom text-center">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
|
Who is using Nest?
|
|
</h2>
|
|
<p className="text-lg text-gray-600 mb-12">
|
|
Nest is proudly powering a large ecosystem of enterprises and products out there.
|
|
<br />
|
|
Wanna see your logo here? <span className="text-brand-red font-medium">Find out more</span>.
|
|
</p>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center">
|
|
{companies.map((company, index) => (
|
|
<div key={index} className="flex items-center justify-center h-16">
|
|
<img
|
|
src={company.logo}
|
|
alt={company.name}
|
|
className="max-h-12 max-w-full opacity-60 hover:opacity-100 transition-opacity grayscale hover:grayscale-0"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<motion.section
|
|
{...fadeUpPreset(0.1, 1.0)}
|
|
className="section-padding bg-white"
|
|
>
|
|
<div className="container-custom text-center">
|
|
<motion.h2
|
|
{...fadeUpPreset(0.2, 1.0)}
|
|
className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
|
|
>
|
|
Who is using Nest?
|
|
</motion.h2>
|
|
<motion.p
|
|
{...fadeUpPreset(0.3, 1.0)}
|
|
className="text-lg text-gray-600 mb-12"
|
|
>
|
|
Nest is proudly powering a large ecosystem of enterprises and products out there.
|
|
<br />
|
|
Wanna see your logo here? <span className="text-brand-red font-medium">Find out more</span>.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
{...fadeUpPreset(0.4, 1.0)}
|
|
className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center"
|
|
>
|
|
{companies.map((company, index) => (
|
|
<motion.div
|
|
key={index}
|
|
{...fadeUpPreset(0.5 + index * 0.05, 0.6)}
|
|
className="flex items-center justify-center h-16"
|
|
>
|
|
<img
|
|
src={company.logo}
|
|
alt={company.name}
|
|
className="max-h-12 max-w-full opacity-60 hover:opacity-100 transition-opacity grayscale hover:grayscale-0"
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</motion.section>
|
|
);
|
|
}
|
|
|
|
export default CompanyLogos; |