Initial commit

2026-01-14 14:37:01 +02:00
commit 55a74476bc
48 changed files with 2248 additions and 0 deletions
--- a/src/components/CompanyLogos.js
+++ b/src/components/CompanyLogos.js
@@ -0,0 +1,102 @@
+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;