Initial commit

2026-01-15 14:05:51 +02:00
commit e4640a5884
18 changed files with 2352 additions and 0 deletions
--- a/src/components/CompaniesSection.js
+++ b/src/components/CompaniesSection.js
@@ -0,0 +1,171 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+function CompaniesSection() {
+  const shouldReduce = useReducedMotion();
+  
+  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 = [
+    {
+      name: "Sanofi",
+      logo: "https://www.jobs.nestjs.com/img/logos/sanofi.png",
+      url: "https://www.sanofi.com/"
+    },
+    {
+      name: "Adidas",
+      logo: "https://www.jobs.nestjs.com/img/logos/adidas.svg",
+      url: "https://adidas.com/"
+    },
+    {
+      name: "Autodesk",
+      logo: "https://www.jobs.nestjs.com/img/logos/autodesk.png",
+      url: "https://www.autodesk.com/"
+    },
+    {
+      name: "Mercedes",
+      logo: "https://www.jobs.nestjs.com/img/logos/mercedes.png",
+      url: "https://www.mercedes-benz.com/"
+    },
+    {
+      name: "Red Hat",
+      logo: "https://www.jobs.nestjs.com/img/logos/red-hat.svg",
+      url: "https://www.redhat.com/"
+    },
+    {
+      name: "Roche",
+      logo: "https://www.jobs.nestjs.com/img/logos/roche-logo.png",
+      url: "https://roche.com/"
+    },
+    {
+      name: "IBM",
+      logo: "https://www.jobs.nestjs.com/img/logos/ibm.svg",
+      url: "https://www.ibm.com/"
+    },
+    {
+      name: "Decathlon",
+      logo: "https://www.jobs.nestjs.com/img/logos/decathlon.png",
+      url: "https://www.decathlon.com/"
+    },
+    {
+      name: "BMW",
+      logo: "https://www.jobs.nestjs.com/img/logos/bmw.svg",
+      url: ""
+    },
+    {
+      name: "Société Générale",
+      logo: "https://www.jobs.nestjs.com/img/logos/societe-generale-logo.png",
+      url: "https://www.societegenerale.fr/"
+    },
+    {
+      name: "TotalEnergies",
+      logo: "https://www.jobs.nestjs.com/img/logos/totalenergies.svg",
+      url: "https://totalenergies.com/"
+    },
+    {
+      name: "REWE",
+      logo: "https://www.jobs.nestjs.com/img/logos/rewe.svg",
+      url: "https://www.rewe-digital.com/"
+    },
+    {
+      name: "Capgemini",
+      logo: "https://www.jobs.nestjs.com/img/logos/capgemini.svg",
+      url: "https://capgemini.com/"
+    },
+    {
+      name: "JetBrains",
+      logo: "https://www.jobs.nestjs.com/img/logos/jetbrains.svg",
+      url: "https://www.jetbrains.com/"
+    },
+    {
+      name: "GitLab",
+      logo: "https://www.jobs.nestjs.com/img/logos/gitlab.png",
+      url: "https://about.gitlab.com/"
+    }
+  ];
+
+  const CompanyLogo = ({ company, index }) => {
+    const LogoComponent = shouldReduce ? 'div' : motion.div;
+    const logoProps = shouldReduce ? {} : fadeUpPreset(index * 0.05, 0.6);
+    
+    const logoElement = (
+      <img 
+        src={company.logo} 
+        alt={company.name} 
+        className="company-logo"
+      />
+    );
+
+    return (
+      <LogoComponent 
+        {...logoProps}
+        className="flex items-center justify-center p-4"
+      >
+        {company.url ? (
+          <a href={company.url} target="_blank" rel="noopener noreferrer">
+            {logoElement}
+          </a>
+        ) : (
+          logoElement
+        )}
+      </LogoComponent>
+    );
+  };
+
+  if (shouldReduce) {
+    return (
+      <section className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+              Who is using Nest?
+            </h2>
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+              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:underline">Find out more</a>.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
+            {companies.map((company, index) => (
+              <CompanyLogo key={company.name} company={company} index={index} />
+            ))}
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <motion.section 
+      {...fadeUpPreset(0.1, 1.0)}
+      className="py-20 bg-white"
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div 
+          {...fadeUpPreset(0.2, 1.0)}
+          className="text-center mb-12"
+        >
+          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+            Who is using Nest?
+          </h2>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            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:underline">Find out more</a>.
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
+          {companies.map((company, index) => (
+            <CompanyLogo key={company.name} company={company} index={index} />
+          ))}
+        </div>
+      </div>
+    </motion.section>
+  );
+}
+
+export default CompaniesSection;