121 lines
5.5 KiB
JavaScript
121 lines
5.5 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" }
|
|
});
|
|
|
|
const Companies = () => {
|
|
const shouldReduce = useReducedMotion();
|
|
|
|
const companies = [
|
|
{ name: 'Sanofi', logo: 'https://enterprise.nestjs.com/sanofi.b18c1526.png', link: 'https://www.sanofi.com/' },
|
|
{ name: 'Adidas', logo: 'https://enterprise.nestjs.com/adidas.718f26f2.svg', link: 'https://adidas.com/' },
|
|
{ name: 'Autodesk', logo: 'https://enterprise.nestjs.com/autodesk.a7f2b58e.png', link: 'https://www.autodesk.com/' },
|
|
{ name: 'Mercedes', logo: 'https://enterprise.nestjs.com/mercedes.ee8047a9.png', link: 'https://www.mercedes-benz.com/' },
|
|
{ name: 'GitLab', logo: 'https://enterprise.nestjs.com/gitlab.4f9d2995.png', link: 'https://about.gitlab.com/' },
|
|
{ name: 'Red Hat', logo: 'https://enterprise.nestjs.com/red-hat.c5e6e64a.svg', link: 'https://www.redhat.com/' },
|
|
{ name: 'JetBrains', logo: 'https://enterprise.nestjs.com/jetbrains.536f2da5.svg', link: 'https://www.jetbrains.com/' },
|
|
{ name: 'Roche', logo: 'https://enterprise.nestjs.com/roche-logo.979d9061.png', link: 'https://roche.com/' },
|
|
{ name: 'Société Générale', logo: 'https://enterprise.nestjs.com/societe-generale-logo.ec64d013.png', link: 'https://www.societegenerale.fr/' },
|
|
{ name: 'TotalEnergies', logo: 'https://enterprise.nestjs.com/totalenergies.5a993082.svg', link: 'https://totalenergies.com/' },
|
|
{ name: 'Capgemini', logo: 'https://enterprise.nestjs.com/capgemini.a1d43b77.svg', link: 'https://capgemini.com/' },
|
|
{ name: 'REWE', logo: 'https://enterprise.nestjs.com/rewe.1250e1e4.svg', link: 'https://www.rewe-digital.com/' },
|
|
{ name: 'IBM', logo: 'https://enterprise.nestjs.com/ibm.b8c76e06.svg', link: 'https://www.ibm.com/' },
|
|
{ name: 'BMW', logo: 'https://enterprise.nestjs.com/bmw.0ce4c05c.svg' },
|
|
{ name: 'Decathlon', logo: 'https://enterprise.nestjs.com/decathlon.1f3c4744.png', link: 'https://www.decathlon.com/' }
|
|
];
|
|
|
|
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. Wanna see your logo here?
|
|
<a href="#" className="text-nest-pink hover:text-nest-pink-dark font-medium">Find out more</a>.
|
|
</p>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 items-center">
|
|
{companies.map((company, index) => (
|
|
<div key={index} className="flex items-center justify-center p-4">
|
|
{company.link ? (
|
|
<a href={company.link} target="_blank" rel="noopener noreferrer">
|
|
<img
|
|
src={company.logo}
|
|
alt={company.name}
|
|
className="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity grayscale hover:grayscale-0"
|
|
/>
|
|
</a>
|
|
) : (
|
|
<img
|
|
src={company.logo}
|
|
alt={company.name}
|
|
className="max-h-12 w-auto 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. Wanna see your logo here?
|
|
<a href="#" className="text-nest-pink hover:text-nest-pink-dark font-medium">Find out more</a>.
|
|
</motion.p>
|
|
<motion.div
|
|
{...fadeUpPreset(0.4, 1.0)}
|
|
className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 items-center"
|
|
>
|
|
{companies.map((company, index) => (
|
|
<motion.div
|
|
key={index}
|
|
{...fadeUpPreset(0.5 + index * 0.05, 0.8)}
|
|
className="flex items-center justify-center p-4"
|
|
>
|
|
{company.link ? (
|
|
<a href={company.link} target="_blank" rel="noopener noreferrer">
|
|
<img
|
|
src={company.logo}
|
|
alt={company.name}
|
|
className="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity grayscale hover:grayscale-0"
|
|
/>
|
|
</a>
|
|
) : (
|
|
<img
|
|
src={company.logo}
|
|
alt={company.name}
|
|
className="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity grayscale hover:grayscale-0"
|
|
/>
|
|
)}
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</motion.section>
|
|
);
|
|
};
|
|
|
|
export default Companies; |