diff --git a/app/favicon.ico b/app/(root)/favicon.ico similarity index 100% rename from app/favicon.ico rename to app/(root)/favicon.ico diff --git a/app/(root)/globals.css b/app/(root)/globals.css new file mode 100644 index 0000000..aeaddc5 --- /dev/null +++ b/app/(root)/globals.css @@ -0,0 +1,38 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer utilities { + .nav__link { + @apply relative text-base font-medium w-fit block after:block after:content-[''] after:absolute after:h-[3px] after:bg-pink-600 after:w-full after:scale-x-0 after:hover:scale-x-100 after:transition after:duration-300 after:origin-right; + } +} + +/* Global theme transition */ +.transition-theme { + transition: background-color 0.7s ease, color 0.7s ease; +} + +/* Light mode */ +/* Light mode */ +[data-theme="light"] { + --primary-bg: #FAFAFA; /* Soft off-white background */ + --secondary-bg: #F5F5F7; /* Gentle off-white for subtle separation */ + --primary-text: #2E2E2E; /* Dark grey text for clear readability */ + --secondary-text: #595959; /* Medium grey for less prominent text */ + --nav-bg: #F8F8F8; /* Light grey navigation background */ + --footer-bg: #E0E0E0; /* Slightly darker grey for footer contrast */ +} + +/* Dark mode */ +[data-theme="dark"] { + --primary-bg: #2C2C2C; /* Modern dark grey background */ + --secondary-bg: #333333; /* A touch lighter grey for section differentiation */ + --primary-text: #E0E0E0; /* Light grey text for optimal readability */ + --secondary-text: #B0B0B0; /* Medium grey for secondary text elements */ + --nav-bg: #272727; /* Subtle variation for the navigation area */ + --footer-bg: #242424; /* Deep grey footer to add visual depth */ +} + + + diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx new file mode 100644 index 0000000..4cc8111 --- /dev/null +++ b/app/(root)/layout.tsx @@ -0,0 +1,30 @@ +import type {Metadata} from "next"; +import "./globals.css"; + +import Nav from "@/components/Home/Navbar/Nav"; +import Footer from "@/components/Home/Footer/Footer"; +import {ThemeProvider} from "@/components/provider/ThemeProvider"; +import React from "react"; + +export const metadata: Metadata = { + title: "Rhein Software", + description: "Rhein Software Development", +}; + +export default function RootLayout({ + children, + }: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + + +