Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/fredy-rizo/despacho-frontend/llms.txt

Use this file to discover all available pages before exploring further.

The Lex Consultoría landing page is the primary entry point for prospective clients. Served at the root path /, it is wrapped in MainLayout.vue and rendered by startPage.vue → startComponent.vue. Visitors are greeted with a bold hero section, a curated grid of the firm’s six legal specialties, an inline appointment booking form, and a smooth-sliding footer that fades in only when the user scrolls to the bottom of the page — all without requiring a user account or login.

​
App Shell — MainLayout

Every public page is wrapped in MainLayout.vue, which provides a clean, white elevated header built with Quasar’s q-header and q-toolbar components.

Branding

The toolbar displays a Bootstrap Icons bank SVG (cdn.jsdelivr.net/npm/bootstrap-icons) styled in Lex Consultoría blue (#1368C7), followed by the bold text Lex Consultoria at font-weight: 600.

Router Outlet

Below the header, <q-page-container> houses a <router-view /> that swaps child pages — startPage, whoWeArePage, and dashboardPage — without reloading the shell.
The header renders identically on every route that uses MainLayout, including /info_who_we_are. The admin /dashboard route also reuses this layout.

​
Route Configuration

// src/router/routes.js
{
  path: "/",
  component: () => import("src/layouts/MainLayout.vue"),
  children: [
    { path: "", component: () => import("src/pages/users/start/startPage.vue") },
    { path: "/info_who_we_are", component: () => import("../pages/users/whoWeAre/whoWeArePage.vue") },
    { path: "/dashboard", component: () => import("../pages/users/whoWeAre/dashboardPage.vue") },
  ],
}
All three routes share the same white-header shell. The catch-all /:catchAll(.*)* redirects unmatched paths to ErrorNotFound.vue.

​
Hero Section

The page opens with a full-width q-card (flat, bordered) that renders in a horizontal layout — headline copy on the left and the firm’s logo image on the right.
ElementValue
Primary headingExpertos en Asesoría Legal
Sub-headingMás de 20 años de experiencia defendiento tus derechos con profesionalismo y dedicación
Logosrc/assets/logo/logo3.png, displayed at width: 500px
Directly below the hero, the component renders the section heading Nuestros servicios and six hover-animated q-card elements (each 320 × 220 px) in two rows of three. Each card displays a Line Awesome icon, a service name, and a one-line description.

Derecho Civil

las la-balance-scale — Contratos, propiedades y asuntos civiles

Derecho Familiar

las la-users — Divorcios, custodia y herencias

Derecho Mercantil

las la-briefcase — Empresas, sociedades y comercio

Derecho Penal

las la-gavel — Defensa y representación legal

Derecho Laboral

las la-id-card — Contratos y conflictos laborales

Derecho Inmobiliario

las la-home — Compra, venta y arrendamientos
Cards use the .card-hover scoped CSS class which applies a translateY(-6px) lift and box-shadow on :hover, implemented purely via a CSS transition — no JavaScript required.

​
Appointment Booking Form

Immediately after the services grid, the page renders a centered 650 px-wide q-card titled Reserva tu Consulta. The form lets any visitor schedule a legal consultation without creating an account.
The booking form fields, the API endpoint (POST http://localhost:2101/api/form/reserve/create), validation rules, and the Quasar Notify success/error handling are documented in detail on the Appointment Booking page.
The footer is implemented as a Vue <transition name="fade"> wrapping a v-show directive driven by an IntersectionObserver. This means the footer fades in (opacity: 0 → 1 over 0.6s) only when the user scrolls far enough to bring an invisible 1 px sentinel <div> into the viewport — then fades back out when the sentinel leaves. 
// startComponent.vue — observer setup
onMounted(() => {
  observer = new IntersectionObserver(
    ([entry]) => {
      mostrarFooter.value = entry.isIntersecting
    },
    { threshold: 0.1 },
  )

  if (sentinela.value) {
    observer.observe(sentinela.value)
  }
})

onBeforeUnmount(() => {
  if (observer && sentinela.value) {
    observer.unobserve(sentinela.value)
  }
})
The observer is cleaned up in onBeforeUnmount to prevent memory leaks during route transitions. The footer itself is a three-column bg-primary text-white band with rounded top corners (border-top-left-radius: 12px; border-top-right-radius: 12px):

Brand Column

Bootstrap Icons bi-balance-scale in yellow (#F9D85B), firm name Lex Consultoría, and the tagline Defensa legal profesional con más de 20 años de experiencia.

Contact Column

Phone: +34 900 000 000
Email: info@lexconsultoria.com
Location: Madrid, España

Hours Column

Lunes – Viernes: 9:00 – 19:00
Sábados: 10:00 – 14:00
Domingos: Cerrado
A thin white separator line (border-bottom: 1px solid rgba(255,255,255,0.2)) divides the columns from the copyright line:
© 2025 Lex Consultoría. Todos los derechos reservados.

​
Who We Are Page — /info_who_we_are

The secondary public page, rendered by whoWeAreComponent.vue, presents the firm’s identity through three structured q-card sections. Like startComponent.vue, it uses the identical IntersectionObserver + sentinel pattern to animate its own footer.
A top q-card with the heading Quiénes Somos and an introductory paragraph referencing the TuKit brand — this content is present in the current source and is pending update to reflect Lex Consultoría’s legal services identity.
Like startComponent.vue, the /info_who_we_are page also implements the IntersectionObserver + sentinel pattern for its animated footer, using the same threshold: 0.1 configuration and the same fade CSS transition (opacity 0.6s). The observer is cleaned up in onBeforeUnmount in both components.

Build docs developers (and LLMs) love

Get started for freeTalk to us