149 lines
9.6 KiB
TypeScript
149 lines
9.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import ThemeToggle from "@/components/ThemeToggle";
|
|
|
|
const navItems = [
|
|
{ href: "#features", label: "Recursos" },
|
|
{ href: "#pricing", label: "Preços" },
|
|
{ href: "#contact", label: "Contato" },
|
|
];
|
|
|
|
export default function Header() {
|
|
const [isMobileOpen, setIsMobileOpen] = useState(false);
|
|
|
|
const toggleMobileMenu = () => setIsMobileOpen((prev) => !prev);
|
|
const closeMobileMenu = () => setIsMobileOpen(false);
|
|
|
|
return (
|
|
<header className="fixed inset-x-0 top-0 z-50 border-b border-zinc-200/70 dark:border-zinc-800/70 bg-white/90 dark:bg-zinc-950/80 backdrop-blur-xl shadow-sm transition-colors">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<div className="flex items-center justify-between py-4">
|
|
<Link href="#" className="flex items-center gap-2" onClick={closeMobileMenu}>
|
|
<div className="w-8 h-8 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-lg flex items-center justify-center">
|
|
<span className="text-white font-bold text-sm">A</span>
|
|
</div>
|
|
<span className="font-heading font-bold text-xl text-zinc-900 dark:text-white transition-colors">aggios</span>
|
|
</Link>
|
|
|
|
<nav className="hidden md:flex items-center gap-6 lg:gap-8 text-sm font-medium relative">
|
|
{navItems.map((item) => (
|
|
<a key={item.href} href={item.href} className="text-zinc-600 dark:text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">
|
|
{item.label}
|
|
</a>
|
|
))}
|
|
<div className="relative group">
|
|
<button className="flex items-center gap-1 text-zinc-600 dark:text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">
|
|
Soluções
|
|
<i className="ri-arrow-down-s-line text-sm" />
|
|
</button>
|
|
<div className="invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-200 absolute left-1/2 -translate-x-1/2 top-full mt-6 w-screen max-w-6xl rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-2xl shadow-2xl p-8">
|
|
<div className="grid grid-cols-2 lg:grid-cols-3 gap-5">
|
|
{[
|
|
{ href: '#crm', icon: 'ri-customer-service-2-line', title: 'CRM Inteligente', desc: 'Funis, negociações e visão 360° de clientes.' },
|
|
{ href: '#erp', icon: 'ri-database-2-line', title: 'ERP Financeiro', desc: 'Fluxo de caixa, bancos e conciliação automática.' },
|
|
{ href: '#gestao-projetos', icon: 'ri-trello-line', title: 'Gestão de Projetos', desc: 'Boards, sprints e status em tempo real.' },
|
|
{ href: '#gestao-pagamentos', icon: 'ri-secure-payment-line', title: 'Gestão de Pagamentos', desc: 'Cobranças, split e gateways líderes.' },
|
|
{ href: '#helpdesk', icon: 'ri-customer-service-line', title: 'Helpdesk 360°', desc: 'Tickets, SLAs e base de conhecimento.' },
|
|
{ href: '#integra', icon: 'ri-share-forward-line', title: 'Integrações API', desc: 'Conexões com BI, contabilidade e apps internos.' },
|
|
].map((item) => (
|
|
<a key={item.href} href={item.href} className="flex items-start gap-3 rounded-2xl px-4 py-3 text-left text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100/70 dark:hover:bg-zinc-800/70 transition-colors">
|
|
<span className="mt-1 flex h-10 w-10 items-center justify-center rounded-2xl bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white text-xl">
|
|
<i className={item.icon}></i>
|
|
</span>
|
|
<span>
|
|
<span className="block font-semibold text-base text-zinc-900 dark:text-white">{item.title}</span>
|
|
<span className="block text-sm text-zinc-500 dark:text-zinc-400">{item.desc}</span>
|
|
</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div className="hidden md:flex items-center gap-4">
|
|
<ThemeToggle />
|
|
<Link href="http://dash.localhost/login" className="text-zinc-600 dark:text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all font-medium">
|
|
Entrar
|
|
</Link>
|
|
<Link href="http://dash.localhost/cadastro" className="px-6 py-2 bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
|
|
Começar Grátis
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="md:hidden flex items-center gap-4">
|
|
<ThemeToggle />
|
|
<button
|
|
onClick={toggleMobileMenu}
|
|
aria-label="Abrir menu"
|
|
className="w-11 h-11 rounded-2xl border border-zinc-200 dark:border-zinc-800 flex items-center justify-center text-2xl text-zinc-700 dark:text-zinc-200"
|
|
>
|
|
<i className={isMobileOpen ? "ri-close-line" : "ri-menu-line"}></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`md:hidden fixed inset-x-4 top-20 rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-white/95 dark:bg-zinc-950/95 backdrop-blur-2xl shadow-2xl p-6 transition-all duration-200 ${isMobileOpen ? "opacity-100 visible translate-y-0" : "opacity-0 invisible -translate-y-2"
|
|
}`}
|
|
>
|
|
<div className="space-y-4">
|
|
{navItems.map((item) => (
|
|
<a
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={closeMobileMenu}
|
|
className="flex items-center justify-between text-lg font-semibold text-zinc-900 dark:text-white"
|
|
>
|
|
{item.label}
|
|
<i className="ri-arrow-right-up-line text-xl text-zinc-400"></i>
|
|
</a>
|
|
))}
|
|
<div className="pt-4 border-t border-zinc-200 dark:border-zinc-800">
|
|
<p className="text-sm uppercase tracking-[0.3em] text-zinc-500 mb-4">Soluções</p>
|
|
<div className="space-y-3">
|
|
{[
|
|
{ href: '#crm', title: 'CRM Inteligente' },
|
|
{ href: '#erp', title: 'ERP Financeiro' },
|
|
{ href: '#gestao-projetos', title: 'Gestão de Projetos' },
|
|
{ href: '#gestao-pagamentos', title: 'Gestão de Pagamentos' },
|
|
{ href: '#helpdesk', title: 'Helpdesk 360°' },
|
|
{ href: '#integra', title: 'Integrações API' },
|
|
].map((item) => (
|
|
<a
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={closeMobileMenu}
|
|
className="flex items-center justify-between rounded-2xl border border-zinc-200 dark:border-zinc-800 px-4 py-3 text-zinc-700 dark:text-zinc-300"
|
|
>
|
|
{item.title}
|
|
<i className="ri-arrow-right-line"></i>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="pt-4 space-y-3">
|
|
<Link
|
|
href="http://dash.localhost/login"
|
|
onClick={closeMobileMenu}
|
|
className="w-full px-5 py-3 rounded-2xl border border-zinc-200 dark:border-zinc-800 text-center font-semibold text-zinc-700 dark:text-zinc-200"
|
|
>
|
|
Entrar
|
|
</Link>
|
|
<Link
|
|
href="http://dash.localhost/cadastro"
|
|
onClick={closeMobileMenu}
|
|
className="w-full px-5 py-3 rounded-2xl bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold shadow-lg"
|
|
>
|
|
Começar Grátis
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|