First Init

.agents/frontend-specialist/VISUAL_GUIDE.md

@@ -0,0 +1,317 @@
+# 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.