From d17407a302782c9bdc52658ba1ed662b0ad79d18 Mon Sep 17 00:00:00 2001 From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com> Date: Sun, 28 Jun 2026 12:21:42 -0500 Subject: [PATCH] fix: landing page completamente responsive en moracourier.com MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Reemplaza todos los inline styles con clases CSS responsivas - Agrega 230 líneas de CSS landing-específico con breakpoints 768px y 1024px - Grids adaptivos: 4-col→2-col→1-col, 3-col→2-col→1-col, 2-col→1-col - Nuevo componente LandingNavbar (client) con hamburger funcional y menú móvil - Hero, Servicios, Módulos, Tracking, Calculadora, Roles y Empresas responsivos - Agrega sección "Cómo funciona" (4 pasos) que faltaba - Agrega sección CTA final antes del footer - Footer con links de navegación completos Co-Authored-By: Claude Sonnet 4.6 --- .../src/app/_components/landing-navbar.tsx | 74 +++ apps/web/src/app/globals.css | 230 ++++++++ apps/web/src/app/page.tsx | 517 ++++++++---------- 3 files changed, 545 insertions(+), 276 deletions(-) create mode 100644 apps/web/src/app/_components/landing-navbar.tsx diff --git a/apps/web/src/app/_components/landing-navbar.tsx b/apps/web/src/app/_components/landing-navbar.tsx new file mode 100644 index 0000000..1a97b51 --- /dev/null +++ b/apps/web/src/app/_components/landing-navbar.tsx @@ -0,0 +1,74 @@ +"use client"; +import { useState, useEffect, useRef } from "react"; +import Link from "next/link"; + +export function LandingNavbar() { + const [open, setOpen] = useState(false); + const menuRef = useRef(null); + const btnRef = useRef(null); + + useEffect(() => { + function handleClick(e: MouseEvent) { + if ( + menuRef.current && !menuRef.current.contains(e.target as Node) && + btnRef.current && !btnRef.current.contains(e.target as Node) + ) { + setOpen(false); + } + } + document.addEventListener("click", handleClick); + return () => document.removeEventListener("click", handleClick); + }, []); + + function close() { setOpen(false); } + + return ( + <> + + +
+
+ Calculadora + Tracking + Cómo funciona + Carga Pesada + Nosotros +
+
+ Iniciar sesión + Abrir casillero gratis → +
+
+ + ); +} diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index f2a6f33..4b7108f 100644 --- a/apps/web/src/app/globals.css +++ b/apps/web/src/app/globals.css @@ -472,3 +472,233 @@ tbody tr:hover { background: var(--gray-50); } .grid-4 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(2,1fr); } } + +/* ═══════════════════════════════════════════════════════ + LANDING PAGE — Responsive Layout + ═══════════════════════════════════════════════════════ */ + +/* ── Navbar ── */ +.ln-nav { + position: sticky; top: 0; z-index: 50; + background: rgba(255,255,255,.97); backdrop-filter: blur(12px); + border-bottom: 1px solid var(--gray-200); + height: 64px; display: flex; align-items: center; +} +.ln-inner { + display: flex; align-items: center; justify-content: space-between; gap: 1rem; +} +.ln-logo { + font-size: 1.2rem; font-weight: 800; color: var(--dark); white-space: nowrap; flex-shrink: 0; +} +.ln-logo span { color: var(--accent); } +.ln-links { + display: flex; align-items: center; gap: 1.5rem; flex: 1; justify-content: center; +} +.ln-link { + font-size: .875rem; font-weight: 500; color: var(--gray-700); transition: color .15s; white-space: nowrap; +} +.ln-link:hover { color: var(--primary); } +.ln-cta { display: flex; gap: .5rem; flex-shrink: 0; } +.ln-hamburger { + display: none; flex-direction: column; gap: 5px; + background: none; border: none; padding: 4px; cursor: pointer; flex-shrink: 0; +} +.ln-hamburger span { + display: block; width: 24px; height: 2px; + background: var(--gray-900); border-radius: 2px; transition: all .3s; +} +.ln-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } +.ln-hamburger.open span:nth-child(2) { opacity: 0; } +.ln-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } + +/* ── Mobile menu ── */ +.ln-mobile-menu { + display: none; position: fixed; top: 64px; left: 0; right: 0; z-index: 49; + background: var(--white); border-bottom: 1px solid var(--gray-200); + padding: 1rem 1.5rem 1.5rem; box-shadow: 0 8px 32px rgba(0,0,0,.12); +} +.ln-mobile-menu.open { display: block; } +.ln-mobile-links { display: flex; flex-direction: column; } +.ln-mobile-links a { + display: block; padding: .85rem 0; border-bottom: 1px solid var(--gray-100); + font-size: .95rem; font-weight: 500; color: var(--gray-700); +} +.ln-mobile-links a:last-child { border-bottom: none; } +.ln-mobile-links a:hover { color: var(--primary); } +.ln-mobile-cta { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; } + +/* ── Hero ── */ +.ln-hero { + background: linear-gradient(135deg, #0D1117 0%, #0D2150 100%); + padding: 6rem 0 4.5rem; color: var(--white); +} +.ln-hero-badge { + display: inline-flex; align-items: center; gap: .5rem; + background: rgba(0,87,255,.15); border: 1px solid rgba(0,87,255,.3); + color: #7AADFF; font-size: .8rem; font-weight: 600; + padding: 6px 14px; border-radius: 999px; margin-bottom: 1.5rem; +} +.ln-hero-badge-dot { + width: 8px; height: 8px; border-radius: 50%; background: #7AADFF; + animation: pulse-dot 2s infinite; +} +@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.4} } +.ln-hero h1 { + font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; + line-height: 1.15; margin-bottom: 1.25rem; +} +.ln-hero h1 em { color: var(--accent); font-style: normal; } +.ln-hero-sub { + color: #9CA3AF; font-size: 1.05rem; max-width: 540px; margin-bottom: 1rem; line-height: 1.7; +} +.ln-hero-address { + background: rgba(0,87,255,.1); border: 1px solid rgba(0,87,255,.25); + border-radius: 10px; padding: .875rem 1.25rem; margin-bottom: 2rem; + font-family: monospace; font-size: .9rem; color: #A5B4FC; max-width: 520px; +} +.ln-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 3rem; } +.ln-hero-trust { display: flex; gap: 2rem; flex-wrap: wrap; } +.ln-trust-item { display: flex; gap: .625rem; align-items: flex-start; } +.ln-trust-icon { font-size: 1.4rem; } +.ln-trust-name { font-weight: 600; font-size: .875rem; color: var(--white); display: block; } +.ln-trust-sub { font-size: .75rem; color: #6B7280; } + +/* ── Section wrappers ── */ +.ln-section { padding: 5rem 0; } +.ln-section-gray { padding: 5rem 0; background: var(--gray-100); } +.ln-section-dark { padding: 5rem 0; background: var(--dark); } +.ln-section-head { text-align: center; margin-bottom: 3rem; } +.ln-section-tag { + display: inline-block; background: #EEF3FF; color: var(--primary); + font-size: .72rem; font-weight: 700; letter-spacing: .08em; + text-transform: uppercase; padding: 4px 14px; border-radius: 999px; margin-bottom: 1rem; +} +.ln-section-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: .5rem; } +.ln-section-sub { font-size: .95rem; color: var(--gray-500); max-width: 560px; margin: 0 auto; } + +/* ── Responsive grids (landing specific) ── */ +.ln-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } +.ln-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; } +.ln-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; } +.ln-grid-2-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } + +/* ── Service cards ── */ +.ln-service-card { + background: var(--white); border-radius: 16px; padding: 2rem; + border: 2px solid var(--gray-200); transition: border-color .25s, box-shadow .25s, transform .25s; +} +.ln-service-card:hover { border-color: var(--primary); box-shadow: var(--shadow-xl); transform: translateY(-4px); } +.ln-service-card.featured { border-color: #BFDBFE; } +.ln-service-icon { font-size: 2.5rem; margin-bottom: .75rem; } +.ln-service-card h3 { font-weight: 800; font-size: 1.15rem; margin-bottom: .5rem; } +.ln-service-card p { color: var(--gray-500); margin-bottom: 1rem; font-size: .88rem; } +.ln-service-list { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 5px; font-size: .85rem; color: var(--gray-700); margin-bottom: 1.25rem; } + +/* ── Module cards ── */ +.ln-module-card { + background: var(--gray-50); border-radius: 12px; padding: 1.25rem; + border: 1px solid var(--gray-200); transition: box-shadow .2s, transform .2s; +} +.ln-module-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } +.ln-module-icon { font-size: 1.8rem; margin-bottom: .625rem; } +.ln-module-title { font-weight: 700; font-size: .9rem; margin-bottom: .375rem; } +.ln-module-desc { color: var(--gray-500); font-size: .8rem; margin-bottom: .625rem; line-height: 1.5; } +.ln-module-tag { background: #EEF3FF; color: var(--primary); font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; } + +/* ── Tracking states ── */ +.ln-tracking-state { + display: flex; gap: .75rem; align-items: center; + background: var(--white); border-radius: 8px; padding: .5rem .875rem; + border: 1px solid var(--gray-200); +} +.ln-state-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } +.ln-state-num { font-family: monospace; font-size: .68rem; color: #9CA3AF; min-width: 20px; } +.ln-state-name { font-family: monospace; font-size: .78rem; font-weight: 700; flex: 1; } +.ln-state-desc { font-size: .72rem; color: var(--gray-500); text-align: right; } + +/* ── Calculator preview ── */ +.ln-calc-formula { + background: var(--dark); border-radius: 12px; padding: 1.25rem 1.5rem; + font-family: monospace; font-size: .82rem; color: #A5B4FC; + text-align: left; max-width: 600px; margin: 0 auto 1.75rem; + line-height: 2; border: 1px solid rgba(255,255,255,.08); +} +.ln-senae-card { + border-radius: 12px; padding: 1.5rem; text-align: center; +} +.ln-senae-rate { font-size: 2rem; font-weight: 900; line-height: 1; margin: .25rem 0 .5rem; } + +/* ── Role cards ── */ +.ln-role-card { + border-radius: 12px; padding: 1.25rem; border: 1px solid var(--gray-200); + transition: box-shadow .2s, transform .2s; +} +.ln-role-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } +.ln-role-icon { font-size: 1.5rem; margin-bottom: .625rem; } +.ln-role-name { font-weight: 700; margin-bottom: .375rem; font-size: .95rem; } +.ln-role-desc { color: var(--gray-500); font-size: .82rem; margin-bottom: .75rem; line-height: 1.5; } +.ln-role-badge { background: rgba(0,0,0,.06); font-size: .7rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; } + +/* ── Company cards ── */ +.ln-company-card { + background: var(--white); border-radius: 16px; padding: 1.75rem; + border: 2px solid var(--gray-200); display: flex; gap: 1rem; align-items: flex-start; + transition: border-color .25s; +} +.ln-company-card:hover { border-color: var(--primary); } +.ln-company-flag { font-size: 2.5rem; flex-shrink: 0; } +.ln-company-name { font-weight: 800; margin-bottom: .375rem; } +.ln-company-desc { color: var(--gray-500); font-size: .82rem; line-height: 1.6; margin-bottom: .625rem; } +.ln-company-badge { background: #EEF3FF; color: var(--primary); font-size: .7rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; } + +/* ── CTA final ── */ +.ln-cta-section { + padding: 5rem 0; + background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); + text-align: center; +} +.ln-cta-section h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 800; color: var(--white); margin-bottom: 1rem; } +.ln-cta-section p { color: rgba(255,255,255,.75); font-size: 1rem; margin-bottom: 2rem; } + +/* ── Footer ── */ +.ln-footer { background: var(--dark); padding: 3.5rem 0 2rem; color: rgba(255,255,255,.5); } +.ln-footer-logo { font-size: 1.1rem; font-weight: 800; color: var(--white); margin-bottom: .5rem; } +.ln-footer-logo span { color: var(--accent); } +.ln-footer-links { + display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; + margin: 1.5rem 0; font-size: .82rem; +} +.ln-footer-links a:hover { color: var(--white); } +.ln-footer-badges { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 1.5rem; } +.ln-footer-badge { + background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); + font-size: .7rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; + border: 1px solid rgba(255,255,255,.1); +} +.ln-footer-legal { + border-top: 1px solid rgba(255,255,255,.07); margin-top: 1.5rem; padding-top: 1rem; + font-size: .72rem; color: rgba(255,255,255,.3); line-height: 1.7; text-align: center; +} + +/* ─── Responsive breakpoints (landing) ─────────────────── */ +@media (max-width: 1024px) { + .ln-grid-4 { grid-template-columns: repeat(2,1fr); } + .ln-grid-3 { grid-template-columns: repeat(2,1fr); } +} + +@media (max-width: 768px) { + .ln-links, .ln-cta { display: none !important; } + .ln-hamburger { display: flex; } + + .ln-grid-2, .ln-grid-3, .ln-grid-4, .ln-grid-2-1 { grid-template-columns: 1fr !important; } + + .ln-hero { padding: 3rem 0 2.5rem; } + .ln-section, .ln-section-gray, .ln-section-dark { padding: 3rem 0; } + .ln-cta-section { padding: 3rem 0; } + + .ln-hero-trust { gap: 1.25rem; } + .ln-state-desc { display: none; } + + .ln-tracking-state { flex-wrap: wrap; } + .ln-state-name { font-size: .72rem; } +} diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index ca955c8..b31ae38 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -1,6 +1,6 @@ import type { Metadata } from "next"; import Link from "next/link"; -import { WhatsAppFloat } from "./_components/whatsapp-float"; +import { LandingNavbar } from "./_components/landing-navbar"; export const metadata: Metadata = { title: "Moraworld Imports — Tu casillero en New Jersey para Ecuador", @@ -9,133 +9,98 @@ export const metadata: Metadata = { keywords: ["casillero New Jersey", "importaciones Ecuador", "SENAE", "Amazon Ecuador", "envíos EE.UU. Ecuador"], }; -// ─── Datos estáticos de la landing (sin DB, SSG) ────────────── +// ─── Datos estáticos (SSG) ────────────────────────────── const TRACKING_STATES = [ - { num: "01", name: "REGISTRADO", color: "#6B7280", desc: "El cliente registró la compra" }, - { num: "02", name: "EN_TRANSITO_BODEGA", color: "#F59E0B", desc: "El vendedor despachó hacia bodega NJ" }, - { num: "03", name: "RECIBIDO_BODEGA", color: "#3B82F6", desc: "Bodega NJ confirmó recepción" }, - { num: "04", name: "EN_VERIFICACION", color: "#8B5CF6", desc: "Pesando, midiendo y fotografiando" }, - { num: "05", name: "VERIFICADO", color: "#10B981", desc: "Peso confirmado. Cobro aplicado." }, - { num: "06", name: "DECLARACION_ADUANERA", color: "#0057FF", desc: "DSI aprobada por la SENAE" }, - { num: "07", name: "EN_TRANSITO_ECUADOR", color: "#F97316", desc: "En vuelo hacia Ecuador" }, - { num: "08", name: "EN_ADUANA_ECUADOR", color: "#EF4444", desc: "Inspección en aduana Ecuador" }, - { num: "09", name: "LISTO_ENTREGA", color: "#84CC16", desc: "Listo para entrega al cliente" }, - { num: "10", name: "ENTREGADO", color: "#10B981", desc: "Paquete entregado en Ecuador ✓" }, - { num: "11", name: "INCIDENCIA", color: "#EF4444", desc: "Problema reportado ⚠" }, + { num: "01", name: "REGISTRADO", color: "#6B7280", desc: "El cliente registró la compra" }, + { num: "02", name: "EN_TRANSITO_BODEGA", color: "#F59E0B", desc: "Vendedor despachó a bodega NJ" }, + { num: "03", name: "RECIBIDO_BODEGA", color: "#3B82F6", desc: "Bodega NJ confirmó recepción" }, + { num: "04", name: "EN_VERIFICACION", color: "#8B5CF6", desc: "Pesando, midiendo y fotografiando" }, + { num: "05", name: "VERIFICADO", color: "#10B981", desc: "Peso confirmado. Cobro aplicado." }, + { num: "06", name: "DECLARACION_SENAE", color: "#0057FF", desc: "DSI aprobada por la SENAE" }, + { num: "07", name: "EN_TRANSITO_EC", color: "#F97316", desc: "En vuelo hacia Ecuador" }, + { num: "08", name: "EN_ADUANA_EC", color: "#EF4444", desc: "Inspección en aduana Ecuador" }, + { num: "09", name: "LISTO_ENTREGA", color: "#84CC16", desc: "Listo para entrega al cliente" }, + { num: "10", name: "ENTREGADO", color: "#10B981", desc: "Paquete entregado en Ecuador ✓" }, + { num: "11", name: "INCIDENCIA", color: "#EF4444", desc: "Problema reportado ⚠" }, ]; const SENAE_CATEGORIES = [ - { name: "Régimen 4×4", rate: "0%", color: "#10B981", bg: "#D1FAE5", desc: "Hasta 4 envíos/año · máx. $400 · máx. 4 kg · Sin arancel" }, - { name: "Categoría B", rate: "10%", color: "#1D4ED8", bg: "#DBEAFE", desc: "Bienes de consumo general" }, - { name: "Categoría C", rate: "20%", color: "#FF6B00", bg: "#FFEDD5", desc: "Textiles, calzado, hogar" }, - { name: "Categoría D", rate: "0–15%", color: "#8B5CF6", bg: "#EDE9FE", desc: "Electrónicos · puede requerir INEN" }, + { name: "Régimen 4×4", rate: "0%", color: "#10B981", bg: "#D1FAE5", desc: "Hasta 4 envíos/año · máx. $400 · máx. 4 kg · Sin arancel" }, + { name: "Categoría B", rate: "10%", color: "#1D4ED8", bg: "#DBEAFE", desc: "Bienes de consumo general" }, + { name: "Categoría C", rate: "20%", color: "#C2410C", bg: "#FFEDD5", desc: "Textiles, calzado, hogar" }, + { name: "Categoría D", rate: "0–15%", color: "#7C3AED", bg: "#EDE9FE", desc: "Electrónicos · puede requerir INEN" }, ]; const MODULES = [ - { icon: "🌐", title: "Landing Pública", desc: "Calculadora SENAE, tracking sin login, tarifas y FAQ", tag: "Sin registro" }, - { icon: "👤", title: "Portal Cliente", desc: "Suite personalizada, pre-alertas, mis paquetes, historial", tag: "B2C · Ecuador" }, - { icon: "🏭", title: "Portal Bodega NJ", desc: "Recepción, peso, fotos, despacho desde 150 N Day St", tag: "Operador · NJ" }, - { icon: "⚙️", title: "Portal Admin", desc: "Dashboard, usuarios, tarifas, reportes, auditoría", tag: "Admin / Super Admin" }, - { icon: "🛃", title: "Módulo SENAE", desc: "DSI automática, cálculo FODINFA+IVA+Arancel, WebService", tag: "Agente Aduanero" }, - { icon: "📍", title: "Tracking", desc: "ID único EC-YYYYMMDD-XXXXXX · 11 estados · búsqueda pública", tag: "Todos los roles" }, - { icon: "📄", title: "Pre-alerta", desc: "Aviso previo con factura antes de llegada a bodega", tag: "Cliente" }, - { icon: "🚢", title: "Carga Pesada B2B", desc: "Pallets, contenedores, cotización especial, INEN", tag: "Importadores" }, + { icon: "🌐", title: "Landing Pública", desc: "Calculadora SENAE, tracking sin login, tarifas y FAQ", tag: "Sin registro" }, + { icon: "👤", title: "Portal Cliente", desc: "Suite personalizada, pre-alertas, mis paquetes, historial", tag: "B2C · Ecuador" }, + { icon: "🏭", title: "Portal Bodega NJ", desc: "Recepción, peso, fotos y despacho desde 150 N Day St", tag: "Operador · NJ" }, + { icon: "⚙️", title: "Portal Admin", desc: "Dashboard, usuarios, tarifas, reportes, auditoría", tag: "Admin" }, + { icon: "🛃", title: "Módulo SENAE", desc: "DSI automática, cálculo FODINFA+IVA+Arancel, WebService", tag: "Agente Aduanero" }, + { icon: "📍", title: "Tracking", desc: "ID único EC-YYYYMMDD-XXXXXX · 11 estados · búsqueda pública", tag: "Todos los roles" }, + { icon: "📄", title: "Pre-alerta", desc: "Aviso previo con factura antes de llegada a bodega", tag: "Cliente" }, + { icon: "🚢", title: "Carga Pesada B2B", desc: "Pallets, contenedores, cotización especial, INEN", tag: "Importadores" }, ]; const ROLES = [ - { icon: "👑", name: "Super Admin", desc: "Acceso total. Gestiona tenants y config del sistema.", badge: "Acceso total", bg: "#EEF3FF" }, - { icon: "🏢", name: "Admin Empresa", desc: "Administra su tenant: usuarios, tarifas, reportes.", badge: "Tenant propio", bg: "#EDE9FE" }, - { icon: "📦", name: "Operador Bodega", desc: "Personal en NJ: verifica, pesa, fotografía y despacha.", badge: "Bodega NJ", bg: "#FEF3C7" }, - { icon: "🛃", name: "Agente Aduanero", desc: "Revisa y aprueba declaraciones ante la SENAE.", badge: "SENAE", bg: "#D1FAE5" }, - { icon: "🧑‍💻", name: "Cliente Final", desc: "Registra compras, pre-alertas y hace seguimiento.", badge: "B2C · Ecuador", bg: "#FFF3E8" }, - { icon: "🎧", name: "Soporte", desc: "Solo lectura: puede ver info de clientes y paquetes.", badge: "Solo lectura", bg: "#F3F4F6" }, + { icon: "👑", name: "Super Admin", desc: "Acceso total. Gestiona tenants y config del sistema.", badge: "Acceso total", bg: "#EEF3FF" }, + { icon: "🏢", name: "Admin Empresa", desc: "Administra su tenant: usuarios, tarifas, reportes.", badge: "Tenant propio", bg: "#EDE9FE" }, + { icon: "📦", name: "Operador Bodega", desc: "Personal en NJ: verifica, pesa, fotografía y despacha.", badge: "Bodega NJ", bg: "#FEF3C7" }, + { icon: "🛃", name: "Agente Aduanero", desc: "Revisa y aprueba declaraciones ante la SENAE.", badge: "SENAE", bg: "#D1FAE5" }, + { icon: "🧑‍💻", name: "Cliente Final", desc: "Registra compras, pre-alertas y hace seguimiento.", badge: "B2C · Ecuador", bg: "#FFF3E8" }, + { icon: "🎧", name: "Soporte", desc: "Solo lectura: puede ver info de clientes y paquetes.", badge: "Solo lectura", bg: "#F3F4F6" }, ]; -// ─── Componentes ────────────────────────────────────────────── - -function Navbar() { - return ( - - ); -} +// ─── Secciones ────────────────────────────────────────── function Hero() { return ( -
-
-
+
+
+
+ ISO/IEC 27001 · SENAE Autorizado · Cuenca, Ecuador
-

- Tu casillero en New Jersey + +

+ Tu casillero en New Jersey
para recibir en Ecuador

-

+ +

Compra en Amazon, eBay, Walmart y más. Te asignamos una Suite personal en nuestra bodega en NJ. Gestionamos el envío y la declaración aduanera SENAE por ti.

-
+ +
📍 Tu Suite:{" "} 150 N Day St, Suite EC-XXXXX, City of Orange, NJ 07050, EE.UU.
-
- + +
+ Crear mi Suite gratis → Calcular mi envío
-
+ +
{[ ["🏢", "Moraworld Imports S.A.S.", "Ecuador · RUC activo"], - ["🏭", "Mora Global Import LLC", "New Jersey, EE.UU."], - ["🛃", "Autorización SENAE", "Declaración automática"], - ].map(([icon, title, sub]) => ( -
- {icon} + ["🏭", "Mora Global Import LLC", "New Jersey, EE.UU."], + ["🛃", "Autorización SENAE", "Declaración automática"], + ].map(([icon, name, sub]) => ( +
+ {icon}
-
{title}
-
{sub}
+ {name} + {sub}
))} @@ -147,48 +112,33 @@ function Hero() { function ServicesSection() { return ( -
-
-
-

Dos servicios, un solo sistema

-

Casillero personal para compras online y carga pesada para importadores B2B.

+
+
+
+ Nuestros Servicios +

Dos soluciones, un solo sistema

+

Casillero personal para compras online e importación B2B para mayoristas.

-
-
-
📦
-

Casillero Personal

-

- Para compras individuales en Amazon, eBay, Walmart y más. Suite personalizada, tracking en tiempo real - y declaración SENAE automática bajo el régimen 4×4. -

-
    - {["Suite virtual asignada al registrarse", "Pre-alerta con carga de factura", "Calculadora de costos SENAE", "11 estados de tracking en tiempo real", "Notificaciones WhatsApp · SMS · Email"].map(i => ( -
  • {i}
    • - ))} +
    +
    +
    📦
    +

    Casillero Personal (B2C)

    +

    Para compras individuales en Amazon, eBay, Walmart y más. Suite personalizada, tracking en tiempo real y declaración SENAE automática bajo el régimen 4×4.

    +
      + {["Suite virtual asignada al registrarse", "Pre-alerta con carga de factura", "Calculadora de costos SENAE", "11 estados de tracking en tiempo real", "Notificaciones WhatsApp · SMS · Email", "Declaración aduanera incluida"].map(i =>
    • {i}
      • )}
    - - Conocer más → + + Abrir casillero gratis →
    -
    -
    🚢
    -

    Carga Pesada / Pallets B2B

    -

    - Para importadores mayoristas: pallets, contenedores, volumen alto. Cotización personalizada, - certificación INEN y declaración formal DAI ante la SENAE. -

    -
      - {["Cotización especial por tipo de mercancía", "Verificación de requisitos INEN", "Declaración formal DAI", "Asesoría en partidas arancelarias", "Expediente B2B con ID de seguimiento"].map(i => ( -
    • {i}
      • - ))} +
      +
      🚢
      +

      Carga Pesada / Pallets (B2B)

      +

      Para importadores mayoristas: pallets, contenedores y carga a granel. Cotización personalizada, certificación INEN y declaración formal DAI ante la SENAE.

      +
        + {["Cotización especial por mercancía", "Verificación de requisitos INEN", "Declaración formal DAI", "Asesoría en partidas arancelarias", "Expediente B2B con seguimiento", "Agente dedicado en WhatsApp"].map(i =>
      • {i}
        • )}
      - + Solicitar cotización →
      @@ -198,28 +148,57 @@ function ServicesSection() { ); } +function HowItWorksSection() { + const steps = [ + { n: "1", t: "Regístrate", d: "Crea tu cuenta y obtén tu Suite exclusiva en New Jersey al instante." }, + { n: "2", t: "Compra en EE.UU.", d: "Usa tu dirección Suite en Amazon, eBay, Walmart o cualquier tienda online." }, + { n: "3", t: "Recibimos en NJ", d: "Tu paquete llega a nuestra bodega. Lo verificamos, fotografiamos y preparamos." }, + { n: "4", t: "Te llega a Ecuador", d: "Enviamos con declaración SENAE incluida. Sigues todo con tu Tracking ID." }, + ]; + return ( +
      +
      +
      + Proceso +

      Así de simple. 4 pasos.

      +

      Desde tu compra hasta la puerta de tu casa en Ecuador, lo manejamos todo.

      +
      +
      + {steps.map(s => ( +
      +
      {s.n}
      +

      {s.t}

      +

      {s.d}

      +
      + ))} +
      +
      +
      + ); +} + function ModulesSection() { return ( -
      -
      -
      -

      8 módulos integrados

      -

      Toda la operación logística cubierta en una sola plataforma.

      +
      +
      +
      + Plataforma +

      8 módulos integrados

      +

      Toda la operación logística cubierta en una sola plataforma.

      -
      - {MODULES.map((m) => ( -
      -
      {m.icon}
      -
      {m.title}
      -

      {m.desc}

      - {m.tag} +
      + {MODULES.map(m => ( +
      +
      {m.icon}
      +
      {m.title}
      +

      {m.desc}

      + {m.tag}
      ))}
      @@ -230,47 +209,40 @@ function ModulesSection() { function TrackingSection() { return ( -
      -
      -
      +
      +
      +
      -

      - Tracking en tiempo real + Tracking en Tiempo Real +

      + Sigue tu paquete en cada paso

      -

      +

      Cada paquete recibe un ID único con 11 estados que cubren todo el ciclo de vida. Búsqueda pública sin necesidad de crear cuenta.

      Formato: EC-YYYYMMDD-XXXXXX
      - Ejemplo: EC-20260506-082341 + Ejemplo: EC-20260628-082341
      - +

      + Notificaciones automáticas por correo, SMS y WhatsApp en cada cambio de estado. +

      + Buscar mi paquete →
      - {TRACKING_STATES.map((s) => ( -
      -
      - {s.num} - {s.name} - {s.desc} + {TRACKING_STATES.map(s => ( +
      +
      + {s.num} + {s.name} + {s.desc}
      ))}
      @@ -282,46 +254,32 @@ function TrackingSection() { function CalculatorPreviewSection() { return ( -
      -
      -

      - Calculadora SENAE gratuita -

      -

      - Sin registro. Conoce el costo total de tu envío antes de comprar. +

      +
      + Calculadora SENAE +

      Calcula tu costo antes de comprar

      +

      + Sin registro. Ingresa peso y valor y obtén el desglose completo con impuestos SENAE.

      -
      - {SENAE_CATEGORIES.map((c) => ( -
      +
      + {SENAE_CATEGORIES.map(c => ( +
      {c.name}
      -
      {c.rate}
      +
      {c.rate}
      {c.desc}
      ))}
      -
      - // Fórmula (doc §15)
      +
      + {"// Fórmula (doc §15)"}
      Flete = Peso_final × $3.50/lb
      Seguro = Valor × 2%
      FODINFA = Valor × 0.5%
      Arancel = Valor × % categoría
      - IVA = (Valor + FODINFA + Arancel) × 15%
      TOTAL = Flete + Seguro + FODINFA + Arancel + IVA
      - - Calcular mi envío → + + Ir a la calculadora →
      @@ -330,25 +288,20 @@ function CalculatorPreviewSection() { function RolesSection() { return ( -
      -
      -
      -

      6 roles, accesos diferenciados

      -

      Cada usuario tiene exactamente lo que necesita. Ni más, ni menos.

      +
      +
      +
      + Accesos +

      6 roles, accesos diferenciados

      +

      Cada usuario tiene exactamente lo que necesita. Ni más, ni menos.

      -
      - {ROLES.map((r) => ( -
      -
      {r.icon}
      -
      {r.name}
      -

      {r.desc}

      - {r.badge} +
      + {ROLES.map(r => ( +
      +
      {r.icon}
      +
      {r.name}
      +

      {r.desc}

      + {r.badge}
      ))}
      @@ -359,37 +312,34 @@ function RolesSection() { function CompaniesSection() { return ( -
      -
      -

      Operación legal en dos países

      -

      Empresas constituidas legalmente en Ecuador y EE.UU.

      -
      +
      +
      +
      + Confianza y Legalidad +

      Operación legal en dos países

      +

      Empresas constituidas legalmente en Ecuador y EE.UU. con representación visible en ambos países.

      +
      +
      {[ { flag: "🇪🇨", name: "Moraworld Imports S.A.S.", - detail: "Constituida en Ecuador. Representante legal en Cuenca. RUC activo, permisos aduaneros vigentes ante la SENAE.", + desc: "Constituida en Ecuador. Representante legal en Cuenca. RUC activo, permisos aduaneros vigentes ante la SENAE.", badge: "Ecuador · S.A.S. · SENAE · Cuenca", }, { flag: "🇺🇸", name: "Mora Global Import LLC", - detail: "LLC registrada en New Jersey, EE.UU. Bodega operativa en 150 N Day St, City of Orange, NJ 07050.", + desc: "LLC registrada en New Jersey, EE.UU. Bodega operativa en 150 N Day St, City of Orange, NJ 07050.", badge: "New Jersey · LLC · NJ 07050", }, - ].map((c) => ( -
      - {c.flag} -
      -
      {c.name}
      -

      {c.detail}

      - {c.badge} + ].map(c => ( +
      + {c.flag} +
      +
      {c.name}
      +

      {c.desc}

      + {c.badge}
      ))} @@ -399,61 +349,76 @@ function CompaniesSection() { ); } +function CtaSection() { + return ( +
      +
      +

      ¿Listo para comprar en EE.UU.
      y recibir en Ecuador?

      +

      Regístrate gratis y obtén tu Suite en New Jersey en menos de 2 minutos.

      + + Abrir mi casillero gratis → + +
      +
      + ); +} + function Footer() { return ( -