Merge version_1 into main #1

Merged
bender merged 2 commits from version_1 into main 2026-03-12 14:22:09 +00:00
2 changed files with 192 additions and 183 deletions

View File

@@ -1,169 +1,185 @@
"use client";
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import ContactText from '@/components/sections/contact/ContactText';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Award, Wrench, Gauge, Hammer, Zap, Paintbrush, Heart, Car } from 'lucide-react';
import { Car, Hammer, HandshakeIcon, Mail, Sparkles, Star, Users, Wrench, Zap } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumSizeLargeTitles"
background="grid"
cardStyle="subtle-shadow"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="medium"
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="blurBottom"
cardStyle="glass-depth"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
<NavbarStyleFullscreen
brandName="NOVUS AUTO"
navItems={[
{ name: 'Accueil', id: 'hero' },
{ name: 'À Propos', id: 'about' },
{ name: 'Spécialités', id: 'features' },
{ name: 'Équipe', id: 'team' },
{ name: 'Contact', id: 'contact' }
{ name: "Accueil", id: "hero" },
{ name: "Spécialités", id: "features" },
{ name: "Véhicules", id: "product" },
{ name: "Équipe", id: "team" },
{ name: "Contact", id: "contact" }
]}
button={{ text: 'Nous Contacter', href: 'contact' }}
brandName="Novus Auto"
bottomLeftText="Premium Automotive Excellence"
bottomRightText="contact@novusauto.fr"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboardSplit
logoText="NOVUS AUTO"
description="Excellence en mécanique automobile. Spécialistes en diagnostic, entretien, restauration et performance. Votre garage de confiance depuis plus de 15 ans."
background={{ variant: 'grid' }}
<HeroSplitDualMedia
tag="Garage Automobile Premium"
tagIcon={Sparkles}
tagAnimation="slide-up"
title="Excellence Automotive Sur Mesure"
description="Découvrez NOVUS AUTO, votre destination privilégiée pour l'entretien, la restauration et la personnalisation de véhicules de prestige. Expertise, passion et perfectionnisme au service de votre automobile."
background={{ variant: "plain" }}
mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212227.jpg", imageAlt: "Luxury vehicle showcase" },
{ imageSrc: "http://img.b2bpic.net/free-photo/man-looking-car-thinking-purchase_1303-14584.jpg", imageAlt: "Premium automotive display" }
]}
rating={5}
ratingText="Satisfaction Client Garantie"
buttons={[
{ text: 'Découvrir nos services', href: '#features' },
{ text: 'Prendre rendez-vous', href: '#contact' }
{ text: "Découvrir nos services", href: "#features" },
{ text: "Nos Véhicules", href: "#product" }
]}
layoutOrder="default"
imageSrc="http://img.b2bpic.net/free-photo/male-female-mechanics-working-shop-car_23-2150169927.jpg"
imageAlt="Garage Novus Auto - Atelier professionnel"
frameStyle="card"
mediaAnimation="slide-up"
buttonAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
tag="À Propos"
tagIcon={Award}
title="Votre partenaire de confiance en mécanique automobile"
description="Depuis sa création, Novus Auto s'est établie comme leader en services automobiles premium. Notre équipe de techniciens expérimentés et certifiés combine expertise traditionnelle et technologies de diagnostic dernier cri pour assurer la qualité maximale sur chaque intervention. Nous travaillons sur tous les modèles et marques, du véhicule classique au supercar, avec le même dévouement."
metrics={[
{ value: '15+', title: 'Années d\'expérience' },
{ value: '2000+', title: 'Clients satisfaits' }
]}
imageSrc="http://img.b2bpic.net/free-photo/happy-mixedrace-couple-auto-repair-shop-looking-camera_637285-11555.jpg"
imageAlt="Équipe Novus Auto - Techniciens professionnels"
useInvertedBackground={false}
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureBorderGlow
title="Nos Spécialités"
description="Services automobiles complets et professionnels pour tous vos besoins."
tag="Services"
tagIcon={Wrench}
<FeatureHoverPattern
tag="Nos Spécialités"
tagIcon={Zap}
tagAnimation="slide-up"
title="Services Automotive d'Excellence"
description="Expertise reconnue dans l'entretien premium, la restauration complète et la personnalisation haute performance de véhicules de collection et modernes."
textboxLayout="default"
useInvertedBackground={false}
features={[
{ icon: Gauge, title: 'Diagnostic Avancé', description: 'Diagnostic électronique complète avec équipement dernière génération pour identifier rapidement tout problème.' },
{ icon: Hammer, title: 'Entretien & Réparation', description: 'Maintenance régulière, réparations mécaniques et remplacement de pièces détachées de qualité OEM.' },
{ icon: Zap, title: 'Performance & Tuning', description: 'Optimisation moteur, augmentation de puissance et préparation sport pour les amateurs de performance.' },
{ icon: Paintbrush, title: 'Restauration Complète', description: 'Restauration de véhicules classiques et restauration esthétique complète de votre automobile.' }
{ icon: Wrench, title: "Entretien Premium", description: "Maintenance complète et révisions régulières pour préserver la performance et l'élégance de votre véhicule avec les meilleurs équipements." },
{ icon: Hammer, title: "Restauration Complète", description: "Restauration méticuleuse de véhicules classiques et modernes, du diagnostic au remise à neuf totale dans nos ateliers équipés." },
{ icon: Zap, title: "Tuning & Personnalisation", description: "Modifications haute performance et customisation esthétique selon vos envies, avec respect de l'essence du véhicule original." }
]}
animationType="slide-up"
/>
</div>
<div id="product" data-section="product">
<ProductCardOne
tag="Notre Sélection"
tagIcon={Car}
tagAnimation="slide-up"
title="Véhicules Disponibles"
description="Parcourez notre collection de véhicules soigneusement sélectionnés et expertisés, allant des classiques aux modernes."
textboxLayout="default"
useInvertedBackground={true}
buttons={[
{ text: 'Voir plus de services', href: '#contact' }
useInvertedBackground={false}
animationType="slide-up"
gridVariant="uniform-all-items-equal"
products={[
{ id: "1", name: "Mercedes-Benz SL65 AMG", price: "89 500 €", imageSrc: "http://img.b2bpic.net/free-photo/sensual-dangerous-woman-standing-with-feline-look-door_158595-1153.jpg", imageAlt: "Mercedes-Benz SL65 AMG" },
{ id: "2", name: "Porsche 911 Carrera", price: "105 000 €", imageSrc: "http://img.b2bpic.net/free-photo/young-couple-talking-sales-person-car-showroom_1303-15134.jpg", imageAlt: "Porsche 911 Carrera" },
{ id: "3", name: "Jaguar E-Type Classic", price: "72 000 €", imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_74190-289.jpg", imageAlt: "Jaguar E-Type Classic" }
]}
buttonAnimation="slide-up"
/>
</div>
<div id="team" data-section="team">
<TeamCardTen
title="L'équipe d'experts qui prend soin de votre véhicule"
tag="Équipe"
<TeamCardOne
tag="Notre Équipe"
tagIcon={Users}
tagAnimation="slide-up"
membersAnimation="slide-up"
members={[
{ id: '1', name: 'Marc Dubois', imageSrc: 'http://img.b2bpic.net/free-photo/mechanic-standing-repair-garage_1170-1536.jpg', imageAlt: 'Marc Dubois - Directeur Technique' },
{ id: '2', name: 'Sophie Laurent', imageSrc: 'http://img.b2bpic.net/free-photo/portrait-mechanic-smiling_1170-1139.jpg', imageAlt: 'Sophie Laurent - Technicienne Senior' },
{ id: '3', name: 'Pierre Moreau', imageSrc: 'http://img.b2bpic.net/free-photo/hand-car-mechanic-with-wrench-auto-repair-garage_146671-19591.jpg', imageAlt: 'Pierre Moreau - Spécialiste Performance' },
{ id: '4', name: 'Jean Rousseau', imageSrc: 'http://img.b2bpic.net/free-photo/male-bus-driver-posing-portrait_23-2151582422.jpg', imageAlt: 'Jean Rousseau - Mécanicien Général' }
]}
memberVariant="card"
useInvertedBackground={false}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
testimonials={[
{ id: '1', name: 'Catherine Dupont', imageSrc: 'http://img.b2bpic.net/free-photo/happy-mature-businessman-showing-thumb-up_1262-3024.jpg', imageAlt: 'Catherine Dupont' },
{ id: '2', name: 'François Beaumont', imageSrc: 'http://img.b2bpic.net/free-photo/elderly-business-woman-office-isolated_1303-21369.jpg', imageAlt: 'François Beaumont' },
{ id: '3', name: 'Isabelle Leclerc', imageSrc: 'http://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt-showing-thumbs-up_141793-120967.jpg', imageAlt: 'Isabelle Leclerc' },
{ id: '4', name: 'Michel Renault', imageSrc: 'http://img.b2bpic.net/free-photo/young-woman-sitting-library_273609-15845.jpg', imageAlt: 'Michel Renault' },
{ id: '5', name: 'Véronique Martin', imageSrc: 'http://img.b2bpic.net/free-photo/business-people-working-office-with-digital-tablet_1301-6633.jpg', imageAlt: 'Véronique Martin' }
]}
cardTitle="Plus de 2000 clients nous font confiance pour l'excellence de nos services automobiles"
cardTag="Avis clients"
cardTagIcon={Heart}
cardAnimation="slide-up"
useInvertedBackground={true}
/>
</div>
<div id="products" data-section="products">
<ProductCardTwo
title="Véhicules en Exposition"
description="Sélection de véhicules premium actuellement en atelier ou en exposition."
tag="Galerie"
tagIcon={Car}
products={[
{ id: '1', brand: 'Novus Auto', name: 'Mercedes-Benz AMG C63', price: 'À consulter', rating: 5, reviewCount: 'Excellente condition', imageSrc: 'http://img.b2bpic.net/free-vector/realistic-formula-1-racing-car_23-2147880945.jpg', imageAlt: 'Mercedes-Benz AMG C63 - Atelier Novus Auto' },
{ id: '2', brand: 'Novus Auto', name: 'BMW X5 M Sport', price: 'À consulter', rating: 5, reviewCount: 'Service complet', imageSrc: 'http://img.b2bpic.net/free-photo/ladies-car-salon-woman-buying-car-elegant-woman-blue-dress-manager-helps-client_1157-45023.jpg', imageAlt: 'BMW X5 M Sport - Atelier Novus Auto' },
{ id: '3', brand: 'Novus Auto', name: 'Jaguar E-Type Classique', price: 'Restauré', rating: 5, reviewCount: 'Masterpiece', imageSrc: 'http://img.b2bpic.net/free-photo/stylish-bearded-male-dressed-brown-leather-jacket-posing-with-crossed-arms-while-leaning-tuned-retro-car-city-parking_613910-19208.jpg', imageAlt: 'Jaguar E-Type Classique - Restauration Novus Auto' }
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
title="Experts Automobiles"
description="Une équipe passionnée et expérimentée au service de votre satisfaction et de l'excellence technique de chaque projet."
textboxLayout="default"
useInvertedBackground={false}
buttons={[
{ text: 'Consulter nos services', href: '#features' }
animationType="slide-up"
gridVariant="uniform-all-items-equal"
members={[
{ id: "1", name: "Thierry M.", role: "Responsable Atelier", imageSrc: "http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881113.jpg", imageAlt: "Thierry M." },
{ id: "2", name: "Sophie D.", role: "Technicienne Spécialisée", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-3571.jpg", imageAlt: "Sophie D." },
{ id: "3", name: "Jean-Claude B.", role: "Gestionnaire Projet", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-looking-laptop_23-2150171220.jpg", imageAlt: "Jean-Claude B." },
{ id: "4", name: "Marc L.", role: "Mécanicien Senior", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-using-digital-tablet-while-servicing-car-engine_1170-1356.jpg", imageAlt: "Marc L." }
]}
buttonAnimation="slide-up"
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardSixteen
tag="Avis Clients"
tagIcon={Star}
tagAnimation="slide-up"
title="Témoignages de Satisfaction"
description="Découvrez les retours enthousiastes de nos clients satisfaits de la qualité de nos services et de notre expertise professionnelle."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
testimonials={[
{ id: "1", name: "Philippe Renault", role: "Propriétaire", company: "Collectionneurs Automobiles", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/traveler-photographer-studio-portrait-handsome-bearded_613910-1606.jpg", imageAlt: "Philippe Renault" },
{ id: "2", name: "Marie Fontaine", role: "Directrice", company: "Auto Prestige Services", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blonde-business-woman-working_23-2149100282.jpg", imageAlt: "Marie Fontaine" },
{ id: "3", name: "Alain Dubois", role: "Entrepreneur", company: "Dubois Investment", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-businessman_1098-21013.jpg", imageAlt: "Alain Dubois" },
{ id: "4", name: "Isabelle Moreau", role: "Vice-Présidente", company: "Groupe Moreau Holdings", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-business-woman-portrait_23-2149280701.jpg", imageAlt: "Isabelle Moreau" },
{ id: "5", name: "Laurent Gasquet", role: "Directeur Technique", company: "Gasquet Automobiles", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-well-dressed-man-with-beard-posing-outdoors_1328-3267.jpg", imageAlt: "Laurent Gasquet" },
{ id: "6", name: "Véronique Leclerc", role: "Présidente", company: "Leclerc Luxury Motors", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-smiling-woman-office_23-2148187253.jpg", imageAlt: "Véronique Leclerc" }
]}
kpiItems={[
{ value: "500+", label: "Véhicules Traités" },
{ value: "98%", label: "Satisfaction Client" },
{ value: "25+", label: "Années d'Expérience" }
]}
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
tag="Partenaires de Confiance"
tagIcon={HandshakeIcon}
tagAnimation="slide-up"
title="Marques Automobiles Prestigieuses"
description="Nous travaillons en partenariat avec les plus grands constructeurs automobiles mondiaux pour vous offrir expertise et authentification garanties."
textboxLayout="default"
useInvertedBackground={false}
names={[
"Mercedes-Benz", "Porsche", "BMW", "Audi", "Jaguar", "Lamborghini", "Ferrari"
]}
speed={40}
showCard={true}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Prêt à confier votre véhicule à des experts ? Contactez-nous dès aujourd'hui pour un diagnostic professionnel et un devis personnalisé."
animationType="entrance-slide"
background={{ variant: 'grid' }}
useInvertedBackground={true}
buttons={[
{ text: 'Nous Contacter', href: 'mailto:contact@novusauto.fr' },
{ text: 'Appeler: +33 1 23 45 67 89', href: 'tel:+33123456789' }
]}
<ContactSplit
tag="Nous Contacter"
tagIcon={Mail}
tagAnimation="slide-up"
title="Rejoignez Notre Communauté"
description="Inscrivez-vous à notre newsletter pour recevoir les dernières actualités, offres spéciales et conseils automobiles directement dans votre boîte mail."
background={{ variant: "plain" }}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/woman-enjoying-her-financially-independence-while-buying-car_23-2149434398.jpg"
imageAlt="Garage moderne NOVUS AUTO"
mediaAnimation="slide-up"
mediaPosition="right"
inputPlaceholder="Votre adresse email"
buttonText="S'inscrire"
termsText="En vous inscrivant, vous acceptez nos conditions d'utilisation et notre politique de confidentialité."
/>
</div>
@@ -171,37 +187,42 @@ export default function LandingPage() {
<FooterSimple
columns={[
{
title: 'Services',
items: [
{ label: 'Diagnostic', href: '#features' },
{ label: 'Entretien', href: '#features' },
{ label: 'Performance', href: '#features' },
{ label: 'Restauration', href: '#features' }
title: "Navigation", items: [
{ label: "Accueil", href: "#hero" },
{ label: "Spécialités", href: "#features" },
{ label: "Véhicules", href: "#product" },
{ label: "Équipe", href: "#team" }
]
},
{
title: 'Entreprise',
items: [
{ label: 'À Propos', href: '#about' },
{ label: 'Équipe', href: '#team' },
{ label: 'Avis Clients', href: '#testimonials' },
{ label: 'Contact', href: '#contact' }
title: "Services", items: [
{ label: "Entretien", href: "#" },
{ label: "Restauration", href: "#" },
{ label: "Tuning", href: "#" },
{ label: "Diagnostic", href: "#" }
]
},
{
title: 'Contact',
items: [
{ label: 'Email: contact@novusauto.fr', href: 'mailto:contact@novusauto.fr' },
{ label: 'Tél: +33 1 23 45 67 89', href: 'tel:+33123456789' },
{ label: '123 Boulevard Principal, 75001 Paris', href: '#' },
{ label: 'Lun-Ven: 8h-18h | Sam: 9h-17h', href: '#' }
title: "Informations", items: [
{ label: "À Propos", href: "#" },
{ label: "Blog", href: "#" },
{ label: "FAQ", href: "#" },
{ label: "Carrières", href: "#" }
]
},
{
title: "Légal", items: [
{ label: "Politique de Confidentialité", href: "#" },
{ label: "Conditions d'Utilisation", href: "#" },
{ label: "Mentions Légales", href: "#" },
{ label: "Cookies", href: "#" }
]
}
]}
bottomLeftText="© 2025 Novus Auto. Tous droits réservés."
bottomRightText="Créé avec soin pour les passionnés d'automobile"
bottomLeftText="© 2025 NOVUS AUTO. Tous droits réservés."
bottomRightText="Conçu avec Excellence • Service Premium"
/>
</div>
</ThemeProvider>
);
}
}

View File

@@ -1,51 +1,39 @@
"use client";
import { memo } from "react";
import useSvgTextLogo from "./useSvgTextLogo";
import { cls } from "@/lib/utils";
import React from 'react';
interface SvgTextLogoProps {
logoText: string;
adjustHeightFactor?: number;
verticalAlign?: "top" | "center";
text: string;
fontSize?: number;
fontFamily?: string;
fill?: string;
className?: string;
}
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
logoText,
adjustHeightFactor,
verticalAlign = "top",
className = "",
}) {
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
text,
fontSize = 24,
fontFamily = 'Arial, sans-serif',
fill = 'currentColor',
className = '',
}) => {
return (
<svg
ref={svgRef}
viewBox={viewBox}
className={cls("w-full", className)}
style={{ aspectRatio: aspectRatio }}
preserveAspectRatio="none"
role="img"
aria-label={`${logoText} logo`}
viewBox="0 0 200 100"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<text
ref={textRef}
x="0"
y={verticalAlign === "center" ? "50%" : "0"}
className="font-bold fill-current"
style={{
fontSize: "20px",
letterSpacing: "-0.02em",
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
}}
x="50%"
y="50%"
fontSize={fontSize}
fontFamily={fontFamily}
fill={fill}
textAnchor="middle"
dominantBaseline="central"
>
{logoText}
{text}
</text>
</svg>
);
});
SvgTextLogo.displayName = "SvgTextLogo";
};
export default SvgTextLogo;