92 lines
4.4 KiB
Plaintext
92 lines
4.4 KiB
Plaintext
---
|
|
// 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>
|
|
Webdesign & Entwicklung
|
|
</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">
|
|
Moderne, schnelle und bezahlbare Websites für Kleinbetriebe, Handwerker & KMU.
|
|
</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>
|