anchor

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

@@ -1,14 +1,32 @@
 'use client'
 import { useHeaderTheme } from '@/providers/HeaderTheme'
 import React, { useEffect } from 'react'
+import { usePathname } from 'next/navigation'
 
 const PageClient: React.FC = () => {
-  /* Force the header to be dark mode while we have an image behind it */
   const { setHeaderTheme } = useHeaderTheme()
+  const pathname = usePathname()
 
   useEffect(() => {
     setHeaderTheme('light')
   }, [setHeaderTheme])
+
+  useEffect(() => {
+    const hash = window.location.hash
+    if (!hash) return
+
+    const tryScroll = (attempts = 0) => {
+      const el = document.querySelector(hash)
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth' })
+      } else if (attempts < 10) {
+        setTimeout(() => tryScroll(attempts + 1), 100)
+      }
+    }
+
+    tryScroll()
+  }, [pathname])
+
   return <React.Fragment />
 }
 

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

@@ -12,6 +12,7 @@ import { RenderHero } from '@/heros/RenderHero'
 import { generateMeta } from '@/utilities/generateMeta'
 import PageClient from './page.client'
 import { LivePreviewListener } from '@/components/LivePreviewListener'
+import ScrollToTop from '@/components/ScrollToTop'
 
 import HeroBackground from '@/components/HeroBackground'
 import HeroPage from '@/components/HeroPage'
@@ -28,7 +29,6 @@ type Args = {
   }>
 }
 
-// Add any slugs here that should use the landing page layout
 const LANDING_PAGE_SLUGS = ['home']
 
 export default async function Page({ params: paramsPromise }: Args) {
@@ -51,16 +51,15 @@ export default async function Page({ params: paramsPromise }: Args) {
 
   const { hero, layout } = page
 
-  // Landing page layout — canvas + hero section with border lines
   if (LANDING_PAGE_SLUGS.includes(decodedSlug)) {
     return (
       <HeroPage richText={hero.richText} links={hero.links}>
         <RenderBlocks blocks={layout} />
+        <ScrollToTop />
       </HeroPage>
     )
   }
 
-  // All other pages — canvas background + standard content
   return (
     <div style={{ position: 'relative', minHeight: '100vh' }}>
       <div style={{ position: 'fixed', inset: 0, zIndex: 0 }}>
@@ -73,6 +72,7 @@ export default async function Page({ params: paramsPromise }: Args) {
         <RenderHero {...hero} />
         <RenderBlocks blocks={layout} />
       </article>
+      <ScrollToTop />
     </div>
   )
 }
@@ -104,4 +104,4 @@ const queryPageBySlug = cache(async ({ slug }: { slug: string }) => {
   })
 
   return result.docs?.[0] || null
-})
+})