Add src/app/support/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -18,38 +18,23 @@ export default function LandingPage() {
         defaultButtonVariant="text-shift"
         defaultTextAnimation="entrance-slide"
         borderRadius="rounded"
-        contentWidth="mediumSmall"
-        sizing="mediumLargeSizeMediumTitles"
-        background="fluid"
-        cardStyle="gradient-radial"
-        primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="solid"
-        headingFontWeight="normal"
+        contentWidth="medium"
+        sizing="largeSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Início",
-          id: "hero",
-        },
-        {
-          name: "Sobre",
-          id: "about",
-        },
-        {
-          name: "Vantagens",
-          id: "features",
-        },
-        {
-          name: "Planos",
-          id: "pricing",
-        },
-        {
-          name: "Suporte",
-          id: "contact",
-        },
+        { name: "Início", id: "hero" },
+        { name: "Sobre", id: "about" },
+        { name: "Vantagens", id: "features" },
+        { name: "Planos", id: "pricing" },
+        { name: "Suporte", id: "/support" },
       ]}
       brandName="InvestFlow"
     />
@@ -57,20 +42,12 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
-      background={{
-        variant: "gradient-bars",
-      }}
+      background={{ variant: "sparkles-gradient" }}
       logoText="InvestFlow"
       description="Faça seu dinheiro render com segurança e facilidade. A plataforma definitiva para seus investimentos inteligentes."
       buttons={[
-        {
-          text: "Começar Agora",
-          href: "#pricing",
-        },
-        {
-          text: "Suporte",
-          href: "#contact",
-        },
+        { text: "Começar Agora", href: "#pricing" },
+        { text: "Suporte", href: "/support" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/office-workers-using-finance-graphs_23-2150408681.jpg?_wi=1"
       mediaAnimation="slide-up"
@@ -79,12 +56,10 @@ export default function LandingPage() {
 
   <div id="about" data-section="about">
       <TextSplitAbout
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       title="Sobre Nós"
       description={[
-        "O InvestFlow nasceu para simplificar o mercado financeiro. Nossa tecnologia permite que qualquer pessoa, iniciante ou especialista, possa investir com retornos consistentes.",
-        "Combinamos análise de dados avançada com uma interface intuitiva para garantir que você tome as melhores decisões para o seu futuro patrimonial.",
-      ]}
+        "O InvestFlow nasceu para simplificar o mercado financeiro. Nossa tecnologia permite que qualquer pessoa, iniciante ou especialista, possa investir com retornos consistentes.",        "Combinamos análise de dados avançada com uma interface intuitiva para garantir que você tome as melhores decisões para o seu futuro patrimonial."]}
     />
   </div>
 
@@ -92,33 +67,13 @@ export default function LandingPage() {
       <FeatureBorderGlow
       animationType="slide-up"
       textboxLayout="default"
-      useInvertedBackground={true}
+      useInvertedBackground={false}
       features={[
-        {
-          icon: Shield,
-          title: "Segurança Total",
-          description: "Protocolos de criptografia de nível bancário para proteger seu capital.",
-        },
-        {
-          icon: Zap,
-          title: "Saques Instantâneos",
-          description: "Acesso rápido e sem burocracia ao seu saldo 24 horas por dia.",
-        },
-        {
-          icon: TrendingUp,
-          title: "Rentabilidade Real",
-          description: "Algoritmos de otimização automática baseados no seu perfil de risco.",
-        },
-        {
-          icon: LineChart,
-          title: "Relatórios Detalhados",
-          description: "Visualize o crescimento do seu portfólio com gráficos precisos.",
-        },
-        {
-          icon: Globe,
-          title: "Acesso Global",
-          description: "Diversifique seu patrimônio com ativos do mercado mundial.",
-        },
+        { icon: Shield, title: "Segurança Total", description: "Protocolos de criptografia de nível bancário para proteger seu capital." },
+        { icon: Zap, title: "Saques Instantâneos", description: "Acesso rápido e sem burocracia ao seu saldo 24 horas por dia." },
+        { icon: TrendingUp, title: "Rentabilidade Real", description: "Algoritmos de otimização automática baseados no seu perfil de risco." },
+        { icon: LineChart, title: "Relatórios Detalhados", description: "Visualize o crescimento do seu portfólio com gráficos precisos." },
+        { icon: Globe, title: "Acesso Global", description: "Diversifique seu patrimônio com ativos do mercado mundial." },
       ]}
       title="Por que escolher o InvestFlow?"
       description="Oferecemos ferramentas de ponta para otimizar seu patrimônio com total transparência."
@@ -129,56 +84,11 @@ export default function LandingPage() {
       <PricingCardNine
       animationType="slide-up"
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       plans={[
-        {
-          id: "basic",
-          title: "Iniciante",
-          price: "R$ 100",
-          period: "/mês",
-          features: [
-            "Rentabilidade básica",
-            "Suporte padrão",
-            "Relatórios mensais",
-          ],
-          button: {
-            text: "Assinar",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/office-workers-using-finance-graphs_23-2150408681.jpg?_wi=2",
-          imageAlt: "financial dashboard UI modern",
-        },
-        {
-          id: "pro",
-          title: "Profissional",
-          price: "R$ 500",
-          period: "/mês",
-          features: [
-            "Rentabilidade premium",
-            "Consultoria 24h",
-            "Relatórios em tempo real",
-          ],
-          button: {
-            text: "Assinar",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/financial-application-ui-pc-screen-showing-company-revenue_482257-119232.jpg",
-          imageAlt: "minimal office desk technology",
-        },
-        {
-          id: "enterprise",
-          title: "Enterprise",
-          price: "R$ 2000",
-          period: "/mês",
-          features: [
-            "Gerente dedicado",
-            "Segurança máxima",
-            "Suporte prioritário",
-          ],
-          button: {
-            text: "Assinar",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/credit-card-security-concept_53876-32060.jpg",
-          imageAlt: "security shield finance icon",
-        },
+        { id: "basic", title: "Iniciante", price: "R$ 100", period: "/mês", features: ["Rentabilidade básica", "Suporte padrão", "Relatórios mensais"], button: { text: "Assinar" }, imageSrc: "http://img.b2bpic.net/free-photo/office-workers-using-finance-graphs_23-2150408681.jpg?_wi=2" },
+        { id: "pro", title: "Profissional", price: "R$ 500", period: "/mês", features: ["Rentabilidade premium", "Consultoria 24h", "Relatórios em tempo real"], button: { text: "Assinar" }, imageSrc: "http://img.b2bpic.net/free-photo/financial-application-ui-pc-screen-showing-company-revenue_482257-119232.jpg" },
+        { id: "enterprise", title: "Enterprise", price: "R$ 2000", period: "/mês", features: ["Gerente dedicado", "Segurança máxima", "Suporte prioritário"], button: { text: "Assinar" }, imageSrc: "http://img.b2bpic.net/free-photo/credit-card-security-concept_53876-32060.jpg" },
       ]}
       title="Escolha seu plano"
       description="Comece com o que melhor se adapta ao seu objetivo."
@@ -188,33 +98,11 @@ export default function LandingPage() {
   <div id="faq" data-section="faq">
       <FaqSplitMedia
       textboxLayout="split"
-      useInvertedBackground={true}
+      useInvertedBackground={false}
       faqs={[
-        {
-          id: "1",
-          title: "Como faço para sacar?",
-          content: "Basta solicitar via app e o valor cai na sua conta em até 24h.",
-        },
-        {
-          id: "2",
-          title: "O dinheiro rende diariamente?",
-          content: "Sim, a rentabilidade é calculada diariamente sobre o saldo investido.",
-        },
-        {
-          id: "3",
-          title: "É seguro?",
-          content: "Somos certificados por órgãos de regulação financeira e auditados constantemente.",
-        },
-        {
-          id: "4",
-          title: "Posso começar com pouco?",
-          content: "Sim, nossos planos começam com aportes acessíveis para todos.",
-        },
-        {
-          id: "5",
-          title: "Como recebo relatórios?",
-          content: "Enviamos relatórios mensais via e-mail e disponibilizamos no app.",
-        },
+        { id: "1", title: "Como faço para sacar?", content: "Basta solicitar via app e o valor cai na sua conta em até 24h." },
+        { id: "2", title: "O dinheiro rende diariamente?", content: "Sim, a rentabilidade é calculada diariamente sobre o saldo investido." },
+        { id: "3", title: "É seguro?", content: "Somos certificados por órgãos de regulação financeira e auditados constantemente." },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/woman-having-video-call-home-laptop-with-headset_23-2150764761.jpg"
       title="Perguntas Frequentes"
@@ -226,18 +114,13 @@ export default function LandingPage() {
 
   <div id="contact" data-section="contact">
       <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
+      useInvertedBackground={true}
+      background={{ variant: "radial-gradient" }}
       tag="Suporte"
-      title="Precisa de ajuda?"
-      description="Nossa equipe de suporte está disponível 24h por dia para auxiliar você."
+      title="Precisa de ajuda agora?"
+      description="Nossa equipe está pronta para lhe atender. Visite nossa central de suporte para opções rápidas."
       buttons={[
-        {
-          text: "Falar com suporte",
-          href: "mailto:suporte@investflow.com",
-        },
+        { text: "Acessar Suporte", href: "/support" },
       ]}
     />
   </div>
@@ -245,14 +128,8 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="InvestFlow"
-      leftLink={{
-        text: "Política de Privacidade",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Termos de Uso",
-        href: "#",
-      }}
+      leftLink={{ text: "Política de Privacidade", href: "#" }}
+      rightLink={{ text: "Termos de Uso", href: "#" }}
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -13,12 +13,12 @@
   --background: #ffffff;
   --card: #f9f9f9;
   --foreground: #000612e6;
-  --primary-cta: #106EFB;
+  --primary-cta: #15479c;
   --primary-cta-text: #ffffff;
   --secondary-cta: #f9f9f9;
   --secondary-cta-text: #000612e6;
   --accent: #e2e2e2;
-  --background-accent: #106EFB;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/support/page.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FaqBase from '@/components/sections/faq/FaqBase';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { MessageSquare, Mail, HelpCircle } from "lucide-react";
+import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
+
+export default function SupportPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="largeSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="layered"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Início", id: "/" },
+              { name: "Suporte", id: "/support" },
+            ]}
+            brandName="InvestFlow"
+          />
+        </div>
+
+        <div id="hero" data-section="hero">
+          <FeatureBorderGlow
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            features={[
+              { icon: MessageSquare, title: "Chat ao Vivo", description: "Fale com um de nossos consultores em tempo real para resoluções rápidas." },
+              { icon: Mail, title: "E-mail de Suporte", description: "Envie sua dúvida detalhada para suporte@investflow.com e responderemos em breve." },
+              { icon: HelpCircle, title: "Central de Ajuda", description: "Explore nosso banco de conhecimentos e guias detalhados sobre nossos serviços." },
+            ]}
+            title="Central de Suporte InvestFlow"
+            description="Escolha a melhor maneira de falar conosco. Estamos aqui para ajudar 24/7."
+          />
+        </div>
+
+        <div id="faq" data-section="faq">
+          <FaqBase
+            textboxLayout="default"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "1", title: "Como recuperar minha senha?", content: "Utilize a opção 'Esqueci minha senha' na tela de login do app." },
+              { id: "2", title: "Como atualizar meus dados bancários?", content: "Vá até as configurações de perfil e selecione 'Dados Bancários'." },
+              { id: "3", title: "Qual o prazo para depósitos?", content: "Depósitos via PIX são processados instantaneamente." },
+            ]}
+            title="Dúvidas frequentes"
+            description="Respostas rápidas para os problemas mais comuns dos nossos clientes."
+            faqsAnimation="slide-up"
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            useInvertedBackground={true}
+            background={{ variant: "radial-gradient" }}
+            tag="Contato Direto"
+            title="Ainda precisa de auxílio?"
+            description="Não encontrou o que procurava? Nossa equipe humana está pronta para ajudar via e-mail."
+            buttons={[
+              { text: "Enviar e-mail", href: "mailto:suporte@investflow.com" },
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="InvestFlow"
+            leftLink={{ text: "Privacidade", href: "#" }}
+            rightLink={{ text: "Termos", href: "#" }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}