Xochitlanis Tourism Platform

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

​

Design Philosophy

​

Minimalism

• Spacious layouts: Ample whitespace for content to breathe
• Focused content: Each section has a clear purpose
• Clean typography: Inter font family (700 for headings, 400 for body)

​

Strong Typography

• Large headings: 48px-38px-30px-24px scale
• Bold titles: Font weight 700 for emphasis
• Clear hierarchy: Semantic HTML with proper heading levels

​

Microanimations

• Scroll reveals: Content fades in as you scroll
• Hover effects: Cards lift and show shadow on hover
• Smooth transitions: 300ms duration for all interactions

​

Page Sections

​

1. Hero Section

<Hero
  title="Xochitlanis te espera"
  subtitle="Descubre la magia de la Sierra de Zongolica a través de experiencias auténticas, rutas personalizadas y momentos únicos en comunidades nahuas."
  primaryCTA="Explorar experiencias"
  secondaryCTA="Ver mapa interactivo"
/>

• Dark background (gray-900) with orange gradient overlay
• Large title typography (text-5xl to text-8xl)
• Two call-to-action buttons
• Quick access category chips

​

2. About Xochitlanis

• Left column: Description of the tourism initiative
• Right column: Key metrics
  • 25+ unique experiences
  • 12 curated routes
  • 8 Náhuatl communities

​

3. Featured Experiences

• Category badge
• Title and description
• Difficulty and duration metadata
• View details link with arrow animation

​

4. Recommended Routes

1. Ruta Corta (2-3 hours): Quick nature getaway
2. Ruta de Día Completo (6-8 hours): Full cultural immersion
3. Ruta Familiar (4-5 hours): Family-friendly with easy access

• Duration estimate
• Difficulty level
• Distance covered
• Key attraction count
• Interactive map preview

​

5. Events Calendar

• Event date (highlighted)
• Event name and description
• Location information
• Category tag (Cultural, Gastronómico, Natural)

​

6. Visitor Services

​

7. Final Call-to-Action

• Orange gradient (from-orange-500 to-amber-600)
• Grid pattern overlay for depth
• Two action buttons:
  • Planear mi visita: Opens route planner
  • Contactar guía: Connects with local guides

​

Color System

/* Primary Brand Color */
--primary: #ff8200; /* Orange from municipal branding */

/* Secondary Colors */
--amber: #f59e0b;
--gray-900: #111827;
--gray-50: #f9fafb;

/* Accent Colors for Categories */
--nature: #22c55e;   /* Green */
--culture: #8b5cf6;  /* Purple */
--food: #f97316;     /* Orange */
--adventure: #0ea5e9; /* Blue */

​

Components

​

ExperienceCard

<ExperienceCard
  id="exp-1"
  titulo="Cascada de Atlahuitzia"
  categoria="Naturaleza"
  descripcionCorta="Waterfall adventure with scenic canyon views"
  duracion="2-3 horas"
  nivel="Moderado"
  imagen="/images/cascada.jpg"
/>

​

RouteCard

<RouteCard
  nombre="Ruta de Día Completo"
  descripcion="Immersive cultural experience"
  duracion="6-8 horas"
  nivel="Moderado"
  distancia="15 km"
  puntosClave={4}
  atractivos={['cascada-atlahuitzia', 'grutas', 'pueblo-nahua']}
/>

​

EventCard

<EventCard
  fecha="2026-07-15"
  nombre="Festival del Café"
  lugar="Plaza Principal, Zongolica"
  descripcion="Annual coffee harvest celebration"
  categoria="Gastronómico"
/>

​

Accessibility

• ✅ Semantic HTML headings (h1 → h2 → h3)
• ✅ Alt text for all images
• ✅ Keyboard navigation support
• ✅ Focus indicators (ring-4)
• ✅ Color contrast ratio > 4.5:1
• ✅ Reduced motion support via media queries
• ✅ ARIA labels for decorative elements

​

Performance

​

Optimizations

• Lazy loading: Images load only when visible
• Client directives: Interactive components use client:visible
• CSS-first animations: No heavy JS for animations
• Tree shaking: Import only needed components
• No external fonts: Uses system font stack (Inter)

​

Metrics

​

Responsive Design

​

Breakpoints

/* Mobile first approach */
base: 0px;     /* Mobile */
sm: 640px;     /* Small tablets */
lg: 1024px;    /* Desktop */

​

Grid Behavior

• Mobile: Single column layout
• Tablet (sm:): 2-column grids
• Desktop (lg:): 3-column grids

​

Typography Scale

/* Mobile → Desktop */
text-xl sm:text-2xl lg:text-4xl
text-2xl sm:text-3xl lg:text-5xl

​

Next Steps