redesign the homepage

storefront/src/components/public/SiteFooter.tsx

@@ -0,0 +1,4 @@
+'use client'
+
+// Public marketing footer used by the homepage and other storefront pages.
+export { default } from '@/components/MarketplaceFooter'

storefront/src/components/public/SiteNavbar.tsx

@@ -0,0 +1,4 @@
+'use client'
+
+// Public marketing navbar used by the homepage and other storefront pages.
+export { default } from '@/components/MarketplaceHeader'

storefront/src/components/public/SitePageLayout.test.ts

@@ -0,0 +1,15 @@
+import fs from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+describe('storefront public page layout', () => {
+  it('keeps the navbar and footer in reusable component modules', () => {
+    const layoutPath = fileURLToPath(new URL('./SitePageLayout.tsx', import.meta.url))
+    const source = fs.readFileSync(layoutPath, 'utf8')
+
+    expect(source).toContain("import SiteNavbar from './SiteNavbar'")
+    expect(source).toContain("import SiteFooter from './SiteFooter'")
+    expect(source).toContain('<SiteNavbar')
+    expect(source).toContain('<SiteFooter')
+  })
+})

storefront/src/components/public/SitePageLayout.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+import SiteFooter from './SiteFooter'
+import SiteNavbar from './SiteNavbar'
+import {
+  getFooterContent,
+  localeOptions,
+  useMarketplacePreferences,
+} from '@/components/MarketplaceShell'
+import { resolveBrowserAppUrl } from '@/lib/appUrls'
+
+export default function SitePageLayout({ children }: { children: ReactNode }) {
+  const { language, theme, dict, companyName, setLanguage, setTheme } = useMarketplacePreferences()
+  const dashboardUrl = resolveBrowserAppUrl(
+    process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard',
+  )
+  const footerContent = getFooterContent(language)
+  const available = localeOptions.filter((option) => option.value !== language)
+  const current = localeOptions.find((option) => option.value === language) ?? localeOptions[0]
+
+  return (
+    <div className="site-page flex min-h-screen flex-col" data-site-page-layout="true">
+      <SiteNavbar
+        dict={dict}
+        theme={theme}
+        setTheme={setTheme}
+        companyName={companyName}
+        dashboardUrl={dashboardUrl}
+        currentLanguage={{
+          value: current.value,
+          flag: current.flag,
+          shortLabel: current.value.toUpperCase(),
+        }}
+        localeOptions={available.map((option) => ({
+          value: option.value,
+          flag: option.flag,
+          shortLabel: option.value.toUpperCase(),
+        }))}
+        onSelectLanguage={setLanguage}
+      />
+      <div className="flex flex-1 flex-col">
+        <div className="flex-1">{children}</div>
+        <SiteFooter
+          primaryItems={footerContent.primary}
+          secondaryItems={footerContent.secondary}
+          localeLabel={footerContent.localeLabel}
+          rightsLabel={footerContent.rightsLabel}
+          localeOptions={available}
+          currentLocale={current}
+          onSelectLanguage={setLanguage}
+        />
+      </div>
+    </div>
+  )
+}

storefront/src/components/public/index.ts

@@ -0,0 +1,5 @@
+'use client'
+
+export { default as SiteFooter } from './SiteFooter'
+export { default as SiteNavbar } from './SiteNavbar'
+export { default as SitePageLayout } from './SitePageLayout'