adaptive learning

**Recreate this exact LEARNIQ EdTech hero landing page as a single React + TypeScript + Vite + Tailwind CSS component. Match every detail below precisely — layout, copy, spacing, colors, fonts, video URL, icons, interactions, and animations.**

### Tech stack
- React 18 + TypeScript + Vite
- Tailwind CSS 3
- `lucide-react` icons only: `Search`, `User`, `Menu`, `X`, `ArrowDown`
- No other UI libraries, no Framer Motion, no GSAP — all motion via CSS transitions / Tailwind classes

### Font (exact)
Load this stylesheet in `index.html`:
```
https://db.onlinewebfonts.com/c/95cecf452d3208890088a5b4c19c7ecf?family=Helvetica+Neue+ME
```
Apply globally:
```css
* {
  font-family: 'Helvetica Neue ME', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
```
Page title: `LEARNIQ Hero`

### Full-bleed background video (exact URL — do not substitute)
```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260803_204252_e2617fe0-8301-4523-af74-2fb3874a65df.mp4
```
Video attributes: `autoPlay`, `loop`, `muted`, `playsInline`  
Classes: `absolute inset-0 w-full h-full object-cover object-center`  
Content sits in a `relative z-10` layer over the video. The video is a white/silver DNA double-helix of glowing particles on a white background — it must fill the entire viewport behind all UI.

### Overall structure
One `<section className="relative min-h-screen w-full overflow-hidden">` containing:
1. Background video
2. Content column (`flex flex-col min-h-screen`)
3. Mobile menu overlay (`fixed inset-0 z-50`)

Content column order:
1. **Nav** (top)
2. **`flex-1` spacer** (pushes hero copy to the lower half)
3. **Two-column main content** (bottom of viewport, above the bar)
4. **Frosted bottom info bar** (`mt-auto`)

### Navigation
Horizontal bar: `flex items-center justify-between px-5 sm:px-8 lg:px-12 py-5 sm:py-6`

**Left:**
- Brand wordmark: `LEARNIQ` — `text-black text-base sm:text-lg font-bold tracking-wider`
- Menu button: lucide `Menu` size 18, strokeWidth 2 + label `Menu` (`hidden sm:inline`), `text-black text-sm`, `hover:opacity-70 transition-opacity`, gap `gap-2` / `gap-4 sm:gap-6` from logo
- Clicking Menu opens the slide-in panel

**Right:**
- Search icon button: lucide `Search` size 20, strokeWidth 1.5
- User icon button: lucide `User` size 20, strokeWidth 1.5
- Both: `text-black hover:opacity-70 transition-opacity`, gap `gap-3 sm:gap-4`

### Main content area (two columns)
Container: `flex flex-col md:flex-row items-start justify-between gap-8 md:gap-12 px-5 sm:px-8 lg:px-12 pb-6 sm:pb-8 w-full`

#### Left column (`flex-1 max-w-sm`)
1. Eyebrow: `VISION OF LEARNIQ`  
   `text-xs tracking-[0.2em] uppercase text-neutral-500 mb-3 sm:mb-4`
2. H1 (exact line breaks with `<br />`):
```
Intelligent
pathways to
Growth &
Mastery
```
   Classes: `text-3xl sm:text-4xl lg:text-5xl xl:text-[3.4rem] font-light leading-[1.1] text-black tracking-tight`
3. CTA (margin `mt-10 sm:mt-14`): pill outline button  
   Text: `Start Your Journey`  
   Classes: `inline-block border border-black text-black text-xs tracking-[0.15em] uppercase px-6 sm:px-7 py-3 sm:py-3.5 rounded-full hover:bg-black hover:text-white transition-colors duration-300`  
   `href="#"`

#### Right column (`flex-1 max-w-xs`)
1. Body copy with responsive line breaks (`<br className="hidden sm:block" />` after each line):
```
Realize your strengths.
Understand your unique style,
and receive tailored guidance
to help you learn, adapt, and
excel faster.
```
   Classes: `text-sm lg:text-[15px] leading-relaxed text-neutral-700`
2. Secondary CTA (margin `mt-10 sm:mt-14`): filled pill  
   Lucide `ArrowDown` size 14 strokeWidth 2 + text `Dive in deeper`  
   Classes: `inline-flex items-center gap-2 bg-neutral-800 text-white text-xs tracking-wide px-6 py-3 rounded-full hover:bg-black transition-colors duration-300`  
   `href="#"`

### Bottom frosted info bar
Outer: `mt-auto px-4 sm:px-6 lg:px-8`  
Inner panel:
```
backdrop-blur-xl bg-[#F0F0F0]/75 border border-b-0 border-neutral-300/50 rounded-t-2xl
```
Inner flex: `px-6 sm:px-8 lg:px-12 py-6 sm:py-8 lg:py-10 flex flex-col md:flex-row md:items-start md:justify-between gap-6 md:gap-12 lg:gap-16`

**Left block** (`flex items-start gap-4 sm:gap-6 lg:gap-8 flex-shrink-0`):
- Huge number `01`: `text-4xl sm:text-5xl lg:text-6xl font-extralight text-black leading-none`
- Beside it:
  - Date `2024-08-30`: `text-xs text-neutral-500 mb-1.5`
  - H2 `Reshaping Learning With Adaptive Science`: `text-base sm:text-lg lg:text-xl font-medium text-black leading-snug max-w-[220px]`

**Right block** (`flex-1 max-w-xl`):
Exact paragraph:
```
LEARNIQ is a worldwide EdTech platform committed to transforming education through adaptive, science-backed methods. Working alongside top researchers and learning experts, LEARNIQ delivers meaningful insights that enable students at every level to unlock peak performance. Available internationally since May 2024.
```
Classes: `text-sm leading-relaxed text-neutral-600`

### Mobile / slide-in menu (exact interaction + animation)
State: `menuOpen` boolean. When open, set `document.body.style.overflow = 'hidden'`; restore on close/unmount.

Overlay wrapper:
```
fixed inset-0 z-50 transition-all duration-500 ease-in-out
```
- Open: `visible` / Closed: `invisible`

**Backdrop:**
```
absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity duration-500 ease-in-out
```
- Open: `opacity-100` / Closed: `opacity-0`
- Click closes menu

**Panel (slides from left):**
```
absolute top-0 left-0 h-full w-full sm:w-[380px] bg-white shadow-2xl
transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]
```
- Open: `translate-x-0` / Closed: `-translate-x-full`

**Panel header:** logo `LEARNIQ` (same styles as nav) + close button lucide `X` size 22 strokeWidth 1.5, `hover:opacity-70`

**Menu links** (exact labels + stagger delays):
| Label | Delay when opening |
|---|---|
| Home | 75ms |
| Evaluations | 150ms |
| Our Mission | 225ms |
| The Process | 300ms |
| Insights | 375ms |
| Contact | 450ms |

Each link:
```
block py-3.5 text-2xl sm:text-3xl font-light text-black tracking-tight border-b border-neutral-100
transition-all duration-500 ease-out
```
- Open: `opacity-100 translate-y-0` with `transitionDelay: item.delay`
- Closed: `opacity-0 translate-y-4` with `transitionDelay: 0ms`
- Click closes menu; `href="#"`

**Menu footer** (absolute bottom):
```
Reach out now   → text-xs tracking-[0.15em] uppercase text-neutral-400 mb-4
hello@learniq.co → text-sm text-neutral-600
```
Footer motion: same fade/slide as links, `transitionDelay: 500ms` when open, `0ms` when closed.

### Visual / UX constraints
- Aesthetic: minimal Swiss/Helvetica editorial EdTech — black type on translucent white video, frosted light-gray bottom sheet, pill CTAs, generous whitespace
- Hero must read as one composition: DNA video is the dominant full-bleed visual plane; type sits over it; bottom bar anchors the viewport
- Fully responsive: stacked columns on mobile, side-by-side from `md:` up; nav paddings and type scale as specified
- No cards in the hero content (only the bottom bar is a frosted rounded-top panel)
- No purple gradients, no cream paper theme, no newspaper columns — match this exact black/white/neutral system

### Acceptance checklist
- [ ] Exact CloudFront `.mp4` URL above, looping muted autoplay cover video
- [ ] Exact Helvetica Neue ME webfont URL and global stack
- [ ] Exact copy, line breaks, date `2024-08-30`, email `hello@learniq.co`
- [ ] Exact Tailwind classes / spacing / type sizes listed
- [ ] Outline CTA + filled ArrowDown CTA with specified hover transitions (300ms colors)
- [ ] Menu: 500ms slide + blur backdrop + staggered link fade/rise (75→450ms) + footer at 500ms
- [ ] Body scroll lock while menu open
- [ ] Lucide icons at the exact sizes/strokeWidths listed