Merge version_2 into main #2

Merged
bender merged 4 commits from version_2 into main 2026-03-25 21:40:44 +00:00
4 changed files with 360 additions and 521 deletions

View File

@@ -1,15 +1,42 @@
"use client";
import { useState } from 'react';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterBase from '@/components/sections/footer/FooterBase';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import { Clock, Globe, Lock, Server, Shield } from "lucide-react";
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import ButtonTextStagger from '@/components/button/ButtonTextStagger/ButtonTextStagger';
import Textarea from '@/components/form/Textarea';
import { CalendarDays, Clock, User, Mail, Phone, MessageSquare } from 'lucide-react';
export default function AppointmentsPage() {
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
date: '',
time: '',
message: ''
});
const [bookingConfirmed, setBookingConfirmed] = useState(false);
const [bookingNumber, setBookingNumber] = useState('');
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
// Simulate booking confirmation
const uniqueNum = 'BOOK-' + Math.random().toString(36).substr(2, 9).toUpperCase();
setBookingNumber(uniqueNum);
setBookingConfirmed(true);
// In a real application, you'd send this data to a backend
console.log('Booking data:', formData);
console.log('Sending SMS/WhatsApp notification to +212 662-862436 for booking:', uniqueNum);
};
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
@@ -24,218 +51,159 @@ export default function LandingPage() {
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "الرئيسية",
id: "hero",
},
{
name: "عنّا",
id: "about",
},
{
name: "خدماتنا",
id: "features",
},
{
name: "تواصل معنا",
id: "contact",
},
{
name: "حجز موعد",
href: "/appointments",
id: "5",
},
]}
brandName="Complexe Éducatif Lixus"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "الرئيسية", id: "hero"},
{
name: "عنّا", id: "about"},
{
name: "خدماتنا", id: "features"},
{
name: "تواصل معنا", id: "contact"},
{
name: "حجز موعد", href: "/appointments", id: "5"},
]}
brandName="Complexe Éducatif Lixus"
/>
</div>
<div id="booking-process" data-section="booking-process">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "1",
title: "كيف أحجز موعداً؟",
content: "يمكنك حجز موعد عن طريق اختيار الخدمة، ثم اختيار التاريخ والوقت المتاحين، وتأكيد الحجز.",
},
{
id: "2",
title: "هل يمكنني إلغاء أو تعديل موعد؟",
content: "نعم، يمكنك إدارة مواعيدك المحجوزة من خلال لوحة التحكم الخاصة بك.",
},
{
id: "3",
title: "ما هي اللغات المدعومة؟",
content: "يدعم نظامنا عدة لغات لضمان تجربة سلسة للجميع.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/smartphone-with-notebook-coffee-table_23-2148036911.jpg?_wi=2"
imageAlt="online calendar appointment booking interface"
mediaPosition="right"
title="عملية حجز المواعيد المبسّطة"
description="نظامنا سهل الاستخدام يجعل حجز المواعيد مع المعلمين والإدارة أمراً يسيراً. اتبع الخطوات التالية لحجز موعدك."
faqsAnimation="slide-up"
/>
</div>
<main className="min-h-screen flex flex-col items-center justify-center py-16 px-4 bg-background-accent">
<div className="max-w-4xl w-full bg-card rounded-lg shadow-xl p-8 space-y-8">
<h1 className="text-4xl font-bold text-foreground text-center">حجز موعد</h1>
{bookingConfirmed ? (
<div className="text-center space-y-4">
<p className="text-xl text-foreground">تم تأكيد موعدكم بنجاح!</p>
<p className="text-lg text-primary-cta">رقم الحجز الخاص بكم: <span className="font-semibold">{bookingNumber}</span></p>
<p className="text-muted-foreground">سيتم إرسال تأكيد إلى بريدكم الإلكتروني ورسالة عبر SMS/WhatsApp إلى رقم الهاتف المقدم.</p>
<p className="text-sm text-gray-500">نحن بانتظاركم في Complexe Éducatif Lixus.</p>
<ButtonTextStagger text="العودة للصفحة الرئيسية" href="/" className="mt-6" />
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label htmlFor="name" className="block text-sm font-medium text-foreground mb-2">الاسم الكامل</label>
<div className="relative">
<User className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} />
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="اسمك"
required
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-cta focus:border-primary-cta bg-background text-foreground"
/>
</div>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">البريد الإلكتروني</label>
<div className="relative">
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} />
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="بريدك الإلكتروني"
required
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-cta focus:border-primary-cta bg-background text-foreground"
/>
</div>
</div>
</div>
<div id="booking-features" data-section="booking-features">
<FeatureCardTen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
features={[
{
id: "1",
title: "سهولة الاستخدام",
description: "واجهة بديهية لتبسيط عملية الحجز.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/portrait-girl-with-rucksack-school-corridor_329181-14299.jpg?_wi=2",
imageAlt: "Easy-to-use interface",
},
items: [
{
icon: Cursor,
text: "نقرة واحدة للحجز",
},
{
icon: CalendarCheck,
text: "تأكيد فوري",
},
{
icon: Clock,
text: "توفير الوقت",
},
],
reverse: false,
},
{
id: "2",
title: "دعم متعدد اللغات",
description: "نظامنا متاح بلغات متعددة لخدمة جمهور أوسع.",
media: {
imageSrc: "http://img.b2bpic.net/free-vector/language-concept-background_23-2147865025.jpg?_wi=2",
imageAlt: "Multi-language support icon",
},
items: [
{
icon: Globe,
text: "اللغة العربية",
},
{
icon: MessagesSquare,
text: "اللغة الفرنسية",
},
{
icon: Languages,
text: "المزيد قريباً",
},
],
reverse: true,
},
{
id: "3",
title: "أمان وخصوصية البيانات",
description: "نضمن حماية بياناتك ومعلوماتك الشخصية بأعلى معايير الأمان.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/army-espionage-specialist-control-center-collecting-satellite-cctv-data_482257-94930.jpg?_wi=2",
imageAlt: "Data protection and privacy padlock",
},
items: [
{
icon: Lock,
text: "تشفير كامل",
},
{
icon: Shield,
text: "حماية الخصوصية",
},
{
icon: Server,
text: "خوادم آمنة",
},
],
reverse: false,
},
]}
title="ميزات نظام حجز المواعيد لدينا"
description="صُمم ليوفر لك أقصى درجات الراحة والمرونة في إدارة مواعيدك التعليمية."
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label htmlFor="phone" className="block text-sm font-medium text-foreground mb-2">رقم الهاتف</label>
<div className="relative">
<Phone className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} />
<input
type="tel"
id="phone"
name="phone"
value={formData.phone}
onChange={handleChange}
placeholder="رقم هاتفك (+212...)"
pattern="\+212[0-9]{9}"
title="Please enter a Moroccan phone number starting with +212"
required
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-cta focus:border-primary-cta bg-background text-foreground"
/>
</div>
</div>
<div>
<label htmlFor="date" className="block text-sm font-medium text-foreground mb-2">تاريخ الموعد</label>
<div className="relative">
<CalendarDays className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} />
<input
type="date"
id="date"
name="date"
value={formData.date}
onChange={handleChange}
required
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-cta focus:border-primary-cta bg-background text-foreground"
/>
</div>
</div>
</div>
<div id="book-now-cta" data-section="book-now-cta">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "sparkles-gradient",
}}
tag="لا تتردد!"
title="احجز موعدك اليوم"
description="ابدأ بتجربة تعليمية منظمة ومريحة لأبنائك. نظامنا مصمم لراحتك."
buttons={[
{
text: "احجز موعد الآن",
href: "/appointments",
},
]}
/>
</div>
<div>
<label htmlFor="time" className="block text-sm font-medium text-foreground mb-2">وقت الموعد المفضل</label>
<div className="relative">
<Clock className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} />
<input
type="time"
id="time"
name="time"
value={formData.time}
onChange={handleChange}
required
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-cta focus:border-primary-cta bg-background text-foreground"
/>
</div>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "خدماتنا",
items: [
{
label: "حجز المواعيد",
href: "/appointments",
},
{
label: "تتبع المواعيد",
href: "/tracking",
},
{
label: "لوحة الإدارة",
href: "/admin",
},
],
},
{
title: "المدرسة",
items: [
{
label: "عنّا",
href: "/about",
},
{
label: "اتصل بنا",
href: "/contact",
},
],
},
{
title: "الدعم",
items: [
{
label: "الأسئلة الشائعة",
href: "/faq",
},
{
label: "المساعدة",
href: "/help",
},
],
},
]}
logoText="Complexe Éducatif Lixus"
copyrightText="© 2024 Complexe Éducatif Lixus. جميع الحقوق محفوظة."
/>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-foreground mb-2">رسالة إضافية (اختياري)</label>
<div className="relative">
<MessageSquare className="absolute left-3 top-3 text-muted-foreground" size={20} />
<Textarea
id="message"
name="message"
value={formData.message}
onChange={val => setFormData(prev => ({ ...prev, message: val }))}
placeholder="اكتب رسالتك هنا..."
rows={4}
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-cta focus:border-primary-cta bg-background text-foreground"
/>
</div>
</div>
<ButtonTextStagger
text="تأكيد الحجز"
type="submit"
className="w-full bg-primary-cta hover:bg-primary-cta/90 text-primary-cta-foreground py-3 rounded-md font-semibold text-lg"
/>
</form>
)}
</div>
</main>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Complexe Éducatif Lixus"
leftLink={{
text: "سياسة الخصوصية", href: "/privacy"}}
rightLink={{
text: "شروط الاستخدام", href: "/terms"}}
/>
</div>
</ReactLenis>
</ThemeProvider>
);

View File

@@ -30,26 +30,17 @@ export default function LandingPage() {
<NavbarStyleApple
navItems={[
{
name: "الرئيسية",
id: "hero",
},
name: "الرئيسية", id: "hero"},
{
name: "عنّا",
id: "about",
},
name: "عنّا", id: "about"},
{
name: "خدماتنا",
id: "features",
},
name: "خدماتنا", id: "features"},
{
name: "تواصل معنا",
id: "contact",
},
name: "تواصل معنا", id: "contact"},
{
name: "حجز موعد",
href: "/appointments",
id: "5",
},
name: "حجز موعد", href: "/appointments", id: "5"},
{
name: "تتبع الموعد", href: "/tracking", id: "tracking"},
]}
brandName="Complexe Éducatif Lixus"
/>
@@ -58,32 +49,23 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroSplitDualMedia
background={{
variant: "plain",
}}
variant: "plain"}}
title="مستقبل أبنائكم يبدأ من هنا"
description="مؤسسة تعليمية رائدة تقدم تعليماً شاملاً ومتوازناً، مع التركيز على التميز الأكاديمي والتنمية الشخصية. انضموا إلينا لبيئة تعليمية محفزة."
tag="مرحباً بكم في Complexe Éducatif Lixus"
tagAnimation="slide-up"
buttons={[
{
text: "اكتشف المزيد",
href: "#about",
},
text: "اكتشف المزيد", href: "#about"},
{
text: "سجل الآن",
href: "/appointments",
},
text: "سجل الآن", href: "/appointments"},
]}
buttonAnimation="slide-up"
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/colleagues-studying-university-library_23-2148844693.jpg?_wi=1",
imageAlt: "Students collaborating in a bright classroom",
},
imageSrc: "http://img.b2bpic.net/free-photo/colleagues-studying-university-library_23-2148844693.jpg?_wi=1", imageAlt: "Students collaborating in a bright classroom"},
{
imageSrc: "http://img.b2bpic.net/free-photo/portrait-girl-with-rucksack-school-corridor_329181-14299.jpg?_wi=1",
imageAlt: "Diverse students in a modern school setting",
},
imageSrc: "http://img.b2bpic.net/free-photo/portrait-girl-with-rucksack-school-corridor_329181-14299.jpg?_wi=1", imageAlt: "Diverse students in a modern school setting"},
]}
mediaAnimation="slide-up"
rating={5}
@@ -109,40 +91,16 @@ export default function LandingPage() {
features={[
{
id: 1,
tag: "مواعيد مرنة",
title: "نظام حجز المواعيد الإلكتروني",
subtitle: "حجز سهل وسريع",
description: "يمكن لأولياء الأمور حجز المواعيد بسهولة ومرونة لتحديد لقاءات مع الإدارة أو المعلمين، مع تحديد التاريخ والوقت المناسبين لهم.",
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-notebook-coffee-table_23-2148036911.jpg?_wi=1",
imageAlt: "Online appointment booking interface",
},
tag: "مواعيد مرنة", title: "نظام حجز المواعيد الإلكتروني", subtitle: "حجز سهل وسريع", description: "يمكن لأولياء الأمور حجز المواعيد بسهولة ومرونة لتحديد لقاءات مع الإدارة أو المعلمين، مع تحديد التاريخ والوقت المناسبين لهم.", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-notebook-coffee-table_23-2148036911.jpg?_wi=1", imageAlt: "Online appointment booking interface"},
{
id: 2,
tag: "لغات متعددة",
title: "دعم متعدد اللغات",
subtitle: "عربي وفرنسي",
description: "الموقع يدعم اللغتين العربية والفرنسية لضمان سهولة الوصول والفهم لجميع زوارنا، مع زر لتغيير اللغة بسهولة.",
imageSrc: "http://img.b2bpic.net/free-vector/language-concept-background_23-2147865025.jpg?_wi=1",
imageAlt: "Multi-language interface with Arabic and French flags",
},
tag: "لغات متعددة", title: "دعم متعدد اللغات", subtitle: "عربي وفرنسي", description: "الموقع يدعم اللغتين العربية والفرنسية لضمان سهولة الوصول والفهم لجميع زوارنا، مع زر لتغيير اللغة بسهولة.", imageSrc: "http://img.b2bpic.net/free-vector/language-concept-background_23-2147865025.jpg?_wi=1", imageAlt: "Multi-language interface with Arabic and French flags"},
{
id: 3,
tag: "أمان البيانات",
title: "أمان وحماية فائقة",
subtitle: "بياناتكم في أمان",
description: "نضمن أمان بياناتكم وخصوصيتكم من خلال أحدث تقنيات التشفير والحماية ضد الهجمات الإلكترونية، بما في ذلك HTTPS، SQL Injection، XSS، و CSRF.",
imageSrc: "http://img.b2bpic.net/free-photo/army-espionage-specialist-control-center-collecting-satellite-cctv-data_482257-94930.jpg?_wi=1",
imageAlt: "Cybersecurity padlock and digital shield",
},
tag: "أمان البيانات", title: "أمان وحماية فائقة", subtitle: "بياناتكم في أمان", description: "نضمن أمان بياناتكم وخصوصيتكم من خلال أحدث تقنيات التشفير والحماية ضد الهجمات الإلكترونية، بما في ذلك HTTPS، SQL Injection، XSS، و CSRF.", imageSrc: "http://img.b2bpic.net/free-photo/army-espionage-specialist-control-center-collecting-satellite-cctv-data_482257-94930.jpg?_wi=1", imageAlt: "Cybersecurity padlock and digital shield"},
{
id: 4,
tag: "إدارة سهلة",
title: "إدارة وتتبع المواعيد",
subtitle: "بوابة إدارية وتتبع خاص",
description: "لوحة تحكم إدارية شاملة لمراجعة المواعيد وتأكيدها وتعديلها أو حذفها، مع بوابة تتبع خاصة لأولياء الأمور باستخدام رقم الموعد.",
imageSrc: "http://img.b2bpic.net/free-vector/medical-booking-application-interface_23-2148569125.jpg?_wi=1",
imageAlt: "Admin dashboard for appointment management and tracking",
},
tag: "إدارة سهلة", title: "إدارة وتتبع المواعيد", subtitle: "بوابة إدارية وتتبع خاص", description: "لوحة تحكم إدارية شاملة لمراجعة المواعيد وتأكيدها وتعديلها أو حذفها، مع بوابة تتبع خاصة لأولياء الأمور باستخدام رقم الموعد.", imageSrc: "http://img.b2bpic.net/free-vector/medical-booking-application-interface_23-2148569125.jpg?_wi=1", imageAlt: "Admin dashboard for appointment management and tracking"},
]}
title="خدماتنا المتميزة"
description="نقدم مجموعة من الخدمات التي تضمن تجربة تعليمية وإدارية سلسة لأولياء الأمور والطلاب."
@@ -157,41 +115,17 @@ export default function LandingPage() {
carouselMode="buttons"
testimonials={[
{
id: "1",
name: "فاطمة الزهراء",
handle: "@ParentFZ",
testimonial: "أشكر Complexe Éducatif Lixus على الاهتمام الرائع الذي يقدمونه لابني. لقد تطور مستواه بشكل ملحوظ وأصبح يحب الذهاب إلى المدرسة.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/psychologist-helping-little-girl-speech-therapy-indoors_23-2149113830.jpg",
imageAlt: "Fatima Zahra, satisfied parent",
},
id: "1", name: "فاطمة الزهراء", handle: "@ParentFZ", testimonial: "أشكر Complexe Éducatif Lixus على الاهتمام الرائع الذي يقدمونه لابني. لقد تطور مستواه بشكل ملحوظ وأصبح يحب الذهاب إلى المدرسة.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/psychologist-helping-little-girl-speech-therapy-indoors_23-2149113830.jpg", imageAlt: "Fatima Zahra, satisfied parent"},
{
id: "2",
name: "أحمد السعيد",
handle: "@AhmedElsaid",
testimonial: "نظام حجز المواعيد على الموقع سهل جداً وفعال. تمكنت من التواصل مع الإدارة بسهولة وسرعة، وهذا يوفر الكثير من الوقت والجهد.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/parents-spending-time-with-their-little-daughter-home_23-2149022810.jpg",
imageAlt: "Ahmed Elsaid, happy father",
},
id: "2", name: "أحمد السعيد", handle: "@AhmedElsaid", testimonial: "نظام حجز المواعيد على الموقع سهل جداً وفعال. تمكنت من التواصل مع الإدارة بسهولة وسرعة، وهذا يوفر الكثير من الوقت والجهد.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/parents-spending-time-with-their-little-daughter-home_23-2149022810.jpg", imageAlt: "Ahmed Elsaid, happy father"},
{
id: "3",
name: "مريم العلوي",
handle: "@MariamAlawi",
testimonial: "الأمان في الموقع ممتاز جداً، أشعر بالراحة تجاه حماية بياناتي ومعلومات أبنائي. هذا يمنحني ثقة كبيرة في المؤسسة.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-standing-white-isolated-background-winking-looking-camera-with-sexy-expression-cheerful-happy-face_839833-19863.jpg",
imageAlt: "Mariam Alawi, parent",
},
id: "3", name: "مريم العلوي", handle: "@MariamAlawi", testimonial: "الأمان في الموقع ممتاز جداً، أشعر بالراحة تجاه حماية بياناتي ومعلومات أبنائي. هذا يمنحني ثقة كبيرة في المؤسسة.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-standing-white-isolated-background-winking-looking-camera-with-sexy-expression-cheerful-happy-face_839833-19863.jpg", imageAlt: "Mariam Alawi, parent"},
{
id: "4",
name: "يوسف العمراني",
handle: "@YoussefAmrani",
testimonial: "تعدد اللغات في الموقع ميزة رائعة. أنا أقدر أنني أستطيع تصفح الموقع بالفرنسية أو العربية بكل سهولة ويسر.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-father-with-baby-outdoors_23-2148812311.jpg",
imageAlt: "Youssef Amrani, father",
},
id: "4", name: "يوسف العمراني", handle: "@YoussefAmrani", testimonial: "تعدد اللغات في الموقع ميزة رائعة. أنا أقدر أنني أستطيع تصفح الموقع بالفرنسية أو العربية بكل سهولة ويسر.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-father-with-baby-outdoors_23-2148812311.jpg", imageAlt: "Youssef Amrani, father"},
]}
showRating={true}
title="ماذا يقول أولياء الأمور عنا؟"
@@ -205,20 +139,11 @@ export default function LandingPage() {
useInvertedBackground={true}
faqs={[
{
id: "1",
title: "كيف يمكنني حجز موعد عبر الموقع؟",
content: "يمكنكم حجز موعد بسهولة عبر زيارة قسم 'حجز المواعيد' على الموقع، ثم اختيار التاريخ والوقت المتاحين والذين يناسبونكم. سيتم تزويدكم برقم تعريف خاص بالموعد.",
},
id: "1", title: "كيف يمكنني حجز موعد عبر الموقع؟", content: "يمكنكم حجز موعد بسهولة عبر زيارة قسم 'حجز المواعيد' على الموقع، ثم اختيار التاريخ والوقت المتاحين والذين يناسبونكم. سيتم تزويدكم برقم تعريف خاص بالموعد."},
{
id: "2",
title: "ما هي اللغات المدعومة في الموقع؟",
content: "الموقع يدعم اللغتين العربية والفرنسية بشكل كامل. يمكنكم التبديل بين اللغتين في أي وقت باستخدام زر تغيير اللغة الموجود في أعلى الصفحة.",
},
id: "2", title: "ما هي اللغات المدعومة في الموقع؟", content: "الموقع يدعم اللغتين العربية والفرنسية بشكل كامل. يمكنكم التبديل بين اللغتين في أي وقت باستخدام زر تغيير اللغة الموجود في أعلى الصفحة."},
{
id: "3",
title: "كيف يمكنني تتبع حالة الموعد الذي حجزته؟",
content: "بعد حجز الموعد، ستتلقون رقم تعريف خاص (ID). يمكنكم استخدام هذا الرقم في بوابة 'تتبع المواعيد' للمعاينة الفورية لحالة موعدكم.",
},
id: "3", title: "كيف يمكنني تتبع حالة الموعد الذي حجزته؟", content: "بعد حجز الموعد، ستتلقون رقم تعريف خاص (ID). يمكنكم استخدام هذا الرقم في بوابة 'تتبع المواعيد' للمعاينة الفورية لحالة موعدكم."},
]}
imageSrc="http://img.b2bpic.net/free-photo/millennial-employee-stretching-taking-break-from-computer-work-relaxation_1163-4104.jpg"
imageAlt="Students asking questions in a classroom setting"
@@ -234,17 +159,13 @@ export default function LandingPage() {
<ContactText
useInvertedBackground={false}
background={{
variant: "plain",
}}
variant: "plain"}}
text="لمزيد من المعلومات أو لأي استفسارات، لا تترددوا في الاتصال بنا. فريق Complexe Éducatif Lixus هنا لمساعدتكم وتقديم الدعم اللازم."
buttons={[
{
text: "إرسال رسالة",
},
text: "إرسال رسالة"},
{
text: "اتصل بنا: 0539 52 13 33",
href: "tel:+212539521333",
},
text: "اتصل بنا: 0539 52 13 33", href: "tel:+212539521333"},
]}
/>
</div>
@@ -253,13 +174,9 @@ export default function LandingPage() {
<FooterLogoReveal
logoText="Complexe Éducatif Lixus"
leftLink={{
text: "سياسة الخصوصية",
href: "/privacy",
}}
text: "سياسة الخصوصية", href: "/privacy"}}
rightLink={{
text: "شروط الاستخدام",
href: "/terms",
}}
text: "شروط الاستخدام", href: "/terms"}}
/>
</div>
</ReactLenis>

View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #FFFFFF;
--card: #F8F8F8;
--foreground: #2C2C2C;
--primary-cta: #900020;
--primary-cta-text: #FFFFFF;
--background: #ffffff;
--card: #f9f9f9;
--foreground: #2c2c2c;
--primary-cta: #E0115F;
--primary-cta-text: #ffffff;
--secondary-cta: #0B4A23;
--secondary-cta-text: #FFFFFF;
--accent: #E0E0E0;
--background-accent: #F0F0F0;
--secondary-cta-text: #ffffff;
--accent: #e2e2e2;
--background-accent: #f0f0f0;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

View File

@@ -1,200 +1,154 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import React, { useState, useCallback } from "react";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterBase from '@/components/sections/footer/FooterBase';
import MediaAbout from '@/components/sections/about/MediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Search } from "lucide-react";
const mockAppointmentData: { [key: string]: string } = {
"12345": "Confirmed - Your appointment is scheduled for 2024-10-26 at 10:00 AM.", "67890": "Pending - Your request is being reviewed. Please check back later.", "11223": "Cancelled - Your appointment was cancelled. Please re-book if needed."};
export default function TrackingPage() {
const [appointmentNumber, setAppointmentNumber] = useState("");
const [appointmentStatus, setAppointmentStatus] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const handleTrackAppointment = useCallback(() => {
setError(null);
setAppointmentStatus(null);
if (!appointmentNumber.trim()) {
setError("Please enter an appointment number.");
return;
}
const status = mockAppointmentData[appointmentNumber.trim()];
if (status) {
setAppointmentStatus(status);
} else {
setAppointmentStatus("Appointment not found. Please check the number and try again.");
}
}, [appointmentNumber]);
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeLargeTitles"
background="blurBottom"
cardStyle="gradient-bordered"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="semibold"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeLargeTitles"
background="blurBottom"
cardStyle="gradient-bordered"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "الرئيسية",
id: "hero",
},
{
name: "عنّا",
id: "about",
},
{
name: "خدماتنا",
id: "features",
},
{
name: "تواصل معنا",
id: "contact",
},
{
name: "حجز موعد",
href: "/appointments",
id: "5",
},
]}
brandName="Complexe Éducatif Lixus"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "الرئيسية", id: "hero"},
{
name: "عنّا", id: "about"},
{
name: "خدماتنا", id: "features"},
{
name: "تواصل معنا", id: "contact"},
{
name: "حجز موعد", href: "/appointments", id: "5"},
{
name: "تتبع الموعد", href: "/tracking", id: "tracking"},
]}
brandName="Complexe Éducatif Lixus"
/>
</div>
<div id="tracking-intro" data-section="tracking-intro">
<MediaAbout
useInvertedBackground={false}
title="تتبع مواعيد أبنائك بسهولة ويسر"
description="مع نظام تتبع المواعيد الخاص بنا، كن على اطلاع دائم بجدول أبنائك ومواعيدهم التعليمية بضغطة زر."
imageSrc="http://img.b2bpic.net/free-photo/colleagues-studying-university-library_23-2148844693.jpg?_wi=2"
imageAlt="happy diverse students classroom"
/>
</div>
<main className="flex min-h-[calc(100vh-var(--navbar-height)-var(--footer-height))] flex-col items-center justify-center p-8 text-center">
<div className="w-full max-w-md rounded-lg p-6 shadow-lg sm:p-8"
style={{
background: 'var(--card)',
borderColor: 'var(--primary-cta)',
borderWidth: '1px',
borderStyle: 'solid',
}}
>
<h1 className="mb-6 text-3xl font-bold md:text-4xl"
style={{ color: 'var(--foreground)' }}
>
تتبع حالة موعدك
</h1>
<p className="mb-8 text-lg"
style={{ color: 'var(--foreground)' }}
>
أدخل رقم الموعد الخاص بك لمعرفة حالته.
</p>
<div className="flex flex-col gap-4 sm:flex-row">
<input
type="text"
value={appointmentNumber}
onChange={(e) => setAppointmentNumber(e.target.value)}
placeholder="أدخل رقم الموعد"
className="flex-grow rounded-md border p-3 text-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
style={{
borderColor: 'var(--accent)',
background: 'var(--background-accent)',
color: 'var(--foreground)',
'::placeholder': { color: 'var(--foreground)' } // This won't work in inline style but sets intention
}}
aria-label="Appointment Number Input"
/>
<button
onClick={handleTrackAppointment}
className="flex items-center justify-center gap-2 rounded-md p-3 text-lg font-semibold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-cta"
style={{
background: 'var(--primary-cta)',
color: 'var(--background)',
}}
aria-label="Track Appointment Button"
>
<Search size={20} />
تتبع
</button>
</div>
<div id="tracking-steps" data-section="tracking-steps">
<FeatureCardEight
textboxLayout="default"
useInvertedBackground={true}
features={[
{
id: 1,
title: "تسجيل الدخول",
description: "ادخل إلى حسابك الخاص على منصة Complexe Éducatif Lixus.",
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-notebook-coffee-table_23-2148036911.jpg?_wi=3",
imageAlt: "Login screen",
},
{
id: 2,
title: "اذهب إلى 'مواعيدي'",
description: "في لوحة التحكم، ابحث عن قسم 'مواعيدي' أو 'تتبع المواعيد'.",
imageSrc: "http://img.b2bpic.net/free-vector/medical-booking-application-interface_23-2148569125.jpg?_wi=4",
imageAlt: "Dashboard with appointments list",
},
{
id: 3,
title: "عرض التفاصيل",
description: "اضغط على الموعد المطلوب لترى تفاصيله وحالته الحالية.",
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-notebook-coffee-table_23-2148036911.jpg?_wi=4",
imageAlt: "Appointment detail screen",
},
]}
title="كيف يعمل تتبع المواعيد؟"
description="من لوحة التحكم الخاصة بك، يمكنك بسهولة متابعة حالة كل موعد ومراحل تقدمه."
/>
</div>
{error && <p className="mt-4 text-red-500">{error}</p>}
<div id="tracking-faqs" data-section="tracking-faqs">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "1",
title: "متى يتم تحديث حالة الموعد؟",
content: "تُحدّث حالات المواعيد فورياً عند أي تغيير يقوم به المعلم أو الإدارة.",
},
{
id: "2",
title: "هل يمكنني تتبع المواعيد القديمة؟",
content: "نعم، يمكنك الوصول إلى سجل كامل لمواعيدك السابقة لمراجعتها.",
},
{
id: "3",
title: "ماذا لو لم أجد موعدي؟",
content: "تأكد من استخدام نفس الحساب الذي حجزت به الموعد، أو تواصل مع الدعم الفني للمساعدة.",
},
]}
title="الأسئلة الشائعة حول تتبع المواعيد"
description="ابحث عن إجابات لأسئلتك الأكثر شيوعاً حول كيفية استخدام نظام تتبع المواعيد."
faqsAnimation="slide-up"
/>
</div>
{appointmentStatus && (
<div className="mt-8 rounded-md p-4"
style={{
background: 'var(--background-accent)',
borderColor: 'var(--accent)',
borderWidth: '1px',
borderStyle: 'solid',
}}
>
<h2 className="mb-2 text-xl font-semibold"
style={{ color: 'var(--foreground)' }}
>
حالة الموعد:
</h2>
<p className="text-lg"
style={{ color: 'var(--foreground)' }}
>
{appointmentStatus}
</p>
</div>
)}
</div>
</main>
<div id="contact-support" data-section="contact-support">
<ContactCTA
useInvertedBackground={true}
background={{
variant: "gradient-bars",
}}
tag="تحتاج إلى مساعدة؟"
title="تواصل مع فريق الدعم لدينا"
description="إذا واجهتك أي مشكلة في تتبع مواعيدك أو لديك استفسارات، فلا تتردد في الاتصال بنا."
buttons={[
{
text: "تحدث إلينا",
href: "/contact",
},
{
text: "أرسل بريداً إلكترونياً",
href: "mailto:support@complexelixus.com",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "خدماتنا",
items: [
{
label: "حجز المواعيد",
href: "/appointments",
},
{
label: "تتبع المواعيد",
href: "/tracking",
},
{
label: "لوحة الإدارة",
href: "/admin",
},
],
},
{
title: "المدرسة",
items: [
{
label: "عنّا",
href: "/about",
},
{
label: "اتصل بنا",
href: "/contact",
},
],
},
{
title: "الدعم",
items: [
{
label: "الأسئلة الشائعة",
href: "/faq",
},
{
label: "المساعدة",
href: "/help",
},
],
},
]}
logoText="Complexe Éducatif Lixus"
copyrightText="© 2024 Complexe Éducatif Lixus. جميع الحقوق محفوظة."
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Complexe Éducatif Lixus"
leftLink={{
text: "سياسة الخصوصية", href: "/privacy"}}
rightLink={{
text: "شروط الاستخدام", href: "/terms"}}
/>
</div>
</ReactLenis>
</ThemeProvider>
);