# T-kash Soko by Telkom Kenya - Design Guidelines

## Design Approach
**Reference-Based**: Drawing from Telkom Kenya's official website (telkom.co.ke) - telecommunications industry style with bold hero sections, card-based layouts, vibrant brand colors, and modern African market imagery.

## Core Design Elements

### Typography
- **Primary Font**: Inter or similar sans-serif (web safe via Google Fonts)
- **Hierarchy**:
  - Hero Headlines: 3xl-5xl, bold (700-800)
  - Section Headers: 2xl-3xl, semibold (600)
  - Subheadings: xl-2xl, medium (500)
  - Body Text: base-lg, regular (400)
  - Small Print/Captions: sm, regular (400)

### Layout System
**Spacing Units**: Use Tailwind units of 4, 6, 8, 12, 16, 20, 24, 32 for consistent rhythm
- Section padding: py-16 to py-24 (mobile: py-12)
- Container max-width: max-w-7xl with px-4 to px-8
- Card spacing: p-6 to p-8
- Element gaps: gap-4 to gap-8

### Color Palette
- **Primary Orange**: #FF6B00 (CTAs, accents, highlights)
- **Secondary Turquoise**: #00A8E1 (links, secondary buttons, icons)
- **Accent Yellow**: From Telkom logo (badges, highlights)
- **Neutrals**: White (#FFFFFF), Dark Gray (#1F2937), Light Gray (#F3F4F6)
- **Backgrounds**: White for main sections, Light Gray for alternating sections

## Component Library

### Header Navigation (Telkom Kenya Style)
- Sticky header with white background, subtle shadow on scroll
- Telkom Kenya logo (left-aligned, uploaded image)
- Main nav: Personal | Business | T-kash Soko | Help Center
- Top utility bar with quick action links (dark background)
- Mobile: Hamburger menu with slide-in drawer
- Height: ~80px desktop, ~64px mobile

### Hero Section
- **Full-width hero** with vibrant gradient background (orange to turquoise)
- Large hero image showing African merchants/shop owners (right side, 50% width desktop)
- Headline: "One powerful app for merchants and everyday users"
- Subheadline: "Shop, pay, sell, and manage your business, all in one place"
- Dual CTA buttons: "Download App" (orange, primary) + "Learn More" (white outline)
- Height: 90vh minimum with content centered vertically
- Background: Subtle pattern overlay or gradient mesh

### Content Sections

**Feature Cards** (3-column grid desktop, 1-column mobile):
- White background with subtle shadow and rounded corners (rounded-xl)
- Icon at top (Lucide icons, 48px, turquoise color)
- Card title (xl, semibold)
- Description text (base, gray-600)
- Hover: Subtle lift effect (shadow increase)
- Padding: p-8

**Comparison Table**:
- Two-column layout: T-kash Soko vs Traditional Systems
- T-kash Soko column: Turquoise header background
- Traditional Systems: Multi-row breakdown (POS, Inventory, Online Sales, Accounting, CRM, Employee Management)
- Clear pricing display: Large numbers for impact
- Footer row: Total comparison (18,000-55,000 KSH vs 1% fee)
- Mobile: Stacked cards format

**Merchant Type Sections** (3 sections):
- Alternating background colors (white/light gray)
- Split layout: Image left, content right (or vice versa)
- Numbered benefits list with checkmark icons (turquoise)
- Target audience badge (orange pill badge)
- Each section: py-20

**Payment Options Grid**:
- 3-column cards showing T-kash, External Wallets, Cash
- Icon badges showing lottery ticket counts
- Feature highlights in bullet points
- Orange accents for "Zero fees" messaging

### Interactive Elements
- **Buttons**: 
  - Primary: Orange background, white text, rounded-lg, px-8 py-3
  - Secondary: Turquoise background, white text
  - Outline: Border-2 orange, transparent background
  - All buttons: Hover state with slight scale and shadow increase
- **Links**: Turquoise with underline on hover
- **Cards**: Subtle hover lift (translate-y-1, shadow-lg)

### Images
**Hero Image**: Professional photo of Kenyan merchant using smartphone in shop setting (dukas, market stall, or salon), warm lighting, authentic African business context

**Section Images**: 
- Merchants section: Shop owners with products/inventory
- Service providers: Barber, hairdresser, mechanic at work
- Personal shopping: Customer using phone to pay/shop
- All images: High-quality, authentic Kenyan market context, diverse representation

**Placement**: Images at 50% width on desktop (alternating left/right), full-width on mobile, rounded corners

### Footer
- Dark gray background (#1F2937), white text
- 4-column layout desktop, stacked mobile
- Columns: About T-kash Soko | Quick Links | Support & Contact | Download App
- Telkom Kenya logo (white version)
- Social media icons (turquoise on hover)
- Copyright: "© 2026 Telkom Kenya - All Rights Reserved"

### Accessibility
- Minimum contrast ratio: 4.5:1 for text
- Focus states: 2px turquoise outline with offset
- Alt text for all images
- Semantic HTML structure (nav, main, section, footer)
- Skip to main content link

### Responsive Strategy
- **Desktop (1024px+)**: Multi-column layouts, side-by-side content
- **Tablet (768-1023px)**: 2-column grids, stacked hero
- **Mobile (<768px)**: Single column, full-width cards, stacked sections

## Animation Guidelines
**Minimal & Purposeful**:
- Scroll-triggered fade-ins for sections (subtle, 300ms)
- Button hover/active states only
- Header shadow on scroll
- No parallax, no complex scroll animations
- Page transitions: Simple fade (200ms)