diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 4c3e646..7ad3f8a 100644 --- 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({ {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index 6eb262d..9470e9b 100644 --- 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 ( @@ -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" /> @@ -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" /> @@ -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" /> @@ -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" /> @@ -190,13 +197,15 @@ export default function LandingPage() { diff --git a/src/app/styles/base.css b/src/app/styles/base.css index d97fa01..0f9f89d 100644 --- 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; } diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css index 32083d5..d4f4945 100644 --- 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);