Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,14 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureBento from '@/components/sections/feature/FeatureBento';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import { DollarSign, ShieldCheck, TrendingUp } from "lucide-react";
+import { DollarSign, ShieldCheck, TrendingUp, Mail, Send, User } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -29,14 +29,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "Início", id: "hero" },
-          name: "Início",          id: "hero"},
+        { name: "Sobre", id: "about" },
-        {
+        { name: "Diferenciais", id: "features" },
-          name: "Como Funciona",          id: "about"},
+        { name: "FAQ", id: "faq" },
-        {
+        { name: "Contato", id: "contact" },
-          name: "Benefícios",          id: "features"},
-        {
-          name: "FAQ",          id: "faq"},
       ]}
       brandName="AfiliadoPro"
     />
@@ -44,27 +41,17 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardRotatedCarousel
-      background={{
+      background={{ variant: "rotated-rays-animated" }}
-        variant: "rotated-rays-animated"}}
       title="Domine as Vendas como Afiliado Shopee"
       description="Aprenda o passo a passo completo para transformar seu celular em uma máquina de vendas com o marketing de afiliados."
-      buttons={[
+      buttons={[{ text: "Começar Agora", href: "#about" }]}
-        {
-          text: "Começar Agora",          href: "#about"},
-      ]}
       carouselItems={[
-        {
+        { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994395.jpg?_wi=1" },
-          id: "1",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994395.jpg?_wi=1",          imageAlt: "Hero 1"},
+        { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994395.jpg?_wi=2" },
-        {
+        { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994395.jpg?_wi=3" },
-          id: "2",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994395.jpg?_wi=2",          imageAlt: "Hero 2"},
+        { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994395.jpg?_wi=4" },
-        {
+        { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994395.jpg?_wi=5" },
-          id: "3",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994395.jpg?_wi=3",          imageAlt: "Hero 3"},
+        { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994395.jpg?_wi=6" },
-        {
-          id: "4",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994395.jpg?_wi=4",          imageAlt: "Hero 4"},
-        {
-          id: "5",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994395.jpg?_wi=5",          imageAlt: "Hero 5"},
-        {
-          id: "6",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994395.jpg?_wi=6",          imageAlt: "Hero 6"},
       ]}
     />
   </div>
@@ -73,12 +60,9 @@ export default function LandingPage() {
       <InlineImageSplitTextAbout
       useInvertedBackground={false}
       heading={[
-        {
+        { type: "text", content: "O que é o Marketing de " },
-          type: "text",          content: "O que é o Marketing de "},
+        { type: "image", src: "http://img.b2bpic.net/free-photo/business-shopping-situation-idea-concept_1421-624.jpg", alt: "Afiliado" },
-        {
+        { type: "text", content: " Afiliado?" },
-          type: "image",          src: "http://img.b2bpic.net/free-photo/business-shopping-situation-idea-concept_1421-624.jpg",          alt: "Afiliado"},
-        {
-          type: "text",          content: " Afiliado?"},
       ]}
     />
   </div>
@@ -89,15 +73,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       features={[
-        {
+        { title: "Comissões Atrativas", description: "Receba por cada venda realizada através do seu link exclusivo.", bentoComponent: "reveal-icon", icon: DollarSign },
-          title: "Comissões Atrativas",          description: "Receba por cada venda realizada através do seu link exclusivo.",          bentoComponent: "reveal-icon",          icon: DollarSign,
+        { title: "Crescimento Rápido", description: "Aproveite a enorme base de usuários da plataforma para escalar seus resultados.", bentoComponent: "reveal-icon", icon: TrendingUp },
-        },
+        { title: "Segurança Total", description: "Sistema confiável com pagamentos garantidos e suporte ao parceiro.", bentoComponent: "reveal-icon", icon: ShieldCheck },
-        {
-          title: "Crescimento Rápido",          description: "Aproveite a enorme base de usuários da plataforma para escalar seus resultados.",          bentoComponent: "reveal-icon",          icon: TrendingUp,
-        },
-        {
-          title: "Segurança Total",          description: "Sistema confiável com pagamentos garantidos e suporte ao parceiro.",          bentoComponent: "reveal-icon",          icon: ShieldCheck,
-        },
       ]}
       title="Por que escolher a Shopee?"
       description="Descubra as vantagens do programa de afiliados que mais cresce no Brasil."
@@ -109,12 +87,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       faqs={[
-        {
+        { id: "1", title: "É preciso pagar para ser afiliado?", content: "Não, o programa de afiliados da Shopee é totalmente gratuito." },
-          id: "1",          title: "É preciso pagar para ser afiliado?",          content: "Não, o programa de afiliados da Shopee é totalmente gratuito."},
+        { id: "2", title: "Como recebo minhas comissões?", content: "Os pagamentos são realizados via conta bancária vinculada ao seu perfil de afiliado." },
-        {
+        { id: "3", title: "Preciso ter muitos seguidores?", content: "Não é necessário, mas ter uma audiência ajuda a converter mais rápido." },
-          id: "2",          title: "Como recebo minhas comissões?",          content: "Os pagamentos são realizados via conta bancária vinculada ao seu perfil de afiliado."},
-        {
-          id: "3",          title: "Preciso ter muitos seguidores?",          content: "Não é necessário, mas ter uma audiência ajuda a converter mais rápido."},
       ]}
       title="Perguntas Frequentes"
       description="Tire suas dúvidas antes de começar."
@@ -123,39 +98,24 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
+      <ContactSplitForm
-      useInvertedBackground={true}
+      title="Fale Conosco"
-      background={{
+      description="Estamos aqui para ajudar você a dar os próximos passos na sua jornada."
-        variant: "sparkles-gradient"}}
+      inputs={[
-      tag="Suporte"
+        { name: "nome", type: "text", placeholder: "Seu nome" },
-      title="Pronto para sua primeira venda?"
+        { name: "email", type: "email", placeholder: "Seu melhor e-mail" },
-      description="Junte-se a milhares de afiliados e comece sua jornada hoje mesmo."
-      buttons={[
-        {
-          text: "Quero me Afiliar",          href: "#"},
       ]}
+      textarea={{ name: "mensagem", placeholder: "Como podemos ajudar?" }}
+      useInvertedBackground={true}
+      imageSrc="http://img.b2bpic.net/free-photo/contact-us-support-customer-service-concept_23-2150994411.jpg"
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
-        {
+        { title: "Companhia", items: [{ label: "Sobre", href: "#about" }, { label: "Blog", href: "#" }] },
-          title: "Companhia",          items: [
+        { title: "Legal", items: [{ label: "Privacidade", href: "#" }, { label: "Termos", href: "#" }] },
-            {
-              label: "Sobre",              href: "#about"},
-            {
-              label: "Blog",              href: "#"},
-          ],
-        },
-        {
-          title: "Legal",          items: [
-            {
-              label: "Privacidade",              href: "#"},
-            {
-              label: "Termos",              href: "#"},
-          ],
-        },
       ]}
       bottomLeftText="© 2024 AfiliadoPro"
       bottomRightText="Todos os direitos reservados."
@@ -164,4 +124,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}