hero1

package.json

@@ -48,6 +48,7 @@
     "lucide-react": "0.563.0",
     "next": "16.2.6",
     "next-sitemap": "^4.2.3",
+    "next-themes": "^0.4.6",
     "payload": "3.84.1",
     "prism-react-renderer": "^2.3.1",
     "react": "19.2.6",

pnpm-lock.yaml

@@ -86,6 +86,9 @@ importers:
       next-sitemap:
         specifier: ^4.2.3
         version: 4.2.3(next@16.2.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(sass@1.77.4))
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       payload:
         specifier: 3.84.1
         version: 3.84.1(graphql@16.14.0)(typescript@5.7.3)
@@ -3870,6 +3873,12 @@ packages:
     peerDependencies:
       next: '*'
 
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   next@16.2.6:
     resolution: {integrity: sha512-qOVgKJg1+At15NpeUP+eJgCHvTCgXsogweq87Ri/Ix7PkqQHg4sdaXmSFqKlgaIXE4kW0g25LE68W87UANlHtw==}
     engines: {node: '>=20.9.0'}
@@ -9011,6 +9020,11 @@ snapshots:
       minimist: 1.2.8
       next: 16.2.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(sass@1.77.4)
 
+  next-themes@0.4.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   next@16.2.6(@babel/core@7.29.0)(@playwright/test@1.58.2)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(sass@1.77.4):
     dependencies:
       '@next/env': 16.2.6

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

@@ -13,6 +13,9 @@ import { generateMeta } from '@/utilities/generateMeta'
 import PageClient from './page.client'
 import { LivePreviewListener } from '@/components/LivePreviewListener'
 
+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({

src/app/(frontend)/layout.tsx

@@ -13,6 +13,7 @@ import { InitTheme } from '@/providers/Theme/InitTheme'
 import { mergeOpenGraph } from '@/utilities/mergeOpenGraph'
 import { draftMode } from 'next/headers'
 
+
 import './globals.css'
 import { getServerSideURL } from '@/utilities/getURL'
 

src/app/(frontend)/page.tsx

@@ -1,15 +1,5 @@
 import PageTemplate, { generateMetadata } from './[slug]/page'
 
-import HeroBackground from "@/components/HeroBackground";
-
-export default function Page() {
-  return (
-    <div style={{ width: "100vw", height: "100vh" }}>
-      <HeroBackground />
-    </div>
-  );
-}
-
 
 export default PageTemplate
 

src/hooks/useThemeMods.ts

@@ -0,0 +1,12 @@
+'use client'
+
+import { useTheme } from '@/providers/Theme'
+
+export function useThemeMode() {
+  const { theme, setTheme } = useTheme()
+
+  const isDark = theme !== 'light'
+  const toggle = () => setTheme(isDark ? 'light' : 'dark')
+
+  return { isDark, toggle }
+}

src/providers/index.tsx

@@ -1,8 +1,11 @@
+'use client'
 import React from 'react'
 
 import { HeaderThemeProvider } from './HeaderTheme'
 import { ThemeProvider } from './Theme'
 
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+
 export const Providers: React.FC<{
   children: React.ReactNode
 }> = ({ children }) => {
@@ -12,3 +15,15 @@ export const Providers: React.FC<{
     </ThemeProvider>
   )
 }
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="dark"
+      enableSystem={false}
+    >
+      {children}
+    </NextThemesProvider>
+  )
+}