fixing platform admin

apps/marketplace/src/components/MarketplaceShell.tsx

@@ -0,0 +1,264 @@
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { usePathname, useRouter } from 'next/navigation'
+import { MARKETPLACE_LANGUAGE_COOKIE, isMarketplaceLanguage, type MarketplaceLanguage } from '@/lib/i18n'
+
+type Theme = 'light' | 'dark'
+
+type Dictionary = {
+  marketplace: string
+  companyWorkspace: string
+  platformOperations: string
+  explore: string
+  ownerSignIn: string
+  language: string
+  theme: string
+  light: string
+  dark: string
+  preferences: string
+}
+
+const dictionaries: Record<MarketplaceLanguage, Dictionary> = {
+  en: {
+    marketplace: 'Marketplace',
+    companyWorkspace: 'Company Workspace',
+    platformOperations: 'Platform Operations',
+    explore: 'Explore',
+    ownerSignIn: 'Owner sign in',
+    language: 'Language',
+    theme: 'Theme',
+    light: 'Light',
+    dark: 'Dark',
+    preferences: 'Marketplace preferences',
+  },
+  fr: {
+    marketplace: 'Marketplace',
+    companyWorkspace: 'Espace entreprise',
+    platformOperations: 'Opérations plateforme',
+    explore: 'Explorer',
+    ownerSignIn: 'Connexion proprietaire',
+    language: 'Langue',
+    theme: 'Mode',
+    light: 'Clair',
+    dark: 'Sombre',
+    preferences: 'Préférences marketplace',
+  },
+  ar: {
+    marketplace: 'السوق',
+    companyWorkspace: 'مساحة الشركة',
+    platformOperations: 'عمليات المنصة',
+    explore: 'استكشاف',
+    ownerSignIn: 'دخول المالك',
+    language: 'اللغة',
+    theme: 'الوضع',
+    light: 'فاتح',
+    dark: 'داكن',
+    preferences: 'تفضيلات السوق',
+  },
+}
+
+type PreferencesContextValue = {
+  language: MarketplaceLanguage
+  theme: Theme
+  dict: Dictionary
+  setLanguage: (language: MarketplaceLanguage) => void
+  setTheme: (theme: Theme) => void
+}
+
+const PreferencesContext = createContext<PreferencesContextValue | null>(null)
+
+function SegmentedControl<T extends string>({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string
+  value: T
+  options: { value: T; label: string }[]
+  onChange: (value: T) => void
+}) {
+  return (
+    <div className="flex items-center gap-2 rounded-full border border-stone-200/70 bg-white/90 px-2 py-1 shadow-sm dark:border-stone-700 dark:bg-stone-900/80">
+      <span className="px-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-stone-500 dark:text-stone-400">
+        {label}
+      </span>
+      <div className="flex items-center gap-1">
+        {options.map((option) => {
+          const active = option.value === value
+          return (
+            <button
+              key={option.value}
+              type="button"
+              onClick={() => onChange(option.value)}
+              className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
+                active
+                  ? 'bg-stone-900 text-white dark:bg-amber-400 dark:text-stone-950'
+                  : 'text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-800'
+              }`}
+            >
+              {option.label}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export function useMarketplacePreferences() {
+  const context = useContext(PreferencesContext)
+  if (!context) throw new Error('useMarketplacePreferences must be used within MarketplaceShell')
+  return context
+}
+
+export default function MarketplaceShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname()
+  const router = useRouter()
+  const dashboardUrl = process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001'
+  const [language, setLanguage] = useState<MarketplaceLanguage>('en')
+  const [theme, setTheme] = useState<Theme>('light')
+  const [hydrated, setHydrated] = useState(false)
+  const previousLanguage = useRef<MarketplaceLanguage>('en')
+
+  useEffect(() => {
+    const storedLanguage = window.localStorage.getItem('marketplace-language')
+    const storedTheme = window.localStorage.getItem('marketplace-theme') as Theme | null
+
+    if (isMarketplaceLanguage(storedLanguage)) {
+      setLanguage(storedLanguage)
+    }
+
+    if (storedTheme === 'light' || storedTheme === 'dark') {
+      setTheme(storedTheme)
+    }
+
+    setHydrated(true)
+  }, [])
+
+  useEffect(() => {
+    document.documentElement.lang = language
+    document.documentElement.dir = language === 'ar' ? 'rtl' : 'ltr'
+    document.documentElement.classList.toggle('dark', theme === 'dark')
+    document.body.dataset.theme = theme
+    window.localStorage.setItem('marketplace-language', language)
+    window.localStorage.setItem('marketplace-theme', theme)
+    document.cookie = `${MARKETPLACE_LANGUAGE_COOKIE}=${language}; path=/; max-age=31536000; SameSite=Lax`
+
+    if (hydrated && previousLanguage.current !== language) {
+      router.refresh()
+    }
+    previousLanguage.current = language
+  }, [hydrated, language, router, theme])
+
+  const dict = dictionaries[language]
+  const isEmbeddedWorkspace =
+    pathname === '/company-workspace' ||
+    pathname === '/platform-operations' ||
+    pathname === '/branded-website'
+  const hideHeader = pathname === '/company-workspace'
+  const value = useMemo(
+    () => ({ language, theme, dict, setLanguage, setTheme }),
+    [dict, language, theme],
+  )
+
+  return (
+    <PreferencesContext.Provider value={value}>
+      <div className="min-h-screen bg-stone-50 text-stone-900 transition-colors dark:bg-stone-950 dark:text-stone-100">
+        {!hideHeader ? (
+          <header className="sticky top-0 z-50 border-b border-stone-200 bg-white/80 backdrop-blur-md transition-colors dark:border-stone-800 dark:bg-stone-950/80">
+            <div className="shell flex min-h-14 flex-col gap-3 py-3 lg:flex-row lg:items-center lg:justify-between lg:py-2">
+              <div className="flex items-center justify-between gap-4">
+                <Link href="/" className="flex items-center gap-3 text-sm font-bold uppercase tracking-[0.2em] text-stone-900 dark:text-stone-100">
+                  <Image
+                    src="/rentalcardrive.png"
+                    alt="RentalDriveGo"
+                    width={36}
+                    height={36}
+                    className="h-9 w-9 rounded-md object-contain"
+                  />
+                  <span>RentalDriveGo</span>
+                </Link>
+              </div>
+
+              <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+                <nav className="flex items-center gap-1 overflow-x-auto">
+                  <Link
+                    href="/"
+                    className="rounded-full px-4 py-2 text-sm font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100"
+                  >
+                    {dict.marketplace}
+                  </Link>
+                  <Link
+                    href="/company-workspace"
+                    className="rounded-full px-4 py-2 text-sm font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100"
+                  >
+                    {dict.companyWorkspace}
+                  </Link>
+                  <Link
+                    href="/platform-operations"
+                    className="rounded-full px-4 py-2 text-sm font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100"
+                  >
+                    {dict.platformOperations}
+                  </Link>
+                  <Link
+                    href="/explore"
+                    className="rounded-full px-4 py-2 text-sm font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100"
+                  >
+                    {dict.explore}
+                  </Link>
+                  <Link
+                    href={`${dashboardUrl}/sign-in`}
+                    className="ml-2 rounded-full bg-stone-900 px-5 py-2 text-sm font-semibold text-white transition hover:bg-stone-700 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300"
+                  >
+                    {dict.ownerSignIn}
+                  </Link>
+                </nav>
+              </div>
+            </div>
+          </header>
+        ) : null}
+
+        <div className="flex min-h-[calc(100vh-57px)] flex-col">
+          <div className="flex-1">
+            {children}
+          </div>
+
+          {!isEmbeddedWorkspace ? (
+            <footer className="border-t border-stone-200 bg-white/90 px-4 py-4 backdrop-blur-md transition-colors dark:border-stone-800 dark:bg-stone-950/90">
+              <div className="shell flex flex-col items-center justify-between gap-3 lg:flex-row">
+                <p className="text-xs font-medium uppercase tracking-[0.16em] text-stone-400 dark:text-stone-500">
+                  {dict.preferences}
+                </p>
+                <div className="flex flex-col items-center gap-3 sm:flex-row">
+                  <SegmentedControl
+                    label={dict.language}
+                    value={language}
+                    options={[
+                      { value: 'en', label: 'EN' },
+                      { value: 'fr', label: 'FR' },
+                      { value: 'ar', label: 'AR' },
+                    ]}
+                    onChange={setLanguage}
+                  />
+                  <SegmentedControl
+                    label={dict.theme}
+                    value={theme}
+                    options={[
+                      { value: 'light', label: dict.light },
+                      { value: 'dark', label: dict.dark },
+                    ]}
+                    onChange={setTheme}
+                  />
+                </div>
+              </div>
+            </footer>
+          ) : null}
+        </div>
+      </div>
+    </PreferencesContext.Provider>
+  )
+}

apps/marketplace/src/components/WorkspaceFrame.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { usePathname } from 'next/navigation'
+import { useMarketplacePreferences } from './MarketplaceShell'
+
+type FrameId = 'dashboard' | 'admin' | 'public-site'
+
+const frameConfig: Record<FrameId, { label: string; port: number; path: string }> = {
+  dashboard: {
+    label: 'Company Workspace',
+    port: 3001,
+    path: '/',
+  },
+  admin: {
+    label: 'Platform Operations',
+    port: 3002,
+    path: '/',
+  },
+  'public-site': {
+    label: 'Branded Website',
+    port: 3003,
+    path: '/',
+  },
+}
+
+function withPort(port: number, path: string) {
+  if (typeof window === 'undefined') return path
+
+  const url = new URL(window.location.href)
+  url.port = String(port)
+  url.pathname = path
+  url.search = ''
+  url.hash = ''
+  return url.toString()
+}
+
+export default function WorkspaceFrame({ target }: { target: FrameId }) {
+  const pathname = usePathname()
+  const { language } = useMarketplacePreferences()
+  const [src, setSrc] = useState('')
+  const config = frameConfig[target]
+  const fillViewport = pathname === '/company-workspace'
+  const frameHeight = fillViewport ? '100vh' : 'calc(100vh - 56px)'
+  const loadingLabel = {
+    en: 'Loading',
+    fr: 'Chargement de',
+    ar: 'جارٍ تحميل',
+  }[language]
+
+  useEffect(() => {
+    setSrc(withPort(config.port, config.path))
+  }, [config.path, config.port])
+
+  return (
+    <main className="bg-stone-950" style={{ minHeight: frameHeight }}>
+      {src ? (
+        <iframe
+          title={config.label}
+          src={src}
+          className="w-full border-0 bg-white"
+          style={{ height: frameHeight }}
+        />
+      ) : (
+        <div className="flex items-center justify-center text-sm text-stone-300" style={{ height: frameHeight }}>
+          {loadingLabel} {config.label}…
+        </div>
+      )}
+    </main>
+  )
+}

apps/marketplace/src/components/WorkspaceTabs.tsx

@@ -0,0 +1,233 @@
+'use client'
+
+import { useMarketplacePreferences } from '@/components/MarketplaceShell'
+import Image from 'next/image'
+import Link from 'next/link'
+
+export default function WorkspaceTabs() {
+  const { language, theme } = useMarketplacePreferences()
+  const dashboardUrl = process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001'
+
+  const copy = {
+    en: {
+      badge: 'Unified Workspace',
+      title: 'One launch point on port 3000 for marketplace discovery, company operations, and platform admin work.',
+      intro:
+        'The apps still run as separate Next.js surfaces internally, but the navbar now takes you straight to each workspace area without hunting for ports.',
+      sectionBadge: 'RentalDriveGo Marketplace',
+      sectionTitle: 'Browse local rental fleets without losing the company behind the wheel.',
+      sectionBodyA: 'Discovery happens here. Booking and payment happen on each rental company\'s own branded site.',
+      sectionBodyB: 'Customers only reach that branded booking site after selecting a vehicle from a company\'s fleet.',
+      exploreVehicles: 'Explore vehicles',
+      viewPricing: 'View pricing',
+      nowServing: 'Now serving',
+      promoTitle: 'Discovery, pricing, owner sign-in, and booking entry all stay anchored on the marketplace surface.',
+      promoBody:
+        'Company Workspace and Platform Operations stay available from the navbar, while branded booking starts after a renter picks a vehicle.',
+      customerPaths: 'Customer Paths',
+      ownerSignIn: 'Owner sign in',
+      pricing: 'Pricing',
+      workspaceAreas: 'Workspace Areas',
+      workspaceA: 'Company Workspace for fleet operations, team, billing, and analytics.',
+      workspaceB: 'Platform Operations for platform-level support and tenant oversight.',
+      workspaceC: 'Branded booking handoff begins only after a renter chooses a specific vehicle.',
+    },
+    fr: {
+      badge: 'Espace unifie',
+      title: 'Un point d\'entree sur le port 3000 pour la decouverte marketplace, les operations entreprise et l\'administration plateforme.',
+      intro:
+        'Les applications restent des surfaces Next.js separees en interne, mais la barre de navigation mene directement vers chaque espace sans changer de port manuellement.',
+      sectionBadge: 'Marketplace RentalDriveGo',
+      sectionTitle: 'Parcourez les flottes locales sans perdre l\'identite de l\'entreprise qui gere la location.',
+      sectionBodyA: 'La decouverte commence ici. La reservation et le paiement se font sur le site de reservation propre a chaque entreprise.',
+      sectionBodyB: 'Les clients accedent a ce site de reservation seulement apres avoir choisi un vehicule dans la flotte d\'une entreprise.',
+      exploreVehicles: 'Explorer les vehicules',
+      viewPricing: 'Voir les tarifs',
+      nowServing: 'Disponible',
+      promoTitle: 'La decouverte, les tarifs, la connexion proprietaire et l\'entree vers la reservation restent ancrees dans la marketplace.',
+      promoBody:
+        'Espace entreprise et Operations plateforme restent accessibles depuis la navigation, tandis que la reservation de marque commence apres le choix d\'un vehicule.',
+      customerPaths: 'Parcours client',
+      ownerSignIn: 'Connexion proprietaire',
+      pricing: 'Tarifs',
+      workspaceAreas: 'Espaces de travail',
+      workspaceA: 'Espace entreprise pour la flotte, l\'equipe, la facturation et l\'analyse.',
+      workspaceB: 'Operations plateforme pour le support global et la supervision des tenants.',
+      workspaceC: 'Le transfert vers la reservation de marque commence seulement apres le choix d\'un vehicule precis.',
+    },
+    ar: {
+      badge: 'مساحة موحدة',
+      title: 'نقطة دخول واحدة على المنفذ 3000 لاكتشاف السوق وعمليات الشركات وإدارة المنصة.',
+      intro:
+        'ما زالت التطبيقات تعمل كأسطح Next.js منفصلة داخلياً، لكن شريط التنقل ينقلك مباشرة إلى كل مساحة عمل بدون البحث عن المنافذ.',
+      sectionBadge: 'سوق RentalDriveGo',
+      sectionTitle: 'تصفح أساطيل التأجير المحلية من دون فقدان هوية الشركة التي تدير الحجز.',
+      sectionBodyA: 'الاكتشاف يبدأ هنا. الحجز والدفع يتمان على موقع الحجز الخاص بكل شركة.',
+      sectionBodyB: 'لا يصل العميل إلى موقع الحجز الخاص بالشركة إلا بعد اختيار سيارة من أسطول تلك الشركة.',
+      exploreVehicles: 'استكشف السيارات',
+      viewPricing: 'عرض الأسعار',
+      nowServing: 'المتاح الآن',
+      promoTitle: 'الاكتشاف والأسعار وتسجيل دخول المالك وبداية الحجز تبقى كلها داخل واجهة السوق.',
+      promoBody:
+        'تبقى مساحة الشركة وعمليات المنصة متاحتين من شريط التنقل، بينما يبدأ الحجز المرتبط بالعلامة التجارية بعد اختيار المستأجر لسيارة.',
+      customerPaths: 'مسارات العملاء',
+      ownerSignIn: 'دخول المالك',
+      pricing: 'الأسعار',
+      workspaceAreas: 'مساحات العمل',
+      workspaceA: 'مساحة الشركة لإدارة الأسطول والفريق والفوترة والتحليلات.',
+      workspaceB: 'عمليات المنصة للدعم والإشراف على المستأجرين على مستوى المنصة.',
+      workspaceC: 'الانتقال إلى موقع الحجز الخاص بالشركة يبدأ فقط بعد اختيار سيارة محددة.',
+    },
+  }[language]
+
+  return (
+    <main className={`min-h-screen transition-colors ${
+      theme === 'dark'
+        ? 'bg-[radial-gradient(circle_at_top,#451a03,transparent_28%),linear-gradient(180deg,#0c0a09,#111827)]'
+        : 'bg-[radial-gradient(circle_at_top,#fef3c7,transparent_28%),linear-gradient(180deg,#fafaf9,white)]'
+    }`}>
+      <div className="shell py-16 sm:py-20">
+        <div className="max-w-4xl">
+          <div className="flex items-center gap-4">
+            <Link href="/" aria-label="RentalDriveGo home">
+              <Image
+                src="/rentalcardrive.png"
+                alt="RentalDriveGo"
+                width={72}
+                height={72}
+                className={`h-16 w-16 rounded-2xl object-contain p-1 shadow-sm ${
+                  theme === 'dark' ? 'border border-amber-500/40 bg-stone-900' : 'border border-amber-200 bg-white'
+                }`}
+              />
+            </Link>
+            <p className={`text-sm font-semibold uppercase tracking-[0.24em] ${
+              theme === 'dark' ? 'text-amber-300' : 'text-amber-700'
+            }`}>
+              {copy.badge}
+            </p>
+          </div>
+          <h1 className={`mt-5 text-4xl font-black tracking-tight sm:text-6xl ${
+            theme === 'dark' ? 'text-stone-100' : 'text-stone-900'
+          }`}>
+            {copy.title}
+          </h1>
+          <p className={`mt-6 max-w-3xl text-lg leading-8 ${
+            theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
+          }`}>
+            {copy.intro}
+          </p>
+        </div>
+
+        <section className={`mt-10 overflow-hidden rounded-[2rem] border shadow-xl transition-colors ${
+          theme === 'dark'
+            ? 'border-stone-800 bg-stone-900 shadow-black/20'
+            : 'border-stone-200 bg-white shadow-stone-200/40'
+        }`}>
+          <div className={`px-6 py-6 ${theme === 'dark' ? 'border-b border-stone-800' : 'border-b border-stone-200'}`}>
+            <p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
+              theme === 'dark' ? 'text-amber-300' : 'text-amber-700'
+            }`}>
+              {copy.sectionBadge}
+            </p>
+            <div className="mt-3 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+              <div className="max-w-3xl">
+                <h2 className={`text-2xl font-black tracking-tight ${
+                  theme === 'dark' ? 'text-stone-100' : 'text-stone-900'
+                }`}>
+                  {copy.sectionTitle}
+                </h2>
+                <p className={`mt-3 text-sm leading-7 ${
+                  theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
+                }`}>
+                  {copy.sectionBodyA}
+                </p>
+                <p className={`mt-3 text-sm leading-7 ${
+                  theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
+                }`}>
+                  {copy.sectionBodyB}
+                </p>
+              </div>
+
+              <div className="flex flex-wrap gap-3">
+                <Link
+                  href="/explore"
+                  className={`rounded-full px-5 py-2.5 text-sm font-semibold transition ${
+                    theme === 'dark'
+                      ? 'bg-amber-400 text-stone-950 hover:bg-amber-300'
+                      : 'bg-stone-900 text-white hover:bg-stone-700'
+                  }`}
+                >
+                  {copy.exploreVehicles}
+                </Link>
+                <Link
+                  href="/pricing"
+                  className={`rounded-full border px-5 py-2.5 text-sm font-semibold transition ${
+                    theme === 'dark'
+                      ? 'border-stone-700 text-stone-200 hover:border-stone-500 hover:bg-stone-800'
+                      : 'border-stone-300 text-stone-700 hover:border-stone-400 hover:bg-stone-50'
+                  }`}
+                >
+                  {copy.viewPricing}
+                </Link>
+              </div>
+            </div>
+          </div>
+
+          <div className={`grid gap-6 px-6 py-8 lg:grid-cols-[1.4fr_0.9fr] ${
+            theme === 'dark' ? 'bg-stone-950' : 'bg-stone-50'
+          }`}>
+            <div className="rounded-[1.5rem] bg-[linear-gradient(135deg,#1c1917,#44403c)] p-8 text-white">
+              <p className="text-xs font-semibold uppercase tracking-[0.24em] text-amber-300">{copy.nowServing}</p>
+              <h3 className="mt-4 text-3xl font-black tracking-tight">
+                {copy.promoTitle}
+              </h3>
+              <p className="mt-4 max-w-2xl text-sm leading-7 text-stone-200">
+                {copy.promoBody}
+              </p>
+            </div>
+
+            <div className="grid gap-4">
+              <div className={`rounded-[1.5rem] border p-5 ${
+                theme === 'dark' ? 'border-stone-800 bg-stone-900' : 'border-stone-200 bg-white'
+              }`}>
+                <p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
+                  theme === 'dark' ? 'text-stone-400' : 'text-stone-500'
+                }`}>{copy.customerPaths}</p>
+                <div className="mt-4 flex flex-wrap gap-3">
+                  <Link href="/explore" className="rounded-full bg-amber-500 px-4 py-2 text-sm font-semibold text-white">
+                    {copy.exploreVehicles}
+                  </Link>
+                  <Link className={`rounded-full border px-4 py-2 text-sm font-semibold ${
+                    theme === 'dark' ? 'border-stone-700 text-stone-200' : 'border-stone-300 text-stone-700'
+                  }`} href={`${dashboardUrl}/sign-in`}>
+                    {copy.ownerSignIn}
+                  </Link>
+                  <Link className={`rounded-full border px-4 py-2 text-sm font-semibold ${
+                    theme === 'dark' ? 'border-stone-700 text-stone-200' : 'border-stone-300 text-stone-700'
+                  }`} href="/pricing">
+                    {copy.pricing}
+                  </Link>
+                </div>
+              </div>
+
+              <div className={`rounded-[1.5rem] border p-5 ${
+                theme === 'dark' ? 'border-stone-800 bg-stone-900' : 'border-stone-200 bg-white'
+              }`}>
+                <p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
+                  theme === 'dark' ? 'text-stone-400' : 'text-stone-500'
+                }`}>{copy.workspaceAreas}</p>
+                <ul className={`mt-4 space-y-3 text-sm ${
+                  theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
+                }`}>
+                  <li>{copy.workspaceA}</li>
+                  <li>{copy.workspaceB}</li>
+                  <li>{copy.workspaceC}</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+  )
+}