Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 6e6ae57983 | |||
| c506c8711a | |||
| 04992f4f68 | |||
| 3a7716199f | |||
| 80fe001c64 |
303
src/app/page.tsx
303
src/app/page.tsx
@@ -2,205 +2,136 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import { Globe, Layout, Search, Settings } from "lucide-react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { Zap, Shield, Target } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmall"
|
||||
background="grid"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="fluid"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Services", id: "services"},
|
||||
{
|
||||
name: "Portfolio", id: "portfolio"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="WebMaup"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Tarifs", id: "pricing" },
|
||||
{ name: "Portfolio", id: "portfolio" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="WebMaup"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
title="Des sites web modernes qui attirent et convertissent."
|
||||
description="WebMaup crée votre présence en ligne professionnelle, rapidement et efficacement pour votre business local."
|
||||
buttons={[
|
||||
{
|
||||
text: "Obtenir mon site", href: "#contact"},
|
||||
{
|
||||
text: "Voir les projets", href: "#portfolio"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/special-operations-engineer-following-enemy-warships-submarines_482257-91174.jpg?_wi=1", imageAlt: "Dashboard preview"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/special-operations-engineer-following-enemy-warships-submarines_482257-91174.jpg?_wi=2", imageAlt: "Dashboard preview"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/special-operations-engineer-following-enemy-warships-submarines_482257-91174.jpg?_wi=3", imageAlt: "Dashboard preview"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/special-operations-engineer-following-enemy-warships-submarines_482257-91174.jpg?_wi=4", imageAlt: "Dashboard preview"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/special-operations-engineer-following-enemy-warships-submarines_482257-91174.jpg?_wi=5", imageAlt: "Dashboard preview"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/special-operations-engineer-following-enemy-warships-submarines_482257-91174.jpg?_wi=6", imageAlt: "Dashboard preview"},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Propulsez votre business dans une nouvelle dimension digitale."
|
||||
description="Des expériences web futuristes, fluides et conçues pour dominer votre marché local."
|
||||
buttons={[{ text: "Démarrer", href: "#contact" }, { text: "Voir nos tarifs", href: "#pricing" }]}
|
||||
mediaAnimation="blur-reveal"
|
||||
testimonials={[
|
||||
{ name: "Marc, Dirigeant", handle: "@startup", testimonial: "Futuriste et efficace !", rating: 5 },
|
||||
{ name: "Sarah, Fondatrice", handle: "@ecommerce", testimonial: "Performance exceptionnelle.", rating: 5 }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Création de site web", description: "Sites vitrines et boutiques professionnels.", icon: Globe,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-setting-web-icon-design-element_460848-10096.jpg?_wi=1"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-setting-web-icon-design-element_460848-10096.jpg?_wi=2"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Design & UX/UI", description: "Expérience utilisateur pensée pour convertir.", icon: Layout,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-diverse-people-holding-wed-design-board_53876-65667.jpg?_wi=1"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-diverse-people-holding-wed-design-board_53876-65667.jpg?_wi=2"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "SEO de base", description: "Visibilité accrue sur les moteurs de recherche.", icon: Search,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-working-tools_1134-67.jpg?_wi=1"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-working-tools_1134-67.jpg?_wi=2"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Maintenance", description: "Support technique et mises à jour assurées.", icon: Settings,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/app-menu-front-side-with-white-background_187299-39717.jpg?_wi=1"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/app-menu-front-side-with-white-background_187299-39717.jpg?_wi=2"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Nos Services"
|
||||
description="Des solutions sur mesure pour votre croissance."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
title="Services Haute Performance"
|
||||
description="L'excellence technologique au service de votre image."
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
features={[
|
||||
{ title: "Développement Web 3.0", description: "Interfaces ultra-rapides et responsives.", imageSrc: "http://img.b2bpic.net/free-photo/3d-setting-web-icon-design-element_460848-10096.jpg?_wi=1" },
|
||||
{ title: "Optimisation Conversion", description: "Design stratégique pour maximiser vos résultats.", imageSrc: "http://img.b2bpic.net/free-photo/happy-diverse-people-holding-wed-design-board_53876-65667.jpg?_wi=1" },
|
||||
{ title: "Architecture SEO Avancée", description: "Visibilité maximale garantie par nature.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-working-tools_1134-67.jpg?_wi=1" }
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Cabinet Conseils", price: "Expertise", imageSrc: "http://img.b2bpic.net/free-photo/group-asia-young-creative-people-smart-casual-wear-discussing-business-brainstorming_7861-3066.jpg?_wi=1"},
|
||||
{
|
||||
id: "2", name: "Esthétique Moderne", price: "Beauty", imageSrc: "http://img.b2bpic.net/free-photo/portrait-corporate-woman-working-fresh-air-outdoors-sitting-bench-with-laptop-digital_1258-194320.jpg?_wi=1"},
|
||||
{
|
||||
id: "3", name: "Studio Détente", price: "Lifestyle", imageSrc: "http://img.b2bpic.net/free-photo/view-elegant-luxurious-wedding-stationery-planner-resources_23-2150166862.jpg?_wi=1"},
|
||||
{
|
||||
id: "4", name: "Cabinet Conseils", price: "Expertise", imageSrc: "http://img.b2bpic.net/free-photo/group-asia-young-creative-people-smart-casual-wear-discussing-business-brainstorming_7861-3066.jpg?_wi=2"},
|
||||
{
|
||||
id: "5", name: "Esthétique Moderne", price: "Beauty", imageSrc: "http://img.b2bpic.net/free-photo/portrait-corporate-woman-working-fresh-air-outdoors-sitting-bench-with-laptop-digital_1258-194320.jpg?_wi=2"},
|
||||
{
|
||||
id: "6", name: "Studio Détente", price: "Lifestyle", imageSrc: "http://img.b2bpic.net/free-photo/view-elegant-luxurious-wedding-stationery-planner-resources_23-2150166862.jpg?_wi=2"},
|
||||
]}
|
||||
title="Nos Projets"
|
||||
description="Un aperçu de notre savoir-faire."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
title="Plans Transparents"
|
||||
description="La qualité premium accessible pour propulser votre croissance."
|
||||
textboxLayout="split"
|
||||
animationType="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "p1", tag: "Starter", price: "499€", period: "/site", description: "Idéal pour lancer votre présence en ligne.", button: { text: "Choisir Starter" }, featuresTitle: "Ce qui est inclus", features: ["Design réactif", "SEO de base", "Support 24/7"] },
|
||||
{ id: "p2", tag: "Pro", price: "999€", period: "/site", description: "Pour une performance maximale et conversion.", button: { text: "Choisir Pro" }, featuresTitle: "Ce qui est inclus", features: ["Performance 3D", "SEO avancé", "Maintenance active"] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="WebMaup a transformé mon activité en quelques jours seulement. Un service ultra pro !"
|
||||
rating={5}
|
||||
author="Julie, Esthéticienne"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-latin-businesswoman-standing-with-arms-crossed-against-isolated-background_662251-639.jpg", alt: "Client"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-afro-businessman-wearing-shirt-black-suit-glasses-looking-front-while-standing-beige-wall_158595-7638.jpg", alt: "Client"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/worker-with-big-smile-crossed-arms_1139-248.jpg", alt: "Client"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-correcting-grammar-mistakes_23-2150171372.jpg", alt: "Client"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/worker-with-big-smile-crossed-arms_1139-248.jpg", alt: "Client"},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardThree
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
title="Projets d'Exception"
|
||||
description="Le futur de votre image commence ici."
|
||||
products={[
|
||||
{ id: "1", name: "Architecture Digitale", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/group-asia-young-creative-people-smart-casual-wear-discussing-business-brainstorming_7861-3066.jpg?_wi=1" },
|
||||
{ id: "2", name: "E-Commerce Évolutif", price: "Vente", imageSrc: "http://img.b2bpic.net/free-photo/portrait-corporate-woman-working-fresh-air-outdoors-sitting-bench-with-laptop-digital_1258-194320.jpg?_wi=1" },
|
||||
{ id: "3", name: "UX Design", price: "Service", imageSrc: "http://img.b2bpic.net/free-photo/happy-diverse-people-holding-wed-design-board_53876-65667.jpg?_wi=1" }
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
tag="Contact"
|
||||
title="Prêt à améliorer votre image en ligne ?"
|
||||
description="Faites une demande de devis maintenant."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
title="Ce que disent nos partenaires"
|
||||
description="Des résultats concrets, une satisfaction totale."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", title: "Innovation", quote: "Le résultat est tout simplement futuriste.", name: "Marc, Dirigeant", role: "Startup Tech" },
|
||||
{ id: "t2", title: "Performance", quote: "Nos taux de conversion ont doublé en 1 mois.", name: "Sarah, Fondatrice", role: "E-commerce" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="WebMaup"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "Services", href: "#services"},
|
||||
{
|
||||
label: "Portfolio", href: "#portfolio"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{
|
||||
label: "Email", href: "mailto:hello@webmaup.fr"},
|
||||
{
|
||||
label: "LinkedIn", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 WebMaup. Tous droits réservés."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Prêt pour la révolution numérique ? Contactez-nous maintenant pour transformer votre vision en réalité digitale."
|
||||
animationType="background-highlight"
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
buttons={[{ text: "Lancer le projet", href: "mailto:hello@webmaup.fr" }]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Solutions", items: [{ label: "Développement" }, { label: "Stratégie" }] },
|
||||
{ title: "Contact", items: [{ label: "hello@webmaup.fr" }] }
|
||||
]}
|
||||
bottomLeftText="© 2024 WebMaup"
|
||||
bottomRightText="Futuriste & Performant"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user