redesign the homepage

dashboard/src/components/public/PublicFooter.tsx

@@ -0,0 +1,187 @@
+'use client'
+
+import { ChevronDown } from 'lucide-react'
+import Link from 'next/link'
+import { useEffect, useRef, useState } from 'react'
+import {
+  type DashboardLanguage,
+  useDashboardI18n,
+} from '@/components/I18nProvider'
+import { marketplaceUrl } from '@/lib/urls'
+
+type FooterItem = {
+  label: string
+  href?: string
+}
+
+const appPrivacyHref = {
+  en: `${marketplaceUrl}/app-privacy-en`,
+  fr: `${marketplaceUrl}/app-privacy-fr`,
+  ar: `${marketplaceUrl}/app-privacy-ar`,
+} as const
+
+const localeOptions: Array<{ value: DashboardLanguage; label: string; flag: string }> = [
+  { value: 'en', label: 'Global (English)', flag: '🇺🇸' },
+  { value: 'ar', label: 'North Africa (Arabic)', flag: '🇲🇦' },
+  { value: 'fr', label: 'Europe (French)', flag: '🇫🇷' },
+]
+
+function getFooterContent(language: DashboardLanguage): {
+  primary: FooterItem[]
+  secondary: FooterItem[]
+  localeLabel: string
+  rightsLabel: string
+} {
+  switch (language) {
+    case 'fr':
+      return {
+        primary: [
+          { label: 'À propos de nous', href: `${marketplaceUrl}/footer/about-us` },
+          { label: 'Conditions d’utilisation', href: `${marketplaceUrl}/footer/terms-of-service` },
+          { label: 'Sécurité', href: `${marketplaceUrl}/footer/security` },
+          { label: 'Conformité', href: `${marketplaceUrl}/footer/compliance` },
+          { label: 'Politique de confidentialité', href: appPrivacyHref.fr },
+          { label: 'Politique relative aux cookies', href: `${marketplaceUrl}/footer/cookie-policy` },
+        ],
+        secondary: [
+          { label: 'Newsletter', href: `${marketplaceUrl}/footer/newsletter` },
+          { label: 'Contacter les ventes', href: `${marketplaceUrl}/footer/contact-sales` },
+          { label: 'Conditions générales', href: `${marketplaceUrl}/footer/general-conditions` },
+        ],
+        localeLabel: 'Europe (French)',
+        rightsLabel: 'Tous droits réservés.',
+      }
+    case 'ar':
+      return {
+        primary: [
+          { label: 'من نحن', href: `${marketplaceUrl}/footer/about-us` },
+          { label: 'شروط الاستخدام', href: `${marketplaceUrl}/footer/terms-of-service` },
+          { label: 'الأمان', href: `${marketplaceUrl}/footer/security` },
+          { label: 'الامتثال', href: `${marketplaceUrl}/footer/compliance` },
+          { label: 'سياسة الخصوصية', href: appPrivacyHref.ar },
+          { label: 'سياسة ملفات تعريف الارتباط', href: `${marketplaceUrl}/footer/cookie-policy` },
+        ],
+        secondary: [
+          { label: 'النشرة الإخبارية', href: `${marketplaceUrl}/footer/newsletter` },
+          { label: 'تواصل مع المبيعات', href: `${marketplaceUrl}/footer/contact-sales` },
+          { label: 'الشروط العامة', href: `${marketplaceUrl}/footer/general-conditions` },
+        ],
+        localeLabel: 'North Africa (Arabic)',
+        rightsLabel: 'جميع الحقوق محفوظة.',
+      }
+    case 'en':
+    default:
+      return {
+        primary: [
+          { label: 'About Us', href: `${marketplaceUrl}/footer/about-us` },
+          { label: 'Terms of Service', href: `${marketplaceUrl}/footer/terms-of-service` },
+          { label: 'Security', href: `${marketplaceUrl}/footer/security` },
+          { label: 'Compliance', href: `${marketplaceUrl}/footer/compliance` },
+          { label: 'Privacy Policy', href: appPrivacyHref.en },
+          { label: 'Cookie Policy', href: `${marketplaceUrl}/footer/cookie-policy` },
+        ],
+        secondary: [
+          { label: 'Newsletter', href: `${marketplaceUrl}/footer/newsletter` },
+          { label: 'Contact Sales', href: `${marketplaceUrl}/footer/contact-sales` },
+          { label: 'General Conditions', href: `${marketplaceUrl}/footer/general-conditions` },
+        ],
+        localeLabel: 'Global (English)',
+        rightsLabel: 'All rights reserved.',
+      }
+  }
+}
+
+export default function PublicFooter() {
+  const { language, setLanguage } = useDashboardI18n()
+  const footerContent = getFooterContent(language)
+  const availableLocaleOptions = localeOptions.filter((option) => option.value !== language)
+  const currentLocale = localeOptions.find((option) => option.value === language) ?? localeOptions[0]
+  const localeMenuRef = useRef<HTMLDivElement | null>(null)
+  const [localeMenuOpen, setLocaleMenuOpen] = useState(false)
+
+  useEffect(() => {
+    function handlePointerDown(event: MouseEvent) {
+      if (!localeMenuRef.current?.contains(event.target as Node)) {
+        setLocaleMenuOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointerDown)
+    return () => document.removeEventListener('mousedown', handlePointerDown)
+  }, [])
+
+  return (
+    <footer className="border-t border-stone-200/80 bg-white/72 px-4 py-8 text-stone-600 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-blue-950/72 dark:text-stone-300">
+      <div className="mx-auto flex max-w-7xl flex-col items-center gap-5 px-0 text-center sm:px-2 lg:px-0">
+        <nav className="flex flex-wrap items-center justify-center gap-y-3 text-sm">
+          {footerContent.primary.map((item, index) => (
+            <div key={item.label} className="flex items-center">
+              <FooterNavItem item={item} />
+              {index < footerContent.primary.length - 1 ? (
+                <span className="px-2 text-stone-400 dark:text-stone-600" aria-hidden="true">|</span>
+              ) : null}
+            </div>
+          ))}
+        </nav>
+
+        <div className="flex flex-wrap items-center justify-center gap-y-3 text-sm">
+          {footerContent.secondary.map((item) => (
+            <div key={item.label} className="flex items-center">
+              <FooterNavItem item={item} />
+              <span className="px-2 text-stone-400 dark:text-stone-600" aria-hidden="true">|</span>
+            </div>
+          ))}
+          <div ref={localeMenuRef} className="relative px-3">
+            <button
+              type="button"
+              onClick={() => setLocaleMenuOpen((open) => !open)}
+              className="inline-flex items-center gap-2 text-orange-700 transition hover:text-blue-900 dark:text-orange-300 dark:hover:text-stone-100"
+              aria-expanded={localeMenuOpen}
+              aria-haspopup="menu"
+            >
+              <span aria-hidden="true" className="text-base leading-none">{currentLocale.flag}</span>
+              <span>{footerContent.localeLabel}</span>
+              <ChevronDown className={`h-4 w-4 transition-transform ${localeMenuOpen ? 'rotate-180' : ''}`} />
+            </button>
+            {localeMenuOpen ? (
+              <div className="absolute left-1/2 top-full z-20 mt-3 w-56 -translate-x-1/2 overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)]">
+                {availableLocaleOptions.map((option) => (
+                  <button
+                    key={option.value}
+                    type="button"
+                    onClick={() => {
+                      setLanguage(option.value)
+                      setLocaleMenuOpen(false)
+                    }}
+                    className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
+                  >
+                    <span aria-hidden="true" className="text-base leading-none">{option.flag}</span>
+                    <span>{option.label}</span>
+                  </button>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        </div>
+
+        <p className="text-sm text-stone-500 dark:text-stone-400">
+          &copy; {new Date().getFullYear()} RentalDriveGo. {footerContent.rightsLabel}
+        </p>
+      </div>
+    </footer>
+  )
+}
+
+function FooterNavItem({ item }: { item: FooterItem }) {
+  const className = 'px-3 text-stone-600 transition hover:text-blue-900 dark:text-stone-300 dark:hover:text-white'
+
+  if (item.href) {
+    return (
+      <Link href={item.href} className={className}>
+        {item.label}
+      </Link>
+    )
+  }
+
+  return <span className={className}>{item.label}</span>
+}

dashboard/src/components/public/PublicNavbar.tsx

@@ -0,0 +1,230 @@
+'use client'
+
+import { ChevronDown } from 'lucide-react'
+import Image from 'next/image'
+import { usePathname, useSearchParams } from 'next/navigation'
+import { useEffect, useRef, useState } from 'react'
+import { useDashboardI18n } from '@/components/I18nProvider'
+import { marketplaceUrl } from '@/lib/urls'
+
+const DASHBOARD_LOGO_SRC = '/dashboard/rentalcardrive.png'
+
+const languageMeta = {
+  en: { flag: '🇺🇸', shortLabel: 'EN' },
+  fr: { flag: '🇫🇷', shortLabel: 'FR' },
+  ar: { flag: '🇲🇦', shortLabel: 'AR' },
+} as const
+
+export default function PublicNavbar() {
+  const { language, setLanguage, theme, setTheme } = useDashboardI18n()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const localeMenuRef = useRef<HTMLDivElement | null>(null)
+  const [localeMenuOpen, setLocaleMenuOpen] = useState(false)
+  const themeMenuRef = useRef<HTMLDivElement | null>(null)
+  const [themeMenuOpen, setThemeMenuOpen] = useState(false)
+  const currentLanguage = languageMeta[language]
+  const availableLanguages = (['en', 'fr', 'ar'] as const)
+    .filter((value) => value !== language)
+    .map((value) => ({ value, ...languageMeta[value] }))
+  const dict = {
+    en: {
+      home: 'Home',
+      marketplace: 'Marketplace',
+      signIn: 'Sign in',
+      createAccount: 'Create Agency Space',
+      theme: 'Theme',
+      light: 'Light',
+      dark: 'Dark',
+    },
+    fr: {
+      home: 'Accueil',
+      marketplace: 'Marketplace',
+      signIn: 'Connexion',
+      createAccount: 'Créer un espace d’agence',
+      theme: 'Mode',
+      light: 'Clair',
+      dark: 'Sombre',
+    },
+    ar: {
+      home: 'الرئيسية',
+      marketplace: 'السوق',
+      signIn: 'تسجيل الدخول',
+      createAccount: 'إنشاء مساحة الوكالة',
+      theme: 'الوضع',
+      light: 'فاتح',
+      dark: 'داكن',
+    },
+  }[language]
+  const themeOptions = [
+    { value: 'light' as const, label: dict.light },
+    { value: 'dark' as const, label: dict.dark },
+  ]
+  const currentTheme = themeOptions.find((option) => option.value === theme) ?? themeOptions[0]
+  const localeMenuPositionClass =
+    language === 'ar'
+      ? 'right-0 sm:right-0'
+      : 'left-0 sm:left-auto sm:right-0'
+
+  useEffect(() => {
+    function handlePointerDown(event: MouseEvent) {
+      if (!localeMenuRef.current?.contains(event.target as Node)) {
+        setLocaleMenuOpen(false)
+      }
+      if (!themeMenuRef.current?.contains(event.target as Node)) {
+        setThemeMenuOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointerDown)
+    return () => document.removeEventListener('mousedown', handlePointerDown)
+  }, [])
+
+  function toggleLocaleMenu() {
+    setThemeMenuOpen(false)
+    setLocaleMenuOpen((open) => !open)
+  }
+
+  function toggleThemeMenu() {
+    setLocaleMenuOpen(false)
+    setThemeMenuOpen((open) => !open)
+  }
+
+  const signInParams = new URLSearchParams()
+  signInParams.set('lang', language)
+  signInParams.set('theme', theme)
+  const next = searchParams.get('next')
+  const redirect = searchParams.get('redirect')
+  if (next) signInParams.set('next', next)
+  if (redirect) signInParams.set('redirect', redirect)
+  const signInHref = `${marketplaceUrl}/sign-in?${signInParams.toString()}`
+
+  const signUpParams = new URLSearchParams()
+  signUpParams.set('lang', language)
+  signUpParams.set('theme', theme)
+  const signUpHref = `/dashboard/sign-up?${signUpParams.toString()}`
+
+  function navLinkClass(active: boolean) {
+    return `rounded-full px-2.5 py-1 text-[12px] font-medium transition sm:px-4 sm:py-2 sm:text-sm ${
+      active
+        ? 'bg-blue-50 text-blue-950 ring-1 ring-blue-100 dark:bg-blue-900/55 dark:text-white dark:ring-blue-700/70'
+        : 'text-stone-600 hover:bg-stone-100 hover:text-blue-900 dark:text-stone-300 dark:hover:bg-blue-900/40 dark:hover:text-stone-100'
+    }`
+  }
+
+  const normalizedPathname = pathname.replace(/^\/dashboard(?=\/|$)/, '') || '/'
+  const signInActive = normalizedPathname === '/sign-in' || normalizedPathname.startsWith('/sign-in/')
+  const signUpActive = normalizedPathname === '/sign-up' || normalizedPathname.startsWith('/sign-up/')
+
+  return (
+    <header className="sticky top-0 z-30 border-b border-stone-200/80 bg-white/78 backdrop-blur-xl shadow-[0_10px_30px_rgba(15,23,42,0.06)] transition-colors dark:border-blue-900 dark:bg-blue-950/76 dark:shadow-[0_10px_30px_rgba(0,0,0,0.28)]">
+      <div className="mx-auto flex max-w-7xl flex-col gap-1.5 px-4 py-1.5 sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:gap-3 lg:px-8 lg:py-2">
+        <a href={marketplaceUrl} className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-[0.14em] text-blue-950 dark:text-slate-100 sm:text-sm sm:tracking-[0.2em]">
+          <Image
+            src={DASHBOARD_LOGO_SRC}
+            alt="RentalDriveGo"
+            width={36}
+            height={36}
+            priority
+            className="h-8 w-8 rounded-md object-contain sm:h-9 sm:w-9"
+          />
+          <span>RentalDriveGo</span>
+        </a>
+
+        <div className="flex flex-col gap-1.5 lg:flex-row lg:items-center lg:gap-3">
+          <nav className="flex items-center gap-0.5 overflow-x-auto">
+            <a href={marketplaceUrl} className={navLinkClass(false)}>
+              {dict.home}
+            </a>
+            <a href={`${marketplaceUrl}/explore`} className={navLinkClass(false)}>
+              {dict.marketplace}
+            </a>
+            <a href={signInHref} className={navLinkClass(signInActive)} aria-current={signInActive ? 'page' : undefined}>
+              {dict.signIn}
+            </a>
+            <a
+              href={signUpHref}
+              aria-current={signUpActive ? 'page' : undefined}
+              className={`ml-1 rounded-full px-3 py-1 text-[12px] font-semibold transition sm:ml-2 sm:px-5 sm:py-2 sm:text-sm ${
+                signUpActive
+                  ? 'bg-orange-700 text-white ring-2 ring-orange-200 dark:bg-orange-300 dark:text-blue-950 dark:ring-orange-700/50'
+                  : 'bg-blue-900 text-white hover:bg-orange-700 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300'
+              }`}
+            >
+              {dict.createAccount}
+            </a>
+          </nav>
+          <div className="shrink-0">
+            <div className="flex items-center self-start rounded-full border border-stone-200/80 bg-white/95 p-0.5 shadow-sm dark:border-blue-800 dark:bg-blue-950/85 sm:self-auto sm:p-1">
+              <div ref={localeMenuRef} className="relative">
+                <button
+                  type="button"
+                  onClick={toggleLocaleMenu}
+                  className="inline-flex min-w-[4.75rem] items-center justify-center gap-1.5 rounded-full px-2.5 py-1.5 text-[11px] font-semibold text-stone-700 transition hover:bg-stone-100 dark:text-stone-200 dark:hover:bg-blue-900/40 sm:min-w-[5.25rem] sm:px-3 sm:py-2 sm:text-xs"
+                  aria-expanded={localeMenuOpen}
+                  aria-haspopup="menu"
+                >
+                  <span aria-hidden="true">{currentLanguage.flag}</span>
+                  <span>{currentLanguage.shortLabel}</span>
+                  <ChevronDown className={`h-3.5 w-3.5 transition-transform ${localeMenuOpen ? 'rotate-180' : ''}`} />
+                </button>
+                {localeMenuOpen ? (
+                  <div className={`absolute top-full z-30 mt-2 w-48 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${localeMenuPositionClass}`}>
+                    {availableLanguages.map((option) => (
+                      <button
+                        key={option.value}
+                        type="button"
+                        onClick={() => {
+                          setLanguage(option.value)
+                          setLocaleMenuOpen(false)
+                        }}
+                        className="flex w-full items-center gap-3 px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
+                      >
+                        <span aria-hidden="true">{option.flag}</span>
+                        <span>{option.shortLabel}</span>
+                      </button>
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+              <span className="mx-1 h-6 w-px bg-stone-200 dark:bg-stone-700" aria-hidden="true" />
+              <div ref={themeMenuRef} className="relative">
+                <button
+                  type="button"
+                  onClick={toggleThemeMenu}
+                  className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 transition hover:bg-stone-100 dark:hover:bg-blue-900/40 sm:px-2.5 sm:py-1.5"
+                  aria-expanded={themeMenuOpen}
+                  aria-haspopup="menu"
+                >
+                  <span className="rounded-full bg-blue-900 px-3 py-1 text-[11px] font-semibold text-white dark:bg-orange-400 dark:text-white sm:px-3.5 sm:py-1.5 sm:text-xs">
+                    {currentTheme.label}
+                  </span>
+                  <ChevronDown className={`h-3.5 w-3.5 text-stone-500 transition-transform dark:text-stone-400 ${themeMenuOpen ? 'rotate-180' : ''}`} />
+                </button>
+                {themeMenuOpen ? (
+                  <div className={`absolute top-full z-30 mt-2 w-44 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-stone-200 bg-white/95 text-left shadow-[0_20px_60px_rgba(0,0,0,0.12)] backdrop-blur dark:border-blue-900 dark:bg-blue-950/95 dark:shadow-[0_20px_60px_rgba(0,0,0,0.35)] ${localeMenuPositionClass}`}>
+                    {themeOptions
+                      .filter((option) => option.value !== theme)
+                      .map((option) => (
+                        <button
+                          key={option.value}
+                          type="button"
+                          onClick={() => {
+                            setTheme(option.value)
+                            setThemeMenuOpen(false)
+                          }}
+                          className="flex w-full items-center justify-between px-4 py-3 text-sm text-stone-700 transition hover:bg-stone-100 hover:text-blue-900 dark:text-stone-200 dark:hover:bg-blue-900/40 dark:hover:text-white"
+                        >
+                          <span>{option.label}</span>
+                        </button>
+                      ))}
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}

dashboard/src/components/public/PublicPageLayout.test.ts

@@ -0,0 +1,33 @@
+import React, { isValidElement } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('./PublicNavbar', () => ({ default: function MockPublicNavbar() { return React.createElement('mock-navbar') } }))
+vi.mock('./PublicFooter', () => ({ default: function MockPublicFooter() { return React.createElement('mock-footer') } }))
+
+import PublicPageLayout from './PublicPageLayout'
+
+function childTypes(node: React.ReactElement): string[] {
+  return React.Children.toArray(node.props.children).filter(isValidElement).map((child) => {
+    const type = child.type as any
+    return typeof type === 'string' ? type : type.displayName ?? type.name ?? 'anonymous'
+  })
+}
+
+describe('PublicPageLayout', () => {
+  it('provides reusable public chrome for sign-in and account creation pages', () => {
+    const layout = PublicPageLayout({ children: React.createElement('main') })
+
+    expect(childTypes(layout)).toEqual(['MockPublicNavbar', 'div', 'MockPublicFooter'])
+    expect(layout.props['data-public-page-layout']).toBe('true')
+  })
+
+  it('allows either public chrome region to be disabled independently', () => {
+    const layout = PublicPageLayout({
+      children: React.createElement('main'),
+      showNavbar: false,
+      showFooter: true,
+    })
+
+    expect(childTypes(layout)).toEqual(['div', 'MockPublicFooter'])
+  })
+})

dashboard/src/components/public/PublicPageLayout.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+import PublicFooter from './PublicFooter'
+import PublicNavbar from './PublicNavbar'
+
+export type PublicPageLayoutProps = {
+  children: ReactNode
+  embedded?: boolean
+  showNavbar?: boolean
+  showFooter?: boolean
+  className?: string
+  contentClassName?: string
+}
+
+/**
+ * Shared frame for dashboard pages that live outside the authenticated app shell.
+ * Use `embedded` for iframe/partner surfaces that must not render nested chrome.
+ */
+export default function PublicPageLayout({
+  children,
+  embedded = false,
+  showNavbar = true,
+  showFooter = true,
+  className = '',
+  contentClassName = '',
+}: PublicPageLayoutProps) {
+  return (
+    <div
+      className={`flex min-h-screen flex-col bg-[linear-gradient(180deg,#ffffff_0%,#f5f8ff_28%,#eef4ff_58%,#ffffff_100%)] text-blue-950 transition-colors dark:bg-[linear-gradient(180deg,#0f1f4a_0%,#112d6e_35%,#0d1f4f_100%)] dark:text-slate-100 ${className}`.trim()}
+      data-public-page-layout="true"
+      data-embedded={embedded ? 'true' : 'false'}
+    >
+      {!embedded && showNavbar ? <PublicNavbar /> : null}
+      <div className={`flex flex-1 flex-col ${contentClassName}`.trim()}>{children}</div>
+      {!embedded && showFooter ? <PublicFooter /> : null}
+    </div>
+  )
+}

dashboard/src/components/public/index.ts

@@ -0,0 +1,6 @@
+'use client'
+
+export { default as PublicFooter } from './PublicFooter'
+export { default as PublicNavbar } from './PublicNavbar'
+export { default as PublicPageLayout } from './PublicPageLayout'
+export type { PublicPageLayoutProps } from './PublicPageLayout'