diff --git a/package.json b/package.json
index d38be79..0883285 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"embla-carousel-react": "^8.6.0",
"framer-motion": "^12.38.0",
"js-cookie": "^3.0.5",
+ "lucide-react": "^1.8.0",
"next": "16.1.6",
"next-intl": "^4.9.1",
"next-pwa": "^5.6.0",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 37957d5..bc0a13e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,19 +1,38 @@
-import type { Metadata } from "next";
-import "./globals.css";
+import { ClientAppProvider } from '@/providers/ClientAppProvider'
+import '@/styles/globals.css'
+import type { Metadata } from 'next'
export const metadata: Metadata = {
- title: "Offline App",
-};
+ title: 'Theater of dreams',
+}
export default function RootLayout({
children,
}: {
- children: React.ReactNode;
+ children: React.ReactNode
}) {
return (
-
- {children}
-
- );
-}
+
+
+ {/* Prevent theme flicker before hydration */}
+
+
+
+ {children}
+
+
+ )
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 267da67..67ed058 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,9 @@
+import ThemeToggle from '@/components/UI/ThemeToggle'
+
export default function Home() {
return (
+
Offline Next.js Template 🚀
This project was generated completely offline.
diff --git a/src/components/UI/ThemeToggle.tsx b/src/components/UI/ThemeToggle.tsx
new file mode 100644
index 0000000..55ccfd7
--- /dev/null
+++ b/src/components/UI/ThemeToggle.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+export default function ThemeToggle() {
+ const { theme, setTheme } = useTheme()
+
+ return (
+
+ )
+}
diff --git a/src/providers/ClientAppProvider.tsx b/src/providers/ClientAppProvider.tsx
new file mode 100644
index 0000000..bd626cc
--- /dev/null
+++ b/src/providers/ClientAppProvider.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import { AnimatePresence, motion } from 'framer-motion'
+import { ThemeProvider } from 'next-themes'
+import { useEffect, useState } from 'react'
+
+export function ClientAppProvider({ children }: { children: React.ReactNode }) {
+ const [mounted, setMounted] = useState(false)
+
+ // wait for hydration
+ useEffect(() => {
+ setMounted(true)
+ }, [])
+
+ return (
+
+
+ {!mounted ? (
+
+ ) : (
+
+ {children}
+
+ )}
+
+
+ )
+}
diff --git a/src/app/globals.css b/src/styles/globals.css
similarity index 85%
rename from src/app/globals.css
rename to src/styles/globals.css
index a0c6ee3..c6e4743 100644
--- a/src/app/globals.css
+++ b/src/styles/globals.css
@@ -10,6 +10,10 @@
* {
-ms-overflow-style: none;
scrollbar-width: none;
+ transition:
+ background-color 0.3s ease,
+ color 0.3s ease,
+ border-color 0.3s ease;
}
*::-webkit-scrollbar {
diff --git a/tsconfig.json b/tsconfig.json
index 95113d6..5471d0d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "ES2017",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
+ "lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -23,12 +19,8 @@
}
],
"paths": {
- "@/*": [
- "./src/*"
- ],
- "&/*": [
- "./public/*"
- ]
+ "@/*": ["./src/*"],
+ "&/*": ["./public/*"]
}
},
"include": [
@@ -38,7 +30,5 @@
".next/types/**/*.ts",
".next/dev/types/**/*.ts"
],
- "exclude": [
- "node_modules"
- ]
+ "exclude": ["node_modules"]
}