Hero Video Banner Component

Componente reutilizable de banner con video o imagen para Next.js con soporte completo para App Router y diseño responsivo.

Características

• 🎥 Banner con video de fondo O imagen de fondo
• 📱 Diseño completamente responsivo
• 🎨 Completamente configurable mediante props
• 🔄 Fallback con imagen en móviles
• 🎯 Soporte para cards informativas
• ⚡ Compatible con Next.js App Router
• 🖼️ Optimizado con Next.js Image

Instalación

npm install hero-video-banner

O usando yarn:

yarn add hero-video-banner

Requisitos Previos

Este componente requiere las siguientes dependencias:

• react (^18.0.0)
• react-dom (^18.0.0)
• next (^13.0.0 o superior - soporta App Router)
• react-icons (^4.0.0)

Uso Básico

Uso con Video

import Video from 'hero-video-banner';

function HomePage() {
  return <Video videoSrc="/videos/hero-video.mp4" logo="/logos/logo.png" />;
}

Uso con Imagen

import Video from 'hero-video-banner';

function HomePage() {
  return (
    <Video
      bgDesktopImage="/images/hero-desktop.jpg"
      bgMobileImage="/images/hero-mobile.jpg"
      logo="/logos/logo.png"
    />
  );
}

Uso Completo con Configuración

import Video from 'hero-video-banner';

// Importa tus imágenes locales
import logo from '../public/logos/logo.png';
import icono1 from '../public/iconos/homeoffice.png';
import icono2 from '../public/iconos/water.png';
import icono3 from '../public/iconos/street.png';
import icono4 from '../public/iconos/playground.png';

// Define tus cards
const cards = [
  {
    id: 1,
    icono: icono1,
    altTxt: 'homeoffice',
    texto:
      '*Home Office sin problemas:* Fibra óptica para tener internet de alta velocidad sin cortes',
  },
  {
    id: 2,
    icono: icono2,
    altTxt: 'water',
    texto:
      'Único barrio abierto con una planta *de agua potable propia en funcionamiento*',
  },
  {
    id: 3,
    icono: icono3,
    altTxt: 'street',
    texto: '*Acceso asfaltado* para mayor comodidad y seguridad',
  },
  {
    id: 4,
    icono: icono4,
    altTxt: 'playground',
    texto: '*Áreas recreativas* para disfrutar al máximo',
  },
];

export default function HomePage() {
  return (
    <Video
      // OPCIÓN 1: Usar video (recomendado para desktop)
      videoSrc="/videos/hero.mp4"
      // OPCIÓN 2: Usar imagen (más ligero)
      // bgDesktopImage="/images/hero-desktop.jpg"

      bgMobileImage="/images/hero-mobile.jpg"
      logo={logo}
      title="Mi increíble"
      titleBold="propuesta de valor"
      discoverButtonText="DESCÚBRELO"
      discoverButtonLink="#features"
      contactButtonText="CONTÁCTANOS"
      contactButtonLink="#form"
      cards={cards}
    />
  );
}

Props Disponibles

| Prop | Tipo | Default | Descripción | | -------------------- | ------ | ---------------------------------- | ----------------------------------------- | | videoSrc | string | null | Ruta al video de fondo (opcional) | | bgDesktopImage | string | null | Imagen de fondo para desktop (opcional) | | bgMobileImage | string | '/demas/bg_mobile.jpg' | Imagen de fondo para móviles | | logo | string | '/logos/logo-fincas-blanco.png' | Ruta al logo | | title | string | 'Barrio consolidado con' | Primer texto del título | | titleBold | string | 'escritura y posesión inmediata' | Segundo texto en negrita | | discoverButtonText | string | 'CONOCELO' | Texto del botón de descubrir | | discoverButtonLink | string | '#anchor' | Link del botón de descubrir | | contactButtonText | string | 'CONTACTANOS' | Texto del botón de contacto | | contactButtonLink | string | '#form' | Link del botón de contacto | | cards | array | [] | Array de objetos con iconos e información | | buttonColor | string | '#69b42e' | Color de los botones | | gradientColor | string | '#18341c' | Color del gradiente |

Configuración: Video vs Imagen

El componente soporta dos modos de operación:

Modo Video (Recomendado)

<Video
  videoSrc="/videos/hero.mp4" // Solo pasa esto
  // ... otras props
/>

Modo Imagen (Más Ligero)

<Video
  bgDesktopImage="/images/hero-desktop.jpg" // Solo pasa esto
  bgMobileImage="/images/hero-mobile.jpg"
  // ... otras props
/>

Regla: Si pasas videoSrc, se usa el video. Si pasas bgDesktopImage, se usa la imagen.

Formato de Cards

Cada card debe tener el siguiente formato:

{
  id: 1,                    // ID único
  icono: iconoImportado,    // Imagen importada (Next.js Image)
  altTxt: 'descripción',   // Texto alternativo para la imagen
  texto: 'Texto con *negrita*' // Texto donde *marca texto en negrita*
}

Nota: Usa asteriscos (*) alrededor del texto que quieras que aparezca en negrita.

Características del Diseño

• Desktop: Video o imagen de fondo con overlay de texto y cards flotantes
• Tablet: Vista optimizada con diseño responsive
• Mobile: Imagen estática con layout vertical

Compatibilidad con Next.js App Router

Este componente está completamente optimizado para Next.js App Router:

• Usa 'use client' para interactividad
• Utiliza next/image con optimización automática
• Compatible con <Image> component con fill y priority
• No requiere configuración adicional en next.config.js

Customización

Colores

<Video
  buttonColor="#FF6B6B"
  gradientColor="#2C3E50"
  // ... otras props
/>

Sin Cards

Si no necesitas las cards inferiores, simplemente no pases el prop:

<Video
  videoSrc="/videos/hero.mp4"
  title="Mi título"
  titleBold="en negrita"
  // Sin cards
/>

Notas Importantes

1. Assets: Asegúrate de agregar tus videos/imágenes en la carpeta public de tu proyecto
2. Formato de video: Soporta formatos MP4, WebM, etc.
3. Optimización: Los videos deben estar optimizados para web (comprime antes de subir)
4. Imágenes: Los iconos deben importarse localmente en tu proyecto usando import
5. Logo: Puede ser una ruta string o una importación local

Ejemplo de Uso en App Router

// app/page.js
'use client'; // Necesario si usas el componente en el lado del cliente

import Video from 'hero-video-banner';

export default function Page() {
  return <Video videoSrc="/videos/hero.mp4" />;
}

Licencia

MIT