Merge version_2 into main

2026-03-05 17:47:03 +00:00
parent 8e182eddaa 91f40d5741
commit 1e09ff477a
4 changed files with 48 additions and 38 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,16 +1,17 @@
 import type { Metadata } from "next";
-import { Mulish } from "next/font/google";
-import { Inter } from "next/font/google";
+import { Poppins } from "next/font/google";
+import { Manrope } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";

-const mulish = Mulish({
-  variable: "--font-mulish",  subsets: ["latin"],
+const poppins = Poppins({
+  variable: "--font-poppins",  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
 });

-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
+const manrope = Manrope({
+  variable: "--font-manrope",  subsets: ["latin"],
 });

 export const metadata: Metadata = {
@@ -41,7 +42,7 @@ export default function RootLayout({
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
        <body
-          className={`${mulish.variable} ${inter.variable} antialiased`}
+          className={`${poppins.variable} ${manrope.variable} antialiased`}
        >
          <Tag />
          {children}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -15,16 +15,16 @@ import { Heart, Phone, Sparkles } from "lucide-react";
 export default function LandingPage() {
  return (
    <ThemeProvider
-      defaultButtonVariant="directional-hover"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
      contentWidth="mediumLarge"
-      sizing="largeSmallSizeMediumTitles"
-      background="fluid"
-      cardStyle="gradient-radial"
-      primaryButtonStyle="double-inset"
-      secondaryButtonStyle="solid"
-      headingFontWeight="extrabold"
+      sizing="largeSizeMediumTitles"
+      background="sparkles-gradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
@@ -46,11 +46,13 @@ export default function LandingPage() {
          title="Tendance Vintage"
          description="Salon de coiffure au cœur de Bordeaux"
          tag="Depuis 2010 | Excellence & Élégance"
+          tagAnimation="blur-reveal"
          imageSrc="http://img.b2bpic.net/free-photo/two-hairstylers-posing-standing-modern-spacy-beaty-salon_651396-986.jpg"
          imageAlt="Luxury hair salon interior at Tendance Vintage"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={true}
+          buttonAnimation="blur-reveal"
          buttons={[
            { text: "Appeler", href: "tel:+33556727935" },
            { text: "Itinéraire", href: "https://maps.google.com/?q=204+Rue+Sainte-Catherine,+33000+Bordeaux,+France" },
@@ -62,14 +64,15 @@ export default function LandingPage() {
        <TestimonialAboutCard
          tag="À propos de nous"
          tagIcon={Sparkles}
+          tagAnimation="blur-reveal"
          title="Un salon d'exception pour vos cheveux"
          description="Tendance Vintage"
          subdescription="204 Rue Sainte-Catherine, Bordeaux"
          icon={Heart}
          imageSrc="http://img.b2bpic.net/free-photo/skies-snowboard-lounge-area_482257-76730.jpg"
          imageAlt="Interior view of Tendance Vintage salon"
-          mediaAnimation="slide-up"
-          useInvertedBackground={true}
+          mediaAnimation="blur-reveal"
+          useInvertedBackground={false}
        />
      </div>

@@ -78,7 +81,7 @@ export default function LandingPage() {
          title="Nos Services Experts"
          description="Découvrez notre gamme complète de services capillaires haut de gamme, conçus pour sublimer vos cheveux"
          tag="Expertise & Qualité"
-          tagAnimation="slide-up"
+          tagAnimation="blur-reveal"
          features={[
            {
              id: "1",              title: "Balayage",              tags: ["Coloration", "Tendance"],
@@ -105,9 +108,10 @@ export default function LandingPage() {
              id: "8",              title: "Taille de Barbe",              tags: ["Homme", "Précision"],
              imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg",              imageAlt: "Professional beard trimming service"},
          ]}
-          animationType="slide-up"
+          animationType="blur-reveal"
          textboxLayout="default"
-          useInvertedBackground={false}
+          useInvertedBackground={true}
+          buttonAnimation="blur-reveal"
        />
      </div>

@@ -116,7 +120,7 @@ export default function LandingPage() {
          title="Notre Galerie"
          description="Découvrez les réalisations de nos stylistes experts à travers une sélection de nos plus beaux travaux"
          tag="Portfolio"
-          tagAnimation="slide-up"
+          tagAnimation="blur-reveal"
          products={[
            {
              id: "1",              name: "Coupe & Coloration",              price: "Inspiration",              imageSrc: "http://img.b2bpic.net/free-photo/woman-preparing-girl-haircut-procedure_23-2147769867.jpg",              imageAlt: "Professional haircut and color work"},
@@ -128,9 +132,10 @@ export default function LandingPage() {
              id: "4",              name: "Transformation",              price: "Luxe",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-black-sweater-standing-posing_114579-81883.jpg?_wi=2",              imageAlt: "Complete hair transformation result"},
          ]}
          gridVariant="two-columns-alternating-heights"
-          animationType="slide-up"
+          animationType="blur-reveal"
          textboxLayout="default"
-          useInvertedBackground={true}
+          useInvertedBackground={false}
+          buttonAnimation="blur-reveal"
        />
      </div>

@@ -139,7 +144,7 @@ export default function LandingPage() {
          title="Témoignages Clients"
          description="Découvrez ce que nos clients satisfaits pensent de nos services et de notre expertise"
          tag="4.9 ⭐ / 571 avis"
-          tagAnimation="slide-up"
+          tagAnimation="blur-reveal"
          testimonials={[
            {
              id: "1",              name: "Marie Dubois",              role: "Professionnelle",              testimonial: "Tendance Vintage est un véritable havre de paix. Les stylistes sont exceptionnels et comprennent mes besoins. Je recommande vivement !",              imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",              imageAlt: "Client testimonial - Marie Dubois",              icon: Heart,
@@ -160,10 +165,11 @@ export default function LandingPage() {
              id: "6",              name: "Monique Leclerc",              role: "Médecin",              testimonial: "Service impeccable, stylistes talentueux et ambiance luxueuse. C'est mon endroit préféré pour me sentir bien. Vivement la prochaine visite !",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg",              imageAlt: "Client testimonial - Monique Leclerc",              icon: Heart,
            },
          ]}
-          animationType="slide-up"
+          animationType="blur-reveal"
          textboxLayout="default"
-          useInvertedBackground={false}
+          useInvertedBackground={true}
          carouselMode="auto"
+          buttonAnimation="blur-reveal"
        />
      </div>

@@ -172,7 +178,7 @@ export default function LandingPage() {
          title="Nos Succès"
          description="Des chiffres qui parlent de notre engagement envers l'excellence"
          tag="Performance"
-          tagAnimation="slide-up"
+          tagAnimation="blur-reveal"
          metrics={[
            { id: "1", value: "571", description: "Avis Clients Satisfaits" },
            { id: "2", value: "4.9", description: "Note Moyenne ⭐" },
@@ -180,9 +186,10 @@ export default function LandingPage() {
            { id: "4", value: "1000+", description: "Clients Réguliers" },
          ]}
          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
+          animationType="blur-reveal"
          textboxLayout="default"
-          useInvertedBackground={true}
+          useInvertedBackground={false}
+          buttonAnimation="blur-reveal"
        />
      </div>

@@ -190,13 +197,15 @@ export default function LandingPage() {
        <ContactCTA
          tag="Nous Contacter"
          tagIcon={Phone}
+          tagAnimation="blur-reveal"
          title="Prêt à transformer vos cheveux ?"
          description="Réservez votre rendez-vous dès aujourd'hui ou visitez-nous au cœur de Bordeaux. Nos stylistes experts vous accueillent du lundi au samedi."
          buttons={[
            { text: "Appeler", href: "tel:+33556727935" },
            { text: "Itinéraire", href: "https://maps.google.com/?q=204+Rue+Sainte-Catherine,+33000+Bordeaux,+France" },
          ]}
-          background={{ variant: "plain" }}
+          buttonAnimation="blur-reveal"
+          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
        />
      </div>
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-mulish), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
 }
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
  --accent: #ffffff;
  --background-accent: #ffffff; */

-  --background: #e3deea;
+  --background: #f7f6f7;
  --card: #ffffff;
-  --foreground: #27231f;
-  --primary-cta: #27231f;
+  --foreground: #0c1325;
+  --primary-cta: #0798ff;
  --primary-cta-text: #e3deea;
  --secondary-cta: #ffffff;
  --secondary-cta-text: #27231f;
-  --accent: #c68a62;
-  --background-accent: #c68a62;
+  --accent: #93c7ff;
+  --background-accent: #a8cde8;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);