Claude
9e22ce616d
- Schwarze Section mit fünf Fotos aus dem Salon (Haarschnitte und Momente) - Desktop: Section bleibt stehen, die Bildreihe läuft beim Scrollen seitlich durch, dazu ein Fortschrittsbalken - Handy: horizontal wischen mit Einrasten, nächstes Bild lugt hervor - Hover: Bild wird farbig und zoomt leicht; Menüpunkt "Galerie" ergänzt Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KBHsCnWNXAB2Le3gAEsivF
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import Lenis from 'lenis'
|
|
import { MotionConfig } from 'motion/react'
|
|
import { useEffect } from 'react'
|
|
import { Footer } from './components/Footer'
|
|
import { Gallery } from './components/Gallery'
|
|
import { GridLines } from './components/GridLines'
|
|
import { Hero } from './components/Hero'
|
|
import { Intro } from './components/Intro'
|
|
import { Nav } from './components/Nav'
|
|
import { Prices } from './components/Prices'
|
|
import { TeamList } from './components/TeamList'
|
|
import { setLenis } from './lib/scroll'
|
|
|
|
export default function App() {
|
|
// Weiches Scrollen (Lenis) — nur, wenn keine reduzierte Bewegung gewünscht ist
|
|
useEffect(() => {
|
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
|
|
const lenis = new Lenis({ autoRaf: true, anchors: true })
|
|
setLenis(lenis)
|
|
return () => {
|
|
setLenis(null)
|
|
lenis.destroy()
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<MotionConfig reducedMotion="user">
|
|
<a
|
|
href="#preise"
|
|
className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-1/2 focus:z-[100] focus:-translate-x-1/2 focus:bg-ink focus:px-4 focus:py-2 focus:text-paper"
|
|
>
|
|
Zu den Preisen springen
|
|
</a>
|
|
<Nav />
|
|
<main className="relative isolate">
|
|
<GridLines />
|
|
<Hero />
|
|
<Intro />
|
|
<TeamList />
|
|
<Gallery />
|
|
<Prices />
|
|
</main>
|
|
<Footer />
|
|
</MotionConfig>
|
|
)
|
|
}
|