From 37fbc6ae25b988ade99e3a47d57ffe91e64859f8 Mon Sep 17 00:00:00 2001
From: DeathKaioken <alex.ibrahim@eitk.com>
Date: Fri, 3 Oct 2025 19:56:36 +0200
Subject: [PATCH] beautify: added Light mode

---
 src/app/page.tsx | 98 ++++++++++++++++++++++++++++++++----------------
 1 file changed, 66 insertions(+), 32 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ef79253..216a745 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 import { Dialog, DialogPanel } from '@headlessui/react'
-import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
+import { Bars3Icon, XMarkIcon, SunIcon, MoonIcon } from '@heroicons/react/24/outline'
 
 const navigation = [
   { name: 'Shop', href: '/shop' },
@@ -13,18 +13,23 @@ const navigation = [
 
 export default function Example() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [isDarkMode, setIsDarkMode] = useState(true)
+
+  const toggleTheme = () => {
+    setIsDarkMode(!isDarkMode)
+  }
 
   return (
-    <div className="bg-gray-900">
+    <div className={isDarkMode ? "bg-gray-900" : "bg-white"}>
       <header className="absolute inset-x-0 top-0 z-50">
         <nav aria-label="Global" className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8">
           <div className="flex lg:flex-1">
-            <a href="#" className="-m-1.5 p-1.5">
-              <span className="sr-only">Your Company</span>
+            <a href="/" className="-m-1.5 p-1.5">
+              <span className="sr-only">Profit Planet</span>
               <img
-                alt=""
-                src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
-                className="h-8 w-auto"
+                alt="Profit Planet"
+                src={isDarkMode ? "/images/logos/pp_logo_gold_transparent.png" : "/images/logos/pp_logo_gold_transparent.png"}
+                className={`h-18 w-auto ${isDarkMode ? '' : 'brightness-0'}`}
               />
             </a>
           </div>
@@ -32,7 +37,7 @@ export default function Example() {
             <button
               type="button"
               onClick={() => setMobileMenuOpen(true)}
-              className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-200"
+              className={`-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 ${isDarkMode ? 'text-gray-200' : 'text-gray-700'}`}
             >
               <span className="sr-only">Open main menu</span>
               <Bars3Icon aria-hidden="true" className="size-6" />
@@ -40,55 +45,81 @@ export default function Example() {
           </div>
           <div className="hidden lg:flex lg:gap-x-12">
             {navigation.map((item) => (
-              <a key={item.name} href={item.href} className="text-sm/6 font-semibold text-white">
+              <a key={item.name} href={item.href} className={`text-sm/6 font-semibold ${isDarkMode ? 'text-white' : 'text-gray-900'}`}>
                 {item.name}
               </a>
             ))}
           </div>
-          <div className="hidden lg:flex lg:flex-1 lg:justify-end">
-            <a href="#" className="text-sm/6 font-semibold text-white">
+          <div className="hidden lg:flex lg:flex-1 lg:justify-end lg:items-center lg:gap-x-4">
+            <button
+              onClick={toggleTheme}
+              className={`p-2 rounded-md ${isDarkMode ? 'text-gray-200 hover:bg-white/5' : 'text-gray-600 hover:bg-gray-100'}`}
+            >
+              {isDarkMode ? (
+                <SunIcon className="h-5 w-5" />
+              ) : (
+                <MoonIcon className="h-5 w-5" />
+              )}
+            </button>
+            <a href="#" className={`text-sm/6 font-semibold ${isDarkMode ? 'text-white' : 'text-gray-900'}`}>
               Log in <span aria-hidden="true">&rarr;</span>
             </a>
           </div>
         </nav>
         <Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen} className="lg:hidden">
           <div className="fixed inset-0 z-50" />
-          <DialogPanel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gray-900 p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-100/10">
+          <DialogPanel className={`fixed inset-y-0 right-0 z-50 w-full overflow-y-auto ${isDarkMode ? 'bg-gray-900' : 'bg-white'} p-6 sm:max-w-sm sm:ring-1 ${isDarkMode ? 'sm:ring-gray-100/10' : 'sm:ring-gray-900/10'}`}>
             <div className="flex items-center justify-between">
               <a href="#" className="-m-1.5 p-1.5">
-                <span className="sr-only">Your Company</span>
+                <span className="sr-only">Profit Planet</span>
                 <img
-                  alt=""
-                  src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
-                  className="h-8 w-auto"
+                  alt="Profit Planet"
+                  src={isDarkMode ? "/images/logo/pp_logo_gold_transparent.png" : "/images/logo/pp_logo_gold_transparent.png"}
+                  className={`h-8 w-auto ${isDarkMode ? '' : 'brightness-0'}`}
                 />
               </a>
               <button
                 type="button"
                 onClick={() => setMobileMenuOpen(false)}
-                className="-m-2.5 rounded-md p-2.5 text-gray-200"
+                className={`-m-2.5 rounded-md p-2.5 ${isDarkMode ? 'text-gray-200' : 'text-gray-700'}`}
               >
                 <span className="sr-only">Close menu</span>
                 <XMarkIcon aria-hidden="true" className="size-6" />
               </button>
             </div>
             <div className="mt-6 flow-root">
-              <div className="-my-6 divide-y divide-white/10">
+              <div className={`-my-6 divide-y ${isDarkMode ? 'divide-white/10' : 'divide-gray-500/10'}`}>
                 <div className="space-y-2 py-6">
                   {navigation.map((item) => (
                     <a
                       key={item.name}
                       href={item.href}
-                      className="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
+                      className={`-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold ${isDarkMode ? 'text-white hover:bg-white/5' : 'text-gray-900 hover:bg-gray-50'}`}
                     >
                       {item.name}
                     </a>
                   ))}
                 </div>
-                <div className="py-6">
+                <div className="py-6 space-y-2">
+                  <button
+                    onClick={toggleTheme}
+                    className={`-mx-3 flex w-full items-center rounded-lg px-3 py-2.5 text-base/7 font-semibold ${isDarkMode ? 'text-white hover:bg-white/5' : 'text-gray-900 hover:bg-gray-50'}`}
+                  >
+                    {isDarkMode ? (
+                      <>
+                        <SunIcon className="h-5 w-5 mr-2" />
+                        Light Mode
+                      </>
+                    ) : (
+                      <>
+                        <MoonIcon className="h-5 w-5 mr-2" />
+                        Dark Mode
+                      </>
+                    )}
+                  </button>
                   <a
                     href="#"
-                    className="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-white hover:bg-white/5"
+                    className={`-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold ${isDarkMode ? 'text-white hover:bg-white/5' : 'text-gray-900 hover:bg-gray-50'}`}
                   >
                     Log in
                   </a>
@@ -102,7 +133,7 @@ export default function Example() {
         <div className="relative isolate">
           <svg
             aria-hidden="true"
-            className="absolute inset-x-0 top-0 -z-10 h-256 w-full mask-[radial-gradient(32rem_32rem_at_center,white,transparent)] stroke-white/10"
+            className={`absolute inset-x-0 top-0 -z-10 h-256 w-full mask-[radial-gradient(32rem_32rem_at_center,white,transparent)] ${isDarkMode ? 'stroke-white/10' : 'stroke-gray-900/10'}`}
           >
             <defs>
               <pattern
@@ -116,7 +147,7 @@ export default function Example() {
                 <path d="M.5 200V.5H200" fill="none" />
               </pattern>
             </defs>
-            <svg x="50%" y={-1} className="overflow-visible fill-gray-800">
+            <svg x="50%" y={-1} className={`overflow-visible ${isDarkMode ? 'fill-gray-800' : 'fill-gray-100'}`}>
               <path
                 d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
                 strokeWidth={0}
@@ -133,17 +164,20 @@ export default function Example() {
                 clipPath:
                   'polygon(63.1% 29.5%, 100% 17.1%, 76.6% 3%, 48.4% 0%, 44.6% 4.7%, 54.5% 25.3%, 59.8% 49%, 55.2% 57.8%, 44.4% 57.2%, 27.8% 47.9%, 35.1% 81.5%, 0% 97.7%, 39.2% 100%, 35.2% 81.4%, 97.2% 52.8%, 63.1% 29.5%)',
               }}
-              className="aspect-801/1036 w-200.25 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30"
+              className={`aspect-801/1036 w-200.25 ${isDarkMode ? 'bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30' : 'bg-linear-to-tr from-[#fbbf24] to-[#3b82f6] opacity-20'}`}
             />
           </div>
           <div className="overflow-hidden">
             <div className="mx-auto max-w-7xl px-6 pt-36 pb-32 sm:pt-60 lg:px-8 lg:pt-32">
               <div className="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
                 <div className="relative w-full lg:max-w-xl lg:shrink-0 xl:max-w-2xl">
-                  <h1 className="text-5xl font-semibold tracking-tight text-pretty text-white sm:text-7xl">
+                  <h1 className={`text-5xl font-semibold tracking-tight text-pretty ${isDarkMode ? 'text-white' : 'text-gray-900'} sm:text-7xl`}>
                     Profit Planet
                   </h1>
-                  <p className="mt-8 text-lg font-medium text-pretty text-gray-400 sm:max-w-md sm:text-xl/8 lg:max-w-none">
+                  <p className={`mt-4 text-xl italic ${isDarkMode ? 'text-gray-300' : 'text-gray-600'} sm:text-2xl`}>
+                    Building a Community that will bring change
+                  </p>
+                  <p className={`mt-8 text-lg font-medium text-pretty ${isDarkMode ? 'text-gray-400' : 'text-gray-600'} sm:max-w-md sm:text-xl/8 lg:max-w-none`}>
                     Profit Planet is a platform building a vibrant community where members access diverse services and products from within. Users enjoy benefits like cashback and discounts, fostering a smart, rewarding ecosystem.
                   </p>
                   <div className="mt-10 flex items-center gap-x-6">
@@ -153,7 +187,7 @@ export default function Example() {
                     >
                       Shop
                     </a>
-                    <a href="/login" className="text-sm/6 font-semibold text-white">
+                    <a href="/login" className={`text-sm/6 font-semibold ${isDarkMode ? 'text-white' : 'text-gray-900'}`}>
                       Login <span aria-hidden="true">→</span>
                     </a>
                   </div>
@@ -166,7 +200,7 @@ export default function Example() {
                         src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
                         className="aspect-2/3 w-full rounded-xl bg-gray-700/5 object-cover shadow-lg"
                       />
-                      <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-white/10 ring-inset" />
+                      <div className={`pointer-events-none absolute inset-0 rounded-xl ring-1 ${isDarkMode ? 'ring-white/10' : 'ring-gray-900/10'} ring-inset`} />
                     </div>
                   </div>
                   <div className="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36">
@@ -176,7 +210,7 @@ export default function Example() {
                         src="https://images.unsplash.com/photo-1485217988980-11786ced9454?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
                         className="aspect-2/3 w-full rounded-xl bg-gray-700/5 object-cover shadow-lg"
                       />
-                      <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-white/10 ring-inset" />
+                      <div className={`pointer-events-none absolute inset-0 rounded-xl ring-1 ${isDarkMode ? 'ring-white/10' : 'ring-gray-900/10'} ring-inset`} />
                     </div>
                     <div className="relative">
                       <img
@@ -184,7 +218,7 @@ export default function Example() {
                         src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-x=.4&w=396&h=528&q=80"
                         className="aspect-2/3 w-full rounded-xl bg-gray-700/5 object-cover shadow-lg"
                       />
-                      <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-white/10 ring-inset" />
+                      <div className={`pointer-events-none absolute inset-0 rounded-xl ring-1 ${isDarkMode ? 'ring-white/10' : 'ring-gray-900/10'} ring-inset`} />
                     </div>
                   </div>
                   <div className="w-44 flex-none space-y-8 pt-32 sm:pt-0">
@@ -194,7 +228,7 @@ export default function Example() {
                         src="https://images.unsplash.com/photo-1670272504528-790c24957dda?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=left&w=400&h=528&q=80"
                         className="aspect-2/3 w-full rounded-xl bg-gray-700/5 object-cover shadow-lg"
                       />
-                      <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-white/10 ring-inset" />
+                      <div className={`pointer-events-none absolute inset-0 rounded-xl ring-1 ${isDarkMode ? 'ring-white/10' : 'ring-gray-900/10'} ring-inset`} />
                     </div>
                     <div className="relative">
                       <img
@@ -202,7 +236,7 @@ export default function Example() {
                         src="https://images.unsplash.com/photo-1670272505284-8faba1c31f7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
                         className="aspect-2/3 w-full rounded-xl bg-gray-700/5 object-cover shadow-lg"
                       />
-                      <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-white/10 ring-inset" />
+                      <div className={`pointer-events-none absolute inset-0 rounded-xl ring-1 ${isDarkMode ? 'ring-white/10' : 'ring-gray-900/10'} ring-inset`} />
                     </div>
                   </div>
                 </div>