270 lines
13 KiB
TypeScript
270 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import { BookOpen, CheckCircle, Clock, GraduationCap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="compact"
|
|
sizing="mediumLarge"
|
|
background="fluid"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "الرئيسية", id: "hero"},
|
|
{
|
|
name: "عن البرنامج", id: "about"},
|
|
{
|
|
name: "المقررات", id: "courses"},
|
|
{
|
|
name: "التسجيل", id: "contact"},
|
|
]}
|
|
brandName="بصائر"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
background={{
|
|
variant: "rotated-rays-animated"}}
|
|
title="بصائر: تأصيل وتحصين"
|
|
description="منهجية علمية أصيلة في دراسة الدين، تأخذ بيد العامي إلى الفهم، وبيد طالب العلم إلى الإتقان."
|
|
buttons={[
|
|
{
|
|
text: "ابدأ التعلم", href: "#courses"},
|
|
{
|
|
text: "تعرف علينا", href: "#about"},
|
|
]}
|
|
carouselItems={[
|
|
{
|
|
id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dp2raVnWhbdx7t6togwtPnxvPm/uploaded-1779052110448-4i531ymy.png", imageAlt: "مقدمة البرنامج"},
|
|
{
|
|
id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dp2raVnWhbdx7t6togwtPnxvPm/uploaded-1779051866101-lx0j621p.png", imageAlt: "المواد العلمية"},
|
|
{
|
|
id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dp2raVnWhbdx7t6togwtPnxvPm/uploaded-1779051844752-rbzkt9t4.png", imageAlt: "البيئة التعليمية"},
|
|
{
|
|
id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dp2raVnWhbdx7t6togwtPnxvPm/uploaded-1779051945487-cx3zbvrt.png", imageAlt: "المنهج المتكامل"},
|
|
{
|
|
id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dp2raVnWhbdx7t6togwtPnxvPm/uploaded-1779051900864-n3gb1utb.png", imageAlt: "التعليم الرقمي"},
|
|
{
|
|
id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dp2raVnWhbdx7t6togwtPnxvPm/uploaded-1779051879617-2hktw9ab.png", imageAlt: "نظام الشهادات"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
useInvertedBackground={false}
|
|
title="أرقام تدعم مسيرتك العلمية"
|
|
metrics={[
|
|
{
|
|
label: "طالب علم ينهلون العلم", value: "300+", icon: GraduationCap,
|
|
},
|
|
{
|
|
label: "مقرر علمي مؤصل", value: "10+", icon: BookOpen,
|
|
},
|
|
{
|
|
label: "ساعات تعليمية", value: "10,000+", icon: Clock,
|
|
},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTen
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "مسارات تعليمية مدروسة", description: "تدرج علمي يبدأ معك من التأسيس إلى التخصص.", media: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dp2raVnWhbdx7t6togwtPnxvPm/uploaded-1779050668976-40lhhtjd.png", imageAlt: "Islamic academy interior"
|
|
},
|
|
items: [
|
|
{
|
|
icon: CheckCircle,
|
|
text: "منهجية علمية على طريقة أهل السنة والجماعة"},
|
|
{
|
|
icon: CheckCircle,
|
|
text: "تدرج منهجي"},
|
|
],
|
|
reverse: false,
|
|
},
|
|
{
|
|
title: "محتوى متنوع وموثق", description: "نصوص، مرئيات، واختبارات قياس في مكان واحد.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/group-friends-having-coffee-break-library-using-smart-phone_496169-1228.jpg", imageAlt: "Islamic academy interior"
|
|
},
|
|
items: [
|
|
{
|
|
icon: CheckCircle,
|
|
text: "حقيبة علمية رقمية"},
|
|
{
|
|
icon: CheckCircle,
|
|
text: "توثيق علمي"},
|
|
],
|
|
reverse: true,
|
|
},
|
|
{
|
|
title: "تفاعل وتوجيه", description: "حلقات نقاش مباشرة ودعم فني وعلمي دائم.", media: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dp2raVnWhbdx7t6togwtPnxvPm/uploaded-1779050195197-tk4r7ugz.png", imageAlt: "Islamic academy interior"
|
|
},
|
|
items: [
|
|
{
|
|
icon: CheckCircle,
|
|
text: "تواصل مباشر"},
|
|
{
|
|
icon: CheckCircle,
|
|
text: "إشراف علمي"},
|
|
],
|
|
reverse: false,
|
|
},
|
|
]}
|
|
title="لماذا تختار بصائر؟"
|
|
description="نقدم تجربة تعليمية تراعي التدرج وتضمن التوثيق والمنهجية السلفية الرصينة."
|
|
/>
|
|
</div>
|
|
|
|
<div id="courses" data-section="courses">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1", name: "العقيدة", price: "متاح", variant: "تمهيدي", imageSrc: "http://img.b2bpic.net/free-photo/glasses-books-near-crop-woman_23-2147896770.jpg"},
|
|
{
|
|
id: "2", name: "الفقه", price: "متاح", variant: "مستوى أول", imageSrc: "http://img.b2bpic.net/free-photo/pot-candle-near-opened-book_23-2147868944.jpg"},
|
|
{
|
|
id: "3", name: "أصول الفقه", price: "متاح", variant: "متقدم", imageSrc: "http://img.b2bpic.net/free-photo/magnifying-glass-with-stack-books-table_1252-718.jpg"},
|
|
{
|
|
id: "4", name: "التفسير", price: "متاح", variant: "متوسط", imageSrc: "http://img.b2bpic.net/free-vector/blue-background-with-green-pattern_1017-4983.jpg"},
|
|
{
|
|
id: "5", name: "الحديث", price: "متاح", variant: "تخصصي", imageSrc: "http://img.b2bpic.net/free-photo/side-view-boy-using-laptop_23-2147782837.jpg"},
|
|
{
|
|
id: "6", name: "الأدب", price: "متاح", variant: "عام", imageSrc: "http://img.b2bpic.net/free-vector/ornamental-peter-smith-bartender-certificate_742173-9506.jpg"},
|
|
]}
|
|
title="المقررات العلمية"
|
|
description="اختر مسارك التعليمي من العقيدة إلى الأدب."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "95%", title: "نسبة الرضا", description: "عن جودة المحتوى.", imageSrc: "http://img.b2bpic.net/free-photo/empty-modern-office-business-entrepreneur-with-laptop_482257-91248.jpg"},
|
|
{
|
|
id: "m2", value: "80%", title: "إتمام المقررات", description: "متوسط إكمال الطلاب.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-school-supplies-dark-surface_179666-46990.jpg"},
|
|
{
|
|
id: "m3", value: "12", title: "دولة", description: "تغطيها منصتنا.", imageSrc: "http://img.b2bpic.net/free-photo/sleepy-girl-sitting-table_23-2147657329.jpg"},
|
|
]}
|
|
title="نمو مستمر"
|
|
description="نتائج ملموسة لمستفيدينا."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "أحمد العلي", handle: "طالب علم", testimonial: "منصة ممتازة ومنهجية رصينة.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-holding-notebook-studio_23-2147844833.jpg"},
|
|
{
|
|
id: "2", name: "سارة محمد", handle: "طالبة", testimonial: "تدرج رائع وواضح في العلوم.", imageSrc: "http://img.b2bpic.net/free-photo/image-adult-africanamerican-man-holding-notebooks-smiling-studying-courses-standing-p_1258-173854.jpg"},
|
|
{
|
|
id: "3", name: "خالد عبد الله", handle: "عامي", testimonial: "سهلت علي فهم الدين بشكل مبسط.", imageSrc: "http://img.b2bpic.net/free-photo/glad-astonished-black-male-green-jumper-points-with-both-index-fingers-has-toothy-smile-surrounded-with-many-books_273609-23937.jpg"},
|
|
{
|
|
id: "4", name: "نورة العتيبي", handle: "طالبة", testimonial: "دعم فني وعلمي متميز جداً.", imageSrc: "http://img.b2bpic.net/free-photo/funny-dark-skinned-man-with-african-hairstyle-working-course-paper-while-sitting-cafe-lunch-break-holding-smartphone-being-happy-finish-his-work-african-guy-with-broad-smile-cafe_273609-7461.jpg"},
|
|
{
|
|
id: "5", name: "ياسر إبراهيم", handle: "طالب علم", testimonial: "بصائر هي الملاذ لكل باحث عن الحق.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-guy-holding-notebooks-celebrating-making-fist-pump-shouting-yes-with-excitement-sta_1258-161824.jpg"},
|
|
]}
|
|
title="ماذا يقول طلابنا؟"
|
|
description="تجربة حقيقية لمنهجية بصائر."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "f1", title: "كيف أسجل في البرنامج؟", content: "يمكنك التسجيل عبر الرابط في صفحة التسجيل."},
|
|
{
|
|
id: "f2", title: "هل يوجد دورات مسجلة؟", content: "نعم، نقدم شهادات إتمام معتمدة من إدارة البرنامج."},
|
|
{
|
|
id: "f3", title: "هل البرنامج مناسب للمبتدئين في طلب العلم؟", content: "بالتأكيد، لدينا مسار تمهيدي خاص."},
|
|
]}
|
|
sideTitle="هل لديك استفسار؟"
|
|
sideDescription="إجابات على أكثر أسئلة المستفيدين شيوعاً."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "rotated-rays-animated"}}
|
|
tag="تواصل"
|
|
title="انضم إلينا اليوم"
|
|
description="سجل الآن في برنامج بصائر وابدأ رحلتك العلمية."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "عن بصائر", href: "#about"},
|
|
{
|
|
label: "المقررات", href: "#courses"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "الخصوصية", href: "#"},
|
|
{
|
|
label: "شروط الاستخدام", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="بصائر"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|