Add landing, contact, and trial pages with client-side routing

.env.example

@@ -23,6 +23,8 @@ API_RATE_LIMIT_WINDOW_MS=60000
 # ── Convex ───────────────────────────────────────────
 CONVEX_ADMIN_KEY=
 CONVEX_URL=
+SITE_CONTACT_PHONE_NUMBER=
+SITE_CONTACT_EMAIL_ADDRESS=
 
 # ── AI Providers ─────────────────────────────────────
 AI_HEALTHCHECK_TIMEOUT_MS=5000

apps/web/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@gsap/react": "^2.1.2",
     "gsap": "^3.12.5",
+    "hono": "^4.12.9",
     "lucide-react": "^0.470.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

apps/web/src/App.tsx

@@ -1,29 +1,30 @@
 import { useGSAP } from '@gsap/react';
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { TrieRouter } from 'hono/router/trie-router';
 
 import { Layout } from './components/layout/Layout';
-import { HeroSection } from './components/sections/HeroSection';
-import { ProblemSection } from './components/sections/ProblemSection';
-import { SolutionSection } from './components/sections/SolutionSection';
-import { FlowSection } from './components/sections/FlowSection';
-import { TrustSection } from './components/sections/TrustSection';
-import { PricingSection } from './components/sections/PricingSection';
-import { CTASection } from './components/sections/CTASection';
+import { RouterProvider, RouteView } from './components/router/HonoRouter';
+import { LandingPage } from './pages/LandingPage';
+import { ContactPage } from './pages/ContactPage';
+import { TrialPage } from './pages/TrialPage';
 
 gsap.registerPlugin(useGSAP, ScrollTrigger);
 
+const router = new TrieRouter<React.FC<any>>();
+
+// Define routes
+router.add('GET', '/', LandingPage);
+router.add('GET', '/contact', ContactPage);
+router.add('GET', '/trial', TrialPage);
+
 function App() {
   return (
-    <Layout>
-      <HeroSection />
-      <ProblemSection />
-      <SolutionSection />
-      <FlowSection />
-      <TrustSection />
-      <PricingSection />
-      <CTASection />
-    </Layout>
+    <RouterProvider>
+      <Layout>
+        <RouteView router={router} />
+      </Layout>
+    </RouterProvider>
   );
 }
 

apps/web/src/components/icons.ts

@@ -1,5 +1,6 @@
 import {
   ArrowLeft as ArrowLeftIcon,
+  ArrowRight as ArrowRightIcon,
   BarChart as BarChartIcon,
   BarChart3 as BarChart3Icon,
   Bot as BotIcon,
@@ -11,9 +12,12 @@ import {
   Frown as FrownIcon,
   Globe2 as Globe2Icon,
   Image as ImageIconSymbol,
+  Mail as MailIcon,
+  MapPin as MapPinIcon,
   MessageCircle as MessageCircleIcon,
   MessageSquareOff as MessageSquareOffIcon,
   PackageOpen as PackageOpenIcon,
+  Phone as PhoneIcon,
   Search as SearchIcon,
   ShieldCheck as ShieldCheckIcon,
   TrendingUp as TrendingUpIcon,
@@ -25,6 +29,7 @@ import {
 const asIcon = (icon: LucideIcon): LucideIcon => icon;
 
 export const ArrowLeft = asIcon(ArrowLeftIcon);
+export const ArrowRight = asIcon(ArrowRightIcon);
 export const BarChart = asIcon(BarChartIcon);
 export const BarChart3 = asIcon(BarChart3Icon);
 export const Bot = asIcon(BotIcon);
@@ -36,9 +41,12 @@ export const Database = asIcon(DatabaseIcon);
 export const Frown = asIcon(FrownIcon);
 export const Globe2 = asIcon(Globe2Icon);
 export const ImageIcon = asIcon(ImageIconSymbol);
+export const Mail = asIcon(MailIcon);
+export const MapPin = asIcon(MapPinIcon);
 export const MessageCircle = asIcon(MessageCircleIcon);
 export const MessageSquareOff = asIcon(MessageSquareOffIcon);
 export const PackageOpen = asIcon(PackageOpenIcon);
+export const Phone = asIcon(PhoneIcon);
 export const Search = asIcon(SearchIcon);
 export const ShieldCheck = asIcon(ShieldCheckIcon);
 export const TrendingUp = asIcon(TrendingUpIcon);

apps/web/src/components/layout/Layout.tsx

@@ -1,36 +1,107 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
+import gsap from 'gsap';
 import logoUrl from '../../assets/Reda_logo.svg';
+import { Link, useLocation } from '../router/HonoRouter';
 
 interface LayoutProps {
   children: React.ReactNode;
 }
 
 export function Layout({ children }: LayoutProps) {
+  const { path } = useLocation();
   const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
+  const sectionLinksRef = useRef<HTMLDivElement>(null);
+  const isFirstRender = useRef(true);
+
+  const isLandingPage = path === '/';
+
+  useEffect(() => {
+    const container = sectionLinksRef.current;
+    if (!container) return;
+    const links = container.children;
+
+    if (isFirstRender.current) {
+      // On first render, just set the correct state without animation
+      isFirstRender.current = false;
+      if (!isLandingPage) {
+        gsap.set(links, { opacity: 0, y: -12, scale: 0.9 });
+        gsap.set(container, { width: 0, marginRight: 0, overflow: 'hidden' });
+        container.style.pointerEvents = 'none';
+      }
+      return;
+    }
+
+    if (isLandingPage) {
+      // Animate links popping back in
+      container.style.pointerEvents = 'auto';
+      gsap.to(container, {
+        width: 'auto',
+        marginRight: '',
+        duration: 0.35,
+        ease: 'power2.out',
+        onStart: () => {
+          gsap.set(container, { overflow: 'visible' });
+        },
+      });
+      gsap.to(links, {
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        duration: 0.45,
+        stagger: 0.08,
+        ease: 'back.out(2)',
+        delay: 0.1,
+      });
+    } else {
+      // Animate links sliding out
+      gsap.to(links, {
+        opacity: 0,
+        y: -12,
+        scale: 0.9,
+        duration: 0.3,
+        stagger: 0.05,
+        ease: 'power2.in',
+        onComplete: () => {
+          gsap.to(container, {
+            width: 0,
+            marginRight: 0,
+            overflow: 'hidden',
+            duration: 0.25,
+            ease: 'power2.inOut',
+          });
+          container.style.pointerEvents = 'none';
+        },
+      });
+    }
+  }, [isLandingPage]);
 
   return (
     <div className="min-h-screen flex flex-col overflow-x-hidden">
       <nav className="w-full fixed top-0 left-0 bg-bg-light/80 backdrop-blur-md z-50 border-b border-primary/5">
         <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
-          <a
-            href="#"
+          <Link
+            href="/"
             aria-label="CSCB"
             className="flex items-center gap-3"
-            onClick={(event) => {
-              event.preventDefault();
-              scrollToTop();
+            onClick={(event: React.MouseEvent) => {
+              if (isLandingPage) {
+                event.preventDefault();
+                scrollToTop();
+              }
             }}
           >
             <img src={logoUrl} alt="" className="h-10 w-auto" />
             <span className="text-2xl font-black text-primary tracking-tight">رضا</span>
-          </a>
+          </Link>
           <div className="hidden md:flex gap-8 items-center text-primary/80 font-medium">
-            <a href="#features" className="hover:text-primary transition-colors">المميزات</a>
-            <a href="#how-it-works" className="hover:text-primary transition-colors">كيف يعمل</a>
-            <a href="#pricing" className="hover:text-primary transition-colors">أسعارنا</a>
-            <button type="button" className="bg-primary text-white px-6 py-2.5 rounded-full hover:bg-primary/90 transition-all font-semibold shadow-sm hover:shadow-md">
+            <div ref={sectionLinksRef} className="flex gap-8 items-center">
+              <Link href="/#features" className="hover:text-primary transition-colors whitespace-nowrap">المميزات</Link>
+              <Link href="/#how-it-works" className="hover:text-primary transition-colors whitespace-nowrap">كيف يعمل</Link>
+              <Link href="/#pricing" className="hover:text-primary transition-colors whitespace-nowrap">أسعارنا</Link>
+            </div>
+            <Link href="/contact" className="bg-primary text-white px-6 py-2.5 rounded-full hover:bg-primary/90 transition-all font-semibold shadow-sm hover:shadow-md">
               تواصل معنا
-            </button>
+            </Link>
           </div>
         </div>
       </nav>

apps/web/src/components/layout/Layout.vitest.tsx

@@ -2,11 +2,33 @@ import { cleanup, createEvent, fireEvent, render, screen } from '@testing-librar
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { Layout } from './Layout';
 
+// Mock gsap for JSDOM environment
+vi.mock('gsap', () => ({
+  default: {
+    set: vi.fn(),
+    to: vi.fn(),
+  },
+}));
+
+// Mock useLocation to control the path in tests
+const mockNavigate = vi.fn();
+let mockPath = '/';
+
+vi.mock('../router/HonoRouter', () => ({
+  useLocation: () => ({ path: mockPath, navigate: mockNavigate }),
+  Link: ({ href, children, className, onClick }: any) => (
+    <a href={href} className={className} onClick={onClick}>
+      {children}
+    </a>
+  ),
+}));
+
 describe('Layout', () => {
   const scrollToMock = vi.fn();
 
   afterEach(() => {
     scrollToMock.mockReset();
+    mockPath = '/';
     cleanup();
   });
 
@@ -46,12 +68,14 @@ describe('Layout', () => {
     expect(watermarkImage?.className).toContain('md:h-225');
   });
 
-  it('uses a top-level anchor with smooth scroll-to-top behavior', () => {
+  it('uses the logo link with href="/" and scrolls to top when on landing page', () => {
     Object.defineProperty(window, 'scrollTo', {
       value: scrollToMock,
       writable: true,
     });
 
+    mockPath = '/';
+
     render(
       <Layout>
         <div>content</div>
@@ -62,11 +86,55 @@ describe('Layout', () => {
     const clickEvent = createEvent.click(navLogoLink);
     clickEvent.preventDefault = vi.fn();
 
-    expect(navLogoLink.getAttribute('href')).toBe('#');
+    expect(navLogoLink.getAttribute('href')).toBe('/');
 
     fireEvent(navLogoLink, clickEvent);
 
     expect(clickEvent.preventDefault).toHaveBeenCalled();
     expect(scrollToMock).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
   });
+
+  it('always renders section links in the DOM', () => {
+    mockPath = '/';
+
+    render(
+      <Layout>
+        <div>content</div>
+      </Layout>,
+    );
+
+    expect(screen.getByText('المميزات')).toBeDefined();
+    expect(screen.getByText('كيف يعمل')).toBeDefined();
+    expect(screen.getByText('أسعارنا')).toBeDefined();
+  });
+
+  it('renders section links even on non-landing pages (animated via GSAP)', () => {
+    mockPath = '/contact';
+
+    render(
+      <Layout>
+        <div>content</div>
+      </Layout>,
+    );
+
+    // Links are always in the DOM (animated out visually, not removed)
+    expect(screen.getByText('المميزات')).toBeDefined();
+    expect(screen.getByText('كيف يعمل')).toBeDefined();
+    expect(screen.getByText('أسعارنا')).toBeDefined();
+    // "تواصل معنا" should still be visible
+    expect(screen.getByText('تواصل معنا')).toBeDefined();
+  });
+
+  it('sets pointer-events none on section links container for non-landing pages', () => {
+    mockPath = '/contact';
+
+    render(
+      <Layout>
+        <div>content</div>
+      </Layout>,
+    );
+
+    const container = screen.getByText('المميزات').closest('div');
+    expect(container?.style.pointerEvents).toBe('none');
+  });
 });