Redesign Plan

urWhats.com Full UI/UX Redesign — Complete Design Spec & Implementation Plan

Branch: new-design (from main) Created: 2026-02-22 Status: READY FOR EXECUTION Estimated Effort: 45-61 hours across 7 phases Working Directory: The main project root (NOT a worktree)

IMPORTANT FOR EXECUTING AGENTS: This document is the single source of truth for the redesign. Read it fully before starting. Execute phases in order. Each task has exact specifications. Use the frontend-design skill when redesigning components/pages. Use superpowers:verification-before-completion after each phase.

Context & Background
Design System Specification
Page Architecture
Bootstrap → Tailwind Class Mapping
Phase 0: Pre-Flight
Phase 1: Setup Foundation
Phase 2: Component Redesign
Phase 3: Page Redesign
Phase 4: Cleanup
Phase 5: Polish
Phase 6: Migration & Redirects
Phase 7: Verification
Execution Strategy
Critical Rules

Context & Background

What This Project Is

urWhats.com is a bilingual (English/Arabic) static marketing website for a WhatsApp Business API SaaS platform. Built with Astro v5.16.3, deployed on Cloudflare Pages. The company (urWave Company LLC) is based in Riyadh, Saudi Arabia, and is an Official Meta Technical Provider.

Why This Redesign

The current site uses the Sandbox Bootstrap 5 theme — a commercial HTML template. Problems:

2.3MB total CSS (style.css alone is 979KB / 48,529 lines)
Generic template look — looks like every other Sandbox-powered site
Can’t edit the base theme — modifications only possible via custom-overrides.css
Design quality ~7/10 while competitors (SleekFlow, Respond.io) score 8.5/10
Bootstrap deeply embedded — 767+ Bootstrap class instances across all files

What We’re Doing

Replace Bootstrap 5 + Sandbox theme with Tailwind CSS v4
Build a custom design system (not a component library, not a template)
Modernize every component and page to sharp, clean, pixel-perfect design
Restructure from 11 pages to 8 pages (merge overlapping content)
Preserve all content (lives in JSON translation files), all SEO work, all functionality
Target: CSS drops from 2.3MB to ~30-50KB. Design quality from 7/10 to 9/10.

Design Inspiration

SleekFlow (sleekflow.io) — Layout quality, generous whitespace, clean sections
Respond.io (respond.io) — Trust signals, social proof, enterprise credibility
Linear (linear.app) — Typography, dark section aesthetic, sharp precision
HubSpot — Warm, friendly, approachable feel (adapted with sharper execution)

Key Business Context

Market: Saudi Arabia (primary), GCC, then Middle East expansion
Languages: English (default, root /) + Arabic (/ar/). No additional languages planned now
Arabic is NOT secondary — it must be pixel-perfect, designed simultaneously, not adapted after
Pricing: SAR primary with SAR/USD toggle. Plans: Starter, Growth (recommended), Pro, Enterprise
Company: urWave Company LLC, CR: 7052775355, Riyadh, Saudi Arabia
Phone: +966 508 777 669 (single number for all pages)
Never mention “WhatsaMark” on public pages (internal white-label provider)

Design System Specification

Color Palette

PRIMARY (Emerald Green -- modernized from current #45b33d):
  50:  #ecfdf5   (lightest bg tints)
  100: #d1fae5   (hover backgrounds)
  200: #a7f3d0   (borders, focus rings)
  300: #6ee7b7   (decorative accents)
  400: #34d399   (icons, secondary elements)
  500: #16a34a   (PRIMARY -- buttons, links, key elements)
  600: #15803d   (button hover states)
  700: #166534   (dark text on light bg)
  800: #14532d   (very dark accents)
  900: #052e16   (darkest)

NAVY (Dark sections -- hero, CTA banners, footer):
  50:  #f8fafc
  100: #f1f5f9
  200: #e2e8f0
  300: #cbd5e1
  400: #94a3b8
  500: #64748b
  600: #475569
  700: #334155
  800: #1e293b   (dark section bg)
  900: #0f172a   (darkest section bg, footer)
  950: #020617   (near-black)

AMBER (Accent -- CTAs, badges, highlights):
  300: #fcd34d
  400: #fbbf24
  500: #f59e0b   (PRIMARY ACCENT)
  600: #d97706

NEUTRAL (Warm Stone Gray -- not cold gray):
  50:  #fafaf9   (page background)
  100: #f5f5f4   (card backgrounds, subtle sections)
  200: #e7e5e4   (borders)
  300: #d6d3d1   (disabled states)
  400: #a8a29e   (placeholder text)
  500: #78716c   (secondary text)
  600: #57534e   (body text)
  700: #44403c   (headings secondary)
  800: #292524   (headings primary)
  900: #1c1917   (darkest text)

WHATSAPP (reserved for WhatsApp FAB only):
  #25D366

Typography

ENGLISH: Geist Sans
  - Source: @fontsource/geist-sans (npm, self-hosted)
  - Weights: 400 (body), 500 (medium), 600 (semibold), 700 (bold)
  - Stack: 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

ARABIC: Tajawal
  - Source: @fontsource/tajawal (npm, self-hosted)
  - Weights: 300 (light), 400 (body), 500 (medium), 700 (bold), 800 (extrabold)
  - Stack: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
  - Applied via [dir="rtl"] and [lang="ar"] selectors

SCALE (Tailwind defaults, using these sizes):
  Hero h1:      text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight
  Section h2:   text-3xl sm:text-4xl font-bold tracking-tight
  Section h3:   text-xl sm:text-2xl font-semibold
  Body large:   text-lg text-neutral-600 leading-relaxed
  Body:         text-base text-neutral-600
  Small:        text-sm text-neutral-500
  Caption:      text-xs text-neutral-400

Spacing & Layout

CONTAINER: max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
SECTION PADDING: py-16 sm:py-20 lg:py-24
CARD PADDING: p-6 sm:p-8
CARD GAP: gap-6 sm:gap-8
BORDER RADIUS: rounded-2xl (cards), rounded-xl (smaller), rounded-full (pills/buttons)

Shadows

CARD DEFAULT: shadow-sm
CARD HOVER:   shadow-xl shadow-primary-500/10
BUTTON:       shadow-lg shadow-primary-500/25
FLOATING:     shadow-2xl

Component Patterns

BUTTON PRIMARY:
  bg-primary-500 hover:bg-primary-600 text-white font-semibold
  px-6 py-3 rounded-full transition-all duration-200
  hover:-translate-y-0.5 hover:shadow-lg hover:shadow-primary-500/25
  focus:ring-2 focus:ring-primary-300 focus:ring-offset-2

BUTTON OUTLINE:
  border-2 border-primary-500 text-primary-600 font-semibold
  px-6 py-3 rounded-full transition-all duration-200
  hover:bg-primary-500 hover:text-white
  focus:ring-2 focus:ring-primary-300 focus:ring-offset-2

CARD:
  bg-white rounded-2xl p-6 sm:p-8
  border border-neutral-200
  hover:border-primary-300 hover:-translate-y-1 hover:shadow-xl
  transition-all duration-300

CARD RECOMMENDED:
  border-2 border-primary-500 shadow-lg shadow-primary-100
  relative (for badge positioning)

BADGE:
  inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold
  bg-primary-50 text-primary-700

SECTION LIGHT: bg-white or bg-neutral-50
SECTION DARK:  bg-navy-900 text-white (with text-neutral-300 for body)

LINK:
  text-primary-600 hover:text-primary-700 font-medium
  underline-offset-4 hover:underline transition-colors

INPUT:
  w-full px-4 py-3 bg-neutral-50 rounded-xl border border-neutral-200
  text-neutral-900 placeholder:text-neutral-400
  focus:bg-white focus:border-primary-500 focus:ring-2 focus:ring-primary-100
  transition-all duration-200

NAVIGATION HEADER:
  fixed top-0 inset-x-0 z-50
  bg-white/80 backdrop-blur-lg border-b border-neutral-100
  (scrolled state: add shadow-sm)

Page Architecture

Current → New Mapping

Current URL	New URL	File	Content Source
`/`	`/`	`src/pages/index.astro`	`home.*` in i18n
`/services`	`/features`	`src/pages/features.astro` (NEW)	`features.` (new keys, from `services.`)
`/use-cases`	`/solutions`	`src/pages/solutions.astro` (NEW)	`solutions.` (merge `useCases.` + `byIndustry.` + `byRole.`)
`/by-industry`	`/solutions`	(merged)	(merged)
`/by-role`	`/solutions`	(merged)	(merged)
`/prices`	`/prices`	`src/pages/prices.astro`	`prices.`, `home.pricing.`
`/apps`	`/integrations`	`src/pages/integrations.astro` (NEW)	`integrations.` (from `apps.`)
`/faqs`	`/faqs`	`src/pages/faqs.astro`	`faqs.*`
`/contact`	`/contact`	`src/pages/contact.astro`	`contact.*`
`/privacy`	`/privacy`	`src/pages/privacy.astro`	`privacy_policy.*`
`/terms`	`/terms`	`src/pages/terms.astro`	`terms_of_service.*`
`/404`	`/404`	`src/pages/404.astro`	hardcoded bilingual

Each English page has an Arabic mirror in src/pages/ar/ with identical structure.

Homepage Sections (in order)

Hero — gradient bg, centered heading, trust badges (Meta provider), 2 CTAs, stats row
Trusted By — client logos row (grayscale, color on hover)
Highlights — 3 cards (marketing, messaging, conversion) with illustrations
Dashboard Preview — centered screenshot with subtle glow
Solutions — 3 cards (bulk messaging, chatbot, API) with colored icon boxes
Why Choose urWhats — image + feature checklist, 2-col alternating
Pricing CTA — dark navy section with CTAs
FAQ Preview — 4-5 top questions using <details> elements

Solutions Page Sections (tabbed)

Tab 1: “By Use Case” — 6 cards (ecommerce, support, marketing, growth, events, health)
Tab 2: “By Industry” — 8 cards (ecommerce, healthcare, education, finance, travel, real estate, events, logistics)
Tab 3: “By Role” — 6 cards (marketing, sales, support, operations, product, IT)
Tabs implemented with Alpine.js x-data="{ tab: 'useCases' }"

Bootstrap → Tailwind Class Mapping

Reference for converting existing components. These are the most common Bootstrap classes in the codebase:

LAYOUT:
  container              → max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
  row                    → grid grid-cols-12 gap-6 (or flex flex-wrap)
  col-md-6               → md:col-span-6 (if using grid) or md:w-1/2
  col-lg-4               → lg:col-span-4 or lg:w-1/3
  col-lg-8               → lg:col-span-8 or lg:w-2/3
  col-xl-6               → xl:col-span-6 or xl:w-1/2
  col-xxl-5              → 2xl:w-5/12
  offset-lg-1            → lg:col-start-2

DISPLAY:
  d-flex                 → flex
  d-none                 → hidden
  d-md-block             → md:block
  d-lg-flex              → lg:flex
  d-none d-md-block      → hidden md:block

FLEX:
  flex-row               → flex-row
  flex-column            → flex-col
  flex-wrap              → flex-wrap
  flex-grow-1            → flex-1
  align-items-center     → items-center
  justify-content-center → justify-center
  justify-content-between→ justify-between
  gap-2                  → gap-2

SPACING:
  pt-15                  → pt-16 (or custom)
  pb-15                  → pb-16
  py-5                   → py-5
  px-3                   → px-3
  mb-5                   → mb-5
  mt-3                   → mt-3
  me-2                   → me-2 (logical property, RTL-safe)
  ms-3                   → ms-3 (logical property, RTL-safe)
  mx-auto                → mx-auto
  gx-lg-8                → lg:gap-x-8

TEXT:
  text-center            → text-center
  text-white             → text-white
  text-muted             → text-neutral-500
  text-primary           → text-primary-500
  text-uppercase         → uppercase
  fw-bold                → font-bold
  fs-lg                  → text-lg
  lead                   → text-lg text-neutral-600
  display-1              → text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight
  display-4              → text-3xl sm:text-4xl font-bold
  display-6              → text-2xl sm:text-3xl font-semibold

POSITION:
  position-relative      → relative
  position-absolute      → absolute
  fixed-top              → fixed top-0 inset-x-0

SIZING:
  w-100                  → w-full
  h-100                  → h-full
  img-fluid              → w-full h-auto

BACKGROUNDS:
  bg-light               → bg-neutral-50
  bg-soft-yellow         → bg-amber-50
  bg-soft-primary        → bg-primary-50
  bg-dark                → bg-navy-900

BORDERS:
  rounded                → rounded-lg
  rounded-pill           → rounded-full
  shadow-lg              → shadow-lg

BUTTONS:
  btn btn-primary        → (use Button primary pattern above)
  btn btn-outline-primary→ (use Button outline pattern above)
  btn-lg                 → px-8 py-4 text-lg
  btn-sm                 → px-4 py-2 text-sm

NAVBAR:
  navbar                 → (custom header with flex)
  navbar-expand-lg       → (desktop links: hidden lg:flex)
  navbar-collapse        → (mobile: Alpine.js x-show)
  navbar-toggler         → (hamburger button, lg:hidden)

ACCORDION:
  accordion              → (use <details>/<summary>)
  accordion-item         → border-b border-neutral-200
  accordion-button       → <summary> with flex justify-between items-center py-4 cursor-pointer
  accordion-collapse     → (native <details> handles this)
  collapse show          → (native <details open>)

FORM:
  form-control           → (use Input pattern above)
  form-floating          → (use label above input pattern instead)
  form-select            → (use Input pattern + appearance-none)
  form-label             → block text-sm font-medium text-neutral-700 mb-1.5
  input-group            → flex gap-2
  needs-validation       → (handle with JS + peer classes)
  was-validated          → (handle with JS, toggle class on form)
  invalid-feedback       → text-sm text-red-600 mt-1

SANDBOX-SPECIFIC (remove, no Tailwind equivalent needed):
  wrapper                → (remove, use Section component)
  bg-soft-*              → (remove, use appropriate bg-* utility)
  underline-3 style-3    → (remove, use custom underline or none)
  icon-list bullet-bg    → (remove, use custom list styling)
  btn-expand             → (remove, use standard button)
  btn-soft-primary       → (remove, use outline or ghost variant)

Phase 0: Pre-Flight (30 min)

Task 0.1: Create Branch

git checkout main
git pull origin main
git checkout -b new-design

Task 0.2: Baseline Snapshot

npm run build
# Record: build time, number of pages, total dist/ size, CSS file sizes

Phase 1: Setup Foundation (4-6 hours)

Task 1.1: Install Dependencies

npm install tailwindcss @tailwindcss/vite @fontsource/geist-sans @fontsource/tajawal
npm uninstall bootstrap @popperjs/core @types/bootstrap purgecss

Acceptance: npm ls shows tailwindcss, no bootstrap

Task 1.2: Configure Vite Plugin

File: astro.config.mjs

Add at top:

import tailwindcss from '@tailwindcss/vite';

In the vite config, add to plugins array:

vite: {
  plugins: [tailwindcss()],
  build: {
    cssCodeSplit: true,
    // REMOVE the manualChunks for vendor-bootstrap
    rollupOptions: {
      output: {
        // Remove or empty the manualChunks function
      }
    }
  }
}

Keep: compressHTML: true, inlineStylesheets: 'auto', prefetch: { prefetchAll: false, defaultStrategy: 'hover' }

Task 1.3: Create Design System CSS

File to create: src/styles/global.css

@import "tailwindcss";

/* Self-hosted fonts */
@import "@fontsource/geist-sans/400.css";
@import "@fontsource/geist-sans/500.css";
@import "@fontsource/geist-sans/600.css";
@import "@fontsource/geist-sans/700.css";
@import "@fontsource/tajawal/300.css";
@import "@fontsource/tajawal/400.css";
@import "@fontsource/tajawal/500.css";
@import "@fontsource/tajawal/700.css";
@import "@fontsource/tajawal/800.css";

/* Design System Tokens */
@theme {
  /* Primary - Emerald Green */
  --color-primary-50: #ecfdf5;
  --color-primary-100: #d1fae5;
  --color-primary-200: #a7f3d0;
  --color-primary-300: #6ee7b7;
  --color-primary-400: #34d399;
  --color-primary-500: #16a34a;
  --color-primary-600: #15803d;
  --color-primary-700: #166534;
  --color-primary-800: #14532d;
  --color-primary-900: #052e16;

  /* Navy - Dark sections */
  --color-navy-50: #f8fafc;
  --color-navy-100: #f1f5f9;
  --color-navy-200: #e2e8f0;
  --color-navy-300: #cbd5e1;
  --color-navy-400: #94a3b8;
  --color-navy-500: #64748b;
  --color-navy-600: #475569;
  --color-navy-700: #334155;
  --color-navy-800: #1e293b;
  --color-navy-900: #0f172a;
  --color-navy-950: #020617;

  /* Amber - Accent */
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;

  /* Neutral - Warm Stone */
  --color-neutral-50: #fafaf9;
  --color-neutral-100: #f5f5f4;
  --color-neutral-200: #e7e5e4;
  --color-neutral-300: #d6d3d1;
  --color-neutral-400: #a8a29e;
  --color-neutral-500: #78716c;
  --color-neutral-600: #57534e;
  --color-neutral-700: #44403c;
  --color-neutral-800: #292524;
  --color-neutral-900: #1c1917;

  /* WhatsApp */
  --color-whatsapp: #25D366;

  /* Typography */
  --font-sans: 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-arabic: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Base styles */
@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-family: var(--font-sans);
    color: var(--color-neutral-700);
    background-color: white;
  }

  /* Arabic font for RTL pages */
  [dir="rtl"],
  [lang="ar"] {
    font-family: var(--font-arabic);
  }

  [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
  [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    font-family: var(--font-arabic);
    font-weight: 700;
  }

  /* Phone numbers always LTR even in RTL context */
  [dir="rtl"] a[href^="tel:"],
  [dir="rtl"] .ltr-text {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    color: var(--color-neutral-900);
    font-weight: 700;
    line-height: 1.2;
  }
}

/* Custom utilities */
@layer utilities {
  /* Scroll-triggered animation */
  .animate-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  .animate-in.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger delays */
  .delay-100 { transition-delay: 100ms; }
  .delay-200 { transition-delay: 200ms; }
  .delay-300 { transition-delay: 300ms; }
  .delay-400 { transition-delay: 400ms; }

  /* Gradient text */
  .text-gradient {
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

Acceptance: Run npm run dev, page loads with Tailwind utilities working, fonts rendering.

Task 1.4: Update Layout.astro

File: src/layouts/Layout.astro

In frontmatter, add:

import '../styles/global.css';

Remove these lines from <head>:

<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/bootstrap.rtl.min.css">
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="/assets/css/style-rtl.css">
<link rel="stylesheet" href="/assets/css/plugins.css">
<link rel="stylesheet" href="/assets/css/colors/green.css">
<link rel="stylesheet" href="/assets/css/custom-overrides.css">
Any <link> for Google Fonts Tajawal (now self-hosted)
The Bootstrap JS lazy-load script at bottom of body

Keep:

Alpine.js CDN script (<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js">)
GTMScript component
MetaPixel component
SEO component
Navigation component
Footer component
WhatsApp floating button (convert its inline styles to Tailwind classes)
Contact protection script
IntersectionObserver script for .animate-in class

Convert inline <style> blocks to Tailwind classes on the elements themselves. Delete the <style> blocks.

Task 1.5: Update Build Scripts

File: package.json

Change:

"build": "astro build && node scripts/purge-css.mjs"

To:

"build": "astro build"

Remove:

"purge": "node scripts/purge-css.mjs"

Keep build:fast, dev, preview, clean, lint unchanged.

Task 1.6: Update tsconfig.json

File: tsconfig.json

Add to compilerOptions.paths:

"@styles/*": ["src/styles/*"]

Phase 2: Component Redesign (12-16 hours)

Parallelizable: Tasks 2.1-2.5 can run in parallel across 3 agents after Phase 1 is complete. Recommended grouping: Agent A (2.1 + 2.2), Agent B (2.3 + 2.4), Agent C (2.5 + 2.6)

Task 2.1: Create Shared UI Components (3 hours)

Create directory: src/components/ui/

Button.astro — Props: variant (primary|outline|ghost), size (sm|md|lg), href, class

---
interface Props {
  variant?: 'primary' | 'outline' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  href?: string;
  class?: string;
  [key: string]: unknown;
}
const { variant = 'primary', size = 'md', href, class: className, ...rest } = Astro.props;

const baseClasses = 'inline-flex items-center justify-center font-semibold rounded-full transition-all duration-200 focus:ring-2 focus:ring-primary-300 focus:ring-offset-2';

const variants = {
  primary: 'bg-primary-500 hover:bg-primary-600 text-white hover:-translate-y-0.5 hover:shadow-lg hover:shadow-primary-500/25',
  outline: 'border-2 border-primary-500 text-primary-600 hover:bg-primary-500 hover:text-white',
  ghost: 'text-primary-600 hover:bg-primary-50',
};

const sizes = {
  sm: 'px-4 py-2 text-sm',
  md: 'px-6 py-3 text-base',
  lg: 'px-8 py-4 text-lg',
};

const classes = `${baseClasses} ${variants[variant]} ${sizes[size]} ${className || ''}`;
---
{href ? (
  <a href={href} class={classes} {...rest}><slot /></a>
) : (
  <button class={classes} {...rest}><slot /></button>
)}

Container.astro — Props: class, narrow (boolean for max-w-4xl) Section.astro — Props: bg (white|light|dark), class, id SectionHeader.astro — Props: badge, title, subtitle, centered (boolean) Accordion.astro — Native <details>/<summary>, props: items array of {question, answer} CTASection.astro — Dark navy section with heading + 2 buttons, accepts translation keys

Task 2.2: Redesign Navigation.astro (3 hours)

File: src/components/Navigation.astro

Complete rewrite. Key specifications:

Fixed header with blur: fixed top-0 inset-x-0 z-50 bg-white/80 backdrop-blur-lg border-b border-neutral-100
Logo on left, nav links center, language switcher + CTA on right
Desktop links: hidden lg:flex items-center gap-1 with each link as px-4 py-2 text-neutral-600 hover:text-primary-600 font-medium text-sm transition-colors rounded-lg hover:bg-neutral-50
Active link: text-primary-600 bg-primary-50
Language switcher: Flag icon + language code, text-sm font-medium text-neutral-600 hover:text-primary-600
CTA: Button primary (always visible, including mobile)
Mobile hamburger: lg:hidden button

Mobile drawer: Full-screen overlay with Alpine.js

<div x-data="{ open: false }">
  <button @click="open = true" class="lg:hidden">...</button>
  <div x-show="open" x-transition:enter="transition ease-out duration-300" class="fixed inset-0 z-50 lg:hidden">
    <div @click="open = false" class="absolute inset-0 bg-navy-900/60 backdrop-blur-sm"></div>
    <div class="absolute top-0 end-0 w-80 h-full bg-white shadow-2xl p-6">
      <!-- nav links stacked vertically -->
    </div>
  </div>
</div>

RTL: Drawer opens from right in LTR, from left in RTL (use end-0 logical property)
Nav links for new structure: Home, Features, Solutions, Pricing, Integrations, FAQs, Contact

Task 2.3: Redesign Footer.astro (2.5 hours)

File: src/components/Footer.astro

Key specifications:

Background: bg-navy-900
4-column grid: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12
Column 1: Logo (white variant) + tagline + social icons
Column 2: Quick Links (updated for new page names)
Column 3: Solutions links
Column 4: Contact info (phone, email, address)
Social icons: w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center text-white hover:bg-primary-500 transition-all
Footer links: text-neutral-400 hover:text-white text-sm transition-colors
Widget titles: text-white font-semibold text-sm uppercase tracking-wider mb-6
Bottom bar: border-t border-white/10 mt-12 pt-8
- Left: Copyright + “urWave Company”
- Center: CR: 7052775355 | VAT: 300075277550003
- Right: Meta Technical Provider badge
Keep contact obfuscation functions
Keep social media SVG icons (inline)

Task 2.4: Redesign DynamicPlans.astro (3 hours)

File: src/components/DynamicPlans.astro

CRITICAL: Keep ALL Alpine.js x-data, x-text, x-show, @click, :class directives exactly as they are. Only replace CSS classes.

Key specifications:

Switcher row: flex flex-col sm:flex-row items-center justify-center gap-4 mb-12
Currency toggle: inline-flex items-center bg-neutral-100 rounded-full p-1
- Each option: px-5 py-2 rounded-full text-sm font-semibold transition-all cursor-pointer
- Active: bg-white text-primary-600 shadow-sm
- Inactive: text-neutral-500 hover:text-neutral-700
Monthly/Yearly toggle: Same pattern as currency
Plan cards: grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 items-stretch
Individual card: See CARD and CARD RECOMMENDED patterns in Design System above
Plan name: text-lg font-semibold text-neutral-900 mb-2
Price: text-4xl font-bold text-neutral-900 with currency in text-lg
Feature list items: flex items-start gap-3 py-2 text-sm text-neutral-600
- Check icon: w-5 h-5 text-primary-500 flex-shrink-0 mt-0.5 (inline SVG checkmark)
CTA buttons: Primary for recommended plan, outline for others
Fix CTA links: Starter → app.urwhats.com/register?planid=3, Growth → app.urwhats.com/register?planid=1, Pro → app.urwhats.com/register?planid=2, Enterprise → /contact
Add-ons section: Separate grid below plans
Meta disclaimer: flex items-start gap-4 bg-primary-50 border border-primary-200 rounded-2xl p-6 mt-12
Add aria-live="polite" to the element containing the price amount

Task 2.5: Redesign ContactForm.astro (2 hours)

File: src/components/ContactForm.astro

Key specifications:

Replace Bootstrap form classes with Tailwind (see INPUT pattern above)
Labels: block text-sm font-medium text-neutral-700 mb-1.5
Input group (phone): flex gap-2 with country select w-28 flex-shrink-0
Submit button: Full width on mobile, auto width on desktop w-full sm:w-auto bg-primary-500 hover:bg-primary-600 text-white font-semibold px-10 py-3.5 rounded-full transition-all hover:-translate-y-0.5 hover:shadow-lg disabled:opacity-60 disabled:cursor-not-allowed
Success message: bg-primary-50 border border-primary-200 text-primary-800 rounded-xl p-4 text-sm
Error message: bg-red-50 border border-red-200 text-red-800 rounded-xl p-4 text-sm
Keep unchanged: Formspree endpoint, Turnstile integration, form validation JS, country list
Phone input: direction: ltr preserved for RTL (use .ltr-text class from global.css)

Task 2.6: Adapt SEO.astro (1 hour)

File: src/components/SEO.astro

No visual changes — this is a <head>-only component
Update page slug detection for renamed pages:
- When pathname contains /features → use meta.features.* keys
- When pathname contains /solutions → use meta.solutions.* keys
- When pathname contains /integrations → use meta.integrations.* keys
Keep all 7 JSON-LD schema types (Organization, WebSite, SoftwareApplication, Service, BreadcrumbList, WebPage, FAQPage)
Update BreadcrumbList labels for renamed pages
Keep all hreflang, canonical URL, OG, Twitter Card logic unchanged

Phase 3: Page Redesign (16-20 hours)

Partially parallelizable: Task 3.1 (i18n) should be done first. Then pages can be done in parallel.

Task 3.1: Restructure Translation Keys (3 hours)

Files: public/assets/i18n/en.json, public/assets/i18n/ar.json

Add to BOTH files:

Under meta:

"features": {
  "title": "...",
  "description": "...",
  "keywords": "..."
},
"solutions": {
  "title": "...",
  "description": "...",
  "keywords": "..."
},
"integrations": {
  "title": "...",
  "description": "...",
  "keywords": "..."
}

Under nav:

"features": "Features",
"solutions": "Solutions",
"integrations": "Integrations",
"pricing": "Pricing"

Create new top-level keys:

features — copy structure from services, expand with more features from .context/PLATFORM-FEATURES.md
solutions — merge content from useCases, byIndustry, byRole into tabbed structure
integrations — copy from apps, expand

Keep old keys (don’t delete yet) — they’ll be cleaned up in Phase 4.

Arabic content must be naturally written, not machine-translated. Use the same quality level as existing ar.json content.

Task 3.2: Redesign Homepage (4 hours)

Files: src/pages/index.astro + src/pages/ar/index.astro

The homepage is the most complex page (currently 565 lines). Rewrite completely using Tailwind.

Hero section:

<section class="relative overflow-hidden pt-32 pb-20 sm:pt-40 sm:pb-28 bg-gradient-to-b from-primary-50/50 to-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
    <!-- Trust badge -->
    <div class="inline-flex items-center gap-2 bg-primary-50 text-primary-700 px-4 py-2 rounded-full text-sm font-semibold mb-8 animate-in">
      <svg><!-- Meta icon --></svg>
      Official Meta Technical Provider
    </div>
    <!-- Heading -->
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-neutral-900 mb-6 animate-in delay-100">
      {t('home.hero.title')}
    </h1>
    <!-- Subtitle -->
    <p class="text-lg sm:text-xl text-neutral-600 max-w-2xl mx-auto mb-10 animate-in delay-200">
      {t('home.hero.subtitle')}
    </p>
    <!-- CTAs -->
    <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16 animate-in delay-300">
      <Button href="https://app.urwhats.com/register" size="lg">Start Free Trial</Button>
      <Button href="/prices" variant="outline" size="lg">View Plans</Button>
    </div>
    <!-- Stats row -->
    <div class="inline-flex flex-wrap justify-center bg-white rounded-2xl shadow-lg shadow-neutral-200/50 border border-neutral-100 divide-x divide-neutral-100 animate-in delay-400">
      <div class="px-6 sm:px-10 py-4 text-center">
        <div class="text-2xl sm:text-3xl font-bold text-primary-500">10x</div>
        <div class="text-xs sm:text-sm text-neutral-500 mt-1">Faster Response</div>
      </div>
      <!-- more stats -->
    </div>
  </div>
</section>

Each subsequent section follows the Section + Container + SectionHeader pattern.

FAQ section: Use Accordion component with <details> elements instead of Bootstrap accordion.

Delete ALL inline <style> blocks (270+ lines) and ALL Sandbox-specific classes.

Task 3.3-3.10: Remaining Pages

See Phase 3 task descriptions in the plan overview above. Each page follows the same pattern:

Use shared UI components (Container, Section, SectionHeader, Button, CTASection)
Replace all Bootstrap classes with Tailwind equivalents
Delete all inline <style> blocks
Use t() for all text content
Create Arabic mirror in src/pages/ar/

Phase 4: Cleanup (2-3 hours)

Task 4.1: Delete Old CSS Files

rm public/assets/css/style.css
rm public/assets/css/style-rtl.css
rm public/assets/css/bootstrap.min.css
rm public/assets/css/bootstrap.rtl.min.css
rm public/assets/css/plugins.css
rm public/assets/css/custom-overrides.css
rm -rf public/assets/css/colors/
rm -rf public/assets/css/fonts/
rm scripts/purge-css.mjs

Task 4.2: Delete Old Page Files

rm src/pages/services.astro src/pages/ar/services.astro
rm src/pages/use-cases.astro src/pages/ar/use-cases.astro
rm src/pages/by-industry.astro src/pages/ar/by-industry.astro
rm src/pages/by-role.astro src/pages/ar/by-role.astro
rm src/pages/apps.astro src/pages/ar/apps.astro

Task 4.3: Verify Build

npm run clean && npm run build
# Must succeed with 0 errors

Phase 5: Polish (4-6 hours)

Task 5.1: Scroll Animations

IntersectionObserver script in Layout.astro (keep existing pattern)
Targets .animate-in class
On intersection: add .visible class
Stagger with .delay-100 through .delay-400

Task 5.2: Dark Contrast Sections

Add bg-navy-900 text-white sections on:

Homepage: CTA banner between features and FAQ
Pricing page: Enterprise “Contact Sales” section
Contact page: Left info panel

Task 5.3: Responsive QA

Test at: 375px, 768px, 1024px, 1280px, 1536px Focus: nav drawer, hero text scaling, pricing grid collapse, image sizing, touch targets (min 44px)

Task 5.4: RTL QA

Test every page in Arabic. Check:

Text alignment (right-aligned default)
Logical properties (ms/me/ps/pe instead of ml/mr/pl/pr)
Icons that should NOT flip (logos, checkmarks)
Icons that SHOULD flip (arrows, chevrons) — use rtl:rotate-180
Phone numbers display LTR
Nav drawer opens from correct side
Form input group direction

Task 5.5: Accessibility Audit

Color contrast: #16a34a on white = test with WebAIM tool
Focus indicators: focus:ring-2 focus:ring-primary-300 focus:ring-offset-2
aria-live="polite" on pricing display
aria-expanded on nav toggle
Skip navigation link
Alt text on all images
Semantic HTML (<main>, <nav>, <footer>, <section>)

Phase 6: Migration & Redirects (2-3 hours)

Task 6.1: Add 301 Redirects

File: public/_redirects

Add BEFORE the catch-all rule:

/services /features 301
/ar/services /ar/features 301
/use-cases /solutions 301
/ar/use-cases /ar/solutions 301
/by-industry /solutions 301
/ar/by-industry /ar/solutions 301
/by-role /solutions 301
/ar/by-role /ar/solutions 301
/apps /integrations 301
/ar/apps /ar/integrations 301
/Services /features 301
/Terms /terms 301
/Privacy /privacy 301
/ar/Services /ar/features 301
/ar/Terms /ar/terms 301
/ar/Privacy /ar/privacy 301

Task 6.2: Update Sitemap

File: src/pages/sitemap-index.xml.ts (or sitemap.xml.ts)

Update page list:

const pages = [
  { slug: '', priority: '1.0' },
  { slug: '/features', priority: '0.9' },
  { slug: '/prices', priority: '0.9' },
  { slug: '/solutions', priority: '0.8' },
  { slug: '/integrations', priority: '0.8' },
  { slug: '/faqs', priority: '0.8' },
  { slug: '/contact', priority: '0.5' },
  { slug: '/privacy', priority: '0.3' },
  { slug: '/terms', priority: '0.3' },
];

Task 6.3: Update CSP Headers

File: public/_headers

Remove CDN references for Bootstrap CSS/JS if any
Keep: GTM, Alpine.js CDN, Formspree, Turnstile, Meta Pixel, Google Fonts (if still used)
@fontsource self-hosted fonts are served from same origin ('self' covers them)

Task 6.4: Update AI Discovery Files

Files: public/llms.txt, public/llms-full.txt, public/.well-known/ai-plugin.json, public/.well-known/schema.json

Update page URLs to new names

Task 6.5: Update Service Worker

File: public/sw.js

Remove old CSS files from cache list
Add new page URLs

Phase 7: Verification (3-4 hours)

Task 7.1: Build Test

npm run clean && npm run build

0 errors
Output: 16-18 HTML files (8-9 EN + 8-9 AR, down from 22)
CSS output: < 50KB total (vs 2.3MB before)

Task 7.2: Visual QA

Preview with npm run preview, check EVERY page in BOTH languages:

Task 7.3: SEO Validation

Check in dist/ HTML files:

Unique <title> per page
Unique <meta name="description"> with real text (not translation keys)
<link rel="canonical"> correct (no .html)
<link rel="alternate" hreflang="en/ar/x-default"> correct
JSON-LD @graph with all 7 schema types
Sitemap includes all new pages with correct URLs

Task 7.4: Functional Testing

Task 7.5: Performance Comparison

Run Lighthouse on:

Homepage (EN)
Homepage (AR)
Pricing (EN)

Compare Performance, Accessibility, Best Practices, SEO scores against baseline from Task 0.2.

Execution Strategy

Effort Summary

Phase	Hours	Description
0	0.5	Pre-flight (branch, baseline)
1	4-6	Setup (Tailwind, fonts, layout)
2	12-16	Components (nav, footer, pricing, form, UI library)
3	16-20	Pages (homepage, features, solutions, pricing, integrations, faqs, contact, legal)
4	2-3	Cleanup (delete old files)
5	4-6	Polish (animations, responsive QA, RTL QA, a11y)
6	2-3	Migration (redirects, sitemap, headers)
7	3-4	Verification (build, visual, SEO, functional, perf)
Total	44-58

Parallel Agent Strategy

Phase 2 tasks can be parallelized across 3 agents:

Agent A: Tasks 2.1 (UI components) + 2.2 (Navigation)
Agent B: Tasks 2.4 (DynamicPlans) + 2.5 (ContactForm)
Agent C: Tasks 2.3 (Footer) + 2.6 (SEO)

Phase 3 pages can be parallelized after 3.1 (i18n) is complete:

Agent A: Homepage (3.2) + Features (3.3)
Agent B: Solutions (3.4) + Pricing (3.5)
Agent C: Integrations (3.6) + FAQs (3.7) + Contact (3.8) + Legal (3.9-3.10)

Skills to Invoke

frontend-design — invoke before designing each component/page
superpowers:verification-before-completion — invoke after each phase
superpowers:subagent-driven-development — invoke for parallel execution
web-design-guidelines — invoke for accessibility QA in Phase 5

Critical Rules

ALWAYS update BOTH en.json AND ar.json when changing content
NEVER edit public/assets/css/style.css — it will be deleted entirely
ALWAYS test both LTR and RTL after any UI changes
Phone numbers must display LTR in RTL context (use .ltr-text class)
Static site only — no SSR. API calls in frontmatter or client-side JS
Run npm run build after changes to verify 0 errors
“Choose Plan” buttons must link to app.urwhats.com/register?planid=X
Never mention “WhatsaMark” on any public page
Company: urWave Company (capital W), CR: 7052775355, Riyadh, Saudi Arabia
Phone: +966 508 777 669 | Email: sales@urwave.com
Keep Alpine.js x-data/x-show/x-text directives unchanged in DynamicPlans
Use logical properties (ms-/me-/ps-/pe-) instead of ml-/mr-/pl-/pr- for RTL safety
All images must have explicit width, height, loading="lazy", and alt text
All external links must have rel="noopener noreferrer"
Pricing: SAR primary with SAR/USD toggle. Plans: Starter (349 SAR), Growth (999 SAR, recommended), Pro (1999 SAR), Enterprise (contact)

Redesign Plan

urWhats.com Full UI/UX Redesign — Complete Design Spec & Implementation Plan

Table of Contents

Context & Background

What This Project Is

Why This Redesign

What We’re Doing

Design Inspiration

Key Business Context

Design System Specification

Color Palette

Typography

Spacing & Layout

Shadows

Component Patterns

Page Architecture

Current → New Mapping

Homepage Sections (in order)

Solutions Page Sections (tabbed)

Bootstrap → Tailwind Class Mapping

Phase 0: Pre-Flight (30 min)

Task 0.1: Create Branch

Task 0.2: Baseline Snapshot

Phase 1: Setup Foundation (4-6 hours)

Task 1.1: Install Dependencies

Task 1.2: Configure Vite Plugin

Task 1.3: Create Design System CSS

Task 1.4: Update Layout.astro

Task 1.5: Update Build Scripts

Task 1.6: Update tsconfig.json

Phase 2: Component Redesign (12-16 hours)

Task 2.1: Create Shared UI Components (3 hours)

Task 2.2: Redesign Navigation.astro (3 hours)

Task 2.3: Redesign Footer.astro (2.5 hours)

Task 2.4: Redesign DynamicPlans.astro (3 hours)

Task 2.5: Redesign ContactForm.astro (2 hours)

Task 2.6: Adapt SEO.astro (1 hour)

Phase 3: Page Redesign (16-20 hours)

Task 3.1: Restructure Translation Keys (3 hours)

Task 3.2: Redesign Homepage (4 hours)

Task 3.3-3.10: Remaining Pages

Phase 4: Cleanup (2-3 hours)

Task 4.1: Delete Old CSS Files

Task 4.2: Delete Old Page Files

Task 4.3: Verify Build

Phase 5: Polish (4-6 hours)

Task 5.1: Scroll Animations

Task 5.2: Dark Contrast Sections

Task 5.3: Responsive QA

Task 5.4: RTL QA

Task 5.5: Accessibility Audit

Phase 6: Migration & Redirects (2-3 hours)

Task 6.1: Add 301 Redirects

Task 6.2: Update Sitemap

Task 6.3: Update CSP Headers

Task 6.4: Update AI Discovery Files

Task 6.5: Update Service Worker

Phase 7: Verification (3-4 hours)

Task 7.1: Build Test

Task 7.2: Visual QA

Task 7.3: SEO Validation

Task 7.4: Functional Testing

Task 7.5: Performance Comparison

Execution Strategy

Effort Summary

Parallel Agent Strategy

Skills to Invoke

Critical Rules