Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 3e9f7df025 | |||
| 66d16e04f8 |
239
src/app/page.tsx
239
src/app/page.tsx
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
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';
|
||||
|
||||
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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
@@ -27,142 +47,49 @@ export default function LandingPage() {
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Collection",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
navItems={[{ name: "Home", id: "hero" }, { name: "Collection", id: "products" }, { name: "Testimonials", id: "testimonials" }, { name: "About", id: "about" }, { name: "Contact", id: "contact" }]}
|
||||
brandName="عمروسية للعطور"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="عمروسية للعطور الفاخرة - عطورٌ تروي قصصاً لا تُنسى"
|
||||
description="تجربة عطرية استثنائية تجمع بين التقاليد العريقة والابتكار الحديث. صُممت عطورنا خصيصاً لمن يبحثون عن التميز والفرادة في كل رشة."
|
||||
buttons={[
|
||||
{
|
||||
text: "تسوّق الآن",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
description="تجربة عطرية استثنائية تجمع بين التقاليد العريقة والابتكار الحديث."
|
||||
buttons={[{ 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">
|
||||
<div className="max-w-4xl mx-auto mb-8 space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="ابحث عن عطرك المفضل..."
|
||||
className="w-full p-4 border border-gray-200 rounded-lg"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{["all", "عطور يومية", "عطور شرقية", "عطور أمسيات"].map(cat => (
|
||||
<button
|
||||
key={cat}
|
||||
onClick={() => setSelectedCategory(cat)}
|
||||
className={`px-4 py-2 rounded-full border ${selectedCategory === cat ? "bg-black text-white" : "bg-white text-black"}`}>
|
||||
{cat === "all" ? "الكل" : cat}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "عطر الياقوت",
|
||||
price: "150 DT",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimal-beauty-products-composition_23-2148961350.jpg",
|
||||
},
|
||||
{
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "ليالي قرطاج",
|
||||
price: "210 DT",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669154.jpg",
|
||||
},
|
||||
{
|
||||
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",
|
||||
},
|
||||
{
|
||||
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",
|
||||
},
|
||||
]}
|
||||
products={filteredProducts}
|
||||
title="مجموعتنا المختارة"
|
||||
description="اكتشفوا تشكيلتنا الفاخرة من العطور التي تعكس ذوقكم الرفيع."
|
||||
description="اكتشفوا تشكيلتنا الفاخرة."
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -170,89 +97,35 @@ export default function LandingPage() {
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "تميز لا يضاهى",
|
||||
quote: "اشتريت عطر الياقوت وكان أكثر مما توقعت. جودة خيالية!",
|
||||
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",
|
||||
},
|
||||
]}
|
||||
testimonials={[]}
|
||||
title="ماذا يقول عملاؤنا؟"
|
||||
description="تجربة العملاء هي مصدر فخرنا والركيزة الأساسية لنجاحنا."
|
||||
description="تجربة العملاء هي مصدر فخرنا."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="قصة عمروسية"
|
||||
description={[
|
||||
"تأسست عمروسية على شغف عميق بالفنون العطرية القديمة، لنقدم لكم مزيجاً استثنائياً بين التراث والأصالة.",
|
||||
"نفتخر بكوننا وجهتكم الأولى في قفصة لكل ما هو فاخر ومميز في عالم العطور.",
|
||||
]}
|
||||
description={["تأسست عمروسية على شغف عميق بالفنون العطرية القديمة."]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="تواصل معنا"
|
||||
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"
|
||||
description="زورونا في محلنا بقفصة."
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="عمروسية"
|
||||
leftLink={{
|
||||
text: "جميع الحقوق محفوظة © 2024",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "قفصة - P15 | 24 555 123",
|
||||
href: "tel:+21624555123",
|
||||
}}
|
||||
leftLink={{ text: "جميع الحقوق محفوظة © 2024", href: "#" }}
|
||||
rightLink={{ text: "قفصة - P15", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user