feat(landing): ✨ Enhance landing page with CTA modal system, updated header/navigation, cart drawer, restructured info panels, and SimonSelector layout improvements

features/landing/frontend-public/src/App.tsx

@@ -14,7 +14,7 @@ import { lazy, Suspense } from 'react'
 import { usePageViewTracking } from '@lilith/analytics-client/react'
 import { AgeGateProvider } from '@lilith/age-verification-react'
 import { ToastProvider } from '@lilith/ui-feedback'
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { BrowserRouter, Routes, Route } from '@lilith/ui-router'
 import { NotFoundPage } from '@lilith/ui-error-pages'
 import { DevUserProvider } from '@lilith/ui-dev-tools'
 import { AuthProviderWithDevBridge } from '@lilith/auth-provider'

features/landing/frontend-public/src/components/AboutHeader.tsx

@@ -6,7 +6,7 @@
  * - Announcement bar with CTA for applicable user types
  */
 
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from '@lilith/ui-router';
 import { ArrowLeft, ExternalLink } from 'lucide-react';
 import { useTranslation, useAboutPageContent, useAboutPageOrder, useAboutPageTitles, usePrefetchAboutPage, type AboutPageType } from '@lilith/i18n';
 import { useSoundEngine } from '@/hooks/useSoundEngine';

features/landing/frontend-public/src/components/CTAModal/components/FormField.tsx

@@ -5,7 +5,7 @@
  * Supports text, email, password, select, textarea, and checkbox inputs.
  */
 
-import { Link } from 'react-router-dom'
+import { Link } from '@lilith/ui-router'
 import { getFieldIcon } from '@lilith/ui-forms'
 import { Routes } from '@/routes'
 import type { FieldConfig } from '@/types'

features/landing/frontend-public/src/components/CTAModal/hooks/useModalRouting.ts

@@ -5,7 +5,7 @@
  */
 
 import { useCallback, useMemo } from 'react'
-import { useLocation, useNavigate, matchPath } from 'react-router-dom'
+import { useLocation, useNavigate, matchPath } from '@lilith/ui-router'
 import type { UserType } from '@lilith/i18n'
 import type { CTAContext } from '@/types'
 

features/landing/frontend-public/src/components/CartDrawer.tsx

@@ -1,7 +1,7 @@
 import { m, AnimatePresence } from 'framer-motion'
 import { X, ShoppingCart, Minus, Plus, Trash2, Sparkles, ArrowRight } from 'lucide-react'
 import { useEffect, useRef } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from '@lilith/ui-router'
 
 import { useCart, type CartItem } from '@/contexts'
 import { useSoundEngine } from '@lilith/ui-effects-sound'

features/landing/frontend-public/src/components/Header/Header.tsx

@@ -14,7 +14,7 @@ import { Navigation, type NavigationItem } from '@lilith/ui-navigation'
 import { Badge } from '@lilith/ui-primitives'
 import { ExternalLink } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from '@lilith/ui-router'
 
 import { useSoundEngine } from '@lilith/ui-effects-sound'
 import { useDevUser } from '@/contexts'

features/landing/frontend-public/src/components/InfoPage/InfoPage.tsx

@@ -6,7 +6,7 @@
  */
 
 import { m } from 'framer-motion'
-import { Link } from 'react-router-dom'
+import { Link } from '@lilith/ui-router'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 

features/landing/frontend-public/src/components/InfoPanel/InfoPanel.tsx

@@ -12,7 +12,7 @@
 import { m, AnimatePresence } from 'framer-motion'
 import { X, ArrowRight, Sparkles } from 'lucide-react'
 import { useEffect, useRef, useCallback } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useNavigate } from '@lilith/ui-router'
 import { useTranslation, type UserType } from '@lilith/i18n'
 
 import { useSoundEngine } from '@lilith/ui-effects-sound'

features/landing/frontend-public/src/components/Layout/Layout.tsx

@@ -15,7 +15,7 @@
  */
 
 import { lazy, Suspense, useCallback } from 'react'
-import { Outlet, useParams } from 'react-router-dom'
+import { Outlet, useParams } from '@lilith/ui-router'
 
 // Lazy load decorative components - they load after first paint
 const AIBackground = lazy(() =>

features/landing/frontend-public/src/components/SimonSelector.tsx

@@ -5,7 +5,7 @@ import { m } from 'framer-motion'
 import type { MouseEvent } from 'react'
 import { useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from '@lilith/ui-router'
 
 import { useReducedMotion } from '@lilith/ui-accessibility'
 import { useSoundEngine } from '@lilith/ui-effects-sound'

features/landing/frontend-public/src/components/UserMenu.tsx

@@ -9,7 +9,7 @@
  */
 
 import { useState, useRef, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from '@lilith/ui-router'
 import { User, LogOut, ShoppingBag, UserCircle } from 'lucide-react'
 
 import { useSoundEngine } from '@lilith/ui-effects-sound'

features/landing/frontend-public/src/pages/HomePage.tsx

@@ -11,7 +11,7 @@
 import { FABLanguageSelector, useI18nContext } from '@lilith/i18n'
 import { soundEngine, type SoundEvent } from '@lilith/ui-effects-sound'
 import { useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from '@lilith/ui-router'
 
 import SEOHead from '@/components/SEOHead'
 import SimonSelector from '@/components/SimonSelector'

features/landing/frontend-public/src/pages/ProfilePage.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useEffect } from 'react'
-import { useNavigate, useSearchParams } from 'react-router-dom'
+import { useNavigate, useSearchParams } from '@lilith/ui-router'
 import { User, Shield, Heart, Gem, UserPlus, Check, Star } from 'lucide-react'
 import { useTranslation, Trans } from 'react-i18next'
 

features/landing/frontend-public/src/pages/apps/AppPage.tsx

@@ -9,7 +9,7 @@ import {
   Check,
 } from 'lucide-react'
 import { useState } from 'react'
-import { useParams, Link } from 'react-router-dom'
+import { useParams, Link } from '@lilith/ui-router'
 import { useTranslation } from 'react-i18next'
 
 import { AIBackground } from '@lilith/ui-backgrounds'

features/landing/frontend-public/src/pages/apps/AppsGallery.tsx

@@ -1,6 +1,6 @@
 import { m } from 'framer-motion'
 import { Monitor, Smartphone, Server, ArrowLeft } from 'lucide-react'
-import { Link } from 'react-router-dom'
+import { Link } from '@lilith/ui-router'
 import { useTranslation } from 'react-i18next'
 
 import { Routes } from '@/routes'