Page Architecture: Claru

# Page Architecture: Claru

## Section Structure

### SECTION 1: Hero
**Purpose:** Establish the problem, introduce the solution, build immediate credibility

**Elements:**
- ASCII/dither animated background (subtle, not distracting)
- Logo: "CLARU" in ASCII-style typography
- Headline: "The Human Cortex for Your Digital Brain."
- Subheadline: "Frontier models have hit a wall with commodity data. Stop feeding your R&D to a black box. We provide the embedded, expert-grade intelligence you need to solve reasoning, coding, and physical reality."
- Primary CTA: "[ Initialize Your Squad ]" (terminal bracket style)
- Trust line: "Trusted by Reka AI, Moonvalley, and frontier AI labs."
- Visual: Animated ASCII brain or neural network pattern

---

### SECTION 2: The Wedge (Three Offerings)
**Purpose:** Explain what Claru actually does in concrete terms

**Layout:** 3-column grid with numbered items

**Column 1: The Golden Set**
- Number: "01"
- Title: "The Golden Set"
- Subtitle: "The Ruler for Your Reality."
- Body: "You can't improve what you can't measure. We build pristine, expert-verified 'Answer Keys' that serve as the undeniable ground truth for your model's evaluation."
- Tagline: "Stop grading on a curve."

**Column 2: The Embedded Squad**
- Number: "02"
- Title: "The Embedded Squad"
- Subtitle: "Slack-Ops, Not Tickets."
- Body: "Lease a dedicated pod of pre-aligned experts who live in your Slack, join your standups, and share your context. No 'Project Managers' in the middle. Just engineers talking to experts."
- Tagline: "End the game of telephone."

**Column 3: The Frontier Standard**
- Number: "03"
- Title: "The Frontier Standard"
- Subtitle: "Battle-Tested Methodologies."
- Body: "We don't guess at quality. We install the exact operational playbooks, QA hierarchies, and dispute flows used to build the world's leading models."
- Tagline: "Skip the learning curve."

---

### SECTION 3: The Paradigm Shift
**Purpose:** Create clear differentiation from competitors

**Layout:** Split-screen comparison (left vs right)

**Left Side: The Black Box (Them)**
- Header: "The Black Box" with X icon
- Style: Darker, slightly faded
- Points:
  - "Transactional: You pay per task."
  - "Opaque: Who labeled this? No idea."
  - "Slow: Feedback takes days to loop."
  - "Commodity: Random crowd workers."

**Right Side: The Glass Box (Us)**
- Header: "The Glass Box" with checkmark icon
- Style: Brighter, emphasized
- Points:
  - "Relational: You lease a team."
  - "Transparent: You know their names."
  - "Instant: Real-time debug loops."
  - "Expert: PhDs, Coders, Pilots."

---

### SECTION 4: Capabilities Grid
**Purpose:** Prove breadth of expertise across domains

**Headline:** "Universal Reality Support"
**Subheadline:** "From Reasoning Chains to Robot Arms."

**Grid Layout:** 3 columns

**Column 1: Text & Code**
- Icon: Terminal/code symbol (ASCII style)
- Items:
  - Complex Reasoning (CoT)
  - RLHF & Pairwise Ranking
  - Python/SQL/C++ Debugging
  - Red Teaming & Safety

**Column 2: Vision & Video**
- Icon: Eye symbol (ASCII style)
- Items:
  - Temporal Segmentation
  - Physics Consistency Checks
  - Scenario Staging
  - Frame-by-Frame Analysis

**Column 3: Robotics & World**
- Icon: Robot/arm symbol (ASCII style)
- Items:
  - Teleoperation (Remote Driving)
  - Sim-to-Real Validation
  - 3D Point Cloud Annotation
  - Edge Case Trajectories

---

### SECTION 5: Testimonials
**Purpose:** Build trust through social proof

**Primary Testimonial (Whale):**
- Quote: "We were building video generation models and hit a wall. Traditional data vendors gave us inconsistent quality and zero context. Claru dropped a squad of visual effects experts into our Slack channel. They understood our architecture, joined our syncs, and helped us ship features we'd been stuck on for months. They're not a vendor - they're part of the team now."
- Attribution: "Naeem Talukdar"
- Title: "CEO, Moonvalley"

**Secondary Testimonial:**
- Quote: "The difference is night and day. With our previous vendor, we'd wait a week for labeled data, then spend another week fixing errors. With Claru, our experts are in our standup every morning. When there's an edge case, we debug it together in real-time."
- Attribution: "Senior Research Scientist"
- Title: "Reka AI"

---

### SECTION 6: Final CTA + Contact Form
**Purpose:** Convert interest into leads

**Headline:** "Stop Buying Labels. Start Leasing Intelligence."
**Subheadline:** "Your model is only as good as the mind that teaches it. Get the human cortex your digital brain deserves."

**Form Design:** Terminal-style progressive disclosure
- Step 1: "What should we call you?" (Name)
- Step 2: "Where can we reach you?" (Email)
- Step 3: "What's your organization?" (Company)
- Step 4: "What are you building?" (Use case dropdown: Text/Code, Vision/Video, Robotics, Multi-modal, Other)
- Step 5: "What's your timeline?" (ASAP, 1-3 months, 3-6 months, Exploring)
- Step 6: "Anything else we should know?" (Optional textarea)

**Submit Button:** "[ Initialize Connection ]"

**Success State:** ASCII art checkmark + "Signal received. We'll be in touch within 24 hours."

---

### SECTION 7: Footer
**Purpose:** Legal, navigation, brand reinforcement

**Elements:**
- Logo: "CLARU" (ASCII style)
- Tagline: "The Human Cortex for Your Digital Brain."
- Links: Privacy Policy | Terms of Service
- Copyright: "2025 Claru. All rights reserved."
- Subtle ASCII pattern or border

---

## Navigation

**Sticky Header (appears on scroll):**
- Logo (left)
- Section links: Offerings | Capabilities | Contact
- CTA button: "[ Get Started ]"

**Mobile:** Hamburger menu with full-screen overlay in terminal style

---

## Animation Choreography

### On Load
1. ASCII background fades in (0-500ms)
2. Logo types in character by character (500-1000ms)
3. Headline fades up (800-1200ms)
4. Subheadline fades up (1000-1400ms)
5. CTA button fades up with subtle pulse (1200-1600ms)
6. Trust line fades in (1400-1800ms)

### On Scroll
- Sections reveal with staggered fade-up animations
- ASCII effects subtly respond to scroll position
- Comparison section animates in from sides
- Capabilities cards stagger in
- Testimonial slides in with quote marks animation

### Interactions
- Buttons: Scale 1.02 on hover, 0.98 on press
- Links: Underline animates from left to right
- Form inputs: Border glow on focus
- Cards: Subtle lift on hover