Foldcraft

# Foldcraft — Fullscreen Studio Hero

## Goal
Create a fullscreen hero landing page for a creative studio called "Foldcraft" using React, Tailwind CSS and `lucide-react` icons. The page is a single viewport-height section with a looping background video, a responsive navbar, a mobile menu, and staggered-animated hero text. Nothing else.

**Dependencies**: React, `lucide-react` (`ArrowRight`, `Menu`, `X`), Tailwind CSS, Google Fonts Geist.

## Video background
- URL (exact): `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_204221_5339e40b-e73d-4ab0-9c65-79c18c66fd50.mp4`
- Attributes: `autoPlay muted loop playsInline`.
- Styling: absolutely positioned, full width and height, `object-cover`, object-position at 70% horizontal / center vertical.
- It sits behind all content — no z-index at all, not even `z-0`.

## Font
- Google Fonts **Geist**, weights 300-700, loaded with a `<link>` in `index.html`.
- Tailwind config extends `fontFamily` with `geist: ['Geist', 'sans-serif']`, applied as `font-geist` on the root container.
- Body CSS: `-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;`

## Root container
`relative h-screen w-full overflow-hidden bg-black font-geist`

## Navbar (`z-30`)
Flex, space-between, padding `px-6 py-5 md:px-12 lg:px-16`.

- **Left**: logo text "Foldcraft" (`text-lg font-semibold tracking-tight text-white sm:text-xl`), followed by the desktop nav links — hidden on mobile, `flex` from `md` up. Links: Home, Projects, Studio, Reach Us, each `text-sm text-white/80 hover:text-white transition-colors`.
- **Right (desktop)**: a "Let's Talk" button — `rounded-lg bg-white px-5 py-2 text-sm font-medium text-black hover:scale-105 transition-transform`.
- **Right (mobile)**: a 40×40 hamburger toggle at `z-50` with animated `Menu` / `X` icons stacked in the same spot. `Menu` rotates 90deg out while `X` rotates in, both with opacity and scale transitions at `duration-300`. The button carries `active:scale-90`.

## Mobile menu (`z-20`)
- Absolute, `inset-x-0 top-0`, full-screen overlay, `bg-black/98 backdrop-blur-xl`.
- Transition `duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]`, toggling between `h-screen opacity-100` and `h-0 opacity-0 pointer-events-none`.
- Inner content is vertically centred — `flex h-full flex-col justify-center px-8` — and carries its own delayed fade plus translate (`delay-100`, `translate-y-8` when closed).
- Links Home, Projects, Studio, Reach Us at `text-3xl font-medium text-white/90 hover:text-white`; then a "Let's Talk" button, `mt-6 rounded-full bg-white px-8 py-3.5 text-base font-medium text-black hover:scale-105`.
- Every link and the button call `setMobileMenuOpen(false)` on click.

## Hero content (`z-10`)
Flex column, `justify-between`, filling the remaining height: `h-[calc(100vh-80px)]`. Padding `px-6 pb-10 pt-12 sm:pb-12 sm:pt-16 md:px-12 md:pb-16 md:pt-20 lg:px-16`.

**Top section** (`max-w-3xl`):
- Badge "Brand & Visual Storytelling" — `text-xs sm:text-sm text-white/90`, `animate-[fadeSlideUp_0.8s_ease_0.2s_both]`, margin-bottom 4 (`sm:6`).
- Heading `<h1>`: "Shaping visual / narratives, / one pixel at a time." with `<br/>` line breaks. Sizing `text-3xl sm:text-5xl md:text-6xl lg:text-7xl`; style `font-medium leading-[1.1] tracking-tight text-white`; animation `animate-[fadeSlideUp_0.8s_ease_0.4s_both]`.

**Bottom section**:
- Paragraph "Turning vision into reality through craft, motion, and an endless pursuit of beauty." — `text-sm sm:text-base md:text-lg leading-relaxed text-white/60 max-w-sm sm:max-w-lg mb-5 sm:mb-6`, animation `animate-[fadeSlideUp_0.8s_ease_0.7s_both]`.
- CTA button "Explore Work" with an `ArrowRight` icon at `size={16}` — `rounded-lg bg-white px-5 py-2.5 sm:px-6 sm:py-3 text-sm font-medium text-black hover:scale-105 transition-transform inline-flex items-center gap-2`, animation `animate-[fadeSlideUp_0.8s_ease_0.9s_both]`.

## CSS in `index.css`
```css
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
```

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no CSS files beyond the two blocks above.
- Give the background video `aria-hidden`; it is decoration and never the only carrier of meaning. The hamburger needs a real `aria-label` and `aria-expanded`, and every foreground control stays reachable by keyboard with a visible focus ring.
- Autoplay only works while the element is genuinely `muted` and `playsInline` — keep both.
- Watch the payload: a full-resolution source video will dominate page weight. Downscale to the rendered size, drop the audio track that muted playback never uses, and serve a compressed derivative.
- Respect `prefers-reduced-motion`: pause the loop and hold a still frame, and disable the four fade-up entrances. Their fill mode is `both`, so simply suppressing the animation is not enough on its own — make sure the text still lands at full opacity.
- `object-position: 70%` is doing real work: it keeps the bright part of the footage away from the left column where all the type lives. Re-check that framing before swapping the source.