Pages

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 Path	URL 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

Keep frontmatter clean

Only import what you need. Unused imports slow down builds.

Use semantic HTML

Structure content with proper <section>, <article>, <header> tags for accessibility.

Define SEO metadata

Every page should have unique title and description values.

Responsive by default

Always include mobile-first responsive classes (sm:, md:, lg:).

Component reusability

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

Get Started

Project Structure

Guides

Overview

Available Pages

index.astro

como-ser-socio.astro

proyecto.astro

requisitos.astro

contacto.astro

noticias.astro

landing.astro

design-system.astro

Routing System

Page Structure

Basic Page Anatomy

Frontmatter (Script Section)

Template Section

Example: Home Page (index.astro)

Example: Como Ser Socio Page

Data Flow

SEO and Meta Tags

Styling Approach

Navigation Between Pages

Component Composition

Best Practices

Next Steps

Components

Layouts

Build docs developers (and LLMs) love

Get Started

Project Structure

Guides

Documentation Index

​Overview

​Available Pages

index.astro

como-ser-socio.astro

proyecto.astro

requisitos.astro

contacto.astro

noticias.astro

landing.astro

design-system.astro

​Routing System

​Page Structure

​Basic Page Anatomy

​Frontmatter (Script Section)

​Template Section

​Example: Home Page (index.astro)

​Example: Como Ser Socio Page

​Data Flow

​SEO and Meta Tags

​Styling Approach

​Navigation Between Pages

​Component Composition

​Best Practices

​Next Steps

Components

Layouts

Build docs developers (and LLMs) love

Overview

Available Pages

Routing System

Page Structure

Basic Page Anatomy

Frontmatter (Script Section)

Template Section

Example: Home Page (index.astro)

Example: Como Ser Socio Page

Data Flow

SEO and Meta Tags

Styling Approach

Navigation Between Pages

Component Composition

Best Practices

Next Steps