631 lines
23 KiB
JavaScript
631 lines
23 KiB
JavaScript
'use client';
|
|
|
|
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,
|
|
UserCircle,
|
|
LogOut,
|
|
Calendar,
|
|
Building,
|
|
PlusCircle,
|
|
Heart,
|
|
MessageCircle
|
|
} from 'lucide-react';
|
|
import './i18n/config';
|
|
import HeroSearch from './components/home/HeroSearch';
|
|
import PropertyMap from './components/home/PropertyMap';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
|
|
export default function HomePage() {
|
|
const { t } = useTranslation();
|
|
const mapSectionRef = useRef(null);
|
|
const [searchFilters, setSearchFilters] = useState(null);
|
|
const [showMap, setShowMap] = useState(false);
|
|
const [filteredProperties, setFilteredProperties] = useState([]);
|
|
const [isScrolling, setIsScrolling] = useState(false);
|
|
const [user, setUser] = useState(null);
|
|
const [showUserMenu, setShowUserMenu] = useState(false);
|
|
const menuRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const storedUser = localStorage.getItem('user');
|
|
if (storedUser) {
|
|
setUser(JSON.parse(storedUser));
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event) => {
|
|
if (menuRef.current && !menuRef.current.contains(event.target)) {
|
|
setShowUserMenu(false);
|
|
}
|
|
};
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
}, []);
|
|
|
|
const logout = () => {
|
|
localStorage.removeItem('user');
|
|
setUser(null);
|
|
setShowUserMenu(false);
|
|
};
|
|
|
|
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' }
|
|
]
|
|
},
|
|
{
|
|
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 resetSearch = () => {
|
|
setShowMap(false);
|
|
setSearchFilters(null);
|
|
setFilteredProperties([]);
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
};
|
|
|
|
const getUserInitial = () => {
|
|
if (user?.name) {
|
|
return user.name.charAt(0).toUpperCase();
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const isOwner = user?.role === 'owner';
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
|
<div className="absolute inset-0 z-0">
|
|
<motion.div
|
|
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
|
style={{
|
|
backgroundImage: 'url(/hero.jpg)',
|
|
}}
|
|
initial={{ scale: 1.1 }}
|
|
animate={{ scale: 1 }}
|
|
transition={{ duration: 1.5, ease: "easeOut" }}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/60 to-black/50" />
|
|
</div>
|
|
<div className="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-6xl mx-auto">
|
|
<motion.div
|
|
className="text-center mb-12"
|
|
initial="hidden"
|
|
animate="visible"
|
|
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={{
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: { opacity: 1, y: 0 }
|
|
}}
|
|
>
|
|
{t("heroTitleLine1")}<br />
|
|
<motion.span
|
|
className="text-amber-400"
|
|
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={{
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: { opacity: 1, y: 0 }
|
|
}}
|
|
>
|
|
{t("heroSubtitle")}
|
|
</motion.p>
|
|
</motion.div>
|
|
|
|
{!isOwner && <HeroSearch onSearch={applyFilters} />}
|
|
|
|
{isOwner && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.5 }}
|
|
className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center border border-white/20"
|
|
>
|
|
<h2 className="text-2xl font-bold text-white mb-2">
|
|
مرحباً {user?.name}!
|
|
</h2>
|
|
<p className="text-gray-200 mb-4">
|
|
يمكنك إدارة عقاراتك من خلال لوحة التحكم الخاصة بك
|
|
</p>
|
|
{/* <Link
|
|
href="/owner/properties"
|
|
className="inline-flex items-center gap-2 bg-amber-500 text-white px-6 py-3 rounded-xl font-medium hover:bg-amber-600 transition-colors"
|
|
>
|
|
<Building className="w-5 h-5" />
|
|
إدارة عقاراتي
|
|
</Link> */}
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{!showMap && !isOwner && (
|
|
<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>
|
|
|
|
{!isOwner && (
|
|
<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"
|
|
>
|
|
{isScrolling && (
|
|
<motion.div
|
|
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="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"
|
|
>
|
|
<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>
|
|
|
|
{filteredProperties.length > 0 ? (
|
|
<p className="text-gray-600">
|
|
تم العثور على {filteredProperties.length} عقار يطابق معايير البحث
|
|
</p>
|
|
) : (
|
|
<p className="text-gray-600">
|
|
لا توجد عقارات تطابق معايير البحث. جرب تغيير الفلاتر.
|
|
</p>
|
|
)}
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
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" }}
|
|
>
|
|
{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>
|
|
|
|
<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>
|
|
);
|
|
} |