214 lines
11 KiB
TypeScript
214 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="grid"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "الرئيسية", id: "hero"},
|
|
{
|
|
name: "المنتجات", id: "products"},
|
|
{
|
|
name: "مميزاتنا", id: "features"},
|
|
{
|
|
name: "آراء العملاء", id: "testimonials"},
|
|
{
|
|
name: "اتصل بنا", id: "contact"},
|
|
]}
|
|
brandName="نكهة الشام"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
title="نكهة الشام: سحر الطبيعة بين يديك"
|
|
description="اكتشفي سر الجمال الحقيقي مع منتجاتنا العضوية الفاخرة، المصممة خصيصاً لتمنح بشرتك نضارة لا تقاوم وعناية فائقة."
|
|
buttons={[
|
|
{
|
|
text: "تسوق الآن", href: "#products"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/still-life-cosmetic-products_23-2149163130.jpg"
|
|
imageAlt="مجموعة العناية بالبشرة الفاخرة"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1", name: "كريم الوجه المغذي", price: "120 ريال", imageSrc: "http://img.b2bpic.net/free-photo/top-view-elegant-skincare-container-with-pearls_181624-30633.jpg"},
|
|
{
|
|
id: "2", name: "سيروم الهيدرات الفاخر", price: "180 ريال", imageSrc: "http://img.b2bpic.net/free-photo/nail-serum-with-plant_23-2149046487.jpg"},
|
|
{
|
|
id: "3", name: "منظف البشرة العميق", price: "95 ريال", imageSrc: "http://img.b2bpic.net/free-photo/healthy-jojoba-oil-assortment_23-2149047743.jpg"},
|
|
{
|
|
id: "4", name: "كريم الليل السحري", price: "150 ريال", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-jar-wooden-stand_23-2152010110.jpg"},
|
|
{
|
|
id: "5", name: "زيت الجمال العضوي", price: "210 ريال", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-plant-selfcare-products_23-2149249586.jpg"},
|
|
{
|
|
id: "6", name: "كريم اليدين المخملي", price: "75 ريال", imageSrc: "http://img.b2bpic.net/free-photo/close-up-nail-polish-floating-water_23-2150963115.jpg"},
|
|
]}
|
|
title="منتجاتنا الأكثر مبيعاً"
|
|
description="مجموعة مختارة من أفضل منتجات العناية بالبشرة الطبيعية لتجربة دلال استثنائية."
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "مكونات عضوية 100%", description: "خالية من الكيماويات والمواد الضارة.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-leaf-with-cups-with-cream_23-2148317622.jpg"},
|
|
{
|
|
title: "ابتكار علمي", description: "تركيبات مدروسة لنتائج حقيقية.", imageSrc: "http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797634.jpg"},
|
|
{
|
|
title: "عناية طبية", description: "تم اختبارها من قبل خبراء الجلدية.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-posing-with-gold-body-painting_23-2150466355.jpg"},
|
|
]}
|
|
title="لماذا تختارين نكهة الشام؟"
|
|
description="نحن نؤمن بأن الجمال يبدأ من الطبيعة. لذلك نستخدم أجود المكونات الطبيعية."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "10k+", description: "عميلة سعيدة"},
|
|
{
|
|
id: "m2", value: "50+", description: "منتج عضوي"},
|
|
{
|
|
id: "m3", value: "98%", description: "نسبة رضا العملاء"},
|
|
]}
|
|
title="نجاحاتنا بالأرقام"
|
|
description="ثقة آلاف النساء حول العالم في جودة منتجاتنا."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "سارة أحمد", handle: "@sarah_a", testimonial: "بشرتي أصبحت أكثر نضارة وصحة منذ استخدامي لكريم الوجه.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-woman-shooting-with-projector_23-2149424925.jpg"},
|
|
{
|
|
id: "t2", name: "منى خالد", handle: "@mona_k", testimonial: "تجربة فاخرة بكل ما تعنيه الكلمة، منتجات طبيعية وفعالة.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-black-sweater-standing-posing_114579-58759.jpg"},
|
|
{
|
|
id: "t3", name: "ليلى محمود", handle: "@layla_m", testimonial: "أفضل سيروم استخدمته على الإطلاق، فرق واضح في الملمس.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-with-shopping-bag-concept_23-2148674177.jpg"},
|
|
{
|
|
id: "t4", name: "نورة العتيبي", handle: "@nora_e", testimonial: "خدمة ممتازة ومنتجات ذات جودة عالية جداً، أنصح بها بشدة.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/oman-eye-bondage-lying-floor_23-2147695046.jpg"},
|
|
{
|
|
id: "t5", name: "هند الفهد", handle: "@hind_f", testimonial: "بشرتي حساسة جداً ولم أجد أفضل من هذه المنتجات لتناسبها.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-creating-dermatology-skincare-campaign-promoting-natural-face-cream-moisturizer-beauty-routine-beauty-model-applying-serum-face-advertise-imperfections_482257-62834.jpg"},
|
|
]}
|
|
showRating={true}
|
|
title="ماذا تقول عميلاتنا؟"
|
|
description="تجارب حقيقية لنساء استعدن إشراقة بشرتهن."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "f1", title: "هل منتجاتكم تناسب البشرة الحساسة؟", content: "نعم، جميع منتجاتنا طبيعية ومصممة لتكون لطيفة وآمنة لجميع أنواع البشرة، بما في ذلك البشرة الحساسة."},
|
|
{
|
|
id: "f2", title: "كم يستغرق توصيل الطلب؟", content: "نحن نشحن طلباتكم خلال 3-5 أيام عمل كحد أقصى."},
|
|
{
|
|
id: "f3", title: "كيف يمكنني تتبع طلبي؟", content: "ستصلك رسالة عبر البريد الإلكتروني أو الهاتف تحتوي على رقم تتبع فور خروج الطلب من مستودعاتنا."},
|
|
]}
|
|
title="الأسئلة الشائعة"
|
|
description="كل ما تودين معرفته حول منتجات نكهة الشام للعناية بالبشرة."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "downward-rays-static"}}
|
|
tag="تواصل معنا"
|
|
title="نحن هنا لمساعدتك"
|
|
description="هل لديك أي استفسارات أو تحتاجين لاستشارة بخصوص بشرتك؟ فريقنا مستعد دائماً لخدمتك."
|
|
imageSrc="http://img.b2bpic.net/free-photo/smooth-soft-brownish-gradient-backdrop-abstact-background_1258-102214.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "المنتجات", href: "#products"},
|
|
{
|
|
label: "مميزاتنا", href: "#features"},
|
|
{
|
|
label: "الأسئلة الشائعة", href: "#faq"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "سياسة الخصوصية", href: "#"},
|
|
{
|
|
label: "شروط الاستخدام", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="نكهة الشام"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|