Pan Ocean International – Portal Mayorista Premium de Electrónica

December 9, 2025

• Red Mundial Animada – Mapa mundial con puntos conectados y líneas de conexión animadas
• Parallax Scrolling – Animaciones suaves basadas en scroll usando useScroll y useTransform de Framer Motion
• Showcase de Logo – Fondo de cristal esmerilado con efectos de glow en hover para prominencia de marca
• Tipografía con Gradiente – Texto gradiente llamativo con animaciones de shimmer
• Botón CTA Brillante – Componente de botón interactivo premium con efectos de glow gradiente

• Tarjetas de Categoría – Tarjetas premium con preview de imagen, efectos de glow y animaciones en hover para Smartphones, Consolas de Gaming, Tablets y Wearables
• Componentes GlowCard – Tarjetas con efecto spotlight con opciones de glow multi-color (azul, púrpura, verde, naranja)
• Imágenes de Producto – Imágenes de categoría de alta calidad con transiciones de escala suaves en hover

• Carrusel Auto-Scrolling – Embla Carousel con plugin de auto-scroll para rotación seamless de logos de marca
• 30+ Logos de Marcas – Apple, Samsung, Xiaomi, PlayStation, Xbox, Nintendo, Sony y muchos más
• Interacciones de Hover – Transiciones de escala y color al pasar sobre marcas
• Bordes de Desvanecimiento Gradient – Gradientes suaves de fade-to-white en los bordes del carrusel

• Visualización de Red Interactiva – Nodos animados y conexiones representando el hub de distribución global
• Tarjetas de Valor Numeradas – Tarjetas horizontales con badges de número gradiente destacando Family Values, Market Expertise y Trusted Partner
• Historia de la Empresa – Presentación narrativa con tipografía animada

• Animación de Borde GlowEffect – Animación de glow multi-color rotativo alrededor de la tarjeta de contacto
• Enlaces de Contacto Interactivos – Enlaces de teléfono y correo con animaciones de iconos y transiciones de color
• Google Maps Embed – Mapa interactivo mostrando la ubicación de la sede en Miami
• Botones de Acción Flotantes – Botones fijos de llamada y WhatsApp con etiquetas de tooltip

• Testimonios de Clientes – Tarjetas glassmorphism con ratings de estrellas y atribución de cliente
• Transiciones Suaves – Revelados de tarjetas animados con timing escalonado
• Social Proof – Citas reales enfatizando confianza, confiabilidad y partnership

• Toggle de Idioma – Cambio seamless EN/ES en la barra de navegación
• Traducciones Completas – Todo el texto de interfaz disponible en inglés y español
• Contenido Centralizado – Objeto CONTENT único con traducciones estructuradas

• React 19 – Último React con hooks modernos y características concurrentes
• TypeScript – Type safety completo con interfaces y tipado estricto
• Vite 6 – Servidor de desarrollo rápido y builds de producción optimizados

• Framer Motion – Efectos de parallax avanzados basados en scroll, transforms y transiciones de página
• Motion Library – Utilidades de motion adicionales para animaciones complejas
• CSS Keyframes – Animaciones de shimmer y glow personalizadas

• Tailwind CSS – Estilos utility-first con configuraciones de gradiente personalizadas
• Diseño Glassmorphism – Backdrop blur, transparencia y bordes sutiles
• Componentes de Interfaz Personalizados – GlowEffect, GlowCard, ShinyButton, Marquee

• Lucide React – Biblioteca de iconos modernos para iconografía consistente
• React Icons – Variantes de iconos adicionales para diversidad de marca

• React Leaflet – Integración de mapa interactivo para ubicación de sede
• Dotted Map – Visualización de mapa mundial personalizada con puntos de conexión animados
• Google Maps Embed – Mapa embedido de fallback en sección de contacto

• Embla Carousel React – Motor de carrusel ligero y amigable con touch
• Auto-scroll Plugin – Scroll continuo para showcase de marcas

• Secciones de Imagen Sticky – Fondos sticky de altura completa con transforms de escala
• Animación de Copy Overlay – Revelado de texto con translación en eje y vinculada al scroll
• Triggers Basados en Viewport – Progreso de scroll vinculado a la posición del viewport del elemento

• GlowEffect – Animación de borde gradiente rotativo con colores, blur y duración configurables
• GlowCard – Tarjeta con spotlight que sigue el mouse con gradiente glow
• ShinyButton – CTA premium con fondo gradiente y animación de brillo
• Marquee – Carrusel de scroll infinito con funcionalidad de pausa en hover

• SVG Dot Grid – Mapa mundial generado programáticamente desde datos geográficos
• Conexiones Animadas – Líneas curvas conectando puntos de distribución
• Nodos Pulsantes – Marcadores glow para ubicaciones clave

• Validación de Formulario – Campos requeridos para nombre, empresa, correo y mensaje
• Diseño Responsivo – Pantalla completa en móvil, tarjeta centrada en desktop
• Controles Accesibles – Navegación por teclado y manejo de foco

pan-ocean/
├── App.tsx                      # Punto de entrada principal de la app
├── index.tsx                    # Entry point de React con providers
├── index.html                   # Template HTML con metadata
├── components/
│   ├── PanOceanLanding.tsx      # Componente principal de landing page
│   ├── Navbar.tsx               # Navegación con toggle de idioma
│   ├── ContactModal.tsx         # Modal de formulario de contacto
│   ├── TestimonialsSection.tsx  # Carrusel de testimonios de clientes
│   ├── WorldMap.tsx             # Visualización de mapa mundial animado
│   ├── FuturisticNetwork.tsx    # Animación de nodos de red
│   └── ui/
│       ├── glow-effect.tsx      # Componente de borde glow rotativo
│       ├── spotlight-card.tsx   # Tarjeta con glow siguiendo al mouse
│       ├── shiny-button.tsx     # Botón CTA premium
│       └── marquee.tsx          # Carrusel auto-scrolling
├── lib/
│   └── utils.ts                 # Funciones de utilidad (cn, etc.)
└── public/
    ├── logo/                    # Assets de logo de la empresa
    └── images/
        └── work/
            ├── brands/          # 30+ logos de marca SVGs
            └── sections/        # Imágenes de fondo de sección

• Animaciones Impulsadas por Scroll – Dominando useScroll y useTransform de Framer Motion para parallax inmersivo
• Sistemas de Componentes Personalizados – Construyendo efectos de glow reutilizables y tarjetas interactivas
• Lenguaje de Diseño B2B – Balanceando estética premium con señales de confianza profesional
• Optimización de Rendimiento – Lazy loading de mapas e imágenes para carga inicial rápida
• Arquitectura Bilingüe – Estructurando traducciones para fácil mantenimiento

• Excelencia Visual – Impresionantes efectos de parallax y diseño glassmorphism
• Sofisticación Técnica – Animaciones de scroll avanzadas y componentes interactivos
• Alcance Global – Visualización de mapa mundial enfatizando capacidades de distribución
• Enfoque en Conversión – Múltiples CTAs y botones de contacto flotantes
• Pulido Profesional – Atención al detalle en animaciones, tipografía y espaciado