feat: Initialize project with Vite and React

Sets up the project structure with Vite, React, and essential libraries like GSAP and Framer Motion. Configures Tailwind CSS for styling, including dark mode and custom color schemes. Includes basic component structure for the application, laying the groundwork for UI development.
2026-01-15 18:27:22 +01:00
parent 4e3516d96a
commit 1a85f0eb2d
19 changed files with 1260 additions and 8 deletions
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -0,0 +1,88 @@
+import React, { useRef, useLayoutEffect } from 'react';
+import { motion } from 'framer-motion';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+const Hero: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  useLayoutEffect(() => {
+    const ctx = gsap.context(() => {
+      // Parallax Background
+      gsap.to(imageRef.current, {
+        yPercent: 30,
+        ease: "none",
+        scrollTrigger: {
+          trigger: containerRef.current,
+          start: "top top",
+          end: "bottom top",
+          scrub: true
+        }
+      });
+
+      // Text Stagger Animation
+      gsap.fromTo(".hero-stagger", 
+        { y: 50, opacity: 0 },
+        { y: 0, opacity: 1, duration: 1, stagger: 0.2, ease: "power3.out", delay: 0.2 }
+      );
+    }, containerRef);
+
+    return () => ctx.revert();
+  }, []);
+
+  return (
+    <section ref={containerRef} className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
+      <div className="absolute inset-0 z-0">
+        <img 
+          ref={imageRef}
+          alt="Abstract dark technology background" 
+          className="w-full h-[120%] -top-[10%] absolute object-cover opacity-90 dark:opacity-60 brightness-50 contrast-125" 
+          src="https://lh3.googleusercontent.com/aida-public/AB6AXuDTVpQgmoDeaMvQ7ZXqAWwA3243QWiW39J5KBEt-0pHjhbb4q9ICJb9f42oiDD5becHfElI6zFDQXMpaaMm1Ce5aj4IBVAiIz_XfRzdW-ktaVtom2rkjI9e6AGk71D4YpnXcRtifs5DrbmZfkbp7oBt67fLTwtXLZ_qAic5HprmFz1Xnf2E6emY_trL9Hr4SBtAQL5BE8LHCbF0PrBTK960_Tqz2VhSt_CZfI8UmzBUunqFf54LiDvUsxguYJitq5-r0vWHMVt7xTh1"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-background-light via-transparent to-transparent dark:from-background-dark dark:via-transparent dark:to-transparent"></div>
+        <div className="absolute inset-0 bg-gradient-to-b from-background-light/50 dark:from-background-dark/50 to-transparent"></div>
+      </div>
+
+      <div className="relative z-10 text-center max-w-4xl px-6">
+        <div className="hero-stagger flex items-center justify-center gap-2 mb-6">
+          <span className="h-px w-8 bg-gray-400 dark:bg-gray-500"></span>
+          <span className="text-xs uppercase tracking-[0.2em] text-gray-600 dark:text-gray-400 font-medium">Established 1998</span>
+          <span className="h-px w-8 bg-gray-400 dark:bg-gray-500"></span>
+        </div>
+        
+        <h1 className="hero-stagger font-display text-5xl md:text-7xl lg:text-8xl font-medium tracking-tighter leading-[1.1] mb-8 text-gray-900 dark:text-white">
+          Reliable IT Services<br/>
+          <span className="text-gray-500 dark:text-gray-500">for Over 25 Years.</span>
+        </h1>
+        
+        <p className="hero-stagger text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-10 font-light leading-relaxed">
+          Bay Area Affiliates is your silent partner in technology. We provide the infrastructure that whispers clarity, ensures uptime, and guides your business growth.
+        </p>
+        
+        <div className="hero-stagger flex flex-col sm:flex-row items-center justify-center gap-4">
+          <motion.a 
+            href="#services" 
+            className="px-8 py-3 bg-black dark:bg-white text-white dark:text-black rounded-full font-medium"
+            whileHover={{ scale: 1.05, backgroundColor: "#3b82f6", color: "#ffffff" }}
+            whileTap={{ scale: 0.95 }}
+          >
+            Explore Services
+          </motion.a>
+          <motion.a 
+            href="#contact" 
+            className="px-8 py-3 bg-transparent border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-full font-medium"
+            whileHover={{ scale: 1.05, backgroundColor: "rgba(255,255,255,0.1)", borderColor: "#ffffff" }}
+            whileTap={{ scale: 0.95 }}
+          >
+            Get a Consultation
+          </motion.a>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Hero;