Initial commit: Deploy SweetHome project
This commit is contained in:
Rahaf
847
app/admin/page.js
Normal file
847
app/admin/page.js
Normal file
@ -0,0 +1,847 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import '../i18n/config';
|
||||
import {
|
||||
Users,
|
||||
Home,
|
||||
Calendar,
|
||||
User,
|
||||
Clock,
|
||||
DollarSign,
|
||||
PlusCircle,
|
||||
Edit,
|
||||
Trash2,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Search,
|
||||
Filter,
|
||||
Download,
|
||||
Eye,
|
||||
MapPin,
|
||||
Bed,
|
||||
Bath,
|
||||
Square,
|
||||
Star,
|
||||
Phone,
|
||||
Mail,
|
||||
CalendarDays
|
||||
} from 'lucide-react';
|
||||
|
||||
export default function AdminPage() {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [activeTab, setActiveTab] = useState('properties');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedUser, setSelectedUser] = useState(null);
|
||||
|
||||
// احصل على اللغة الحالية من i18n
|
||||
const currentLanguage = i18n.language || 'en';
|
||||
|
||||
const [stats, setStats] = useState({
|
||||
totalUsers: 0,
|
||||
totalProperties: 0,
|
||||
activeBookings: 0,
|
||||
availableProperties: 0
|
||||
});
|
||||
|
||||
const [properties, setProperties] = useState([
|
||||
{
|
||||
id: 1,
|
||||
name: "luxuryVillaDamascus",
|
||||
type: "villa",
|
||||
price: 500000,
|
||||
location: "Damascus, Al-Mazzeh",
|
||||
bedrooms: 5,
|
||||
bathrooms: 4,
|
||||
area: 450,
|
||||
status: "available",
|
||||
images: [],
|
||||
features: ["swimmingPool", "privateGarden", "parking", "superLuxFinish"]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "modernApartmentAleppo",
|
||||
type: "apartment",
|
||||
price: 250000,
|
||||
location: "Aleppo, Al-Shahba",
|
||||
bedrooms: 3,
|
||||
bathrooms: 2,
|
||||
area: 180,
|
||||
status: "booked",
|
||||
images: [],
|
||||
features: ["equippedKitchen", "centralHeating", "balcony", "securitySystem"]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "familyHouseHoms",
|
||||
type: "house",
|
||||
price: 350000,
|
||||
location: "Homs, Baba Amr",
|
||||
bedrooms: 4,
|
||||
bathrooms: 3,
|
||||
area: 300,
|
||||
status: "available",
|
||||
images: [],
|
||||
features: ["largeGarden", "receptionHall", "maidRoom", "garage"]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "seasideApartmentLatakia",
|
||||
type: "apartment",
|
||||
price: 300000,
|
||||
location: "Latakia, Blue Beach",
|
||||
bedrooms: 3,
|
||||
bathrooms: 2,
|
||||
area: 200,
|
||||
status: "available",
|
||||
images: [],
|
||||
features: ["seaView", "centralHeating", "centralAC", "parking"]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "villaDaraa",
|
||||
type: "villa",
|
||||
price: 400000,
|
||||
location: "Daraa, Doctors District",
|
||||
bedrooms: 4,
|
||||
bathrooms: 3,
|
||||
area: 350,
|
||||
status: "booked",
|
||||
images: [],
|
||||
features: ["fruitGarden", "highWall", "advancedSecurity", "storage"]
|
||||
}
|
||||
]);
|
||||
|
||||
const [users, setUsers] = useState([
|
||||
{
|
||||
id: 1,
|
||||
name: "Ahmed Mohamed",
|
||||
email: "ahmed@example.com",
|
||||
phone: "+963 123 456 789",
|
||||
joinDate: "2024-01-15",
|
||||
activeBookings: 1,
|
||||
totalBookings: 3,
|
||||
currentBooking: {
|
||||
propertyId: 2,
|
||||
propertyName: "modernApartmentAleppo",
|
||||
startDate: "2024-02-01",
|
||||
endDate: "2024-08-01",
|
||||
duration: "6 months",
|
||||
totalAmount: 1500000
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Sara Ahmed",
|
||||
email: "sara@example.com",
|
||||
phone: "+963 987 654 321",
|
||||
joinDate: "2024-02-10",
|
||||
activeBookings: 0,
|
||||
totalBookings: 2,
|
||||
currentBooking: null
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Mohammed Al-Halabi",
|
||||
email: "mohammed@example.com",
|
||||
phone: "+963 555 123 456",
|
||||
joinDate: "2024-01-25",
|
||||
activeBookings: 1,
|
||||
totalBookings: 1,
|
||||
currentBooking: {
|
||||
propertyId: 5,
|
||||
propertyName: "villaDaraa",
|
||||
startDate: "2024-02-15",
|
||||
endDate: "2024-05-15",
|
||||
duration: "3 months",
|
||||
totalAmount: 1200000
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
const [bookingRequests, setBookingRequests] = useState([
|
||||
{
|
||||
id: "B001",
|
||||
userId: 2,
|
||||
userName: "Sara Ahmed",
|
||||
propertyId: 1,
|
||||
propertyName: "luxuryVillaDamascus",
|
||||
startDate: "2024-03-01",
|
||||
endDate: "2024-06-01",
|
||||
duration: "3 months",
|
||||
totalAmount: 1500000,
|
||||
status: "pending",
|
||||
requestDate: "2024-02-20"
|
||||
},
|
||||
{
|
||||
id: "B002",
|
||||
userId: 1,
|
||||
userName: "Ahmed Mohamed",
|
||||
propertyId: 4,
|
||||
propertyName: "seasideApartmentLatakia",
|
||||
startDate: "2024-03-15",
|
||||
endDate: "2024-05-15",
|
||||
duration: "2 months",
|
||||
totalAmount: 600000,
|
||||
status: "pending",
|
||||
requestDate: "2024-02-18"
|
||||
}
|
||||
]);
|
||||
|
||||
const formatNumber = (num) => {
|
||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
};
|
||||
|
||||
const fadeInUp = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.5 }
|
||||
}
|
||||
};
|
||||
|
||||
const staggerContainer = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cardHover = {
|
||||
rest: {
|
||||
scale: 1,
|
||||
y: 0,
|
||||
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.05)"
|
||||
},
|
||||
hover: {
|
||||
scale: 1.02,
|
||||
y: -5,
|
||||
boxShadow: "0 10px 25px rgba(0, 0, 0, 0.1)",
|
||||
transition: {
|
||||
type: "spring",
|
||||
stiffness: 300
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const buttonHover = {
|
||||
rest: { scale: 1 },
|
||||
hover: { scale: 1.05 },
|
||||
tap: { scale: 0.98 }
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const totalBookings = users.reduce((sum, user) => sum + user.activeBookings, 0);
|
||||
const availableProps = properties.filter(p => p.status === "available").length;
|
||||
|
||||
setStats({
|
||||
totalUsers: users.length,
|
||||
totalProperties: properties.length,
|
||||
activeBookings: totalBookings,
|
||||
availableProperties: availableProps
|
||||
});
|
||||
}, [users, properties]);
|
||||
|
||||
const handleBookingAction = (bookingId, action) => {
|
||||
setBookingRequests(prev =>
|
||||
prev.map(booking =>
|
||||
booking.id === bookingId
|
||||
? { ...booking, status: action === 'accept' ? 'approved' : 'rejected' }
|
||||
: booking
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handlePropertyAction = (propertyId, action) => {
|
||||
if (action === 'delete') {
|
||||
setProperties(prev => prev.filter(p => p.id !== propertyId));
|
||||
}
|
||||
};
|
||||
|
||||
const showUserDetails = (user) => {
|
||||
setSelectedUser(user);
|
||||
};
|
||||
|
||||
const getLocation = (location) => {
|
||||
const [city, district] = location.split(",").map(s => s.trim());
|
||||
|
||||
// تحويل القيم إلى مفاتيح ترجمة
|
||||
const cityKey = city.toLowerCase();
|
||||
const districtKey = district.replace(/\s+/g, '');
|
||||
|
||||
return `${t(cityKey)}, ${t(districtKey)}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen bg-gray-50 p-4 md:p-6 font-sans ${currentLanguage === 'ar' ? 'text-right' : 'text-left'}`}>
|
||||
{/* Header بدون زر اختيار اللغة */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="mb-8"
|
||||
>
|
||||
<div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2 tracking-tight">
|
||||
{t("adminDashboard")}
|
||||
</h1>
|
||||
<p className="text-gray-600 text-base mb-1">{t("manageProperties")}</p>
|
||||
<p className="text-gray-500 text-sm">{t("pricesInSYP")}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* إحصائيات */}
|
||||
<motion.div
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"
|
||||
variants={staggerContainer}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
whileHover="hover"
|
||||
variants={cardHover}
|
||||
className="bg-gradient-to-br from-blue-600 to-blue-700 text-white rounded-xl shadow p-5"
|
||||
>
|
||||
<div className={`flex items-center justify-between mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
||||
<div className="p-3 bg-white/20 rounded-lg">
|
||||
<Users className="w-6 h-6" />
|
||||
</div>
|
||||
<div className={currentLanguage === 'ar' ? 'text-left' : 'text-right'}>
|
||||
<div className="text-2xl font-bold mb-1">{stats.totalUsers}</div>
|
||||
<div className="text-blue-100 text-sm">{t("totalUsers")}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-blue-100 mt-3 pt-3 border-t border-blue-400/30">
|
||||
{users.filter(u => u.activeBookings > 0).length} {t("usersWithActiveBookings")}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
whileHover="hover"
|
||||
variants={cardHover}
|
||||
className="bg-gradient-to-br from-emerald-600 to-emerald-700 text-white rounded-xl shadow p-5"
|
||||
>
|
||||
<div className={`flex items-center justify-between mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
||||
<div className="p-3 bg-white/20 rounded-lg">
|
||||
<Home className="w-6 h-6" />
|
||||
</div>
|
||||
<div className={currentLanguage === 'ar' ? 'text-left' : 'text-right'}>
|
||||
<div className="text-2xl font-bold mb-1">{stats.totalProperties}</div>
|
||||
<div className="text-emerald-100 text-sm">{t("totalProperties")}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-emerald-100 mt-3 pt-3 border-t border-emerald-400/30">
|
||||
{stats.availableProperties} {t("propertiesAvailable")}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
whileHover="hover"
|
||||
variants={cardHover}
|
||||
className="bg-gradient-to-br from-purple-600 to-purple-700 text-white rounded-xl shadow p-5"
|
||||
>
|
||||
<div className={`flex items-center justify-between mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
||||
<div className="p-3 bg-white/20 rounded-lg">
|
||||
<Calendar className="w-6 h-6" />
|
||||
</div>
|
||||
<div className={currentLanguage === 'ar' ? 'text-left' : 'text-right'}>
|
||||
<div className="text-2xl font-bold mb-1">{stats.activeBookings}</div>
|
||||
<div className="text-purple-100 text-sm">{t("activeBookings")}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-purple-100 mt-3 pt-3 border-t border-purple-400/30">
|
||||
{bookingRequests.filter(b => b.status === 'pending').length} {t("bookingRequestsPending")}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
whileHover="hover"
|
||||
variants={cardHover}
|
||||
className="bg-gradient-to-br from-amber-600 to-amber-700 text-white rounded-xl shadow p-5"
|
||||
>
|
||||
<div className={`flex items-center justify-between mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
||||
<div className="p-3 bg-white/20 rounded-lg">
|
||||
<Home className="w-6 h-6" />
|
||||
</div>
|
||||
<div className={currentLanguage === 'ar' ? 'text-left' : 'text-right'}>
|
||||
<div className="text-2xl font-bold mb-1">{stats.availableProperties}</div>
|
||||
<div className="text-amber-100 text-sm">{t("availableProperties")}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-amber-100 mt-3 pt-3 border-t border-amber-400/30">
|
||||
{properties.filter(p => p.status === 'available').length} {t("propertiesReadyForRent")}
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="mb-6"
|
||||
>
|
||||
<div className={`flex flex-wrap gap-2 border-b border-gray-200 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
||||
<button
|
||||
onClick={() => setActiveTab('properties')}
|
||||
className={`px-4 py-3 font-medium text-sm rounded-t-lg transition-all ${activeTab === 'properties' ? 'bg-white border-t border-x border-gray-300 text-blue-700' : 'text-gray-700 hover:text-blue-600 hover:bg-gray-100'}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Home className="w-4 h-4" />
|
||||
<span>{t("properties")}</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActiveTab('bookings')}
|
||||
className={`px-4 py-3 font-medium text-sm rounded-t-lg transition-all ${activeTab === 'bookings' ? 'bg-white border-t border-x border-gray-300 text-blue-700' : 'text-gray-700 hover:text-blue-600 hover:bg-gray-100'}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span>{t("bookingRequests")}</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setActiveTab('users')}
|
||||
className={`px-4 py-3 font-medium text-sm rounded-t-lg transition-all ${activeTab === 'users' ? 'bg-white border-t border-x border-gray-300 text-blue-700' : 'text-gray-700 hover:text-blue-600 hover:bg-gray-100'}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="w-4 h-4" />
|
||||
<span>{t("users")}</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
|
||||
{activeTab === 'properties' && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className={`flex flex-col md:flex-row md:items-center justify-between mb-6 ${currentLanguage === 'ar' ? 'md:flex-row-reverse' : ''}`}>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-1">{t("propertiesManagement")}</h2>
|
||||
<p className="text-gray-600 text-sm">{t("addEditDeleteProperties")}</p>
|
||||
</div>
|
||||
<motion.button
|
||||
variants={buttonHover}
|
||||
whileHover="hover"
|
||||
whileTap="tap"
|
||||
className="mt-3 md:mt-0 bg-blue-700 hover:bg-blue-800 text-white px-5 py-3 rounded-lg flex items-center gap-2 text-sm"
|
||||
>
|
||||
<PlusCircle className="w-4 h-4" />
|
||||
{t("addNewProperty")}
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
<div className={`mb-6 flex flex-col md:flex-row gap-3 ${currentLanguage === 'ar' ? 'md:flex-row-reverse' : ''}`}>
|
||||
<div className="relative flex-1">
|
||||
<Search className={`absolute ${currentLanguage === 'ar' ? 'right-3' : 'left-3'} top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-500`} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t("searchProperties")}
|
||||
className={`w-full ${currentLanguage === 'ar' ? 'pr-3 pl-10' : 'pl-3 pr-10'} py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm placeholder:text-gray-400`}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className={`flex gap-2 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
||||
<motion.button
|
||||
variants={buttonHover}
|
||||
whileHover="hover"
|
||||
className="px-4 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-2 text-sm"
|
||||
>
|
||||
<Filter className="w-4 h-4" />
|
||||
{t("filter")}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
variants={buttonHover}
|
||||
whileHover="hover"
|
||||
className="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg flex items-center gap-2 text-sm"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
{t("export")}
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
|
||||
{properties.map((property) => (
|
||||
<motion.div
|
||||
key={property.id}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
whileHover={{ y: -4 }}
|
||||
className="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-all duration-200"
|
||||
>
|
||||
<div className="p-5">
|
||||
<div className={`flex justify-between items-start mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-gray-900 mb-1">{t(property.name)}</h3>
|
||||
<div className="flex items-center gap-2 text-gray-600 text-xs">
|
||||
<MapPin className="w-3 h-3" />
|
||||
<span>{getLocation(property.location)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className={`px-2.5 py-1 rounded-full text-xs font-medium ${property.status === 'available' ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800'}`}>
|
||||
{property.status === 'available' ? t("available") : t("booked")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
|
||||
<div className="text-center bg-gray-50 p-3 rounded-lg">
|
||||
<div className="flex items-center justify-center gap-1 text-gray-700 mb-1 text-xs">
|
||||
<Bed className="w-3 h-3" />
|
||||
<span>{t("bedrooms")}</span>
|
||||
</div>
|
||||
<div className="font-bold text-gray-900 text-sm">{property.bedrooms}</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center bg-gray-50 p-3 rounded-lg">
|
||||
<div className="flex items-center justify-center gap-1 text-gray-700 mb-1 text-xs">
|
||||
<Bath className="w-3 h-3" />
|
||||
<span>{t("bathrooms")}</span>
|
||||
</div>
|
||||
<div className="font-bold text-gray-900 text-sm">{property.bathrooms}</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center bg-gray-50 p-3 rounded-lg">
|
||||
<div className="flex items-center justify-center gap-1 text-gray-700 mb-1 text-xs">
|
||||
<Square className="w-3 h-3" />
|
||||
<span>{t("area")}</span>
|
||||
</div>
|
||||
<div className="font-bold text-gray-900 text-sm">{property.area} m²</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center bg-gray-50 p-3 rounded-lg">
|
||||
<div className="flex items-center justify-center gap-1 text-gray-700 mb-1 text-xs">
|
||||
<DollarSign className="w-3 h-3" />
|
||||
<span>{t("price")}</span>
|
||||
</div>
|
||||
<div className="font-bold text-gray-900 text-sm">{formatNumber(property.price)} SYP/{t("month")}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-5">
|
||||
<h4 className="font-bold text-gray-900 text-sm mb-2">{t("features")}:</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{property.features.map((feature, idx) => (
|
||||
<span key={idx} className="px-2.5 py-1 bg-blue-50 text-blue-800 rounded-full text-xs font-medium">
|
||||
{t(feature)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`flex justify-end gap-2 pt-4 border-t border-gray-100 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="px-3 py-2 bg-blue-100 text-blue-800 hover:bg-blue-200 rounded-lg flex items-center gap-2 text-xs"
|
||||
>
|
||||
<Eye className="w-3 h-3" />
|
||||
{t("viewDetails")}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="px-3 py-2 bg-amber-100 text-amber-800 hover:bg-amber-200 rounded-lg flex items-center gap-2 text-xs"
|
||||
>
|
||||
<Edit className="w-3 h-3" />
|
||||
{t("edit")}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => handlePropertyAction(property.id, 'delete')}
|
||||
className="px-3 py-2 bg-red-100 text-red-800 hover:bg-red-200 rounded-lg flex items-center gap-2 text-xs"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
{t("delete")}
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{activeTab === 'bookings' && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-1">{t("bookingRequests")}</h2>
|
||||
<p className="text-gray-600 text-sm">{t("manageBookingRequests")}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-5">
|
||||
{bookingRequests.map((request) => (
|
||||
<motion.div
|
||||
key={request.id}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="border border-gray-200 rounded-lg p-5 hover:shadow-sm transition-shadow"
|
||||
>
|
||||
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<div className={`flex items-center justify-between mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
||||
<h3 className="text-base font-bold text-gray-900">{t("bookingRequest")} #{request.id}</h3>
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-medium ${request.status === 'pending' ? 'bg-yellow-100 text-yellow-800' : request.status === 'approved' ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800'}`}>
|
||||
{request.status === 'pending' ? t("pending") : request.status === 'approved' ? t("approved") : t("rejected")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
|
||||
<div className="bg-gray-50 p-3 rounded-lg">
|
||||
<div className="text-xs text-gray-600 mb-1">{t("user")}</div>
|
||||
<div className="font-bold text-gray-900 text-sm">{request.userName}</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 p-3 rounded-lg">
|
||||
<div className="text-xs text-gray-600 mb-1">{t("property")}</div>
|
||||
<div className="font-bold text-gray-900 text-sm">{t(request.propertyName)}</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 p-3 rounded-lg">
|
||||
<div className="text-xs text-gray-600 mb-1">{t("duration")}</div>
|
||||
<div className="font-bold text-gray-900 text-sm">{request.duration}</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 p-3 rounded-lg">
|
||||
<div className="text-xs text-gray-600 mb-1">{t("totalAmount")}</div>
|
||||
<div className="font-bold text-gray-900 text-sm">{formatNumber(request.totalAmount)} SYP</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-gray-600 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<CalendarDays className="w-3 h-3" />
|
||||
<span>{t("from")} <span className="font-medium">{request.startDate}</span> {t("to")} <span className="font-medium">{request.endDate}</span></span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-3 h-3" />
|
||||
<span>{t("requestDate")}: <span className="font-medium">{request.requestDate}</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{request.status === 'pending' && (
|
||||
<div className={`flex gap-2 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
||||
<motion.button
|
||||
variants={buttonHover}
|
||||
whileHover="hover"
|
||||
whileTap="tap"
|
||||
onClick={() => handleBookingAction(request.id, 'accept')}
|
||||
className="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg flex items-center gap-2 text-sm"
|
||||
>
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
{t("accept")}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
variants={buttonHover}
|
||||
whileHover="hover"
|
||||
whileTap="tap"
|
||||
onClick={() => handleBookingAction(request.id, 'reject')}
|
||||
className="px-4 py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center gap-2 text-sm"
|
||||
>
|
||||
<XCircle className="w-4 h-4" />
|
||||
{t("reject")}
|
||||
</motion.button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{activeTab === 'users' && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-1">{t("users")}</h2>
|
||||
<p className="text-gray-600 text-sm">{t("viewUserDetails")}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-5">
|
||||
{users.map((user) => (
|
||||
<motion.div
|
||||
key={user.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="border border-gray-200 rounded-lg overflow-hidden hover:shadow-sm transition-all"
|
||||
>
|
||||
<div className="p-5">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-5">
|
||||
<div className={`flex items-center gap-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
||||
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
|
||||
<User className="w-6 h-6 text-blue-700" />
|
||||
</div>
|
||||
<div className={currentLanguage === 'ar' ? 'text-right' : 'text-left'}>
|
||||
<h3 className="text-base font-bold text-gray-900 mb-1">{user.name}</h3>
|
||||
<div className="flex flex-wrap gap-3 text-xs">
|
||||
<div className="flex items-center gap-1 text-gray-700">
|
||||
<Mail className="w-3 h-3" />
|
||||
<span>{user.email}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-gray-700">
|
||||
<Phone className="w-3 h-3" />
|
||||
<span>{user.phone}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`flex gap-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
||||
<div className="text-center bg-blue-50 p-3 rounded-lg">
|
||||
<div className="text-lg font-bold text-blue-700">{user.activeBookings}</div>
|
||||
<div className="text-gray-700 text-xs">{t("activeBookings")}</div>
|
||||
</div>
|
||||
<div className="text-center bg-emerald-50 p-3 rounded-lg">
|
||||
<div className="text-lg font-bold text-emerald-700">{user.totalBookings}</div>
|
||||
<div className="text-gray-700 text-xs">{t("totalBookings")}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{user.currentBooking ? (
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-5">
|
||||
<h4 className="font-bold text-blue-900 text-sm mb-3 flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4" />
|
||||
{t("currentActiveBooking")}
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
<div className="bg-white p-3 rounded">
|
||||
<div className="text-xs text-blue-700 mb-1">{t("property")}</div>
|
||||
<div className="font-bold text-blue-900 text-sm">{t(user.currentBooking.propertyName)}</div>
|
||||
</div>
|
||||
<div className="bg-white p-3 rounded">
|
||||
<div className="text-xs text-blue-700 mb-1">{t("duration")}</div>
|
||||
<div className="font-bold text-blue-900 text-sm">{user.currentBooking.duration}</div>
|
||||
</div>
|
||||
<div className="bg-white p-3 rounded">
|
||||
<div className="text-xs text-blue-700 mb-1">{t("totalAmount")}</div>
|
||||
<div className="font-bold text-blue-900 text-sm">{formatNumber(user.currentBooking.totalAmount)} SYP</div>
|
||||
</div>
|
||||
<div className="bg-white p-3 rounded">
|
||||
<div className="text-xs text-blue-700 mb-1">{t("bookingPeriod")}</div>
|
||||
<div className="font-bold text-blue-900 text-sm">
|
||||
{user.currentBooking.startDate} {t("to")} {user.currentBooking.endDate}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-gray-100 border border-gray-300 rounded-lg p-4 mb-5 text-center">
|
||||
<div className="text-gray-600 text-sm">{t("noActiveBookings")}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<motion.button
|
||||
variants={buttonHover}
|
||||
whileHover="hover"
|
||||
whileTap="tap"
|
||||
onClick={() => showUserDetails(user)}
|
||||
className="px-4 py-2.5 bg-blue-700 hover:bg-blue-800 text-white rounded-lg flex items-center gap-2 text-sm"
|
||||
>
|
||||
<Eye className="w-4 h-4" />
|
||||
{t("viewFullDetails")}
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedUser && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto"
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className={`flex justify-between items-center mb-6 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
||||
<h3 className="text-lg font-bold text-gray-900">{t("userDetails")}: {selectedUser.name}</h3>
|
||||
<button
|
||||
onClick={() => setSelectedUser(null)}
|
||||
className="p-2 hover:bg-gray-100 rounded-lg"
|
||||
>
|
||||
<XCircle className="w-5 h-5 text-gray-600" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<h4 className="font-bold text-sm text-gray-800 mb-3">{t("personalInformation")}</h4>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">{t("fullName")}:</span>
|
||||
<span className="font-medium">{selectedUser.name}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">{t("email")}:</span>
|
||||
<span className="font-medium">{selectedUser.email}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">{t("phoneNumber")}:</span>
|
||||
<span className="font-medium">{selectedUser.phone}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">{t("joinDate")}:</span>
|
||||
<span className="font-medium">{selectedUser.joinDate}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-50 p-4 rounded-lg">
|
||||
<h4 className="font-bold text-sm text-blue-800 mb-3">{t("bookingStatistics")}</h4>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-blue-600">{t("activeBookings")}:</span>
|
||||
<span className="font-medium text-blue-800">{selectedUser.activeBookings}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-blue-600">{t("totalBookings")}:</span>
|
||||
<span className="font-medium text-blue-800">{selectedUser.totalBookings}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
41
app/components/NavLinks.js
Normal file
41
app/components/NavLinks.js
Normal file
@ -0,0 +1,41 @@
|
||||
'use client';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
|
||||
export function NavLink({ href, children }) {
|
||||
const pathname = usePathname();
|
||||
const isActive = pathname === href;
|
||||
return (
|
||||
<Link
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
{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'
|
||||
}`}></span>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export function MobileNavLink({ href, children, onClick }) {
|
||||
const pathname = usePathname();
|
||||
const isActive = pathname === href;
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@ -1,8 +1,8 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--background: #ede6e6;
|
||||
--foreground: #156874;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@ -14,8 +14,8 @@
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
--background: #ede6e6;
|
||||
--foreground: #156874;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
378
app/i18n/config.js
Normal file
378
app/i18n/config.js
Normal file
@ -0,0 +1,378 @@
|
||||
import i18n from 'i18next';
|
||||
import { initReactI18next } from 'react-i18next';
|
||||
import LanguageDetector from 'i18next-browser-languagedetector';
|
||||
|
||||
const resources = {
|
||||
en: {
|
||||
translation: {
|
||||
"home": "Home",
|
||||
"ourProducts": "Our Products",
|
||||
"admin": "Admin",
|
||||
"logoAlt": "SweetHome Logo",
|
||||
"brandNamePart1": "Sweet",
|
||||
"brandNamePart2": "Home",
|
||||
"openMainMenu": "Open main menu",
|
||||
"switchToArabic": "Switch to Arabic",
|
||||
"switchToEnglish": "Switch to English",
|
||||
|
||||
"adminDashboard": "Admin Dashboard",
|
||||
"manageProperties": "Manage properties, bookings, and users",
|
||||
"pricesInSYP": "All prices in Syrian Pounds (SYP)",
|
||||
|
||||
|
||||
"totalUsers": "Total Users",
|
||||
"totalProperties": "Total Properties",
|
||||
"activeBookings": "Active Bookings",
|
||||
"availableProperties": "Available Properties",
|
||||
"usersWithActiveBookings": "users with active bookings",
|
||||
"propertiesAvailable": "properties available for booking",
|
||||
"bookingRequestsPending": "booking requests pending",
|
||||
"propertiesReadyForRent": "properties ready for rent",
|
||||
|
||||
|
||||
"properties": "Properties",
|
||||
"bookingRequests": "Booking Requests",
|
||||
"users": "Users",
|
||||
"propertiesManagement": "Properties Management",
|
||||
"bookingRequestsManagement": "Booking Requests Management",
|
||||
"usersManagement": "Users Management",
|
||||
|
||||
|
||||
"addEditDeleteProperties": "Add, edit, or delete available properties",
|
||||
"addNewProperty": "Add New Property",
|
||||
"searchProperties": "Search properties...",
|
||||
"filter": "Filter",
|
||||
"export": "Export",
|
||||
"viewDetails": "View Details",
|
||||
"edit": "Edit",
|
||||
"delete": "Delete",
|
||||
"features": "Features",
|
||||
"bedrooms": "Bedrooms",
|
||||
"bathrooms": "Bathrooms",
|
||||
"area": "Area",
|
||||
"price": "Price",
|
||||
"available": "Available",
|
||||
"booked": "Booked",
|
||||
"month": "month",
|
||||
"status": "Status",
|
||||
"location": "Location",
|
||||
"type": "Type",
|
||||
|
||||
"swimmingPool": "Swimming Pool",
|
||||
"privateGarden": "Private Garden",
|
||||
"parking": "Parking",
|
||||
"superLuxFinish": "Super Lux Finish",
|
||||
"equippedKitchen": "Equipped Kitchen",
|
||||
"centralHeating": "Central Heating",
|
||||
"balcony": "Balcony",
|
||||
"securitySystem": "Security System",
|
||||
"largeGarden": "Large Garden",
|
||||
"receptionHall": "Reception Hall",
|
||||
"maidRoom": "Maid Room",
|
||||
"garage": "Garage",
|
||||
"seaView": "Sea View",
|
||||
"centralAC": "Central AC",
|
||||
"fruitGarden": "Fruit Garden",
|
||||
"highWall": "High Wall",
|
||||
"advancedSecurity": "Advanced Security",
|
||||
"storage": "Storage",
|
||||
|
||||
"villa": "Villa",
|
||||
"apartment": "Apartment",
|
||||
"house": "House",
|
||||
|
||||
|
||||
"manageBookingRequests": "Manage property booking requests from users",
|
||||
"bookingRequest": "Booking Request",
|
||||
"user": "User",
|
||||
"property": "Property",
|
||||
"duration": "Duration",
|
||||
"totalAmount": "Total Amount",
|
||||
"from": "From",
|
||||
"to": "to",
|
||||
"requestDate": "Request Date",
|
||||
"pending": "Pending",
|
||||
"approved": "Approved",
|
||||
"rejected": "Rejected",
|
||||
"accept": "Accept",
|
||||
"reject": "Reject",
|
||||
"bookingId": "Booking ID",
|
||||
"startDate": "Start Date",
|
||||
"endDate": "End Date",
|
||||
|
||||
|
||||
"viewUserDetails": "View user details and their bookings",
|
||||
"activeBookings": "Active Bookings",
|
||||
"totalBookings": "Total Bookings",
|
||||
"currentActiveBooking": "Current Active Booking",
|
||||
"bookingPeriod": "Booking Period",
|
||||
"noActiveBookings": "No active bookings at the moment",
|
||||
"viewFullDetails": "View Full Details",
|
||||
"userDetails": "User Details",
|
||||
"personalInformation": "Personal Information",
|
||||
"fullName": "Full Name",
|
||||
"email": "Email",
|
||||
"phoneNumber": "Phone Number",
|
||||
"joinDate": "Join Date",
|
||||
"bookingStatistics": "Booking Statistics",
|
||||
"currentBooking": "Current Booking",
|
||||
|
||||
|
||||
"damascus": "Damascus",
|
||||
"aleppo": "Aleppo",
|
||||
"homs": "Homs",
|
||||
"latakia": "Latakia",
|
||||
"daraa": "Daraa",
|
||||
"alMazzeh": "Al-Mazzeh",
|
||||
"alShahba": "Al-Shahba",
|
||||
"babaAmr": "Baba Amr",
|
||||
"blueBeach": "Blue Beach",
|
||||
"doctorsDistrict": "Doctors District",
|
||||
|
||||
"luxuryVillaDamascus": "Luxury Villa in Damascus",
|
||||
"modernApartmentAleppo": "Modern Apartment in Aleppo",
|
||||
"familyHouseHoms": "Family House in Homs",
|
||||
"seasideApartmentLatakia": "Seaside Apartment in Latakia",
|
||||
"villaDaraa": "Villa in Daraa",
|
||||
|
||||
|
||||
"heroTitleLine1": "Finding Your New",
|
||||
"heroTitleLine2": "Home Is Simple",
|
||||
"heroSubtitle": "We provide high-quality rental listings to help you find the perfect home",
|
||||
"rentTab": "Rent",
|
||||
"buyTab": "Buy",
|
||||
"sellTab": "Sell",
|
||||
"cityStreetLabel": "City / Street",
|
||||
"cityStreetPlaceholder": "Enter city or street",
|
||||
"rentTypeLabel": "Typology of rent",
|
||||
"selectType": "Select type",
|
||||
"studio": "Studio",
|
||||
"priceLabel": "Price",
|
||||
"selectPriceRange": "Select price range",
|
||||
"priceRange1": "$0 - $500",
|
||||
"priceRange2": "$500 - $1,000",
|
||||
"priceRange3": "$1,000 - $2,000",
|
||||
"priceRange4": "$2,000 - $3,000",
|
||||
"priceRange5": "$3,000+",
|
||||
"searchButton": "Search",
|
||||
"propertiesListed": "Properties Listed",
|
||||
"citiesCovered": "Cities Covered",
|
||||
"customerSatisfaction": "Customer Satisfaction",
|
||||
"whyChooseUsTitle": "Why Choose SweetHome?",
|
||||
"whyChooseUsSubtitle": "We make finding your perfect home simple, fast, and stress-free",
|
||||
"feature1Title": "Verified Listings",
|
||||
"feature1Description": "Every property is thoroughly verified to ensure accuracy and quality. No surprises, just real homes.",
|
||||
"feature2Title": "Secure Process",
|
||||
"feature2Description": "Your safety is our priority. We provide secure transactions and protect your personal information.",
|
||||
"feature3Title": "Fast Results",
|
||||
"feature3Description": "Find your perfect home in minutes with our advanced search and matching algorithms.",
|
||||
|
||||
|
||||
"footerDescription": "Premium furniture and home decor for your perfect space.",
|
||||
"quickLinks": "Quick Links",
|
||||
"contactUs": "Contact Us",
|
||||
"stayUpdated": "Stay Updated",
|
||||
"yourEmail": "Your email",
|
||||
"subscribe": "Subscribe",
|
||||
"phone": "(+963) 938 992 000",
|
||||
"footerEmail": "info@sweethome.com",
|
||||
"allRightsReserved": "All rights reserved.",
|
||||
"copyright": "SweetHome"
|
||||
}
|
||||
},
|
||||
ar: {
|
||||
translation: {
|
||||
|
||||
"home": "الرئيسية",
|
||||
"ourProducts": "منتجاتنا",
|
||||
"admin": "الإدارة",
|
||||
// "logoAlt": "شعار سويت هوم",
|
||||
"brandNamePart1": "سويت",
|
||||
"brandNamePart2": "هوم",
|
||||
"openMainMenu": "فتح القائمة الرئيسية",
|
||||
"switchToArabic": "التبديل للعربية",
|
||||
"switchToEnglish": "التبديل للإنجليزية",
|
||||
|
||||
|
||||
"adminDashboard": "لوحة تحكم المسؤول",
|
||||
"manageProperties": "إدارة العقارات والحجوزات والمستخدمين",
|
||||
"pricesInSYP": "جميع الأسعار بالليرة السورية",
|
||||
|
||||
|
||||
"totalUsers": "إجمالي المستخدمين",
|
||||
"totalProperties": "إجمالي العقارات",
|
||||
"activeBookings": "الحجوزات النشطة",
|
||||
"availableProperties": "العقارات المتاحة",
|
||||
"usersWithActiveBookings": "مستخدم لديه حجوزات نشطة",
|
||||
"propertiesAvailable": "عقار متاح للحجز",
|
||||
"bookingRequestsPending": "طلب حجز بانتظار الموافقة",
|
||||
"propertiesReadyForRent": "عقار جاهز للإيجار",
|
||||
|
||||
|
||||
"properties": "العقارات",
|
||||
"bookingRequests": "طلبات الحجز",
|
||||
"users": "المستخدمين",
|
||||
"propertiesManagement": "إدارة العقارات",
|
||||
"bookingRequestsManagement": "إدارة طلبات الحجز",
|
||||
"usersManagement": "إدارة المستخدمين",
|
||||
|
||||
|
||||
"addEditDeleteProperties": "إضافة، تعديل، أو حذف العقارات المتاحة",
|
||||
"addNewProperty": "إضافة عقار جديد",
|
||||
"searchProperties": "بحث عن عقار...",
|
||||
"filter": "فلترة",
|
||||
"export": "تصدير",
|
||||
"viewDetails": "عرض التفاصيل",
|
||||
"edit": "تعديل",
|
||||
"delete": "حذف",
|
||||
"features": "المميزات",
|
||||
"bedrooms": "غرف نوم",
|
||||
"bathrooms": "حمامات",
|
||||
"area": "المساحة",
|
||||
"price": "السعر",
|
||||
"available": "متاح",
|
||||
"booked": "محجوز",
|
||||
"month": "شهر",
|
||||
"status": "الحالة",
|
||||
"location": "الموقع",
|
||||
"type": "النوع",
|
||||
|
||||
"swimmingPool": "مسبح",
|
||||
"privateGarden": "حديقة خاصة",
|
||||
"parking": "موقف سيارات",
|
||||
"superLuxFinish": "تشطيب سوبر لوكس",
|
||||
"equippedKitchen": "مطبخ مجهز",
|
||||
"centralHeating": "تدفئة مركزية",
|
||||
"balcony": "بلكونة",
|
||||
"securitySystem": "نظام أمني",
|
||||
"largeGarden": "حديقة كبيرة",
|
||||
"receptionHall": "صالة استقبال",
|
||||
"maidRoom": "غرفة خادمة",
|
||||
"garage": "جراج",
|
||||
"seaView": "إطلالة بحرية",
|
||||
"centralAC": "تكييف مركزي",
|
||||
"fruitGarden": "حديقة مثمرة",
|
||||
"highWall": "سور عالي",
|
||||
"advancedSecurity": "أنظمة أمن متطورة",
|
||||
"storage": "مخزن",
|
||||
|
||||
"villa": "فيلا",
|
||||
"apartment": "شقة",
|
||||
"house": "بيت",
|
||||
|
||||
|
||||
"manageBookingRequests": "إدارة طلبات حجز العقارات من المستخدمين",
|
||||
"bookingRequest": "طلب حجز",
|
||||
"user": "المستخدم",
|
||||
"property": "العقار",
|
||||
"duration": "المدة",
|
||||
"totalAmount": "القيمة الإجمالية",
|
||||
"from": "من",
|
||||
"to": "إلى",
|
||||
"requestDate": "تاريخ الطلب",
|
||||
"pending": "بانتظار الموافقة",
|
||||
"approved": "مقبول",
|
||||
"rejected": "مرفوض",
|
||||
"accept": "قبول",
|
||||
"reject": "رفض",
|
||||
"bookingId": "رقم الحجز",
|
||||
"startDate": "تاريخ البدء",
|
||||
"endDate": "تاريخ الانتهاء",
|
||||
|
||||
|
||||
"viewUserDetails": "عرض تفاصيل المستخدمين وحجوزاتهم",
|
||||
"activeBookings": "حجوزات نشطة",
|
||||
"totalBookings": "إجمالي الحجوزات",
|
||||
"currentActiveBooking": "الحجز النشط الحالي",
|
||||
"bookingPeriod": "فترة الحجز",
|
||||
"noActiveBookings": "لا يوجد حجوزات نشطة حالياً",
|
||||
"viewFullDetails": "عرض تفاصيل كاملة",
|
||||
"userDetails": "تفاصيل المستخدم",
|
||||
"personalInformation": "المعلومات الشخصية",
|
||||
"fullName": "الاسم الكامل",
|
||||
"email": "البريد الإلكتروني",
|
||||
"phoneNumber": "رقم الهاتف",
|
||||
"joinDate": "تاريخ التسجيل",
|
||||
"bookingStatistics": "إحصائيات الحجوزات",
|
||||
"currentBooking": "الحجز الحالي",
|
||||
|
||||
|
||||
"damascus": "دمشق",
|
||||
"aleppo": "حلب",
|
||||
"homs": "حمص",
|
||||
"latakia": "اللاذقية",
|
||||
"daraa": "درعا",
|
||||
"alMazzeh": "المزة",
|
||||
"alShahba": "الشهباء",
|
||||
"babaAmr": "بابا عمرو",
|
||||
"blueBeach": "الشاطئ الأزرق",
|
||||
"doctorsDistrict": "حي الأطباء",
|
||||
|
||||
"luxuryVillaDamascus": "فيلا فاخرة في دمشق",
|
||||
"modernApartmentAleppo": "شقة حديثة في حلب",
|
||||
"familyHouseHoms": "بيت عائلي في حمص",
|
||||
"seasideApartmentLatakia": "شقة بجانب البحر في اللاذقية",
|
||||
"villaDaraa": "فيلا في درعا",
|
||||
|
||||
|
||||
"heroTitleLine1": "إيجاد منزلك الجديد",
|
||||
"heroTitleLine2": "أصبح سهلاً",
|
||||
"heroSubtitle": "نوفر قوائم عقارات عالية الجودة لمساعدتك في إيجاد المنزل المثالي",
|
||||
"rentTab": "إيجار",
|
||||
"buyTab": "شراء",
|
||||
"sellTab": "بيع",
|
||||
"cityStreetLabel": "المدينة / الشارع",
|
||||
"cityStreetPlaceholder": "أدخل المدينة أو الشارع",
|
||||
"rentTypeLabel": "نوع الإيجار",
|
||||
"selectType": "اختر النوع",
|
||||
"studio": "استوديو",
|
||||
"priceLabel": "السعر",
|
||||
"selectPriceRange": "اختر نطاق السعر",
|
||||
"priceRange1": "٠$ - ٥٠٠$",
|
||||
"priceRange2": "٥٠٠$ - ١٠٠٠$",
|
||||
"priceRange3": "١٠٠٠$ - ٢٠٠٠$",
|
||||
"priceRange4": "٢٠٠٠$ - ٣٠٠٠$",
|
||||
"priceRange5": "٣٠٠٠$+",
|
||||
"searchButton": "بحث",
|
||||
"propertiesListed": "عقار مدرج",
|
||||
"citiesCovered": "مدينة مغطاة",
|
||||
"customerSatisfaction": "رضا العملاء",
|
||||
"whyChooseUsTitle": "لماذا تختار سويت هوم؟",
|
||||
"whyChooseUsSubtitle": "نجعل عملية إيجاد منزلك المثالي سهلة وسريعة وخالية من التوتر",
|
||||
"feature1Title": "قوائم موثقة",
|
||||
"feature1Description": "كل عقار يتم التحقق منه بدقة لضمان الدقة والجودة. لا مفاجآت، فقط منازل حقيقية.",
|
||||
"feature2Title": "عملية آمنة",
|
||||
"feature2Description": "سلامتك هي أولويتنا. نوفر معاملات آمنة ونحمي معلوماتك الشخصية.",
|
||||
"feature3Title": "نتائج سريعة",
|
||||
"feature3Description": "اعثر على منزلك المثالي في دقائق باستخدام خوارزميات البحث والمطابقة المتقدمة لدينا.",
|
||||
|
||||
"footerDescription": "أثاث فاخر وديكور منزلي لمساحتك المثالية.",
|
||||
"quickLinks": "روابط سريعة",
|
||||
"contactUs": "اتصل بنا",
|
||||
"stayUpdated": "ابق على اطلاع",
|
||||
"yourEmail": "بريدك الإلكتروني",
|
||||
"subscribe": "اشتراك",
|
||||
"phone": "(+963) 938 992 000",
|
||||
"footerEmail": "info@sweethome.com",
|
||||
"allRightsReserved": "جميع الحقوق محفوظة.",
|
||||
"copyright": "سويت هوم"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
i18n
|
||||
.use(LanguageDetector)
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
resources,
|
||||
fallbackLng: 'en',
|
||||
interpolation: {
|
||||
escapeValue: false
|
||||
},
|
||||
detection: {
|
||||
order: ['localStorage', 'navigator'],
|
||||
caches: ['localStorage']
|
||||
}
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
278
app/layout.js
278
app/layout.js
@ -1,5 +1,15 @@
|
||||
'use client';
|
||||
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import "./i18n/config";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { NavLink, MobileNavLink } from "./components/NavLinks";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Globe } from 'lucide-react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
@ -11,19 +21,265 @@ const geistMono = Geist_Mono({
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
const { t, i18n } = useTranslation();
|
||||
const [currentLanguage, setCurrentLanguage] = useState('en');
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
const changeLanguage = (lng) => {
|
||||
i18n.changeLanguage(lng);
|
||||
setCurrentLanguage(lng);
|
||||
localStorage.setItem('language', lng);
|
||||
|
||||
if (lng === 'ar') {
|
||||
document.documentElement.dir = 'rtl';
|
||||
document.documentElement.lang = 'ar';
|
||||
document.documentElement.classList.add('rtl');
|
||||
document.documentElement.classList.remove('ltr');
|
||||
} else {
|
||||
document.documentElement.dir = 'ltr';
|
||||
document.documentElement.lang = 'en';
|
||||
document.documentElement.classList.add('ltr');
|
||||
document.documentElement.classList.remove('rtl');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const savedLanguage = localStorage.getItem('language') || 'en';
|
||||
const lng = savedLanguage;
|
||||
setCurrentLanguage(lng);
|
||||
i18n.changeLanguage(lng);
|
||||
|
||||
if (lng === 'ar') {
|
||||
document.documentElement.dir = 'rtl';
|
||||
document.documentElement.lang = 'ar';
|
||||
document.documentElement.classList.add('rtl');
|
||||
} else {
|
||||
document.documentElement.dir = 'ltr';
|
||||
document.documentElement.lang = 'en';
|
||||
document.documentElement.classList.add('ltr');
|
||||
}
|
||||
}, [i18n]);
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
setIsMobileMenuOpen(!isMobileMenuOpen);
|
||||
};
|
||||
|
||||
const closeMobileMenu = () => {
|
||||
setIsMobileMenuOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
<html lang={currentLanguage}>
|
||||
<head>
|
||||
<title>{currentLanguage === 'ar' ? 'سويت هوم - أثاث فاخر' : 'SweetHome - Premium Furniture'}</title>
|
||||
<meta name="description" content={currentLanguage === 'ar' ? 'اكتشف أثاث وديكور منزلي فاخر' : 'Discover premium furniture and home decor'} />
|
||||
</head>
|
||||
<body className={`${geistSans.variable} ${geistMono.variable} antialiased ${currentLanguage === 'ar' ? 'font-arabic' : ''}`}>
|
||||
<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">
|
||||
<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' : ''}`}>
|
||||
|
||||
<div className="flex items-center">
|
||||
<Link href="/" className="flex items-center space-x-3 group">
|
||||
<div className="relative w-10 h-10">
|
||||
<Image
|
||||
src="/logo.png"
|
||||
alt={t("logoAlt")}
|
||||
fill
|
||||
className="object-contain group-hover:scale-105 transition-transform duration-300"
|
||||
priority
|
||||
sizes="40px"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-3xl font-bold text-gray-800 hidden md:block">
|
||||
{t("brandNamePart1")}<span className="text-amber-600">{t("brandNamePart2")}</span>
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:flex items-center space-x-4">
|
||||
<div className={`flex items-center space-x-1 ${currentLanguage === 'ar' ? 'flex-row-reverse space-x-reverse' : ''}`}>
|
||||
<NavLink href="/">
|
||||
{t("home")}
|
||||
</NavLink>
|
||||
<NavLink href="/products">
|
||||
{t("ourProducts")}
|
||||
</NavLink>
|
||||
<NavLink href="/admin">
|
||||
{t("admin")}
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1, rotate: 360 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={() => changeLanguage(currentLanguage === 'en' ? 'ar' : 'en')}
|
||||
className="flex items-center justify-center w-10 h-10 bg-gray-100 hover:bg-gray-200 rounded-full transition-all duration-200 ml-4"
|
||||
aria-label={currentLanguage === 'en' ? t("switchToArabic") : t("switchToEnglish")}
|
||||
title={currentLanguage === 'en' ? t("switchToArabic") : t("switchToEnglish")}
|
||||
>
|
||||
<Globe className="w-5 h-5 text-gray-700" />
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
<div className="md:hidden flex items-center gap-3">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1, rotate: 360 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
onClick={() => changeLanguage(currentLanguage === 'en' ? 'ar' : 'en')}
|
||||
className="flex items-center justify-center w-10 h-10 bg-gray-100 hover:bg-gray-200 rounded-full transition-colors"
|
||||
aria-label={currentLanguage === 'en' ? t("switchToArabic") : t("switchToEnglish")}
|
||||
title={currentLanguage === 'en' ? t("switchToArabic") : t("switchToEnglish")}
|
||||
>
|
||||
<Globe className="w-5 h-5 text-gray-700" />
|
||||
</motion.button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleMobileMenu}
|
||||
className="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-amber-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500 transition-colors"
|
||||
aria-expanded={isMobileMenuOpen}
|
||||
aria-label={t("openMainMenu")}
|
||||
>
|
||||
<span className="sr-only">{t("openMainMenu")}</span>
|
||||
{isMobileMenuOpen ? (
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isMobileMenuOpen && (
|
||||
<motion.div
|
||||
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"
|
||||
>
|
||||
<div className="px-2 pt-2 pb-3 space-y-1">
|
||||
<MobileNavLink href="/" onClick={closeMobileMenu}>
|
||||
{t("home")}
|
||||
</MobileNavLink>
|
||||
<MobileNavLink href="/products" onClick={closeMobileMenu}>
|
||||
{t("ourProducts")}
|
||||
</MobileNavLink>
|
||||
<MobileNavLink href="/admin" onClick={closeMobileMenu}>
|
||||
{t("admin")}
|
||||
</MobileNavLink>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
<main className={`pt-16 min-h-screen bg-gradient-to-b from-gray-50 to-white ${currentLanguage === 'ar' ? 'text-right' : 'text-left'}`}>
|
||||
{children}
|
||||
</main>
|
||||
|
||||
<footer className="bg-gray-900 text-white py-12">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className={`grid grid-cols-1 md:grid-cols-4 gap-8 ${currentLanguage === 'ar' ? 'text-right' : 'text-left'}`}>
|
||||
<div className="space-y-4">
|
||||
<div className={`flex items-center ${currentLanguage === 'ar' ? 'flex-row-reverse' : 'space-x-3'}`}>
|
||||
<div className="relative w-10 h-10">
|
||||
<Image
|
||||
src="/logo.png"
|
||||
alt={t("logoAlt")}
|
||||
fill
|
||||
className="object-contain"
|
||||
sizes="40px"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-3xl font-bold">
|
||||
{t("brandNamePart1")}<span className="text-amber-400">{t("brandNamePart2")}</span>
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm">
|
||||
{t("footerDescription")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">{t("quickLinks")}</h3>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link href="/" className="text-gray-400 hover:text-white transition-colors block py-1">
|
||||
{t("home")}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/products" className="text-gray-400 hover:text-white transition-colors block py-1">
|
||||
{t("ourProducts")}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/admin" className="text-gray-400 hover:text-white transition-colors block py-1">
|
||||
{t("admin")}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">{t("contactUs")}</h3>
|
||||
<ul className="space-y-3 text-gray-400">
|
||||
<li className={`flex items-center ${currentLanguage === 'ar' ? 'flex-row-reverse' : 'space-x-2'}`}>
|
||||
<svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
<span>{t("phone")}</span>
|
||||
</li>
|
||||
<li className={`flex items-center ${currentLanguage === 'ar' ? 'flex-row-reverse' : 'space-x-2'}`}>
|
||||
<svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span>{t("footerEmail")}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">{t("stayUpdated")}</h3>
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="email"
|
||||
placeholder={t("yourEmail")}
|
||||
className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent"
|
||||
/>
|
||||
<button className="w-full bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-lg transition-colors font-medium">
|
||||
{t("subscribe")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400 text-sm">
|
||||
<p>© {currentYear} {t("copyright")}. {t("allRightsReserved")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
436
app/page.js
436
app/page.js
@ -1,65 +1,383 @@
|
||||
import Image from "next/image";
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import './i18n/config';
|
||||
|
||||
export default function HomePage() {
|
||||
const { t } = useTranslation();
|
||||
const constraintsRef = useRef(null);
|
||||
|
||||
const fadeInUp = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.6,
|
||||
ease: "easeOut"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const staggerContainer = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.2,
|
||||
delayChildren: 0.3
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const buttonHover = {
|
||||
rest: { scale: 1 },
|
||||
hover: {
|
||||
scale: 1.05,
|
||||
transition: {
|
||||
type: "spring",
|
||||
stiffness: 400,
|
||||
damping: 10
|
||||
}
|
||||
},
|
||||
tap: { scale: 0.95 }
|
||||
};
|
||||
|
||||
const floatingAnimation = {
|
||||
y: [0, -10, 0],
|
||||
transition: {
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut"
|
||||
}
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.js file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
<div className="min-h-screen" ref={constraintsRef}>
|
||||
<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="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
|
||||
<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
|
||||
className="text-center mb-12"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={staggerContainer}
|
||||
>
|
||||
<motion.h1
|
||||
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight tracking-tight"
|
||||
variants={fadeInUp}
|
||||
>
|
||||
{t("heroTitleLine1")}<br />
|
||||
<motion.span
|
||||
className="text-amber-400"
|
||||
animate={floatingAnimation}
|
||||
>
|
||||
{t("heroTitleLine2")}
|
||||
</motion.span>
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
className="text-base sm:text-lg text-gray-200 max-w-2xl mx-auto leading-relaxed"
|
||||
variants={fadeInUp}
|
||||
>
|
||||
{t("heroSubtitle")}
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white/10 backdrop-blur-lg rounded-2xl p-6 sm:p-8 border border-white/20 shadow-2xl"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.5 }}
|
||||
whileHover={{
|
||||
boxShadow: "0 20px 40px rgba(0,0,0,0.3)",
|
||||
transition: { duration: 0.3 }
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-wrap gap-2 mb-8">
|
||||
<motion.button
|
||||
className="px-4 py-2 bg-amber-500 text-white font-medium rounded-lg text-sm"
|
||||
variants={buttonHover}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
whileTap="tap"
|
||||
>
|
||||
{t("rentTab")}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
className="px-4 py-2 bg-white/20 text-white font-medium rounded-lg hover:bg-white/30 transition-colors text-sm"
|
||||
variants={buttonHover}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
whileTap="tap"
|
||||
>
|
||||
{t("buyTab")}
|
||||
</motion.button>
|
||||
<motion.button
|
||||
className="px-4 py-2 bg-white/20 text-white font-medium rounded-lg hover:bg-white/30 transition-colors text-sm"
|
||||
variants={buttonHover}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
whileTap="tap"
|
||||
>
|
||||
{t("sellTab")}
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
{t("cityStreetLabel")}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg bg-white/90 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-sm"
|
||||
placeholder={t("cityStreetPlaceholder")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
{t("rentTypeLabel")}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
</div>
|
||||
<select
|
||||
className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg bg-white/90 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent appearance-none text-sm"
|
||||
>
|
||||
<option value="">{t("selectType")}</option>
|
||||
<option value="apartment">{t("apartment")}</option>
|
||||
<option value="house">{t("house")}</option>
|
||||
<option value="villa">{t("villa")}</option>
|
||||
<option value="studio">{t("studio")}</option>
|
||||
<option value="penthouse">{t("penthouse")}</option>
|
||||
</select>
|
||||
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
||||
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
{t("priceLabel")}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<select
|
||||
className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg bg-white/90 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent appearance-none text-sm"
|
||||
>
|
||||
<option value="">{t("selectPriceRange")}</option>
|
||||
<option value="0-500">{t("priceRange1")}</option>
|
||||
<option value="500-1000">{t("priceRange2")}</option>
|
||||
<option value="1000-2000">{t("priceRange3")}</option>
|
||||
<option value="2000-3000">{t("priceRange4")}</option>
|
||||
<option value="3000+">{t("priceRange5")}</option>
|
||||
</select>
|
||||
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
||||
<svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-end">
|
||||
<motion.button
|
||||
className="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 flex items-center justify-center text-sm"
|
||||
variants={buttonHover}
|
||||
initial="rest"
|
||||
whileHover="hover"
|
||||
whileTap="tap"
|
||||
>
|
||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
{t("searchButton")}
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<motion.div
|
||||
className="absolute bottom-8 left-1/2 transform -translate-x-1/2"
|
||||
animate={{
|
||||
y: [0, 10, 0],
|
||||
}}
|
||||
transition={{
|
||||
duration: 1.5,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut"
|
||||
}}
|
||||
>
|
||||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||||
</svg>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
<section className="py-20 bg-gray-50">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
className="text-center mb-16"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, amount: 0.5 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4 tracking-tight">
|
||||
{t("whyChooseUsTitle")}
|
||||
</h2>
|
||||
<p className="text-gray-600 max-w-2xl mx-auto text-base">
|
||||
{t("whyChooseUsSubtitle")}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="grid grid-cols-1 md:grid-cols-3 gap-8"
|
||||
variants={staggerContainer}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
>
|
||||
<motion.div
|
||||
className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 cursor-pointer overflow-hidden relative group"
|
||||
variants={fadeInUp}
|
||||
initial="rest"
|
||||
whileHover={{ y: -5 }}
|
||||
animate="rest"
|
||||
>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-gradient-to-br from-amber-500/5 to-amber-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
initial={{ scale: 0.5, opacity: 0 }}
|
||||
whileHover={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center mb-4 relative z-10"
|
||||
>
|
||||
<svg className="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
className="text-lg font-bold text-gray-900 mb-3 relative z-10"
|
||||
>
|
||||
{t("feature1Title")}
|
||||
</h3>
|
||||
<p
|
||||
className="text-gray-600 relative z-10 text-sm leading-relaxed"
|
||||
>
|
||||
{t("feature1Description")}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 cursor-pointer overflow-hidden relative group"
|
||||
variants={fadeInUp}
|
||||
initial="rest"
|
||||
whileHover={{ y: -5 }}
|
||||
animate="rest"
|
||||
>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-gradient-to-br from-amber-500/5 to-amber-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
initial={{ scale: 0.5, opacity: 0 }}
|
||||
whileHover={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 0.4, delay: 0.1 }}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center mb-4 relative z-10"
|
||||
>
|
||||
<svg className="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
className="text-lg font-bold text-gray-900 mb-3 relative z-10"
|
||||
>
|
||||
{t("feature2Title")}
|
||||
</h3>
|
||||
<p
|
||||
className="text-gray-600 relative z-10 text-sm leading-relaxed"
|
||||
>
|
||||
{t("feature2Description")}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 cursor-pointer overflow-hidden relative group"
|
||||
variants={fadeInUp}
|
||||
initial="rest"
|
||||
whileHover={{ y: -5 }}
|
||||
animate="rest"
|
||||
>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-gradient-to-br from-amber-500/5 to-amber-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
initial={{ scale: 0.5, opacity: 0 }}
|
||||
whileHover={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 0.4, delay: 0.2 }}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center mb-4 relative z-10"
|
||||
>
|
||||
<svg className="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
className="text-lg font-bold text-gray-900 mb-3 relative z-10"
|
||||
>
|
||||
{t("feature3Title")}
|
||||
</h3>
|
||||
<p
|
||||
className="text-gray-600 relative z-10 text-sm leading-relaxed"
|
||||
>
|
||||
{t("feature3Description")}
|
||||
</p>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
1263
package-lock.json
generated
1263
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
14
package.json
14
package.json
@ -8,13 +8,23 @@
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"flowbite": "^4.0.1",
|
||||
"flowbite-react": "^0.12.16",
|
||||
"framer-motion": "^12.29.2",
|
||||
"i18next": "^25.8.0",
|
||||
"i18next-browser-languagedetector": "^8.2.0",
|
||||
"lucide-react": "^0.563.0",
|
||||
"next": "16.1.6",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3"
|
||||
"react-dom": "19.2.3",
|
||||
"react-i18next": "^16.5.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"autoprefixer": "^10.4.23",
|
||||
"babel-plugin-react-compiler": "1.0.0",
|
||||
"tailwindcss": "^4"
|
||||
"daisyui": "^5.5.14",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^4.1.18"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
public/hero.jpg
Normal file
BIN
public/hero.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 MiB |
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Reference in New Issue
Block a user