# Header Update 2
A full-screen skincare hero + navigation header for the RADIANTAS "Beauty Experts" brand, defined by a deep electric-blue (#0A4DD9) canvas, per-letter rolling-text nav hover, and a colossal 489.6px "RADIANTAS" display banner anchored to the bottom edge.
## Tech stack
- React (client component)
- framer-motion (nav rolling text, entrance animations)
- lucide-react (ArrowRight, Menu, X icons)
## Fonts & global styles
Load from Google Fonts (do NOT set global body font — scope to this section):
```
https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;900&display=swap
```
- Display/logo font: "Bebas Neue", sans-serif (used for RADIANTAS logo and the giant banner)
- Body/UI font: Inter, sans-serif
## Section container
- Root wraps two zones: a fixed/desktop nav bar and a full-height hero.
- Hero: `w-full min-h-screen`, background `#0A4DD9`, text white, `position: relative`, `overflow: hidden`, flex column with `justify-between`. Inline padding: paddingTop 24px, paddingLeft 28px, paddingRight 28px.
## Structure, section by section
### 1. Mobile top bar (< lg, hidden on lg+)
- Fixed, top-0, full width, height 4rem (h-16), `bg-white/95`, `backdrop-blur-md`, bottom border `border-slate-200`, subtle shadow, z-50, flex justify-between, px-4.
- Left: logo stack — "RADIANTAS" in Bebas Neue, text-xl, font-black, tracking-wider, color #0A4DD9; below it "BEAUTY EXPERTS" at 9px, font-bold, tracking-widest, color #93B4FF, uppercase, -mt-1.
- Right: menu toggle button (Menu icon → X icon when open), 24px icons, text-slate-700.
### 2. Mobile nav drawer (opens below top bar)
- Fixed inset-0 top-16, `bg-white/98`, `backdrop-blur-xl`, flex column, p-6, z-40, bottom border slate-200.
- Nav list: vertical, gap-4, centered vertically (my-auto). Items: text-base, font-black, tracking-widest, uppercase. Active item color #0A4DD9; inactive #93B4FF, hover #0A4DD9.
- Footer block (border-top slate-100): label "CALL FOR ORDER YOUR PRODUCT" (text-xs, font-bold, color #6B93F2, uppercase) + phone link "+7 (999) 999-99-99" (text-sm, font-black, color #0A4DD9).
### 3. Desktop nav bar (lg+ only)
- `bg-[#0A4DD9]`, white text, px-8, pt-6, pb-4, bottom border `border-white/20`. Inner max-width 1600px, mx-auto, flex justify-between, gap-6.
- Logo: h1 "RADIANTAS" — Bebas Neue, 42px, weight 400, line-height 1, letter-spacing -0.8px, color #FFF, uppercase. Subtext "BEAUTY EXPERTS" — Inter, 11px, weight 500, line-height 16px, letter-spacing 1px, color #AECBFF, uppercase, mt-0.5.
- Nav links (gap-6, xl:gap-8): HOME, ABOUT US, BENEFITS, INGREDIENTS, HOW TO USE, TESTIMONIAL. Each Inter 14px, weight 500, line-height 20px, uppercase. Active color #FFF, inactive #AECBFF. Each label is wrapped in the RollingText hover effect.
- Right cluster (gap-4): contact block (xl+ only) — label "CALL FOR ORDER" (10px, medium, #AECBFF, uppercase, tracking-wider) + phone "+7 (999) 999-99-99" (text-sm, semibold, white). Then three circular social icons (w-9 h-9 rounded-full, `bg-white/10` hover `bg-white/20`) each containing an SVG icon at w-4 h-4 with `brightness-200`.
### 4. Hero body (z-10)
Ambient glow: an absolute div at top-1/4 left-1/2 (translated -50%/-50%), 600x600px, `bg-blue-400/20`, `rounded-full`, `blur-3xl`, pointer-events-none.
Top row: 12-column grid on md+ (single column on mobile), gap-6, items-start, pt-2.
- Left (col-span-4): a button "100% NATURAL FORMULA" (Inter 18px, weight 500, line-height 24px, white, uppercase, RollingText) with an ArrowRight icon (w-5 h-5) that translates +1 on group hover. Below: two lines "CLEAN INGREDIENTS •" and "CRUELTY FREE" (same type spec).
- Center (col-span-4): product image card — relative, w-52 sm:w-60, h-52 sm:h-60, rounded-3xl, overflow-hidden, white bg, hover scale-105 (duration 500ms). Image object-cover rounded-2xl.
- Right (col-span-4, md:justify-end): pill button — inline-flex, padding 12px 12px 12px 18px, gap 9px, border-radius 12px, background #EDE7E0, hover scale-105 / active scale-95. Text "ORDER YOUR NOW" (Inter 16px, weight 500, line-height 24px, color #0D3479, uppercase, RollingText) + a 24px circular badge (bg #0D3479, white) with an ↗ glyph.
Middle description: centered, max-width 471px, marginTop/Bottom 20px. Paragraph in Inter 18px, weight 600, line-height 24px, uppercase, base color #EDE7E0. Verbatim text: "A BOTANICAL SKINCARE FORMULA DESIGNED TO DEEPLY HYDRATE, RESTORE BALANCE, AND REVEAL NATURALLY RADIANT SKIN. CRAFTED WITH CLEAN INGREDIENTS FOR EVERYDAY CONFIDENCE." — the phrases "RESTORE BALANCE" and "INGREDIENTS FOR EVERYDAY" are highlighted in color #4972BC (same type spec).
### 5. Bottom giant banner
- Full-width container, overflow-hidden, select-none, mt-auto (pushes to bottom), top border `border-white/20`, pt-[5px], flex justify-center items-end.
- h1 "RADIANTAS": Bebas Neue, font-size 489.6px, weight 400, line-height 0.75, letter-spacing -0.02em, color #FFF, uppercase, width 100%, marginBottom -0.05em (bleeds off bottom edge).
## Assets — every URL
- Product image: https://cdn.jiro.build/Radiantas/image/image%20128.png
- WhatsApp icon: https://cdn.jiro.build/Radiantas/image/Whats%20up.svg
- Instagram icon: https://cdn.jiro.build/Radiantas/image/Instagrame.svg
- Facebook icon: https://cdn.jiro.build/Radiantas/image/facebook.svg
## Animations
- RollingText (nav + CTA labels): two stacked copies of the text; on hover both slide up by 100% so the second copy replaces the first. Duration 0.3s, ease easeInOut.
```
variants = { initial: { y: 0 }, hover: { y: "-100%" } }
// second copy absolutely positioned at top-full, slides into view
transition = { duration: 0.3, ease: "easeInOut" }
```
- Left text block: initial { opacity: 0, x: -80 } → whileInView { opacity: 1, x: 0 }, duration 0.7, ease easeOut, viewport { once: false, amount: 0.2 }.
- Right pill block: initial { opacity: 0, x: 80 } → { opacity: 1, x: 0 }, duration 0.7, easeOut.
- Giant banner: initial { opacity: 0, y: 140 } → whileInView { opacity: 1, y: 24 }, duration 0.8, easeOut.
- Product card: CSS hover scale-105 over 500ms.
## Responsive behavior
- < lg: desktop nav bar hidden; fixed mobile top bar + slide-in drawer shown.
- lg+: mobile bar hidden; full desktop nav visible.
- Contact text block only visible at xl+.
- Top hero grid collapses to a single column below md; becomes 12-col with 4/4/4 split at md+.
- Product image w-52/h-52 below sm, w-60/h-60 at sm+.
## Key design principles
- Monochrome electric-blue palette with warm cream (#EDE7E0) accents for CTAs.
- Oversized Bebas Neue display type as a bottom anchor is the signature element — keep the 489.6px size and 0.75 line-height so it bleeds off the edge.
- All UI copy is uppercase.
- Rolling-text hover is the core interaction motif across nav and buttons.
## Common mistakes to avoid
- Do not use backtick template literals in code — use string concatenation.
- Keep the giant banner overflow-hidden so the oversized letters clip cleanly.
- Do not set a global body font — scope Inter/Bebas Neue to this section only.
- Keep viewport once:false so entrance animations replay on scroll.
## Page title
RADIANTAS — Beauty Experts
## 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.