style: rediseno de layout profesional en las 7 apps
Headers sticky con marca y acciones, contenedores max-w-[1280px], grids de contenido con rails laterales sticky (cotizador, mi-dia, detalle de cobranza), stepper vertical en el wizard de alta, toolbar+ tabla unificadas en cobranza, tabs como segmented control en dashboards, chat con barra de entrada fija y preguntas sugeridas, landing con navbar + hero + grid de modulos + footer.
This commit is contained in:
@@ -1,33 +1,44 @@
|
||||
import { MODULOS } from './data/modulos'
|
||||
import { Navbar } from './components/Navbar'
|
||||
import { TarjetaModulo } from './components/TarjetaModulo'
|
||||
import { ConfiguracionCuenta } from './components/ConfiguracionCuenta'
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col">
|
||||
<header className="border-b border-[#E5E7EB] bg-white px-6 pt-20 pb-16 sm:px-12 lg:px-24">
|
||||
<p className="text-xs font-semibold tracking-wider text-accent uppercase">
|
||||
FRASA Desarrollos <span aria-hidden="true" className="text-[#F97316]">●</span>
|
||||
</p>
|
||||
<h1 className="mt-4 text-4xl font-light text-[#111827] sm:text-5xl">
|
||||
Ecosistema comercial
|
||||
</h1>
|
||||
</header>
|
||||
<Navbar />
|
||||
|
||||
<main className="mx-auto w-full max-w-[1280px] flex-1 px-6">
|
||||
<section aria-labelledby="titulo-hero" className="py-12 sm:py-16">
|
||||
<h1
|
||||
id="titulo-hero"
|
||||
className="text-3xl font-semibold tracking-tight text-[#111827] sm:text-4xl"
|
||||
>
|
||||
Ecosistema comercial
|
||||
</h1>
|
||||
<p className="mt-3 max-w-2xl text-sm leading-relaxed text-[#64748B] sm:text-base">
|
||||
Las herramientas del equipo comercial de Frasa Desarrollos en un solo lugar:
|
||||
cotizaciones, alta de clientes, cobranza, tableros y asistente IA.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<main className="flex-1 px-6 sm:px-12 lg:px-24">
|
||||
<nav aria-label="Módulos del ecosistema">
|
||||
<ul className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{MODULOS.map((modulo) => (
|
||||
<TarjetaModulo key={modulo.id} modulo={modulo} />
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<ConfiguracionCuenta />
|
||||
<div className="mt-6">
|
||||
<ConfiguracionCuenta />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer className="px-6 pt-24 pb-10 sm:px-12 lg:px-24">
|
||||
<p className="text-xs text-[#64748B]">Consult (AS) Technology</p>
|
||||
<footer className="mt-16 border-t border-[#E5E7EB]">
|
||||
<div className="mx-auto max-w-[1280px] px-6 py-8">
|
||||
<p className="text-xs text-[#64748B]">Consult (AS) Technology</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user