Kitebrook: AI landing page prompt

Paste this prompt into Lovable, Bolt, v0 or Cursor to build the Kitebrook animated hero. Long-press the text below to select and copy it.

Build a single-page landing hero for "Kitebrook", a fictional summer camp, with React + Tailwind CSS + Framer Motion.

BACKGROUND
- Full-screen <video> that autoplays, loops, is muted and playsInline, object-cover. Use your own looping anime-hillside video (save it as /public/hero.mp4).
- Overlay a soft gradient for legibility: black/30 at the top, transparent in the middle, black/40 at the bottom.

HEADER (px-8 pt-6)
- Left: white wordmark "Kitebrook" in Fredoka 600, 26px.
- Center: frosted-glass pill nav (bg-white/15, backdrop-blur-md, border border-white/30, px-2 py-1.5) with links "Camps", "Trails", "Stories" in white/90.
- Right: solid white pill button "Book" with slate-800 text.

HERO (centered, starts ~18vh from top)
- Huge chunky rounded headline "SUMMER UP HIGH" in Fredoka 700, white, clamp(56px, 10vw, 136px), leading-[0.95], soft text shadow, max two lines.
- Subline "Tents, trails and starry nights." white/90, 20px.
- Two pill buttons, gap-3: solid white "Book a spot" and a darker glass "▶ Watch film" (bg-slate-900/25, backdrop-blur-md, border-white/30) so it stays readable over bright clouds.

CARDS (bottom, max-w-5xl, 3 columns, gap-4)
- Glass cards (rounded-3xl, bg-white/15, backdrop-blur-lg, border-white/30, p-5): "Hidden Camps" / "Secluded spots, wild views.", "Mountain Trails" / "Hikes for every explorer.", "Starry Nights" / "Stories around the fire.", each with a → arrow on the right. On mobile they scroll horizontally.

MOTION (Framer Motion, easeOut)
- Header fades down from -16px (0.6s).
- Headline: each word fades up from 28px and un-blurs (blur 10px → 0), stagger 0.12s, starting at 0.2s.
- Subline, buttons, then cards fade up after it, stagger 0.1s.
- Hover: buttons scale 1.04, cards lift 6px and brighten to bg-white/25.
- Respect prefers-reduced-motion.

Responsive, accessible (focus rings, aria-labels), clean code. Only this hero section, nothing else.

© 2026 Graphic Designer · @Graphics_designerr. All rights reserved.