Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -3,15 +3,13 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
-import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
+import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
 
 export default function LandingPage() {
   return (
@@ -31,306 +29,103 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Início", id: "hero" },
+        { name: "Sobre", id: "about" },
+        { name: "Serviços", id: "services" },
+        { name: "Depoimentos", id: "testimonials" },
+        { name: "Contato", id: "contact" },
       ]}
       brandName="Zanza Pura Beleza"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroCentered
-      background={{
-        variant: "gradient-bars",
-      }}
+      <HeroBillboardGallery
       title="Zanza Pura Beleza"
-      description="Where beauty meets elegance. Experience personalized skincare and aesthetic treatments designed just for you."
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/charming-curly-brunette-woman-with-blue-eyes-red-lips-pink-outfit-posing-isolated-space_197531-15295.jpg",
-          alt: "Client 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/face-close-up-happy-woman_1098-3047.jpg",
-          alt: "Client 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-brunette-woman-holding-black-digital-tablet-smiling-gazing-gently_1258-200125.jpg",
-          alt: "Client 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-cute-brunette-woman-model-casual-summer-pink-clothes-with-no-makeup-isolated-gray-drinking-coffee_158538-14933.jpg",
-          alt: "Client 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-portrait-green-eyed-brunette-woman-hair-band-white-t-shirt-against-wall-windows-cacti_197531-17042.jpg",
-          alt: "Client 5",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Book Now",
-          href: "#contact",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Premium Skincare",
-        },
-        {
-          type: "text",
-          text: "Professional Staff",
-        },
-        {
-          type: "text",
-          text: "Vegan Products",
-        },
-        {
-          type: "text",
-          text: "Personalized Care",
-        },
-        {
-          type: "text",
-          text: "Expert Treatments",
-        },
+      description="Onde a beleza encontra a elegância. Experimente tratamentos estéticos e de pele personalizados feitos especialmente para você."
+      buttons={[{ text: "Agende Agora", href: "#contact" }]}
+      background={{ variant: "plain" }}
+      mediaItems={[
+        { imageSrc: "http://img.b2bpic.net/free-photo/charming-curly-brunette-woman-with-blue-eyes-red-lips-pink-outfit-posing-isolated-space_197531-15295.jpg", imageAlt: "Client 1" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/face-close-up-happy-woman_1098-3047.jpg", imageAlt: "Client 2" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-brunette-woman-holding-black-digital-tablet-smiling-gazing-gently_1258-200125.jpg", imageAlt: "Client 3" }
       ]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
+      <SplitAbout
+      title="Nossa Filosofia"
+      description="Combinando técnicas ancestrais com a tecnologia moderna para garantir resultados impecáveis em cada tratamento."
+      imageSrc="http://img.b2bpic.net/free-photo/serene-spa-room_23-2151934180.jpg"
+      textboxLayout="default"
       useInvertedBackground={true}
-      heading={[
-        {
-          type: "text",
-          content: "Our Philosophy",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/serene-spa-room_23-2151934180.jpg",
-          alt: "About Zanza",
-        },
+      bulletPoints={[
+        { title: "Excelência", description: "Profissionais certificados com anos de experiência." },
+        { title: "Qualidade", description: "Produtos veganos e orgânicos premium." },
+        { title: "Bem-estar", description: "Um ambiente pensado para o seu relaxamento absoluto." }
       ]}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardSixteen
+      <FeatureCardOne
+      title="Destaques da Zanza"
+      description="Conheça os diferenciais que tornam nossa clínica referência em beleza e bem-estar."
       animationType="slide-up"
+      gridVariant="four-items-2x2-equal-grid"
       textboxLayout="default"
       useInvertedBackground={false}
-      negativeCard={{
-        items: [
-          "Limited slots available",
-          "Booking required in advance",
-          "Cancellations restricted",
-          "Peak times fill fast",
-          "Private sessions only",
-        ],
-      }}
-      positiveCard={{
-        items: [
-          "Expert aesthetic staff",
-          "Premium vegan products",
-          "Personalized treatment plans",
-          "State-of-the-art facility",
-          "Holistic wellness focus",
-        ],
-      }}
-      title="Why Choose Zanza"
-      description="Professional care that enhances your natural beauty."
+      features={[
+        { title: "Consultas Personalizadas", description: "Planos focados na necessidade da sua pele.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-using-face-treatment-her-client_23-2149037149.jpg?_wi=1" },
+        { title: "Ambiente Zen", description: "Refúgio urbano para desconectar e recarregar.", imageSrc: "http://img.b2bpic.net/free-photo/serene-minimalist-spa-interior-meditation-space_23-2151935113.jpg?_wi=1" },
+        { title: "Tecnologia de Ponta", description: "Equipamentos modernos para melhores resultados.", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-spa-massage-wellness-hotel-suite-with-bathtub_105762-2027.jpg" },
+        { title: "Equipe Especialista", description: "Expertise que realça o seu brilho natural.", imageSrc: "http://img.b2bpic.net/free-photo/natural-elements-spa-with-candles_23-2148199479.jpg" }
+      ]}
     />
   </div>
 
   <div id="services" data-section="services">
       <ProductCardOne
       animationType="slide-up"
-      textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
+      textboxLayout="default"
       useInvertedBackground={true}
+      title="Nossos Serviços Signature"
+      description="Explore nossa seleção de tratamentos de beleza."
       products={[
-        {
-          id: "1",
-          name: "Facial Glow",
-          price: "$80",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-using-face-treatment-her-client_23-2149037149.jpg",
-        },
-        {
-          id: "2",
-          name: "Signature Massage",
-          price: "$120",
-          imageSrc: "http://img.b2bpic.net/free-photo/lounge-lobby-area-library-sales-center_105762-1780.jpg",
-        },
-        {
-          id: "3",
-          name: "Deep Hydration",
-          price: "$95",
-          imageSrc: "http://img.b2bpic.net/free-photo/serene-minimalist-spa-interior-meditation-space_23-2151935113.jpg",
-        },
-        {
-          id: "4",
-          name: "Brow Sculpting",
-          price: "$45",
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-lavender-interior-design_23-2151561156.jpg",
-        },
-        {
-          id: "5",
-          name: "Natural Peel",
-          price: "$110",
-          imageSrc: "http://img.b2bpic.net/free-photo/natural-elements-spa-with-candles_23-2148199479.jpg",
-        },
-        {
-          id: "6",
-          name: "Skin Tightening",
-          price: "$150",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-spa-massage-wellness-hotel-suite-with-bathtub_105762-2027.jpg",
-        },
+        { id: "1", name: "Brilho Facial", price: "R$ 80", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-using-face-treatment-her-client_23-2149037149.jpg?_wi=2" },
+        { id: "2", name: "Massagem Signature", price: "R$ 120", imageSrc: "http://img.b2bpic.net/free-photo/lounge-lobby-area-library-sales-center_105762-1780.jpg" },
+        { id: "3", name: "Hidratação Profunda", price: "R$ 95", imageSrc: "http://img.b2bpic.net/free-photo/serene-minimalist-spa-interior-meditation-space_23-2151935113.jpg?_wi=2" }
       ]}
-      title="Our Signature Services"
-      description="Explore our curated list of beauty treatments."
     />
   </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardFourteen
-      useInvertedBackground={false}
-      title="Our Impact"
-      tag="Milestones"
-      metrics={[
-        {
-          id: "m1",
-          value: "500+",
-          description: "Happy Clients",
-        },
-        {
-          id: "m2",
-          value: "12",
-          description: "Expert Staff",
-        },
-        {
-          id: "m3",
-          value: "5+",
-          description: "Years Experience",
-        },
-      ]}
-      metricsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
-      textboxLayout="split"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "t1",
-          title: "Wonderful Experience",
-          quote: "The best facial I've ever had!",
-          name: "Maria Silva",
-          role: "Designer",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-smiling-female-trendy-summer-pink-dress-sexy-carefree-woman-posing-near-wall-studio-positive-model-having-fun-indoors-cheerful-happy-sunglasses_158538-21270.jpg",
-        },
-        {
-          id: "t2",
-          title: "Highly Recommend",
-          quote: "Professional and clean environment.",
-          name: "Ana Souza",
-          role: "Manager",
-          imageSrc: "http://img.b2bpic.net/free-photo/charming-women-with-motorcycle-helmets_23-2147771901.jpg",
-        },
-        {
-          id: "t3",
-          title: "Amazing Results",
-          quote: "My skin looks so glowing.",
-          name: "Julia Costa",
-          role: "Student",
-          imageSrc: "http://img.b2bpic.net/free-photo/blond-model-white-shirt-feeling-fun_114579-24456.jpg",
-        },
-        {
-          id: "t4",
-          title: "Five Stars",
-          quote: "Very attentive to details.",
-          name: "Beatriz Lima",
-          role: "Teacher",
-          imageSrc: "http://img.b2bpic.net/free-photo/two-young-beautiful-smiling-girls-white-bathrobes-towels-head_158538-18079.jpg",
-        },
-        {
-          id: "t5",
-          title: "Perfect Care",
-          quote: "Truly relaxing and effective.",
-          name: "Fernanda Rosa",
-          role: "Lawyer",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-relaxed-content-woman-leaning-wall_1262-1749.jpg",
-        },
-      ]}
-      title="What Our Clients Say"
-      description="Hear from our satisfied beauty enthusiasts."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
+  <div id="pricing" data-section="pricing">
+      <PricingCardOne
+      title="Planos de Tratamento"
+      description="Escolha o plano que melhor atende à sua rotina de cuidados."
+      animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "Do I need an appointment?",
-          content: "Yes, booking is highly recommended.",
-        },
-        {
-          id: "f2",
-          title: "Which products do you use?",
-          content: "We use premium vegan-friendly skincare.",
-        },
-        {
-          id: "f3",
-          title: "Can I cancel?",
-          content: "Cancellation is allowed 24h prior.",
-        },
+      plans={[
+        { id: "p1", badge: "Essential", price: "R$ 199", subtitle: "Para manutenção diária", features: ["Avaliação gratuita", "1 Hidratação facial", "Desconto em produtos"] },
+        { id: "p2", badge: "Premium", price: "R$ 399", subtitle: "Tratamento completo", features: ["Todos do Essential", "2 Massagens", "Acesso à sauna", "Consultoria estética"] }
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/woman-being-asked-marry-her-boyfriend_23-2148435793.jpg"
-      mediaAnimation="slide-up"
-      title="Common Questions"
-      description="Answers to help you book your visit."
-      faqsAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactCTA
-      useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
-      tag="Contact Us"
-      title="Ready for a transformation?"
-      description="Schedule your consultation today and discover your best self."
+      tag="Entre em Contato"
+      title="Pronta para uma transformação?"
+      description="Agende sua consulta hoje mesmo e descubra sua melhor versão. Visite-nos em R. Basílio Fazzi, 290 - Centro, Franco da Rocha - SP."
       buttons={[
-        {
-          text: "Call Now",
-          href: "tel:+5511999999999",
-        },
+        { text: "WhatsApp (11) 4444-6602", href: "https://wa.me/551144446602" },
+        { text: "Ver Mapa", href: "https://share.google/9awEMaPsoCHpYd0wU" },
       ]}
+      background={{ variant: "plain" }}
+      useInvertedBackground={false}
     />
   </div>
 
@@ -338,33 +133,20 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         {
-          title: "Quick Links",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Services",
-              href: "#services",
-            },
+          title: "Links Rápidos",          items: [
+            { label: "Sobre", href: "#about" },
+            { label: "Serviços", href: "#services" },
           ],
         },
         {
-          title: "Connect",
-          items: [
-            {
-              label: "Instagram",
-              href: "#",
-            },
-            {
-              label: "Facebook",
-              href: "#",
-            },
+          title: "Conecte-se",          items: [
+            { label: "Instagram", href: "#" },
+            { label: "Facebook", href: "#" },
           ],
         },
       ]}
       logoText="Zanza Pura Beleza"
+      copyrightText="© 2025 Zanza Pura Beleza | Todos os direitos reservados"
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
+  --background: #fdf1f7;
   --card: #ffffff;
-  --foreground: #25190c;
-  --primary-cta: #ff6207;
+  --foreground: #330018;
+  --primary-cta: #e8197d;
   --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #fce4ef;
   --secondary-cta-text: #25190c;
-  --accent: #ffce93;
-  --background-accent: #e8cfa8;
+  --accent: #f9a8d4;
+  --background-accent: #fbcfe8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);