hero

src/app/(frontend)/[slug]/page.tsx

@@ -13,6 +13,10 @@ import { generateMeta } from '@/utilities/generateMeta'
 import PageClient from './page.client'
 import { LivePreviewListener } from '@/components/LivePreviewListener'
 
+// ADD these two lines after the LivePreviewListener import:
+import HeroBackground from '@/components/HeroBackground'
+import HeroPage from '@/components/HeroPage'
+
 export async function generateStaticParams() {
   const payload = await getPayload({ config: configPromise })
   const pages = await payload.find({
@@ -66,17 +70,24 @@ export default async function Page({ params: paramsPromise }: Args) {
 
   const { hero, layout } = page
 
+// REPLACE WITH:
+  if (decodedSlug === 'home') {
+    return <HeroPage />
+  }
+
   return (
-    <article className="pt-16 pb-24">
-      <PageClient />
-      {/* Allows redirects for valid pages too */}
-      <PayloadRedirects disableNotFound url={url} />
-
-      {draft && <LivePreviewListener />}
-
-      <RenderHero {...hero} />
-      <RenderBlocks blocks={layout} />
-    </article>
+    <div style={{ position: 'relative', minHeight: '100vh' }}>
+      <div style={{ position: 'fixed', inset: 0, zIndex: 0 }}>
+        <HeroBackground showToggle={false} />
+      </div>
+      <article className="pt-16 pb-24" style={{ position: 'relative', zIndex: 1 }}>
+        <PageClient />
+        <PayloadRedirects disableNotFound url={url} />
+        {draft && <LivePreviewListener />}
+        <RenderHero {...hero} />
+        <RenderBlocks blocks={layout} />
+      </article>
+    </div>
   )
 }