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.

​
Welcome to Proyecto Renacer

Proyecto Renacer is a social housing initiative designed exclusively for families in Ambato, Ecuador who currently rent and dream of owning their first home. The project aims to consolidate 64 founding members for the delivery and legalization of their first land plot in the strategic Chaupi San Luis sector.
This documentation covers the technical implementation of the Proyecto Renacer website, built as a modern, accessible web application to help families learn about and join the housing initiative.

​
Mission and Goals

The Proyecto Renacer website serves families seeking their first home by providing:
  • Clear Information: Comprehensive details about the social housing project, requirements, and enrollment process
  • Transparency: A 4-year history showcasing the project’s journey from organization to consolidation
  • Community Engagement: Information about mingas (community work), reforestation efforts, and collective activities
  • MIDUVI Support: Official backing from Ecuador’s Ministry of Housing (MIDUVI) for low-income families

Target Audience

Families who do not own property in Ecuador, currently rent in Ambato, and are committed to community organization and building their permanent home.

​
Technology Stack

Proyecto Renacer is built with modern web technologies focused on performance, accessibility, and maintainability.

​
Core Technologies

Astro 5.17.1

Modern static site generator for content-focused websites with excellent performance

Tailwind CSS 4.2.1

Utility-first CSS framework with Vite integration for rapid UI development

TypeScript

Type-safe development for data structures and component props

Google Fonts

Public Sans for typography and Material Symbols for iconography

​
Configuration

The project uses a streamlined Astro configuration with Tailwind CSS via Vite:
astro.config.mjs
// @ts-check
import { defineConfig } from 'astro/config';
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});
TypeScript is configured with strict mode for enhanced type safety:
tsconfig.json
{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"]
}

​
Key Features

​
1. Responsive Landing Page

The homepage (src/pages/index.astro) features:
  • Hero Section: Compelling call-to-action with project overview
  • Social Proof: Dynamic display of current members (32 out of 64 founding members)
  • Project Timeline: Interactive 4-year history visualization
  • Community Work: Photo galleries showcasing mingas and reforestation efforts
---
import { socios } from "../data/state";
const title = "Proyecto de Vivienda Social Renacer | Terrenos en Ambato";
---

<p class="text-sm font-medium text-slate-500">
  Más de {socios.actual} familias ya son parte de este sueño.
</p>

​
2. Component Library

The project includes a set of reusable Astro components:
  • Button: Multi-variant button component with support for primary, secondary, dark, light, WhatsApp, and Facebook styles
  • CardSm/CardMd/CardLg: Card components for different content layouts
  • Header: Sticky navigation with backdrop blur and dark mode support
  • Footer: Site footer with navigation links
  • Layout: Base layout with SEO optimization and OpenGraph support
All components use Tailwind CSS with a custom design system featuring primary and secondary brand colors, responsive breakpoints, and dark mode support.

​
3. SEO & Accessibility

The Layout.astro component provides comprehensive SEO features: 
---
const { title, description, image, OGTitle, OGDescription, OGImage } = Astro.props;
---

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    <meta name="description" content={description} />
    <meta name="robots" content="index,follow" />
    <OpenGraph
      OGTitle={OGTitle ?? title}
      OGDescription={OGDescription ?? description}
      OGImage={OGImage ?? image}
    />
  </head>
</html>

​
4. Dynamic State Management

Project data is centralized in TypeScript modules for easy updates:
src/data/state.ts
export const socios = {
  maximo: 64,
  actual: 32,
  porcentaje: () => Math.round((socios.actual / socios.maximo) * 100),
}

​
5. Multi-Page Structure

The website includes dedicated pages for different user journeys:
  • / - Landing page with project overview
  • /proyecto - Detailed project history and values
  • /requisitos - Eligibility requirements
  • /como-ser-socio - How to become a member
  • /noticias - Project news and updates
  • /contacto - Contact and meeting scheduling

​
Architecture Overview

​
File Structure

renacer/
├── src/
│   ├── components/       # Reusable Astro components
│   │   ├── Button.astro
│   │   ├── Header.astro
│   │   ├── Footer.astro
│   │   └── ...
│   ├── layouts/          # Page layouts
│   │   └── Layout.astro
│   ├── pages/            # File-based routing
│   │   ├── index.astro
│   │   ├── proyecto.astro
│   │   ├── requisitos.astro
│   │   └── ...
│   ├── data/             # TypeScript data models
│   │   └── state.ts
│   └── styles/           # Global styles
│       └── global.css
├── astro.config.mjs      # Astro configuration
├── tsconfig.json         # TypeScript configuration
└── package.json          # Dependencies and scripts

​
Design System

The project uses a consistent design system with:
1

Color Palette

Primary (green tones) for CTAs and brand elements, Secondary (complementary colors) for accents, and neutral slate colors for text and backgrounds
2

Typography

Public Sans font family with weights from 300-900 for hierarchical text styling
3

Components

Material Symbols Outlined icons for consistent iconography throughout the interface
4

Spacing & Layout

Tailwind’s spacing scale with responsive padding (px-4 md:px-20 lg:px-40) for consistent margins

​
Responsive Design

All components are mobile-first with responsive breakpoints: 
<section class="px-4 md:px-20 lg:px-40 py-12 md:py-20 
                flex flex-col lg:flex-row items-center gap-12">
  <!-- Mobile: stacked column, Desktop: side-by-side row -->
</section>

​
Analytics & Tracking

The website includes Ahrefs Analytics for visitor tracking and engagement metrics: 
<script
  src="https://analytics.ahrefs.com/analytics.js"
  data-key="sASfd12IOBxOqgA/S0QsDQ"
  async
></script>
Ensure analytics scripts are loaded asynchronously to avoid blocking page rendering and maintain optimal performance scores.

​
Next Steps

Quickstart

Get the project running locally in minutes

Components

Explore the component library and usage examples

Deployment

Learn how to deploy to production

Styling

Customize colors, fonts, and content

Build docs developers (and LLMs) love

Get started for freeTalk to us