CompanySite/.agents/frontend-specialist/VISUAL_GUIDE.md

# About Us Page - Visual Design Guide

## Color Palette Usage

### Hero Section
- **Background:** `from-secondary-900 via-secondary-800 to-primary-900`
- **Heading:** White + gradient (`from-primary-300 to-accent-400`)
- **Stats:** `text-primary-300`
- **Blur Orbs:** `primary/20`, `accent/10`, `primary/5`

### Company Timeline
- **Year Badges:** `from-primary-500 to-primary-600`
- **Timeline Line:** `from-primary-500 via-primary-300 to-primary-500`
- **Cards:** White with `border-secondary-100` → `border-primary-200` on hover
- **Dots:** `bg-primary-500`

### Mission & Vision
- **Mission Card:** `from-primary-500 to-primary-700`
- **Vision Card:** `from-secondary-800 to-secondary-900`
- **Icons:** `bg-white/20` with backdrop-blur
- **Decorative Blur:** `bg-white/10` (Mission), `bg-primary-500/10` (Vision)

### Core Values
- **Default:** White cards with `border-secondary-100`
- **Hover:** Full gradient `from-primary-500 to-primary-700`
- **Icons:** `from-primary-50 to-primary-100` → white on hover
- **Background Decoration:** `primary-500/5`, `accent-500/5`

### Team Section
- **Background:** `bg-secondary-50`
- **Cards:** White with gradient border glow on hover
- **Border Glow:** `from-primary-400 to-accent-400`
- **Image Overlay:** `from-secondary-900/90 via-secondary-900/30`
- **Social Buttons:** `bg-white/95` → `bg-white`

### CTA Section
- **Background:** `from-primary-600 via-primary-700 to-secondary-800`
- **Blur Orbs:** `accent-500/20`, `primary-400/20`
- **Badge:** `bg-white/10` with `border-white/20`
- **Primary Button:** `bg-white text-primary-600`
- **Secondary Button:** `border-white/40` with backdrop-blur

## Typography Scale

```
Hero Heading:      text-4xl sm:text-5xl lg:text-6xl xl:text-7xl
Section Headings:  text-3xl sm:text-4xl
Mission/Vision H3: text-2xl lg:text-3xl
Value Cards H3:    text-xl
Team Member H3:    text-xl
Body Text (Large): text-lg sm:text-xl
Body Text:         text-base
Small Text:        text-sm
Labels:            text-sm uppercase tracking-wider
```

## Spacing System

```
Section Padding:     py-16 lg:py-24
Hero Padding:        py-20
CTA Padding:         py-20 lg:py-28
Card Padding:        p-6 lg:p-8 (values) | p-6 lg:p-7 (team) | p-8 lg:p-12 (mission/vision)
Container:           container-wrapper (max-w-7xl px-4 sm:px-6 lg:px-8)
Grid Gaps:           gap-6 lg:gap-8 (values) | gap-8 lg:gap-10 (team) | gap-8 lg:gap-12 (timeline)
Section Margins:     mb-12 lg:mb-16 (section headers)
```

## Shadow Progression

```
Default:      shadow-sm
Hover Values: shadow-sm → shadow-xl
Hover Team:   shadow-md → shadow-2xl
Buttons:      shadow-xl → shadow-2xl
Icon Buttons: shadow-md → shadow-lg
```

## Border Radius

```
Cards:          rounded-2xl (values) | rounded-3xl (team, mission/vision, timeline)
Buttons:        rounded-xl
Social Buttons: rounded-xl
Badges:         rounded-full
Icons:          rounded-xl (values) | rounded-2xl (mission/vision)
```

## Animation Timings

```
Color Changes:    duration-300
Card Hover:       duration-300
Image Zoom:       duration-500 (timeline) | duration-700 (team)
Slide-Up:         duration-300 (team social links)
Scale:            transition-all (buttons)
```

## Hover Transforms

```
Mission/Vision Cards:  group-hover:scale-105
Value Cards:           group-hover:translate-y-[-4px]
Team Cards:            group-hover:-translate-y-2
Button CTA:            hover:scale-105
Social Buttons:        hover:scale-110
Arrow Icon:            group-hover:translate-x-1
Images:                group-hover:scale-105 (timeline) | group-hover:scale-110 (team)
```

## Interactive States

### Value Cards
```css
/* Default State */
- Background: white
- Border: border-secondary-100
- Text: text-secondary-900
- Icon bg: from-primary-50 to-primary-100
- Icon text: text-primary-600

/* Hover State */
- Background: gradient overlay (from-primary-500 to-primary-700)
- Border: border-primary-200
- Text: text-white
- Icon: bg-white text-white
- Transform: translate-y-[-4px]
- Shadow: shadow-sm → shadow-xl
```

### Team Cards
```css
/* Default State */
- Background: white
- Border: none (white background)
- Shadow: shadow-md
- Social: translate-y-full (hidden)

/* Hover State */
- Border glow: gradient blur effect
- Shadow: shadow-2xl
- Transform: -translate-y-2
- Social: translate-y-0 (visible)
- Image: scale-110
- Image overlay: opacity-60 → opacity-80
```

### Timeline Cards
```css
/* Default State */
- Border: border-secondary-100
- Shadow: shadow-sm
- Title: text-secondary-900

/* Hover State */
- Border: border-primary-200
- Shadow: shadow-lg
- Title: text-primary-600
```

## Responsive Breakpoints

### Mobile (< 640px)
- Single column layouts
- Smaller text sizes (text-4xl hero)
- Timeline: single column
- Stats: 2 columns
- Values: single column
- Team: single column

### Tablet (640px - 1023px)
- Stats: 2 or 4 columns
- Values: 2 columns
- Team: 2 columns
- Timeline: single column

### Desktop (1024px+)
- Full grid layouts
- Values: 4 columns
- Team: 3 columns
- Timeline: alternating left/right

## Accessibility Features

### Focus States
```css
focus:outline-none
focus:ring-2
focus:ring-white (on dark backgrounds)
focus:ring-primary-400 (on light backgrounds)
focus:ring-offset-2
```

### ARIA Labels
- All social links: `aria-label="${name}'s ${platform} profile"`
- Decorative elements: `aria-hidden="true"`

### Color Contrast
- White on dark backgrounds: ≥7:1 (AAA)
- Primary text on white: ≥4.5:1 (AA)
- Links and buttons: sufficient contrast maintained

### Touch Targets
- Minimum 44x44px (social buttons: w-11 h-11)
- Adequate spacing between interactive elements

## Layout Grid Structure

### Hero
```
Container → Max-width-4xl → Content + Stats Grid (2/4 columns)
```

### Timeline
```
Container → Max-width-5xl → Relative positioning → Alternating 50% width cards
```

### Mission/Vision
```
Container → 2 columns (md:) → Gradient cards
```

### Values
```
Container → 2 columns (sm:) → 4 columns (lg:) → Value cards
```

### Team
```
Container → 2 columns (sm:) → 3 columns (lg:) → Team cards
```

## Icon Sizes

```
Value Icons:     w-7 h-7 (inside w-14 h-14 container)
Mission/Vision:  w-8 h-8 (inside w-16 h-16 container)
Social Icons:    w-5 h-5 (inside w-11 h-11 button)
Arrow Icons:     w-5 h-5
Timeline Dots:   w-4 h-4
```

## Decorative Elements

### Grid Patterns
```css
bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),
   linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)]
bg-[size:64px_64px]
```

### Blur Orbs
```css
w-96 h-96 (standard)
w-64 h-64 (card decorations)
blur-3xl (large orbs)
blur-2xl (card decorations)
```

### Gradients
- Text: `text-transparent bg-clip-text bg-gradient-to-r`
- Backgrounds: `bg-gradient-to-br` (cards) | `bg-gradient-to-b` (sections)
- Borders: Simulated with absolute positioned divs

## Performance Optimizations

### Images
```html
loading="lazy"
decoding="async"
width="400" height="400"  (or appropriate dimensions)
```

### CSS Optimizations
- Use Tailwind's JIT mode (automatic)
- Minimal custom CSS
- Leverage CSS containment (automatic via Tailwind)
- Use `will-change` sparingly (Tailwind handles)

## Design Tokens Quick Reference

```css
/* Primary Actions */
Primary: #0891b2 (cyan)
Hover: #0e7490 (darker cyan)

/* Backgrounds */
Light: #f8fafc (secondary-50)
Dark: #0f172a (secondary-900)

/* Accents */
Accent: #f59e0b (amber)
Gradient End: accent-400 (#fbbf24)

/* Text */
Heading: #0f172a (secondary-900)
Body: #475569 (secondary-600)
Light: #cbd5e1 (secondary-300)

/* Borders */
Default: #e2e8f0 (secondary-200)
Subtle: #f1f5f9 (secondary-100)
Hover: #a5f3fc (primary-200)
```

## Component Composition

Each section follows this pattern:
1. **Container** - `<section>` with background
2. **Decorative Layer** - Blur orbs, patterns (if applicable)
3. **Content Wrapper** - `container-wrapper` class
4. **Header** - Badge + H2 + Description
5. **Content Grid** - Responsive grid layout
6. **Interactive Cards** - Hover states + content

This consistent structure makes the page feel cohesive while allowing each section to have unique personality through color and decoration choices.