270 lines
13 KiB
TypeScript
270 lines
13 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 FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import { Cake, Coffee, Cookie, HelpCircle, Mail, Sparkles, Star, Users } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "الرئيسية", id: "/"},
|
|
{
|
|
name: "القائمة", id: "#menu"},
|
|
{
|
|
name: "عنا", id: "#about"},
|
|
{
|
|
name: "تواصل معنا", id: "#contact"},
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-vector/illustration-business-shop-logo-stamp-banner_53876-3746.jpg"
|
|
logoAlt="شعار مقهى ألف"
|
|
brandName="مقهى ألف"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlayTestimonial
|
|
title="استمتع بتجربة قهوة لا تُنسى"
|
|
description="نقدم أجود أنواع القهوة المختصة والحلى الشهي في أجواء هادئة ومريحة."
|
|
testimonials={[
|
|
{
|
|
name: "عميل راضٍ", handle: "@HappyCustomer", testimonial: "صراحة القهوه جدا لذيذه كولمبي واثيوبي الماتشا لذيذة حلا كرنشي جدااا لذيذ انصحكم بالكوفيي", rating: 5},
|
|
{
|
|
name: "ابوبكر احمد", handle: "@AbubakrAhmed", testimonial: "من افضل الكافيهات المتميزة بل قهوة المختصة والحلا عندهم جداً لذيذ خصوصاً البيكان الذذ شئ والكوكيز يتحضر على الطلب 🙏🏻❤️", rating: 5},
|
|
{
|
|
name: "Hind Al johani", handle: "@HindAljohani", testimonial: "كفي جميييل وهادي ورايق والقهوة لذيذه ان كانت الفلات وايت او قهوة اليوم والخدمه ممتازه", rating: 5},
|
|
{
|
|
name: "Reema Alharbi", handle: "@ReemaAlharbi", testimonial: "حبيت الكافي 🥰 🫰 😽 المكان جميل وواسع والتحف ب أختيارات جميييلة وذوق .. طلبنا كورتادو وساندوتش تونه لذيذ 😋 كل الطالبات ممتازة 👌 🤩", rating: 5},
|
|
{
|
|
name: "أحمد السالم", handle: "@AhmedAlsalem", testimonial: "أجواء مثالية للعمل أو الاسترخاء، وخدمة العملاء لديهم رائعة، بالتأكيد سأعود مرة أخرى!", rating: 5},
|
|
]}
|
|
testimonialRotationInterval={5000}
|
|
tag="تجربة لا تُنسى"
|
|
tagIcon={Coffee}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{
|
|
text: "استكشف القائمة", href: "#menu"},
|
|
{
|
|
text: "تواصل معنا", href: "#contact"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
avatars={[]}
|
|
avatarText="+100 عميل سعيد"
|
|
imageSrc={"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DGHziDQYnCgfhAvQHrkjdu4egx/uploaded-1781072072682-4aghpl5r.jpg"}
|
|
imageAlt="مقهى هادئ ومريح"
|
|
showBlur={true}
|
|
textPosition="bottom"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={false}
|
|
heading={[
|
|
{
|
|
type: "text", content: "عن مقهى ألف"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "تعرف على قصتنا", href: "#"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBorderGlow
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
icon: Coffee,
|
|
title: "قهوة مختصة", description: "نقدم أجود أنواع القهوة الكولومبية والإثيوبية المحضرة بعناية."},
|
|
{
|
|
icon: Cake,
|
|
title: "حلويات شهية", description: "تشكيلة واسعة من الحلويات الطازجة واللذيذة، بما في ذلك حلا كرنشي."},
|
|
{
|
|
icon: Star,
|
|
title: "أجواء هادئة", description: "مكان مثالي للاسترخاء أو العمل في بيئة مريحة وجميلة."},
|
|
{
|
|
icon: Cookie,
|
|
title: "كوكيز حسب الطلب", description: "كوكيز طازجة تُخبز خصيصًا لك عند الطلب لتجربة فريدة."},
|
|
]}
|
|
title="ما يميزنا في مقهى ألف"
|
|
description="التفرد في كل كوب وقضمة."
|
|
tag="خدماتنا"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="menu" data-section="menu">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "product-1", brand: "ساندويتشات", name: "ساندويتش تركي (420 كالوري)", price: "18 ريال", rating: 5,
|
|
reviewCount: "25", imageSrc: "/images/sandwich.jpg", imageAlt: "صورة ساندويتش تركي"},
|
|
{
|
|
id: "product-2", brand: "حلويات", name: "تشوكو كرنشي (442 كالوري)", price: "21 ريال", rating: 5,
|
|
reviewCount: "30", imageSrc: "/images/chococrunchy.jpg", imageAlt: "صورة تشوكو كرنشي"},
|
|
{
|
|
id: "product-3", brand: "كمبوهات ألف", name: "قهوة اليوم مع كيكة اليوم", price: "16 ريال", rating: 5,
|
|
reviewCount: "18", imageSrc: "/images/coffee-cake-combo.jpg", imageAlt: "صورة قهوة اليوم مع كيكة اليوم"},
|
|
{
|
|
id: "product-4", brand: "مشروبات باردة", name: "ايس سبانش لاتيه (236 كالوري)", price: "19 ريال", rating: 5,
|
|
reviewCount: "40", imageSrc: "/images/iced-spanish-latte.jpg", imageAlt: "صورة ايس سبانش لاتيه"},
|
|
{
|
|
id: "product-5", brand: "مشروبات ساخنة", name: "سبانش لاتيه (236 كالوري)", price: "17 ريال", rating: 5,
|
|
reviewCount: "35", imageSrc: "/images/spanish-latte.jpg", imageAlt: "صورة سبانش لاتيه"},
|
|
{
|
|
id: "product-6", brand: "حلويات", name: "كيكة بيكان (410 كالوري)", price: "21 ريال", rating: 5,
|
|
reviewCount: "22", imageSrc: "/images/pecan-cake.jpg", imageAlt: "صورة كيكة بيكان"},
|
|
]}
|
|
title="قائمة مقهى ألف"
|
|
description="استكشف مجموعتنا المتنوعة من المشروبات والساندويتشات والحلويات الشهية."
|
|
tag="مذاقات خاصة"
|
|
tagIcon={Coffee}
|
|
tagAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"قهوة كولومبيا", "قهوة إثيوبيا", "مطاحن متخصصة", "شاي ممتاز", "موردي حلويات", "منتجات ألبان طازجة", "مياه نقية"]}
|
|
title="شركاؤنا في الجودة"
|
|
description="نعمل مع أفضل الموردين لضمان أجود المكونات في كل ما نقدمه."
|
|
tag="موثوق بنا"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
speed={40}
|
|
showCard={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "ما هي ساعات عمل مقهى ألف؟", content: "نفتح أبوابنا يوميًا من الساعة 6 صباحًا حتى 11 مساءً، ومن 6 صباحًا حتى 12 صباحًا في عطلة نهاية الأسبوع."},
|
|
{
|
|
id: "faq-2", title: "هل تقدمون قهوة عضوية؟", content: "نعم، نقدم مجموعة مختارة من القهوة العضوية من مصادر مستدامة لضمان أفضل جودة ومذاق."},
|
|
{
|
|
id: "faq-3", title: "هل لديكم خدمة توصيل؟", content: "بالتأكيد، يمكنك طلب منتجاتنا المفضلة عبر تطبيقات التوصيل الشائعة."},
|
|
{
|
|
id: "faq-4", title: "هل يوجد واي فاي مجاني؟", content: "نعم، يتوفر إنترنت لاسلكي مجاني لجميع زوارنا للاستمتاع بالعمل أو الاسترخاء."},
|
|
{
|
|
id: "faq-5", title: "هل يمكنني حجز طاولة؟", content: "نحن لا نقدم خدمة حجز الطاولات حاليًا، لكننا نرحب بكم دائمًا في أي وقت."},
|
|
]}
|
|
imageSrc={undefined}
|
|
imageAlt="عملاء يستمتعون بقهوتهم في المقهى"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="left"
|
|
title="الأسئلة الشائعة"
|
|
description="إجابات لأكثر استفساراتكم شيوعاً حول مقهانا ومنتجاتنا."
|
|
tag="مساعدة ودعم"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
tag="تواصل معنا"
|
|
title="نحن هنا لخدمتكم"
|
|
description="يسعدنا الرد على استفساراتكم، تلقي اقتراحاتكم أو سماع ملاحظاتكم. لا تترددوا في الاتصال بنا."
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
imageSrc={undefined}
|
|
imageAlt="واجهة مقهى ألف"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="أدخل بريدك الإلكتروني"
|
|
buttonText="إرسال"
|
|
termsText="بالنقر على إرسال، فإنك توافق على شروطنا وأحكامنا."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="مقهى ألف"
|
|
columns={[
|
|
{
|
|
title: "روابط سريعة", items: [
|
|
{
|
|
label: "الرئيسية", href: "#"},
|
|
{
|
|
label: "عنا", href: "#about"},
|
|
{
|
|
label: "تواصل معنا", href: "#contact"},
|
|
],
|
|
},
|
|
{
|
|
title: "القائمة", items: [
|
|
{
|
|
label: "المشروبات الساخنة", href: "#menu"},
|
|
{
|
|
label: "المشروبات الباردة", href: "#menu"},
|
|
{
|
|
label: "الحلويات", href: "#menu"},
|
|
{
|
|
label: "الساندويتشات", href: "#menu"},
|
|
],
|
|
},
|
|
{
|
|
title: "تابعنا", items: [
|
|
{
|
|
label: "إنستغرام", href: "https://instagram.com/elf_cafe"},
|
|
{
|
|
label: "تويتر", href: "https://twitter.com/elf_cafe"},
|
|
{
|
|
label: "فيسبوك", href: "https://facebook.com/elf_cafe"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 مقهى ألف. جميع الحقوق محفوظة."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|