amer2004/SweetHome
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Edit style

Browse Source
This commit is contained in:
Rahaf
2026-06-30 17:17:00 +03:00
parent 03b39317c9
commit 409cb41dd6
4 changed files with 43 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/ClientLayout.js
View File

@ -724,24 +724,37 @@ export default function ClientLayout({ children }) {
</nav>
)}
{isHomePage && (
<div className="fixed inset-0 -z-10">
<motion.div
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
style={{ backgroundImage: 'url(/hero.jpg)' }}
initial={{ scale: 1.1 }}
animate={{ scale: 1 }}
transition={{ duration: 1.5, ease: "easeOut" }}
/>
<div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/60 to-black/50" />
</div>
)}
<main
className={`${!isAuthPage && !isProfilePage && !isAuthenticated ? "pt-20" : ""} flex-1 flex flex-col bg-gray-50 ${currentLanguage === "ar" ? "text-right" : "text-left"} ${isHomePage ? "relative" : ""} ${isAuthenticated && !isAuthPage ? "pb-20" : ""}`}
className={`${!isAuthPage && !isProfilePage && !isAuthenticated ? "pt-20" : ""} flex-1 flex flex-col ${isHomePage ? "bg-transparent" : "bg-gray-50"} ${currentLanguage === "ar" ? "text-right" : "text-left"} ${isHomePage ? "relative" : ""} ${isAuthenticated && !isAuthPage ? "pb-20" : ""}`}
>
{!isAuthPage && (
<div className={`flex items-center justify-between px-4 py-2 sticky top-0 z-20 ${isHomePage ? "bg-transparent backdrop-blur-3xl" : "border-b border-gray-200/20 bg-white/10 backdrop-blur-lg"}`}>
<div className={`flex items-center justify-between px-4 py-2 sticky top-0 z-20 bg-transparent backdrop-blur-3xl ${isHomePage ? "" : "border-b border-gray-200/20"}`}>
<div className="flex items-center gap-2">
<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 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"}`}>
<Link href="/favorites" className={`relative group flex items-center justify-center w-9 h-9 rounded-full transition-colors hover:bg-white/10 ${pathname === '/favorites' ? 'text-amber-400' : 'nav-icon'}`}>
<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 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"}`}>
<Link href="/notifications" className={`relative group flex items-center justify-center w-9 h-9 rounded-full transition-colors hover:bg-white/10 ${pathname === '/notifications' ? 'text-amber-400' : 'nav-icon'}`}>
<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,13 +765,13 @@ export default function ClientLayout({ children }) {
الإشعارات
</div>
</Link>
<Link href="/settings" 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"}`}>
<Link href="/settings" className={`relative group flex items-center justify-center w-9 h-9 rounded-full transition-colors hover:bg-white/10 ${pathname === '/settings' ? 'text-amber-400' : 'nav-icon'}`}>
<Settings 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>
<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"}`}>
<button onClick={toggleTheme} className="relative group flex items-center justify-center w-9 h-9 rounded-full transition-colors hover:bg-white/10 nav-icon">
{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' ? 'وضع نهاري' : 'وضع ليلي'}

21
app/globals.css
View File

@ -96,7 +96,7 @@
.dark {
--background: #0f172a;
--foreground: #e2e8f0;
--foreground: #f5e6d3;
color-scheme: dark;
}
@ -106,12 +106,12 @@
--color-gray-100: #1e293b;
--color-gray-200: #334155;
--color-gray-300: #475569;
--color-gray-400: #94a3b8;
--color-gray-500: #64748b;
--color-gray-600: #475569;
--color-gray-700: #cbd5e1;
--color-gray-800: #e2e8f0;
--color-gray-900: #f1f5f9;
--color-gray-400: #64748b;
--color-gray-500: #94a3b8;
--color-gray-600: #cbd5e1;
--color-gray-700: #e2e8f0;
--color-gray-800: #f1f5f9;
--color-gray-900: #f8fafc;
}
html, body {
@ -157,6 +157,13 @@ body {
transform: scale(1.1);
}
.nav-icon {
color: #1e293b;
}
.dark .nav-icon {
color: #ffffff;
}
.property-tooltip {
background: white !important;
color: #1f2937 !important;

22
app/page.js
View File

@ -276,18 +276,6 @@ export default function HomePage() {
return (
<div className="min-h-screen">
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 z-0">
<motion.div
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: 'url(/hero.jpg)',
}}
initial={{ scale: 1.1 }}
animate={{ scale: 1 }}
transition={{ duration: 1.5, ease: "easeOut" }}
/>
<div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/60 to-black/50" />
</div>
<div className="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<motion.div
@ -303,7 +291,7 @@ export default function HomePage() {
}}
>
<motion.h1
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight tracking-tight"
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-amber-50 mb-6 leading-tight tracking-tight"
variants={{
hidden: { opacity: 0, y: 20 },
visible: { opacity: 1, y: 0 }
@ -311,7 +299,7 @@ export default function HomePage() {
>
إيجاد منزلك الجديد<br />
<motion.span
className="text-amber-400"
className="text-amber-300"
animate={{
y: [0, -10, 0],
}}
@ -325,7 +313,7 @@ export default function HomePage() {
</motion.span>
</motion.h1>
<motion.p
className="text-base sm:text-lg text-gray-200 max-w-2xl mx-auto leading-relaxed"
className="text-base sm:text-lg text-amber-50 max-w-2xl mx-auto leading-relaxed"
variants={{
hidden: { opacity: 0, y: 20 },
visible: { opacity: 1, y: 0 }
@ -344,10 +332,10 @@ export default function HomePage() {
transition={{ delay: 0.5 }}
className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center border border-white/20"
>
<h2 className="text-2xl font-bold text-white mb-2">
<h2 className="text-2xl font-bold text-amber-50 mb-2">
مرحباً {user?.name}!
</h2>
<p className="text-gray-200 mb-4">
<p className="text-amber-50/80 mb-4">
يمكنك إدارة عقاراتك من خلال لوحة التحكم الخاصة بك
</p>
<Link