Update src/app/page.tsx

Merge version_8 into main

src/app/page.tsx

@@ -12,6 +12,14 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 
 export default function LandingPage() {
+  const handleScroll = (id: string) => {
+    const sanitizedId = id.startsWith('#') ? id : `#${id}`;
+    const element = document.querySelector(sanitizedId);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="expand-hover"
@@ -29,47 +37,33 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Ecossistema", id: "ecossistema" },
-          name: "Ecossistema",          id: "#ecossistema"},
+        { name: "Nossa Força", id: "forca" },
-        {
+        { name: "Carreiras", id: "carreiras" },
-          name: "Nossa Força",          id: "#forca"},
+        { name: "Contato", id: "contato" },
-        {
-          name: "Carreiras",          id: "#carreiras"},
-        {
-          name: "Contato",          id: "#contato"},
       ]}
-      button={{
+      button={{ text: "Trabalhe Conosco", onClick: () => window.open("https://inhire.com.br", "_blank") }}
-        text: "Trabalhe Conosco",        href: "https://inhire.com.br"}}
       brandName="PROATIVA CAPITAL"
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboardCarousel
-      background={{
+      background={{ variant: "canvas-reveal" }}
-        variant: "canvas-reveal"}}
       title="Inteligência que conecta. Operação que sustenta. Proteção que blinda."
       description="Não somos apenas investidores. Somos o cérebro operacional de um ecossistema com mais de 30 anos de lastro real — onde gestão, logística e inteligência jurídica trabalham como um só organismo."
       tag="HOLDING OPERACIONAL • BPO • CENTRO DE SERVIÇOS"
       buttons={[
-        {
+        { text: "Explore nosso ecossistema", onClick: () => handleScroll("ecossistema") },
-          text: "Explore Our Ecosystem",          href: "#ecossistema"},
+        { text: "Ver vagas abertas", onClick: () => handleScroll("carreiras") },
-        {
-          text: "View Open Positions",          href: "#carreiras"},
       ]}
       mediaItems={[
-        {
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BvTbQ6632znbLsaKaGRmU4D1rf/interactive-3d-neural-network-nodes-on-d-1775369577362-724adacf.png?_wi=1", imageAlt: "Hero background particles" },
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BvTbQ6632znbLsaKaGRmU4D1rf/interactive-3d-neural-network-nodes-on-d-1775369577362-724adacf.png?_wi=1",          imageAlt: "Hero background particles"},
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BvTbQ6632znbLsaKaGRmU4D1rf/interactive-3d-neural-network-nodes-on-d-1775369577362-724adacf.png?_wi=2", imageAlt: "Hero background particles" },
-        {
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BvTbQ6632znbLsaKaGRmU4D1rf/interactive-3d-neural-network-nodes-on-d-1775369577362-724adacf.png?_wi=3", imageAlt: "Hero background particles" },
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BvTbQ6632znbLsaKaGRmU4D1rf/interactive-3d-neural-network-nodes-on-d-1775369577362-724adacf.png?_wi=2",          imageAlt: "Hero background particles"},
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BvTbQ6632znbLsaKaGRmU4D1rf/interactive-3d-neural-network-nodes-on-d-1775369577362-724adacf.png?_wi=4", imageAlt: "Hero background particles" },
-        {
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BvTbQ6632znbLsaKaGRmU4D1rf/interactive-3d-neural-network-nodes-on-d-1775369577362-724adacf.png?_wi=5", imageAlt: "Hero background particles" },
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BvTbQ6632znbLsaKaGRmU4D1rf/interactive-3d-neural-network-nodes-on-d-1775369577362-724adacf.png?_wi=3",          imageAlt: "Hero background particles"},
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BvTbQ6632znbLsaKaGRmU4D1rf/interactive-3d-neural-network-nodes-on-d-1775369577362-724adacf.png?_wi=6", imageAlt: "Hero background particles" },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BvTbQ6632znbLsaKaGRmU4D1rf/interactive-3d-neural-network-nodes-on-d-1775369577362-724adacf.png?_wi=4",          imageAlt: "Hero background particles"},
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BvTbQ6632znbLsaKaGRmU4D1rf/interactive-3d-neural-network-nodes-on-d-1775369577362-724adacf.png?_wi=5",          imageAlt: "Hero background particles"},
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BvTbQ6632znbLsaKaGRmU4D1rf/interactive-3d-neural-network-nodes-on-d-1775369577362-724adacf.png?_wi=6",          imageAlt: "Hero background particles"},
       ]}
     />
   </div>
@@ -78,8 +72,7 @@ export default function LandingPage() {
       <SocialProofOne
       textboxLayout="default"
       useInvertedBackground={false}
-      names={[
+      names={["Proativa Capital", "GLP Gás", "Simeão Advogados"]}
-        "Proativa Capital",        "GLP Gás",        "Simeão Advogados"]}
       title="Empresas do Ecossistema"
       description="Marcas que integram nossa força operacional."
     />
@@ -91,24 +84,13 @@ export default function LandingPage() {
       textboxLayout="split-description"
       useInvertedBackground={true}
       features={[
-        {
+        { id: "pc", title: "Proativa Capital", tags: ["BPO", "Gestão", "Governança"], imageAlt: "Proativa Capital", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BvTbQ6632znbLsaKaGRmU4D1rf/interactive-3d-neural-network-nodes-on-d-1775369577362-724adacf.png?_wi=7" },
-          id: "pc",          title: "Proativa Capital",          tags: [
+        { id: "glp", title: "GLP Gás", tags: ["Logística", "Operação 24/7", "+30 Anos"], imageAlt: "GLP Gás", imageSrc: "http://img.b2bpic.net/free-photo/front-view-worker-uniform-with-protective-gloves-handling-forklift_23-2148773474.jpg" },
-            "BPO",            "Gestão",            "Governança"],
+        { id: "sa", title: "Simeão Advogados", tags: ["Jurídico", "Compliance", "Blindagem"], imageAlt: "Simeão Advogados", imageSrc: "http://img.b2bpic.net/free-vector/luxury-hand-drawn-logos-with-letter_23-2147540524.jpg" },
-          imageAlt: "Proativa Capital",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BvTbQ6632znbLsaKaGRmU4D1rf/interactive-3d-neural-network-nodes-on-d-1775369577362-724adacf.png?_wi=7"},
-        {
-          id: "glp",          title: "GLP Gás",          tags: [
-            "Logística",            "Operação 24/7",            "+30 Anos"],
-          imageAlt: "GLP Gás",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-worker-uniform-with-protective-gloves-handling-forklift_23-2148773474.jpg"},
-        {
-          id: "sa",          title: "Simeão Advogados",          tags: [
-            "Jurídico",            "Compliance",            "Blindagem"],
-          imageAlt: "Simeão Advogados",          imageSrc: "http://img.b2bpic.net/free-vector/luxury-hand-drawn-logos-with-letter_23-2147540524.jpg"},
       ]}
       title="Um ecossistema. Três forças integradas."
       description="Cada empresa opera com identidade própria, mas funciona como parte de um organismo único."
-      buttons={[
+      buttons={[{ text: "Conheça Detalhes", onClick: () => {} }]}
-        { text: "Conheça Detalhes", href: "#" }
-      ]}
     />
   </div>
 
@@ -118,14 +100,10 @@ export default function LandingPage() {
       title="A força em números"
       tag="Resultados Tangíveis"
       metrics={[
-        {
+        { id: "m1", value: "30+", description: "Anos de Operação" },
-          id: "m1",          value: "30+",          description: "Anos de Operação"},
+        { id: "m2", value: "500+", description: "Colaboradores" },
-        {
+        { id: "m3", value: "3", description: "Empresas Integradas" },
-          id: "m2",          value: "500+",          description: "Colaboradores"},
+        { id: "m4", value: "24/7", description: "Operação Contínua" },
-        {
-          id: "m3",          value: "3",          description: "Empresas Integradas"},
-        {
-          id: "m4",          value: "24/7",          description: "Operação Contínua"},
       ]}
       metricsAnimation="slide-up"
     />
@@ -135,8 +113,7 @@ export default function LandingPage() {
       <TextSplitAbout
       useInvertedBackground={true}
       title="Crescimento real em uma estrutura sólida."
-      description={[
+      description={["Desenvolvimento Acelerado, Governança de Verdade, Impacto Tangível, Ecossistema Integrado."]}
-        "Desenvolvimento Acelerado, Governança de Verdade, Impacto Tangível, Ecossistema Integrado."]}
     />
   </div>
 
@@ -146,53 +123,22 @@ export default function LandingPage() {
       title="Construa sua carreira no ecossistema Proativa."
       description="Selecione a oportunidade que combina com seu perfil em nosso portal de vagas."
       inputs={[
-        {
+        { name: "name", type: "text", placeholder: "Seu Nome Completo" },
-          name: "name",          type: "text",          placeholder: "Seu Nome Completo"},
+        { name: "email", type: "email", placeholder: "Seu E-mail" },
-        {
-          name: "email",          type: "email",          placeholder: "Seu E-mail"},
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BvTbQ6632znbLsaKaGRmU4D1rf/professional-diverse-corporate-team-coll-1775369575929-65dc04f8.png"
       buttonText="Acessar Portal de Vagas"
+      onSubmit={() => { window.location.href = "https://inhire.com.br"; }}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBase
       columns={[
-        {
+        { title: "Marca", items: [{ label: "Sobre Nós", href: "#" }, { label: "Compliance", href: "#" }] },
-          title: "Marca",          items: [
+        { title: "Navegação", items: [{ label: "Ecossistema", onClick: () => handleScroll("ecossistema") }, { label: "Carreiras", onClick: () => handleScroll("carreiras") }] },
-            {
+        { title: "Ecossistema", items: [{ label: "Proativa Capital", href: "#" }, { label: "GLP Gás", href: "#" }, { label: "Simeão Advogados", href: "#" }] },
-              label: "Sobre Nós",              href: "#"},
+        { title: "Contato", items: [{ label: "LinkedIn", href: "#" }, { label: "Instagram", href: "#" }] },
-            {
-              label: "Compliance",              href: "#"},
-          ],
-        },
-        {
-          title: "Navegação",          items: [
-            {
-              label: "Ecossistema",              href: "#ecossistema"},
-            {
-              label: "Carreiras",              href: "#carreiras"},
-          ],
-        },
-        {
-          title: "Ecossistema",          items: [
-            {
-              label: "Proativa Capital",              href: "#"},
-            {
-              label: "GLP Gás",              href: "#"},
-            {
-              label: "Simeão Advogados",              href: "#"},
-          ],
-        },
-        {
-          title: "Contato",          items: [
-            {
-              label: "LinkedIn",              href: "#"},
-            {
-              label: "Instagram",              href: "#"},
-          ],
-        },
       ]}
       logoText="PROATIVA CAPITAL"
     />

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0B1D3A;
+  --background: #ffffff;
   --card: #f9f9f9;
-  --foreground: #ffffff;
+  --foreground: #000612e6;
-  --primary-cta: #1A56DB;
+  --primary-cta: #15479c;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #0B1D3A;
+  --secondary-cta-text: #000612e6;
-  --accent: #B8860B;
+  --accent: #e2e2e2;
-  --background-accent: #070E1A;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);