← Back to Docs / Technical / 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.

Table of Contents

  1. Context & Background
  2. Design System Specification
  3. Page Architecture
  4. Bootstrap → Tailwind Class Mapping
  5. Phase 0: Pre-Flight
  6. Phase 1: Setup Foundation
  7. Phase 2: Component Redesign
  8. Phase 3: Page Redesign
  9. Phase 4: Cleanup
  10. Phase 5: Polish
  11. Phase 6: Migration & Redirects
  12. Phase 7: Verification
  13. Execution Strategy
  14. 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:

What We're Doing

Design Inspiration

Key Business Context

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)

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

Solutions Page Sections (tabbed)

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>:

Keep:

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:

Task 2.3: Redesign Footer.astro (2.5 hours)

File: src/components/Footer.astro

Key specifications:

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:

Task 2.5: Redesign ContactForm.astro (2 hours)

File: src/components/ContactForm.astro

Key specifications:

Task 2.6: Adapt SEO.astro (1 hour)

File: src/components/SEO.astro

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:

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:

  1. Use shared UI components (Container, Section, SectionHeader, Button, CTASection)
  2. Replace all Bootstrap classes with Tailwind equivalents
  3. Delete all inline <style> blocks
  4. Use t() for all text content
  5. 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

Task 5.2: Dark Contrast Sections

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

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:

Task 5.5: Accessibility Audit

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

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

Task 6.5: Update Service Worker

File: public/sw.js

Phase 7: Verification (3-4 hours)

Task 7.1: Build Test

npm run clean && npm run build

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:

Task 7.4: Functional Testing

Task 7.5: Performance Comparison

Run Lighthouse on:

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:

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

Skills to Invoke

Critical Rules

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