419 lines
16 KiB
TypeScript
419 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import Link from "next/link";
|
|
import {
|
|
Sparkles,
|
|
Star,
|
|
Bookmark,
|
|
ArrowRight,
|
|
Heart,
|
|
Zap,
|
|
Wand2,
|
|
Compass,
|
|
Smile,
|
|
TrendingUp,
|
|
Award,
|
|
} from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "الرئيسية", id: "/" },
|
|
{ name: "التصنيفات", id: "/categories" },
|
|
{ name: "القصص الشهيرة", id: "popular" },
|
|
{ name: "حسابي", id: "account" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "الأقسام",
|
|
items: [
|
|
{ label: "جميع القصص", href: "#all-stories" },
|
|
{ label: "التصنيفات", href: "/categories" },
|
|
{ label: "القصص الشهيرة", href: "#popular" },
|
|
{ label: "القصص الجديدة", href: "#latest" },
|
|
],
|
|
},
|
|
{
|
|
title: "الحساب",
|
|
items: [
|
|
{ label: "تسجيل الدخول", href: "#login" },
|
|
{ label: "إنشاء حساب", href: "#signup" },
|
|
{ label: "قصصي المفضلة", href: "#favorites" },
|
|
{ label: "حسابي", href: "#account" },
|
|
],
|
|
},
|
|
{
|
|
title: "معلومات",
|
|
items: [
|
|
{ label: "حول المنصة", href: "#about" },
|
|
{ label: "اتصل بنا", href: "#contact" },
|
|
{ label: "سياسة الخصوصية", href: "#privacy" },
|
|
{ label: "شروط الاستخدام", href: "#terms" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="blurBottom"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="حكايات عربية"
|
|
navItems={navItems.map((item) => ({
|
|
name: item.name,
|
|
id: item.id,
|
|
}))}
|
|
button={{
|
|
text: "بحث",
|
|
href: "#search",
|
|
}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
title="استكشف عالم القصص العربية"
|
|
description="انغمس في مجموعة متنوعة من القصص المثيرة والملهمة من الكتاب العرب. من الرومانسية إلى المغامرة، من القصص القصيرة إلى الروايات الطويلة، نحن نوفر لك أفضل المحتوى العربي."
|
|
tag="مرحباً بك"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "ابدأ القراءة", href: "#latest" },
|
|
{ text: "استكشف التصنيفات", href: "#categories" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
carouselItems={[
|
|
{
|
|
id: "1",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/muslim-woman-praying-sunlight_23-2147794173.jpg?_wi=1",
|
|
imageAlt: "قصة رومانسية",
|
|
},
|
|
{
|
|
id: "2",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-vector/flat-design-vintage-travel-poster_52683-14409.jpg?_wi=1",
|
|
imageAlt: "قصة مغامرة",
|
|
},
|
|
{
|
|
id: "3",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-vector/iftar-party-invitation-with-mosque-silhouette-watercolor-style_23-2147808292.jpg?_wi=1",
|
|
imageAlt: "قصة خيال",
|
|
},
|
|
{
|
|
id: "4",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-vector/halloween-party-poster-with-zombies_23-2147690116.jpg?_wi=1",
|
|
imageAlt: "قصة الرعب",
|
|
},
|
|
{
|
|
id: "5",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-vector/flat-travel-flyer-template-with-adveture-style_23-2147836905.jpg?_wi=1",
|
|
imageAlt: "قصة حقيقية",
|
|
},
|
|
{
|
|
id: "6",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-vector/family-enjoying-time-together_23-2148524314.jpg?_wi=1",
|
|
imageAlt: "قصة فكاهية",
|
|
},
|
|
]}
|
|
autoPlay={true}
|
|
autoPlayInterval={4000}
|
|
background={{ variant: "gradient-bars" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="latest" data-section="latest">
|
|
<ProductCardTwo
|
|
title="أحدث القصص"
|
|
description="اكتشف أحدث القصص المضافة إلى منصتنا الإسلامية والعربية"
|
|
tag="جديد"
|
|
tagIcon={Star}
|
|
tagAnimation="opacity"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
products={[
|
|
{
|
|
id: "1",
|
|
brand: "القاهرة",
|
|
name: "نور القمر",
|
|
price: "مجاني",
|
|
rating: 5,
|
|
reviewCount: "1.2k",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-vector/watercolor-galaxy-wedding-invitation_23-2148390903.jpg?_wi=1",
|
|
imageAlt: "نور القمر",
|
|
},
|
|
{
|
|
id: "2",
|
|
brand: "بيروت",
|
|
name: "ليالي الذكريات",
|
|
price: "مجاني",
|
|
rating: 4,
|
|
reviewCount: "890",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-psd/autumn-concept-flyer-template_23-2148644919.jpg?_wi=1",
|
|
imageAlt: "ليالي الذكريات",
|
|
},
|
|
{
|
|
id: "3",
|
|
brand: "دمشق",
|
|
name: "حب في الصحراء",
|
|
price: "مجاني",
|
|
rating: 5,
|
|
reviewCount: "2.1k",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/full-shot-women-laying-blanket-outdoors_23-2150494477.jpg?_wi=1",
|
|
imageAlt: "حب في الصحراء",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="categories" data-section="categories">
|
|
<FeatureCardTwentySix
|
|
title="استكشف التصنيفات"
|
|
description="اختر من بين مجموعة متنوعة من التصنيفات للعثور على القصص المفضلة لديك"
|
|
tag="التصنيفات"
|
|
tagIcon={Bookmark}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "قصص قصيرة",
|
|
description: "اقرأ قصصاً قصيرة مثيرة وملهمة",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-vector/linear-flat-instagram-sale-stories-collection_23-2149008612.jpg?_wi=1",
|
|
imageAlt: "قصص قصيرة",
|
|
buttonIcon: ArrowRight,
|
|
buttonHref: "/categories/short-stories",
|
|
},
|
|
{
|
|
title: "قصص رومانسية",
|
|
description: "غوص في عالم الحب والعاطفة",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/lifestyle-couple-date-night_23-2149131784.jpg?_wi=1",
|
|
imageAlt: "قصص رومانسية",
|
|
buttonIcon: Heart,
|
|
buttonHref: "/categories/romantic",
|
|
},
|
|
{
|
|
title: "قصص الرعب",
|
|
description: "استعد للقصص المرعبة والمثيرة",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/silhouette-scary-zombie-with-dramatic-background_9083-8119.jpg?_wi=1",
|
|
imageAlt: "قصص الرعب",
|
|
buttonIcon: Zap,
|
|
buttonHref: "/categories/horror",
|
|
},
|
|
{
|
|
title: "قصص خيال",
|
|
description: "استكشف عوالم خيالية ومدهشة",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/birthday-warm-antique-white-friendship-handmade_1418-4.jpg?_wi=1",
|
|
imageAlt: "قصص خيال",
|
|
buttonIcon: Wand2,
|
|
buttonHref: "/categories/fantasy",
|
|
},
|
|
{
|
|
title: "قصص مغامرة",
|
|
description: "انطلق في رحلات مشوقة ومثيرة",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-vector/travelling-different-locations-illustrated-poster-template_23-2148476094.jpg?_wi=1",
|
|
imageAlt: "قصص مغامرة",
|
|
buttonIcon: Compass,
|
|
buttonHref: "/categories/adventure",
|
|
},
|
|
{
|
|
title: "قصص أطفال",
|
|
description: "قصص تعليمية ومرحة للأطفال",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-vector/lovely-family-day-card_23-2147547229.jpg?_wi=1",
|
|
imageAlt: "قصص أطفال",
|
|
buttonIcon: Smile,
|
|
buttonHref: "/categories/kids",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="popular" data-section="popular">
|
|
<ProductCardTwo
|
|
title="القصص الشهيرة"
|
|
description="أكثر القصص قراءة والمفضلة من قبل قرائنا"
|
|
tag="الأكثر شهرة"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="scale-rotate"
|
|
products={[
|
|
{
|
|
id: "1",
|
|
brand: "الرياض",
|
|
name: "خيوط الروح",
|
|
price: "مجاني",
|
|
rating: 5,
|
|
reviewCount: "5.8k",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/beautiful-sensitive-hands-concept_23-2149535918.jpg?_wi=1",
|
|
imageAlt: "خيوط الروح",
|
|
},
|
|
{
|
|
id: "2",
|
|
brand: "الإسكندرية",
|
|
name: "همسات الليل",
|
|
price: "مجاني",
|
|
rating: 5,
|
|
reviewCount: "4.2k",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/green-plant-leaves-background_1372-340.jpg?_wi=1",
|
|
imageAlt: "همسات الليل",
|
|
},
|
|
{
|
|
id: "3",
|
|
brand: "عمّان",
|
|
name: "مسار القدر",
|
|
price: "مجاني",
|
|
rating: 4,
|
|
reviewCount: "3.9k",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-vector/flat-reyes-magos-letter-template_23-2149916698.jpg?_wi=1",
|
|
imageAlt: "مسار القدر",
|
|
},
|
|
{
|
|
id: "4",
|
|
brand: "الكويت",
|
|
name: "طريق الأمل",
|
|
price: "مجاني",
|
|
rating: 5,
|
|
reviewCount: "6.1k",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-vector/explorer-with-backpack_23-2148151221.jpg?_wi=1",
|
|
imageAlt: "طريق الأمل",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="featured" data-section="featured">
|
|
<ProductCardTwo
|
|
title="القصص المختارة"
|
|
description="اختيارات فريقنا من أفضل القصص الموصى بها"
|
|
tag="مختارة"
|
|
tagIcon={Award}
|
|
tagAnimation="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
gridVariant="bento-grid"
|
|
animationType="opacity"
|
|
products={[
|
|
{
|
|
id: "1",
|
|
brand: "الدار البيضاء",
|
|
name: "سحر الكلمات",
|
|
price: "مجاني",
|
|
rating: 5,
|
|
reviewCount: "2.3k",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/lot-candles-with-candlesticks-home-space-home-comfort-warmth_169016-9792.jpg?_wi=1",
|
|
imageAlt: "سحر الكلمات",
|
|
},
|
|
{
|
|
id: "2",
|
|
brand: "بغداد",
|
|
name: "أسرار القلب",
|
|
price: "مجاني",
|
|
rating: 5,
|
|
reviewCount: "1.8k",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-photo/back-view-woman-walking-field_23-2147781167.jpg?_wi=1",
|
|
imageAlt: "أسرار القلب",
|
|
},
|
|
{
|
|
id: "3",
|
|
brand: "تونس",
|
|
name: "رحلة الفراشة",
|
|
price: "مجاني",
|
|
rating: 4,
|
|
reviewCount: "1.5k",
|
|
imageSrc:
|
|
"http://img.b2bpic.net/free-vector/flat-butterflies-flying-background_23-2148092194.jpg?_wi=1",
|
|
imageAlt: "رحلة الفراشة",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="منصة حكايات عربية غيرت طريقتي في قراءة القصص! المحتوى متنوع وجودة عالية جداً، والتطبيق سهل الاستخدام. أنا أقضي وقتاً طويلاً وأستمتع بكل قصة."
|
|
rating={5}
|
|
author="فاطمة أحمد، معلمة"
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-vector/group-women_24908-60273.jpg",
|
|
alt: "فاطمة أحمد",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-vector/hand-drawn-flat-people-avatars-collection_23-2149651452.jpg",
|
|
alt: "محمود علي",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/cute-girl-have-rest-summer-park_1157-20797.jpg",
|
|
alt: "نور سارة",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-vector/white-women-collection-different-ages_23-2147856842.jpg",
|
|
alt: "ليلى حسن",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-1524.jpg",
|
|
alt: "خالد عمر",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-vector/variety-flat-female-avatars_23-2147668580.jpg",
|
|
alt: "مريم محمود",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="حكايات عربية"
|
|
copyrightText="© 2025 حكايات عربية | جميع الحقوق محفوظة"
|
|
columns={footerColumns}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |