initial commit

src/components/Hero.astro

@@ -0,0 +1,91 @@
+---
+// src/components/Hero.astro
+import { FaArrowRight } from 'react-icons/fa';
+---
+
+<section id="hero" class="relative flex h-screen items-center justify-center overflow-hidden bg-brand-primary">
+  
+  <!-- Background Video with image fallback -->
+  <div class="absolute inset-0 w-full h-full z-0 overflow-hidden">
+    <!-- Parallax scrolling wrapper -->
+    <div id="hero-bg" class="absolute inset-0 w-full h-full transition-transform duration-75 ease-out scale-110">
+      <video 
+        autoplay 
+        loop 
+        muted 
+        playsinline 
+        class="w-full h-full object-cover object-center filter brightness-[0.4]"
+        poster="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1920&q=80"
+      >
+        <source src="https://cdn.pixabay.com/video/2019/04/16/22909-331666687_large.mp4" type="video/mp4" />
+        <!-- Fallback if video fails -->
+        <div class="w-full h-full bg-cover bg-center" style="background-image:url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1920&q=80')"></div>
+      </video>
+    </div>
+  </div>
+
+  <!-- Ambient Glow -->
+  <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-cyan/20 rounded-full blur-[120px] pointer-events-none animate-pulse"></div>
+  <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-brand-magenta/15 rounded-full blur-[120px] pointer-events-none animate-pulse" style="animation-delay: 2s;"></div>
+
+  <!-- Glassmorphism overlay for extra futuristic depth -->
+  <div class="absolute inset-0 bg-brand-primary/40 backdrop-blur-[2px] z-0"></div>
+
+  <!-- Content -->
+  <div id="hero-content" class="relative z-10 text-center px-4 max-w-4xl transition-transform duration-75 ease-out">
+    
+    <!-- Neon badge -->
+    <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-brand-cyan/30 bg-brand-cyan/5 text-brand-cyan text-xs font-semibold uppercase tracking-widest mb-6 animate-bounce">
+      <span class="w-2 h-2 rounded-full bg-brand-cyan animate-ping"></span>
+      IT-Consulting & Development
+    </div>
+
+    <!-- Title with cyan/magenta highlights -->
+    <h1 class="text-5xl md:text-8xl font-extrabold text-white mb-6 tracking-tight drop-shadow-[0_5px_15px_rgba(0,0,0,0.8)] uppercase">
+      N&D <span class="bg-gradient-to-r from-brand-cyan via-purple-500 to-brand-magenta bg-clip-text text-transparent drop-shadow-none">i-t SOLUTIONS</span>
+    </h1>
+
+    <p class="text-lg md:text-2xl text-gray-300 mb-10 max-w-2xl mx-auto font-light drop-shadow-md">
+      Zukunftssichere IT-Dienstleistungen und modernste Softwareentwicklung für Ihr Unternehmen.
+    </p>
+
+    <!-- Glowing CTA Button -->
+    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
+      <a href="#services"
+         class="group inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-brand-cyan to-brand-magenta text-brand-primary font-bold rounded-full shadow-[0_0_20px_rgba(0,229,255,0.4)] hover:shadow-[0_0_35px_rgba(255,0,255,0.6)] hover:scale-105 active:scale-95 transform transition-all duration-300">
+        Mehr erfahren 
+        <FaArrowRight class="w-4 h-4 text-brand-primary group-hover:translate-x-1.5 transition-transform duration-300" />
+      </a>
+      
+      <a href="#contact"
+         class="inline-flex items-center gap-2 px-8 py-4 border border-white/20 hover:border-brand-cyan/50 bg-white/5 hover:bg-white/10 text-white font-medium rounded-full backdrop-blur-sm transition-all duration-300">
+        Kontakt aufnehmen
+      </a>
+    </div>
+  </div>
+
+  <!-- Scroll Down Indicator -->
+  <a href="#services" class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce z-10 p-2 text-white hover:text-brand-cyan transition-colors" aria-label="Scroll to services">
+    <svg class="w-8 h-8 drop-shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M19 9l-7 7-7-7"/>
+    </svg>
+  </a>
+</section>
+
+<script>
+  const bg = document.getElementById('hero-bg');
+  const content = document.getElementById('hero-content');
+
+  // Parallax Scroll Effect
+  window.addEventListener('scroll', () => {
+    const scroll = window.scrollY;
+    if (scroll < window.innerHeight) {
+      if (bg) bg.style.transform = `translateY(${scroll * 0.3}px) scale(1.1)`;
+      if (content) {
+        content.style.transform = `translateY(${scroll * 0.15}px)`;
+        content.style.opacity = (1 - scroll / (window.innerHeight * 0.8)).toString();
+      }
+    }
+  });
+</script>