erik/aggios.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implementação de submenus laterais (flyout), correções de UI e proteção de rotas (AuthGuard)

Browse Source
This commit is contained in:
Erik Silva
2025-12-12 15:24:38 -03:00
parent 83ce15bb36
commit 04c954c3d9
36 changed files with 2628 additions and 923 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
frontend-aggios.app/app/design-system/README.md Normal file
View File

@@ -0,0 +1,107 @@
# Design System - Aggios Platform
Documentação visual completa do Design System da plataforma Aggios.
## Acesso
Acesse em: `/design-system`
## O que está incluído
### 🎨 Cores
- **Brand Colors**: Paleta completa de azul (50-950)
- **Gray Scale**: Escala de cinzas (50-950)
- **Surface Colors**: Cores de superfície (light, dark, muted, card)
- **Text Colors**: Cores de texto (primary, secondary, inverse)
### 📏 Espaçamentos
- `xs` - 4px (0.25rem)
- `sm` - 8px (0.5rem)
- `md` - 16px (1rem)
- `lg` - 24px (1.5rem)
- `xl` - 32px (2rem)
- `2xl` - 48px (3rem)
### ✍️ Tipografia
- **Headings**: Arimo (h1-h6)
- **Body**: Inter (text-xs até text-xl)
- **Code**: Fira Code (monospace)
### 🔲 Bordas
- Border Radius: De `rounded-none` até `rounded-full`
- Border Styles: Solid, dashed, diferentes espessuras
- Border Colors: Variações de zinc e brand
### 🌈 Gradientes
- Brand Gradient (`bg-brand`)
- Primary Gradient (`var(--gradient-primary)`)
- Accent Gradient (`var(--gradient-accent)`)
- Gradient Text (`.gradient-text`)
### 🎭 Sombras
- Sistema de elevação completo
- Sombras com brand color (`shadow-brand-20`)
### 🎯 Ícones
- Heroicons (biblioteca completa - outline e solid)
- Exemplos de uso em diferentes contextos
- Integração perfeita com Headless UI
### 🔘 Componentes
#### Botões
- Primary, Secondary, Outline, Ghost
- Icon Buttons
- Estados: Normal, Hover, Disabled, Loading
#### Cards
- Basic, Elevated, Gradient
- Icon Card, Stat Card, Interactive Card
#### Inputs
- Text, Email, Textarea
- Input with Icon
- Select, Checkbox, Radio
#### Badges
- Status Badges (success, info, warning, error)
- Pill Badges
- Count Badges
- Dot Indicators
## Variáveis CSS
Todas as variáveis estão definidas em `app/tokens.css`:
```css
--color-brand-500
--color-gray-200
--spacing-md
--gradient-primary
--focus-ring
```
## Classes Utilitárias
```css
.bg-brand /* Gradiente de marca */
.bg-brand-soft /* Gradiente suave */
.gradient-text /* Texto com gradiente */
.shadow-brand-20 /* Sombra com cor da marca */
.font-heading /* Fonte para headings (Open Sans) */
```
## Dark Mode
Todos os componentes suportam dark mode automático através da classe `.dark` no HTML.
Toggle disponível na página do Design System.
## Uso
Para usar qualquer componente, copie o código HTML/JSX diretamente da página do Design System.
---
**Versão**: 1.0
**Data**: 2025

877
frontend-aggios.app/app/design-system/page.tsx Normal file
View File

@@ -0,0 +1,877 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import { Listbox } from "@headlessui/react";
import {
SunIcon,
MoonIcon,
HomeIcon,
UserIcon,
Cog6ToothIcon,
BellIcon,
MagnifyingGlassIcon,
HeartIcon,
StarIcon,
DocumentIcon,
FolderIcon,
EnvelopeIcon,
PhoneIcon,
CalendarIcon,
ClockIcon,
MapPinIcon,
PhotoIcon,
VideoCameraIcon,
MusicalNoteIcon,
ArrowDownTrayIcon,
ArrowUpTrayIcon,
ShareIcon,
PencilIcon,
TrashIcon,
CheckIcon,
XMarkIcon,
PlusIcon,
RocketLaunchIcon,
EllipsisHorizontalIcon,
ArrowRightIcon,
FireIcon,
ShoppingCartIcon,
ChevronUpDownIcon,
} from "@heroicons/react/24/outline";
const options = [
{ id: 1, name: 'Opção 1' },
{ id: 2, name: 'Opção 2' },
{ id: 3, name: 'Opção 3' },
];
export default function DesignSystemPage() {
const [darkMode, setDarkMode] = useState(false);
const [selectedOption, setSelectedOption] = useState(options[0]);
const toggleDarkMode = () => {
setDarkMode(!darkMode);
document.documentElement.classList.toggle('dark');
};
const iconList = [
{ name: 'HomeIcon', component: HomeIcon },
{ name: 'UserIcon', component: UserIcon },
{ name: 'Cog6ToothIcon', component: Cog6ToothIcon },
{ name: 'BellIcon', component: BellIcon },
{ name: 'MagnifyingGlassIcon', component: MagnifyingGlassIcon },
{ name: 'HeartIcon', component: HeartIcon },
{ name: 'StarIcon', component: StarIcon },
{ name: 'DocumentIcon', component: DocumentIcon },
{ name: 'FolderIcon', component: FolderIcon },
{ name: 'EnvelopeIcon', component: EnvelopeIcon },
{ name: 'PhoneIcon', component: PhoneIcon },
{ name: 'CalendarIcon', component: CalendarIcon },
{ name: 'ClockIcon', component: ClockIcon },
{ name: 'MapPinIcon', component: MapPinIcon },
{ name: 'PhotoIcon', component: PhotoIcon },
{ name: 'VideoCameraIcon', component: VideoCameraIcon },
{ name: 'MusicalNoteIcon', component: MusicalNoteIcon },
{ name: 'ArrowDownTrayIcon', component: ArrowDownTrayIcon },
{ name: 'ArrowUpTrayIcon', component: ArrowUpTrayIcon },
{ name: 'ShareIcon', component: ShareIcon },
{ name: 'PencilIcon', component: PencilIcon },
{ name: 'TrashIcon', component: TrashIcon },
{ name: 'CheckIcon', component: CheckIcon },
{ name: 'XMarkIcon', component: XMarkIcon },
];
return (
<div className={darkMode ? 'dark' : ''}>
<div className="min-h-screen bg-white dark:bg-zinc-950 transition-colors">
{/* Header fixo */}
<header className="sticky top-0 z-50 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl border-b border-zinc-200 dark:border-zinc-800">
<div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
<span className="text-white font-bold">A</span>
</div>
<div>
<h1 className="font-heading font-bold text-xl text-zinc-900 dark:text-white">Design System</h1>
<p className="text-xs text-zinc-500 dark:text-zinc-400">Aggios Platform v1.2</p>
</div>
</div>
<div className="flex items-center gap-4">
<button
onClick={toggleDarkMode}
className="px-3 py-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all flex items-center gap-2 text-sm"
>
{darkMode ? <SunIcon className="w-4 h-4" /> : <MoonIcon className="w-4 h-4" />}
{darkMode ? 'Light' : 'Dark'}
</button>
<Link href="/" className="px-3 py-1.5 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center gap-2 text-sm" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
<HomeIcon className="w-4 h-4" />
Home
</Link>
</div>
</div>
</header>
<main className="max-w-7xl mx-auto px-6 py-12">
{/* Navegação rápida */}
<nav className="mb-12 p-4 bg-zinc-50 dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800">
<p className="text-xs uppercase tracking-wider text-zinc-500 mb-3">Navegação Rápida</p>
<div className="flex flex-wrap gap-2">
{['Cores', 'Espaçamentos', 'Tipografia', 'Bordas', 'Gradiente', 'Sombras', 'Ícones', 'Botões', 'Cards', 'Inputs', 'Badges'].map(item => (
<a
key={item}
href={`#${item.toLowerCase()}`}
className="px-3 py-1.5 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-xs font-medium text-zinc-700 dark:text-zinc-300 hover:border-transparent hover:text-white transition-all"
style={{
transition: 'all 0.2s',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = 'linear-gradient(135deg, #ff3a05, #ff0080)';
}}
onMouseLeave={(e) => {
if (darkMode) {
e.currentTarget.style.background = 'rgb(39 39 42)';
} else {
e.currentTarget.style.background = 'white';
}
}}
>
{item}
</a>
))}
</div>
</nav>
{/* CORES */}
<section id="cores" className="mb-16 scroll-mt-24">
<div className="mb-6">
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Cores</h2>
<p className="text-zinc-600 dark:text-zinc-400">Paleta de cores da plataforma Aggios</p>
</div>
{/* Brand Gradient */}
<div className="mb-6">
<h3 className="font-semibold text-xl text-zinc-900 dark:text-white mb-4">Brand Gradient</h3>
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
<div className="h-32 rounded-xl" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}></div>
<p className="text-sm font-mono text-zinc-500 mt-3">linear-gradient(135deg, #ff3a05, #ff0080)</p>
</div>
</div>
{/* Gray Scale */}
<div className="mb-6">
<h3 className="font-semibold text-xl text-zinc-900 dark:text-white mb-4">Gray Scale</h3>
<div className="grid grid-cols-2 md:grid-cols-5 lg:grid-cols-11 gap-3">
{[50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(shade => (
<div key={shade} className="space-y-2">
<div
className="h-20 rounded-lg border border-zinc-200 dark:border-zinc-700 shadow-sm"
style={{ backgroundColor: `var(--color-gray-${shade})` }}
></div>
<div className="text-center">
<p className="text-xs font-mono text-zinc-900 dark:text-white">gray-{shade}</p>
</div>
</div>
))}
</div>
</div>
{/* Surface & Text Colors */}
<div className="grid md:grid-cols-2 gap-4">
<div>
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-3">Surface Colors</h3>
<div className="space-y-2">
{[
{ name: 'surface-light', var: '--color-surface-light' },
{ name: 'surface-dark', var: '--color-surface-dark' },
{ name: 'surface-muted', var: '--color-surface-muted' },
{ name: 'surface-card', var: '--color-surface-card' },
].map(color => (
<div key={color.name} className="flex items-center gap-3">
<div
className="w-16 h-16 rounded-lg border border-zinc-200 dark:border-zinc-700 shadow-sm"
style={{ backgroundColor: `var(${color.var})` }}
></div>
<div>
<p className="text-xs font-mono font-semibold text-zinc-900 dark:text-white">{color.name}</p>
<p className="text-xs font-mono text-zinc-500">var({color.var})</p>
</div>
</div>
))}
</div>
</div>
<div>
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-3">Text Colors</h3>
<div className="space-y-2">
{[
{ name: 'text-primary', var: '--color-text-primary' },
{ name: 'text-secondary', var: '--color-text-secondary' },
{ name: 'text-inverse', var: '--color-text-inverse' },
].map(color => (
<div key={color.name} className="flex items-center gap-3">
<div
className="w-16 h-16 rounded-lg border border-zinc-200 dark:border-zinc-700 shadow-sm"
style={{ backgroundColor: `var(${color.var})` }}
></div>
<div>
<p className="text-xs font-mono font-semibold text-zinc-900 dark:text-white">{color.name}</p>
<p className="text-xs font-mono text-zinc-500">var({color.var})</p>
</div>
</div>
))}
</div>
</div>
</div>
</section>
{/* ESPAÇAMENTOS */}
<section id="espaçamentos" className="mb-16 scroll-mt-24">
<div className="mb-6">
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Espaçamentos</h2>
<p className="text-zinc-600 dark:text-zinc-400">Sistema de espaçamento compacto</p>
</div>
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
<div className="space-y-4">
{[
{ name: 'xs', value: '0.125rem', pixels: '2px' },
{ name: 'sm', value: '0.25rem', pixels: '4px' },
{ name: 'md', value: '0.5rem', pixels: '8px' },
{ name: 'lg', value: '0.75rem', pixels: '12px' },
{ name: 'xl', value: '1rem', pixels: '16px' },
{ name: '2xl', value: '1.5rem', pixels: '24px' },
].map(space => (
<div key={space.name} className="flex items-center gap-4">
<div className="w-28">
<p className="text-xs font-mono font-semibold text-zinc-900 dark:text-white">spacing-{space.name}</p>
<p className="text-xs font-mono text-zinc-500">{space.value} ({space.pixels})</p>
</div>
<div
className="rounded"
style={{
width: space.value,
height: '1.5rem',
background: 'linear-gradient(135deg, #ff3a05, #ff0080)'
}}
></div>
<div className="flex-1 text-xs text-zinc-500 dark:text-zinc-400">
var(--spacing-{space.name})
</div>
</div>
))}
</div>
</div>
</section>
{/* TIPOGRAFIA */}
<section id="tipografia" className="mb-16 scroll-mt-24">
<div className="mb-6">
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Tipografia</h2>
<p className="text-zinc-600 dark:text-zinc-400">Hierarquia de texto e famílias de fontes</p>
</div>
<div className="space-y-4">
{/* Headings */}
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Headings (Arimo)</h3>
<div className="space-y-3">
<div className="border-b border-zinc-100 dark:border-zinc-800 pb-3">
<h1 className="font-heading font-bold text-4xl text-zinc-900 dark:text-white">Heading 1</h1>
<p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-4xl</p>
</div>
<div className="border-b border-zinc-100 dark:border-zinc-800 pb-3">
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white">Heading 2</h2>
<p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-3xl</p>
</div>
<div className="border-b border-zinc-100 dark:border-zinc-800 pb-3">
<h3 className="font-heading font-bold text-2xl text-zinc-900 dark:text-white">Heading 3</h3>
<p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-2xl</p>
</div>
<div>
<h4 className="font-heading font-bold text-xl text-zinc-900 dark:text-white">Heading 4</h4>
<p className="text-xs font-mono text-zinc-500 mt-2">font-heading font-bold text-xl</p>
</div>
</div>
</div>
{/* Body Text */}
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Body Text (Inter)</h3>
<div className="space-y-3">
<div>
<p className="text-base text-zinc-900 dark:text-white">Text Base - The quick brown fox jumps over the lazy dog</p>
<p className="text-xs font-mono text-zinc-500 mt-1">text-base</p>
</div>
<div>
<p className="text-sm text-zinc-900 dark:text-white">Text SM - The quick brown fox jumps over the lazy dog</p>
<p className="text-xs font-mono text-zinc-500 mt-1">text-sm</p>
</div>
<div>
<p className="text-xs text-zinc-900 dark:text-white">Text XS - The quick brown fox jumps over the lazy dog</p>
<p className="text-xs font-mono text-zinc-500 mt-1">text-xs</p>
</div>
</div>
</div>
{/* Code Text */}
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Code (Fira Code)</h3>
<div className="space-y-3">
<div className="p-3 bg-zinc-900 dark:bg-zinc-950 rounded-lg">
<code className="font-mono text-sm text-emerald-400">const message = "Hello, Aggios!";</code>
</div>
<p className="text-xs font-mono text-zinc-500">font-mono - Fira Code</p>
</div>
</div>
</div>
</section>
{/* BORDAS */}
<section id="bordas" className="mb-16 scroll-mt-24">
<div className="mb-6">
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Bordas</h2>
<p className="text-zinc-600 dark:text-zinc-400">Border radius e estilos de borda</p>
</div>
<div className="grid md:grid-cols-2 gap-4">
{/* Border Radius */}
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Border Radius</h3>
<div className="space-y-3">
{[
{ name: 'rounded-none', class: 'rounded-none' },
{ name: 'rounded-sm', class: 'rounded-sm' },
{ name: 'rounded', class: 'rounded' },
{ name: 'rounded-lg', class: 'rounded-lg' },
{ name: 'rounded-xl', class: 'rounded-xl' },
{ name: 'rounded-2xl', class: 'rounded-2xl' },
{ name: 'rounded-full', class: 'rounded-full' },
].map(radius => (
<div key={radius.name} className="flex items-center gap-3">
<div className={`w-20 h-12 ${radius.class}`} style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}></div>
<p className="text-xs font-mono text-zinc-900 dark:text-white">{radius.name}</p>
</div>
))}
</div>
</div>
{/* Border Styles */}
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-4">Border Styles</h3>
<div className="space-y-3">
<div className="p-3 border border-zinc-200 dark:border-zinc-700 rounded-lg">
<p className="text-xs font-mono text-zinc-900 dark:text-white">border border-zinc-200</p>
</div>
<div className="p-3 border-2 border-zinc-200 dark:border-zinc-700 rounded-lg">
<p className="text-xs font-mono text-zinc-900 dark:text-white">border-2 border-zinc-200</p>
</div>
<div className="p-3 border border-dashed border-zinc-200 dark:border-zinc-700 rounded-lg">
<p className="text-xs font-mono text-zinc-900 dark:text-white">border border-dashed</p>
</div>
</div>
</div>
</div>
</section>
{/* GRADIENTE */}
<section id="gradiente" className="mb-16 scroll-mt-24">
<div className="mb-6">
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Gradiente</h2>
<p className="text-zinc-600 dark:text-zinc-400">Gradiente principal da marca</p>
</div>
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
<div className="h-32 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
<p className="text-white font-semibold">Brand Gradient</p>
</div>
<p className="text-sm font-mono text-zinc-500 mt-4">background: linear-gradient(135deg, #ff3a05, #ff0080)</p>
{/* Gradient Text */}
<div className="mt-6">
<h3 className="font-semibold text-lg text-zinc-900 dark:text-white mb-3">Gradient Text</h3>
<h2 className="font-heading font-bold text-4xl">
Texto com <span className="gradient-text">gradiente</span>
</h2>
<p className="text-xs font-mono text-zinc-500 mt-3">&lt;span className="gradient-text"&gt;</p>
</div>
</div>
</section>
{/* SOMBRAS */}
<section id="sombras" className="mb-16 scroll-mt-24">
<div className="mb-6">
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Sombras</h2>
<p className="text-zinc-600 dark:text-zinc-400">Sistema de elevação com sombras</p>
</div>
<div className="grid md:grid-cols-4 gap-4">
{[
{ name: 'shadow-sm', class: 'shadow-sm' },
{ name: 'shadow', class: 'shadow' },
{ name: 'shadow-md', class: 'shadow-md' },
{ name: 'shadow-lg', class: 'shadow-lg' },
].map(shadow => (
<div key={shadow.name} className="space-y-2">
<div className={`h-24 bg-white dark:bg-zinc-900 rounded-lg ${shadow.class} flex items-center justify-center border border-zinc-100 dark:border-zinc-800`}>
<p className="text-xs font-semibold text-zinc-900 dark:text-white">{shadow.name}</p>
</div>
<p className="text-xs font-mono text-zinc-500 text-center">{shadow.class}</p>
</div>
))}
</div>
</section>
{/* ÍCONES */}
<section id="ícones" className="mb-16 scroll-mt-24">
<div className="mb-6">
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Ícones</h2>
<p className="text-zinc-600 dark:text-zinc-400">Heroicons - biblioteca completa (outline)</p>
</div>
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
<div className="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-4">
{iconList.map(({ name, component: Icon }) => (
<div key={name} className="flex flex-col items-center gap-2 p-2 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-lg transition-colors">
<Icon className="w-6 h-6 text-zinc-900 dark:text-white" />
<p className="text-xs font-mono text-zinc-500 text-center leading-tight">{name}</p>
</div>
))}
</div>
</div>
</section>
{/* BOTÕES */}
<section id="botões" className="mb-16 scroll-mt-24">
<div className="mb-6">
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Botões</h2>
<p className="text-zinc-600 dark:text-zinc-400">Variações de botões com Headless UI</p>
</div>
<div className="space-y-6">
{/* Primary Buttons */}
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-4">Primary Buttons</h3>
<div className="flex flex-wrap gap-3">
<button className="px-4 py-2 text-white font-medium rounded-lg hover:opacity-90 transition-opacity flex items-center gap-2 text-sm" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
<PlusIcon className="w-4 h-4" />
Primary
</button>
<button className="px-3 py-1.5 text-white font-medium rounded-lg hover:opacity-90 transition-opacity text-xs" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
Small
</button>
<button className="px-5 py-2.5 text-white font-medium rounded-lg hover:opacity-90 transition-opacity text-sm" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
Medium
</button>
</div>
</div>
{/* Secondary Buttons */}
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-4">Secondary Buttons</h3>
<div className="flex flex-wrap gap-3">
<button className="px-4 py-2 border-2 border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:border-transparent hover:text-white transition-all text-sm"
onMouseEnter={(e) => e.currentTarget.style.background = 'linear-gradient(135deg, #ff3a05, #ff0080)'}
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
Secondary
</button>
<button className="px-4 py-2 border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all text-sm">
Outline
</button>
<button className="px-4 py-2 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all text-sm">
Ghost
</button>
</div>
</div>
{/* Icon Buttons */}
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-4">Icon Buttons</h3>
<div className="flex flex-wrap gap-3">
<button className="w-10 h-10 text-white rounded-lg hover:opacity-90 transition-opacity flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
<HeartIcon className="w-5 h-5" />
</button>
<button className="w-10 h-10 border-2 border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 rounded-lg hover:border-transparent hover:text-white transition-all flex items-center justify-center"
onMouseEnter={(e) => e.currentTarget.style.background = 'linear-gradient(135deg, #ff3a05, #ff0080)'}
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
<ShareIcon className="w-5 h-5" />
</button>
<button className="w-8 h-8 rounded-full text-white flex items-center justify-center hover:opacity-90 transition-opacity" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
<PlusIcon className="w-4 h-4" />
</button>
</div>
</div>
</div>
</section>
{/* CARDS */}
<section id="cards" className="mb-16 scroll-mt-24">
<div className="mb-6">
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Cards</h2>
<p className="text-zinc-600 dark:text-zinc-400">Diferentes estilos de cards</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
{/* Basic Card */}
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4">
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-2">Basic Card</h3>
<p className="text-zinc-600 dark:text-zinc-400 mb-3 text-sm">Card simples com borda e padding</p>
<button className="text-sm font-semibold hover:underline flex items-center gap-1" style={{ color: '#ff3a05' }}>
Saiba mais <ArrowRightIcon className="w-3 h-3" />
</button>
</div>
{/* Elevated Card */}
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 shadow-md hover:shadow-lg transition-shadow">
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-2">Elevated Card</h3>
<p className="text-zinc-600 dark:text-zinc-400 mb-3 text-sm">Card com sombra e hover effect</p>
<button className="text-sm font-semibold hover:underline flex items-center gap-1" style={{ color: '#ff3a05' }}>
Saiba mais <ArrowRightIcon className="w-3 h-3" />
</button>
</div>
{/* Gradient Card */}
<div className="rounded-xl p-4 text-white shadow-md" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
<h3 className="font-semibold text-base mb-2">Gradient Card</h3>
<p className="text-white/90 mb-3 text-sm">Card com fundo gradiente</p>
<button className="text-white text-sm font-semibold hover:underline flex items-center gap-1">
Saiba mais <ArrowRightIcon className="w-3 h-3" />
</button>
</div>
{/* Icon Card */}
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 hover:border-transparent hover:shadow-md transition-all">
<div className="w-10 h-10 rounded-lg flex items-center justify-center mb-3" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
<StarIcon className="w-5 h-5 text-white" />
</div>
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-2">Icon Card</h3>
<p className="text-zinc-600 dark:text-zinc-400 text-sm">Card com ícone em destaque</p>
</div>
{/* Stat Card */}
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4">
<p className="text-xs uppercase tracking-wide text-zinc-500 mb-1">Total Revenue</p>
<p className="text-2xl font-bold text-zinc-900 dark:text-white mb-1">R$ 128K</p>
<p className="text-xs text-emerald-500">+18% este mês</p>
</div>
{/* Interactive Card */}
<div className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 cursor-pointer hover:scale-105 transition-all"
onMouseEnter={(e) => e.currentTarget.style.borderColor = '#ff3a05'}
onMouseLeave={(e) => {
if (darkMode) {
e.currentTarget.style.borderColor = 'rgb(39 39 42)';
} else {
e.currentTarget.style.borderColor = 'rgb(228 228 231)';
}
}}>
<div className="flex items-center justify-between mb-3">
<div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
<BellIcon className="w-4 h-4 text-white" />
</div>
<span className="px-2 py-0.5 bg-red-100 text-red-600 text-xs font-semibold rounded-full">3</span>
</div>
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-1">Interactive Card</h3>
<p className="text-zinc-600 dark:text-zinc-400 text-sm">Clique para interagir</p>
</div>
</div>
</section>
{/* INPUTS */}
<section id="inputs" className="mb-16 scroll-mt-24">
<div className="mb-6">
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Inputs</h2>
<p className="text-zinc-600 dark:text-zinc-400">Campos de formulário com Headless UI</p>
</div>
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
<div className="space-y-4 max-w-2xl">
{/* Text Input */}
<div>
<label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
Text Input
</label>
<input
type="text"
placeholder="Digite algo..."
className="w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all"
style={{
'--tw-ring-color': '#ff3a05',
} as React.CSSProperties}
/>
</div>
{/* Email Input */}
<div>
<label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
Email Input
</label>
<input
type="email"
placeholder="seu@email.com"
className="w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all"
style={{
'--tw-ring-color': '#ff3a05',
} as React.CSSProperties}
/>
</div>
{/* Input with Icon */}
<div>
<label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
Input with Icon
</label>
<div className="relative">
<MagnifyingGlassIcon className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
<input
type="text"
placeholder="Buscar..."
className="w-full pl-10 pr-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all"
style={{
'--tw-ring-color': '#ff3a05',
} as React.CSSProperties}
/>
</div>
</div>
{/* Textarea */}
<div>
<label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
Textarea
</label>
<textarea
rows={3}
placeholder="Digite sua mensagem..."
className="w-full px-3 py-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg text-zinc-900 dark:text-white text-sm placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:border-transparent transition-all resize-none"
style={{
'--tw-ring-color': '#ff3a05',
} as React.CSSProperties}
></textarea>
</div>
{/* Select with Headless UI */}
<div>
<label className="block text-sm font-medium text-zinc-900 dark:text-white mb-2">
Select (Headless UI)
</label>
<Listbox value={selectedOption} onChange={setSelectedOption}>
<div className="relative">
<Listbox.Button className="relative w-full cursor-pointer rounded-lg bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 py-2 pl-3 pr-10 text-left text-sm focus:outline-none focus:ring-2 focus:border-transparent transition-all"
style={{
'--tw-ring-color': '#ff3a05',
} as React.CSSProperties}>
<span className="block truncate text-zinc-900 dark:text-white">{selectedOption.name}</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon
className="h-4 w-4 text-zinc-400"
aria-hidden="true"
/>
</span>
</Listbox.Button>
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-lg bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 py-1 text-sm shadow-lg focus:outline-none">
{options.map((option) => (
<Listbox.Option
key={option.id}
value={option}
>
{({ selected, active }) => (
<div
className={`relative cursor-pointer select-none py-2 pl-10 pr-4 ${
active ? 'text-white' : 'text-zinc-900 dark:text-white'
}`}
style={{
background: active ? 'linear-gradient(135deg, #ff3a05, #ff0080)' : 'transparent'
}}
>
<span
className={`block truncate ${
selected ? 'font-medium' : 'font-normal'
}`}
>
{option.name}
</span>
{selected ? (
<span className="absolute inset-y-0 left-0 flex items-center pl-3">
<CheckIcon className="h-4 w-4" aria-hidden="true" />
</span>
) : null}
</div>
)}
</Listbox.Option>
))}
</Listbox.Options>
</div>
</Listbox>
</div>
{/* Checkbox */}
<div className="flex items-center gap-2">
<input
type="checkbox"
id="check1"
className="w-4 h-4 bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 rounded focus:ring-2"
style={{
accentColor: '#ff3a05',
'--tw-ring-color': '#ff3a05',
} as React.CSSProperties}
/>
<label htmlFor="check1" className="text-sm text-zinc-900 dark:text-white">
Checkbox Label
</label>
</div>
{/* Radio */}
<div className="space-y-2">
<div className="flex items-center gap-2">
<input
type="radio"
id="radio1"
name="radio"
className="w-4 h-4 bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 focus:ring-2"
style={{
accentColor: '#ff3a05',
'--tw-ring-color': '#ff3a05',
} as React.CSSProperties}
/>
<label htmlFor="radio1" className="text-sm text-zinc-900 dark:text-white">
Radio Option 1
</label>
</div>
<div className="flex items-center gap-2">
<input
type="radio"
id="radio2"
name="radio"
className="w-4 h-4 bg-white dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 focus:ring-2"
style={{
accentColor: '#ff3a05',
'--tw-ring-color': '#ff0080',
} as React.CSSProperties}
/>
<label htmlFor="radio2" className="text-sm text-zinc-900 dark:text-white">
Radio Option 2
</label>
</div>
</div>
</div>
</div>
</section>
{/* BADGES */}
<section id="badges" className="mb-16 scroll-mt-24">
<div className="mb-6">
<h2 className="font-heading font-bold text-3xl text-zinc-900 dark:text-white mb-2">Badges</h2>
<p className="text-zinc-600 dark:text-zinc-400">Tags, badges e status indicators</p>
</div>
<div className="bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 p-6">
<div className="space-y-4">
{/* Status Badges */}
<div>
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Status Badges</h3>
<div className="flex flex-wrap gap-2">
<span className="px-2 py-1 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 text-xs font-semibold">
Success
</span>
<span className="px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-xs font-semibold">
Info
</span>
<span className="px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-xs font-semibold">
Warning
</span>
<span className="px-2 py-1 rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 text-xs font-semibold">
Error
</span>
</div>
</div>
{/* Pill Badges */}
<div>
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Pill Badges</h3>
<div className="flex flex-wrap gap-2">
<span className="px-3 py-1.5 rounded-full text-white text-xs font-semibold shadow-md flex items-center gap-1.5" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
<RocketLaunchIcon className="w-3 h-3" />
Premium
</span>
<span className="px-3 py-1.5 rounded-full border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 text-xs font-semibold flex items-center gap-1.5">
<StarIcon className="w-3 h-3" />
New
</span>
<span className="px-3 py-1.5 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 text-xs font-semibold flex items-center gap-1.5">
<FireIcon className="w-3 h-3" />
Popular
</span>
</div>
</div>
{/* Count Badges */}
<div>
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Count Badges</h3>
<div className="flex flex-wrap gap-3 items-center">
<div className="relative">
<button className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
<BellIcon className="w-5 h-5 text-zinc-700 dark:text-zinc-300" />
</button>
<span className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center">
3
</span>
</div>
<div className="relative">
<button className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
<EnvelopeIcon className="w-5 h-5 text-zinc-700 dark:text-zinc-300" />
</button>
<span className="absolute -top-1 -right-1 w-4 h-4 text-white text-xs font-bold rounded-full flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #ff3a05, #ff0080)' }}>
9
</span>
</div>
<div className="relative">
<button className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
<ShoppingCartIcon className="w-5 h-5 text-zinc-700 dark:text-zinc-300" />
</button>
<span className="absolute -top-1.5 -right-1.5 px-1.5 py-0.5 bg-emerald-500 text-white text-xs font-bold rounded-full">
12
</span>
</div>
</div>
</div>
{/* Dot Indicators */}
<div>
<h3 className="font-semibold text-base text-zinc-900 dark:text-white mb-3">Dot Indicators</h3>
<div className="flex flex-wrap gap-3">
<div className="flex items-center gap-1.5">
<span className="w-2 h-2 bg-emerald-500 rounded-full"></span>
<span className="text-xs text-zinc-700 dark:text-zinc-300">Online</span>
</div>
<div className="flex items-center gap-1.5">
<span className="w-2 h-2 bg-yellow-500 rounded-full"></span>
<span className="text-xs text-zinc-700 dark:text-zinc-300">Away</span>
</div>
<div className="flex items-center gap-1.5">
<span className="w-2 h-2 bg-red-500 rounded-full"></span>
<span className="text-xs text-zinc-700 dark:text-zinc-300">Busy</span>
</div>
<div className="flex items-center gap-1.5">
<span className="w-2 h-2 bg-zinc-400 rounded-full"></span>
<span className="text-xs text-zinc-700 dark:text-zinc-300">Offline</span>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Footer */}
<div className="text-center py-8 border-t border-zinc-200 dark:border-zinc-800">
<p className="text-zinc-600 dark:text-zinc-400 text-sm">
Design System criado para <span className="font-bold gradient-text">Aggios Platform</span>
</p>
<p className="text-xs text-zinc-500 mt-2">
Versão 1.2 • 2025
</p>
</div>
</main>
</div>
</div>
);
}

14
frontend-aggios.app/app/globals.css
View File

@@ -14,6 +14,7 @@ html.dark {
body {
background-color: var(--color-surface-muted);
color: var(--color-text-primary);
font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
transition: background-color 0.25s ease, color 0.25s ease;
}
@@ -22,6 +23,12 @@ html.dark {
color: #f8fafc;
}
/* Força fonte Arimo nos headings */
h1, h2, h3, h4, h5, h6,
.font-heading {
font-family: var(--font-arimo), ui-sans-serif, system-ui, sans-serif !important;
}
::selection {
background-color: var(--color-brand-500);
color: var(--color-text-inverse);
@@ -73,6 +80,13 @@ html.dark {
.shadow-brand-20 {
box-shadow: 0 10px 15px -3px var(--color-brand-shadow-20), 0 4px 6px -4px var(--color-brand-shadow-20);
}
.gradient-text {
background: var(--color-gradient-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}
/* ========== Animations ========== */

11
frontend-aggios.app/app/layout.tsx
View File

@@ -1,5 +1,5 @@
import type { Metadata } from "next";
import { Inter, Open_Sans, Fira_Code } from "next/font/google";
import { Inter, Arimo, Fira_Code } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "next-themes";
@@ -9,10 +9,10 @@ const inter = Inter({
weight: ["400", "500", "600", "700"],
});
const openSans = Open_Sans({
variable: "--font-open-sans",
const arimo = Arimo({
variable: "--font-arimo",
subsets: ["latin"],
weight: ["600", "700"],
weight: ["400", "500", "600", "700"],
});
const firaCode = Fira_Code({
@@ -50,9 +50,8 @@ export default function RootLayout({
`,
}}
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" />
</head>
<body className={`${inter.variable} ${openSans.variable} ${firaCode.variable} antialiased`}>
<body className={`${inter.variable} ${arimo.variable} ${firaCode.variable} antialiased`}>
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false} storageKey="theme">
{children}
</ThemeProvider>

133
frontend-aggios.app/app/page.tsx
View File

@@ -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>

8
frontend-aggios.app/app/tokens.css
View File

@@ -1,5 +1,13 @@
/* Importar fontes do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Arimo:wght@400;500;600;700&family=Fira+Code:wght@400;600&display=swap');
@layer theme {
:root {
/* Fontes */
--font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-arimo: 'Arimo', ui-sans-serif, system-ui, sans-serif;
--font-fira-code: 'Fira Code', ui-monospace, 'SFMono-Regular', monospace;
/* Paleta de cores principais */
--color-brand-50: #f0f9ff;
--color-brand-100: #e0f2fe;