Initial commit

src/components/TeamAugmentation.js

@@ -0,0 +1,82 @@
+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 TeamAugmentation() {
+  const shouldReduce = useReducedMotion();
+
+  if (shouldReduce) {
+    return (
+      <section className="section-padding bg-brand-red">
+        <div className="container-custom">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div className="order-2 lg:order-1">
+              <img 
+                src="https://enterprise.nestjs.com/assets/cat-chair.jpg" 
+                alt="Cat in chair" 
+                className="w-full max-w-md mx-auto"
+              />
+            </div>
+            
+            <div className="order-1 lg:order-2">
+              <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
+                Team augmentation. By your side at every step
+              </h2>
+              <p className="text-xl text-white/90 mb-8 leading-relaxed">
+                Nest core team members can work directly with your team on a daily basis to help take your project to the next-level. Let us partner with you and your team to develop the most ambitious projects.
+              </p>
+              <button className="bg-white text-brand-red px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors">
+                Contact us to learn more
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <motion.section 
+      {...fadeUpPreset(0.1, 1.0)}
+      className="section-padding bg-brand-red"
+    >
+      <div className="container-custom">
+        <div className="grid lg:grid-cols-2 gap-12 items-center">
+          <motion.div 
+            {...fadeUpPreset(0.2, 1.0)}
+            className="order-2 lg:order-1"
+          >
+            <img 
+              src="https://enterprise.nestjs.com/assets/cat-chair.jpg" 
+              alt="Cat in chair" 
+              className="w-full max-w-md mx-auto"
+            />
+          </motion.div>
+          
+          <motion.div 
+            {...fadeUpPreset(0.3, 1.0)}
+            className="order-1 lg:order-2"
+          >
+            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
+              Team augmentation. By your side at every step
+            </h2>
+            <p className="text-xl text-white/90 mb-8 leading-relaxed">
+              Nest core team members can work directly with your team on a daily basis to help take your project to the next-level. Let us partner with you and your team to develop the most ambitious projects.
+            </p>
+            <button className="bg-white text-brand-red px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors">
+              Contact us to learn more
+            </button>
+          </motion.div>
+        </div>
+      </div>
+    </motion.section>
+  );
+}
+
+export default TeamAugmentation;