Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Jesus-Puertos/h-ayuntamiento/llms.txt

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

​
Overview

The government portal serves as the official digital presence of the Ayuntamiento de Zongolica, providing citizens with access to municipal services, institutional information, and transparency documents.
All government pages are server-rendered for optimal SEO and accessibility.

​
Key Features

​
Institutional Information

The portal provides comprehensive information about the municipal government structure:

Gobierno

Municipal GovernmentInformation about the president, síndico, regidurías, and organizational structure.

Ejes

Government AxesStrategic pillars and focus areas of the current administration.

Directorio

DirectoryContact information for government officials and departments.

Plan de Desarrollo

Municipal Development PlanLong-term vision and strategic planning documents.

​
Municipal Services

Citizens can access various municipal services online:

​
Servicios (Services)

Location: /servicios Provides information about available municipal services including:
  • Public works and infrastructure
  • Civil registry services
  • Public safety and civil protection
  • Urban development and planning
  • Environmental services
src/pages/servicios/index.astro
---
export const prerender = false;
---

​
Trámites (Procedures)

Location: /tramites Online procedures and requirements for:
  • Permits and licenses
  • Property tax payments
  • Birth/death certificates
  • Business registrations
  • Construction permits
Procedures are configured as server-side rendered pages to ensure up-to-date information.

​
Transparency and Downloads

​
Transparency Portal

Location: /transparencia Public access to government transparency information:
  • Budget and financial reports
  • Procurement processes
  • Public employee directory
  • Legal framework and regulations
  • Public works contracts

​
Downloads Section

Location: /descargas Downloadable official documents:
  • PDF forms and formats
  • Regulations and bylaws
  • Reports and statistics
  • Public announcements
  • Municipal gazette

​
Directory of Officials

Location: /directorio Comprehensive directory system with: List View (/directorio/index.astro):
  • Grid of government officials
  • Department categorization
  • Search and filter capabilities
  • Contact information overview
Detail Pages (/directorio/[slug].astro):
  • Official biography and photo
  • Department responsibilities
  • Direct contact information
  • Office hours and location
src/pages/directorio/[slug].astro
---
import Layout from "@/layouts/Layout.astro";
export const prerender = false;

// Dynamic route for individual officials
const { slug } = Astro.params;
---

​
Call-to-Action Pages

Location: /cta/[slug] Dynamic alert and announcement system:

Emergency Alerts

Critical public safety announcements and emergency notifications

Public Notices

Important municipal announcements and public consultations

Event Announcements

Civic events, town halls, and community gatherings

Service Updates

Changes to municipal services and office closures
Implementation:
src/pages/cta/[slug].astro
---
export const prerender = false;

const { slug } = Astro.params;
// Fetch CTA data from CMS or API
const cta = await getCta(slug);
---
Display on Homepage:
src/pages/index.astro
---
import PromoBanner from "@/components/PromoBanner.astro";
import { getCtas } from "@/lib/getCtas";

const ctas = await getCtas();
---

<section id="avisos">
  {ctas.map((cta) => (
    <PromoBanner {...cta} accentColor="#FF8200" />
  ))}
</section>

​
Homepage Structure

The main portal homepage (/) includes:

​
Hero Section

Welcome banner with municipal identity:
  • Official escudo (coat of arms)
  • Welcome message
  • Key statistics
  • Quick links to services
src/pages/index.astro
<Hero />
Quick navigation to main sections: 
<Access />

​
CTA Banners

Dynamic announcement banners:
  • Fetched from CMS or database
  • Styled with municipal accent color (#FF8200)
  • Click-through to detail pages

​
Government Axes Grid

Visual grid showing administration focus areas: 
<EjesGrid />

​
Service Cards

Interactive cards linking to key sections: 
<a
  href="/gobierno"
  class="group block rounded-3xl border border-black/10 bg-white p-6 shadow-sm transition duration-500 hover:-translate-y-1 hover:shadow-xl hover:border-[#ff8200]/20 hover:bg-gradient-to-br hover:from-white hover:to-[#ff8200]/5"
>
  <div class="flex items-center justify-between gap-4">
    <div>
      <p class="text-xs font-extrabold tracking-wide text-black/60 uppercase">
        Información institucional
      </p>
      <h3 class="mt-2 text-2xl font-black text-[#111827] group-hover:text-[#ff8200] transition duration-300">
        Gobierno municipal
      </h3>
      <p class="mt-2 text-sm text-black/60">
        Conoce al presidente, síndico, regidurías y DIF.
      </p>
    </div>
    <span class="inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-[#ff8200] text-white">
      →
    </span>
  </div>
</a>

​
Design System

​
Color Palette

Primary Color: #FF8200 (Municipal Orange) 
/* Used throughout government portal */
.accent-color {
  color: #ff8200;
}

.accent-bg {
  background: #ff8200;
}

​
Typography

Font Family: Poppins
package.json
"dependencies": {
  "@fontsource/poppins": "^5.2.7"
}

​
Animations

Smooth fade-in animations for sections: 
<section class="animate-fadeIn" style="animation-delay: 0.1s">
  <!-- Content -->
</section>

​
Common Patterns

​
Page Layout

All government pages use the base layout: 
---
import Layout from "../layouts/Layout.astro";
---

<Layout
  title="Page Title - H. Ayuntamiento de Zongolica"
  description="Page description for SEO"
  image="/assets/logos/escudo.webp"
>
  <!-- Page content -->
</Layout>

​
Server-Side Rendering

Government pages are dynamically rendered: 
---
export const prerender = false;
---
This ensures:
  • Fresh content on every request
  • Dynamic CTA banners
  • Real-time service updates
  • SEO optimization

​
Responsive Design

Mobile-first approach with TailwindCSS: 
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Responsive grid -->
</div>

​
Integration Points

​
WordPress CMS (Optional)

Government content can be managed via WordPress: 
WP_BASE_URL=https://cms.zongolica.gob.mx
Fetch content in Astro pages: 
const response = await fetch(`${WP_BASE_URL}/wp-json/wp/v2/posts`);
const posts = await response.json();

​
Contact Forms

Email notifications via Resend: 
RESEND_API_KEY=re_xxxxxxxxxxxxx
RESEND_FROM=contacto@zongolica.gob.mx

​
Accessibility

Semantic HTML

Proper heading hierarchy and ARIA labels for screen readers

Keyboard Navigation

All interactive elements accessible via keyboard

Color Contrast

WCAG AA compliant color combinations

Responsive Text

Readable font sizes on all devices

​
SEO Optimization

​
Meta Tags

Every page includes:
  • Title (max 60 characters)
  • Description (max 160 characters)
  • Open Graph tags
  • Twitter Card tags
  • Canonical URLs

​
Structured Data

JSON-LD for government organizations: 
{
  "@context": "https://schema.org",
  "@type": "GovernmentOrganization",
  "name": "H. Ayuntamiento de Zongolica",
  "url": "https://zongolica.gob.mx"
}

​
Security

Government portals require enhanced security measures:
  • HTTPS Only - Enforce SSL/TLS encryption
  • CORS Policies - Restrict API access to authorized domains
  • Rate Limiting - Prevent abuse of contact forms
  • Input Validation - Sanitize all user input
  • Security Headers - CSP, X-Frame-Options, etc.

​
Next Steps

Tourism System

Learn about the Xochitlanis tourism platform

Multilingual Support

Manage Spanish, English, and Nahuatl translations

Build docs developers (and LLMs) love

Get started for freeTalk to us