Update src/app/page.tsx
This commit is contained in:
319
src/app/page.tsx
319
src/app/page.tsx
@@ -1,5 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useMemo } from "react";
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import ReactLenis from "lenis/react";
|
import ReactLenis from "lenis/react";
|
||||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||||
@@ -11,6 +12,25 @@ import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCar
|
|||||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [selectedCategory, setSelectedCategory] = useState("all");
|
||||||
|
|
||||||
|
const allProducts = [
|
||||||
|
{ id: "p1", name: "عطر الياقوت", price: "150 DT", imageSrc: "http://img.b2bpic.net/free-photo/minimal-beauty-products-composition_23-2148961350.jpg", category: "عطور يومية" },
|
||||||
|
{ id: "p2", name: "عبير الصحراء", price: "180 DT", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420746.jpg", category: "عطور شرقية" },
|
||||||
|
{ id: "p3", name: "ليالي قرطاج", price: "210 DT", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669154.jpg", category: "عطور أمسيات" },
|
||||||
|
{ id: "p4", name: "عطر السلطان", price: "250 DT", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420709.jpg", category: "عطور شرقية" },
|
||||||
|
{ id: "p5", name: "لمسة ذهبية", price: "195 DT", imageSrc: "http://img.b2bpic.net/free-photo/collection-quail-eggs-near-feathers-can_23-2148073846.jpg", category: "عطور يومية" },
|
||||||
|
{ id: "p6", name: "عود ملكي", price: "300 DT", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420733.jpg", category: "عطور أمسيات" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const filteredProducts = useMemo(() => {
|
||||||
|
return allProducts.filter(p =>
|
||||||
|
(selectedCategory === "all" || p.category === selectedCategory) &&
|
||||||
|
p.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
);
|
||||||
|
}, [searchQuery, selectedCategory]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="shift-hover"
|
defaultButtonVariant="shift-hover"
|
||||||
@@ -25,237 +45,86 @@ export default function LandingPage() {
|
|||||||
headingFontWeight="semibold"
|
headingFontWeight="semibold"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleFullscreen
|
<NavbarStyleFullscreen
|
||||||
navItems={[
|
navItems={[{ name: "Home", id: "hero" }, { name: "Collection", id: "products" }, { name: "Testimonials", id: "testimonials" }, { name: "About", id: "about" }, { name: "Contact", id: "contact" }]}
|
||||||
{
|
brandName="عمروسية للعطور"
|
||||||
name: "Home",
|
/>
|
||||||
id: "hero",
|
</div>
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Collection",
|
|
||||||
id: "products",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Testimonials",
|
|
||||||
id: "testimonials",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "About",
|
|
||||||
id: "about",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Contact",
|
|
||||||
id: "contact",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
brandName="عمروسية للعطور"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroBillboard
|
<HeroBillboard
|
||||||
background={{
|
background={{ variant: "sparkles-gradient" }}
|
||||||
variant: "sparkles-gradient",
|
title="عمروسية للعطور الفاخرة - عطورٌ تروي قصصاً لا تُنسى"
|
||||||
}}
|
description="تجربة عطرية استثنائية تجمع بين التقاليد العريقة والابتكار الحديث."
|
||||||
title="عمروسية للعطور الفاخرة - عطورٌ تروي قصصاً لا تُنسى"
|
buttons={[{ text: "تسوّق الآن", href: "#products" }]}
|
||||||
description="تجربة عطرية استثنائية تجمع بين التقاليد العريقة والابتكار الحديث. صُممت عطورنا خصيصاً لمن يبحثون عن التميز والفرادة في كل رشة."
|
imageSrc="http://img.b2bpic.net/free-photo/autumn-still-life-arrangement_23-2149080523.jpg"
|
||||||
buttons={[
|
/>
|
||||||
{
|
</div>
|
||||||
text: "تسوّق الآن",
|
|
||||||
href: "#products",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/autumn-still-life-arrangement_23-2149080523.jpg"
|
|
||||||
imageAlt="عمروسية للعطور الفاخرة"
|
|
||||||
mediaAnimation="blur-reveal"
|
|
||||||
avatars={[
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/young-attractive-woman-dark-background-loneliness-concept_169016-66019.jpg",
|
|
||||||
alt: "عميل راضٍ",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/fashion-outdoor-portrait-brunette-short-hair-woman-with-broom_343596-705.jpg",
|
|
||||||
alt: "عميل راضٍ",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478928.jpg",
|
|
||||||
alt: "عميل راضٍ",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/portrait-mixed-race-black-woman-park-full-flowers-with-huge-afro-hair-contour-sunlight-watching-aside-cinema-film-colors_633478-451.jpg",
|
|
||||||
alt: "عميل راضٍ",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/indoor-shot-beautiful-young-caucasian-brunette-female-black-dress-looking-camera_273609-9531.jpg",
|
|
||||||
alt: "عميل راضٍ",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
avatarText="أكثر من 5000 عميل سعيد"
|
|
||||||
marqueeItems={[
|
|
||||||
{
|
|
||||||
type: "text",
|
|
||||||
text: "جودة عالمية",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "text",
|
|
||||||
text: "مكونات طبيعية",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "text",
|
|
||||||
text: "دقة في التغليف",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "text",
|
|
||||||
text: "توصيل سريع",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "text",
|
|
||||||
text: "رضا مضمون",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="products" data-section="products">
|
<div id="products" data-section="products" className="py-12 px-4 md:px-8">
|
||||||
<ProductCardOne
|
<div className="max-w-4xl mx-auto mb-8 space-y-4">
|
||||||
animationType="slide-up"
|
<input
|
||||||
textboxLayout="split"
|
type="text"
|
||||||
gridVariant="three-columns-all-equal-width"
|
placeholder="ابحث عن عطرك المفضل..."
|
||||||
useInvertedBackground={false}
|
className="w-full p-4 border border-gray-200 rounded-lg"
|
||||||
products={[
|
value={searchQuery}
|
||||||
{
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
id: "p1",
|
/>
|
||||||
name: "عطر الياقوت",
|
<div className="flex gap-2 flex-wrap">
|
||||||
price: "150 DT",
|
{["all", "عطور يومية", "عطور شرقية", "عطور أمسيات"].map(cat => (
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/minimal-beauty-products-composition_23-2148961350.jpg",
|
<button
|
||||||
},
|
key={cat}
|
||||||
{
|
onClick={() => setSelectedCategory(cat)}
|
||||||
id: "p2",
|
className={`px-4 py-2 rounded-full border ${selectedCategory === cat ? "bg-black text-white" : "bg-white text-black"}`}>
|
||||||
name: "عبير الصحراء",
|
{cat === "all" ? "الكل" : cat}
|
||||||
price: "180 DT",
|
</button>
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420746.jpg",
|
))}
|
||||||
},
|
</div>
|
||||||
{
|
</div>
|
||||||
id: "p3",
|
<ProductCardOne
|
||||||
name: "ليالي قرطاج",
|
animationType="slide-up"
|
||||||
price: "210 DT",
|
textboxLayout="split"
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669154.jpg",
|
gridVariant="three-columns-all-equal-width"
|
||||||
},
|
products={filteredProducts}
|
||||||
{
|
title="مجموعتنا المختارة"
|
||||||
id: "p4",
|
description="اكتشفوا تشكيلتنا الفاخرة."
|
||||||
name: "عطر السلطان",
|
/>
|
||||||
price: "250 DT",
|
</div>
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420709.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p5",
|
|
||||||
name: "لمسة ذهبية",
|
|
||||||
price: "195 DT",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/collection-quail-eggs-near-feathers-can_23-2148073846.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p6",
|
|
||||||
name: "عود ملكي",
|
|
||||||
price: "300 DT",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420733.jpg",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
title="مجموعتنا المختارة"
|
|
||||||
description="اكتشفوا تشكيلتنا الفاخرة من العطور التي تعكس ذوقكم الرفيع."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<TestimonialCardTen
|
<TestimonialCardTen
|
||||||
textboxLayout="split"
|
textboxLayout="split"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
testimonials={[
|
testimonials={[]}
|
||||||
{
|
title="ماذا يقول عملاؤنا؟"
|
||||||
id: "t1",
|
description="تجربة العملاء هي مصدر فخرنا."
|
||||||
title: "تميز لا يضاهى",
|
/>
|
||||||
quote: "اشتريت عطر الياقوت وكان أكثر مما توقعت. جودة خيالية!",
|
</div>
|
||||||
name: "سارة حمدي",
|
|
||||||
role: "مؤثرة",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-model-with-flowers_23-2148905618.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "t2",
|
|
||||||
title: "رائحة فاخرة",
|
|
||||||
quote: "خدمة ممتازة وعطور فريدة. لا أستخدم غير عطور عمروسية.",
|
|
||||||
name: "أحمد بوقرة",
|
|
||||||
role: "رجل أعمال",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-brunette-female-blue-shirt-grey-background_613910-7954.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "t3",
|
|
||||||
title: "جودة عالية",
|
|
||||||
quote: "التغليف فاخر والعطور تدوم لفترات طويلة. أنصح بشدة.",
|
|
||||||
name: "منى قفصي",
|
|
||||||
role: "طبيبة",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-businesswoman-posing-with-coffee_23-2148452691.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "t4",
|
|
||||||
title: "خدمة عالمية",
|
|
||||||
quote: "تجربة تسوق رائعة في محلكم بالقيروان. شكراً لكم.",
|
|
||||||
name: "ياسين كريم",
|
|
||||||
role: "مصمم",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021809.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "t5",
|
|
||||||
title: "عطور تليق بالمناسبات",
|
|
||||||
quote: "عطر عود ملكي أضفى لمسة خاصة على مناسبتي.",
|
|
||||||
name: "ليلى نصر",
|
|
||||||
role: "محامية",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-man-dressed-elegant-beige-checkered-suit_158538-4307.jpg",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
title="ماذا يقول عملاؤنا؟"
|
|
||||||
description="تجربة العملاء هي مصدر فخرنا والركيزة الأساسية لنجاحنا."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
<TextSplitAbout
|
<TextSplitAbout
|
||||||
useInvertedBackground={false}
|
title="قصة عمروسية"
|
||||||
title="قصة عمروسية"
|
description={["تأسست عمروسية على شغف عميق بالفنون العطرية القديمة."]}
|
||||||
description={[
|
/>
|
||||||
"تأسست عمروسية على شغف عميق بالفنون العطرية القديمة، لنقدم لكم مزيجاً استثنائياً بين التراث والأصالة.",
|
</div>
|
||||||
"نفتخر بكوننا وجهتكم الأولى في قفصة لكل ما هو فاخر ومميز في عالم العطور.",
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactSplit
|
<ContactSplit
|
||||||
useInvertedBackground={true}
|
tag="تواصل معنا"
|
||||||
background={{
|
title="يسعدنا خدمتكم"
|
||||||
variant: "plain",
|
description="زورونا في محلنا بقفصة."
|
||||||
}}
|
/>
|
||||||
tag="تواصل معنا"
|
</div>
|
||||||
title="يسعدنا خدمتكم"
|
|
||||||
description="زورونا في محلنا بقفصة، P15، أو اشتركوا في نشرتنا البريدية للحصول على أحدث عروضنا."
|
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-79237.jpg"
|
|
||||||
mediaAnimation="slide-up"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterLogoReveal
|
<FooterLogoReveal
|
||||||
logoText="عمروسية"
|
logoText="عمروسية"
|
||||||
leftLink={{
|
leftLink={{ text: "جميع الحقوق محفوظة © 2024", href: "#" }}
|
||||||
text: "جميع الحقوق محفوظة © 2024",
|
rightLink={{ text: "قفصة - P15", href: "#" }}
|
||||||
href: "#",
|
/>
|
||||||
}}
|
</div>
|
||||||
rightLink={{
|
|
||||||
text: "قفصة - P15 | 24 555 123",
|
|
||||||
href: "tel:+21624555123",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user