From 34fca1680cede61026a2158368dbeb33b075f1b1 Mon Sep 17 00:00:00 2001
From: Mackie <iwan.mackie@gmail.com>
Date: Sun, 24 May 2026 20:36:00 +0800
Subject: [PATCH] hero1

---
 package.json                       |  1 +
 pnpm-lock.yaml                     | 14 ++++++++++++++
 src/app/(frontend)/[slug]/page.tsx |  3 +++
 src/app/(frontend)/layout.tsx      |  1 +
 src/app/(frontend)/page.tsx        | 10 ----------
 src/hooks/useThemeMods.ts          | 12 ++++++++++++
 src/providers/index.tsx            | 15 +++++++++++++++
 7 files changed, 46 insertions(+), 10 deletions(-)
 create mode 100644 src/hooks/useThemeMods.ts

diff --git a/package.json b/package.json
index 41b8f3d..221a099 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 297200a..495883b 100644
--- a/pnpm-lock.yaml
+++ b/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
diff --git a/src/app/(frontend)/[slug]/page.tsx b/src/app/(frontend)/[slug]/page.tsx
index 1e274ff..e795625 100644
--- a/src/app/(frontend)/[slug]/page.tsx
+++ b/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({
diff --git a/src/app/(frontend)/layout.tsx b/src/app/(frontend)/layout.tsx
index 853877f..6138bbe 100644
--- a/src/app/(frontend)/layout.tsx
+++ b/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'
 
diff --git a/src/app/(frontend)/page.tsx b/src/app/(frontend)/page.tsx
index b6bddfb..2605900 100644
--- a/src/app/(frontend)/page.tsx
+++ b/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
 
diff --git a/src/hooks/useThemeMods.ts b/src/hooks/useThemeMods.ts
new file mode 100644
index 0000000..48ed5f9
--- /dev/null
+++ b/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 }
+}
\ No newline at end of file
diff --git a/src/providers/index.tsx b/src/providers/index.tsx
index 92276a8..8fc379b 100644
--- a/src/providers/index.tsx
+++ b/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>
+  )
+}