Merge version_1 into main #2
343
src/app/page.tsx
343
src/app/page.tsx
@@ -9,246 +9,133 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import { Heart, Info, MapPin, ShoppingBag, Sparkles, Star } from "lucide-react";
|
||||
import { Heart, Info, MapPin, ShoppingBag, Star } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Accueil",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Produits",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Avis",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Kamel Cosmétique"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Accueil", id: "hero" },
|
||||
{ name: "À propos", id: "about" },
|
||||
{ name: "Produits", id: "products" },
|
||||
{ name: "Avis", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Kamel Cosmétique"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Kamel Cosmétique"
|
||||
description="Votre magasin de beauté à Boudouaou. Découvrez notre sélection exclusive de cosmétiques et produits de soins pour révéler votre éclat naturel."
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-blur-shopping-mall-interior_1203-8247.jpg?_wi=1",
|
||||
imageAlt: "Magasin cosmétique",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-woman-white-fur-coat-girl-counter_1157-47300.jpg?_wi=1",
|
||||
imageAlt: "Rayons cosmétiques",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/perfume-template-design_23-2151519461.jpg?_wi=1",
|
||||
imageAlt: "Produits beauté",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238267.jpg?_wi=1",
|
||||
imageAlt: "Accessoires maquillage",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-natural-cream-concept_23-2148578661.jpg?_wi=1",
|
||||
imageAlt: "Soins du visage",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-blur-shopping-mall-interior_1203-8247.jpg?_wi=2",
|
||||
imageAlt: "Magasin Kamel Cosmétique",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
tag="Beauté & Éclat"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Découvrir nos produits",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
title="Kamel Cosmétique"
|
||||
description="Votre magasin de beauté à Boudouaou. Découvrez notre sélection exclusive de cosmétiques et produits de soins pour révéler votre éclat naturel."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-blur-shopping-mall-interior_1203-8247.jpg", imageAlt: "cosmetics store interior display shelf" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-woman-white-fur-coat-girl-counter_1157-47300.jpg", imageAlt: "cosmetic shop front view" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-psd/perfume-template-design_23-2151519461.jpg", imageAlt: "makeup foundation glass bottle" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238267.jpg", imageAlt: "lipstick set aesthetic beige background" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-natural-cream-concept_23-2148578661.jpg", imageAlt: "face cream jar aesthetic" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-blur-shopping-mall-interior_1203-8247.jpg", imageAlt: "cosmetics store interior display shelf" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="À propos de nous"
|
||||
title="Votre beauté, notre priorité"
|
||||
description="Kamel Cosmétique est votre magasin de beauté à Boudouaou. Nous proposons une large gamme de cosmétiques, maquillage et produits de beauté pour prendre soin de vous."
|
||||
subdescription="Notre équipe est à votre écoute pour vous conseiller et vous aider à trouver les produits qui vous conviennent parfaitement."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/brunette-girl-woman-white-fur-coat-girl-counter_1157-47300.jpg?_wi=2"
|
||||
mediaAnimation="slide-up"
|
||||
tagIcon={Info}
|
||||
tagAnimation="slide-up"
|
||||
icon={Heart}
|
||||
imageAlt="Magasin cosmétique intérieur"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
tag="À propos de nous"
|
||||
title="Votre beauté, notre priorité"
|
||||
description="Kamel Cosmétique est votre magasin de beauté à Boudouaou. Nous proposons une large gamme de cosmétiques, maquillage et produits de beauté pour prendre soin de vous."
|
||||
subdescription="Notre équipe est à votre écoute pour vous conseiller et vous aider à trouver les produits qui vous conviennent parfaitement."
|
||||
icon={Heart}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/brunette-girl-woman-white-fur-coat-girl-counter_1157-47300.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Maquillage",
|
||||
brand: "Kamel",
|
||||
price: "Gamme variée",
|
||||
rating: 5,
|
||||
reviewCount: "12 avis",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/perfume-template-design_23-2151519461.jpg?_wi=2",
|
||||
imageAlt: "Maquillage",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Soins du visage",
|
||||
brand: "Kamel",
|
||||
price: "Gamme variée",
|
||||
rating: 5,
|
||||
reviewCount: "18 avis",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238267.jpg?_wi=2",
|
||||
imageAlt: "Soins visage",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Accessoires",
|
||||
brand: "Kamel",
|
||||
price: "Gamme variée",
|
||||
rating: 5,
|
||||
reviewCount: "9 avis",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-natural-cream-concept_23-2148578661.jpg?_wi=2",
|
||||
imageAlt: "Accessoires beauté",
|
||||
},
|
||||
]}
|
||||
title="Nos catégories"
|
||||
description="Explorez notre sélection de produits de beauté soigneusement choisis."
|
||||
tag="Nos Services"
|
||||
tagIcon={ShoppingBag}
|
||||
tagAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
title="Nos catégories"
|
||||
description="Explorez notre sélection de produits de beauté soigneusement choisis."
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", brand: "Kamel", name: "Maquillage", price: "Gamme variée", rating: 5, reviewCount: "12 avis", imageSrc: "http://img.b2bpic.net/free-psd/perfume-template-design_23-2151519461.jpg" },
|
||||
{ id: "2", brand: "Kamel", name: "Soins du visage", price: "Gamme variée", rating: 5, reviewCount: "18 avis", imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238267.jpg" },
|
||||
{ id: "3", brand: "Kamel", name: "Accessoires", price: "Gamme variée", rating: 5, reviewCount: "9 avis", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-natural-cream-concept_23-2148578661.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Doria Boudiaf",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/neutral-abstract-texture-simple-background_53876-102511.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sekheri Imen",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-minimalist-background_23-2150301351.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/neumorphism-wavy-banner-with-best-minimalism-skeuomorphism_1017-61928.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/acrylic-painting-background-pink-beige-wallpaper-image_53876-102534.jpg",
|
||||
},
|
||||
]}
|
||||
cardTitle="Avis de nos clients"
|
||||
cardTag="4,1 / 5 (23 avis)"
|
||||
cardAnimation="slide-up"
|
||||
cardTagIcon={Star}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
cardTitle="Avis de nos clients"
|
||||
cardTag="4,1 / 5 (23 avis)"
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Doria Boudiaf", imageSrc: "http://img.b2bpic.net/free-photo/neutral-abstract-texture-simple-background_53876-102511.jpg" },
|
||||
{ id: "2", name: "Sekheri Imen", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-minimalist-background_23-2150301351.jpg" },
|
||||
{ id: "3", name: "Client", imageSrc: "http://img.b2bpic.net/free-vector/neumorphism-wavy-banner-with-best-minimalism-skeuomorphism_1017-61928.jpg" },
|
||||
{ id: "4", name: "Client", imageSrc: "http://img.b2bpic.net/free-photo/acrylic-painting-background-pink-beige-wallpaper-image_53876-102534.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Contact"
|
||||
title="Rendez-nous visite"
|
||||
description="PCG5+PR8, Rue des Frères Aoudia, Boudouaou, Algérie | Ouvert tous les jours jusqu'à 22h00."
|
||||
buttons={[
|
||||
{
|
||||
text: "Appeler",
|
||||
href: "tel:0550483149",
|
||||
},
|
||||
{
|
||||
text: "Itinéraire",
|
||||
href: "https://maps.app.goo.gl/",
|
||||
},
|
||||
]}
|
||||
tagIcon={MapPin}
|
||||
tagAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Contact"
|
||||
title="Rendez-nous visite"
|
||||
description="PCG5+PR8, Rue des Frères Aoudia, Boudouaou, Algérie | Ouvert tous les jours jusqu'à 22h00."
|
||||
buttons={[
|
||||
{ text: "0550 48 31 49", href: "tel:0550483149" },
|
||||
{ text: "Itinéraire", href: "https://maps.app.goo.gl/" }
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/shopping-concept-with-woman-front-store_23-2147705123.jpg"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Accueil",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "Produits",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Avis",
|
||||
href: "#testimonials",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Informations",
|
||||
items: [
|
||||
{
|
||||
label: "Horaires",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Kamel Cosmétique"
|
||||
copyrightText="© 2025 Kamel Cosmétique. Boudouaou, Algérie."
|
||||
imageAlt="Kamel Cosmétique Store"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/shopping-concept-with-woman-front-store_23-2147705123.jpg"
|
||||
logoText="Kamel Cosmétique"
|
||||
copyrightText="© 2025 Kamel Cosmétique. Boudouaou, Algérie."
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{ label: "Accueil", href: "#hero" },
|
||||
{ label: "Produits", href: "#products" },
|
||||
{ label: "Avis", href: "#testimonials" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Informations", items: [
|
||||
{ label: "Horaires", href: "#" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user