Merge version_4 into main #4
283
src/app/page.tsx
283
src/app/page.tsx
@@ -2,16 +2,16 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import { Award, Calendar, CheckCircle, Facebook, Instagram, MessageCircle, Phone, Scissors, Sparkles, Star, ThumbsUp, User } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
@@ -29,166 +29,135 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="D1 Salon"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="D1 Salon"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="الوجهة الأولى للجمال والأناقة"
|
||||
description="استمتع بتجربة حلاقة وعناية استثنائية في صالون دي ون (D1 Salon). الاحترافية واللمسة العصرية في مكان واحد."
|
||||
testimonials={[
|
||||
{ name: "أحمد علي", handle: "@ahmed", testimonial: "تجربة أكثر من رائعة! محترفون بمعنى الكلمة.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-hair-salon_23-2150665422.jpg" },
|
||||
{ name: "محمد خالد", handle: "@mohamed", testimonial: "خدمة ممتازة ونظافة عالية جداً.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205929.jpg" },
|
||||
{ name: "خالد سعد", handle: "@khaled", testimonial: "أفضل حلاق تعاملت معه في الرياض.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-sitting-chair_23-2149220526.jpg" },
|
||||
{ name: "سلطان إبراهيم", handle: "@sultan", testimonial: "دقة في المواعيد واحترافية عالية.", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665410.jpg" },
|
||||
{ name: "فيصل تركي", handle: "@faisal", testimonial: "أجواء مريحة وخدمة تليق بالرجال.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pensive-middle-aged-man-with-beard-hairstyle-dressed-elegant-blue-suit-textured-dark-background-studio_613910-19895.jpg" },
|
||||
]}
|
||||
buttons={[{ text: "احجز موعدك الآن", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186474.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg", alt: "barber interior 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/barber-shop-interior_1163-2009.jpg", alt: "barber interior 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/barber-shop-retro-vintage-style_1150-17931.jpg", alt: "barber interior 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/chairs-green-male-barbershop-retro-style_627829-8284.jpg", alt: "barber interior 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186474.jpg", alt: "barbershop luxury interior" },
|
||||
]}
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "خدمات حلاقة متميزة" },
|
||||
{ type: "text", text: "أعلى معايير النظافة" },
|
||||
{ type: "text", text: "فريق عمل محترف" },
|
||||
{ type: "text", text: "حجز إلكتروني سريع" },
|
||||
{ type: "text", text: "تجربة صالون فاخرة" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="الوجهة الأولى للجمال والأناقة"
|
||||
description="استمتع بتجربة حلاقة وعناية استثنائية في صالون دي ون (D1 Salon). الاحترافية واللمسة العصرية في مكان واحد."
|
||||
testimonials={[]}
|
||||
buttons={[{ text: "احجز موعدك الآن", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186474.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="عن صالون دي ون"
|
||||
metrics={[
|
||||
{ icon: Scissors, label: "سنوات خبرة", value: "10+" },
|
||||
{ icon: Star, label: "عملاء راضون", value: "5000+" },
|
||||
{ icon: Award, label: "جوائز التميز", value: "15" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="تجربة استثنائية في صالون دي ون"
|
||||
description="نجمع بين التقاليد العريقة والأساليب الحديثة في عالم الحلاقة لنمنحك أفضل تجربة شخصية ممكنة."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665410.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ icon: Scissors, title: "حلاقة احترافية", description: "قصات شعر عصرية تناسب مظهرك." },
|
||||
{ icon: Sparkles, title: "عناية بالبشرة", description: "تنظيف وتنقية البشرة بأجود المنتجات." },
|
||||
{ icon: User, title: "تعديل الذقن", description: "تحديد وتنسيق دقيق للذقن." },
|
||||
]}
|
||||
title="خدماتنا المميزة"
|
||||
description="نقدم مجموعة متكاملة من خدمات العناية بالرجل بأسلوب احترافي."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ icon: Scissors, title: "حلاقة احترافية", description: "قصات شعر عصرية تناسب مظهرك." },
|
||||
{ icon: Sparkles, title: "عناية بالبشرة", description: "تنظيف وتنقية البشرة بأجود المنتجات." },
|
||||
{ icon: User, title: "تعديل الذقن", description: "تحديد وتنسيق دقيق للذقن." },
|
||||
]}
|
||||
title="خدماتنا المميزة"
|
||||
description="نقدم مجموعة متكاملة من خدمات العناية بالرجل بأسلوب احترافي."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "أحمد", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205917.jpg" },
|
||||
{ id: "2", name: "سلطان", imageSrc: "http://img.b2bpic.net/free-photo/man-hair-salon-looking-sideways_23-2148242781.jpg" },
|
||||
{ id: "3", name: "خالد", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-smiling-female_1301-109.jpg" },
|
||||
{ id: "4", name: "فيصل", imageSrc: "http://img.b2bpic.net/free-photo/stylish-hairdresser-styling-hair-man_23-2147778738.jpg" },
|
||||
{ id: "5", name: "محمد", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-fashionable-handsome-male-blue-classic-shirt_181624-29628.jpg" },
|
||||
]}
|
||||
cardTitle="ماذا يقول عملاؤنا"
|
||||
cardTag="Testimonials"
|
||||
cardAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardSixteen
|
||||
title="قصص النجاح"
|
||||
description="آراء عملائنا الكرام تهمنا كثيراً لنستمر في التطوير."
|
||||
testimonials={[]}
|
||||
kpiItems={[
|
||||
{ value: "5000+", label: "عميل سعيد" },
|
||||
{ value: "10+", label: "سنوات خبرة" },
|
||||
{ value: "15", label: "جائزة تميز" }
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "100%", title: "نظافة", description: "معايير التعقيم العالمية", icon: CheckCircle },
|
||||
{ id: "m2", value: "98%", title: "رضا", description: "تقييم العملاء الدوري", icon: ThumbsUp },
|
||||
{ id: "m3", value: "24/7", title: "دعم", description: "حجز إلكتروني متاح", icon: Calendar },
|
||||
]}
|
||||
title="إنجازات الصالون"
|
||||
description="نلتزم بتقديم تجربة استثنائية لعملائنا في كل زيارة."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "100%", title: "نظافة", description: "معايير التعقيم العالمية", icon: CheckCircle },
|
||||
{ id: "m2", value: "98%", title: "رضا", description: "تقييم العملاء الدوري", icon: ThumbsUp },
|
||||
{ id: "m3", value: "24/7", title: "دعم", description: "حجز إلكتروني متاح", icon: Calendar },
|
||||
]}
|
||||
title="إنجازات الصالون"
|
||||
description="نلتزم بتقديم تجربة استثنائية لعملائنا في كل زيارة."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{ id: "t1", name: "محمد", role: "كبير الحلاقين", imageSrc: "http://img.b2bpic.net/free-photo/close-up-priest-his-lunch-time_23-2149284678.jpg" },
|
||||
{ id: "t2", name: "علي", role: "خبير تجميل", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-is-wearing-black-apron-there-are-hand-tools-bag_1150-24064.jpg" },
|
||||
{ id: "t3", name: "خالد", role: "استشاري مظهر", imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-trimmer-hair-brushes-looking-aside-with-angry-face-swinging-hair-brush_141793-37066.jpg" },
|
||||
]}
|
||||
title="فريق العمل"
|
||||
description="خبراء في مجال الحلاقة والعناية الشخصية."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{ id: "t1", name: "محمد", role: "كبير الحلاقين", imageSrc: "http://img.b2bpic.net/free-photo/close-up-priest-his-lunch-time_23-2149284678.jpg" },
|
||||
{ id: "t2", name: "علي", role: "خبير تجميل", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-is-wearing-black-apron-there-are-hand-tools-bag_1150-24064.jpg" },
|
||||
{ id: "t3", name: "خالد", role: "استشاري مظهر", imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-trimmer-hair-brushes-looking-aside-with-angry-face-swinging-hair-brush_141793-37066.jpg" },
|
||||
]}
|
||||
title="فريق العمل"
|
||||
description="خبراء في مجال الحلاقة والعناية الشخصية."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "هل يتطلب الحجز موعد مسبق؟", content: "نعم، ننصح بالحجز لضمان توفر الخدمة." },
|
||||
{ id: "f2", title: "ما هي ساعات العمل؟", content: "نعمل يومياً من 10 صباحاً وحتى 10 مساءً." },
|
||||
]}
|
||||
sideTitle="أسئلة شائعة"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "هل يتطلب الحجز موعد مسبق؟", content: "نعم، ننصح بالحجز لضمان توفر الخدمة." },
|
||||
{ id: "f2", title: "ما هي ساعات العمل؟", content: "نعمل يومياً من 10 صباحاً وحتى 10 مساءً." },
|
||||
]}
|
||||
title="أسئلة شائعة"
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="split"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="احجز موعدك الآن"
|
||||
description="سجل بياناتك لحجز جلستك القادمة بكل سهولة. يمكنك أيضاً مراسلتنا عبر الواتساب للحجز المباشر."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "الاسم", required: true },
|
||||
{ name: "email", type: "email", placeholder: "البريد الإلكتروني", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "رقم الجوال", required: true }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "تفاصيل الموعد المطلوب" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-professional-barber-cutting-hair_23-2149220556.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
title="تواصل معنا"
|
||||
description="يسعدنا سماع استفساراتكم وحجز مواعيدكم بكل سرور."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-professional-barber-cutting-hair_23-2149220556.jpg"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="D1 Salon"
|
||||
socialLinks={[
|
||||
{ icon: MessageCircle, href: "https://wa.me/", ariaLabel: "WhatsApp" },
|
||||
{ icon: Instagram, href: "https://instagram.com/", ariaLabel: "Instagram" },
|
||||
{ icon: Facebook, href: "https://facebook.com/", ariaLabel: "Facebook" },
|
||||
{ icon: Phone, href: "tel:+966500000000", ariaLabel: "Phone" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="D1 Salon"
|
||||
columns={[
|
||||
{ title: "الخدمات", items: [{ label: "حلاقة", href: "#" }, { label: "عناية", href: "#" }] },
|
||||
{ title: "روابط", items: [{ label: "تواصل", href: "#contact" }, { label: "الأسئلة", href: "#faq" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user