Initial commit

src/components/Hero.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import { Package } from 'lucide-react';
+
+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 Hero = () => {
+  const shouldReduceMotion = useReducedMotion();
+
+  if (shouldReduceMotion) {
+    return (
+      <section className="hero-gradient pt-24 pb-16 lg:pt-32 lg:pb-24">
+        <div className="container-custom">
+          <div className="max-w-4xl">
+            <h1 className="text-4xl lg:text-6xl font-bold text-gray-900 mb-6">
+              <span className="text-primary-600">AI-powered</span><br />
+              web and mobile<br />
+              <span className="text-primary-600">in 12 weeks</span>
+            </h1>
+            
+            <div className="flex items-center space-x-2 mb-8">
+              <span className="text-gray-600">Powered by</span>
+              <div className="flex items-center space-x-1">
+                <div className="flex space-x-1">
+                  <div className="w-2 h-2 bg-red-500 rounded-full"></div>
+                  <div className="w-2 h-2 bg-red-400 rounded-full"></div>
+                  <div className="w-2 h-2 bg-red-300 rounded-full"></div>
+                </div>
+                <span className="font-semibold text-gray-900">n8n</span>
+              </div>
+            </div>
+
+            <div className="flex flex-col sm:flex-row gap-4 mb-12">
+              <button className="btn-primary">
+                Start Discovery
+              </button>
+              <button className="btn-secondary flex items-center space-x-2">
+                <Package className="w-5 h-5" />
+                <span>Portfolio Showcase</span>
+              </button>
+            </div>
+
+            {/* Tech Stack */}
+            <div className="flex flex-wrap gap-3">
+              {[
+                { name: 'React', color: 'bg-blue-100 text-blue-700' },
+                { name: 'Node.js', color: 'bg-green-100 text-green-700' },
+                { name: 'NestJS', color: 'bg-red-100 text-red-700' },
+                { name: 'MySQL', color: 'bg-orange-100 text-orange-700' },
+                { name: 'MongoDB', color: 'bg-green-100 text-green-700' },
+                { name: 'Nginx', color: 'bg-green-100 text-green-700' },
+                { name: 'Redis', color: 'bg-red-100 text-red-700' },
+                { name: 'TypeScript', color: 'bg-blue-100 text-blue-700' }
+              ].map((tech, index) => (
+                <span key={tech.name} className={`tech-badge ${tech.color}`}>
+                  #{tech.name.toLowerCase()}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <motion.section 
+      {...fadeUpPreset(0.1, 0.8)}
+      className="hero-gradient pt-24 pb-16 lg:pt-32 lg:pb-24"
+    >
+      <div className="container-custom">
+        <div className="max-w-4xl">
+          <motion.h1 
+            {...fadeUpPreset(0.2, 0.8)}
+            className="text-4xl lg:text-6xl font-bold text-gray-900 mb-6"
+          >
+            <span className="text-primary-600">AI-powered</span><br />
+            web and mobile<br />
+            <span className="text-primary-600">in 12 weeks</span>
+          </motion.h1>
+          
+          <motion.div 
+            {...fadeUpPreset(0.3, 0.8)}
+            className="flex items-center space-x-2 mb-8"
+          >
+            <span className="text-gray-600">Powered by</span>
+            <div className="flex items-center space-x-1">
+              <div className="flex space-x-1">
+                <div className="w-2 h-2 bg-red-500 rounded-full"></div>
+                <div className="w-2 h-2 bg-red-400 rounded-full"></div>
+                <div className="w-2 h-2 bg-red-300 rounded-full"></div>
+              </div>
+              <span className="font-semibold text-gray-900">n8n</span>
+            </div>
+          </motion.div>
+
+          <motion.div 
+            {...fadeUpPreset(0.4, 0.8)}
+            className="flex flex-col sm:flex-row gap-4 mb-12"
+          >
+            <button className="btn-primary">
+              Start Discovery
+            </button>
+            <button className="btn-secondary flex items-center space-x-2">
+              <Package className="w-5 h-5" />
+              <span>Portfolio Showcase</span>
+            </button>
+          </motion.div>
+
+          {/* Tech Stack */}
+          <motion.div 
+            {...fadeUpPreset(0.5, 0.8)}
+            className="flex flex-wrap gap-3"
+          >
+            {[
+              { name: 'React', color: 'bg-blue-100 text-blue-700' },
+              { name: 'Node.js', color: 'bg-green-100 text-green-700' },
+              { name: 'NestJS', color: 'bg-red-100 text-red-700' },
+              { name: 'MySQL', color: 'bg-orange-100 text-orange-700' },
+              { name: 'MongoDB', color: 'bg-green-100 text-green-700' },
+              { name: 'Nginx', color: 'bg-green-100 text-green-700' },
+              { name: 'Redis', color: 'bg-red-100 text-red-700' },
+              { name: 'TypeScript', color: 'bg-blue-100 text-blue-700' }
+            ].map((tech, index) => (
+              <motion.span 
+                key={tech.name}
+                {...fadeUpPreset(0.6 + index * 0.05, 0.6)}
+                className={`tech-badge ${tech.color}`}
+              >
+                #{tech.name.toLowerCase()}
+              </motion.span>
+            ))}
+          </motion.div>
+        </div>
+      </div>
+    </motion.section>
+  );
+};
+
+export default Hero;