kenso war das

2026-02-03 23:27:25 +01:00
parent 6bf3c603d8
commit ef2faa21fd
73 changed files with 8416 additions and 257 deletions
--- a/herosection/src/App.jsx
+++ b/herosection/src/App.jsx
@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react'
+import { Moon, Sun } from 'lucide-react'
+import HeroSection from './components/HeroSection.jsx'
+
+function App() {
+  const [dark, setDark] = useState(() => {
+    const stored = localStorage.getItem('theme')
+    if (stored === 'dark' || stored === 'light') return stored === 'dark'
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+  })
+
+  useEffect(() => {
+    const root = document.documentElement
+    if (dark) {
+      root.classList.add('dark')
+      localStorage.setItem('theme', 'dark')
+    } else {
+      root.classList.remove('dark')
+      localStorage.setItem('theme', 'light')
+    }
+  }, [dark])
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-neutral-900">
+      <button
+        type="button"
+        onClick={() => setDark((d) => !d)}
+        className="fixed top-4 right-4 z-[100] rounded-lg border border-neutral-200 bg-white/90 p-2.5 text-neutral-700 shadow-lg backdrop-blur-sm transition-colors hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800/90 dark:text-neutral-200 dark:hover:bg-neutral-700"
+        aria-label={dark ? 'Hellmodus' : 'Dark Mode'}
+      >
+        {dark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+      </button>
+      <HeroSection />
+      <section className="relative z-40 min-h-[60vh] px-4 py-20 md:px-8 md:py-28">
+        <div className="mx-auto max-w-4xl text-center">
+          <h2 className="text-2xl font-semibold text-neutral-800 dark:text-neutral-100 sm:text-3xl md:text-4xl">
+            What happens next
+          </h2>
+          <p className="mt-4 text-neutral-600 dark:text-neutral-400">
+            Scroll down to explore more. This section makes the page scrollable.
+          </p>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export default App
--- a/herosection/src/components/HeroSection.jsx
+++ b/herosection/src/components/HeroSection.jsx
@@ -0,0 +1,80 @@
+import { useState, useRef, useEffect } from 'react'
+
+const TESTIMONIALS = [
+  { name: 'Manu Arora', quote: 'Fantastic AI, highly recommend it.', position: 'top-20 -left-10', rotate: '-20deg', side: 'left' },
+  { name: 'Tyler Durden', quote: 'AI revolutionized my business model.', position: 'top-1/2 -left-10 -translate-y-1/2', rotate: '-10deg', side: 'left' },
+  { name: 'Alice Johnson', quote: 'Transformed the way I work!', position: 'top-20 -right-10', rotate: '20deg', side: 'right' },
+  { name: 'Bob Smith', quote: 'Absolutely revolutionary, a game-changer.', position: 'bottom-20 -left-10', rotate: '-10deg', side: 'left' },
+  { name: 'Cathy Lee', quote: 'Improved my work efficiency and daily life.', position: 'bottom-1/2 -right-10 -translate-y-1/2', rotate: '10deg', side: 'right' },
+  { name: 'David Wright', quote: "It's like having a superpower!", position: 'bottom-20 -right-10', rotate: '20deg', side: 'right' },
+]
+
+// Scroll-Fortschritt 0..1: wie weit die Hero-Section nach oben weggescrollt ist → Karten bewegen sich im Bogen nach unten
+function useScrollBow(heroRef) {
+  const [progress, setProgress] = useState(0)
+  useEffect(() => {
+    const hero = heroRef?.current
+    if (!hero) return
+    const onScroll = () => {
+      const rect = hero.getBoundingClientRect()
+      const h = rect.height
+      if (h <= 0) return
+      const p = Math.max(0, Math.min(1, -rect.top / h))
+      setProgress(p)
+    }
+    onScroll()
+    window.addEventListener('scroll', onScroll, { passive: true })
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [heroRef])
+  return progress
+}
+
+const EMAIL_LOGO = '/logo.png'
+
+function TestimonialCard({ name, quote, position, rotate, side, scrollProgress }) {
+  const dropY = scrollProgress * 80
+  const flyOutX = scrollProgress * 600
+  const moveX = side === 'left' ? -flyOutX : flyOutX
+  const transform = `translate(${moveX}px, ${dropY}px) rotate(${rotate})`
+  const opacity = Math.max(0, 1 - scrollProgress * 1.2)
+  const visibility = opacity <= 0 ? 'hidden' : 'visible'
+  return (
+    <div
+      className={`hero-edge-card absolute z-20 flex items-center gap-2 rounded-md bg-white p-4 shadow-lg dark:bg-neutral-800 ${position} hidden md:flex transition-all duration-200 ease-out`}
+      style={{ transform, opacity, visibility }}
+    >
+      <img alt="E-Mail" width={50} height={50} className="size-12 shrink-0 object-contain" src={EMAIL_LOGO} />
+      <div className="max-w-[180px]">
+        <h3 className="text-xs text-neutral-800 md:text-base dark:text-neutral-200">{name}</h3>
+        <p className="text-[10px] text-neutral-600 md:text-sm dark:text-neutral-400">{quote}</p>
+      </div>
+    </div>
+  )
+}
+
+function HeroSection() {
+  const heroRef = useRef(null)
+  const scrollProgress = useScrollBow(heroRef)
+
+  return (
+    <div
+      ref={heroRef}
+      className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-50 px-4 md:px-8 dark:bg-neutral-900 animate-gradient-bg"
+    >
+      {/* Rand: Testimonial-Karten – bewegen sich beim Scrollen in einem Bogen nach unten */}
+      {TESTIMONIALS.map((t) => (
+        <TestimonialCard key={t.name} {...t} scrollProgress={scrollProgress} />
+      ))}
+
+      {/* Dezentes animiertes Grid im Hintergrund (nur auf md+) */}
+      <div
+        className="absolute inset-0 z-10 hidden md:block opacity-40 animate-grid-pulse bg-[length:24px_24px] bg-[linear-gradient(to_right,#8881_1px,transparent_1px),linear-gradient(to_bottom,#8881_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#fff1_1px,transparent_1px),linear-gradient(to_bottom,#fff1_1px,transparent_1px)]"
+        aria-hidden
+      />
+      {/* Overlay: auf Mobile sichtbar, ab md ausgeblendet */}
+      <div className="absolute inset-0 z-30 h-full w-full bg-white opacity-80 md:opacity-0 dark:bg-neutral-900 pointer-events-none" aria-hidden />
+    </div>
+  )
+}
+
+export default HeroSection
--- a/herosection/src/index.css
+++ b/herosection/src/index.css
@@ -0,0 +1,125 @@
+@import "tailwindcss";
+
+/* Hero Section – Hintergrund-Animation */
+@keyframes gradient-shift {
+  0%, 100% { opacity: 1; background-position: 0% 50%; }
+  50% { opacity: 0.95; background-position: 100% 50%; }
+}
+
+@keyframes grid-pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.7; }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-gradient-bg {
+  background: linear-gradient(135deg, rgb(250 250 250) 0%, rgb(245 245 245) 50%, rgb(250 250 250) 100%);
+  background-size: 200% 200%;
+  animation: gradient-shift 8s ease infinite;
+}
+
+.dark .animate-gradient-bg {
+  background: linear-gradient(135deg, rgb(23 23 23) 0%, rgb(38 38 38) 50%, rgb(23 23 23) 100%);
+  background-size: 200% 200%;
+}
+
+.animate-grid-pulse {
+  animation: grid-pulse 4s ease-in-out infinite;
+}
+
+.hero-content-in {
+  animation: fade-in-up 0.8s ease-out forwards;
+}
+
+.hero-content-in:nth-child(9) { animation-delay: 0.1s; opacity: 0; }
+.hero-content-in:nth-child(10) { animation-delay: 0.3s; opacity: 0; }
+.hero-content-in:nth-child(11) { animation-delay: 0.5s; opacity: 0; }
+
+.hero-submit-btn {
+  transition: box-shadow 0.2s ease, transform 0.15s ease;
+}
+
+.hero-submit-btn:hover {
+  box-shadow: 0px -1px 0px 0px #FFFFFF50 inset, 0px 1px 0px 0px #FFFFFF50 inset, 0 0 20px rgba(255,255,255,0.2);
+}
+
+.dark .hero-submit-btn:hover {
+  box-shadow: 0px -1px 0px 0px #00000030 inset, 0px 1px 0px 0px #00000030 inset, 0 0 20px rgba(0,0,0,0.2);
+}
+
+.hero-submit-btn:active {
+  transform: scale(0.98);
+}
+
+/* Rand-Elemente: Scroll-Animation (Marquee) */
+@keyframes marquee-scroll {
+  0% { transform: translateX(0%); }
+  100% { transform: translateX(-100%); }
+}
+
+.hero-marquee-track {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-shrink: 0;
+  animation: marquee-scroll 25s linear infinite;
+}
+
+.hero-marquee-track:hover {
+  animation-play-state: paused;
+}
+
+.hero-marquee-container {
+  overflow: hidden;
+  display: flex;
+  position: relative;
+  width: 100%;
+  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
+  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
+}
+
+.dark .hero-marquee-container {
+  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
+  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
+}
+
+/* Rand: Testimonial-Karten – Einblend-Animation (nur opacity, Rotation bleibt per inline) */
+@keyframes hero-edge-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.hero-edge-card {
+  animation: hero-edge-in 0.6s ease-out forwards;
+}
+
+.hero-edge-card:nth-child(1) { animation-delay: 0.2s; opacity: 0; }
+.hero-edge-card:nth-child(2) { animation-delay: 0.35s; opacity: 0; }
+.hero-edge-card:nth-child(3) { animation-delay: 0.5s; opacity: 0; }
+.hero-edge-card:nth-child(4) { animation-delay: 0.4s; opacity: 0; }
+.hero-edge-card:nth-child(5) { animation-delay: 0.55s; opacity: 0; }
+.hero-edge-card:nth-child(6) { animation-delay: 0.7s; opacity: 0; }
+
+@media (max-width: 1023px) {
+  .hero-edge-card { opacity: 0.2 !important; }
+}
+
+/* Base */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+}
--- a/herosection/src/main.jsx
+++ b/herosection/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)