Skip to content

edt092/promogimmicks-fullstack-commerce

Repository files navigation

PromoGimmicks

Landing page y tienda de productos promocionales para PromoGimmicks, empresa especializada en merchandising e importación para Colombia y Ecuador.

Stack Tecnologico

Tecnologia Version Uso
Next.js 14.x Framework React con App Router
React 18.x Biblioteca UI
TypeScript 5.x Tipado estatico
Tailwind CSS 3.4.x Framework CSS utility-first
Framer Motion 11.x Animaciones
Lucide React 0.462.x Iconos

Arquitectura del Proyecto

promogimmicks/
├── app/                          # App Router (Next.js 14)
│   ├── layout.tsx                # Layout principal
│   ├── page.tsx                  # Pagina principal
│   ├── globals.css               # Estilos globales
│   ├── robots.ts                 # Configuracion robots.txt
│   ├── sitemap.ts                # Generador sitemap XML
│   ├── blog/                     # Seccion blog
│   │   ├── page.tsx              # Listado de articulos
│   │   └── [slug]/page.tsx       # Articulo individual
│   ├── tienda/                   # Tienda de productos
│   │   ├── page.tsx              # Catalogo principal
│   │   ├── [slug]/page.tsx       # Detalle de producto
│   │   └── categoria/[slug]/     # Productos por categoria
│   ├── productos-promocionales-colombia/  # SEO Colombia
│   │   ├── page.tsx
│   │   └── [ciudad]/page.tsx
│   └── productos-promocionales-ecuador/   # SEO Ecuador
│       ├── page.tsx
│       └── [ciudad]/page.tsx
│
├── components/                   # Componentes reutilizables
│   ├── Navbar.tsx                # Navegacion principal
│   ├── HeroSection.tsx           # Seccion hero con video
│   ├── Cobertura.tsx             # Mapa de cobertura
│   ├── ProductosVirales.tsx      # Slider productos destacados
│   ├── Catalogos.tsx             # Grid de catalogos
│   ├── Servicios.tsx             # Servicios ofrecidos
│   ├── TiendaPromo.tsx           # Preview tienda en home
│   ├── TiendaGrid.tsx            # Grid de productos tienda
│   ├── ProductCard.tsx           # Tarjeta de producto
│   ├── ProductDetailView.tsx     # Vista detalle producto
│   ├── ProductosGallery.tsx      # Galeria de imagenes
│   ├── ContactSection.tsx        # Formulario de contacto
│   ├── Footer.tsx                # Pie de pagina
│   ├── BlogCard.tsx              # Tarjeta de articulo
│   ├── GoldenShimmerText.tsx     # Texto con efecto dorado
│   └── blog/                     # Componentes especificos blog
│       ├── BlogPostContent.tsx
│       ├── BlogNavidadContent.tsx
│       ├── BlogQuitoContent.tsx
│       ├── CTABanner.tsx
│       └── ProductShowcase.tsx
│
├── data/                         # Datos estaticos
│   ├── products.json             # Catalogo de productos
│   ├── blog-posts.json           # Articulos del blog
│   └── geo-data.ts               # Datos geograficos SEO
│
├── public/                       # Assets estaticos
│   ├── img/                      # Imagenes
│   └── videos/                   # Videos
│
└── Configuracion
    ├── next.config.js            # Configuracion Next.js
    ├── tailwind.config.ts        # Configuracion Tailwind
    ├── tsconfig.json             # Configuracion TypeScript
    └── postcss.config.mjs        # Configuracion PostCSS

Funcionalidades

Pagina Principal

  • Hero con video de fondo y animaciones
  • Slider de productos virales con autoplay
  • Mapa interactivo de cobertura (Colombia/Ecuador)
  • Grid de catalogos con hover effects
  • Seccion de servicios
  • Preview de productos de la tienda
  • Galeria de productos
  • Formulario de contacto

Tienda

  • Catalogo completo con filtros por categoria
  • Vista de detalle de producto
  • Integracion con WhatsApp para cotizaciones
  • Paginas SEO por categoria

Blog

  • Articulos con contenido dinamico
  • Componentes interactivos (CTAs, showcases)
  • Optimizacion SEO

SEO

  • Paginas especificas por ciudad (Colombia y Ecuador)
  • Sitemap XML dinamico
  • Robots.txt configurado
  • Meta tags optimizados

Instalacion

# Clonar repositorio
git clone https://github.com/edt092/promogimmicks.git

# Instalar dependencias
npm install

# Ejecutar en desarrollo
npm run dev

# Build produccion
npm run build
npm start

Scripts Disponibles

Comando Descripcion
npm run dev Inicia servidor de desarrollo en http://localhost:3000
npm run build Genera build de produccion
npm start Inicia servidor de produccion
npm run lint Ejecuta ESLint

Configuracion de Imagenes

Las imagenes deben ubicarse en public/:

  • Video Hero: public/videos/hero-video.mp4 (MP4, 1920x1080)
  • Productos Virales: public/img/imagenes-productos-virales/ (1.jpg - 5.jpg)
  • Catalogos: public/img/catalogos/ (premiums.jpg, mp.jpg, cdo.jpg, bs.jpg)
  • Galeria: public/img/imagenes-de-stock/ (1.jpg - 12.jpg)

Paleta de Colores

Color Codigo Uso
Azul Profundo #1e3a8a Encabezados, autoridad
Ambar/Dorado #f59e0b CTAs, acentos
Blanco #ffffff Fondos principales
Gris Claro #f8fafc Separadores

Estructura de Datos

products.json

{
  "id": "string",
  "name": "string",
  "category": "string",
  "description": "string",
  "price": "string",
  "image": "string",
  "slug": "string"
}

blog-posts.json

{
  "id": "string",
  "title": "string",
  "slug": "string",
  "excerpt": "string",
  "image": "string",
  "date": "string",
  "author": "string"
}

Contacto

Licencia

Proyecto privado - Todos los derechos reservados.

About

Plataforma E-commerce Full Stack orientada a SEO masivo para el sector de merchandising en Colombia y Ecuador. Incluye un catálogo dinámico de más de 1000 productos personalizables, arquitectura SSG para rendimiento crítico y estrategias de posicionamiento geográfico automatizadas.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages