# Header
A full-screen hero header for the **MyModz** all-in-one moodboard organizer, defined by a warm cream (#FFF6EB) canvas overlaid with a faint 72px dot-grid, a draggable pixel-ruler strip beneath the nav, and playful physics-based draggable polaroid cards with a mint-green looping card-waterfall animation embedded in the headline.
## Tech stack
- React (client component, "use client")
- framer-motion (motion, AnimatePresence, drag gestures)
- lucide-react (Home, Sparkles, Layers, Tag, LogIn, UserPlus, Image, FolderPlus, Menu, X, ArrowRight)
- Tailwind CSS for layout utilities
## Fonts & global styles
Import all three via a single Google Fonts link (add preconnect to fonts.googleapis.com and fonts.gstatic.com with crossOrigin):
```
https://fonts.googleapis.com/css2?family=Just+Me+Again+Down+Here&family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Prata&display=swap
```
- Body / UI font: 'Noto Sans', sans-serif (weights 400/500/600)
- Display headings: 'Prata', Georgia, serif (weight 400)
- Handwriting accents: 'Just Me Again Down Here', cursive (weight 400)
- Dot/line grid utility (scope it locally, never global): `background-image: linear-gradient(to right, rgba(17,18,18,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(17,18,18,0.05) 1px, transparent 1px); background-size: 72px 72px;`
- Base text color #111212; selection color bg-[#F07A64]/20
## Section container
Outer div: `relative w-full min-h-0 sm:min-h-screen h-auto sm:h-screen sm:max-h-screen`, background #FFF6EB, `overflow-hidden`, `flex flex-col justify-between`, font-family Noto Sans. First child is an absolutely-positioned `inset-0 pointer-events-none z-0` div carrying the 72px grid pattern.
## Structure, section by section
1. **Navigation bar** (`relative z-30`, bg #FFF6EB, bottom border rgba(17,18,18,0.1), padding `px-4 sm:px-8 lg:px-[64px] py-4`, animates in `y:-30 -> 0`, opacity 0 -> 1, duration 0.6, ease cubic-bezier(0.16,1,0.3,1)):
- Left: brand logo SVG (32x32, object-contain) from `https://cdn.jiro.build/Mymodz/All%20SVG/brand%20boro%20Mymodz.svg`, with the word "MyModz" shown only below lg (Noto Sans 22px, weight 600, letter-spacing -1.54px). Gap between logo group and nav links is 26px, logo to text gap 10px.
- Desktop nav (hidden below lg, gap 20px): links HOME, FEATURES, USE CASES, PRICING. Each has an 18px lucide icon (Home / Sparkles / Layers / Tag) and an uppercase Noto Sans label (16px, weight 500, letter-spacing -0.64px). On hover the icon wiggles (rotate keyframes [0,-12,12,0], scale 1.25) and both icon+label turn #F07A64 (duration 0.35, easeOut).
- Mobile toggle button (only below lg): p-2 rounded-lg, border rgba(17,18,18,0.15), bg rgba(17,18,18,0.05); shows Menu icon, swaps to X when open (22px).
- Right (desktop only, gap 6px): "LOG IN" ghost button (LogIn icon 18px + uppercase 16px label, padding 9px 12px, hover bg rgba(17,18,18,0.05)); "SIGN UP" pill (bg #F07A64, hover #e06852, rounded, px-3 py-2 sm:px-3.5 sm:py-2.5, ArrowRight 16px that nudges right 2px on hover). The SIGN UP label uses a vertical text-swap: two stacked spans (15px Noto Sans, weight 500), the top slides down 100% and a duplicate slides up from -100% on group-hover (duration 300ms ease-out).
- Mobile dropdown (AnimatePresence, absolute `top-full left-4 right-4 sm:left-6 sm:right-6 mt-2`, p-5, bg #FFF6EB, border rgba(17,18,18,0.2), rounded-2xl, shadow-2xl, backdrop-blur-md, z-50): enters/exits opacity + y:-10 + scale 0.98 (duration 0.25 easeOut). Lists the 4 nav links (20px #F07A64 icons), a divider (rgba(17,18,18,0.15)), then stacked full-width LOG IN (bordered) and SIGN UP (#F07A64, UserPlus icon) buttons. Any tap closes the menu.
2. **Ruler strip** (`relative w-full h-[28px]`, bg #FFF6EB, bottom border rgba(17,18,18,0.1), z-20, `cursor-grab active:cursor-grabbing`, fades in with delay 0.2 duration 0.5). Contains a `drag="x"` motion row (`w-[2800px]`, dragConstraints left -600 right 600). 25 tick groups (each 96px wide): a row of tick marks (first tick 10px tall for majors else 5px, at rgba(17,18,18,0.3); three faint 4px ticks at rgba(17,18,18,0.15)) and, for every 200 value, a number label (0,200,400... Noto Sans 10px, weight 500, rgba(17,18,18,0.30), uppercase). Mouse-move over the strip pans the row horizontally via a spring (damping 25, stiffness 180); leaving resets to 0.
```js
const ratio = (mouseX / rect.width) - 0.5;
setRulerHoverX(ratio * -280);
```
3. **Hero content** (`relative z-20`, centered column, `max-w-[1600px]`):
- Eyebrow badge (bg #FCEFD2, rounded, whileHover scale 1.03): "ALL-IN-ONE MOODBOARD ORGANIZER" (Noto Sans, uppercase, 13px mobile / 18px sm+, weight 500, letter-spacing -0.36px).
- Two-line Prata headline (`clamp(48px, 6vw, 80px)`, weight 400, line-height 130%, letter-spacing -3.2px): line 1 "Remember everything,"; line 2 is a flex row (gap 16px) containing a **mint-green 143x72px rounded-xl (#9FDFC4)** container plus the text "Organize nothing."
- Inside the mint container: four absolutely-positioned mini-cards fall on a seamless loop (`repeat: Infinity`, duration 4s, ease linear, times [0,0.2,0.75,1], staggered delays 0/1/2/3s). Each card animates `y:[0,25,75,145]`, `opacity:[0,1,0.9,0]`, with slight rotate wobble. Cards: (01) white 50x50 with book.png image + Image icon, left 16px, rotate ~-43deg; (02) yellow #FFE180 44x44 sticky-note with FolderPlus, left 69px, rotate ~-21deg; (03) #D8ECD9 44x44 "Mind Care" chip on #BCE0BF, left 4px, rotate ~-43deg; (04) white 44x44 with Sparkles icon, left 54px, rotate 22deg.
- Headline container animates opacity 0 + y:25 -> visible, duration 0.7 delay 0.1 ease cubic-bezier(0.16,1,0.3,1).
- Fixed 56px spacer between headline and subheading.
- Subheading (`max-w-[650px]`, Noto Sans, `clamp(18px,2.5vw,24px)`, weight 400, line-height 160%, letter-spacing -0.96px, color rgba(17,18,18,0.80)): "A home for your files, notes, ideas, and meetings, with an AI that knows your work and can do it with you."
- Primary CTA button (bg #F07A64, hover #e06852, rounded, shadow-md, `px-4 py-3 sm:px-5 sm:py-3.5 md:px-6 md:py-4`, ArrowRight 20px nudge-on-hover, whileTap scale 0.98). Label "GET STARTED FOR FREE" uses the same vertical text-swap effect (`clamp(15px,3.5vw,20px)`, weight 500, letter-spacing -0.8px, uppercase). Bottom block fades up with delay 0.3.
4. **Draggable floating props** (each `drag`, `dragElastic 0.15`, whileDrag scale ~1.06-1.08 + zIndex 50 + grabbing cursor):
- Left-top polaroid "My workspace" (rotate 17.961deg, white card padding 10px, radius 6px, shadow `0 12px 20px 0 rgba(0,0,0,0.06)`, 130x98px image well, handwriting caption 22px). Image: unsplash photo-1518458028785-8fbcd101ebb9. Hidden below sm. Enters scale 0.8 + rotate, delay 0.4.
- Left-bottom book.png (277x184, object-contain, drop-shadow-lg), hidden below md, enters y:40, delay 0.5.
- Right-top pen.png (220x140, object-contain), hidden below lg, enters x:30, delay 0.45.
- Right-bottom polaroid "My Album 2024" (rotate -10.887deg, same card style, image unsplash photo-1534528741775-53994a69daeb), hidden below sm, enters scale 0.8, delay 0.55.
5. **Bottom overview row** (`relative z-20 mb-[24px]`): a clickable "Watch overview (Explore in 60 sec)" (handwriting 22px, hover color #F07A64) preceded by a 24px filled-triangle play SVG (fill #111212, scale 110% on group hover); clicking smooth-scrolls to element id `about-us`. On lg+ a right-anchored "Scroll to explore ↓" hint in handwriting 22px.
## Assets — every URL
- Brand logo SVG: `https://cdn.jiro.build/Mymodz/All%20SVG/brand%20boro%20Mymodz.svg`
- Book image: `https://cdn.jiro.build/Mymodz/All%20Images/book.png`
- Pen image: `https://cdn.jiro.build/Mymodz/All%20Images/pen.png`
- Workspace photo: `https://images.unsplash.com/photo-1518458028785-8fbcd101ebb9?auto=format&fit=crop&w=400&q=80`
- Album photo: `https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=400&q=80`
- Play triangle path d: `M17.5761 14.9395C15.4971 16.8225 12.8991 18.5165C10.0401 19.6685C7.60701 20.6275 5.56901 19.4315 5.27001 17.0335C4.90601 13.4985 4.91401 10.1145 5.27001 6.9555C5.59601 4.4635 7.84101 3.4055 10.0401 4.3315C12.8551 5.4845 15.3801 7.0495 17.5761 9.0605C19.4521 10.7595 19.4961 13.1745 17.5761 14.9395Z`
## Animations
- Nav / hero / ruler enter with staggered delays (0.1 - 0.6s), cubic-bezier(0.16,1,0.3,1) for the big moves.
- Ruler: mouse-move pan via spring (damping 25, stiffness 180); also user-draggable on x.
- Card waterfall: 4s linear infinite loop, staggered 0/1/2/3s, keyframed y/opacity/rotate.
- Button label vertical swap on group-hover (300ms ease-out).
- Nav icon wiggle on hover (0.35s easeOut).
- All floating props are physics-draggable with elastic 0.15 and scale-up whileDrag.
## Responsive behavior
- Below lg: desktop nav links and right buttons hide; hamburger + MyModz wordmark + mobile dropdown appear.
- sm breakpoint: full-height viewport activates (min-h-screen / h-screen); the left-top and right-bottom polaroids become visible.
- md breakpoint: left-bottom book image appears.
- lg breakpoint: right-top pen image and the "Scroll to explore" hint appear.
- Headline scales via clamp(48px,6vw,80px); subheading via clamp(18px,2.5vw,24px); CTA text via clamp(15px,3.5vw,20px).
## Key design principles
- Warm cream canvas with subtle 72px grid gives a soft "workspace paper" feel.
- Editorial Prata display type contrasted with clean Noto Sans UI and playful handwriting accents.
- Coral #F07A64 is the single accent for CTAs and hover states.
- Interactive delight: draggable ruler + draggable polaroids + looping card animation reinforce the "organizer" theme.
- Keep contrast high (near-black #111212 on cream) for readability.
## Common mistakes to avoid
- Do not set global body/html fonts or resets; scope the grid utility and fonts to this section only.
- Do not use template literals in code; concatenate strings.
- Keep the ruler row overflow hidden so the 2800px track doesn't leak.
- Preserve the exact clamp() typography and letter-spacing values.
- Ensure the mint container is `overflow-visible` so falling cards animate past its bounds.
## Page title
MyModz — Remember everything, Organize nothing.
## Integration (build-safety — do not skip)
- Add this section as a **new** component file with a unique name. Don’t edit or overwrite any existing file except to add its import and render it.
- Render it **after** all existing sections; keep every previously built section exactly as-is — never replace or remove them.
- If no project exists, create a minimal React + Tailwind app; if one exists, use it as-is — don’t re-scaffold or change the Tailwind/build config or version.
- Keep it self-contained: scope its fonts and any resets to this section; never set global `body`/`html`/`*` styles or a global font.
- Install only the libraries this section names.
