253 lines
15 KiB
TypeScript
253 lines
15 KiB
TypeScript
import Link from "next/link";
|
|
import Header from "@/components/Header";
|
|
|
|
export const metadata = {
|
|
title: "Gestão de Redes Sociais - Aggios",
|
|
description: "Agende posts, analise métricas e gerencie múltiplas contas em uma única plataforma.",
|
|
};
|
|
|
|
export default function RedesSociaisPage() {
|
|
return (
|
|
<>
|
|
<Header />
|
|
|
|
<main className="pt-20 bg-white dark:bg-zinc-950 transition-colors">
|
|
{/* Hero Section */}
|
|
<section className="py-20 bg-gradient-to-br from-pink-50 to-white dark:from-zinc-900 dark:to-zinc-950 transition-colors relative overflow-hidden">
|
|
{/* Em Breve Badge - Floating */}
|
|
<div className="absolute top-8 right-8 z-20">
|
|
<div className="bg-gradient-to-r from-pink-500 to-rose-600 text-white px-6 py-3 rounded-full font-bold text-lg shadow-2xl animate-pulse">
|
|
🚀 Em Breve
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 bg-pink-600 rounded-full text-sm font-semibold text-white shadow-lg mb-6">
|
|
<i className="ri-share-line"></i>
|
|
<span>Gestão de Redes Sociais</span>
|
|
</div>
|
|
|
|
<h1 className="font-heading font-bold text-5xl lg:text-6xl text-zinc-900 dark:text-white mb-6 leading-tight transition-colors">
|
|
Domine suas <span className="bg-gradient-to-r from-pink-500 to-rose-600 bg-clip-text text-transparent">redes sociais</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 leading-relaxed transition-colors">
|
|
Agende posts, gerencie múltiplas contas, analise métricas e interaja com seu público — tudo em um só lugar.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<button disabled className="px-8 py-3 bg-pink-600 text-white font-semibold rounded-xl opacity-60 cursor-not-allowed shadow-lg">
|
|
Em Breve
|
|
</button>
|
|
<Link href="/#pricing" className="px-8 py-3 border-2 border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-xl hover:border-transparent hover:bg-pink-600 hover:text-white transition-all">
|
|
Ver Planos
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<div className="absolute inset-0 blur-3xl bg-gradient-to-r from-pink-200 to-rose-200 dark:from-pink-900/20 dark:to-rose-900/20 rounded-[40px]"></div>
|
|
<div className="relative bg-white dark:bg-zinc-900 rounded-3xl border border-zinc-200 dark:border-zinc-800 p-8 shadow-2xl transition-colors">
|
|
<div className="space-y-4">
|
|
{[
|
|
{ platform: "Instagram", icon: "ri-instagram-line", scheduled: 12, color: "bg-pink-500" },
|
|
{ platform: "Facebook", icon: "ri-facebook-circle-line", scheduled: 8, color: "bg-blue-600" },
|
|
{ platform: "LinkedIn", icon: "ri-linkedin-box-line", scheduled: 5, color: "bg-blue-700" },
|
|
{ platform: "Twitter/X", icon: "ri-twitter-x-line", scheduled: 15, color: "bg-zinc-900" },
|
|
].map((social, index) => (
|
|
<div key={index} className="flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-xl">
|
|
<div className={`w-10 h-10 ${social.color} rounded-xl flex items-center justify-center text-white`}>
|
|
<i className={social.icon}></i>
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-sm font-semibold text-zinc-900 dark:text-white">{social.platform}</p>
|
|
<p className="text-xs text-zinc-500 dark:text-zinc-400">{social.scheduled} posts agendados</p>
|
|
</div>
|
|
<span className="text-xs px-2 py-1 bg-emerald-100 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 rounded-full font-semibold">
|
|
Ativo
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-4 pt-4 border-t border-zinc-200 dark:border-zinc-800 flex items-center justify-between text-sm">
|
|
<span className="text-zinc-600 dark:text-zinc-400">Alcance total (30 dias)</span>
|
|
<span className="font-semibold text-pink-600">248.5K</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features */}
|
|
<section className="py-20 bg-white dark:bg-zinc-900 transition-colors">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<div className="text-center mb-16">
|
|
<h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
|
|
Marketing <span className="bg-gradient-to-r from-pink-500 to-rose-600 bg-clip-text text-transparent">automatizado</span>
|
|
</h2>
|
|
<p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
|
|
Ferramentas profissionais para ampliar sua presença digital e engajamento.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{[
|
|
{ icon: "ri-calendar-schedule-line", title: "Agendamento Inteligente", desc: "Agende posts para múltiplas redes com horários otimizados por IA." },
|
|
{ icon: "ri-dashboard-line", title: "Painel Unificado", desc: "Gerencie Instagram, Facebook, LinkedIn, Twitter e TikTok em um só lugar." },
|
|
{ icon: "ri-bar-chart-box-line", title: "Analytics Completo", desc: "Acompanhe alcance, engajamento, cliques e conversões em tempo real." },
|
|
{ icon: "ri-message-3-line", title: "Caixa de Entrada Social", desc: "Responda comentários e mensagens de todas as redes em uma única caixa." },
|
|
{ icon: "ri-image-edit-line", title: "Editor de Imagens", desc: "Edite fotos, adicione textos e filtros sem sair da plataforma." },
|
|
{ icon: "ri-team-line", title: "Colaboração em Equipe", desc: "Aprove posts, delegue tarefas e gerencie permissões de usuários." },
|
|
].map((feature, index) => (
|
|
<div key={index} className="bg-zinc-50 dark:bg-zinc-800 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-pink-500 hover:shadow-lg transition-all">
|
|
<div className="w-14 h-14 bg-pink-600 rounded-2xl flex items-center justify-center text-white text-2xl mb-6">
|
|
<i className={feature.icon}></i>
|
|
</div>
|
|
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">
|
|
{feature.desc}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Benefits */}
|
|
<section className="py-20 bg-zinc-50 dark:bg-zinc-800 transition-colors">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
|
<div>
|
|
<h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
|
|
Por que usar nossa plataforma?
|
|
</h2>
|
|
<p className="text-lg text-zinc-600 dark:text-zinc-400 mb-8 transition-colors">
|
|
Economize tempo, aumente engajamento e tome decisões baseadas em dados reais.
|
|
</p>
|
|
|
|
<div className="space-y-6">
|
|
{[
|
|
{ title: "Economize 10h por semana", desc: "Agende um mês de conteúdo em menos de 1 hora." },
|
|
{ title: "Aumente engajamento em 3x", desc: "Publique nos melhores horários identificados por IA." },
|
|
{ title: "Relatórios automáticos", desc: "Envie reports semanais para clientes com um clique." },
|
|
{ title: "Integração com CRM", desc: "Conecte leads das redes sociais direto no funil de vendas." },
|
|
].map((benefit, index) => (
|
|
<div key={index} className="flex gap-4">
|
|
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-pink-600 text-white shadow-sm shrink-0 mt-1">
|
|
<i className="ri-check-line text-sm"></i>
|
|
</span>
|
|
<div>
|
|
<h4 className="font-semibold text-lg text-zinc-900 dark:text-white mb-1 transition-colors">
|
|
{benefit.title}
|
|
</h4>
|
|
<p className="text-zinc-600 dark:text-zinc-400 transition-colors">
|
|
{benefit.desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-zinc-900 rounded-3xl border border-zinc-200 dark:border-zinc-800 p-8 shadow-2xl transition-colors">
|
|
<div className="grid grid-cols-2 gap-4 mb-6">
|
|
{[
|
|
{ label: "Posts Agendados", value: "147", icon: "ri-calendar-check-line", color: "text-pink-600" },
|
|
{ label: "Engajamento", value: "+284%", icon: "ri-heart-line", color: "text-rose-600" },
|
|
].map((stat, index) => (
|
|
<div key={index} className="p-4 bg-zinc-50 dark:bg-zinc-800 rounded-2xl text-center">
|
|
<i className={`${stat.icon} text-3xl ${stat.color} mb-2`}></i>
|
|
<p className="text-2xl font-bold text-zinc-900 dark:text-white">{stat.value}</p>
|
|
<p className="text-xs text-zinc-600 dark:text-zinc-400 mt-1">{stat.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="border-t border-zinc-200 dark:border-zinc-800 pt-6">
|
|
<p className="text-sm font-semibold text-zinc-900 dark:text-white mb-4">Alcance Mensal</p>
|
|
<div className="h-32 flex items-end gap-2">
|
|
{[40, 65, 55, 80, 70, 90, 75, 95, 85, 100].map((height, index) => (
|
|
<div key={index} className="flex-1 bg-pink-500 rounded-t" style={{ height: `${height}%` }}></div>
|
|
))}
|
|
</div>
|
|
<div className="flex items-center justify-between mt-4">
|
|
<span className="text-xs text-zinc-500 dark:text-zinc-400">Jan - Out 2025</span>
|
|
<span className="text-sm font-bold text-pink-600">248.5K alcance</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Supported Platforms */}
|
|
<section className="py-20 bg-white dark:bg-zinc-900 transition-colors">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8 text-center">
|
|
<h2 className="font-heading font-bold text-4xl text-zinc-900 dark:text-white mb-6 transition-colors">
|
|
Plataformas suportadas
|
|
</h2>
|
|
<p className="text-lg text-zinc-600 dark:text-zinc-400 mb-12 max-w-2xl mx-auto transition-colors">
|
|
Gerencie todas as principais redes sociais do Brasil e do mundo.
|
|
</p>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
{[
|
|
{ name: "Instagram", icon: "ri-instagram-line", color: "bg-pink-500" },
|
|
{ name: "Facebook", icon: "ri-facebook-circle-line", color: "bg-blue-600" },
|
|
{ name: "LinkedIn", icon: "ri-linkedin-box-line", color: "bg-blue-700" },
|
|
{ name: "Twitter/X", icon: "ri-twitter-x-line", color: "bg-zinc-900 dark:bg-white" },
|
|
{ name: "TikTok", icon: "ri-tiktok-line", color: "bg-zinc-900 dark:bg-white" },
|
|
{ name: "YouTube", icon: "ri-youtube-line", color: "bg-red-600" },
|
|
{ name: "Pinterest", icon: "ri-pinterest-line", color: "bg-red-700" },
|
|
{ name: "WhatsApp", icon: "ri-whatsapp-line", color: "bg-emerald-600" },
|
|
].map((platform, index) => (
|
|
<div key={index} className="bg-zinc-50 dark:bg-zinc-800 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 hover:border-pink-500 hover:shadow-lg transition-all">
|
|
<div className={`w-12 h-12 ${platform.color} rounded-xl flex items-center justify-center text-white text-2xl mx-auto mb-4`}>
|
|
<i className={platform.icon}></i>
|
|
</div>
|
|
<p className="font-semibold text-zinc-900 dark:text-white">{platform.name}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section className="py-20 bg-zinc-50 dark:bg-zinc-800 transition-colors">
|
|
<div className="max-w-4xl mx-auto px-6 lg:px-8 text-center">
|
|
<h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
|
|
Amplifique sua <span className="bg-gradient-to-r from-pink-500 to-rose-600 bg-clip-text text-transparent">presença digital</span>
|
|
</h2>
|
|
<p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 transition-colors">
|
|
Mantenha-se informado! Em breve você poderá gerenciar todas as suas redes sociais em um só lugar.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<button disabled className="inline-block px-8 py-4 bg-pink-600 text-white font-semibold rounded-xl opacity-60 cursor-not-allowed shadow-lg">
|
|
<i className="ri-rocket-line mr-2"></i>
|
|
Em Breve
|
|
</button>
|
|
<Link href="/#pricing" className="inline-block px-8 py-4 border-2 border-pink-600 text-pink-600 font-semibold rounded-xl hover:bg-pink-600 hover:text-white transition-all shadow-lg">
|
|
<i className="ri-notification-line mr-2"></i>
|
|
Me Avise Quando Lançar
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer className="bg-zinc-900 dark:bg-black text-white py-12 transition-colors">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8 text-center">
|
|
<p className="text-zinc-400 text-sm">
|
|
© 2025 Aggios. Todos os direitos reservados.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</>
|
|
);
|
|
}
|