**Role:** Act as a World-Class Senior Creative Technologist ...
Prompt
**Role:** Act as a World-Class Senior Creative Technologist and Lead Frontend Engineer. **Objective:** Architect a high-fidelity, cinematic "1:1 Pixel Perfect" landing page for Nura Health. **Aesthetic Identity:** "High-End Organic Tech" / "Clinical Boutique." The site should feel like a bridge between a biological research lab and an avant-garde luxury magazine. --- ### 1. CORE DESIGN SYSTEM (STRICT) **Palette:** - **Moss (Primary):** `#2E4036` - **Clay (Accent):** `#CC5833` - **Cream (Background):** `#F2F0E9` - **Charcoal (Text/Dark sections):** `#1A1A1A` **Typography:** - **Headings:** "Plus Jakarta Sans" & "Outfit" (Tracking tight). - **Drama/Emphasis:** "Cormorant Garamond" (Must use Italic for biological/organic concepts). - **Data:** Clean Monospace font for clinical telemetry. **Visual Texture:** - Global CSS Noise overlay (SVG turbulence at `0.05` opacity) to eliminate flat digital gradients. - `rounded-[2rem]` to `rounded-[3rem]` radius system for all containers. --- ### 2. COMPONENT ARCHITECTURE & BEHAVIOR #### A. NAVBAR (The Floating Island) - Fixed, pill-shaped container. - **Morphing Logic:** Transparent with white text at hero top; transitions into a `white/60` glassmorphic blur with moss text and a subtle border upon scrolling. #### B. HERO SECTION (Nature is the Algorithm) - **Visuals:** `100dvh` height. Background image of a moody, dark forest (`https://images.unsplash.com/photo-1470115636492-6d2b56f9146d`) with a heavy Moss-to-Black gradient overlay. - **Layout:** Content aligned to the bottom-left third. - **Typography:** Large-scale contrast: "Nature is the" (Bold Sans) vs. "Algorithm." (Massive Serif Italic). - **Animation:** GSAP staggered fade-up for all text elements. #### C. FEATURES (The Precision Micro-UI Dashboard) Replace standard cards with Interactive Functional Artifacts: - **Card 1 (Audit Intelligence):** "Diagnostic Shuffler" with 3 overlapping white cards cycling vertically (`unshift(pop())` logic) every 3 seconds with a spring-bounce transition (`cubic-bezier(0.34, 1.56, 0.64, 1)`). Labels: *"Epigenetic Age"*, *"Microbiome Score"*, *"Cortisol Optimization"*. - **Card 2 (Neural Stream):** "Telemetry Typewriter" live text feed cycling messages (e.g., *"Optimizing Circadian Rhythm..."*) with a blinking clay cursor and a pulsing "Live Feed" indicator dot. - **Card 3 (Adaptive Regimen):** "Mock Cursor Protocol Scheduler" with a weekly grid (`S M T W T F S`) where an automated SVG cursor moves, clicks (visual scale-down), activates the day, clicks a "Save" button, and fades out. #### D. PHILOSOPHY (The Manifesto) - High-contrast Charcoal section with a parallaxing organic texture (`https://images.unsplash.com/photo-1542601906990-b4d3fb778b09`). - **Typography:** Split-text GSAP reveal comparing: *"Modern medicine asks: What is wrong?"* vs. *"We ask: What is optimal?"* #### E. PROTOCOL (Sticky Stacking Archive) - Vertical stack of 3 full-screen cards. - **Stacking Interaction:** GSAP ScrollTrigger scaling the background card down to `0.9`, increasing blur filter to `20px`, and reducing opacity to `0.5` as a new card enters. - **Artifacts:** Unique animations per card: Rotating double-helix gear. Scanning laser-grid over medical cells. Pulsing EKG waveform path. #### F. MEMBERSHIP & FOOTER - **Pricing:** 3-tier grid. The center "Performance" tier pops with a Moss background and Clay CTA button. - **Footer:** Deep Charcoal, `rounded-t-[4rem]`, luxury utility links, and a "System Operational" badge with a pulsing green indicator. --- ### 3. TECHNICAL REQUIREMENTS - **Tech Stack:** HTML, Vanilla CSS / Tailwind CSS, JavaScript / GSAP 3 (with ScrollTrigger), Lucide Icons. - **Animation Lifecycle:** Clean mounting and unmounting handlers for all timeline animations. - **Micro-Interactions:** Magnetic feel on buttons (subtle scale-up on hover) using `overflow-hidden` with a sliding background layer for color transitions. - **Code Quality:** Zero placeholders. Use authentic Unsplash assets. Dashboard cards must feel like fully functional software. - **Execution Directive:** *"Do not build a website; build a digital instrument. Every scroll should feel intentional, every animation should feel weighted and professional. Eradicate all generic AI patterns."* اعمله بالعربي
A system prompt was added to support web rendering
