Floreria La Verbena

Landing page mobile-first creada con Next.js para https://links.florerialaverbena.cl, pensada para recibir trafico desde codigos QR en etiquetas de ramos y productos fisicos.

La experiencia esta enfocada en conversion, atencion rapida y continuidad entre canales: WhatsApp, tienda WooCommerce, Instagram y la futura asistente virtual Flora.

Stack

• Next.js 16 con App Router
• TypeScript
• Tailwind CSS
• API Route Handler para productos
• Arquitectura preparada para WooCommerce y futuras automatizaciones

Instalacion

npm install

Ejecucion local

npm run dev

Abrir http://localhost:3000.

Build de produccion

npm run build
npm run start

Variables de entorno

Crear un archivo .env.local basado en .env.example.

NEXT_PUBLIC_SITE_URL=https://links.florerialaverbena.cl
NEXT_PUBLIC_MAIN_SITE=https://florerialaverbena.cl
NEXT_PUBLIC_WHATSAPP_NUMBER=56982981447
NEXT_PUBLIC_INSTAGRAM_URL=https://instagram.com/florerialaverbena

WOOCOMMERCE_URL=https://florerialaverbena.cl
WOOCOMMERCE_CONSUMER_KEY=
WOOCOMMERCE_CONSUMER_SECRET=
WOOCOMMERCE_FEATURED_CATEGORY=
WOOCOMMERCE_PRODUCTS_LIMIT=3

N8N_FLORA_WEBHOOK_URL=
EVOLUTION_API_URL=

Integracion con WooCommerce

El endpoint /app/api/products/route.ts consulta la API REST de WooCommerce sin exponer credenciales al frontend.

• Usa WOOCOMMERCE_CONSUMER_KEY y WOOCOMMERCE_CONSUMER_SECRET solo en servidor.
• Permite limit y category por query string.
• Responde con datos mock si WooCommerce no esta configurado o falla la consulta.
• Revalida resultados cada 5 minutos para equilibrar frescura y rendimiento.

Ejemplo:

curl "http://localhost:3000/api/products?limit=3&category=destacados"

Estructura principal

app/
  api/products/route.ts
  cuidados/page.tsx
  globals.css
  layout.tsx
  page.tsx
components/
  Footer.tsx
  Header.tsx
  LinkCard.tsx
  ProductCard.tsx
lib/
  config.ts
  woocommerce.ts
public/
  products/

Personalizacion

• Editar enlaces globales en /lib/config.ts.
• Cambiar colores, tipografias y sombras en /tailwind.config.ts.
• Reemplazar mock de productos en /lib/woocommerce.ts.
• Ajustar textos y bloques de conversion en /app/page.tsx.
• Extender el bloque de Flora para integrar n8n, Evolution API o widget conversacional.

Deploy

El proyecto esta listo para desplegarse en Vercel u otra plataforma compatible con Next.js.

Pasos recomendados:

1. Configurar variables de entorno en el proveedor.
2. Ejecutar npm run build en CI.
3. Publicar el dominio links.florerialaverbena.cl.
4. Verificar enlaces de WhatsApp, tienda, Instagram y endpoint /api/products.

Git

El repositorio debe usar rama main y mantener fuera de version:

• .env* reales
• node_modules
• .next

.env.example si se incluye para facilitar configuracion.