Grano y Grano · Landing

Landing page de Grano y Grano, la app para compradores y productores de café y pimienta en Chiapas.

Next.js (App Router, export estático) · TypeScript · Tailwind CSS · shadcn/ui · Three.js (React Three Fiber)

Desarrollo

npm install
npm run dev      # http://localhost:3000
npm run build    # genera el sitio estático en out/

Cambiar precios y planes

Todo vive en src/features/landing/data/plans.ts:

• pricing.comprador, pricing.productor y pricing.ambos (paquete): nombre, frase, precio mensual/anual, botón, etiqueta y puntos clave de cada plan, más la tabla comparativa (true = ✓, false = —, texto = se muestra tal cual). comingSoon: true en una fila agrega la etiqueta "Próximamente".
• paymentsEnabled: mientras sea false, los botones de Platino y Max dicen "Próximamente". Cámbialo a true cuando haya pagos.
• harvestPasses, commission, founderOffer, trialDays y yearlyBadge.

Los montos son números en dólares (USD) con centavos (19.99); el formato $19.99 USD se aplica solo. La moneda que se muestra se cambia en currency.

Cambiar enlaces

src/features/landing/data/links.ts: App Store, Google Play, correo de contacto, redes sociales (deja "" para ocultar una) y SITE_URL (dominio usado en SEO, sitemap y Open Graph).

Cambiar textos

• Secciones, beneficios, funciones y pasos del mercado: data/content.ts
• Preguntas frecuentes: data/faq.ts (las marcadas con TODO: validar dependen de decisiones pendientes)
• Testimonios: data/testimonials.ts. La sección se oculta mientras el arreglo esté vacío; agrega solo testimonios reales.

Cambiar imágenes

Los placeholders están en public/images/. Reemplaza el archivo conservando el nombre, o cambia la ruta en data/content.ts:

Archivo	Dónde aparece	Tamaño sugerido
app-mockup.svg	Teléfono del hero	300 × 620 (o proporción similar)
app/*.png	Pantallas reales en "Cómo funciona"	390 × 780

Las pantallas de public/images/app/ se recortaron de las capturas "golden" de la app (pimez/test/goldens/). Para actualizarlas, vuelve a generar los goldens en el proyecto de Flutter y recorta la parte superior a 390 × 780. Las funciones que aún no tienen pantalla usan una foto marcada como "Imagen representativa" (se configura en features dentro de data/content.ts).

Puedes usar .png, .jpg o .webp; solo actualiza la extensión en content.ts. Las fotos de testimonios van en public/images/testimonios/.

Fotografías reales

Las fotos de public/images/fotos/ vienen de Wikimedia Commons con licencias Creative Commons que piden dar crédito. Sus autores, licencias y textos alternativos están en data/photos.ts y se muestran en la página /creditos. Si reemplazas una foto por una propia, actualiza o quita su entrada en ese archivo. Mantén cada foto por debajo de ~350 KB (por ejemplo sips -Z 1300 -s formatOptions 65 foto.jpg en macOS).

La imagen para redes sociales (Open Graph) es public/images/og-image.jpg (1200 × 630).

Despliegue en GitHub Pages

Cada push a main ejecuta .github/workflows/deploy.yml, que compila y publica out/.

Primera vez: en el repositorio ve a Settings → Pages → Build and deployment → Source y elige GitHub Actions.

El workflow define NEXT_PUBLIC_BASE_PATH=/<nombre-del-repo>. Si usas un dominio propio, quita esa variable del workflow y actualiza SITE_URL.