144 lines
8.0 KiB
JavaScript
144 lines
8.0 KiB
JavaScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { HelpCircle, ChevronDown, Search } from 'lucide-react';
|
|
|
|
const faqs = [
|
|
{
|
|
question: 'كيفية البحث عن عقار؟',
|
|
answer: 'يمكنك البحث عن عقار من خلال استخدام شريط البحث في الصفحة الرئيسية، حيث يمكنك تحديد المدينة ونوع العقار والسعر. كما يمكنك استخدام الفلاتر المتقدمة لتحديد عدد الغرف والحمامات والمساحة وطرق الدفع. يمكنك أيضاً تصفح العقارات المميزة والتوصيات المقدمة خصيصاً لك.',
|
|
},
|
|
{
|
|
question: 'كيف أحجز عقاراً؟',
|
|
answer: 'بعد العثور على العقار المناسب، يمكنك النقر على "حجز" واختيار تواريخ الإقامة. سيطلب منك تسجيل الدخول أو إنشاء حساب إذا لم يكن لديك حساب. بعد ذلك، قم بتأكيد الحجز وسيتم إخطار المالك بطلبك. يمكنك متابعة حالة حجزك من صفحة الحجوزات.',
|
|
},
|
|
{
|
|
question: 'كيف أضيف عقاراً؟',
|
|
answer: 'لتسجيل عقارك على المنصة، يجب عليك أولاً إنشاء حساب مالك. بعد تسجيل الدخول، انتقل إلى لوحة التحكم واختر "إضافة عقار". قم بتعبئة جميع المعلومات المطلوبة مثل الموقع، المساحة، عدد الغرف، الصور، السعر، وغيرها من التفاصيل. بعد المراجعة، سيتم نشر عقارك على المنصة.',
|
|
},
|
|
{
|
|
question: 'كيف أتواصل مع المالك؟',
|
|
answer: 'بعد تسجيل الدخول، يمكنك التواصل مع المالك من خلال صفحة العقار بالضغط على زر "تواصل مع المالك". ستظهر لك معلومات الاتصال بالمالك بما في ذلك رقم الهاتف والبريد الإلكتروني. يمكنك أيضاً مراسلة المالك مباشرة من خلال نظام المراسلة الداخلي في المنصة.',
|
|
},
|
|
{
|
|
question: 'ما هي سياسة الإلغاء؟',
|
|
answer: 'سياسة الإلغاء تختلف حسب كل عقار. بشكل عام، يمكن إلغاء الحجز قبل 48 ساعة من موعد الوصول للحصول على استرداد كامل. للإلغاء خلال أقل من 48 ساعة، قد يتم تطبيق رسوم إلغاء. ننصحك بمراجعة سياسة الإلغاء المدونة في صفحة العقار قبل تأكيد الحجز.',
|
|
},
|
|
{
|
|
question: 'كيف أقيم العقار؟',
|
|
answer: 'بعد انتهاء إقامتك، يمكنك تقييم العقار من خلال صفحة الحجوزات. اختر الحجز المناسب ثم اضغط على "تقييم". يمكنك إعطاء تقييم بالنجوم وكتابة تعليق يصف تجربتك. تقييمات المستخدمين تساعد الآخرين في اتخاذ القرار المناسب.',
|
|
},
|
|
{
|
|
question: 'هل يمكنني تغيير كلمة المرور؟',
|
|
answer: 'نعم، يمكنك تغيير كلمة المرور من خلال صفحة الملف الشخصي. اختر "تغيير كلمة المرور" وأدخل كلمة المرور الحالية ثم كلمة المرور الجديدة. يجب أن تتكون كلمة المرور الجديدة من 8 أحرف على الأقل وتحتوي على حرف كبير وحرف صغير ورقم.',
|
|
},
|
|
{
|
|
question: 'كيف أحذف حسابي؟',
|
|
answer: 'لحذف حسابك نهائياً، يرجى التواصل مع فريق الدعم الفني من خلال صفحة الدعم. سنقوم بمعالجة طلبك خلال 24 ساعة. يرجى العلم أنه لا يمكن استعادة الحساب بعد حذفه، وسيتم فقدان جميع البيانات والحجوزات المرتبطة به.',
|
|
},
|
|
];
|
|
|
|
export default function FAQPage() {
|
|
const [openIndex, setOpenIndex] = useState(null);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
|
|
const filteredFaqs = faqs.filter(
|
|
(faq) =>
|
|
faq.question.includes(searchTerm) ||
|
|
faq.answer.includes(searchTerm)
|
|
);
|
|
|
|
const toggleFAQ = (index) => {
|
|
setOpenIndex(openIndex === index ? null : index);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-b from-amber-50/50 to-white py-12" dir="rtl">
|
|
<div className="container mx-auto px-4 max-w-4xl">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="text-center mb-12"
|
|
>
|
|
<div className="w-20 h-20 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-amber-100">
|
|
<HelpCircle className="w-10 h-10 text-amber-600" />
|
|
</div>
|
|
<h1 className="text-4xl font-bold text-gray-900 mb-4">الأسئلة الشائعة</h1>
|
|
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
|
إجابات على أكثر الأسئلة شيوعاً حول استخدام المنصة
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="relative mb-8"
|
|
>
|
|
<Search className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="ابحث في الأسئلة الشائعة..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full pr-12 pl-4 py-4 bg-white border border-gray-200 rounded-2xl shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-gray-900 placeholder-gray-400"
|
|
/>
|
|
</motion.div>
|
|
|
|
<div className="space-y-4">
|
|
{filteredFaqs.map((faq, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 0.05 }}
|
|
className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
|
|
>
|
|
<button
|
|
onClick={() => toggleFAQ(index)}
|
|
className="w-full flex items-center justify-between p-5 text-right"
|
|
>
|
|
<span className="text-lg font-semibold text-gray-900 flex-1">
|
|
{faq.question}
|
|
</span>
|
|
<motion.div
|
|
animate={{ rotate: openIndex === index ? 180 : 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<ChevronDown className="w-5 h-5 text-gray-500 shrink-0" />
|
|
</motion.div>
|
|
</button>
|
|
<AnimatePresence>
|
|
{openIndex === index && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: 'auto', opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="overflow-hidden"
|
|
>
|
|
<p className="px-5 pb-5 text-gray-600 leading-relaxed border-t border-gray-100 pt-4">
|
|
{faq.answer}
|
|
</p>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{filteredFaqs.length === 0 && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="text-center py-12"
|
|
>
|
|
<p className="text-gray-500 text-lg">لا توجد نتائج للبحث</p>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|