Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -12,7 +12,7 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
-import { CreditCard, Facebook, Instagram, Linkedin, MessageSquare, Package, ShoppingCart, Twitter, Users } from "lucide-react";
+import { CreditCard, Facebook, Instagram, Linkedin, MessageSquare, Package, ShoppingCart, Users, Twitter } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -33,33 +33,19 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "Início",
+          name: "Início",          id: "#hero"},
-          id: "#hero",
-        },
         {
-          name: "Sobre Nós",
+          name: "Sobre Nós",          id: "#about"},
-          id: "#about",
-        },
         {
-          name: "Benefícios",
+          name: "Benefícios",          id: "#features"},
-          id: "#features",
-        },
         {
-          name: "Produtos",
+          name: "Produtos",          id: "#products"},
-          id: "#products",
-        },
         {
-          name: "Avaliações",
+          name: "Avaliações",          id: "#reviews"},
-          id: "#reviews",
-        },
         {
-          name: "FAQ",
+          name: "FAQ",          id: "#faq"},
-          id: "#faq",
-        },
         {
-          name: "Contacto",
+          name: "Contacto",          id: "#contact"},
-          id: "#contact",
-        },
       ]}
       brandName="Mini Chaleke"
     />
@@ -68,52 +54,29 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboardRotatedCarousel
       background={{
-        variant: "rotated-rays-animated",
+        variant: "rotated-rays-animated"}}
-      }}
       title="Descubra o Mercado de Moçambique na Ponta dos Seus Dedos"
       description="Mini Chaleke conecta compradores e vendedores de todo o país. Encontre produtos únicos e essenciais, com a conveniência de um clique."
       tag="Mini Chaleke"
       buttons={[
         {
-          text: "Explorar Produtos",
+          text: "Explorar Produtos",          href: "#products"},
-          href: "#products",
-        },
         {
-          text: "Registar como Vendedor",
+          text: "Registar como Vendedor",          href: "#"},
-          href: "#",
-        },
       ]}
       carouselItems={[
         {
-          id: "hero-carousel-1",
+          id: "hero-carousel-1",          imageSrc: "https://i.imgur.com/rN2sH1t.jpg",          imageAlt: "Vibrant Mozambican market scene with fresh produce"},
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-supply-chain-representation_23-2149827295.jpg",
-          imageAlt: "Vibrant African marketplace scene",
-        },
         {
-          id: "hero-carousel-2",
+          id: "hero-carousel-2",          imageSrc: "https://i.imgur.com/0P6sV1m.jpg",          imageAlt: "Local artisan crafting traditional Mozambican pottery"},
-          imageSrc: "http://img.b2bpic.net/free-photo/friends-shopping-second-hand-market_23-2149353756.jpg",
-          imageAlt: "People browsing an online store on mobile",
-        },
         {
-          id: "hero-carousel-3",
+          id: "hero-carousel-3",          imageSrc: "https://i.imgur.com/vH1fA7L.jpg",          imageAlt: "Community interaction at a lively Mozambican village market"},
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-holding-bags-showing-thumb-up_1262-5695.jpg",
-          imageAlt: "Secure online payment process on a smartphone",
-        },
         {
-          id: "hero-carousel-4",
+          id: "hero-carousel-4",          imageSrc: "https://i.imgur.com/5J3P0XG.jpg",          imageAlt: "Colorful array of traditional Mozambican fabrics (capulanas)"},
-          imageSrc: "http://img.b2bpic.net/free-photo/two-beautiful-young-women-sitting-shop-looking-digital-tablet-with-many-shopping-bags_23-2147968493.jpg",
-          imageAlt: "Group of happy customers and a seller",
-        },
         {
-          id: "hero-carousel-5",
+          id: "hero-carousel-5",          imageSrc: "https://i.imgur.com/3N4o5gK.jpg",          imageAlt: "A vendor proudly displaying local Mozambican spices and herbs"},
-          imageSrc: "http://img.b2bpic.net/free-photo/chair-design-concept-reality-tablet_23-2152014657.jpg",
-          imageAlt: "Digital interface showing a product catalog",
-        },
         {
-          id: "hero-carousel-6",
+          id: "hero-carousel-6",          imageSrc: "https://i.imgur.com/1G6K2uK.jpg",          imageAlt: "Children playing near a bustling market stall in Mozambique"},
-          imageSrc: "http://img.b2bpic.net/free-photo/shopping-online-consumerism-connection-sale-concept_53876-124902.jpg",
-          imageAlt: "Smartphone displaying a shopping cart",
-        },
       ]}
     />
   </div>
@@ -123,15 +86,11 @@ export default function LandingPage() {
       useInvertedBackground={true}
       heading={[
         {
-          type: "text",
+          type: "text",          content: "Conectando Moçambique: Compre e Venda Facilmente."},
-          content: "Conectando Moçambique: Compre e Venda Facilmente.",
-        },
       ]}
       buttons={[
         {
-          text: "Saber Mais",
+          text: "Saber Mais",          href: "#"},
-          href: "#",
-        },
       ]}
     />
   </div>
@@ -144,29 +103,19 @@ export default function LandingPage() {
       features={[
         {
           icon: Users,
-          title: "Contas Flexíveis",
+          title: "Contas Flexíveis",          description: "Registo simplificado para Clientes e Vendedores, com perfis personalizados e gestão intuitiva."},
-          description: "Registo simplificado para Clientes e Vendedores, com perfis personalizados e gestão intuitiva.",
-        },
         {
           icon: Package,
-          title: "Gestão de Produtos",
+          title: "Gestão de Produtos",          description: "Vendedores podem adicionar e gerir facilmente os seus artigos, com controle de stock e categorização."},
-          description: "Vendedores podem adicionar e gerir facilmente os seus artigos, com controle de stock e categorização.",
-        },
         {
           icon: ShoppingCart,
-          title: "Carrinho Inteligente",
+          title: "Carrinho Inteligente",          description: "Adicione produtos aos favoritos e ao carrinho, garantindo uma experiência de compra conveniente e organizada."},
-          description: "Adicione produtos aos favoritos e ao carrinho, garantindo uma experiência de compra conveniente e organizada.",
-        },
         {
           icon: CreditCard,
-          title: "Pagamentos Seguros",
+          title: "Pagamentos Seguros",          description: "Um sistema de checkout transparente e seguro para todas as transações, com histórico detalhado de encomendas."},
-          description: "Um sistema de checkout transparente e seguro para todas as transações, com histórico detalhado de encomendas.",
-        },
         {
           icon: MessageSquare,
-          title: "Chat Integrado",
+          title: "Chat Integrado",          description: "Comunique diretamente com vendedores e clientes para esclarecer dúvidas e garantir a melhor experiência."},
-          description: "Comunique diretamente com vendedores e clientes para esclarecer dúvidas e garantir a melhor experiência.",
-        },
       ]}
       title="Tudo o que Precisa para uma Experiência de Compra e Venda Superior"
       description="A nossa plataforma foi desenhada para ser simples, segura e eficiente para todos. Desde a navegação até a entrega, cuidamos de cada detalhe."
@@ -181,47 +130,17 @@ export default function LandingPage() {
       useInvertedBackground={true}
       products={[
         {
-          id: "p-1",
+          id: "p-1",          name: "Capulana Moçambicana",          price: "MZ 850",          imageSrc: "http://img.b2bpic.net/free-photo/vibrant-yellow-orange-ribbons-hanging-public-art-installation_1308-189835.jpg",          imageAlt: "Traditional Mozambican Capulana fabric"},
-          name: "Capulana Moçambicana",
-          price: "MZ 850",
-          imageSrc: "http://img.b2bpic.net/free-photo/vibrant-yellow-orange-ribbons-hanging-public-art-installation_1308-189835.jpg",
-          imageAlt: "Traditional Mozambican Capulana fabric",
-        },
         {
-          id: "p-2",
+          id: "p-2",          name: "Manga Orgânica Fresca",          price: "MZ 150/Kg",          imageSrc: "http://img.b2bpic.net/free-photo/pink-pomegranate_1122-1230.jpg",          imageAlt: "Fresh organic mangoes from Mozambique"},
-          name: "Manga Orgânica Fresca",
-          price: "MZ 150/Kg",
-          imageSrc: "http://img.b2bpic.net/free-photo/pink-pomegranate_1122-1230.jpg",
-          imageAlt: "Fresh organic mangoes from Mozambique",
-        },
         {
-          id: "p-3",
+          id: "p-3",          name: "Vaso de Cerâmica Artesanal",          price: "MZ 1.200",          imageSrc: "http://img.b2bpic.net/free-photo/dried-flowers-vase-blue_169016-3973.jpg",          imageAlt: "Handmade ceramic pot with African design"},
-          name: "Vaso de Cerâmica Artesanal",
-          price: "MZ 1.200",
-          imageSrc: "http://img.b2bpic.net/free-photo/dried-flowers-vase-blue_169016-3973.jpg",
-          imageAlt: "Handmade ceramic pot with African design",
-        },
         {
-          id: "p-4",
+          id: "p-4",          name: "Escultura em Madeira Makonde",          price: "MZ 3.500",          imageSrc: "http://img.b2bpic.net/free-photo/temple-bangkok-thailand_53876-74930.jpg",          imageAlt: "Traditional Makonde wooden sculpture"},
-          name: "Escultura em Madeira Makonde",
-          price: "MZ 3.500",
-          imageSrc: "http://img.b2bpic.net/free-photo/temple-bangkok-thailand_53876-74930.jpg",
-          imageAlt: "Traditional Makonde wooden sculpture",
-        },
         {
-          id: "p-5",
+          id: "p-5",          name: "Auscultadores Bluetooth",          price: "MZ 2.500",          imageSrc: "http://img.b2bpic.net/free-photo/minimal-tech-setup-with-earbuds_58702-17248.jpg",          imageAlt: "Modern Bluetooth headphones"},
-          name: "Auscultadores Bluetooth",
-          price: "MZ 2.500",
-          imageSrc: "http://img.b2bpic.net/free-photo/minimal-tech-setup-with-earbuds_58702-17248.jpg",
-          imageAlt: "Modern Bluetooth headphones",
-        },
         {
-          id: "p-6",
+          id: "p-6",          name: "Colar de Contas Artesanal",          price: "MZ 600",          imageSrc: "http://img.b2bpic.net/free-photo/young-indian-woman-wearing-sari_23-2149400885.jpg",          imageAlt: "Handmade beaded necklace"},
-          name: "Colar de Contas Artesanal",
-          price: "MZ 600",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-indian-woman-wearing-sari_23-2149400885.jpg",
-          imageAlt: "Handmade beaded necklace",
-        },
       ]}
       title="Produtos em Destaque no Mini Chaleke"
       description="Explore a nossa seleção cuidadosamente escolhida de artigos mais populares e recentemente adicionados. Há sempre algo novo para descobrir!"
@@ -235,40 +154,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "t-1",
+          id: "t-1",          name: "Sara Joaquim",          role: "Cliente Verificada",          testimonial: "Adoro o Mini Chaleke! Encontrei produtos locais incríveis e o processo de compra é super fácil. Recomendo a todos!",          imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-businessman-showing-thumb-up_1262-3024.jpg"},
-          name: "Sara Joaquim",
-          role: "Cliente Verificada",
-          testimonial: "Adoro o Mini Chaleke! Encontrei produtos locais incríveis e o processo de compra é super fácil. Recomendo a todos!",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-businessman-showing-thumb-up_1262-3024.jpg",
-        },
         {
-          id: "t-2",
+          id: "t-2",          name: "Armando Pedro",          role: "Vendedor Local",          testimonial: "Graças ao Mini Chaleke, o meu negócio de artesanato alcançou muito mais clientes em Moçambique. A plataforma é intuitiva e o suporte é excelente!",          imageSrc: "http://img.b2bpic.net/free-photo/working-from-home-ergonomic-workstation_23-2149204619.jpg"},
-          name: "Armando Pedro",
-          role: "Vendedor Local",
-          testimonial: "Graças ao Mini Chaleke, o meu negócio de artesanato alcançou muito mais clientes em Moçambique. A plataforma é intuitiva e o suporte é excelente!",
-          imageSrc: "http://img.b2bpic.net/free-photo/working-from-home-ergonomic-workstation_23-2149204619.jpg",
-        },
         {
-          id: "t-3",
+          id: "t-3",          name: "Lúcia Manuel",          role: "Compradora Frequente",          testimonial: "Finalmente um marketplace que entende as necessidades do mercado moçambicano. Desde as capulanas aos produtos frescos, tudo com ótima qualidade!",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-happy-young-hopeful-guy-anticipating-something-good-happen-cross-fingers-good-lu_1258-109512.jpg"},
-          name: "Lúcia Manuel",
-          role: "Compradora Frequente",
-          testimonial: "Finalmente um marketplace que entende as necessidades do mercado moçambicano. Desde as capulanas aos produtos frescos, tudo com ótima qualidade!",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-happy-young-hopeful-guy-anticipating-something-good-happen-cross-fingers-good-lu_1258-109512.jpg",
-        },
         {
-          id: "t-4",
+          id: "t-4",          name: "João Baptista",          role: "Pequeno Empresário",          testimonial: "Pude expandir a minha loja de eletrônicos para todo o país com o Mini Chaleke. As funcionalidades de gestão de stock e pedidos são muito úteis.",          imageSrc: "http://img.b2bpic.net/free-photo/pensive-african-american-agent-contemplating-about-his-responsibility_482257-121270.jpg"},
-          name: "João Baptista",
-          role: "Pequeno Empresário",
-          testimonial: "Pude expandir a minha loja de eletrônicos para todo o país com o Mini Chaleke. As funcionalidades de gestão de stock e pedidos são muito úteis.",
-          imageSrc: "http://img.b2bpic.net/free-photo/pensive-african-american-agent-contemplating-about-his-responsibility_482257-121270.jpg",
-        },
         {
-          id: "t-5",
+          id: "t-5",          name: "Mariana Costa",          role: "Cliente Satisfeita",          testimonial: "A opção de chat direto com os vendedores fez toda a diferença! Consegui tirar todas as minhas dúvidas antes de comprar. Uma experiência fantástica.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-jacket-suit_1139-494.jpg"},
-          name: "Mariana Costa",
-          role: "Cliente Satisfeita",
-          testimonial: "A opção de chat direto com os vendedores fez toda a diferença! Consegui tirar todas as minhas dúvidas antes de comprar. Uma experiência fantástica.",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-with-jacket-suit_1139-494.jpg",
-        },
       ]}
       title="O Que os Nossos Utilizadores Dizem"
       description="A satisfação dos nossos clientes e vendedores é a nossa prioridade. Veja o que eles têm a dizer sobre a experiência Mini Chaleke."
@@ -280,14 +174,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       names={[
-        "Loja da Aldeia",
+        "Loja da Aldeia",        "Artesanato Macua",        "Produtos da Terra",        "Tech Solutions MZ",        "Moda Moçambique",        "Distribuidora Maputo",        "Sabores da Beira"]}
-        "Artesanato Macua",
-        "Produtos da Terra",
-        "Tech Solutions MZ",
-        "Moda Moçambique",
-        "Distribuidora Maputo",
-        "Sabores da Beira",
-      ]}
       title="Junte-se à Nossa Rede de Vendedores e Parceiros Locais"
       description="Apoie a economia local e expanda o seu negócio com o Mini Chaleke. Juntos, construímos um futuro mais próspero para Moçambique."
     />
@@ -296,23 +183,14 @@ export default function LandingPage() {
   <div id="faq" data-section="faq">
       <FaqSplitMedia
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       faqs={[
         {
-          id: "faq-1",
+          id: "faq-1",          title: "Como faço para criar uma conta de vendedor?",          content: "Para criar uma conta de vendedor, clique em 'Registar' e selecione a opção 'Vendedor'. Preencha os seus dados, incluindo o NUIT (Número Único de Identificação Tributária) e informações do seu negócio. A nossa equipa irá rever e aprovar o seu perfil rapidamente."},
-          title: "Como faço para criar uma conta de vendedor?",
-          content: "Para criar uma conta de vendedor, clique em 'Registar' e selecione a opção 'Vendedor'. Preencha os seus dados, incluindo o NUIT (Número Único de Identificação Tributária) e informações do seu negócio. A nossa equipa irá rever e aprovar o seu perfil rapidamente.",
-        },
         {
-          id: "faq-2",
+          id: "faq-2",          title: "Quais são as opções de pagamento disponíveis?",          content: "Aceitamos pagamentos via M-Pesa, E-Mola e cartões de débito/crédito (Visa/Mastercard). Todas as transações são seguras e protegidas pela nossa plataforma."},
-          title: "Quais são as opções de pagamento disponíveis?",
-          content: "Aceitamos pagamentos via M-Pesa, E-Mola e cartões de débito/crédito (Visa/Mastercard). Todas as transações são seguras e protegidas pela nossa plataforma.",
-        },
         {
-          id: "faq-3",
+          id: "faq-3",          title: "Como funciona a entrega dos produtos?",          content: "Os vendedores são responsáveis pela entrega dos produtos. No entanto, o Mini Chaleke oferece opções de acompanhamento para que possa monitorizar o estado da sua encomenda. Alguns vendedores podem oferecer entrega em domicílio ou recolha em ponto físico."},
-          title: "Como funciona a entrega dos produtos?",
-          content: "Os vendedores são responsáveis pela entrega dos produtos. No entanto, o Mini Chaleke oferece opções de acompanhamento para que possa monitorizar o estado da sua encomenda. Alguns vendedores podem oferecer entrega em domicílio ou recolha em ponto físico.",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/technology-technical-assistance-repair-conceopt_53876-165268.jpg"
       imageAlt="Customer support and FAQ illustration"
@@ -326,32 +204,21 @@ export default function LandingPage() {
 
   <div id="contact" data-section="contact">
       <ContactSplitForm
-      useInvertedBackground={true}
+      useInvertedBackground={false}
       title="Entre em Contacto"
       description="Tem alguma questão, sugestão ou precisa de apoio? A nossa equipa está pronta para ajudar. Preencha o formulário abaixo."
       inputs={[
         {
-          name: "name",
+          name: "name",          type: "text",          placeholder: "O seu nome completo",          required: true,
-          type: "text",
-          placeholder: "O seu nome completo",
-          required: true,
         },
         {
-          name: "email",
+          name: "email",          type: "email",          placeholder: "O seu e-mail",          required: true,
-          type: "email",
-          placeholder: "O seu e-mail",
-          required: true,
         },
         {
-          name: "subject",
+          name: "subject",          type: "text",          placeholder: "Assunto"},
-          type: "text",
-          placeholder: "Assunto",
-        },
       ]}
       textarea={{
-        name: "message",
+        name: "message",        placeholder: "A sua mensagem...",        rows: 4,
-        placeholder: "A sua mensagem...",
-        rows: 4,
         required: true,
       }}
       imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-working-office-travel-agency_23-2150433331.jpg"
@@ -369,28 +236,20 @@ export default function LandingPage() {
       socialLinks={[
         {
           icon: Facebook,
-          href: "#",
+          href: "#",          ariaLabel: "Facebook"},
-          ariaLabel: "Facebook",
-        },
         {
           icon: Instagram,
-          href: "#",
+          href: "#",          ariaLabel: "Instagram"},
-          ariaLabel: "Instagram",
-        },
         {
           icon: Twitter,
-          href: "#",
+          href: "#",          ariaLabel: "Twitter"},
-          ariaLabel: "Twitter",
-        },
         {
           icon: Linkedin,
-          href: "#",
+          href: "#",          ariaLabel: "LinkedIn"},
-          ariaLabel: "LinkedIn",
-        },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #e3deea;
+  --background: #f8f8f8;
   --card: #ffffff;
-  --foreground: #27231f;
+  --foreground: #1a1a1a;
-  --primary-cta: #27231f;
+  --primary-cta: #006633;
-  --primary-cta-text: #e3deea;
+  --primary-cta-text: #FFFFFF;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #CC0000;
-  --secondary-cta-text: #27231f;
+  --secondary-cta-text: #FFFFFF;
-  --accent: #c68a62;
+  --accent: #FFD700;
-  --background-accent: #c68a62;
+  --background-accent: #e6e6e6;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);