Mink’a Landing Page

Economía circular al alcance de tu comunidad

🧭 Tabla de Contenidos

• 🧭 Tabla de Contenidos
• 📌 Descripción del Proyecto
• 🎯 Segmento Objetivo
• 🌟 Características Principales
• 🏗️ Arquitectura de la Landing
• 🚀 Tecnologías Utilizadas
• 🛠️ Guía de Uso y Desarrollo
• 👥 Autores
• 🔗 Acceso Rápido

📌 Descripción del Proyecto

Mink’a es una plataforma digital orientada a la economía circular y el trueque comunitario. Esta landing page comunica la propuesta de valor de la solución, presenta beneficios claves y acompaña al usuario hacia el registro y la descarga del prototipo interactivo.

🎯 Segmento Objetivo

• Personas urbanas en Lima Metropolitana con interés en reducir costos y fomentar la reutilización.
• Usuarios que desean intercambiar objetos y servicios de forma segura, confiable y transparente.
• Comunidades que promueven prácticas sostenibles, colaborativas y de impacto ambiental positivo.

🌟 Características Principales

• Diseño responsivo: experiencia consistente en dispositivos móviles, tabletas y escritorio.
• Accesibilidad base: uso de roles ARIA, contraste AA y soporte para navegación por teclado.
• Secciones informativas clave:
  • Hero con CTA principal.
  • Tres pasos que explican cómo funciona Mink’a.
  • Beneficios del trueque y su aporte al ahorro.
  • Indicadores de impacto ambiental y social.
  • Voces reales de la comunidad (testimonios).
• Optimización del performance: imágenes comprimidas y carga diferida para conexiones limitadas.
• Despliegue automatizado: integración con GitHub Pages para actualizaciones rápidas.

🏗️ Arquitectura de la Landing

astro.config.mjs              # Salida estática, base /minka, build.format "file", sitemap
src/
├── pages/                    # Rutas: index.astro (landing), 404.astro y pages/*.astro
│                             # (auth, busqueda, home, detalle, publicar, dashboard, comunidad,
│                             #  notificaciones, gamification, perfil, settings, chat, about)
├── components/
│   ├── layout/               # BaseLayout, AppLayout (sidebar + main + rail), AppSidebar, AppTabBar,
│                             # AppHeader, SiteHeader/Footer, AuthHeader
│   ├── brand/                # Logotype y Logomark (SVG)
│   ├── ui/                   # Primitivas compartidas: Button, Badge, Avatar, Card, Modal, PageHead,
│                             # EmptyState/ErrorState/Skeleton, Sticker, BlobMedia, ...
│   └── landing/ auth/ search/ home/ detail/ publish/ dashboard/
│       exchange/ notifications/   # Componentes por área
├── assets/images/            # Imágenes optimizadas con astro:assets (AVIF/WebP + srcset)
├── styles/
│   ├── tokens.css            # Única fuente de design tokens
│   ├── fonts.css             # @font-face (WOFF2)
│   ├── global.css            # Base, utilidades y preferencias de accesibilidad
│   ├── app.css               # Estilos compartidos del shell de la app
│   ├── states.css            # Estados vacío / error / carga compartidos
│   └── pages/                # Estilos por página
├── scripts/
│   ├── pages/                # Comportamiento por página (módulos ES)
│   ├── lib/                  # Helpers puros con tests (estados, i18n tr(), Q&A, búsqueda, QR, ...)
│   ├── menu-disclosure.ts    # Menú móvil accesible (Escape, foco, focus trap)
│   ├── reveal.ts             # Animaciones de aparición
│   └── tokens.ts             # Colores de tokens para canvas (Chart.js)
└── lib/                      # Utilidades TS: url/asset con base, sesión, categorías, eco
public/                       # Copiado tal cual a dist/
├── favicon.ico
└── assets/
    ├── fonts/                # Inter y Fraunces (variables) en WOFF2
    ├── images/               # Imágenes con URL estable usadas desde JS (items, avatares)
    └── scripts/core/         # Scripts clásicos compartidos (store, session, guard, i18n, toast, modal)

Lenguaje visual (tokens, tipografía, shell de la app, primitivas y checks visuales): docs/visual-language.md.

🚀 Tecnologías Utilizadas

• Astro (salida estática) como herramienta de build.
• HTML5 semántico para estructura y contenido.
• CSS3 (flexbox, grid y variables personalizadas) para estilos responsivos.
• JavaScript ES6+ para interactividad ligera y progresiva.
• GitHub Pages para hosting continuo.
• Flujo de trabajo GitFlow para organización del equipo.

🛠️ Guía de Uso y Desarrollo

1. Clona el repositorio: git clone https://github.com/Reflow-Tech-UPC/Minka-Landingpage.git
2. Instala dependencias: requiere Node 24 (ver .nvmrc); ejecuta npm install.
3. Ejecuta en local: npm run dev y abre http://localhost:4321/minka/.
   • npm run build: genera el sitio estático en dist/ (incluye 404.html y sitemap-index.xml).
   • npm run preview: sirve dist/ para validar el build.
   • npm run check: revisa tipos y plantillas con astro check.
   • npm test: tests unitarios de los helpers (node --test, carpeta tests/).
4. Crea una rama de trabajo: git checkout -b feature/nueva-seccion
5. Haz commit con convenciones claras (ej. feat: agrega sección de preguntas frecuentes).
6. Publica en GitHub Pages: al fusionar con la rama principal, el workflow ejecuta npm ci && npm run build y publica dist/ en GitHub Pages.

👥 Autores

• Leonardo Chávez
• Lucero Pipa
• Ronel Rojas
• Andy Salcedo
• Miguel Sanca
• Jahat Trinidad

🔗 Acceso Rápido

• Landing Page: https://trinity-bytes.github.io/minka/
• Repositorio: https://github.com/trinity-bytes/minka

💚 Construido con dedicación para impulsar la colaboración y la sostenibilidad por el team Reflow Tech.