Add complete bewerbung Next.js application

- Add all Next.js application files - Include components, app structure, and public assets - Remove empty bewerbung placeholder folder - Update .gitignore for Next.js project 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-18 09:11:47 +01:00
parent 571c381718
commit 30a380cae8
48 changed files with 9038 additions and 20 deletions
@@ -0,0 +1,82 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export default function Hero() {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => setScrollY(window.scrollY);
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <section 
+      id="hero" 
+      className="relative min-h-screen flex items-center justify-center overflow-hidden"
+    >
+      {/* Background Layer 1 - Wiederholendes Muster - passt sich an Bildschirmhöhe an */}
+      <div 
+        className="absolute inset-0 w-full h-full"
+        style={{
+          backgroundImage: 'url(/img/bg-ich-2025-background.jpg)',
+          backgroundRepeat: 'repeat',
+          backgroundSize: 'auto 100%',
+          backgroundPosition: 'center',
+          transform: `translateY(${scrollY * 0.3}px)`,
+        }}
+      />
+
+      {/* Background Layer 2 - Portrait rechts (PNG mit Transparenz) */}
+      <div 
+        className="absolute inset-0 w-full h-full"
+        style={{
+          backgroundImage: 'url(/img/bg-ich-2025-foreground.png)',
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: 'auto 100%',
+          backgroundPosition: 'right center',
+          transform: `translateY(${scrollY * 0.5}px)`,
+        }}
+      />
+
+      {/* Overlay für bessere Lesbarkeit */}
+      <div className="absolute inset-0 bg-gradient-to-r from-slate-900/80 via-slate-900/50 to-transparent sm:from-slate-900/70 sm:via-slate-900/40 lg:from-slate-900/60 lg:via-slate-900/20" />
+      
+      {/* Content - Responsive Positionierung */}
+      <div className="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="max-w-full sm:max-w-2xl lg:max-w-xl space-y-6 animate-fade-in">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white tracking-wider drop-shadow-2xl">
+            be<span className="text-primary">Werbung</span>
+          </h1>
+          
+          <p className="text-lg sm:text-xl md:text-2xl text-slate-300 drop-shadow-lg">
+            Die Bewerberwebseite von <br />
+            <em className="text-primary font-semibold">Sebastian Fröhlich</em>
+          </p>
+        </div>
+      </div>
+      
+      {/* Scroll indicator */}
+      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce z-20">
+        <button
+          onClick={() => document.getElementById('intro')?.scrollIntoView({ behavior: 'smooth' })}
+          className="w-12 h-12 rounded-full bg-primary/20 backdrop-blur-sm border-2 border-primary flex items-center justify-center hover:bg-primary/30 transition-all group"
+          aria-label="Scroll nach unten"
+        >
+          <svg 
+            className="w-6 h-6 text-primary group-hover:translate-y-1 transition-transform" 
+            fill="none" 
+            strokeLinecap="round" 
+            strokeLinejoin="round" 
+            strokeWidth="2" 
+            viewBox="0 0 24 24" 
+            stroke="currentColor"
+          >
+            <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
+          </svg>
+        </button>
+      </div>
+    </section>
+  );
+}