Skip to main content

​
Overview

Proyecto Renacer uses Astro’s file-based routing system. Each .astro file in /src/pages/ automatically becomes a route based on its filename.

​
Available Pages

index.astro

Home page at / - Main landing page with hero section

como-ser-socio.astro

How to become a member at /como-ser-socio

proyecto.astro

Project information at /proyecto

requisitos.astro

Requirements page at /requisitos

contacto.astro

Contact page at /contacto

noticias.astro

News page at /noticias

landing.astro

Alternative landing page at /landing

design-system.astro

Design system showcase at /design-system

​
Routing System

Astro’s file-based routing automatically creates routes:
File PathURL Route
/src/pages/index.astro/
/src/pages/proyecto.astro/proyecto
/src/pages/como-ser-socio.astro/como-ser-socio
/src/pages/requisitos.astro/requisitos
/src/pages/contacto.astro/contacto
/src/pages/noticias.astro/noticias

​
Page Structure

All pages follow a consistent structure:

​
Basic Page Anatomy

---
// 1. Imports
import Layout from "../layouts/Layout.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import Button from "../components/Button.astro";

// 2. Data and configuration
const title = "Page Title | Proyecto Renacer";
const description = "SEO description for this page";
---

<!-- 3. Template -->
<Layout title={title} description={description}>
  <Header />
  <main>
    <!-- Page content here -->
  </main>
  <Footer />
</Layout>

​
Frontmatter (Script Section)

The code between --- markers runs at build time:
  • Imports: Load components, layouts, and utilities
  • Data fetching: Import data from /src/data/
  • Props: Define page-specific variables
  • Server-side logic: Runs only during build, not in browser

​
Template Section

The HTML-like markup below the frontmatter defines the page structure.

​
Example: Home Page (index.astro)

Let’s examine the home page structure:
src/pages/index.astro
---
import Layout from "../layouts/Layout.astro";
import Header from "../components/Header.astro";
import CardMd from "../components/CardMd.astro";
import Button from "../components/Button.astro";
import CardSm from "../components/CardSm.astro";
import Footer from "../components/Footer.astro";

import { socios } from "../data/state";

const title = "Proyecto de Vivienda Social Renacer | Terrenos en Ambato";
const description = "Proyecto de vivienda social Renacer en Ambato...";
---

<Layout title={title} description={description}>
  <Header />
  <div class="relative flex min-h-screen w-full flex-col overflow-x-hidden">
    <main class="flex-1">
      <!-- Hero Section -->
      <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">
        <div class="flex-1 flex flex-col gap-8">
          <div class="space-y-4">
            <h1 class="text-4xl md:text-6xl font-black">
              Tu casa propia en Ambato
              <span class="text-primary">empieza aquí</span>
            </h1>
            <p class="text-lg text-slate-600 dark:text-slate-300 max-w-xl">
              Proyecto de Vivienda Social en Ambato con 4 años de historia...
            </p>
          </div>
          <div class="flex flex-wrap gap-4">
            <Button type="primary" link="/proyecto">
              Solicita información
            </Button>
            <Button type="light" link="/requisitos">
              Conoce los requisitos
            </Button>
          </div>
        </div>
        <div class="flex-1 w-full">
          <CardMd />
        </div>
      </section>
    </main>
  </div>
  <Footer />
</Layout>
Key features:
  • Uses shared Layout for consistent HTML structure
  • Imports data from state.ts for dynamic content
  • Multiple sections with semantic HTML
  • Responsive design with Tailwind classes
  • Component composition with Button, CardMd, etc.

​
Example: Como Ser Socio Page

This page demonstrates progress tracking:
src/pages/como-ser-socio.astro
---
import Layout from "../layouts/Layout.astro";
import Footer from "../components/Footer.astro";
import Header from "../components/Header.astro";
import { socios } from "../data/state";

const porcentaje = socios.porcentaje();
const title = "Cómo ser socio del Proyecto Renacer";
const description = "Descubre el proceso para convertirte en socio...";
---

<Layout title={title} description={description}>
  <Header />
  <main>
    <!-- Hero with background image -->
    <section class="relative">
      <div class="flex min-h-[520px] bg-cover bg-center" 
           style='background-image: linear-gradient(...), url(...)'>
        <h1 class="text-4xl lg:text-6xl font-black">
          Cómo ser socio del Proyecto Renacer
        </h1>
      </div>
    </section>
    
    <!-- 4-step process -->
    <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      <!-- Step 1 -->
      <div class="relative group">
        <h3 class="text-xl font-bold">Solicitar información</h3>
        <p>Primer contacto para conocer los beneficios...</p>
      </div>
      <!-- More steps... -->
    </section>
    
    <!-- Progress bar -->
    <section>
      <p class="text-4xl font-black text-primary">
        {socios.actual} <span class="text-xl">/ 64</span>
      </p>
      <div class="w-full bg-slate-100 h-6 rounded-full">
        <div class="bg-primary h-full rounded-full" 
             style={`width: ${porcentaje}%`}>
        </div>
      </div>
    </section>
  </main>
  <Footer />
</Layout>
Key features:
  • Dynamic progress calculation using socios.porcentaje()
  • Inline styles for dynamic width
  • Grid layouts for responsive step-by-step display
  • Hero section with background image

​
Data Flow

Pages can import and use shared data: 
---
import { socios } from "../data/state";

// Access data properties
const currentMembers = socios.actual;  // 32
const maxMembers = socios.maximo;      // 64
const progress = socios.porcentaje();  // 50
---

<p>Socios actuales: {currentMembers} de {maxMembers}</p>
<p>Progreso: {progress}%</p>

​
SEO and Meta Tags

Every page defines SEO-friendly metadata: 
---
const title = "Page Title | Proyecto Renacer";
const description = "Detailed SEO-optimized description...";
---

<Layout title={title} description={description}>
  <!-- Page content -->
</Layout>
The Layout component handles:
  • <title> tag
  • Meta descriptions
  • Open Graph tags
  • Structured data

​
Styling Approach

Pages use Tailwind CSS utility classes: 
<!-- Responsive padding -->
<section class="px-4 md:px-20 lg:px-40 py-12 md:py-20">
  <!-- Flexbox layout -->
  <div class="flex flex-col lg:flex-row items-center gap-12">
    <!-- Typography -->
    <h1 class="text-4xl md:text-6xl font-black text-slate-900 dark:text-white">
      Heading Text
    </h1>
  </div>
</section>
Common patterns:
  • px-4 md:px-20 lg:px-40 - Responsive horizontal padding
  • py-12 md:py-20 - Responsive vertical padding
  • flex-col lg:flex-row - Stack on mobile, row on desktop
  • dark: prefix - Dark mode variants
Pages link to each other using standard anchor tags: 
<a href="/proyecto">Ver el Proyecto</a>
<a href="/como-ser-socio">Cómo ser Socio</a>
<a href="/requisitos">Requisitos</a>
<a href="/contacto">Contacto</a>
Or using the Button component: 
<Button type="primary" link="/proyecto">
  Solicita información
</Button>

​
Component Composition

Pages compose smaller components: 
<CardSm
  title="Vivienda Social"
  text="Respaldo total del MIDUVI enfocado en familias..."
>
  <div class="w-14 h-14 rounded-xl bg-primary/10">
    <span class="material-symbols-outlined">real_estate_agent</span>
  </div>
</CardSm>
This creates reusable, maintainable page sections.

​
Best Practices

Only import what you need. Unused imports slow down builds.
Structure content with proper <section>, <article>, <header> tags for accessibility.
Every page should have unique title and description values.
Always include mobile-first responsive classes (sm:, md:, lg:).
If content repeats, extract it to a component.

​
Next Steps

Components

Learn about reusable UI components used in pages

Layouts

Understand how layouts wrap and structure pages