From 1d2239367563db1ebf8c44ef2dc09e5eaf75b8b4 Mon Sep 17 00:00:00 2001
From: DeathKaioken <alex.ibrahim@eitk.com>
Date: Fri, 3 Oct 2025 19:32:21 +0200
Subject: [PATCH] beautify: Initial Page design

---
 src/app/page.tsx | 298 ++++++++++++++++++++++++++++++++---------------
 1 file changed, 203 insertions(+), 95 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4611dbc..ef79253 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,108 +1,216 @@
-'use client';
+'use client'
 
-import Image from "next/image";
-import { useRouter } from 'next/navigation';
-import GlobalAnimatedBackground from './background/GlobalAnimatedBackground';
-import Footer from './components/Footer';
-import Header from './components/nav/Header';
-import { useTranslation } from './i18n/useTranslation';
+import { useState } from 'react'
+import { Dialog, DialogPanel } from '@headlessui/react'
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
 
-export default function Home() {
-  const router = useRouter();
-  const { t } = useTranslation();
+const navigation = [
+  { name: 'Shop', href: '/shop' },
+  { name: 'Affiliate-Links', href: '#' },
+  { name: 'Memberships', href: '#' },
+  { name: 'About us', href: '#' },
+]
+
+export default function Example() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   return (
-    <div className="min-h-screen flex flex-col bg-white">
-      {/* Header */}
-      <Header />
-      
-      {/* Main Content */}
-      <main className="relative flex-1 flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto text-center">
-          {/* Hero Section */}
-          <div className="space-y-8 sm:space-y-12">
-            {/* Logo/Title */}
-            <h1 className="text-5xl sm:text-6xl lg:text-7xl font-extrabold text-[#0F172A] tracking-tight drop-shadow-lg">
-              {t('home.title')}
-            </h1>
-            
-            {/* Tagline */}
-            <p className="text-xl sm:text-2xl text-[#FFFFFF] max-w-3xl mx-auto">
-              {t('home.tagline')}
-            </p>
-
-            {/* Feature Highlights */}
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16 max-w-5xl mx-auto">
-              {[
-                {
-                  title: t('home.features.sustainable.title'),
-                  description: t('home.features.sustainable.description')
-                },
-                {
-                  title: t('home.features.community.title'),
-                  description: t('home.features.community.description')
-                },
-                {
-                  title: t('home.features.rewards.title'),
-                  description: t('home.features.rewards.description')
-                }
-              ].map((feature, index) => (
-                <div
-                  key={index}
-                  className="bg-white/80 backdrop-blur-lg rounded-xl p-6 shadow-lg border border-[#8D6B1D]/20 hover:border-[#8D6B1D]/30 transition-all duration-300 hover:transform hover:-translate-y-1"
-                >
-                  <h3 className="text-lg font-semibold text-[#0F172A] mb-2">
-                    {feature.title}
-                  </h3>
-                  <p className="text-[#4A4A4A]">
-                    {feature.description}
-                  </p>
+    <div className="bg-gray-900">
+      <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>
+              <img
+                alt=""
+                src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
+                className="h-8 w-auto"
+              />
+            </a>
+          </div>
+          <div className="flex lg:hidden">
+            <button
+              type="button"
+              onClick={() => setMobileMenuOpen(true)}
+              className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-200"
+            >
+              <span className="sr-only">Open main menu</span>
+              <Bars3Icon aria-hidden="true" className="size-6" />
+            </button>
+          </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">
+                {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">
+              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">
+            <div className="flex items-center justify-between">
+              <a href="#" className="-m-1.5 p-1.5">
+                <span className="sr-only">Your Company</span>
+                <img
+                  alt=""
+                  src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
+                  className="h-8 w-auto"
+                />
+              </a>
+              <button
+                type="button"
+                onClick={() => setMobileMenuOpen(false)}
+                className="-m-2.5 rounded-md p-2.5 text-gray-200"
+              >
+                <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="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"
+                    >
+                      {item.name}
+                    </a>
+                  ))}
+                </div>
+                <div className="py-6">
+                  <a
+                    href="#"
+                    className="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-white hover:bg-white/5"
+                  >
+                    Log in
+                  </a>
                 </div>
-              ))}
-            </div>
-
-            {/* Community Stats */}
-            <div className="flex justify-center gap-8 mt-12">
-              <div className="text-center">
-                <div className="text-4xl font-bold text-[#FFFFFF]">10k+</div>
-                <div className="text-sm text-[#FFFFFF]">{t('home.stats.members')}</div>
-              </div>
-              <div className="text-center">
-                <div className="text-4xl font-bold text-[#FFFFFF]">50k+</div>
-                <div className="text-sm text-[#FFFFFF]">{t('home.stats.products')}</div>
-              </div>
-              <div className="text-center">
-                <div className="text-4xl font-bold text-[#FFFFFF]">100</div>
-                <div className="text-sm text-[#FFFFFF]">{t('home.stats.communities')}</div>
               </div>
             </div>
-
-            {/* CTA Buttons */}
-            <div className="flex flex-col sm:flex-row gap-4 justify-center mt-12">
-              <button
-                onClick={() => router.push('/shop')}
-                className="px-8 py-3 rounded-lg bg-[#8D6B1D] text-white font-semibold hover:bg-[#8D6B1D]/90 transition-colors duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
+          </DialogPanel>
+        </Dialog>
+      </header>
+      <main>
+        <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"
+          >
+            <defs>
+              <pattern
+                x="50%"
+                y={-1}
+                id="1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84"
+                width={200}
+                height={200}
+                patternUnits="userSpaceOnUse"
               >
-                {t('home.cta.getStarted')}
-              </button>
-              <button
-                onClick={() => router.push('/register')}
-                className="px-8 py-3 rounded-lg bg-white text-[#8D6B1D] font-semibold hover:bg-[#8D6B1D]/5 transition-colors duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 border border-[#8D6B1D]/20"
-              >
-                {t('home.cta.learnMore')}
-              </button>
+                <path d="M.5 200V.5H200" fill="none" />
+              </pattern>
+            </defs>
+            <svg x="50%" y={-1} className="overflow-visible fill-gray-800">
+              <path
+                d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
+                strokeWidth={0}
+              />
+            </svg>
+            <rect fill="url(#1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84)" width="100%" height="100%" strokeWidth={0} />
+          </svg>
+          <div
+            aria-hidden="true"
+            className="absolute top-0 right-0 left-1/2 -z-10 -ml-24 transform-gpu overflow-hidden blur-3xl lg:ml-24 xl:ml-48"
+          >
+            <div
+              style={{
+                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"
+            />
+          </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">
+                    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">
+                    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">
+                    <a
+                      href="/shop"
+                      className="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+                    >
+                      Shop
+                    </a>
+                    <a href="/login" className="text-sm/6 font-semibold text-white">
+                      Login <span aria-hidden="true">→</span>
+                    </a>
+                  </div>
+                </div>
+                <div className="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0">
+                  <div className="ml-auto w-44 flex-none space-y-8 pt-32 sm:ml-0 sm:pt-80 lg:order-last lg:pt-36 xl:order-0 xl:pt-80">
+                    <div className="relative">
+                      <img
+                        alt=""
+                        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>
+                  </div>
+                  <div className="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36">
+                    <div className="relative">
+                      <img
+                        alt=""
+                        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>
+                    <div className="relative">
+                      <img
+                        alt=""
+                        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>
+                  </div>
+                  <div className="w-44 flex-none space-y-8 pt-32 sm:pt-0">
+                    <div className="relative">
+                      <img
+                        alt=""
+                        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>
+                    <div className="relative">
+                      <img
+                        alt=""
+                        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>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </main>
-
-      {/* Footer */}
-      <div className="relative z-10">
-        <Footer />
-      </div>
-
-      {/* Decorative Elements */}
-      <div className="fixed bottom-0 left-0 w-full h-32 bg-gradient-to-t from-white/50 to-transparent z-[1]" />
     </div>
-  );
-}
+  )
+}
\ No newline at end of file