Added map for home
This commit is contained in:
Rahaf
192
app/components/home/HeroSearch.js
Normal file
192
app/components/home/HeroSearch.js
Normal file
@ -0,0 +1,192 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Search, MapPin, Home, DollarSign } from 'lucide-react';
|
||||
|
||||
export default function HeroSearch({ onSearch }) {
|
||||
const { t } = useTranslation();
|
||||
const [activeTab, setActiveTab] = useState('rent');
|
||||
const [filters, setFilters] = useState({
|
||||
city: '',
|
||||
propertyType: '',
|
||||
priceRange: '',
|
||||
identityType: 'syrian'
|
||||
});
|
||||
|
||||
const cities = [
|
||||
{ id: 'all', label: 'جميع المدن' },
|
||||
{ id: 'دمشق', label: 'دمشق' },
|
||||
{ id: 'حلب', label: 'حلب' },
|
||||
{ id: 'حمص', label: 'حمص' },
|
||||
{ id: 'اللاذقية', label: 'اللاذقية' },
|
||||
{ id: 'درعا', label: 'درعا' }
|
||||
];
|
||||
|
||||
const propertyTypes = [
|
||||
{ id: 'all', label: 'الكل' },
|
||||
{ id: 'apartment', label: 'شقة' },
|
||||
{ id: 'villa', label: 'فيلا' },
|
||||
{ id: 'house', label: 'بيت' },
|
||||
{ id: 'studio', label: 'استوديو' }
|
||||
];
|
||||
|
||||
const priceRanges = [
|
||||
{ id: 'all', label: 'جميع الأسعار' },
|
||||
{ id: '0-500', label: 'أقل من 50$' },
|
||||
{ id: '500-1000', label: '50$ - 100$' },
|
||||
{ id: '1000-2000', label: '100$ - 200$' },
|
||||
{ id: '2000-3000', label: '200$ - 300$' },
|
||||
{ id: '3000+', label: 'أكثر من 300$' }
|
||||
];
|
||||
|
||||
const identityTypes = [
|
||||
{ id: 'syrian', label: 'هوية سورية' },
|
||||
{ id: 'passport', label: 'جواز سفر' }
|
||||
];
|
||||
|
||||
const handleSearch = () => {
|
||||
onSearch({
|
||||
...filters,
|
||||
propertyType: filters.propertyType || 'all',
|
||||
city: filters.city || 'all',
|
||||
priceRange: filters.priceRange || 'all'
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<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 }}
|
||||
>
|
||||
<div className="flex flex-wrap gap-2 mb-8">
|
||||
{['rent', 'buy', 'sell'].map((tab) => (
|
||||
<motion.button
|
||||
key={tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`px-4 py-2 rounded-lg font-medium text-sm transition-all ${
|
||||
activeTab === tab
|
||||
? 'bg-amber-500 text-white'
|
||||
: 'bg-white/20 text-white hover:bg-white/30'
|
||||
}`}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
{t(`${tab}Tab`)}
|
||||
</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">
|
||||
<div className="flex items-center gap-1">
|
||||
<MapPin className="w-4 h-4" />
|
||||
{t("cityStreetLabel")}
|
||||
</div>
|
||||
</label>
|
||||
<select
|
||||
value={filters.city}
|
||||
onChange={(e) => setFilters({...filters, city: e.target.value})}
|
||||
className="w-full px-4 py-3 bg-white/90 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm appearance-none cursor-pointer"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'left 1rem center',
|
||||
backgroundSize: '1rem',
|
||||
paddingLeft: '2.5rem'
|
||||
}}
|
||||
>
|
||||
{cities.map(city => (
|
||||
<option key={city.id} value={city.id}>{city.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
<div className="flex items-center gap-1">
|
||||
<Home className="w-4 h-4" />
|
||||
{t("rentTypeLabel")}
|
||||
</div>
|
||||
</label>
|
||||
<select
|
||||
value={filters.propertyType}
|
||||
onChange={(e) => setFilters({...filters, propertyType: e.target.value})}
|
||||
className="w-full px-4 py-3 bg-white/90 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm appearance-none cursor-pointer"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'left 1rem center',
|
||||
backgroundSize: '1rem',
|
||||
paddingLeft: '2.5rem'
|
||||
}}
|
||||
>
|
||||
{propertyTypes.map(type => (
|
||||
<option key={type.id} value={type.id}>{type.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
<div className="flex items-center gap-1">
|
||||
<DollarSign className="w-4 h-4" />
|
||||
{t("priceLabel")}
|
||||
</div>
|
||||
</label>
|
||||
<select
|
||||
value={filters.priceRange}
|
||||
onChange={(e) => setFilters({...filters, priceRange: e.target.value})}
|
||||
className="w-full px-4 py-3 bg-white/90 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm appearance-none cursor-pointer"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'left 1rem center',
|
||||
backgroundSize: '1rem',
|
||||
paddingLeft: '2.5rem'
|
||||
}}
|
||||
>
|
||||
{priceRanges.map(range => (
|
||||
<option key={range.id} value={range.id}>{range.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
<div className="flex items-center gap-1">
|
||||
نوع الوثيقة
|
||||
</div>
|
||||
</label>
|
||||
<select
|
||||
value={filters.identityType}
|
||||
onChange={(e) => setFilters({...filters, identityType: e.target.value})}
|
||||
className="w-full px-4 py-3 bg-white/90 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm appearance-none cursor-pointer"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'left 1rem center',
|
||||
backgroundSize: '1rem',
|
||||
paddingLeft: '2.5rem'
|
||||
}}
|
||||
>
|
||||
{identityTypes.map(type => (
|
||||
<option key={type.id} value={type.id}>{type.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<motion.button
|
||||
onClick={handleSearch}
|
||||
className="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-4 px-6 rounded-xl transition-all duration-300 flex items-center justify-center text-base gap-3 shadow-lg hover:shadow-xl"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Search className="w-5 h-5" />
|
||||
{t("searchButton")}
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
287
app/components/home/PropertyMap.js
Normal file
287
app/components/home/PropertyMap.js
Normal file
@ -0,0 +1,287 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { MapPin, DollarSign, X, Navigation, Bed, Bath, Square, Star, Calendar, Heart, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import L from 'leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
delete L.Icon.Default.prototype._getIconUrl;
|
||||
L.Icon.Default.mergeOptions({
|
||||
iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
|
||||
iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
|
||||
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
|
||||
});
|
||||
|
||||
const PropertyPopup = ({ property, onClose, onBook }) => {
|
||||
const [currentImage, setCurrentImage] = useState(0);
|
||||
const [isFavorite, setIsFavorite] = useState(false);
|
||||
const [selectedDays, setSelectedDays] = useState(1);
|
||||
|
||||
const formatCurrency = (amount) => {
|
||||
return amount?.toLocaleString() + ' ل.س';
|
||||
};
|
||||
|
||||
const quickDays = [1, 3, 7, 14];
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: 20, scale: 0.95 }}
|
||||
transition={{ type: "spring", damping: 25, stiffness: 300 }}
|
||||
className="absolute bottom-6 left-1/2 transform -translate-x-1/2 w-[90%] max-w-md bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl overflow-hidden z-20 border border-gray-200/50"
|
||||
style={{ maxHeight: '70vh' }}
|
||||
>
|
||||
<div className="relative h-32 bg-gradient-to-r from-gray-900 to-gray-700">
|
||||
<Image
|
||||
src={property.images[currentImage] || '/property-placeholder.jpg'}
|
||||
alt={property.title}
|
||||
fill
|
||||
className="object-cover opacity-80"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-2 right-2 w-8 h-8 bg-black/50 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-black/70 transition-colors z-10"
|
||||
>
|
||||
<X className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsFavorite(!isFavorite)}
|
||||
className="absolute top-2 left-2 w-8 h-8 bg-black/50 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-black/70 transition-colors z-10"
|
||||
>
|
||||
<Heart className={`w-4 h-4 ${isFavorite ? 'fill-red-500 text-red-500' : 'text-white'}`} />
|
||||
</button>
|
||||
<div className="absolute bottom-2 left-3">
|
||||
<div className="text-2xl font-bold text-white">{formatCurrency(property.price)}</div>
|
||||
<div className="text-xs text-white/80">/ليلة</div>
|
||||
</div>
|
||||
<div className="absolute bottom-2 right-3 flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg">
|
||||
<Star className="w-3 h-3 fill-amber-400 text-amber-400" />
|
||||
<span className="text-sm font-medium text-white">{property.rating}</span>
|
||||
</div>
|
||||
{property.images.length > 1 && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setCurrentImage(prev => Math.max(0, prev - 1))}
|
||||
className="absolute left-2 top-1/2 transform -translate-y-1/2 w-6 h-6 bg-black/30 rounded-full flex items-center justify-center hover:bg-black/50 transition-colors"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentImage(prev => Math.min(property.images.length - 1, prev + 1))}
|
||||
className="absolute right-2 top-1/2 transform -translate-y-1/2 w-6 h-6 bg-black/30 rounded-full flex items-center justify-center hover:bg-black/50 transition-colors"
|
||||
>
|
||||
<ChevronRight className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{property.images.length > 1 && (
|
||||
<div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex gap-1">
|
||||
{property.images.map((_, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`w-1 h-1 rounded-full transition-all ${
|
||||
idx === currentImage ? 'w-3 bg-white' : 'bg-white/50'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4 space-y-3">
|
||||
<div>
|
||||
<h3 className="font-bold text-gray-900 text-base line-clamp-1">{property.title}</h3>
|
||||
<div className="flex items-center gap-1 text-gray-500 text-xs mt-1">
|
||||
<MapPin className="w-3 h-3 flex-shrink-0" />
|
||||
<span className="line-clamp-1">{property.location.address || `${property.location.city}، ${property.location.district}`}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between bg-gray-50 p-2 rounded-xl">
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
<Bed className="w-3 h-3 text-gray-600" />
|
||||
<span className="text-gray-700">{property.bedrooms} غرف</span>
|
||||
</div>
|
||||
<div className="w-px h-4 bg-gray-200" />
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
<Bath className="w-3 h-3 text-gray-600" />
|
||||
<span className="text-gray-700">{property.bathrooms} حمامات</span>
|
||||
</div>
|
||||
<div className="w-px h-4 bg-gray-200" />
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
<Square className="w-3 h-3 text-gray-600" />
|
||||
<span className="text-gray-700">{property.area}م²</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-600 mb-2">اختر المدة</label>
|
||||
<div className="flex gap-2">
|
||||
{quickDays.map(days => (
|
||||
<button
|
||||
key={days}
|
||||
onClick={() => setSelectedDays(days)}
|
||||
className={`flex-1 py-2 rounded-lg text-xs font-medium transition-all ${
|
||||
selectedDays === days
|
||||
? 'bg-amber-500 text-white shadow-sm'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
{days} {days === 1 ? 'يوم' : 'أيام'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center p-3 bg-amber-50 rounded-xl">
|
||||
<span className="text-sm text-gray-700">الإجمالي</span>
|
||||
<div>
|
||||
<span className="text-lg font-bold text-amber-600">{formatCurrency(property.price * selectedDays)}</span>
|
||||
<span className="text-xs text-gray-500 mr-1">لـ {selectedDays} {selectedDays === 1 ? 'يوم' : 'أيام'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-x-auto scrollbar-hide">
|
||||
<div className="flex gap-2 pb-1" style={{ minWidth: 'min-content' }}>
|
||||
{property.features.slice(0, 6).map((feature, idx) => (
|
||||
<span key={idx} className="px-2 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs whitespace-nowrap">
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Link
|
||||
href={`/property/${property.id}`}
|
||||
className="flex-1 bg-white border border-gray-300 text-gray-700 py-2.5 rounded-xl font-medium hover:bg-gray-50 transition-colors text-center text-xs"
|
||||
>
|
||||
التفاصيل
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => {
|
||||
alert('تم إرسال طلب الحجز بنجاح');
|
||||
}}
|
||||
className="flex-1 bg-amber-500 text-white py-2.5 rounded-xl font-medium hover:bg-amber-600 transition-colors text-xs shadow-sm"
|
||||
>
|
||||
حجز سريع
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center pb-2">
|
||||
<div className="w-10 h-1 bg-gray-300 rounded-full mx-auto"></div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function PropertyMap({ properties, userIdentity = 'syrian' }) {
|
||||
const [selectedProperty, setSelectedProperty] = useState(null);
|
||||
const [mapLoaded, setMapLoaded] = useState(false);
|
||||
const mapRef = useRef(null);
|
||||
const mapInstanceRef = useRef(null);
|
||||
const markersRef = useRef([]);
|
||||
|
||||
const filteredProperties = properties.filter(property => {
|
||||
if (!property.allowedIdentities) return true;
|
||||
return property.allowedIdentities.includes(userIdentity);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!mapRef.current || mapInstanceRef.current) return;
|
||||
|
||||
const map = L.map(mapRef.current).setView([34.8021, 38.9968], 7);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
||||
maxZoom: 19,
|
||||
}).addTo(map);
|
||||
|
||||
mapInstanceRef.current = map;
|
||||
setMapLoaded(true);
|
||||
|
||||
return () => {
|
||||
if (mapInstanceRef.current) {
|
||||
mapInstanceRef.current.remove();
|
||||
mapInstanceRef.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mapInstanceRef.current || !filteredProperties.length) return;
|
||||
|
||||
markersRef.current.forEach(marker => marker.remove());
|
||||
markersRef.current = [];
|
||||
|
||||
filteredProperties.forEach(property => {
|
||||
if (property.location?.lat && property.location?.lng) {
|
||||
const customIcon = L.divIcon({
|
||||
className: 'custom-marker',
|
||||
html: `
|
||||
<div class="relative group cursor-pointer">
|
||||
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-1">
|
||||
<div class="w-px h-6 bg-gradient-to-t from-amber-400 to-transparent"></div>
|
||||
</div>
|
||||
<div class="w-9 h-9 bg-amber-500 rounded-full flex items-center justify-center text-white font-bold shadow-lg border-2 border-white hover:bg-amber-600 transition-colors transform group-hover:scale-110">
|
||||
<span class="text-xs">$${property.priceUSD}</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
iconSize: [36, 45],
|
||||
iconAnchor: [18, 45],
|
||||
popupAnchor: [0, -45],
|
||||
});
|
||||
|
||||
const marker = L.marker([property.location.lat, property.location.lng], { icon: customIcon })
|
||||
.addTo(mapInstanceRef.current)
|
||||
.on('click', () => {
|
||||
setSelectedProperty(property);
|
||||
mapInstanceRef.current.panBy([0, -100], { animate: true, duration: 0.5 });
|
||||
});
|
||||
|
||||
markersRef.current.push(marker);
|
||||
}
|
||||
});
|
||||
|
||||
if (markersRef.current.length > 0) {
|
||||
const group = L.featureGroup(markersRef.current);
|
||||
mapInstanceRef.current.fitBounds(group.getBounds(), { padding: [50, 100] });
|
||||
}
|
||||
}, [filteredProperties, mapLoaded]);
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-[600px] rounded-xl overflow-hidden">
|
||||
<div ref={mapRef} className="w-full h-full z-0" />
|
||||
|
||||
<AnimatePresence>
|
||||
{selectedProperty && (
|
||||
<PropertyPopup
|
||||
property={selectedProperty}
|
||||
onClose={() => setSelectedProperty(null)}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
mapInstanceRef.current?.setView([position.coords.latitude, position.coords.longitude], 13);
|
||||
},
|
||||
(error) => console.error('Error getting location:', error)
|
||||
);
|
||||
}
|
||||
}}
|
||||
className="absolute top-4 right-4 bg-white p-2.5 rounded-full shadow-md hover:bg-gray-50 transition-colors z-10 border border-gray-200"
|
||||
title="الموقع الحالي"
|
||||
>
|
||||
<Navigation className="w-4 h-4 text-gray-700" />
|
||||
</button>
|
||||
<div className="absolute top-4 left-4 bg-white px-3 py-1.5 rounded-full shadow-md z-10 border border-gray-200">
|
||||
<span className="font-bold text-gray-900 text-sm">{filteredProperties.length}</span>
|
||||
<span className="text-gray-600 text-xs mr-1">عقار</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -4,10 +4,9 @@ import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Calendar as CalendarIcon, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
export default function BookingCalendar({ property, onDateSelect }) {
|
||||
export default function BookingCalendar({ property }) {
|
||||
const [currentMonth, setCurrentMonth] = useState(new Date());
|
||||
const [selectedRange, setSelectedRange] = useState({ start: null, end: null });
|
||||
const [bookedDates, setBookedDates] = useState(property.bookings || []);
|
||||
|
||||
const daysInMonth = new Date(
|
||||
currentMonth.getFullYear(),
|
||||
@ -27,8 +26,9 @@ export default function BookingCalendar({ property, onDateSelect }) {
|
||||
];
|
||||
|
||||
const isDateBooked = (date) => {
|
||||
if (!property.bookings) return false;
|
||||
const dateStr = date.toISOString().split('T')[0];
|
||||
return bookedDates.some(booking => {
|
||||
return property.bookings.some(booking => {
|
||||
const start = new Date(booking.startDate);
|
||||
const end = new Date(booking.endDate);
|
||||
const current = new Date(date);
|
||||
@ -36,35 +36,8 @@ export default function BookingCalendar({ property, onDateSelect }) {
|
||||
});
|
||||
};
|
||||
|
||||
const isInSelectedRange = (date) => {
|
||||
if (!selectedRange.start || !selectedRange.end) return false;
|
||||
const dateStr = date.toISOString().split('T')[0];
|
||||
return dateStr >= selectedRange.start && dateStr <= selectedRange.end;
|
||||
};
|
||||
|
||||
const handleDateClick = (date) => {
|
||||
if (isDateBooked(date)) return;
|
||||
|
||||
const dateStr = date.toISOString().split('T')[0];
|
||||
|
||||
if (!selectedRange.start || (selectedRange.start && selectedRange.end)) {
|
||||
setSelectedRange({ start: dateStr, end: null });
|
||||
} else {
|
||||
if (dateStr > selectedRange.start) {
|
||||
setSelectedRange({ ...selectedRange, end: dateStr });
|
||||
onDateSelect?.({ start: selectedRange.start, end: dateStr });
|
||||
} else {
|
||||
setSelectedRange({ start: dateStr, end: null });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const changeMonth = (direction) => {
|
||||
setCurrentMonth(new Date(
|
||||
currentMonth.getFullYear(),
|
||||
currentMonth.getMonth() + direction,
|
||||
1
|
||||
));
|
||||
};
|
||||
|
||||
const renderDays = () => {
|
||||
@ -83,24 +56,19 @@ export default function BookingCalendar({ property, onDateSelect }) {
|
||||
);
|
||||
|
||||
const isBooked = isDateBooked(date);
|
||||
const isSelected = isInSelectedRange(date);
|
||||
const isToday = date.toDateString() === new Date().toDateString();
|
||||
|
||||
days.push(
|
||||
<motion.button
|
||||
<button
|
||||
key={dayNumber}
|
||||
whileHover={!isBooked ? { scale: 1.1 } : {}}
|
||||
onClick={() => handleDateClick(date)}
|
||||
disabled={isBooked}
|
||||
className={`
|
||||
p-2 rounded-lg text-center transition-all
|
||||
p-2 rounded-lg text-center text-sm transition-all
|
||||
${isBooked ? 'bg-gray-200 text-gray-400 cursor-not-allowed line-through' : 'hover:bg-amber-100 cursor-pointer'}
|
||||
${isSelected ? 'bg-amber-500 text-white hover:bg-amber-600' : ''}
|
||||
${isToday && !isSelected && !isBooked ? 'border-2 border-amber-500' : ''}
|
||||
`}
|
||||
>
|
||||
{dayNumber}
|
||||
</motion.button>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -108,53 +76,47 @@ export default function BookingCalendar({ property, onDateSelect }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl p-6 shadow-lg">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="bg-white rounded-xl p-4 border border-gray-200">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<button
|
||||
onClick={() => changeMonth(-1)}
|
||||
className="p-2 hover:bg-gray-100 rounded-lg"
|
||||
onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1))}
|
||||
className="p-1 hover:bg-gray-100 rounded"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<h3 className="text-lg font-bold flex items-center gap-2">
|
||||
<CalendarIcon className="w-5 h-5 text-amber-500" />
|
||||
<h4 className="font-medium text-sm flex items-center gap-1">
|
||||
<CalendarIcon className="w-4 h-4 text-amber-500" />
|
||||
{monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}
|
||||
</h3>
|
||||
</h4>
|
||||
|
||||
<button
|
||||
onClick={() => changeMonth(1)}
|
||||
className="p-2 hover:bg-gray-100 rounded-lg"
|
||||
onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1))}
|
||||
className="p-1 hover:bg-gray-100 rounded"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-7 gap-1 mb-2 text-center text-sm font-semibold text-gray-600">
|
||||
<div>جمعة</div>
|
||||
<div>سبت</div>
|
||||
<div className="grid grid-cols-7 gap-1 mb-2 text-center text-xs font-medium text-gray-500">
|
||||
<div>أحد</div>
|
||||
<div>إثنين</div>
|
||||
<div>ثلاثاء</div>
|
||||
<div>أربعاء</div>
|
||||
<div>خميس</div>
|
||||
<div>جمعة</div>
|
||||
<div>سبت</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-7 gap-1">
|
||||
{renderDays()}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 mt-6 pt-4 border-t text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 bg-amber-500 rounded" />
|
||||
<span>محدد</span>
|
||||
<div className="flex gap-3 mt-3 pt-3 border-t text-xs">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-3 h-3 bg-gray-200 rounded" />
|
||||
<span className="text-gray-500">محجوز</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 bg-gray-200 rounded line-through" />
|
||||
<span>محجوز</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 border-2 border-amber-500 rounded" />
|
||||
<span>اليوم</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-3 h-3 bg-white border border-gray-300 rounded" />
|
||||
<span className="text-gray-500">متاح</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
166
app/components/property/PropertyMap.js
Normal file
166
app/components/property/PropertyMap.js
Normal file
@ -0,0 +1,166 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { MapPin, DollarSign, X, Navigation } from 'lucide-react';
|
||||
import L from 'leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
|
||||
delete L.Icon.Default.prototype._getIconUrl;
|
||||
L.Icon.Default.mergeOptions({
|
||||
iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
|
||||
iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
|
||||
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
|
||||
});
|
||||
|
||||
export default function PropertyMap({ properties, onPropertySelect }) {
|
||||
const [selectedProperty, setSelectedProperty] = useState(null);
|
||||
const [mapLoaded, setMapLoaded] = useState(false);
|
||||
const mapRef = useRef(null);
|
||||
const mapInstanceRef = useRef(null);
|
||||
const markersRef = useRef([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mapRef.current || mapInstanceRef.current) return;
|
||||
|
||||
const map = L.map(mapRef.current).setView([34.8021, 38.9968], 7);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||
maxZoom: 19,
|
||||
}).addTo(map);
|
||||
|
||||
mapInstanceRef.current = map;
|
||||
setMapLoaded(true);
|
||||
|
||||
return () => {
|
||||
if (mapInstanceRef.current) {
|
||||
mapInstanceRef.current.remove();
|
||||
mapInstanceRef.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mapInstanceRef.current || !properties.length) return;
|
||||
markersRef.current.forEach(marker => marker.remove());
|
||||
markersRef.current = [];
|
||||
const customIcon = L.divIcon({
|
||||
className: 'custom-marker',
|
||||
html: `<div class="w-10 h-10 bg-amber-500 rounded-full flex items-center justify-center text-white font-bold shadow-lg border-2 border-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
</div>`,
|
||||
iconSize: [40, 40],
|
||||
iconAnchor: [20, 40],
|
||||
popupAnchor: [0, -40],
|
||||
});
|
||||
|
||||
properties.forEach(property => {
|
||||
if (property.location?.lat && property.location?.lng) {
|
||||
const marker = L.marker([property.location.lat, property.location.lng], { icon: customIcon })
|
||||
.addTo(mapInstanceRef.current)
|
||||
.on('click', () => {
|
||||
setSelectedProperty(property);
|
||||
onPropertySelect?.(property);
|
||||
});
|
||||
|
||||
marker.bindTooltip(property.title, {
|
||||
permanent: false,
|
||||
direction: 'top',
|
||||
offset: [0, -40],
|
||||
className: 'property-tooltip'
|
||||
});
|
||||
|
||||
markersRef.current.push(marker);
|
||||
}
|
||||
});
|
||||
|
||||
if (markersRef.current.length > 0) {
|
||||
const group = L.featureGroup(markersRef.current);
|
||||
mapInstanceRef.current.fitBounds(group.getBounds(), { padding: [50, 50] });
|
||||
}
|
||||
}, [properties, mapLoaded, onPropertySelect]);
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-[600px] rounded-xl overflow-hidden">
|
||||
<div ref={mapRef} className="w-full h-full z-0" />
|
||||
<AnimatePresence>
|
||||
{selectedProperty && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20, scale: 0.9 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: 20, scale: 0.9 }}
|
||||
className="absolute bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-80 bg-white rounded-xl shadow-xl p-4 z-10 border border-gray-200"
|
||||
>
|
||||
<button
|
||||
onClick={() => setSelectedProperty(null)}
|
||||
className="absolute top-2 right-2 p-1 hover:bg-gray-100 rounded-full transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4 text-gray-600" />
|
||||
</button>
|
||||
|
||||
<h3 className="font-bold text-lg mb-2 text-gray-900">{selectedProperty.title}</h3>
|
||||
|
||||
<div className="flex items-center gap-1 text-gray-600 text-sm mb-3">
|
||||
<MapPin className="w-4 h-4 flex-shrink-0" />
|
||||
<span className="line-clamp-1">{selectedProperty.location?.address || `${selectedProperty.location.city}، ${selectedProperty.location.district}`}</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 mb-3">
|
||||
<div className="bg-gray-50 p-2 rounded-lg text-center">
|
||||
<div className="text-xs text-gray-500">يومي</div>
|
||||
<div className="font-bold text-gray-900">
|
||||
{selectedProperty.priceDisplay?.daily?.toLocaleString() || selectedProperty.price?.toLocaleString()} ل.س
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-50 p-2 rounded-lg text-center">
|
||||
<div className="text-xs text-gray-500">شهري</div>
|
||||
<div className="font-bold text-gray-900">
|
||||
{selectedProperty.priceDisplay?.monthly?.toLocaleString() || (selectedProperty.price * 30)?.toLocaleString()} ل.س
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
if (selectedProperty.location?.lat && selectedProperty.location?.lng) {
|
||||
window.open(`https://www.openstreetmap.org/directions?from=&to=${selectedProperty.location.lat},${selectedProperty.location.lng}`, '_blank');
|
||||
}
|
||||
}}
|
||||
className="flex-1 bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center gap-2 text-sm"
|
||||
>
|
||||
<Navigation className="w-4 h-4" />
|
||||
الاتجاهات
|
||||
</button>
|
||||
<button
|
||||
onClick={() => window.location.href = `/property/${selectedProperty.id}`}
|
||||
className="flex-1 bg-gray-800 text-white py-2 rounded-lg hover:bg-gray-900 transition-colors text-sm"
|
||||
>
|
||||
عرض التفاصيل
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
mapInstanceRef.current?.setView([position.coords.latitude, position.coords.longitude], 13);
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error getting location:', error);
|
||||
}
|
||||
);
|
||||
}
|
||||
}}
|
||||
className="absolute top-4 right-4 bg-white p-3 rounded-full shadow-lg hover:bg-gray-50 transition-colors z-10 border border-gray-200"
|
||||
title="الموقع الحالي"
|
||||
>
|
||||
<Navigation className="w-5 h-5 text-gray-700" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -24,3 +24,51 @@ body {
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.leaflet-popup-content-wrapper {
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
margin: 0;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.leaflet-popup-tip {
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.custom-marker {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.custom-marker div {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.custom-marker:hover div {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.property-tooltip {
|
||||
background: white !important;
|
||||
color: #1f2937 !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: 0.875rem !important;
|
||||
padding: 0.5rem 1rem !important;
|
||||
border-radius: 0.75rem !important;
|
||||
border: 1px solid #e5e7eb !important;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
|
||||
.property-tooltip::before {
|
||||
border-top-color: white !important;
|
||||
}
|
||||
809
app/page.js
809
app/page.js
@ -1,67 +1,271 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ShieldCheck,
|
||||
Lock,
|
||||
Zap,
|
||||
Star,
|
||||
Rocket,
|
||||
Search,
|
||||
MapPin,
|
||||
Home,
|
||||
DollarSign,
|
||||
ChevronDown,
|
||||
Shield,
|
||||
Award,
|
||||
Sparkles
|
||||
} from 'lucide-react';
|
||||
import './i18n/config';
|
||||
import HeroSearch from './components/home/HeroSearch';
|
||||
import PropertyMap from './components/home/PropertyMap';
|
||||
|
||||
export default function HomePage() {
|
||||
const { t } = useTranslation();
|
||||
const constraintsRef = useRef(null);
|
||||
const mapSectionRef = useRef(null);
|
||||
const [searchFilters, setSearchFilters] = useState(null);
|
||||
const [showMap, setShowMap] = useState(false);
|
||||
const [filteredProperties, setFilteredProperties] = useState([]);
|
||||
const [isScrolling, setIsScrolling] = useState(false);
|
||||
|
||||
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
|
||||
}
|
||||
const [allProperties] = useState([
|
||||
{
|
||||
id: 1,
|
||||
title: 'فيلا فاخرة في المزة',
|
||||
description: 'فيلا فاخرة مع حديقة خاصة ومسبح في أفضل أحياء دمشق.',
|
||||
type: 'villa',
|
||||
price: 500000,
|
||||
priceUSD: 50,
|
||||
priceUnit: 'daily',
|
||||
location: {
|
||||
city: 'دمشق',
|
||||
district: 'المزة',
|
||||
address: 'شارع المزة - فيلات غربية',
|
||||
lat: 33.5138,
|
||||
lng: 36.2765
|
||||
},
|
||||
bedrooms: 5,
|
||||
bathrooms: 4,
|
||||
area: 450,
|
||||
features: ['مسبح', 'حديقة خاصة', 'موقف سيارات', 'أمن 24/7', 'تدفئة مركزية', 'تكييف مركزي'],
|
||||
images: ['/villa1.jpg', '/villa2.jpg', '/villa3.jpg'],
|
||||
status: 'available',
|
||||
rating: 4.8,
|
||||
isNew: true,
|
||||
allowedIdentities: ['syrian', 'passport'],
|
||||
priceDisplay: {
|
||||
daily: 500000,
|
||||
monthly: 15000000
|
||||
},
|
||||
bookings: [
|
||||
{ startDate: '2024-03-10', endDate: '2024-03-15' },
|
||||
{ startDate: '2024-03-20', endDate: '2024-03-25' }
|
||||
]
|
||||
},
|
||||
tap: { scale: 0.95 }
|
||||
{
|
||||
id: 2,
|
||||
title: 'شقة حديثة في الشهباء',
|
||||
description: 'شقة عصرية في حي الشهباء الراقي بحلب.',
|
||||
type: 'apartment',
|
||||
price: 250000,
|
||||
priceUSD: 25,
|
||||
priceUnit: 'daily',
|
||||
location: {
|
||||
city: 'حلب',
|
||||
district: 'الشهباء',
|
||||
address: 'شارع النيل - بناء الرحاب',
|
||||
lat: 36.2021,
|
||||
lng: 37.1347
|
||||
},
|
||||
bedrooms: 3,
|
||||
bathrooms: 2,
|
||||
area: 180,
|
||||
features: ['مطبخ مجهز', 'بلكونة', 'موقف سيارات', 'مصعد'],
|
||||
images: ['/apartment1.jpg', '/apartment2.jpg'],
|
||||
status: 'available',
|
||||
rating: 4.5,
|
||||
isNew: false,
|
||||
allowedIdentities: ['syrian'],
|
||||
priceDisplay: {
|
||||
daily: 250000,
|
||||
monthly: 7500000
|
||||
},
|
||||
bookings: [
|
||||
{ startDate: '2024-03-05', endDate: '2024-03-08' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'بيت عائلي في بابا عمرو',
|
||||
description: 'بيت واسع مناسب للعائلات في حمص.',
|
||||
type: 'house',
|
||||
price: 350000,
|
||||
priceUSD: 35,
|
||||
priceUnit: 'daily',
|
||||
location: {
|
||||
city: 'حمص',
|
||||
district: 'بابا عمرو',
|
||||
address: 'حي الزهور',
|
||||
lat: 34.7265,
|
||||
lng: 36.7186
|
||||
},
|
||||
bedrooms: 4,
|
||||
bathrooms: 3,
|
||||
area: 300,
|
||||
features: ['حديقة كبيرة', 'موقف سيارات', 'مدفأة', 'كراج'],
|
||||
images: ['/house1.jpg'],
|
||||
status: 'booked',
|
||||
rating: 4.3,
|
||||
isNew: false,
|
||||
allowedIdentities: ['syrian', 'passport'],
|
||||
priceDisplay: {
|
||||
daily: 350000,
|
||||
monthly: 10500000
|
||||
},
|
||||
bookings: []
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'شقة بجانب البحر',
|
||||
description: 'شقة رائعة مع إطلالة بحرية في اللاذقية.',
|
||||
type: 'apartment',
|
||||
price: 300000,
|
||||
priceUSD: 30,
|
||||
priceUnit: 'daily',
|
||||
location: {
|
||||
city: 'اللاذقية',
|
||||
district: 'الشاطئ الأزرق',
|
||||
address: 'الكورنيش الغربي',
|
||||
lat: 35.5306,
|
||||
lng: 35.7801
|
||||
},
|
||||
bedrooms: 3,
|
||||
bathrooms: 2,
|
||||
area: 200,
|
||||
features: ['إطلالة بحرية', 'شرفة', 'تكييف', 'أمن'],
|
||||
images: ['/seaside1.jpg', '/seaside2.jpg', '/seaside3.jpg'],
|
||||
status: 'available',
|
||||
rating: 4.9,
|
||||
isNew: true,
|
||||
allowedIdentities: ['passport'],
|
||||
priceDisplay: {
|
||||
daily: 300000,
|
||||
monthly: 9000000
|
||||
},
|
||||
bookings: []
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'فيلا في درعا',
|
||||
description: 'فيلا فاخرة في حي الأطباء بدرعا.',
|
||||
type: 'villa',
|
||||
price: 400000,
|
||||
priceUSD: 40,
|
||||
priceUnit: 'daily',
|
||||
location: {
|
||||
city: 'درعا',
|
||||
district: 'حي الأطباء',
|
||||
address: 'شارع الشفاء',
|
||||
lat: 32.6237,
|
||||
lng: 36.1016
|
||||
},
|
||||
bedrooms: 4,
|
||||
bathrooms: 3,
|
||||
area: 350,
|
||||
features: ['حديقة مثمرة', 'أنظمة أمن', 'مسبح', 'كراج'],
|
||||
images: ['/villa4.jpg', '/villa5.jpg'],
|
||||
status: 'available',
|
||||
rating: 4.6,
|
||||
isNew: false,
|
||||
allowedIdentities: ['syrian', 'passport'],
|
||||
priceDisplay: {
|
||||
daily: 400000,
|
||||
monthly: 12000000
|
||||
},
|
||||
bookings: []
|
||||
}
|
||||
]);
|
||||
|
||||
const applyFilters = (filters) => {
|
||||
setSearchFilters(filters);
|
||||
|
||||
const filtered = allProperties.filter(property => {
|
||||
if (filters.city && filters.city !== 'all' && property.location.city !== filters.city) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (filters.propertyType && filters.propertyType !== 'all' && property.type !== filters.propertyType) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (filters.priceRange && filters.priceRange !== 'all') {
|
||||
const priceUSD = property.priceUSD;
|
||||
switch(filters.priceRange) {
|
||||
case '0-500': if (priceUSD > 50) return false; break;
|
||||
case '500-1000': if (priceUSD < 51 || priceUSD > 100) return false; break;
|
||||
case '1000-2000': if (priceUSD < 101 || priceUSD > 200) return false; break;
|
||||
case '2000-3000': if (priceUSD < 201 || priceUSD > 300) return false; break;
|
||||
case '3000+': if (priceUSD < 301) return false; break;
|
||||
}
|
||||
}
|
||||
|
||||
if (filters.identityType && property.allowedIdentities) {
|
||||
if (!property.allowedIdentities.includes(filters.identityType)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
setFilteredProperties(filtered);
|
||||
|
||||
if (!showMap) {
|
||||
setShowMap(true);
|
||||
|
||||
setTimeout(() => {
|
||||
if (mapSectionRef.current) {
|
||||
setIsScrolling(true);
|
||||
mapSectionRef.current.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
});
|
||||
|
||||
setTimeout(() => setIsScrolling(false), 1000);
|
||||
}
|
||||
}, 300);
|
||||
} else {
|
||||
if (mapSectionRef.current) {
|
||||
setIsScrolling(true);
|
||||
mapSectionRef.current.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
});
|
||||
setTimeout(() => setIsScrolling(false), 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const floatingAnimation = {
|
||||
y: [0, -10, 0],
|
||||
transition: {
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut"
|
||||
}
|
||||
const resetSearch = () => {
|
||||
setShowMap(false);
|
||||
setSearchFilters(null);
|
||||
setFilteredProperties([]);
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen" ref={constraintsRef}>
|
||||
<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(/Home.jpg)',
|
||||
backgroundImage: 'url(/hero.jpg)',
|
||||
}}
|
||||
initial={{ scale: 1.1 }}
|
||||
animate={{ scale: 1 }}
|
||||
@ -69,315 +273,282 @@ export default function HomePage() {
|
||||
/>
|
||||
<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
|
||||
className="text-center mb-12"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={staggerContainer}
|
||||
variants={{
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: 0.2 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
<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}
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0 }
|
||||
}}
|
||||
>
|
||||
{t("heroTitleLine1")}<br />
|
||||
<motion.span
|
||||
className="text-amber-400"
|
||||
animate={floatingAnimation}
|
||||
animate={{
|
||||
y: [0, -10, 0],
|
||||
}}
|
||||
transition={{
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut"
|
||||
}}
|
||||
>
|
||||
{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}
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0 }
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
<HeroSearch onSearch={applyFilters} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
{!showMap && (
|
||||
<motion.div
|
||||
className="absolute bottom-8 left-1/2 transform -translate-x-1/2 cursor-pointer"
|
||||
animate={{
|
||||
y: [0, 10, 0],
|
||||
}}
|
||||
transition={{
|
||||
duration: 1.5,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut"
|
||||
}}
|
||||
onClick={() => window.scrollTo({
|
||||
top: window.innerHeight,
|
||||
behavior: 'smooth'
|
||||
})}
|
||||
>
|
||||
<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 }}
|
||||
<AnimatePresence mode="wait">
|
||||
{showMap && (
|
||||
<motion.section
|
||||
ref={mapSectionRef}
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -50 }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
damping: 20,
|
||||
stiffness: 100,
|
||||
duration: 0.6
|
||||
}}
|
||||
className="py-12 bg-gray-50 relative"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
{isScrolling && (
|
||||
<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 }}
|
||||
className="absolute top-0 left-0 right-0 h-1 bg-amber-500 z-10"
|
||||
initial={{ scaleX: 0 }}
|
||||
animate={{ scaleX: 1 }}
|
||||
transition={{ duration: 1, ease: "easeInOut" }}
|
||||
/>
|
||||
|
||||
<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"
|
||||
<div className="container mx-auto px-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-center mb-8"
|
||||
>
|
||||
<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>
|
||||
<div className="flex items-center justify-center gap-4 mb-2">
|
||||
<h2 className="text-3xl font-bold text-gray-900">
|
||||
{filteredProperties.length > 0 ? 'نتائج البحث' : 'لا توجد نتائج'}
|
||||
</h2>
|
||||
<motion.button
|
||||
onClick={resetSearch}
|
||||
className="px-4 py-2 bg-white border border-gray-300 rounded-full text-sm font-medium text-gray-700 hover:bg-gray-50 shadow-sm flex items-center gap-2"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
بحث جديد
|
||||
</motion.button>
|
||||
</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"
|
||||
>
|
||||
{filteredProperties.length > 0 ? (
|
||||
<p className="text-gray-600">
|
||||
تم العثور على {filteredProperties.length} عقار يطابق معايير البحث
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-gray-600">
|
||||
لا توجد عقارات تطابق معايير البحث. جرب تغيير الفلاتر.
|
||||
</p>
|
||||
)}
|
||||
</motion.div>
|
||||
<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"
|
||||
className="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-200"
|
||||
initial={{ scale: 0.95, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: 0.3, type: "spring" }}
|
||||
>
|
||||
<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>
|
||||
{filteredProperties.length > 0 ? (
|
||||
<PropertyMap
|
||||
properties={filteredProperties}
|
||||
userIdentity={searchFilters?.identityType || 'syrian'}
|
||||
/>
|
||||
) : (
|
||||
<div className="h-[400px] flex flex-col items-center justify-center bg-gray-50">
|
||||
<div className="w-24 h-24 bg-gray-200 rounded-full flex items-center justify-center mb-4">
|
||||
<svg className="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-700 mb-2">لا توجد نتائج</h3>
|
||||
<p className="text-gray-500">حاول تغيير معايير البحث</p>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
{filteredProperties.length > 0 && searchFilters && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="mt-6 flex flex-wrap gap-3 justify-center"
|
||||
>
|
||||
<div className="bg-white px-4 py-2 rounded-full shadow-sm border border-gray-200 text-sm">
|
||||
<span className="text-gray-600">المدينة: </span>
|
||||
<span className="font-bold text-gray-900">
|
||||
{searchFilters.city === 'all' ? 'جميع المدن' : searchFilters.city}
|
||||
</span>
|
||||
</div>
|
||||
<div className="bg-white px-4 py-2 rounded-full shadow-sm border border-gray-200 text-sm">
|
||||
<span className="text-gray-600">نوع العقار: </span>
|
||||
<span className="font-bold text-gray-900">
|
||||
{searchFilters.propertyType === 'all' ? 'الكل' :
|
||||
searchFilters.propertyType === 'apartment' ? 'شقة' :
|
||||
searchFilters.propertyType === 'villa' ? 'فيلا' : 'بيت'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="bg-white px-4 py-2 rounded-full shadow-sm border border-gray-200 text-sm">
|
||||
<span className="text-gray-600">نطاق السعر: </span>
|
||||
<span className="font-bold text-gray-900">
|
||||
{searchFilters.priceRange === 'all' ? 'جميع الأسعار' :
|
||||
searchFilters.priceRange === '0-500' ? 'أقل من 50$' :
|
||||
searchFilters.priceRange === '500-1000' ? '50$ - 100$' :
|
||||
searchFilters.priceRange === '1000-2000' ? '100$ - 200$' :
|
||||
searchFilters.priceRange === '2000-3000' ? '200$ - 300$' : 'أكثر من 300$'}
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</motion.section>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<section className="py-20 bg-gradient-to-b from-white to-gray-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<motion.div
|
||||
className="text-center mb-12"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<div className="inline-block px-4 py-1 bg-amber-100 text-amber-700 rounded-full text-sm font-medium mb-4">
|
||||
لماذا نحن؟
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4 tracking-tight">
|
||||
{t("whyChooseUsTitle")}
|
||||
</h2>
|
||||
<p className="text-gray-600 max-w-2xl mx-auto text-lg">
|
||||
{t("whyChooseUsSubtitle")}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<motion.div
|
||||
className="group bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
whileHover={{ y: -4 }}
|
||||
>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center group-hover:bg-amber-200 transition-colors duration-300">
|
||||
<ShieldCheck className="w-6 h-6 text-amber-600" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-900">
|
||||
{t("feature1Title")}
|
||||
</h3>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
{t("feature1Description")}
|
||||
</p>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className="group bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
whileHover={{ y: -4 }}
|
||||
>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center group-hover:bg-blue-200 transition-colors duration-300">
|
||||
<Lock className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-900">
|
||||
{t("feature2Title")}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
{t("feature2Description")}
|
||||
</p>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className="group bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
whileHover={{ y: -4 }}
|
||||
>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center group-hover:bg-green-200 transition-colors duration-300">
|
||||
<Zap className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-900">
|
||||
{t("feature3Title")}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
{t("feature3Description")}
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -33,6 +33,7 @@ import {
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
|
||||
const PropertyCard = ({ property, viewMode = 'grid' }) => {
|
||||
const [isFavorite, setIsFavorite] = useState(false);
|
||||
const [currentImage, setCurrentImage] = useState(0);
|
||||
@ -315,11 +316,11 @@ const FilterBar = ({ filters, onFilterChange }) => {
|
||||
|
||||
const cities = [
|
||||
{ id: 'all', label: 'جميع المدن' },
|
||||
{ id: 'damascus', label: 'دمشق' },
|
||||
{ id: 'aleppo', label: 'حلب' },
|
||||
{ id: 'homs', label: 'حمص' },
|
||||
{ id: 'latakia', label: 'اللاذقية' },
|
||||
{ id: 'daraa', label: 'درعا' }
|
||||
{ id: 'دمشق', label: 'دمشق' },
|
||||
{ id: 'حلب', label: 'حلب' },
|
||||
{ id: 'حمص', label: 'حمص' },
|
||||
{ id: 'اللاذقية', label: 'اللاذقية' },
|
||||
{ id: 'درعا', label: 'درعا' }
|
||||
];
|
||||
|
||||
return (
|
||||
@ -495,7 +496,7 @@ const FilterBar = ({ filters, onFilterChange }) => {
|
||||
};
|
||||
|
||||
export default function PropertiesPage() {
|
||||
const [viewMode, setViewMode] = useState('grid');
|
||||
const [viewMode, setViewMode] = useState('grid');
|
||||
const [sortBy, setSortBy] = useState('newest');
|
||||
const [filters, setFilters] = useState({
|
||||
search: '',
|
||||
@ -670,6 +671,7 @@ export default function PropertiesPage() {
|
||||
className={`p-2 rounded-xl transition-colors ${
|
||||
viewMode === 'grid' ? 'bg-gray-800 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
title="عرض شبكي"
|
||||
>
|
||||
<Grid3x3 className="w-5 h-5" />
|
||||
</button>
|
||||
@ -678,6 +680,7 @@ export default function PropertiesPage() {
|
||||
className={`p-2 rounded-xl transition-colors ${
|
||||
viewMode === 'list' ? 'bg-gray-800 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
title="عرض قائمة"
|
||||
>
|
||||
<List className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
35
package-lock.json
generated
35
package-lock.json
generated
@ -13,11 +13,13 @@
|
||||
"framer-motion": "^12.29.2",
|
||||
"i18next": "^25.8.0",
|
||||
"i18next-browser-languagedetector": "^8.2.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"lucide-react": "^0.563.0",
|
||||
"next": "16.1.6",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3",
|
||||
"react-i18next": "^16.5.4"
|
||||
"react-i18next": "^16.5.4",
|
||||
"react-leaflet": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
@ -851,6 +853,17 @@
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-leaflet/core": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
|
||||
"integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
|
||||
"license": "Hippocratic-2.1",
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.9.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-node-resolve": {
|
||||
"version": "15.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.1.tgz",
|
||||
@ -1886,6 +1899,12 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/leaflet": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
|
||||
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
|
||||
"license": "BSD-2-Clause"
|
||||
},
|
||||
"node_modules/lightningcss": {
|
||||
"version": "1.30.2",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
|
||||
@ -2471,6 +2490,20 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-leaflet": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
|
||||
"integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==",
|
||||
"license": "Hippocratic-2.1",
|
||||
"dependencies": {
|
||||
"@react-leaflet/core": "^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.9.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
|
||||
|
||||
@ -13,11 +13,13 @@
|
||||
"framer-motion": "^12.29.2",
|
||||
"i18next": "^25.8.0",
|
||||
"i18next-browser-languagedetector": "^8.2.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"lucide-react": "^0.563.0",
|
||||
"next": "16.1.6",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3",
|
||||
"react-i18next": "^16.5.4"
|
||||
"react-i18next": "^16.5.4",
|
||||
"react-leaflet": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
|
||||
Reference in New Issue
Block a user