418 lines
14 KiB
TypeScript
418 lines
14 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||
import { Award, Smile, Star } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="bounce-effect"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="pill"
|
||
contentWidth="mediumSmall"
|
||
sizing="medium"
|
||
background="circleGradient"
|
||
cardStyle="gradient-bordered"
|
||
primaryButtonStyle="diagonal-gradient"
|
||
secondaryButtonStyle="glass"
|
||
headingFontWeight="extrabold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingOverlay
|
||
navItems={[
|
||
{
|
||
name: "الرئيسية",
|
||
id: "hero",
|
||
},
|
||
{
|
||
name: "عن الفندق",
|
||
id: "about",
|
||
},
|
||
{
|
||
name: "المرافق",
|
||
id: "features",
|
||
},
|
||
{
|
||
name: "الغرف",
|
||
id: "products",
|
||
},
|
||
{
|
||
name: "تواصل معنا",
|
||
id: "contact",
|
||
},
|
||
]}
|
||
brandName="Mira Hotel"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplitKpi
|
||
background={{
|
||
variant: "gradient-bars",
|
||
}}
|
||
title="فندق ميرا: وجهتك للرفاهية والاسترخاء"
|
||
description="استمتع بتجربة إقامة استثنائية في قلب المدينة، حيث يلتقي الرقي بالخدمة الراقية لنقدم لك ذكريات لا تُنسى."
|
||
kpis={[
|
||
{
|
||
value: "٥ نجوم",
|
||
label: "تصنيف فندقي",
|
||
},
|
||
{
|
||
value: "٢٤/٧",
|
||
label: "خدمة عملاء",
|
||
},
|
||
{
|
||
value: "١٠٠+",
|
||
label: "غرفة فاخرة",
|
||
},
|
||
]}
|
||
enableKpiAnimation={true}
|
||
imageSrc="http://img.b2bpic.net/free-photo/elegant-black-minimal-interior-design_23-2151913264.jpg"
|
||
mediaAnimation="slide-up"
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/full-shot-young-woman-checking-her-phone_23-2149429382.jpg",
|
||
alt: "Happy guest",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/black-hair-sexy-woman-glasses-coat-posed-against-building-with-modern-windows_627829-8622.jpg",
|
||
alt: "Satisfied visitor",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/fashionable-young-woman-grey-coat-hat-walking-street-city-centre-smiling-true-emotions-stylish-lifestyle-luxury-clothes-elegant-look_197531-1885.jpg",
|
||
alt: "Relaxed traveler",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/ai-generated-modern-styled-entryway_23-2150692227.jpg",
|
||
alt: "Content guest",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/portrait-funny-brunette-woman-wears-straw-hat-poses-selfie-shows-tongue-drinks-refreshing-cocktail-stands-against-cafe-interior-beautiful-young-female-model-enjoys-summer-holiday_273609-2356.jpg",
|
||
alt: "Smiling tourist",
|
||
},
|
||
]}
|
||
avatarText="أكثر من ٥٠٠٠ ضيف سعيد"
|
||
marqueeItems={[
|
||
{
|
||
type: "text",
|
||
text: "خدمة ٥ نجوم",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "موقع مركزي",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "تصميم كلاسيكي",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "إفطار فاخر",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "نادي صحي",
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<MediaAbout
|
||
useInvertedBackground={true}
|
||
title="فلسفة الضيافة في ميرا"
|
||
description="نحن نؤمن بأن الفندق هو أكثر من مجرد مكان للنوم؛ إنه ملاذ للراحة والإلهام. تم تصميم كل ركن في ميرا ليوفر لك الهدوء الذي تستحقه."
|
||
imageSrc="http://img.b2bpic.net/free-photo/ai-generated-modern-styled-entryway_23-2150692255.jpg"
|
||
/>
|
||
</div>
|
||
|
||
<div id="features" data-section="features">
|
||
<FeatureCardTwentySeven
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
id: "f1",
|
||
title: "مسبح خارجي",
|
||
descriptions: [
|
||
"مسبح محاط بحدائق غناء للاسترخاء",
|
||
],
|
||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-chairs-hotel-landscape-sky_1203-4616.jpg",
|
||
},
|
||
{
|
||
id: "f2",
|
||
title: "سبا فاخر",
|
||
descriptions: [
|
||
"جلسات مساج وعلاجات استرخائية",
|
||
],
|
||
imageSrc: "http://img.b2bpic.net/free-photo/outdoor-swimming-pool_1203-2810.jpg",
|
||
},
|
||
{
|
||
id: "f3",
|
||
title: "نادي رياضي",
|
||
descriptions: [
|
||
"تجهيزات رياضية حديثة ومتكاملة",
|
||
],
|
||
imageSrc: "http://img.b2bpic.net/free-photo/dumbbell-lifestyle-active-athletic-sporty_1303-524.jpg",
|
||
},
|
||
{
|
||
id: "f4",
|
||
title: "مطعم عالمي",
|
||
descriptions: [
|
||
"أشهى الأطباق بلمسة محلية",
|
||
],
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-relax-smile-leisure-vacation-around-swimming-pool-resort-hotel_74190-14520.jpg",
|
||
},
|
||
{
|
||
id: "f5",
|
||
title: "خدمة الغرف",
|
||
descriptions: [
|
||
"خدمة متاحة على مدار الساعة",
|
||
],
|
||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-luxury-hotel-swimming-pool-resort-with-umbrella-chair_1339-4241.jpg",
|
||
},
|
||
]}
|
||
title="خدماتنا المميزة"
|
||
description="نوفر مجموعة واسعة من المرافق لضمان راحتكم الكاملة طوال فترة إقامتكم."
|
||
/>
|
||
</div>
|
||
|
||
<div id="products" data-section="products">
|
||
<ProductCardTwo
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="uniform-all-items-equal"
|
||
useInvertedBackground={true}
|
||
products={[
|
||
{
|
||
id: "p1",
|
||
name: "الجناح الملكي",
|
||
price: "٩٠٠ ر.س",
|
||
rating: 5,
|
||
reviewCount: "٥٠",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-beautiful-comtemporary-luxury-bedroom-suite-hotel-with-tv_105762-2063.jpg",
|
||
},
|
||
{
|
||
id: "p2",
|
||
name: "جناح الأعمال",
|
||
price: "٦٠٠ ر.س",
|
||
rating: 4,
|
||
reviewCount: "٣٠",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/mix-minimal-nordic-interior-design-with-japanese-wabi-sabi-style_23-2151160128.jpg",
|
||
},
|
||
{
|
||
id: "p3",
|
||
name: "غرفة مزدوجة",
|
||
price: "٤٠٠ ر.س",
|
||
rating: 4,
|
||
reviewCount: "٢٠",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/delicious-breakfast-with-cereals_23-2148877646.jpg",
|
||
},
|
||
{
|
||
id: "p4",
|
||
name: "غرفة ديلوكس",
|
||
price: "٥٥٠ ر.س",
|
||
rating: 5,
|
||
reviewCount: "٤٥",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326546.jpg",
|
||
},
|
||
{
|
||
id: "p5",
|
||
name: "جناح العائلة",
|
||
price: "٨٠٠ ر.س",
|
||
rating: 5,
|
||
reviewCount: "٣٥",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-bed-arrangement-with-magazine-mug_23-2150326158.jpg",
|
||
},
|
||
{
|
||
id: "p6",
|
||
name: "غرفة كلاسيكية",
|
||
price: "٣٠٠ ر.س",
|
||
rating: 4,
|
||
reviewCount: "١٥",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-relaxing-after-waking-up_1163-1473.jpg",
|
||
},
|
||
]}
|
||
title="أجنحتنا وغرفنا"
|
||
description="اختر الغرفة التي تناسب ذوقك وتطلعاتك في فندق ميرا."
|
||
/>
|
||
</div>
|
||
|
||
<div id="metrics" data-section="metrics">
|
||
<MetricCardThree
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
metrics={[
|
||
{
|
||
id: "m1",
|
||
icon: Star,
|
||
title: "تقييم العملاء",
|
||
value: "٤.٩/٥",
|
||
},
|
||
{
|
||
id: "m2",
|
||
icon: Award,
|
||
title: "جوائز التميز",
|
||
value: "١٢",
|
||
},
|
||
{
|
||
id: "m3",
|
||
icon: Smile,
|
||
title: "ضيوف سعداء",
|
||
value: "١٠٠٠٠+",
|
||
},
|
||
]}
|
||
title="أرقامنا في عام"
|
||
description="نفخر بثقة ضيوفنا الكرام خلال رحلتنا."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardThirteen
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
testimonials={[
|
||
{
|
||
id: "t1",
|
||
name: "محمد العتيبي",
|
||
handle: "@mohammed",
|
||
testimonial: "تجربة رائعة وفندق مميز بكل معنى الكلمة.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-blonde-with-blue-suitcase-sitting-chair-near-cafe-purple-pullover-jeans-makeup-hair-style-emotions-autumn-blonde-happy-knitted-smiling-model-beauty_343629-42.jpg",
|
||
},
|
||
{
|
||
id: "t2",
|
||
name: "سارة الراجحي",
|
||
handle: "@sarah",
|
||
testimonial: "الخدمة كانت استثنائية ونظافة المكان لا توصف.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/woman-using-tablet-hotel-room_23-2148095197.jpg",
|
||
},
|
||
{
|
||
id: "t3",
|
||
name: "خالد المنصور",
|
||
handle: "@khalid",
|
||
testimonial: "فندق هادئ ومريح جداً، سأكرر الزيارة حتماً.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/group-young-three-stylish-friends-posing-street-fashion-man-two-cute-girls-dressed-casual-summer-clothes-smiling-models-having-fun-sunglasses-cheerful-women-guy-outdoors_158538-16325.jpg",
|
||
},
|
||
{
|
||
id: "t4",
|
||
name: "ليلى الفهد",
|
||
handle: "@layla",
|
||
testimonial: "موقع الفندق مثالي وقريب من كل شيء.",
|
||
rating: 4,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-business-woman-portrait_23-2149280708.jpg",
|
||
},
|
||
{
|
||
id: "t5",
|
||
name: "أحمد العمري",
|
||
handle: "@ahmed",
|
||
testimonial: "طاقم العمل متعاون جداً والابتسامة لا تفارقهم.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-woman-holding-orange-juice-cafe-with-man-background_1170-551.jpg",
|
||
},
|
||
]}
|
||
showRating={true}
|
||
title="تجربة ضيوفنا"
|
||
description="ماذا يقول النزلاء عن إقامتهم في ميرا؟"
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqSplitMedia
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{
|
||
id: "q1",
|
||
title: "ما هو وقت تسجيل الوصول؟",
|
||
content: "تسجيل الوصول يبدأ من الساعة ٣ مساءً.",
|
||
},
|
||
{
|
||
id: "q2",
|
||
title: "هل يتوفر واي فاي مجاني؟",
|
||
content: "نعم، نوفر واي فاي عالي السرعة في كافة مرافق الفندق.",
|
||
},
|
||
{
|
||
id: "q3",
|
||
title: "هل الفندق صديق للعائلات؟",
|
||
content: "بكل تأكيد، فندقنا مصمم لاستقبال العائلات وتوفير كافة احتياجاتهم.",
|
||
},
|
||
]}
|
||
title="أسئلة شائعة"
|
||
description="نحن هنا للإجابة على كافة استفساراتكم لضمان راحتكم."
|
||
faqsAnimation="slide-up"
|
||
imageSrc="http://img.b2bpic.net/free-photo/interior-modern-comfortable-hotel-room_1232-1822.jpg"
|
||
mediaAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplit
|
||
useInvertedBackground={true}
|
||
background={{
|
||
variant: "gradient-bars",
|
||
}}
|
||
tag="احجز إقامتك الآن"
|
||
title="نحن في انتظارك"
|
||
description="تواصل معنا للاستفسار أو لإتمام عملية الحجز بكل سهولة."
|
||
imageSrc="http://img.b2bpic.net/free-photo/hotel-guest-getting-access-room-card_482257-76274.jpg"
|
||
mediaAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBaseReveal
|
||
logoText="Mira Hotel"
|
||
columns={[
|
||
{
|
||
title: "حول ميرا",
|
||
items: [
|
||
{
|
||
label: "عنا",
|
||
href: "#about",
|
||
},
|
||
{
|
||
label: "سياسة الخصوصية",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "اتصل بنا",
|
||
items: [
|
||
{
|
||
label: "الاستعلامات",
|
||
href: "#contact",
|
||
},
|
||
{
|
||
label: "الموقع",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
copyrightText="© ٢٠٢٤ فندق ميرا. جميع الحقوق محفوظة."
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|