Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/DavidEspinozaRomero/Proyecto-de-vivienda-social-renacer/llms.txt

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

​
Footer Component

The Footer component provides a comprehensive site footer with multi-column layout including branding, navigation links, contact details, and social media.

​
Overview

Location: /workspace/source/src/components/Footer.astro:1-94 The footer is a standalone component that requires no props and can be imported and used on any page.

​
Structure

The footer uses a four-column grid layout (responsive to single column on mobile):
  1. Brand column (spans 2 columns) - Logo and project description
  2. Navigation column - Quick links to main pages
  3. Contact column - Contact information and social media

​
Usage Example

Standard implementation (from index.astro:434) 
<Layout title={title} description={description}>
  <Header />
  <div class="relative flex min-h-screen w-full flex-col overflow-x-hidden">
    <main class="flex-1">
      <!-- Page content -->
    </main>
  </div>
  <Footer />
</Layout>

​
Content Sections

Logo and tagline: 
<div class="flex items-center gap-2 text-primary mb-6">
  <span class="material-symbols-outlined text-3xl">home_pin</span>
  <h2 class="text-2xl font-black tracking-tighter uppercase">RENACER</h2>
</div>
<p class="text-slate-400 max-w-sm">
  Proyecto de vivienda social enfocado en brindar dignidad y estabilidad a
  las familias ambateñas. Juntos construimos el sueño de la casa propia.
</p>
Available links:
  • Sobre el Proyecto → /proyecto
  • Requisitos → /requisitos
  • Contacto → /contacto
  • Como ser Socio → /como-ser-socio
Implementation: 
<div>
  <h4 class="font-bold mb-6">Navegación</h4>
  <ul class="space-y-4 text-slate-400">
    <li>
      <a class="hover:text-primary transition-colors" href="/proyecto">
        Sobre el Proyecto
      </a>
    </li>
    <!-- Additional links... -->
  </ul>
</div>
Email (Footer.astro:44-48): 
arquitectomariojimenez@gmail.com
Phone numbers (Footer.astro:50-61):
  • 09 9973 0617
  • 09 6288 3324
Address (Footer.astro:62-67): 
Sector Chaupi San Luis, Ambato
Social media (Footer.astro:69-90):
  • Facebook link with custom SVG icon
  • Link: https://www.facebook.com/people/Proyecto-de-Vivienda-Social-Renacer/61580276345234/

​
Contact Item Pattern

Each contact item follows this structure: 
<li class="flex items-center gap-3">
  <span class="material-symbols-outlined text-primary text-sm">
    mail
  </span>
  arquitectomariojimenez@gmail.com
</li>
Icons used:
  • mail - Email addresses
  • phone - Phone numbers
  • location_on - Physical address

​
Styling Details

​
Container

bg-slate-900 text-white
px-4 md:px-20 lg:px-40 py-16

​
Grid Layout

grid md:grid-cols-4 gap-12 mb-12

​
Typography

  • Headings: font-bold mb-6
  • Body text: text-slate-400
  • Links: hover:text-primary transition-colors

​
Social Media Icon

The Facebook icon is an inline SVG with:
  • Facebook brand color (#0866FF)
  • 40x40px size
  • Two-tone design (blue background, white “f” logo)

​
Responsive Behavior

​
Mobile (below md breakpoint)

  • Single column stacked layout
  • Full width sections
  • Maintained spacing with gap-12

​
Desktop (md and up)

  • Four-column grid
  • Brand section spans 2 columns
  • Horizontal padding increases (px-20 lg:px-40)

​
Customization Examples

<ul class="space-y-4 text-slate-400">
  <li>
    <a class="hover:text-primary transition-colors" href="/proyecto">
      Sobre el Proyecto
    </a>
  </li>
  <!-- New link -->
  <li>
    <a class="hover:text-primary transition-colors" href="/galeria">
      Galería
    </a>
  </li>
  <!-- ... existing links -->
</ul>

​
Adding a new contact method

<li class="flex items-center gap-3">
  <span class="material-symbols-outlined text-primary text-sm">
    language
  </span>
  www.proyectorenacer.com
</li>

​
Adding another social media platform

<li>
  <a href="https://www.instagram.com/proyectorenacer">
    <!-- Instagram SVG icon -->
    <svg viewBox="0 0 24 24" fill="#E4405F" height="40" width="40">
      <!-- Instagram icon path -->
    </svg>
  </a>
</li>

​
Accessibility Considerations

  1. Semantic HTML: Uses proper heading hierarchy (<h2>, <h4>)
  2. Link text: All links have descriptive text (no “click here”)
  3. Icon labels: Material Symbols provide visual context
  4. Color contrast: White text on dark background meets WCAG standards
  5. Focus states: Links inherit default focus styles for keyboard navigation

​
Best Practices

  1. Consistency: Keep footer navigation in sync with header navigation
  2. Contact info: Always keep phone numbers and email current
  3. Social proof: Link to active, maintained social media accounts
  4. Legal compliance: Consider adding privacy policy and terms links if needed
  5. Microdata: Consider adding schema.org markup for organization contact info

​
Integration Example

Full page structure: 
---
import Layout from "../layouts/Layout.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---

<Layout title="Page Title" description="Page description">
  <Header />
  <main>
    <!-- Page content -->
  </main>
  <Footer />
</Layout>

Build docs developers (and LLMs) love

Get started for freeTalk to us