feat: Implementação de submenus laterais (flyout), correções de UI e proteção de rotas (AuthGuard)
This commit is contained in:
Erik Silva
@@ -3,10 +3,45 @@
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Header from "@/components/Header";
|
||||
import {
|
||||
RocketLaunchIcon,
|
||||
ArrowRightIcon,
|
||||
PlayCircleIcon,
|
||||
ShieldCheckIcon,
|
||||
BoltIcon,
|
||||
UsersIcon,
|
||||
CircleStackIcon,
|
||||
RectangleGroupIcon,
|
||||
CreditCardIcon,
|
||||
ChatBubbleLeftRightIcon,
|
||||
ShareIcon,
|
||||
ChartBarIcon,
|
||||
UserGroupIcon,
|
||||
ChartBarSquareIcon,
|
||||
DevicePhoneMobileIcon,
|
||||
CheckIcon,
|
||||
SparklesIcon,
|
||||
InformationCircleIcon,
|
||||
ServerIcon,
|
||||
PhoneIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
export default function Home() {
|
||||
const [isAnnual, setIsAnnual] = useState(false);
|
||||
|
||||
// Componente helper para ícones de redes sociais (mantém como SVG simples)
|
||||
const LinkedInIcon = () => (
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
|
||||
);
|
||||
|
||||
const TwitterIcon = () => (
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
||||
);
|
||||
|
||||
const InstagramIcon = () => (
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
@@ -17,7 +52,7 @@ export default function Home() {
|
||||
<div className="max-w-7xl mx-auto px-6 lg:px-8 grid lg:grid-cols-2 gap-14 items-center">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-brand rounded-full text-sm font-semibold text-white shadow-lg shadow-brand-20 mb-8">
|
||||
<i className="ri-rocket-line text-base"></i>
|
||||
<RocketLaunchIcon className="w-4 h-4" />
|
||||
<span>Plataforma de Gestão Financeira</span>
|
||||
</div>
|
||||
|
||||
@@ -30,23 +65,23 @@ export default function Home() {
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center gap-4">
|
||||
<Link href="http://dash.localhost/cadastro" className="px-8 py-3 bg-brand text-white font-semibold rounded-xl hover:opacity-90 transition-opacity shadow-lg shadow-brand-20">
|
||||
<i className="ri-arrow-right-line mr-2"></i>
|
||||
<Link href="http://dash.localhost/cadastro" className="inline-flex items-center px-8 py-3 bg-brand text-white font-semibold rounded-xl hover:opacity-90 transition-opacity shadow-lg shadow-brand-20">
|
||||
<ArrowRightIcon className="w-5 h-5 mr-2" />
|
||||
Começar Grátis
|
||||
</Link>
|
||||
<Link href="#demo" className="px-8 py-3 rounded-xl border border-zinc-300 text-zinc-700 dark:text-white font-semibold hover:border-transparent hover:bg-brand hover:text-white transition-all">
|
||||
<i className="ri-play-circle-line mr-2"></i>
|
||||
<Link href="#demo" className="inline-flex items-center px-8 py-3 rounded-xl border border-zinc-300 text-zinc-700 dark:text-white font-semibold hover:border-transparent hover:bg-brand hover:text-white transition-all">
|
||||
<PlayCircleIcon className="w-5 h-5 mr-2" />
|
||||
Ver Demo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex items-center gap-6 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<i className="ri-shield-check-line text-lg gradient-text"></i>
|
||||
<ShieldCheckIcon className="w-5 h-5 gradient-text" />
|
||||
Segurança bancária
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<i className="ri-flashlight-line text-lg gradient-text"></i>
|
||||
<BoltIcon className="w-5 h-5 gradient-text" />
|
||||
Automatizações inteligentes
|
||||
</div>
|
||||
</div>
|
||||
@@ -112,20 +147,20 @@ export default function Home() {
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{[
|
||||
{ id: "crm", icon: "ri-customer-service-2-line", title: "CRM Inteligente", desc: "Automatize funis, acompanhe negociações e tenha visão 360° dos clientes em tempo real." },
|
||||
{ id: "erp", icon: "ri-database-2-line", title: "ERP Financeiro", desc: "Centralize contas a pagar/receber, fluxo de caixa e integrações bancárias sem planilhas." },
|
||||
{ id: "gestao-projetos", icon: "ri-trello-line", title: "Gestão de Projetos", desc: "Planeje sprints, distribua tarefas e monitore entregas com dashboards interativos." },
|
||||
{ id: "gestao-pagamentos", icon: "ri-secure-payment-line", title: "Gestão de Pagamentos", desc: "Controle cobranças, split de receitas e reconciliação automática com gateways líderes." },
|
||||
{ id: "helpdesk", icon: "ri-customer-service-line", title: "Helpdesk 360°", desc: "Organize tickets, SLAs e base de conhecimento para oferecer suporte premium." },
|
||||
{ id: "integra", icon: "ri-share-forward-line", title: "Integrações API", desc: "Conecte a Aggios com BI, contabilidade e ferramentas internas via API segura." },
|
||||
{ id: "crm", Icon: UsersIcon, title: "CRM Inteligente", desc: "Automatize funis, acompanhe negociações e tenha visão 360° dos clientes em tempo real." },
|
||||
{ id: "erp", Icon: CircleStackIcon, title: "ERP Financeiro", desc: "Centralize contas a pagar/receber, fluxo de caixa e integrações bancárias sem planilhas." },
|
||||
{ id: "gestao-projetos", Icon: RectangleGroupIcon, title: "Gestão de Projetos", desc: "Planeje sprints, distribua tarefas e monitore entregas com dashboards interativos." },
|
||||
{ id: "gestao-pagamentos", Icon: CreditCardIcon, title: "Gestão de Pagamentos", desc: "Controle cobranças, split de receitas e reconciliação automática com gateways líderes." },
|
||||
{ id: "helpdesk", Icon: ChatBubbleLeftRightIcon, title: "Helpdesk 360°", desc: "Organize tickets, SLAs e base de conhecimento para oferecer suporte premium." },
|
||||
{ id: "integra", Icon: ShareIcon, title: "Integrações API", desc: "Conecte a Aggios com BI, contabilidade e ferramentas internas via API segura." },
|
||||
].map((item) => (
|
||||
<div id={item.id} key={item.id} className="relative rounded-4xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950/80 backdrop-blur-xl p-8 shadow-lg overflow-hidden">
|
||||
<div className="absolute -top-20 -right-10 h-40 w-40 rounded-full bg-brand-soft blur-3xl" aria-hidden="true"></div>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6 relative z-10">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-3 mb-4 px-4 py-2 rounded-full border border-zinc-200 dark:border-zinc-800 text-xs uppercase tracking-[0.2em] text-zinc-500">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-2xl bg-brand text-white text-lg">
|
||||
<i className={item.icon}></i>
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-2xl bg-brand text-white">
|
||||
<item.Icon className="w-5 h-5" />
|
||||
</span>
|
||||
{item.title}
|
||||
</div>
|
||||
@@ -163,7 +198,7 @@ export default function Home() {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-dashboard-3-line text-2xl text-white"></i>
|
||||
<ChartBarIcon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Dashboard Inteligente</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Visualize todos os seus dados financeiros em tempo real com gráficos e métricas intuitivas.</p>
|
||||
@@ -171,7 +206,7 @@ export default function Home() {
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-team-line text-2xl text-white"></i>
|
||||
<UserGroupIcon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Gestão de Clientes</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Organize e acompanhe todos os seus clientes com informações detalhadas e histórico completo.</p>
|
||||
@@ -179,7 +214,7 @@ export default function Home() {
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-file-chart-line text-2xl text-white"></i>
|
||||
<ChartBarSquareIcon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Relatórios Avançados</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Gere relatórios detalhados e personalizados para tomar decisões mais assertivas.</p>
|
||||
@@ -187,7 +222,7 @@ export default function Home() {
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-secure-payment-line text-2xl text-white"></i>
|
||||
<ShieldCheckIcon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Segurança Total</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Seus dados protegidos com criptografia de ponta e backup automático na nuvem.</p>
|
||||
@@ -195,7 +230,7 @@ export default function Home() {
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-smartphone-line text-2xl text-white"></i>
|
||||
<DevicePhoneMobileIcon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Acesso Mobile</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Gerencie seu negócio de qualquer lugar com nossa plataforma responsiva e intuitiva.</p>
|
||||
@@ -203,7 +238,7 @@ export default function Home() {
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-brand-20 transition-all">
|
||||
<div className="w-12 h-12 bg-brand rounded-xl flex items-center justify-center mb-6">
|
||||
<i className="ri-customer-service-2-line text-2xl text-white"></i>
|
||||
<ChatBubbleLeftRightIcon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Suporte 24/7</h3>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Conte com nossa equipe especializada sempre que precisar, em qualquer horário.</p>
|
||||
@@ -270,15 +305,15 @@ export default function Home() {
|
||||
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-600 dark:text-zinc-300">Todos os módulos inclusos</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-600 dark:text-zinc-300">Portal white-label</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-600 dark:text-zinc-300">1GB de armazenamento</span>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -312,19 +347,19 @@ export default function Home() {
|
||||
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
<span>Todos os módulos inclusos</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
<span>Portal white-label</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
<span>1GB de armazenamento</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 mt-0.5 flex-shrink-0" />
|
||||
<span>Suporte prioritário</span>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -355,27 +390,27 @@ export default function Home() {
|
||||
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-600 dark:text-zinc-300">Todos os módulos inclusos</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-600 dark:text-zinc-300">Portal white-label</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-600 dark:text-zinc-300">1GB de armazenamento</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-900 dark:text-white">Suporte prioritário</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-900 dark:text-white">Gerente de conta dedicado</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-900 dark:text-white">API para integrações</span>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -390,7 +425,7 @@ export default function Home() {
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="font-heading font-bold text-2xl">Enterprise</h3>
|
||||
<i className="ri-vip-crown-line text-xl text-yellow-400"></i>
|
||||
<SparklesIcon className="w-5 h-5 text-yellow-400" />
|
||||
</div>
|
||||
<p className="text-sm text-zinc-400 mb-4">301+ usuários (colaboradores + clientes)</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
@@ -400,15 +435,15 @@ export default function Home() {
|
||||
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-300">Tudo do plano Cosmos +</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-zinc-300">Armazenamento customizado</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2 text-sm font-semibold">
|
||||
<i className="ri-check-line text-brand mt-0.5"></i>
|
||||
<CheckIcon className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
|
||||
<span className="text-white">Treinamento personalizado</span>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -421,8 +456,8 @@ export default function Home() {
|
||||
|
||||
{/* Nota sobre desconto */}
|
||||
<div className="text-center mt-8">
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400">
|
||||
<i className="ri-information-line mr-1"></i>
|
||||
<p className="text-sm text-zinc-500 dark:text-zinc-400 flex items-center justify-center gap-2">
|
||||
<InformationCircleIcon className="w-4 h-4" />
|
||||
Todos os planos com <span className="font-semibold text-emerald-600 dark:text-emerald-400">20% OFF</span> no pagamento anual
|
||||
{isAnnual && <span className="ml-1">(equivalente a 2,4 meses grátis)</span>}
|
||||
</p>
|
||||
@@ -443,7 +478,7 @@ export default function Home() {
|
||||
<div className="bg-zinc-50 dark:bg-zinc-800/50 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700 transition-all">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 bg-brand rounded-lg flex items-center justify-center">
|
||||
<i className="ri-group-line text-white text-lg"></i>
|
||||
<UserGroupIcon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<h4 className="font-semibold text-lg text-zinc-900 dark:text-white transition-colors">Usuários Extras</h4>
|
||||
</div>
|
||||
@@ -454,7 +489,7 @@ export default function Home() {
|
||||
<div className="bg-zinc-50 dark:bg-zinc-800/50 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700 transition-all">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 bg-brand rounded-lg flex items-center justify-center">
|
||||
<i className="ri-hard-drive-line text-white text-lg"></i>
|
||||
<ServerIcon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<h4 className="font-semibold text-lg text-zinc-900 dark:text-white transition-colors">Storage Extra</h4>
|
||||
</div>
|
||||
@@ -478,12 +513,12 @@ export default function Home() {
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<Link href="http://dash.localhost/cadastro" className="px-6 py-3 bg-brand text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
|
||||
<i className="ri-rocket-line mr-2"></i>
|
||||
<Link href="http://dash.localhost/cadastro" className="inline-flex items-center px-6 py-3 bg-brand text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
|
||||
<RocketLaunchIcon className="w-5 h-5 mr-2" />
|
||||
Começar Grátis Agora
|
||||
</Link>
|
||||
<Link href="#contact" className="px-6 py-3 border-2 border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all">
|
||||
<i className="ri-phone-line mr-2"></i>
|
||||
<Link href="#contact" className="inline-flex items-center px-6 py-3 border-2 border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-brand hover:text-white transition-all">
|
||||
<PhoneIcon className="w-5 h-5 mr-2" />
|
||||
Falar com Especialista
|
||||
</Link>
|
||||
</div>
|
||||
@@ -509,13 +544,13 @@ export default function Home() {
|
||||
</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-brand transition-all group">
|
||||
<i className="ri-linkedin-line text-lg group-hover:text-white"></i>
|
||||
<LinkedInIcon />
|
||||
</a>
|
||||
<a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-brand transition-all group">
|
||||
<i className="ri-twitter-line text-lg group-hover:text-white"></i>
|
||||
<TwitterIcon />
|
||||
</a>
|
||||
<a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-brand transition-all group">
|
||||
<i className="ri-instagram-line text-lg group-hover:text-white"></i>
|
||||
<InstagramIcon />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user