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

feat: site institucional completo com design system - Implementa\u00e7\u00e3o do site institucional da Aggios com design system completo incluindo gradientes, tipografia, componentes e se\u00e7\u00f5es de recursos, pre\u00e7os e CTA

Browse Source
This commit is contained in:
Erik Silva
2025-12-07 02:19:08 -03:00
parent 53f240a4da
commit bf6707e746
90 changed files with 25927 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
front-end-dash.aggios.app/components/cadastro/DashboardPreview.tsx Normal file
View File

@@ -0,0 +1,153 @@
"use client";
interface DashboardPreviewProps {
companyName: string;
subdomain: string;
primaryColor: string;
secondaryColor: string;
logoUrl?: string;
}
export default function DashboardPreview({
companyName,
subdomain,
primaryColor,
secondaryColor,
logoUrl
}: DashboardPreviewProps) {
return (
<div className="bg-white rounded-lg border-2 border-[#E5E5E5] overflow-hidden shadow-lg">
{/* Header do Preview */}
<div className="bg-[#F5F5F5] px-3 py-2 border-b border-[#E5E5E5] flex items-center gap-2">
<div className="flex gap-1.5">
<div className="w-3 h-3 rounded-full bg-[#FF5F57]" />
<div className="w-3 h-3 rounded-full bg-[#FFBD2E]" />
<div className="w-3 h-3 rounded-full bg-[#28CA42]" />
</div>
<div className="flex-1 text-center">
<span className="text-xs text-[#7D7D7D]">
{subdomain || 'seu-dominio'}.aggios.app
</span>
</div>
</div>
{/* Conteúdo do Preview - Dashboard */}
<div className="aspect-video bg-[#F8F9FA] relative overflow-hidden">
{/* Sidebar */}
<div
className="absolute left-0 top-0 bottom-0 w-16 flex flex-col items-center py-4 gap-3"
style={{ backgroundColor: primaryColor }}
>
{/* Logo/Initial */}
<div className="w-10 h-10 rounded-lg bg-white/20 flex items-center justify-center text-white font-bold text-sm overflow-hidden">
{logoUrl ? (
<img src={logoUrl} alt="Logo" className="w-full h-full object-cover" />
) : (
<span>{(companyName || 'E')[0].toUpperCase()}</span>
)}
</div>
{/* Menu Icons */}
<div className="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center">
<i className="ri-dashboard-line text-white text-lg" />
</div>
<div className="w-10 h-10 rounded-lg flex items-center justify-center text-white/60">
<i className="ri-folder-line text-lg" />
</div>
<div className="w-10 h-10 rounded-lg flex items-center justify-center text-white/60">
<i className="ri-team-line text-lg" />
</div>
<div className="w-10 h-10 rounded-lg flex items-center justify-center text-white/60">
<i className="ri-settings-3-line text-lg" />
</div>
</div>
{/* Main Content */}
<div className="ml-16 p-4">
{/* Top Bar */}
<div className="flex items-center justify-between mb-4">
<div>
<h2 className="text-sm font-bold text-[#000000]">
{companyName || 'Sua Empresa'}
</h2>
<p className="text-xs text-[#7D7D7D]">Dashboard</p>
</div>
<div className="flex gap-2">
<div className="w-6 h-6 rounded-full bg-[#E5E5E5]" />
<div className="w-6 h-6 rounded-full bg-[#E5E5E5]" />
</div>
</div>
{/* Stats Cards */}
<div className="grid grid-cols-3 gap-2 mb-3">
<div className="bg-white rounded-lg p-2 border border-[#E5E5E5]">
<div className="flex items-center gap-2 mb-1">
<div
className="w-6 h-6 rounded flex items-center justify-center"
style={{ backgroundColor: `${primaryColor}20` }}
>
<i className="ri-folder-line text-xs" style={{ color: primaryColor }} />
</div>
<span className="text-[10px] text-[#7D7D7D]">Projetos</span>
</div>
<p className="text-sm font-bold" style={{ color: primaryColor }}>24</p>
</div>
<div className="bg-white rounded-lg p-2 border border-[#E5E5E5]">
<div className="flex items-center gap-2 mb-1">
<div
className="w-6 h-6 rounded flex items-center justify-center"
style={{ backgroundColor: secondaryColor ? `${secondaryColor}20` : '#10B98120' }}
>
<i className="ri-team-line text-xs" style={{ color: secondaryColor || '#10B981' }} />
</div>
<span className="text-[10px] text-[#7D7D7D]">Clientes</span>
</div>
<p className="text-sm font-bold" style={{ color: secondaryColor || '#10B981' }}>15</p>
</div>
<div className="bg-white rounded-lg p-2 border border-[#E5E5E5]">
<div className="flex items-center gap-2 mb-1">
<div className="w-6 h-6 rounded flex items-center justify-center bg-[#7D7D7D]/10">
<i className="ri-money-dollar-circle-line text-xs text-[#7D7D7D]" />
</div>
<span className="text-[10px] text-[#7D7D7D]">Receita</span>
</div>
<p className="text-sm font-bold text-[#7D7D7D]">R$ 45k</p>
</div>
</div>
{/* Chart Area */}
<div className="bg-white rounded-lg p-3 border border-[#E5E5E5]">
<div className="flex items-center justify-between mb-2">
<span className="text-xs font-semibold text-[#000000]">Desempenho</span>
<button
className="px-2 py-0.5 rounded text-[10px] text-white"
style={{ backgroundColor: primaryColor }}
>
Este mês
</button>
</div>
<div className="flex items-end gap-1 h-16">
{[40, 70, 45, 80, 60, 90, 75].map((height, i) => (
<div key={i} className="flex-1 flex flex-col justify-end">
<div
className="w-full rounded-t transition-all"
style={{
height: `${height}%`,
backgroundColor: i === 6 ? primaryColor : `${primaryColor}40`
}}
/>
</div>
))}
</div>
</div>
</div>
</div>
{/* Footer Preview */}
<div className="bg-[#F5F5F5] px-3 py-2 text-center border-t border-[#E5E5E5]">
<p className="text-[10px] text-[#7D7D7D]">
Preview do seu painel • As cores e layout podem ser ajustados
</p>
</div>
</div>
);
}