192 lines
14 KiB
TypeScript
192 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import { Nunito_Sans } from 'next/font/google';
|
|
|
|
const nunitoSans = Nunito_Sans({
|
|
variable: "--font-nunito-sans", subsets: ["latin"],
|
|
});
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="none"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
brandName="SusyCils"
|
|
navItems={[
|
|
{ name: "Accueil", id: "#hero" },
|
|
{ name: "À Propos", id: "#about" },
|
|
{ name: "Produits", id: "#products" },
|
|
{ name: "Témoignages", id: "#testimonials" },
|
|
{ name: "Contact", id: "#contact" }
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-photo/cosmetic-item-with-marijuana-leaves_23-2151336352.jpg"
|
|
logoAlt="minimalist beauty logo"
|
|
bottomLeftText="Magasin de produits de beauté"
|
|
bottomRightText="contact@susycils.com"
|
|
/>
|
|
</div>
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="SusyCils"
|
|
description="Découvrez la beauté à son meilleur avec notre gamme exclusive de produits de qualité supérieure. Rehaussez votre éclat naturel et révélez votre véritable beauté."
|
|
buttons={[
|
|
{ text: "Découvrir nos Produits", href: "#products" },
|
|
{ text: "Nous Contacter", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/makeup-artist-vlogging-elements_23-2149080364.jpg"
|
|
imageAlt="beauty products flat lay elegant"
|
|
showDimOverlay={false}
|
|
ariaLabel="Section d'introduction de SusyCils"
|
|
/>
|
|
</div>
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "À Propos de " },
|
|
{ type: "text", content: "SusyCils" }
|
|
]}
|
|
buttons={[
|
|
{ text: "Notre Histoire", href: "#" },
|
|
{ text: "Nos Valeurs", href: "#about" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
ariaLabel="Section À Propos de SusyCils"
|
|
/>
|
|
</div>
|
|
<div id="features" data-section="features">
|
|
<FeatureCardOne
|
|
title="Nos Services Exclusifs"
|
|
description="Sublimez votre beauté avec des soins personnalisés et des produits innovants, conçus pour vous révéler."
|
|
features={[
|
|
{
|
|
title: "Extensions de Cils", description: "Mettez en valeur vos yeux avec nos extensions de cils professionnelles, pour un regard intense et naturel.", imageSrc: "http://img.b2bpic.net/free-photo/composition-jojoba-oil-dropper_23-2149022363.jpg", imageAlt: "skincare serum bottle elegant"
|
|
},
|
|
{
|
|
title: "Soins du Visage", description: "Offrez à votre peau l'éclat qu'elle mérite avec nos soins du visage hydratants et revitalisants.", imageSrc: "http://img.b2bpic.net/free-photo/makeup-applicators-near-notebook_23-2147779063.jpg", imageAlt: "makeup brushes set professional"
|
|
},
|
|
{
|
|
title: "Maquillage Professionnel", description: "Que ce soit pour un événement spécial ou un look quotidien, nos artistes maquilleurs sauront vous sublimer.", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottle-with-luxurious-art-nouveau-inspired-sun-relief-background_23-2151420727.jpg", imageAlt: "fragrance bottle luxury design"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
ariaLabel="Section de services SusyCils"
|
|
/>
|
|
</div>
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
title="Nos Produits Phares"
|
|
description="Une sélection rigoureuse de produits de beauté de haute qualité, pour une routine beauté complète et efficace."
|
|
products={[
|
|
{ id: "1", brand: "SusyCils", name: "Mascara Volume Extrême", price: "29.99 $", rating: 5, reviewCount: "115 avis", imageSrc: "http://img.b2bpic.net/free-photo/woman-applying-mascara-studio_23-2148328826.jpg", imageAlt: "volumizing mascara product shot" },
|
|
{ id: "2", brand: "SusyCils", name: "Crème Hydratante Éclat", price: "45.00 $", rating: 4.5, reviewCount: "89 avis", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-cream-container-plants_23-2149339775.jpg", imageAlt: "hydrating face cream packaging" },
|
|
{ id: "3", brand: "SusyCils", name: "Rouge à Lèvres Mat", price: "24.50 $", rating: 4, reviewCount: "72 avis", imageSrc: "http://img.b2bpic.net/free-photo/red-lipsticks-arrangement-flat-lay_23-2148978121.jpg", imageAlt: "liquid lipstick matte finish" },
|
|
{ id: "4", brand: "SusyCils", name: "Sérum Anti-Âge", price: "60.00 $", rating: 5, reviewCount: "98 avis", imageSrc: "http://img.b2bpic.net/free-photo/no-makeup-shot-girl-with-doubt-while-lot-hands-trying-her-makeup_197531-13816.jpg", imageAlt: "eyebrow pencil precise definition" },
|
|
{ id: "5", brand: "SusyCils", name: "Palette Fards à Paupières", price: "38.00 $", rating: 4.5, reviewCount: "65 avis", imageSrc: "http://img.b2bpic.net/free-photo/close-up-face-powder-brush-black-backdrop_23-2147899374.jpg", imageAlt: "highlighter palette glowing skin" },
|
|
{ id: "6", brand: "SusyCils", name: "Huile Demaquillante Douce", price: "32.00 $", rating: 5, reviewCount: "102 avis", imageSrc: "http://img.b2bpic.net/free-photo/set-different-nail-polishes_23-2147692256.jpg", imageAlt: "nail polish vibrant colors" }
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Section des produits SusyCils"
|
|
/>
|
|
</div>
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="Ce que nos clientes disent"
|
|
description="Des avis authentiques de nos clientes satisfaites qui partagent leur expérience avec SusyCils."
|
|
testimonials={[
|
|
{ id: "1", name: "Sarah L.", date: "2023-10-26", title: "Des cils sublimes!", quote: "Je suis absolument ravie de mes extensions de cils. Le résultat est magnifique et très naturel. SusyCils est mon adresse beauté incontournable!", tag: "Extensions de Cils", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-woman_23-2147823623.jpg", avatarAlt: "Avatar de Sarah L.", imageSrc: "http://img.b2bpic.net/free-photo/woman-spa-center_23-2148099297.jpg", imageAlt: "Photo de cliente satisfaite" },
|
|
{ id: "2", name: "Marie D.", date: "2023-09-15", title: "Une peau éclatante", quote: "Le sérum hydratant a transformé ma peau. Elle est plus douce et lumineuse que jamais. Merci SusyCils pour ces produits exceptionnels!", tag: "Soins Visage", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-woman-with-tattoo-arm_1262-17987.jpg", avatarAlt: "Avatar de Marie D.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-woman-s-eye-with-blue-eyeshadows_633478-2623.jpg", imageAlt: "Photo de cliente avec une peau éclatante" },
|
|
{ id: "3", name: "Chloé B.", date: "2023-08-01", title: "Maquillage parfait", quote: "Pour mon mariage, j'ai fait appel à SusyCils pour mon maquillage. Le résultat était impeccable et a tenu toute la journée. Je recommande à 100%!", tag: "Maquillage", avatarSrc: "http://img.b2bpic.net/free-photo/online-presentation-young-woman-representing-new-facial-cream-looking-involved_259150-60050.jpg", avatarAlt: "Avatar de Chloé B.", imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-casual-wear-outdoor_624325-1131.jpg", imageAlt: "Photo de maquillage de mariée" },
|
|
{ id: "4", name: "Sophie M.", date: "2023-07-20", title: "Produits de qualité", quote: "J'achète tous mes produits de beauté chez SusyCils. La qualité est toujours au rendez-vous et le service client est irréprochable.", tag: "Produits", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-blonde-woman-smiling_273609-12179.jpg", avatarAlt: "Avatar de Sophie M.", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-care-with-copy-space_23-2148328682.jpg", imageAlt: "Photo de produits de beauté" },
|
|
{ id: "5", name: "Léa G.", date: "2023-06-10", title: "Un moment de détente", quote: "Le soin du visage était un pur moment de bonheur. J'en suis ressortie détendue et ma peau rayonnante. Hâte de revenir!", tag: "Soins Visage", avatarSrc: "http://img.b2bpic.net/free-photo/young-beautiful-surprised-woman-looking-with-hands-near-mouth-trendy-girl-casual-summer-clothes-hat-female-posing-near-gray-wall_158538-1431.jpg", avatarAlt: "Avatar de Léa G.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-with-beautiful-nails_23-2149311618.jpg", imageAlt: "Photo de soin du visage" }
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
ariaLabel="Section de témoignages clients"
|
|
/>
|
|
</div>
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Questions Fréquentes"
|
|
description="Trouvez rapidement les réponses aux questions les plus posées concernant nos services et produits."
|
|
faqs={[
|
|
{ id: "faq1", title: "Comment prendre rendez-vous ?", content: "Vous pouvez prendre rendez-vous directement en ligne via notre site web, par téléphone, ou en vous rendant à notre boutique." },
|
|
{ id: "faq2", title: "Quels sont les délais de livraison ?", content: "Les délais de livraison varient de 3 à 5 jours ouvrables pour le Canada. Pour les livraisons internationales, veuillez nous contacter pour plus d'informations." },
|
|
{ id: "faq3", title: "Proposez-vous des cartes-cadeaux ?", content: "Oui, nous proposons des cartes-cadeaux personnalisables, valables sur tous nos produits et services. Idéal pour faire plaisir à vos proches !" }
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
showCard={true}
|
|
ariaLabel="Section FAQ"
|
|
imageSrc="http://img.b2bpic.net/free-photo/side-view-smiley-woman-holding-smartphone_23-2149721979.jpg"
|
|
imageAlt="woman examining beauty product ingredients"
|
|
/>
|
|
</div>
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Contactez-nous"
|
|
title="Prenez Rendez-vous ou Posez une Question"
|
|
description="Notre équipe dévouée est là pour vous aider avec toutes vos demandes. N'hésitez pas à nous écrire ou à nous appeler."
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={true}
|
|
imageSrc="http://img.b2bpic.net/free-photo/smiling-blonde-secretary-handed-documents-colleague-drinking-coffee_197531-4964.jpg"
|
|
imageAlt="beauty salon reception desk clean"
|
|
videoAriaLabel="Vidéo de la section contact"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Entrez votre adresse email"
|
|
buttonText="Envoyer"
|
|
termsText="En cliquant Envoyer, vous confirmez que vous acceptez nos Conditions Générales et notre Politique de Confidentialité."
|
|
ariaLabel="Section de contact"
|
|
/>
|
|
</div>
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="SusyCils"
|
|
columns={[
|
|
{ title: "Navigation", items: [{ label: "Accueil", href: "#hero" }, { label: "À Propos", href: "#about" }, { label: "Produits", href: "#products" }, { label: "Témoignages", href: "#testimonials" }] },
|
|
{ title: "Services", items: [{ label: "Extensions de Cils", href: "#features" }, { label: "Soins du Visage", href: "#features" }, { label: "Maquillage", href: "#features" }, { label: "Rendez-vous", href: "#contact" }] },
|
|
{ title: "Informations", items: [{ label: "FAQ", href: "#faq" }, { label: "Contactez-nous", href: "#contact" }, { label: "Politique de Confidentialité", href: "#" }, { label: "Conditions Générales", href: "#" }] }
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-photo/cosmetic-item-with-marijuana-leaves_23-2151336352.jpg"
|
|
logoAlt="minimalist beauty logo"
|
|
copyrightText="© 2024 SusyCils. Tous droits réservés."
|
|
ariaLabel="Pied de page du site SusyCils"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|