From 253e1b7542e83c531066a8a5b5951b82e2caae55 Mon Sep 17 00:00:00 2001
From: Rahaf <User@DESKTOP-JSF2AL8>
Date: Sun, 28 Jun 2026 16:57:02 +0300
Subject: [PATCH] Edit style navbar, bottom nav

---
 app/ClientLayout.js         | 66 ++++++++++++++++++-------------------
 app/components/BottomNav.js |  4 +--
 app/components/NavLinks.js  | 14 ++++----
 app/page.js                 |  2 +-
 4 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/app/ClientLayout.js b/app/ClientLayout.js
index 92cd4b4..2350b7c 100644
--- a/app/ClientLayout.js
+++ b/app/ClientLayout.js
@@ -137,6 +137,7 @@ export default function ClientLayout({ children }) {
   ].includes(pathname);
 
   const isProfilePage = pathname === "/profile";
+  const isHomePage = pathname === "/";
 
   const isOwner = user?.role === UserRole.OWNER;
   const isAgent = user?.role === UserRole.AGENT;
@@ -165,7 +166,7 @@ export default function ClientLayout({ children }) {
   return (
     <div className="min-h-screen flex flex-col">
       {!isAuthPage && !isAuthenticated && (
-        <nav className="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-sm border-b border-gray-200 z-50 transition-all duration-300 shadow-sm">
+        <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isHomePage ? "bg-transparent backdrop-blur-sm" : "bg-white/95 backdrop-blur-sm border-b border-gray-200 shadow-sm"}`}>
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div
               className={`flex justify-between items-center h-20 ${currentLanguage === "ar" ? "flex-row-reverse" : ""}`}
@@ -181,9 +182,9 @@ export default function ClientLayout({ children }) {
                       priority
                     />
                   </div>
-                  <span className="text-3xl font-bold text-gray-800 hidden md:block">
+                  <span className={`text-3xl font-bold hidden md:block ${isHomePage ? "text-white" : "text-gray-800"}`}>
                     {t("brandNamePart1")}
-                    <span className="text-amber-600">
+                    <span className={isHomePage ? "text-amber-400" : "text-amber-600"}>
                       {t("brandNamePart2")}
                     </span>
                   </span>
@@ -196,7 +197,7 @@ export default function ClientLayout({ children }) {
                 >
                   {/* Download App Dropdown */}
                   <div className="relative group">
-                    <button className="flex items-center gap-2 px-3 py-2 text-gray-700 hover:text-amber-600 hover:bg-amber-50 rounded-lg transition-all">
+                    <button className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${isHomePage ? "text-white/80 hover:text-amber-300 hover:bg-white/10" : "text-gray-700 hover:text-amber-600 hover:bg-amber-50"}`}>
                       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                         <path d="M11 2a3 3 0 0 0-3 3v6.5a.5.5 0 0 0 1 0V5a2 2 0 1 1 4 0v6.5a.5.5 0 0 0 1 0V5a3 3 0 0 0-3-3z"/>
                         <path d="M1.5 12.5A1.5 1.5 0 0 0 3 14h10a1.5 1.5 0 0 0 0-3H3a1.5 1.5 0 0 0-1.5 1.5z"/>
@@ -233,31 +234,31 @@ export default function ClientLayout({ children }) {
                     </div>
                   </div>
 
-                  <NavLink href="/">الرئيسية</NavLink>
-                  <NavLink href="/properties">عقاراتنا</NavLink>
+                  <NavLink light={isHomePage} href="/">الرئيسية</NavLink>
+                  <NavLink light={isHomePage} href="/properties">عقاراتنا</NavLink>
 
 
                   {isOwner && (
                     <>
-                      <NavLink href="/owner/properties">
+                      <NavLink light={isHomePage} href="/owner/properties">
                         <span className="flex items-center gap-2">
                           <Building className="w-4 h-4" />
                           عقاراتي
                         </span>
                       </NavLink>
-                      <NavLink href="/owner/reservations">
+                      <NavLink light={isHomePage} href="/owner/reservations">
                         <span className="flex items-center gap-2">
                           <Calendar className="w-4 h-4" />
                           الحجوزات
                         </span>
                       </NavLink>
-                      {/* <NavLink href="/owner/calendar">
+                      {/* <NavLink light={isHomePage} href="/owner/calendar">
                         <span className="flex items-center gap-2">
                           <CalendarDays className="w-4 h-4" />
                           التقويم
                         </span>
                       </NavLink> */}
-                      <NavLink href="/owner/profits">
+                      <NavLink light={isHomePage} href="/owner/profits">
                         <span className="flex items-center gap-2">
                           <TrendingUp className="w-4 h-4" />
                           الأرباح
@@ -268,13 +269,13 @@ export default function ClientLayout({ children }) {
 
                   {!user && !isAuthPage && (
                     <>
-                      <NavLink href="/login">
+                      <NavLink light={isHomePage} href="/login">
                         <span className="flex items-center gap-2">
                           <LogIn className="w-4 h-4" />
                           تسجيل الدخول
                         </span>
                       </NavLink>
-                      <NavLink href="/auth/choose-role">
+                      <NavLink light={isHomePage} href="/auth/choose-role">
                         <span className="flex items-center gap-2">
                           <UserPlus className="w-4 h-4" />
                           إنشاء حساب
@@ -629,21 +630,21 @@ export default function ClientLayout({ children }) {
               initial={{ opacity: 0, y: -10 }}
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: -10 }}
-              className="md:hidden bg-white border-t border-gray-200 shadow-lg"
+              className={`md:hidden border-t shadow-lg ${isHomePage ? "bg-black/60 backdrop-blur-md border-white/10" : "bg-white border-gray-200"}`}
             >
               <div className="px-2 pt-2 pb-3 space-y-1">
-                <MobileNavLink href="/" onClick={closeMobileMenu}>
+                <MobileNavLink light={isHomePage} href="/" onClick={closeMobileMenu}>
                   {t("home")}
                 </MobileNavLink>
-                <MobileNavLink href="/properties" onClick={closeMobileMenu}>
+                <MobileNavLink light={isHomePage} href="/properties" onClick={closeMobileMenu}>
                   {t("ourProducts")}
                 </MobileNavLink>
 
                 {/* Download App - Mobile */}
-                <div className="border-t border-gray-200 my-2"></div>
-                <p className="px-3 py-1 text-xs text-gray-400 font-medium">تحميل التطبيق</p>
+                <div className={`border-t my-2 ${isHomePage ? "border-white/10" : "border-gray-200"}`}></div>
+                <p className={`px-3 py-1 text-xs font-medium ${isHomePage ? "text-white/50" : "text-gray-400"}`}>تحميل التطبيق</p>
                 <a href="/files/SweetHome.apk" download onClick={closeMobileMenu}
-                  className="flex items-center gap-2 px-3 py-2 rounded-md text-green-600 hover:bg-green-50 transition-colors">
+                  className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors ${isHomePage ? "text-green-400 hover:bg-white/10" : "text-green-600 hover:bg-green-50"}`}>
                   <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
                     <path d="M2.76 3.061a.5.5 0 0 1 .679.2l1.283 2.352A8.9 8.9 0 0 1 8 5a8.9 8.9 0 0 1 3.278.613l1.283-2.352a.5.5 0 1 1 .878.478l-1.252 2.295C14.475 7.266 16 9.477 16 12H0c0-2.523 1.525-4.734 3.813-5.966L2.56 3.74a.5.5 0 0 1 .2-.678ZM5 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2m6 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/>
                   </svg>
@@ -655,12 +656,11 @@ export default function ClientLayout({ children }) {
                   </svg>
                   <span className="text-sm">iOS - قريباً</span>
                 </div>
-                <div className="border-t border-gray-200 my-2"></div>
+                <div className={`border-t my-2 ${isHomePage ? "border-white/10" : "border-gray-200"}`}></div>
 
                 {isOwner && (
                   <>
-                    <MobileNavLink
-                      href="/owner/properties"
+                    <MobileNavLink light={isHomePage} href="/owner/properties"
                       onClick={closeMobileMenu}
                     >
                       <span className="flex items-center gap-2">
@@ -668,7 +668,7 @@ export default function ClientLayout({ children }) {
                         عقاراتي
                       </span>
                     </MobileNavLink>
-                    <MobileNavLink
+                    <MobileNavLink light={isHomePage}
                       href="/owner/reservations"
                       onClick={closeMobileMenu}
                     >
@@ -677,7 +677,7 @@ export default function ClientLayout({ children }) {
                         الحجوزات
                       </span>
                     </MobileNavLink>
-                    <MobileNavLink
+                    <MobileNavLink light={isHomePage}
                       href="/owner/calendar"
                       onClick={closeMobileMenu}
                     >
@@ -686,7 +686,7 @@ export default function ClientLayout({ children }) {
                         التقويم
                       </span>
                     </MobileNavLink>
-                    <MobileNavLink
+                    <MobileNavLink light={isHomePage}
                       href="/owner/profits"
                       onClick={closeMobileMenu}
                     >
@@ -700,14 +700,14 @@ export default function ClientLayout({ children }) {
 
                 {!user && (
                   <>
-                    <div className="border-t border-gray-200 my-2"></div>
-                    <MobileNavLink href="/login" onClick={closeMobileMenu}>
+                    <div className={`border-t my-2 ${isHomePage ? "border-white/10" : "border-gray-200"}`}></div>
+                    <MobileNavLink light={isHomePage} href="/login" onClick={closeMobileMenu}>
                       <span className="flex items-center gap-2">
                         <LogIn className="w-4 h-4" />
                         تسجيل الدخول
                       </span>
                     </MobileNavLink>
-                    <MobileNavLink
+                    <MobileNavLink light={isHomePage}
                       href="/auth/choose-role"
                       onClick={closeMobileMenu}
                     >
@@ -725,23 +725,23 @@ export default function ClientLayout({ children }) {
       )}
 
       <main
-            className={`${!isAuthPage && !isProfilePage && !isAuthenticated ? "pt-20" : ""} flex-1 flex flex-col bg-gray-50 overflow-x-hidden ${currentLanguage === "ar" ? "text-right" : "text-left"}`}
+            className={`${!isAuthPage && !isProfilePage && !isAuthenticated ? "pt-20" : ""} flex-1 flex flex-col bg-gray-50 overflow-x-hidden ${currentLanguage === "ar" ? "text-right" : "text-left"} ${isHomePage ? "relative" : ""} ${isAuthenticated && !isAuthPage ? "pb-20" : ""}`}
           >
             {!isAuthPage && (
-              <div className="flex items-center justify-between px-4 py-2 border-b border-gray-200 bg-gray-50/90 backdrop-blur-sm">
+              <div className={`flex items-center justify-between px-4 py-2 ${isHomePage ? "absolute top-0 left-0 right-0 z-20 bg-transparent backdrop-blur-3xl" : "border-b border-gray-200/20 bg-white/10 backdrop-blur-lg"}`}>
                 <div className="flex items-center gap-2">
-                  <span className={`text-sm font-semibold px-3 py-1 rounded-lg ${!isAuthenticated ? 'bg-gray-200 text-gray-600' : isOwner ? 'bg-amber-100 text-amber-700' : 'bg-blue-100 text-blue-700'}`}>
+                  <span className={`text-sm font-semibold px-3 py-1 rounded-lg ${!isAuthenticated ? (isHomePage ? 'bg-white/20 text-white' : 'bg-gray-200 text-gray-600') : isOwner ? (isHomePage ? 'bg-amber-500/30 text-amber-200' : 'bg-amber-100 text-amber-700') : (isHomePage ? 'bg-blue-500/30 text-blue-200' : 'bg-blue-100 text-blue-700')}`}>
                     {!isAuthenticated ? 'زائر' : isOwner ? 'مالك' : 'عميل'}
                   </span>
                 </div>
                 <div className="flex items-center gap-3">
-                  <Link href="/favorites" className="relative group flex items-center justify-center w-9 h-9 text-gray-600 hover:text-amber-600 hover:bg-gray-100 rounded-full transition-colors">
+                  <Link href="/favorites" className={`relative group flex items-center justify-center w-9 h-9 rounded-full transition-colors ${isHomePage ? "text-white/80 hover:text-amber-300 hover:bg-white/10" : "text-gray-600 hover:text-amber-600 hover:bg-gray-100"}`}>
                     <Heart className="w-5 h-5" />
                     <div className="absolute -bottom-8 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-xs rounded-lg px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg">
                       المفضلة
                     </div>
                   </Link>
-                  <Link href="/notifications" className="relative group flex items-center justify-center w-9 h-9 text-gray-600 hover:text-amber-600 hover:bg-gray-100 rounded-full transition-colors">
+                  <Link href="/notifications" className={`relative group flex items-center justify-center w-9 h-9 rounded-full transition-colors ${isHomePage ? "text-white/80 hover:text-amber-300 hover:bg-white/10" : "text-gray-600 hover:text-amber-600 hover:bg-gray-100"}`}>
                     <Bell className="w-5 h-5" />
                     {isMounted && unreadCount > 0 && (
                       <div className="absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">
@@ -752,7 +752,7 @@ export default function ClientLayout({ children }) {
                       الإشعارات
                     </div>
                   </Link>
-                  <button onClick={toggleTheme} className="relative group flex items-center justify-center w-9 h-9 text-gray-600 hover:text-amber-600 hover:bg-gray-100 rounded-full transition-colors">
+                  <button onClick={toggleTheme} className={`relative group flex items-center justify-center w-9 h-9 rounded-full transition-colors ${isHomePage ? "text-white/80 hover:text-amber-300 hover:bg-white/10" : "text-gray-600 hover:text-amber-600 hover:bg-gray-100"}`}>
                     {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
                     <div className="absolute -bottom-8 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-xs rounded-lg px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg">
                       {theme === 'dark' ? 'وضع نهاري' : 'وضع ليلي'}
diff --git a/app/components/BottomNav.js b/app/components/BottomNav.js
index 7b095d0..a1e74a5 100644
--- a/app/components/BottomNav.js
+++ b/app/components/BottomNav.js
@@ -29,8 +29,8 @@ export default function BottomNav({ isOwner, isOwnerOrAgent }) {
   };
 
   return (
-    <div className="flex justify-center pb-4 pt-2">
-      <nav className="bg-gray-50 rounded-3xl px-4 py-2 shadow-[0_4px_24px_rgba(251,146,60,0.25)]">
+    <div className="fixed bottom-0 left-0 right-0 z-50 flex justify-center pb-4 pt-2 pointer-events-none">
+      <nav className="bg-gray-50 rounded-3xl px-4 py-2 shadow-[0_4px_24px_rgba(251,146,60,0.25)] pointer-events-auto">
         <div className="flex items-center justify-center gap-1">
           {items.map((it) => {
             const Icon = it.icon;
diff --git a/app/components/NavLinks.js b/app/components/NavLinks.js
index 2830a83..7574220 100644
--- a/app/components/NavLinks.js
+++ b/app/components/NavLinks.js
@@ -3,7 +3,7 @@ import { usePathname } from 'next/navigation';
 import Link from 'next/link';
 import { LogIn, UserPlus } from 'lucide-react';
 
-export function NavLink({ href, children }) {
+export function NavLink({ href, children, light }) {
   const pathname = usePathname();
   const isActive = pathname === href || pathname.startsWith(href + '/');
   return (
@@ -11,19 +11,19 @@ export function NavLink({ href, children }) {
       href={href}
       className={`px-5 py-3 rounded-lg font-semibold transition-all duration-300 text-lg relative group ${
         isActive 
-          ? 'text-amber-600 bg-amber-50' 
-          : 'text-gray-700 hover:text-amber-600 hover:bg-gray-100'
+          ? light ? 'text-amber-300 bg-white/10' : 'text-amber-600 bg-amber-50'
+          : light ? 'text-white/90 hover:text-amber-300 hover:bg-white/10' : 'text-gray-700 hover:text-amber-600 hover:bg-gray-100'
       }`}
     >
       {children}
       <span className={`absolute bottom-0 left-1/2 transform -translate-x-1/2 h-0.5 transition-all duration-300 ${
-        isActive ? 'w-4/5 bg-amber-600' : 'w-0 bg-amber-600 group-hover:w-4/5'
+        isActive ? 'w-4/5 bg-amber-400' : 'w-0 bg-amber-400 group-hover:w-4/5'
       }`}></span>
     </Link>
   );
 }
 
-export function MobileNavLink({ href, children, onClick }) {
+export function MobileNavLink({ href, children, onClick, light }) {
   const pathname = usePathname();
   const isActive = pathname === href || pathname.startsWith(href + '/');
   return (
@@ -32,8 +32,8 @@ export function MobileNavLink({ href, children, onClick }) {
       onClick={onClick}
       className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${
         isActive 
-          ? 'text-amber-600 bg-amber-50' 
-          : 'text-gray-700 hover:text-amber-600 hover:bg-gray-50'
+          ? light ? 'text-amber-300 bg-white/10' : 'text-amber-600 bg-amber-50'
+          : light ? 'text-white/80 hover:text-amber-300 hover:bg-white/10' : 'text-gray-700 hover:text-amber-600 hover:bg-gray-50'
       }`}
     >
       {children}
diff --git a/app/page.js b/app/page.js
index ae1dc24..d4c79ea 100644
--- a/app/page.js
+++ b/app/page.js
@@ -275,7 +275,7 @@ export default function HomePage() {
 
   return (
     <div className="min-h-screen">
-      <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
+      <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-16">
         <div className="absolute inset-0 z-0">
           <motion.div
             className="absolute inset-0 bg-cover bg-center bg-no-repeat"