Merge version_2 into main #4
298
src/app/dashboard/page.tsx
Normal file
298
src/app/dashboard/page.tsx
Normal file
@@ -0,0 +1,298 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { useState, useEffect } from "react";
|
||||
import { CheckCircle, Clock, Settings, MessageSquare, Mic, Volume2, Edit2, Save, X } from "lucide-react";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [daysRemaining, setDaysRemaining] = useState(7);
|
||||
const [isEditingCompany, setIsEditingCompany] = useState(false);
|
||||
const [companyName, setCompanyName] = useState("Minha Empresa");
|
||||
const [industry, setIndustry] = useState("Varejo");
|
||||
const [website, setWebsite] = useState("");
|
||||
const [instagram, setInstagram] = useState("");
|
||||
const [whatsapp, setWhatsapp] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
|
||||
const navItems = [
|
||||
{ name: "Recursos", id: "features" },
|
||||
{ name: "Preços", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setDaysRemaining(prev => {
|
||||
if (prev <= 1) {
|
||||
clearInterval(timer);
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 86400000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="plain"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="WhatsAppAI"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Sair", href: "/"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-background py-20 px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold text-foreground mb-2">Dashboard</h1>
|
||||
<p className="text-foreground/60">Gerenciar seu agente IA e configurações</p>
|
||||
</div>
|
||||
|
||||
{/* Trial Status */}
|
||||
<div className="bg-card rounded-2xl p-6 mb-8 shadow-lg border border-accent">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-2">Status do Teste Grátis</h2>
|
||||
<p className="text-foreground/60 mb-4">Você tem acesso completo a todos os recursos</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock size={20} className="text-primary-cta" />
|
||||
<span className="text-lg font-semibold text-foreground">
|
||||
{daysRemaining} dia{daysRemaining !== 1 ? 's' : ''} restante{daysRemaining !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="w-32 h-32 rounded-full bg-gradient-to-br from-primary-cta to-primary-cta/50 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-white">{daysRemaining}</div>
|
||||
<div className="text-sm text-white/80">dias</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Agent Status */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-card rounded-2xl p-6 shadow-lg border border-accent">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<CheckCircle size={24} className="text-green-500" />
|
||||
<h3 className="text-lg font-semibold text-foreground">Status do Agente</h3>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-green-500">Online</p>
|
||||
<p className="text-sm text-foreground/60 mt-2">Pronto para atender</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-2xl p-6 shadow-lg border border-accent">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<MessageSquare size={24} className="text-blue-500" />
|
||||
<h3 className="text-lg font-semibold text-foreground">Conversas Hoje</h3>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-blue-500">24</p>
|
||||
<p className="text-sm text-foreground/60 mt-2">De 500/mês</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-2xl p-6 shadow-lg border border-accent">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Volume2 size={24} className="text-purple-500" />
|
||||
<h3 className="text-lg font-semibold text-foreground">Voz Clonada</h3>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-purple-500">Ativa</p>
|
||||
<p className="text-sm text-foreground/60 mt-2">Pronta para usar</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Company Configuration */}
|
||||
<div className="bg-card rounded-2xl p-6 shadow-lg border border-accent">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Settings size={24} className="text-primary-cta" />
|
||||
<h2 className="text-2xl font-bold text-foreground">Configuração da Empresa</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsEditingCompany(!isEditingCompany)}
|
||||
className="flex items-center gap-2 bg-primary-cta text-primary-cta-text px-4 py-2 rounded-lg hover:opacity-90 transition"
|
||||
>
|
||||
{isEditingCompany ? (
|
||||
<>
|
||||
<X size={18} />
|
||||
Cancelar
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Edit2 size={18} />
|
||||
Editar
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!isEditingCompany ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">Nome da Empresa</p>
|
||||
<p className="text-lg font-semibold text-foreground">{companyName}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">Ramo de Negócio</p>
|
||||
<p className="text-lg font-semibold text-foreground">{industry}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">Website</p>
|
||||
<p className="text-lg font-semibold text-foreground text-primary-cta">
|
||||
{website || "Não configurado"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">Instagram</p>
|
||||
<p className="text-lg font-semibold text-foreground text-primary-cta">
|
||||
{instagram || "Não configurado"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">WhatsApp</p>
|
||||
<p className="text-lg font-semibold text-foreground text-primary-cta">
|
||||
{whatsapp || "Não configurado"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<p className="text-sm text-foreground/60 mb-1">Descrição</p>
|
||||
<p className="text-lg font-semibold text-foreground">
|
||||
{description || "Nenhuma descrição adicionada"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<form className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Nome da Empresa
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={companyName}
|
||||
onChange={(e) => setCompanyName(e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Ramo de Negócio
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={industry}
|
||||
onChange={(e) => setIndustry(e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Website
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={website}
|
||||
onChange={(e) => setWebsite(e.target.value)}
|
||||
placeholder="https://seusite.com"
|
||||
className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Instagram
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={instagram}
|
||||
onChange={(e) => setInstagram(e.target.value)}
|
||||
placeholder="@seuinstagram"
|
||||
className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
WhatsApp
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={whatsapp}
|
||||
onChange={(e) => setWhatsapp(e.target.value)}
|
||||
placeholder="+55 11 99999-9999"
|
||||
className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Descrição da Empresa
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Descreva sua empresa..."
|
||||
rows={4}
|
||||
className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsEditingCompany(false)}
|
||||
className="flex items-center gap-2 bg-primary-cta text-primary-cta-text px-4 py-2 rounded-lg hover:opacity-90 transition"
|
||||
>
|
||||
<Save size={18} />
|
||||
Salvar Mudanças
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<button className="bg-card rounded-2xl p-6 shadow-lg border border-accent hover:border-primary-cta transition">
|
||||
<Mic size={32} className="text-primary-cta mb-3" />
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2">Clonar Voz</h3>
|
||||
<p className="text-sm text-foreground/60">Grave sua voz para respostas personalizadas</p>
|
||||
</button>
|
||||
<button className="bg-card rounded-2xl p-6 shadow-lg border border-accent hover:border-primary-cta transition">
|
||||
<MessageSquare size={32} className="text-primary-cta mb-3" />
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2">Teste a IA</h3>
|
||||
<p className="text-sm text-foreground/60">Converse com seu agente em tempo real</p>
|
||||
</button>
|
||||
<button className="bg-card rounded-2xl p-6 shadow-lg border border-accent hover:border-primary-cta transition">
|
||||
<Settings size={32} className="text-primary-cta mb-3" />
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2">Comportamento</h3>
|
||||
<p className="text-sm text-foreground/60">Configure como a IA responde</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="WhatsAppAI"
|
||||
leftLink={{ text: "Política de Privacidade", href: "/privacy" }}
|
||||
rightLink={{ text: "Termos de Serviço", href: "/terms" }}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,69 +1,24 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Public_Sans } from "next/font/google";
|
||||
import { Inter } from "next/font/google";
|
||||
import { DM_Sans } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
|
||||
const publicSans = Public_Sans({
|
||||
variable: "--font-public-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
subsets: ["latin"],
|
||||
const dmSans = DM_Sans({
|
||||
variable: "--font-dm-sans", subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "WhatsAppAI Agent - Premium AI Customer Support Platform",
|
||||
description: "Transform customer support with AI-powered WhatsApp agents featuring emotional intelligence, voice cloning, and 24/7 automation. Start your free 7-day trial today.",
|
||||
keywords: "AI customer support, WhatsApp chatbot, customer service automation, AI agent, conversation AI, voice cloning, 24/7 support",
|
||||
metadataBase: new URL("https://www.whatsappaigent.com"),
|
||||
alternates: {
|
||||
canonical: "https://www.whatsappaigent.com",
|
||||
},
|
||||
openGraph: {
|
||||
title: "WhatsAppAI Agent - Premium AI Customer Support",
|
||||
description: "Intelligent WhatsApp agents that think, learn, and convert. 24/7 customer support with emotional intelligence and voice cloning.",
|
||||
url: "https://www.whatsappaigent.com",
|
||||
siteName: "WhatsAppAI",
|
||||
type: "website",
|
||||
images: [
|
||||
{
|
||||
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/a-modern-ai-whatsapp-customer-support-da-1772751311801-b427470d.png",
|
||||
alt: "WhatsAppAI Dashboard Interface",
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "WhatsAppAI Agent - AI-Powered Customer Support",
|
||||
description: "Meet your premium AI customer support agent for WhatsApp. Emotional intelligence + voice cloning + 24/7 automation.",
|
||||
images: [
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/a-modern-ai-whatsapp-customer-support-da-1772751311801-b427470d.png",
|
||||
],
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
};
|
||||
title: "WhatsAppAI - Plataforma SaaS de Chatbot com IA", description: "Crie chatbots inteligentes com IA para WhatsApp e redes sociais. Teste grátis por 7 dias. Dashboard, clonagem de voz e respostas naturais."};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${publicSans.variable} ${inter.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<html lang="pt-BR">
|
||||
<body className={dmSans.variable}>
|
||||
{children}
|
||||
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1431,7 +1386,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
166
src/app/login/page.tsx
Normal file
166
src/app/login/page.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { useState } from "react";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
|
||||
export default function LoginPage() {
|
||||
const [isLogin, setIsLogin] = useState(true);
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
|
||||
const navItems = [
|
||||
{ name: "Recursos", id: "features" },
|
||||
{ name: "Preços", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="plain"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="WhatsAppAI"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Voltar ao Início", href: "/"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex items-center justify-center px-4 py-20">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-card rounded-2xl shadow-lg p-8">
|
||||
<h1 className="text-3xl font-bold text-foreground mb-2 text-center">
|
||||
{isLogin ? "Entrar" : "Criar Conta"}
|
||||
</h1>
|
||||
<p className="text-center text-foreground/60 mb-8">
|
||||
{isLogin
|
||||
? "Acesse sua plataforma de chatbot com IA"
|
||||
: "Comece seu teste gratuito de 7 dias"}
|
||||
</p>
|
||||
|
||||
<form className="space-y-4">
|
||||
{!isLogin && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Nome Completo
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Seu nome"
|
||||
className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="seu@email.com"
|
||||
className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Senha
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{!isLogin && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Confirmar Senha
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLogin && (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="rounded border-accent mr-2"
|
||||
/>
|
||||
<span className="text-foreground/70">Lembrar de mim</span>
|
||||
</label>
|
||||
<a href="#" className="text-primary-cta hover:underline">
|
||||
Esqueceu senha?
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full mt-6 bg-primary-cta text-primary-cta-text font-semibold py-2 rounded-lg hover:opacity-90 transition flex items-center justify-center gap-2"
|
||||
>
|
||||
{isLogin ? "Entrar" : "Começar Teste Grátis"}
|
||||
<ArrowRight size={18} />
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="text-center text-foreground/60 mt-6">
|
||||
{isLogin ? "Não tem conta?" : "Já tem conta?"}
|
||||
<button
|
||||
onClick={() => setIsLogin(!isLogin)}
|
||||
className="ml-2 text-primary-cta hover:underline font-semibold"
|
||||
>
|
||||
{isLogin ? "Criar agora" : "Entrar aqui"}
|
||||
</button>
|
||||
</p>
|
||||
|
||||
{!isLogin && (
|
||||
<p className="text-xs text-foreground/50 text-center mt-4">
|
||||
Ao se registrar, você concorda com nossos Termos de Serviço e Política de Privacidade
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="WhatsAppAI"
|
||||
leftLink={{ text: "Política de Privacidade", href: "/privacy" }}
|
||||
rightLink={{ text: "Termos de Serviço", href: "/terms" }}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
197
src/app/page.tsx
197
src/app/page.tsx
@@ -9,16 +9,15 @@ import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
|
||||
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { Zap, Brain, Award, CheckCircle, Rocket, Star, Gift, Users, HelpCircle, TrendingUp } from "lucide-react";
|
||||
import { Zap, Brain, Award, CheckCircle, Rocket, Star, Gift, Users, HelpCircle, TrendingUp, MessageCircle, Mic, Volume2, Lock, BarChart3 } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Recursos", id: "features" },
|
||||
{ name: "Preços", id: "pricing" },
|
||||
{ name: "Demo", id: "demo" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -28,7 +27,7 @@ export default function HomePage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="grid"
|
||||
background="plain"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
@@ -39,25 +38,26 @@ export default function HomePage() {
|
||||
brandName="WhatsAppAI"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Start Free Trial", href: "https://app.whatsappaigent.com/signup"}}
|
||||
text: "Iniciar Teste Grátis", href: "/login"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
title="Meet Your Premium AI Customer Support Agent"
|
||||
description="Transform your customer interactions with an intelligent WhatsApp agent that thinks, learns, and responds like your best salesperson. Available 24/7 with emotional intelligence, voice cloning, and conversion optimization."
|
||||
tag="AI-Powered Customer Support"
|
||||
title="Seu Agente de IA Inteligente para WhatsApp e Redes Sociais"
|
||||
description="Crie um chatbot com inteligência artificial que atende como um humano. Responde com contexto completo, entende emoções, clona sua voz e converte leads. Teste grátis por 7 dias sem cartão de crédito."
|
||||
tag="Plataforma SaaS Inteligente"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[
|
||||
{ text: "Start Free 7-Day Trial", href: "https://app.whatsappaigent.com/signup" },
|
||||
{ text: "Watch Demo", href: "#demo" },
|
||||
{ text: "Começar Teste de 7 Dias", href: "/login" },
|
||||
{ text: "Ver Demonstração", href: "#demo" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/a-modern-ai-whatsapp-customer-support-da-1772751311801-b427470d.png"
|
||||
imageAlt="AI WhatsApp Agent Dashboard"
|
||||
imageAlt="Dashboard do Agente IA WhatsApp"
|
||||
mediaAnimation="slide-up"
|
||||
imagePosition="right"
|
||||
/>
|
||||
@@ -65,44 +65,48 @@ export default function HomePage() {
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyThree
|
||||
title="Intelligence That Understands You"
|
||||
description="Advanced capabilities designed to transform how your business handles customer conversations and drives conversions."
|
||||
tag="Extreme AI Level"
|
||||
title="Recursos Avançados de Inteligência Artificial"
|
||||
description="Funcionalidades poderosas projetadas para transformar como seu negócio interage com clientes e aumenta conversões."
|
||||
tag="Nível Extremo de IA"
|
||||
tagIcon={Brain}
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Natural Language Processing & Emotional Intelligence", tags: ["Context Aware", "Emotion Detection"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/conceptual-illustration-of-natural-langu-1772751311366-8332adfd.png", imageAlt: "NLP and Emotional Intelligence"},
|
||||
id: "1", title: "Lê Todas as Mensagens com Contexto Completo", tags: ["Análise Contextual", "Compreensão Profunda"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/conceptual-illustration-of-natural-langu-1772751311366-8332adfd.png", imageAlt: "Processamento de Linguagem Natural"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Voice Cloning with Natural Tonality", tags: ["Voice Synthesis", "Audio Quality"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/visual-representation-of-voice-cloning-t-1772751311574-b1c92922.png", imageAlt: "Voice Cloning Technology"},
|
||||
id: "2", title: "Clonagem de Voz com Tonalidade Natural", tags: ["Síntese de Voz", "Qualidade Premium"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/visual-representation-of-voice-cloning-t-1772751311574-b1c92922.png", imageAlt: "Tecnologia de Clonagem de Voz"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Strategic Link Insertion & Conversion Optimization", tags: ["Smart Timing", "Conversion Focus"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/illustration-of-marketing-automation-and-1772751312525-96209578.png", imageAlt: "Marketing Automation"},
|
||||
id: "3", title: "Áudio com Transcrição Automática", tags: ["Reconhecimento de Áudio", "Transcrição Rápida"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/illustration-of-marketing-automation-and-1772751312525-96209578.png", imageAlt: "Sistema de Áudio"
|
||||
},
|
||||
{
|
||||
id: "4", title: "24/7 Intelligent Response System", tags: ["Always Online", "Never Sleeps"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/conceptual-illustration-of-24-7-ai-suppo-1772751311078-723e9713.png", imageAlt: "24/7 Support"},
|
||||
id: "4", title: "Responde como Atendente Humano 24/7", tags: ["Sempre Online", "Resposta Inteligente"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/conceptual-illustration-of-24-7-ai-suppo-1772751311078-723e9713.png", imageAlt: "Suporte 24/7"
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
buttons={[{ text: "Explore All Features", href: "https://app.whatsappaigent.com/features" }]}
|
||||
buttons={[{ text: "Explorar Todos os Recursos", href: "/login" }]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
tag="Why Choose Us"
|
||||
tag="Por Que Nos Escolher"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
title="Your Business Deserves AI That Thinks"
|
||||
description="WhatsAppAI Agent represents a breakthrough in customer interaction technology."
|
||||
subdescription="Trusted by leading businesses worldwide to drive conversions and customer satisfaction."
|
||||
icon={CheckCircle}
|
||||
title="Dashboard Intuitivo com Todas as Informações"
|
||||
description="Acesso total ao status do seu chatbot, tempo restante do teste e configurações da empresa."
|
||||
subdescription="Gerencie sua inteligência artificial com interface minimalista e profissional. Configure informações da empresa, links importantes e comportamentos de IA em um único lugar."
|
||||
icon={BarChart3}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/interactive-whatsapp-chat-demonstration--1772751315225-aba80bf5.png"
|
||||
imageAlt="AI Agent in Action"
|
||||
imageAlt="Dashboard do Agente IA em Ação"
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
@@ -110,35 +114,38 @@ export default function HomePage() {
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
title="Simple Transparent Pricing"
|
||||
description="Start with 7 days free. No credit card required. Choose the perfect plan for your business."
|
||||
tag="All Plans Include Free Trial"
|
||||
title="Preços Simples e Transparentes"
|
||||
description="Comece com 7 dias grátis. Sem cartão de crédito. Escolha o plano perfeito para seu negócio."
|
||||
tag="Todos os Planos Incluem Teste Grátis"
|
||||
tagIcon={Gift}
|
||||
tagAnimation="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "starter", badge: "Best for Startups", badgeIcon: Rocket,
|
||||
price: "$99/month", subtitle: "Perfect for small teams and first-time buyers", buttons: [{ text: "Start Free Trial", href: "https://app.whatsappaigent.com/signup?plan=starter" }],
|
||||
id: "starter", badge: "Para Iniciantes", badgeIcon: Rocket,
|
||||
price: "R$ 299/mês", subtitle: "Perfeito para pequenas equipes", buttons: [{ text: "Começar Teste Grátis", href: "/login" }],
|
||||
features: [
|
||||
"1 AI Agent", "500 conversations/month", "Basic NLP Processing", "Email Support", "7-day free trial included"],
|
||||
"1 Agente IA", "500 conversas/mês", "Processamento básico de linguagem", "Suporte por email", "7 dias de teste inclusos"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "professional", badge: "Most Popular", badgeIcon: Star,
|
||||
price: "$299/month", subtitle: "Ideal for growing businesses and agencies", buttons: [{ text: "Start Free Trial", href: "https://app.whatsappaigent.com/signup?plan=professional" }],
|
||||
id: "professional", badge: "Mais Popular", badgeIcon: Star,
|
||||
price: "R$ 899/mês", subtitle: "Ideal para negócios em crescimento", buttons: [{ text: "Começar Teste Grátis", href: "/login" }],
|
||||
features: [
|
||||
"5 AI Agents", "5,000 conversations/month", "Advanced NLP + Emotion Detection", "Voice Cloning Included", "Priority Support", "Strategic Link Optimization", "7-day free trial included"],
|
||||
"5 Agentes IA", "5.000 conversas/mês", "IA Avançada + Detecção de Emoção", "Clonagem de Voz Incluída", "Suporte Prioritário", "Análise de Sentimentos", "7 dias de teste inclusos"
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "enterprise", badge: "For Scale", badgeIcon: Zap,
|
||||
price: "Custom", subtitle: "Unlimited capabilities for large organizations", buttons: [{ text: "Request Demo", href: "https://app.whatsappaigent.com/demo" }],
|
||||
id: "enterprise", badge: "Para Empresas", badgeIcon: Zap,
|
||||
price: "Sob Demanda", subtitle: "Capacidades ilimitadas para grandes organizações", buttons: [{ text: "Solicitar Demo", href: "/login" }],
|
||||
features: [
|
||||
"Unlimited AI Agents", "Unlimited conversations", "All features included", "Dedicated Account Manager", "Custom Integrations", "Advanced Analytics", "SLA Guarantee"],
|
||||
"Agentes IA Ilimitados", "Conversas Ilimitadas", "Todos os Recursos Inclusos", "Gerente de Conta Dedicado", "Integrações Personalizadas", "Análise Avançada", "Garantia de SLA"
|
||||
],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
buttons={[{ text: "See Detailed Comparison", href: "https://app.whatsappaigent.com/compare" }]}
|
||||
buttons={[{ text: "Ver Comparação Detalhada", href: "/login" }]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
@@ -147,17 +154,21 @@ export default function HomePage() {
|
||||
<TestimonialCardTwelve
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah Johnson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-portrait-of-a-succ-1772751310565-d16e615f.png?_wi=1", imageAlt: "Sarah Johnson"},
|
||||
id: "1", name: "Teste Interativo da IA", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-portrait-of-a-succ-1772751310565-d16e615f.png?_wi=1", imageAlt: "Demonstração Interativa"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Michael Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-of-a-marketing-or--1772751310538-c1af0b5e.png?_wi=1", imageAlt: "Michael Chen"},
|
||||
id: "2", name: "Chat com IA em Tempo Real", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-of-a-marketing-or--1772751310538-c1af0b5e.png?_wi=1", imageAlt: "Chat em Tempo Real"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Emma Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-of-a-customer-succ-1772751310776-30a55dba.png?_wi=1", imageAlt: "Emma Rodriguez"},
|
||||
id: "3", name: "Envie Mensagens de Texto", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-of-a-customer-succ-1772751310776-30a55dba.png?_wi=1", imageAlt: "Mensagens de Texto"
|
||||
},
|
||||
{
|
||||
id: "4", name: "James Wilson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-of-a-service-compa-1772751312426-1bee2d2e.png?_wi=1", imageAlt: "James Wilson"},
|
||||
id: "4", name: "Envie Áudio e Receba Resposta", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-of-a-service-compa-1772751312426-1bee2d2e.png?_wi=1", imageAlt: "Chat com Áudio"
|
||||
},
|
||||
]}
|
||||
cardTitle="Join 1,000+ companies transforming customer support with AI"
|
||||
cardTag="Trusted by industry leaders"
|
||||
cardTagIcon={Users}
|
||||
cardTitle="Teste Interativo - Converse com Nossa IA"
|
||||
cardTag="Demonstração ao Vivo"
|
||||
cardTagIcon={MessageCircle}
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
@@ -167,21 +178,27 @@ export default function HomePage() {
|
||||
<TestimonialCardTwelve
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Alex Torres", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-of-a-digital-marke-1772751310497-c053ab33.png", imageAlt: "Alex Torres"},
|
||||
id: "1", name: "Dashboard em Tempo Real", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-of-a-digital-marke-1772751310497-c053ab33.png", imageAlt: "Dashboard"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Jessica Lee", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-of-an-e-commerce-b-1772751310526-117c2462.png", imageAlt: "Jessica Lee"},
|
||||
id: "2", name: "Status do Chatbot", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-of-an-e-commerce-b-1772751310526-117c2462.png", imageAlt: "Status"
|
||||
},
|
||||
{
|
||||
id: "3", name: "David Kumar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-portrait-of-a-succ-1772751310565-d16e615f.png?_wi=2", imageAlt: "David Kumar"},
|
||||
id: "3", name: "Tempo Restante do Teste", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-portrait-of-a-succ-1772751310565-d16e615f.png?_wi=2", imageAlt: "Teste Grátis"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Rachel Martinez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-of-a-marketing-or--1772751310538-c1af0b5e.png?_wi=2", imageAlt: "Rachel Martinez"},
|
||||
id: "4", name: "Configuração da Empresa", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-of-a-marketing-or--1772751310538-c1af0b5e.png?_wi=2", imageAlt: "Configuração"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Marcus Thompson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-of-a-customer-succ-1772751310776-30a55dba.png?_wi=2", imageAlt: "Marcus Thompson"},
|
||||
id: "5", name: "Links Importantes com Destaque", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-of-a-customer-succ-1772751310776-30a55dba.png?_wi=2", imageAlt: "Links"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Lisa Anderson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-of-a-service-compa-1772751312426-1bee2d2e.png?_wi=2", imageAlt: "Lisa Anderson"},
|
||||
id: "6", name: "Avisos Automáticos de Email", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXuL8hhvkbDSpwokY4DxWRxdJy/professional-headshot-of-a-service-compa-1772751312426-1bee2d2e.png?_wi=2", imageAlt: "Notificações"
|
||||
},
|
||||
]}
|
||||
cardTitle="Real results from real customers. See why businesses choose WhatsAppAI Agent."
|
||||
cardTag="Proven success stories"
|
||||
cardTagIcon={TrendingUp}
|
||||
cardTitle="Dashboard Completo com Todas as Funcionalidades"
|
||||
cardTag="Gerenciamento Profissional"
|
||||
cardTagIcon={BarChart3}
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
@@ -189,48 +206,48 @@ export default function HomePage() {
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about WhatsAppAI Agent and how it can transform your customer support."
|
||||
tag="Support"
|
||||
title="Perguntas Frequentes"
|
||||
description="Tudo o que você precisa saber sobre a plataforma WhatsAppAI e como pode transformar seu atendimento ao cliente."
|
||||
tag="Dúvidas"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "What exactly is the 7-day free trial?", content:
|
||||
"After you sign up, your account is automatically activated with full access to all features included in your plan tier. No credit card is required. You get 7 full days to test the AI agent, configure it for your business, and see real results. On day 7, we'll send you a reminder email. If you don't cancel, we'll automatically charge your preferred payment method starting day 8."},
|
||||
id: "1", title: "O que é o teste grátis de 7 dias?", content: "Após o cadastro, sua conta recebe acesso total a todos os recursos. Sem necessidade de cartão de crédito. Você tem 7 dias completos para testar o agente IA, configurar para seu negócio e ver resultados reais. No dia 7, enviamos um lembrete por email. Se não cancelar, começamos a cobrar a partir do dia 8."
|
||||
},
|
||||
{
|
||||
id: "2", title: "How does the AI agent interpret customer emotions?", content:
|
||||
"Our advanced NLP engine analyzes message context, tone, word choice, and conversation history to detect customer sentiment and emotional states. The agent identifies if a customer is frustrated, happy, confused, or hesitant. It then adapts its response strategy accordingly—validating emotions first before providing solutions or pushing sales messages. This creates authentic, human-like conversations that build trust."},
|
||||
id: "2", title: "Como a IA lê todas as mensagens com contexto?", content: "Nosso mecanismo avançado de IA analisa todo o histórico de mensagens, entende o contexto completo da conversa, identifica intenções do cliente e aprende com cada interação. A IA nunca funciona isoladamente - sempre tem visão completa para respostas mais inteligentes e personalizadas."
|
||||
},
|
||||
{
|
||||
id: "3", title: "Can I really clone my own voice?", content:
|
||||
"Yes! In the 'Voice Cloning' section of your dashboard, you record a 30-60 second audio sample speaking naturally. Our AI learns your vocal patterns, tone, and inflection. The system then generates responses in your voice, maintaining consistency and personality. The cloned voice sounds natural with appropriate emotion and emphasis, making interactions feel like they're coming directly from you."},
|
||||
id: "3", title: "Posso clonar minha voz?", content: "Sim! Na seção 'Clonagem de Voz' do dashboard, você grava um áudio de 30-60 segundos falando naturalmente. Nossa IA aprende seus padrões vocais, tom e inflexão. O sistema então gera respostas em sua voz, mantendo consistência e personalidade. A voz clonada soa natural com emoção apropriada."
|
||||
},
|
||||
{
|
||||
id: "4", title: "How does the AI decide when to insert links?", content:
|
||||
"The agent analyzes conversation flow, customer readiness signals, and conversation stage. It identifies the ideal moment when the customer is most receptive—after expressing interest but before objection. It prepares the customer psychologically through validation and benefit explanation, then naturally inserts the link with context. This strategic approach dramatically increases click-through and conversion rates compared to cold link sending."},
|
||||
id: "4", title: "Como funciona a transcrição de áudio?", content: "Quando um cliente envia um áudio, nosso sistema transcreve automaticamente usando reconhecimento de voz avançado. O texto é processado pela IA para gerar uma resposta inteligente. Se configurado, a resposta é enviada em áudio com voz clonada sua, completando um ciclo natural de comunicação."
|
||||
},
|
||||
{
|
||||
id: "5", title: "Will the agent seem robotic or generic?", content:
|
||||
"Never. Our conversation engine is specifically designed to avoid generic responses. It reads all previous messages, understands context deeply, varies sentence structure, develops natural dialogue flow, and asks strategic follow-up questions unique to each customer's situation. Each conversation is completely individualized and sounds like a naturally trained human representative having a real business conversation."},
|
||||
id: "5", title: "A IA realmente responde como um humano?", content: "Definitivamente. Nosso motor de conversação evita respostas genéricas. Entende contexto profundamente, varia estrutura de frases, desenvolve fluxo natural de diálogo, faz perguntas de acompanhamento únicas para cada cliente. Cada conversa é completamente individualizada e soa como um atendente bem treinado da sua empresa."
|
||||
},
|
||||
{
|
||||
id: "6", title: "What about customer data privacy and security?", content:
|
||||
"We take enterprise-grade security seriously. All conversations are encrypted end-to-end. Customer data is stored in secure, ISO-certified servers with automatic backups. We comply with GDPR, CCPA, and other international data protection regulations. Your data is never shared with third parties. You maintain complete control and can export or delete customer data anytime from your dashboard."},
|
||||
id: "6", title: "Qual é a segurança dos dados dos clientes?", content: "Levamos segurança muito a sério. Todas as conversas são criptografadas de ponta a ponta. Dados dos clientes são armazenados em servidores seguros com backups automáticos. Cumprimos LGPD, GDPR e regulações internacionais. Seus dados nunca são compartilhados com terceiros. Você tem controle total e pode exportar ou deletar dados a qualquer momento."
|
||||
},
|
||||
{
|
||||
id: "7", title: "Can I test the agent before paying?", content:
|
||||
"Absolutely. The 7-day free trial includes access to our interactive demo area where you can see the agent handle different customer scenarios in real-time. You can test various conversation flows, see how it handles objections, watch the link insertion strategy, and even test voice cloning features. This lets you experience the full capability before making any payment commitment."},
|
||||
id: "7", title: "Posso testar a IA antes de pagar?", content: "Absolutamente! Os 7 dias grátis incluem acesso completo à demonstração interativa onde você vê a IA lidar com diferentes cenários. Pode testar fluxos de conversa, ver como liida com objeções, testar clonagem de voz. Isso permite experienciar o poder completo antes de qualquer compromisso financeiro."
|
||||
},
|
||||
{
|
||||
id: "8", title: "What if I want to cancel during the free trial?", content:
|
||||
"You can cancel anytime through your account dashboard—no questions asked, no penalties. If you cancel before day 8, you won't be charged. Simply go to Settings → Subscription → Cancel Plan and confirm. Your agent will stop operating immediately. All your configurations and conversation history remain accessible for 30 days if you want to reactivate later."},
|
||||
id: "8", title: "Posso cancelar durante o teste gratuito?", content: "Claro! Você pode cancelar a qualquer momento através do dashboard - sem perguntas, sem penalidades. Se cancelar antes do dia 8, não será cobrado. Vá em Configurações → Assinatura → Cancelar Plano e confirme. Seu agente para imediatamente, mas as configurações e histórico ficam acessíveis por 30 dias."
|
||||
},
|
||||
{
|
||||
id: "9", title: "How does the automatic billing reminder system work?", content:
|
||||
"On day 5 of your trial, we send an email reminder: 'Your trial ends in 2 days.' This gives you time to review if the platform meets your needs. On day 7, we send a second email: 'Your trial ends today. If you don't cancel, your subscription begins tomorrow.' Then on day 8, if you haven't canceled, we charge your account for the first month and ongoing monthly billing begins."},
|
||||
id: "9", title: "Como funciona o sistema de avisos automáticos de email?", content: "No dia 5 do teste, enviamos um email: 'Seu teste termina em 2 dias.' Você tem tempo para revisar. No dia 7, enviamos: 'Seu teste termina hoje. Se não cancelar, sua assinatura começa amanhã.' No dia 8, se não cancelou, cobramos a primeira mensalidade e a cobrança recorrente mensal começa."
|
||||
},
|
||||
{
|
||||
id: "10", title: "Can the agent handle multiple products or services?", content:
|
||||
"Yes. When configuring your agent, you can input detailed information about all your products/services, pricing, features, and benefits. The AI learns everything and can intelligently discuss any of your offerings based on the customer's needs and interests. It can cross-sell and upsell naturally by understanding what solution best fits each customer's situation."},
|
||||
id: "10", title: "Como configuro o agente com informações da empresa?", content: "No dashboard, vá em Configurações → Configuração do Agente. Você insere: Nome da empresa, ramo de negócio, informações de produtos/serviços com descrições e links, preços, preferências de tom e voz, informações do público alvo, links importantes (WhatsApp, Instagram, site, etc.) e instruções específicas. A IA contextualiza tudo isso para representar sua empresa autenticamente."
|
||||
},
|
||||
{
|
||||
id: "11", title: "How do I configure the agent with my company details?", content:
|
||||
"In your dashboard, go to Settings → Agent Configuration. You'll enter: Company name and industry, Products/services with descriptions and links, Pricing information (if relevant), Your brand voice and tone preferences, Target audience details, Links (payment, checkout, Instagram, website, etc.), and Any specific instructions or conversation guidelines. The AI then contextualizes all this information and uses it to represent your business authentically."},
|
||||
id: "11", title: "A IA pode lidar com múltiplos produtos ou serviços?", content: "Sim! Configure informações detalhadas de todos os seus produtos/serviços, descrições, benefícios e links. A IA aprende tudo e pode discutir qualquer uma de suas ofertas baseado nas necessidades do cliente. Faz cross-sell e upsell naturalmente ao entender qual solução melhor se encaixa em cada situação."
|
||||
},
|
||||
{
|
||||
id: "12", title: "What analytics and reporting do I get?", content:
|
||||
"Your dashboard includes comprehensive analytics: Conversation volume and trends, Response satisfaction ratings, Conversion rates and revenue attributed to the agent, Customer sentiment analysis, Link click-through rates, Peak activity times, Common customer questions and concerns, and Agent performance metrics. All data is real-time and exportable for deeper analysis."},
|
||||
id: "12", title: "Que análises e relatórios recebo?", content: "Seu dashboard inclui: Volume e tendências de conversas, Avaliações de satisfação, Taxas de conversão e receita atribuída à IA, Análise de sentimento do cliente, Taxa de cliques em links, Horários de pico de atividade, Perguntas e preocupações comuns, Métricas de desempenho do agente. Todos os dados são em tempo real e exportáveis para análise mais profunda."
|
||||
},
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
@@ -242,10 +259,10 @@ export default function HomePage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="WhatsAppAI"
|
||||
leftLink={{ text: "Privacy Policy", href: "/privacy" }}
|
||||
rightLink={{ text: "Terms of Service", href: "/terms" }}
|
||||
leftLink={{ text: "Política de Privacidade", href: "/privacy" }}
|
||||
rightLink={{ text: "Termos de Serviço", href: "/terms" }}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ html {
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
font-family: var(--font-dm-sans), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
@@ -24,5 +24,5 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-public-sans), sans-serif;
|
||||
font-family: var(--font-dm-sans), sans-serif;
|
||||
}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #fcf6ec;
|
||||
--card: #f3ede2;
|
||||
--foreground: #2e2521;
|
||||
--primary-cta: #2e2521;
|
||||
--primary-cta-text: #fcf6ec;
|
||||
--background: #f5f5f5;
|
||||
--card: #ffffff;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #1c1c1c;
|
||||
--primary-cta-text: #f5f5f5;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #2e2521;
|
||||
--accent: #b2a28b;
|
||||
--background-accent: #b2a28b;
|
||||
--secondary-cta-text: #1c1c1c;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #d4d4d4;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user