Files
docs/悦/官网/index.html
T

1759 lines
110 KiB
HTML
Raw Normal View History

2026-07-31 10:43:30 +08:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>虫虫出海 CHONGCHONG GLOBAL | 跨境物流一站式解决方案</title>
<meta name="description" content="虫虫出海 - 专业货代服务,提供海外采购、美本土卡车、美本土散板、海运专线、一件代发等跨境物流解决方案。">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700;900&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
green: '#4CAF50',
greenDark: '#2E7D32',
blue: '#1565C0',
blueDark: '#0D47A1',
teal: '#00838F',
light: '#F0F7FF',
dark: '#0A1628'
}
},
fontFamily: {
sans: ['Inter', 'Noto Sans SC', 'system-ui', 'sans-serif'],
},
boxShadow: {
'glow': '0 0 40px rgba(21, 101, 192, 0.15)',
'glow-green': '0 0 40px rgba(76, 175, 80, 0.15)',
'card': '0 10px 40px rgba(10, 22, 40, 0.08)',
'card-hover': '0 20px 60px rgba(10, 22, 40, 0.15)',
}
}
}
}
</script>
<style>
:root {
--primary: #1565C0;
--primary-dark: #0D47A1;
--accent: #4CAF50;
--accent-dark: #2E7D32;
}
* {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
overflow-x: hidden;
}
.gradient-text {
background: linear-gradient(135deg, #1565C0 0%, #4CAF50 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-bg {
background: linear-gradient(135deg, #0A1628 0%, #1565C0 50%, #00838F 100%);
}
.gradient-bg-soft {
background: linear-gradient(135deg, #F0F7FF 0%, #E8F5E9 100%);
}
.btn-primary {
background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(21, 101, 192, 0.35);
}
.btn-accent {
background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
transition: all 0.3s ease;
}
.btn-accent:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(76, 175, 80, 0.35);
}
.hero-bg {
background: linear-gradient(135deg, rgba(10, 22, 40, 0.92) 0%, rgba(21, 101, 192, 0.85) 50%, rgba(0, 131, 143, 0.8) 100%),
url('https://images.unsplash.com/photo-1494412574643-ff11b0a5c1c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.nav-scrolled {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
box-shadow: 0 4px 30px rgba(10, 22, 40, 0.08);
}
.nav-scrolled .nav-link {
color: #0A1628;
}
.nav-scrolled .nav-logo-text {
color: #0A1628;
}
/* 导航栏 LOGO:默认白色(叠在深色 Hero),滚动到白色导航栏时
用 filter 把白字 PNG 染成深蓝 #0D47A1 */
.nav-logo-img {
display: block;
transition: filter 0.4s ease;
}
.nav-scrolled .nav-logo-img {
filter: brightness(0) saturate(100%) invert(20%) sepia(84%) saturate(1926%) hue-rotate(202deg) brightness(94%) contrast(93%);
}
.service-card {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 60px rgba(10, 22, 40, 0.15);
}
.service-card:hover .service-icon {
transform: scale(1.1) rotate(5deg);
}
.service-icon {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.process-line {
background: linear-gradient(90deg, #1565C0 0%, #4CAF50 100%);
}
.process-step {
transition: all 0.3s ease;
}
.process-step:hover {
transform: translateY(-5px);
}
.process-step:hover .process-number {
transform: scale(1.15);
box-shadow: 0 0 30px rgba(21, 101, 192, 0.3);
}
.process-number {
transition: all 0.3s ease;
}
.feature-item {
transition: all 0.3s ease;
}
.feature-item:hover {
background: rgba(21, 101, 192, 0.05);
}
.stat-card {
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(21, 101, 192, 0.12);
}
.input-field {
transition: all 0.3s ease;
}
.input-field:focus {
border-color: #1565C0;
box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.1);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.animate-pulse-slow {
animation: pulse-slow 4s ease-in-out infinite;
}
@keyframes pulse-slow {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
.mobile-menu {
transform: translateX(100%);
transition: transform 0.3s ease;
}
.mobile-menu.open {
transform: translateX(0);
}
.route-section {
display: none;
animation: fadeIn 0.5s ease;
}
.route-section.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.overlay-dots {
background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 30px 30px;
}
.glass-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.tab-active {
background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
color: white;
}
.check-list li {
position: relative;
padding-left: 2rem;
}
.check-list li::before {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #4CAF50;
}
/* 语言切换器 */
.lang-switcher {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 9999px;
padding: 3px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.lang-switcher button {
font-size: 12px;
font-weight: 600;
padding: 4px 9px;
border-radius: 9999px;
color: rgba(255, 255, 255, 0.9);
transition: all 0.25s ease;
white-space: nowrap;
}
.lang-switcher button:hover {
color: #fff;
}
.lang-switcher button.active {
background: #fff;
color: #0D47A1;
}
.nav-scrolled .lang-switcher {
background: rgba(21, 101, 192, 0.08);
border-color: rgba(21, 101, 192, 0.15);
}
.nav-scrolled .lang-switcher button {
color: #0A1628;
}
.nav-scrolled .lang-switcher button.active {
background: #1565C0;
color: #fff;
}
.lang-switcher-mobile {
display: flex;
gap: 8px;
}
.lang-switcher-mobile button {
flex: 1;
font-size: 14px;
font-weight: 600;
padding: 10px;
border-radius: 12px;
border: 1px solid #e5e7eb;
background: #f9fafb;
color: #374151;
transition: all 0.25s ease;
}
.lang-switcher-mobile button.active {
background: #1565C0;
color: #fff;
border-color: #1565C0;
}
.dash-sidebar.open { transform: translateX(0); }
.dash-menu-btn { display: inline-flex; }
}
</style>
</head>
<body class="text-gray-800 antialiased">
<!-- 导航栏 -->
<nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500 py-4">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<a href="#" onclick="navigateTo('home')" class="flex items-center group">
<div class="relative flex items-center justify-center" style="width:161px;height:60px;">
<img src="assets/logo.png" alt="柏悦物流" class="nav-logo-img" style="width:161px;height:60px;object-fit:contain;">
</div>
</a>
<!-- 桌面导航 -->
<div class="hidden lg:flex items-center space-x-8">
<a href="#" onclick="navigateTo('home')" class="nav-link text-white/90 hover:text-brand-green font-medium transition-colors" data-i18n="nav_home">首页</a>
<a href="#services" onclick="navigateTo('home', 'services')" class="nav-link text-white/90 hover:text-brand-green font-medium transition-colors" data-i18n="nav_services">服务</a>
<a href="#process" onclick="navigateTo('home', 'process')" class="nav-link text-white/90 hover:text-brand-green font-medium transition-colors" data-i18n="nav_process">流程</a>
<a href="#business" onclick="navigateTo('home', 'business')" class="nav-link text-white/90 hover:text-brand-green font-medium transition-colors" data-i18n="nav_business">业务</a>
<a href="#about" onclick="navigateTo('home', 'about')" class="nav-link text-white/90 hover:text-brand-green font-medium transition-colors" data-i18n="nav_about">关于</a>
<a href="#contact" onclick="navigateTo('home', 'contact')" class="nav-link text-white/90 hover:text-brand-green font-medium transition-colors" data-i18n="nav_contact">联系</a>
</div>
<!-- 语言切换(登录前后均显示) -->
<div class="lang-switcher hidden lg:flex" id="langSwitcher">
<button data-lang="zh" class="active" title="中文">中</button>
<button data-lang="en" title="English">EN</button>
<button data-lang="es" title="Español (México)">🇲🇽</button>
</div>
<!-- 未登录:登录注册按钮 -->
<div id="navAuthOut" class="hidden lg:flex items-center space-x-4">
<button onclick="window.location.href='login.html'" class="nav-link text-white/90 hover:text-white font-medium px-4 py-2 transition-colors" data-i18n="nav_login">登录</button>
<button onclick="window.location.href='register.html'" class="bg-white text-brand-blue hover:bg-brand-green hover:text-white font-semibold px-6 py-2.5 rounded-full transition-all duration-300 transform hover:scale-105" data-i18n="nav_register">
免费注册
</button>
</div>
<!-- 已登录:工作台 / 退出(桌面显示,移动端走汉堡菜单) -->
<div id="navAuthIn" class="hidden items-center space-x-3">
<button onclick="window.location.href='workbench.html'" class="nav-link text-white/90 hover:text-brand-green font-medium px-4 py-2 transition-colors" data-i18n="nav_dashboard">工作台</button>
<button onclick="doLogout()" class="bg-white/15 hover:bg-white/25 text-white font-semibold px-5 py-2.5 rounded-full transition-all" data-i18n="dash_logout">退出登录</button>
</div>
<!-- 移动端菜单按钮 -->
<button id="mobileMenuBtn" class="lg:hidden text-white nav-link p-2">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
</nav>
<!-- 移动端菜单 -->
<div id="mobileMenu" class="mobile-menu fixed inset-y-0 right-0 z-50 w-80 bg-white shadow-2xl lg:hidden">
<div class="p-6">
<div class="flex justify-between items-center mb-8">
<div class="flex items-center">
<img src="assets/logo.png" alt="虫虫出海" style="width:161px;height:60px;object-fit:contain;">
</div>
<button id="closeMobileMenu" class="text-gray-600 hover:text-gray-900">
<i class="fas fa-times text-2xl"></i>
</button>
</div>
<div class="flex flex-col space-y-4">
<a href="#" onclick="navigateTo('home'); closeMobileMenu();" class="text-gray-700 hover:text-brand-blue font-medium py-2 border-b border-gray-100" data-i18n="nav_home">首页</a>
<a href="#services" onclick="navigateTo('home', 'services'); closeMobileMenu();" class="text-gray-700 hover:text-brand-blue font-medium py-2 border-b border-gray-100" data-i18n="nav_services">服务</a>
<a href="#process" onclick="navigateTo('home', 'process'); closeMobileMenu();" class="text-gray-700 hover:text-brand-blue font-medium py-2 border-b border-gray-100" data-i18n="nav_process">流程</a>
<a href="#business" onclick="navigateTo('home', 'business'); closeMobileMenu();" class="text-gray-700 hover:text-brand-blue font-medium py-2 border-b border-gray-100" data-i18n="nav_business">业务</a>
<a href="#about" onclick="navigateTo('home', 'about'); closeMobileMenu();" class="text-gray-700 hover:text-brand-blue font-medium py-2 border-b border-gray-100" data-i18n="nav_about">关于</a>
<a href="#contact" onclick="navigateTo('home', 'contact'); closeMobileMenu();" class="text-gray-700 hover:text-brand-blue font-medium py-2 border-b border-gray-100" data-i18n="nav_contact">联系</a>
<div id="navAuthOutMobile">
<button onclick="window.location.href='login.html'; closeMobileMenu();" class="text-left text-gray-700 hover:text-brand-blue font-medium py-2 border-b border-gray-100" data-i18n="nav_login">登录</button>
<button onclick="window.location.href='register.html'; closeMobileMenu();" class="btn-primary text-white font-semibold py-3 rounded-xl mt-4" data-i18n="nav_register">免费注册</button>
</div>
<div id="navAuthInMobile" class="hidden">
<button onclick="window.location.href='workbench.html'; closeMobileMenu();" class="text-left text-gray-700 hover:text-brand-blue font-medium py-2 border-b border-gray-100" data-i18n="nav_dashboard">工作台</button>
<button onclick="doLogout(); closeMobileMenu();" class="btn-primary text-white font-semibold py-3 rounded-xl mt-4" data-i18n="dash_logout">退出登录</button>
</div>
<!-- 移动端语言切换 -->
<div class="lang-switcher-mobile mt-4" id="langSwitcherMobile">
<button data-lang="zh" class="active" data-i18n="lang_zh">中文</button>
<button data-lang="en" data-i18n="lang_en">English</button>
<button data-lang="es" data-i18n="lang_es">Español</button>
</div>
</div>
</div>
</div>
<div id="mobileOverlay" class="fixed inset-0 bg-black/50 z-40 hidden lg:hidden"></div>
<!-- 首页 -->
<section id="homeSection" class="route-section active">
<!-- Hero 区域 -->
<section class="hero-bg min-h-screen flex items-center relative overflow-hidden">
<div class="overlay-dots absolute inset-0"></div>
<div class="absolute inset-0 bg-gradient-to-r from-brand-dark/90 via-brand-dark/70 to-transparent"></div>
<!-- 装饰元素 -->
<div class="absolute top-1/4 right-10 w-72 h-72 bg-brand-blue/20 rounded-full blur-3xl animate-pulse-slow"></div>
<div class="absolute bottom-1/4 right-1/3 w-96 h-96 bg-brand-green/10 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 2s;"></div>
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
<div class="max-w-3xl">
<div class="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full px-4 py-2 mb-8 reveal">
<span class="w-2 h-2 bg-brand-green rounded-full animate-pulse"></span>
<span class="text-white/90 text-sm font-medium" data-i18n="hero_badge">跨境物流一站式解决方案</span>
</div>
<h1 class="text-5xl sm:text-6xl lg:text-7xl font-black text-white leading-tight mb-6 reveal" style="transition-delay: 0.1s;">
<span data-i18n="hero_title1">让世界贸易</span><br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-green to-blue-400" data-i18n="hero_title2">更简单高效</span>
</h1>
<p class="text-xl text-white/80 mb-10 max-w-2xl leading-relaxed reveal" style="transition-delay: 0.2s;" data-i18n="hero_desc">
虫虫出海专注中美跨境物流,提供海外采购、美本土卡车、美本土散板、海运专线、一件代发等全链路服务,助力中国品牌出海无忧。
</p>
<div class="flex flex-col sm:flex-row gap-4 reveal" style="transition-delay: 0.3s;">
<button id="heroCtaPrimary" onclick="window.location.href='register.html'" class="btn-accent text-white font-bold px-8 py-4 rounded-full text-lg flex items-center justify-center space-x-2">
<span data-i18n="hero_cta1">立即体验</span>
<i class="fas fa-arrow-right"></i>
</button>
<button onclick="navigateTo('home', 'services')" class="bg-white/10 backdrop-blur-sm border-2 border-white/30 text-white hover:bg-white/20 font-bold px-8 py-4 rounded-full text-lg transition-all" data-i18n="hero_cta2">
了解服务
</button>
</div>
<div class="mt-16 grid grid-cols-2 sm:grid-cols-4 gap-6 reveal" style="transition-delay: 0.4s;">
<div class="text-center">
<div class="text-3xl font-black text-white">50+</div>
<div class="text-sm text-white/70" data-i18n="stat_cities">覆盖城市</div>
</div>
<div class="text-center">
<div class="text-3xl font-black text-white">99.2%</div>
<div class="text-sm text-white/70" data-i18n="stat_ontime">准时率</div>
</div>
<div class="text-center">
<div class="text-3xl font-black text-white">24h</div>
<div class="text-sm text-white/70" data-i18n="stat_customs">清关响应</div>
</div>
<div class="text-center">
<div class="text-3xl font-black text-white">10000+</div>
<div class="text-sm text-white/70" data-i18n="stat_clients">服务客户</div>
</div>
</div>
</div>
</div>
</section>
<!-- 核心服务 -->
<section id="services" class="py-24 bg-white relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16 reveal">
<span class="text-brand-blue font-semibold tracking-wider uppercase text-sm" data-i18n="svc_eyebrow">Core Services</span>
<h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mt-3 mb-6" data-i18n="svc_title">专业服务,覆盖跨境全链路</h2>
<p class="text-lg text-gray-600" data-i18n="svc_subtitle">依托美国本土优势资源与全球化网络,为企业提供稳定、高效、可追踪的跨境物流服务。</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- 海外采购 -->
<div class="service-card bg-white rounded-2xl p-8 shadow-card border border-gray-100 reveal">
<div class="service-icon w-16 h-16 rounded-2xl bg-gradient-to-br from-brand-blue to-brand-blueDark flex items-center justify-center text-white text-2xl mb-6">
<i class="fas fa-shopping-cart"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="svc1_title">海外采购</h3>
<p class="text-gray-600 mb-6 leading-relaxed" data-i18n="svc1_desc">提供海外供应商对接、采购执行、验货质检、集中采购等一体化服务,降低采购成本,提升供应链效率。</p>
<ul class="check-list space-y-2 text-gray-600 text-sm">
<li data-i18n="svc1_li1">供应商筛选与资质审核</li>
<li data-i18n="svc1_li2">样品确认与批量采购</li>
<li data-i18n="svc1_li3">质量检验与合规把关</li>
<li data-i18n="svc1_li4">集货仓储与统一发货</li>
</ul>
</div>
<!-- 美本土卡车 -->
<div class="service-card bg-white rounded-2xl p-8 shadow-card border border-gray-100 reveal" style="transition-delay: 0.1s;">
<div class="service-icon w-16 h-16 rounded-2xl bg-gradient-to-br from-brand-green to-brand-greenDark flex items-center justify-center text-white text-2xl mb-6">
<i class="fas fa-truck-moving"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="svc2_title">美本土卡车</h3>
<p class="text-gray-600 mb-6 leading-relaxed" data-i18n="svc2_desc">覆盖美国全境的卡车运输网络,提供 FTL 整车、LTL 零担、超大件派送等灵活解决方案。</p>
<ul class="check-list space-y-2 text-gray-600 text-sm">
<li data-i18n="svc2_li1">全美 FTL/LTL 运输</li>
<li data-i18n="svc2_li2">超大件及特种车辆</li>
<li data-i18n="svc2_li3">实时 GPS 轨迹追踪</li>
<li data-i18n="svc2_li4">预约送货与签收确认</li>
</ul>
</div>
<!-- 美本土散板 -->
<div class="service-card bg-white rounded-2xl p-8 shadow-card border border-gray-100 reveal" style="transition-delay: 0.2s;">
<div class="service-icon w-16 h-16 rounded-2xl bg-gradient-to-br from-brand-teal to-cyan-700 flex items-center justify-center text-white text-2xl mb-6">
<i class="fas fa-pallet"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="svc3_title">美本土散板</h3>
<p class="text-gray-600 mb-6 leading-relaxed" data-i18n="svc3_desc">针对托盘货物提供美国本土拆板、分拣、再派服务,适配电商退货、B2B 补货、多渠道配送场景。</p>
<ul class="check-list space-y-2 text-gray-600 text-sm">
<li data-i18n="svc3_li1">托盘拆板与重新组板</li>
<li data-i18n="svc3_li2">多地址分拣派送</li>
<li data-i18n="svc3_li3">退货逆向物流</li>
<li data-i18n="svc3_li4">仓储与库存管理</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 服务流程 -->
<section id="process" class="py-24 gradient-bg-soft relative overflow-hidden">
<!-- 背景装饰 -->
<div class="absolute top-0 left-0 w-full h-full opacity-30">
<div class="absolute top-20 left-10 w-64 h-64 bg-brand-blue/10 rounded-full blur-3xl"></div>
<div class="absolute bottom-20 right-10 w-80 h-80 bg-brand-green/10 rounded-full blur-3xl"></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center max-w-3xl mx-auto mb-16 reveal">
<span class="text-brand-blue font-semibold tracking-wider uppercase text-sm" data-i18n="proc_eyebrow">Service Process</span>
<h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mt-3 mb-6" data-i18n="proc_title">标准化服务流程</h2>
<p class="text-lg text-gray-600" data-i18n="proc_subtitle">从上门取件到签收入库,每个环节都严格把控,确保货物安全、准时送达。</p>
</div>
<div class="relative">
<!-- 流程线 -->
<div class="hidden lg:block absolute top-24 left-0 right-0 h-1 process-line rounded-full mx-24"></div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- 步骤1 -->
<div class="process-step text-center reveal">
<div class="process-number w-20 h-20 rounded-full bg-gradient-to-br from-brand-blue to-brand-blueDark text-white text-2xl font-black flex items-center justify-center mx-auto mb-6 relative z-10 shadow-glow">
01
</div>
<div class="bg-white rounded-2xl p-6 shadow-card">
<div class="w-14 h-14 rounded-xl bg-blue-50 flex items-center justify-center text-brand-blue text-xl mx-auto mb-4">
<i class="fas fa-box-open"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="proc1_title">上门取件</h3>
<p class="text-gray-600 text-sm leading-relaxed" data-i18n="proc1_desc">专业团队按约定时间上门提货,核对货物信息,提供标准化包装建议。</p>
</div>
</div>
<!-- 步骤2 -->
<div class="process-step text-center reveal" style="transition-delay: 0.1s;">
<div class="process-number w-20 h-20 rounded-full bg-gradient-to-br from-brand-teal to-cyan-700 text-white text-2xl font-black flex items-center justify-center mx-auto mb-6 relative z-10 shadow-glow">
02
</div>
<div class="bg-white rounded-2xl p-6 shadow-card">
<div class="w-14 h-14 rounded-xl bg-cyan-50 flex items-center justify-center text-brand-teal text-xl mx-auto mb-4">
<i class="fas fa-file-contract"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="proc2_title">入仓清关</h3>
<p class="text-gray-600 text-sm leading-relaxed" data-i18n="proc2_desc">货物入仓后由专业报关团队处理清关资料,提前预审,确保快速通关。</p>
</div>
</div>
<!-- 步骤3 -->
<div class="process-step text-center reveal" style="transition-delay: 0.2s;">
<div class="process-number w-20 h-20 rounded-full bg-gradient-to-br from-brand-green to-brand-greenDark text-white text-2xl font-black flex items-center justify-center mx-auto mb-6 relative z-10 shadow-glow-green">
03
</div>
<div class="bg-white rounded-2xl p-6 shadow-card">
<div class="w-14 h-14 rounded-xl bg-green-50 flex items-center justify-center text-brand-green text-xl mx-auto mb-4">
<i class="fas fa-ship"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="proc3_title">国际运输</h3>
<p class="text-gray-600 text-sm leading-relaxed" data-i18n="proc3_desc">海运专线稳定发运,全程轨迹可追踪,异常情况主动预警及时响应。</p>
</div>
</div>
<!-- 步骤4 -->
<div class="process-step text-center reveal" style="transition-delay: 0.3s;">
<div class="process-number w-20 h-20 rounded-full bg-gradient-to-br from-brand-blue to-brand-green text-white text-2xl font-black flex items-center justify-center mx-auto mb-6 relative z-10 shadow-glow">
04
</div>
<div class="bg-white rounded-2xl p-6 shadow-card">
<div class="w-14 h-14 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-600 text-xl mx-auto mb-4">
<i class="fas fa-warehouse"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="proc4_title">签收入库</h3>
<p class="text-gray-600 text-sm leading-relaxed" data-i18n="proc4_desc">目的地仓库签收核验,系统同步入库状态,支持一键转代发或派送。</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 业务板块 -->
<section id="business" class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16 reveal">
<span class="text-brand-blue font-semibold tracking-wider uppercase text-sm" data-i18n="biz_eyebrow">Business Lines</span>
<h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mt-3 mb-6" data-i18n="biz_title">核心业务的深度布局</h2>
<p class="text-lg text-gray-600" data-i18n="biz_subtitle">海运专线与一件代发双轮驱动,满足不同规模企业的出海需求。</p>
</div>
<div class="grid lg:grid-cols-2 gap-10">
<!-- 海运专线 -->
<div class="group relative rounded-3xl overflow-hidden shadow-card hover:shadow-card-hover transition-all duration-500 reveal">
<div class="absolute inset-0">
<img src="https://images.unsplash.com/photo-1578575437130-527eed3abbec?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="海运专线" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-brand-dark via-brand-dark/70 to-transparent"></div>
</div>
<div class="relative z-10 p-10 min-h-[420px] flex flex-col justify-end">
<div class="w-16 h-16 rounded-2xl bg-brand-blue/90 backdrop-blur flex items-center justify-center text-white text-2xl mb-6">
<i class="fas fa-anchor"></i>
</div>
<h3 class="text-3xl font-bold text-white mb-4" data-i18n="biz1_title">海运专线</h3>
<p class="text-white/80 mb-6 leading-relaxed" data-i18n="biz1_desc">中美海运专线,提供整柜(FCL)、拼箱(LCL)、美森快船、盐田普船等多元化海运产品,舱位稳定,价格透明。</p>
<ul class="space-y-2 text-white/90 text-sm">
<li class="flex items-center"><i class="fas fa-check-circle text-brand-green mr-2"></i> <span data-i18n="biz1_li1">每周固定船期,舱位保障</span></li>
<li class="flex items-center"><i class="fas fa-check-circle text-brand-green mr-2"></i> <span data-i18n="biz1_li2">双清包税,门到门服务</span></li>
<li class="flex items-center"><i class="fas fa-check-circle text-brand-green mr-2"></i> <span data-i18n="biz1_li3">全程可视化追踪系统</span></li>
</ul>
</div>
</div>
<!-- 一件代发 -->
<div class="group relative rounded-3xl overflow-hidden shadow-card hover:shadow-card-hover transition-all duration-500 reveal" style="transition-delay: 0.1s;">
<div class="absolute inset-0">
<img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="一件代发" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-brand-dark via-brand-dark/70 to-transparent"></div>
</div>
<div class="relative z-10 p-10 min-h-[420px] flex flex-col justify-end">
<div class="w-16 h-16 rounded-2xl bg-brand-green/90 backdrop-blur flex items-center justify-center text-white text-2xl mb-6">
<i class="fas fa-parachute-box"></i>
</div>
<h3 class="text-3xl font-bold text-white mb-4" data-i18n="biz2_title">一件代发</h3>
<p class="text-white/80 mb-6 leading-relaxed" data-i18n="biz2_desc">美国本土仓储 + 订单履约,支持 Amazon、Walmart、独立站等多平台订单的一件代发,助力卖家降本增效。</p>
<ul class="space-y-2 text-white/90 text-sm">
<li class="flex items-center"><i class="fas fa-check-circle text-brand-green mr-2"></i> <span data-i18n="biz2_li1">多平台 API 对接</span></li>
<li class="flex items-center"><i class="fas fa-check-circle text-brand-green mr-2"></i> <span data-i18n="biz2_li2">智能库存与订单管理</span></li>
<li class="flex items-center"><i class="fas fa-check-circle text-brand-green mr-2"></i> <span data-i18n="biz2_li3">24h 出库,快速妥投</span></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 企业优势 -->
<section id="advantages" class="py-24 gradient-bg-soft relative overflow-hidden">
<div class="absolute top-0 right-0 w-full h-full opacity-30">
<div class="absolute top-16 right-10 w-72 h-72 bg-brand-blue/10 rounded-full blur-3xl"></div>
<div class="absolute bottom-16 left-10 w-80 h-80 bg-brand-green/10 rounded-full blur-3xl"></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center max-w-3xl mx-auto mb-16 reveal">
<span class="text-brand-blue font-semibold tracking-wider uppercase text-sm" data-i18n="adv_eyebrow">Our Advantages</span>
<h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mt-3 mb-6" data-i18n="adv_title">六大企业优势</h2>
<p class="text-lg text-gray-600" data-i18n="adv_subtitle">深耕中美跨境物流多年,以专业能力与本土资源为客户构筑稳定可靠的供应链保障。</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="service-card bg-white rounded-2xl p-8 shadow-card border border-gray-100 reveal">
<div class="w-14 h-14 rounded-2xl bg-blue-50 flex items-center justify-center text-brand-blue text-2xl mb-5">
<i class="fas fa-users"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="adv1_title">专业团队</h3>
<p class="text-gray-600 leading-relaxed" data-i18n="adv1_desc">10 年以上跨境物流经验的核心团队,熟悉各国海关政策与操作流程。</p>
</div>
<div class="service-card bg-white rounded-2xl p-8 shadow-card border border-gray-100 reveal" style="transition-delay: 0.05s;">
<div class="w-14 h-14 rounded-2xl bg-green-50 flex items-center justify-center text-brand-green text-2xl mb-5">
<i class="fas fa-warehouse"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="adv2_title">自营海外仓</h3>
<p class="text-gray-600 leading-relaxed" data-i18n="adv2_desc">美国自营海外仓,提供仓储、分拣、包装、退件处理等全方位服务。</p>
</div>
<div class="service-card bg-white rounded-2xl p-8 shadow-card border border-gray-100 reveal" style="transition-delay: 0.1s;">
<div class="w-14 h-14 rounded-2xl bg-cyan-50 flex items-center justify-center text-brand-teal text-2xl mb-5">
<i class="fas fa-file-invoice-dollar"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="adv3_title">双清包税</h3>
<p class="text-gray-600 leading-relaxed" data-i18n="adv3_desc">专业报关清关服务,包税渠道,通关高效,让您省心省力。</p>
</div>
<div class="service-card bg-white rounded-2xl p-8 shadow-card border border-gray-100 reveal" style="transition-delay: 0.15s;">
<div class="w-14 h-14 rounded-2xl bg-indigo-50 flex items-center justify-center text-indigo-600 text-2xl mb-5">
<i class="fas fa-route"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="adv4_title">全程可视化</h3>
<p class="text-gray-600 leading-relaxed" data-i18n="adv4_desc">GPS 实时定位,订单全流程跟踪,随时掌握货物状态。</p>
</div>
<div class="service-card bg-white rounded-2xl p-8 shadow-card border border-gray-100 reveal" style="transition-delay: 0.2s;">
<div class="w-14 h-14 rounded-2xl bg-rose-50 flex items-center justify-center text-rose-500 text-2xl mb-5">
<i class="fas fa-shield-halved"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="adv5_title">保险服务</h3>
<p class="text-gray-600 leading-relaxed" data-i18n="adv5_desc">完善的货物保险服务,全方位保障货物安全,降低运输风险。</p>
</div>
<div class="service-card bg-white rounded-2xl p-8 shadow-card border border-gray-100 reveal" style="transition-delay: 0.25s;">
<div class="w-14 h-14 rounded-2xl bg-amber-50 flex items-center justify-center text-amber-500 text-2xl mb-5">
<i class="fas fa-boxes-stacked"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3" data-i18n="adv6_title">一站式服务</h3>
<p class="text-gray-600 leading-relaxed" data-i18n="adv6_desc">从揽件到签收,提供完整的物流解决方案,无需对接多个服务商。</p>
</div>
</div>
</div>
</section>
<!-- 核心优势 -->
<section id="about" class="py-24 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div class="reveal">
<span class="text-brand-blue font-semibold tracking-wider uppercase text-sm" data-i18n="about_eyebrow">Why Choose Us</span>
<h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mt-3 mb-6" data-i18n="about_title">为什么选择虫虫出海</h2>
<p class="text-lg text-gray-600 mb-10 leading-relaxed" data-i18n="about_desc">我们不只是物流服务商,更是企业出海的合作伙伴。凭借专业的团队、成熟的网络与数字化系统,为客户提供端到端的供应链保障。</p>
<div class="space-y-6">
<div class="feature-item flex items-start space-x-4 p-4 rounded-xl">
<div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center text-brand-blue text-xl flex-shrink-0">
<i class="fas fa-globe-americas"></i>
</div>
<div>
<h4 class="text-lg font-bold text-gray-900 mb-1" data-i18n="feat1_title">全球化网络</h4>
<p class="text-gray-600" data-i18n="feat1_desc">覆盖中美主要口岸与城市,自建与合作仓库遍布美国东西海岸。</p>
</div>
</div>
<div class="feature-item flex items-start space-x-4 p-4 rounded-xl">
<div class="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center text-brand-green text-xl flex-shrink-0">
<i class="fas fa-laptop-code"></i>
</div>
<div>
<h4 class="text-lg font-bold text-gray-900 mb-1" data-i18n="feat2_title">数字化系统</h4>
<p class="text-gray-600" data-i18n="feat2_desc">自研物流管理系统,订单、轨迹、库存、结算一站式在线管理。</p>
</div>
</div>
<div class="feature-item flex items-start space-x-4 p-4 rounded-xl">
<div class="w-12 h-12 rounded-xl bg-cyan-100 flex items-center justify-center text-brand-teal text-xl flex-shrink-0">
<i class="fas fa-headset"></i>
</div>
<div>
<h4 class="text-lg font-bold text-gray-900 mb-1" data-i18n="feat3_title">专属客服</h4>
<p class="text-gray-600" data-i18n="feat3_desc">中美两地客服团队,7×24 小时响应,异常情况第一时间处理。</p>
</div>
</div>
<div class="feature-item flex items-start space-x-4 p-4 rounded-xl">
<div class="w-12 h-12 rounded-xl bg-indigo-100 flex items-center justify-center text-indigo-600 text-xl flex-shrink-0">
<i class="fas fa-shield-alt"></i>
</div>
<div>
<h4 class="text-lg font-bold text-gray-900 mb-1" data-i18n="feat4_title">合规保障</h4>
<p class="text-gray-600" data-i18n="feat4_desc">专业清关团队,熟悉中美贸易法规,确保货物合规高效通关。</p>
</div>
</div>
</div>
</div>
<div class="relative reveal" style="transition-delay: 0.2s;">
<div class="relative rounded-3xl overflow-hidden shadow-2xl">
<img src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="物流仓储" class="w-full h-auto">
<div class="absolute inset-0 bg-gradient-to-tr from-brand-blue/20 to-transparent"></div>
</div>
<!-- 浮动数据卡 -->
<div class="absolute -bottom-8 -left-8 bg-white rounded-2xl shadow-card p-6 animate-float hidden lg:block">
<div class="flex items-center space-x-4">
<div class="w-14 h-14 rounded-full bg-gradient-to-br from-brand-green to-brand-greenDark flex items-center justify-center text-white text-2xl">
<i class="fas fa-chart-line"></i>
</div>
<div>
<div class="text-2xl font-black text-gray-900">35%</div>
<div class="text-sm text-gray-600" data-i18n="about_stat_label">平均物流成本降低</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 企业文化 -->
<section id="culture" class="py-24 bg-white relative overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16 reveal">
<span class="text-brand-blue font-semibold tracking-wider uppercase text-sm" data-i18n="cul_eyebrow">Corporate Culture</span>
<h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mt-3 mb-6" data-i18n="cul_title">关于我们与企业文化</h2>
<p class="text-lg text-gray-600" data-i18n="cul_subtitle">以心传递,畅达天下——用专业与责任连接中美贸易的每一段旅程。</p>
</div>
<div class="grid lg:grid-cols-5 gap-10 items-stretch">
<!-- 公司简介 -->
<div class="lg:col-span-3 reveal">
<div class="h-full bg-gray-50 rounded-3xl p-10 border border-gray-100">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-brand-blue to-brand-blueDark flex items-center justify-center text-white text-2xl mb-6">
<i class="fas fa-building"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900 mb-4" data-i18n="cul_profile_title">公司简介</h3>
<p class="text-gray-600 leading-relaxed mb-4" data-i18n="cul_profile_desc1">我们是一家专业从事中美海运专线、中美空运专线、海外仓储服务的跨境物流公司,深耕美国、加拿大市场,主营海运、空运、铁运等跨境专线业务。</p>
<p class="text-gray-600 leading-relaxed" data-i18n="cul_profile_desc2">建立了以美森快船、OA 联盟电商快船及中美空运为主导的 FBA 美国全程运输渠道。在美国拥有自营海外仓,加拿大有合作海外仓,配备专业报关清关团队、双清派送到门服务与完善的保险服务,为跨境电商客户提供多样化的一站式解决方案。</p>
</div>
</div>
<!-- 愿景使命价值观 -->
<div class="lg:col-span-2 flex flex-col gap-6 reveal" style="transition-delay: 0.1s;">
<div class="rounded-2xl p-6 bg-blue-50 border border-blue-100">
<div class="flex items-center space-x-3 mb-2">
<i class="fas fa-bullseye text-brand-blue text-xl"></i>
<h4 class="text-lg font-bold text-gray-900" data-i18n="cul_vision_t">企业愿景</h4>
</div>
<p class="text-gray-600" data-i18n="cul_vision_d">成为跨境物流行业值得信赖的优选服务平台。</p>
</div>
<div class="rounded-2xl p-6 bg-green-50 border border-green-100">
<div class="flex items-center space-x-3 mb-2">
<i class="fas fa-flag text-brand-green text-xl"></i>
<h4 class="text-lg font-bold text-gray-900" data-i18n="cul_mission_t">企业使命</h4>
</div>
<p class="text-gray-600" data-i18n="cul_mission_d">为顾客提供卓越的跨境物流服务,助力中国产品速达全球。</p>
</div>
<div class="rounded-2xl p-6 bg-cyan-50 border border-cyan-100">
<div class="flex items-center space-x-3 mb-2">
<i class="fas fa-heart text-brand-teal text-xl"></i>
<h4 class="text-lg font-bold text-gray-900" data-i18n="cul_values_t">核心价值观</h4>
</div>
<p class="text-gray-600" data-i18n="cul_values_d">诚信 · 务实 · 谦卑 · 感恩</p>
</div>
</div>
</div>
<!-- 口号横幅 -->
<div class="mt-10 rounded-3xl gradient-bg p-10 text-center relative overflow-hidden reveal">
<div class="overlay-dots absolute inset-0"></div>
<div class="relative z-10">
<p class="text-sm font-semibold tracking-widest uppercase text-white/70 mb-3" data-i18n="cul_slogan_t">我们的口号</p>
<p class="text-2xl lg:text-3xl font-bold text-white" data-i18n="cul_slogan_d">客户价值 · 服务至上 · 精益求精 · 追求卓越 · 共创共赢</p>
</div>
</div>
</div>
</section>
<!-- 联系我们 -->
<section id="contact" class="py-24 gradient-bg-soft relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full opacity-30">
<div class="absolute top-16 left-10 w-72 h-72 bg-brand-blue/10 rounded-full blur-3xl"></div>
<div class="absolute bottom-16 right-10 w-80 h-80 bg-brand-green/10 rounded-full blur-3xl"></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center max-w-3xl mx-auto mb-16 reveal">
<span class="text-brand-blue font-semibold tracking-wider uppercase text-sm" data-i18n="cont_eyebrow">Contact Us</span>
<h2 class="text-4xl lg:text-5xl font-bold text-gray-900 mt-3 mb-6" data-i18n="cont_title">联系我们</h2>
<p class="text-lg text-gray-600" data-i18n="cont_subtitle">随时欢迎咨询,我们的专业团队将为您提供跨境物流解决方案与报价。</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="bg-white rounded-2xl p-8 shadow-card border border-gray-100 text-center reveal">
<div class="w-14 h-14 rounded-full bg-blue-50 flex items-center justify-center text-brand-blue text-2xl mx-auto mb-5">
<i class="fas fa-map-marker-alt"></i>
</div>
<h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="cont_addr_t">公司地址</h4>
<p class="text-gray-600 text-sm leading-relaxed" data-i18n="cont_addr_d">浙江省义乌市福田街道稠州北路 1399 号 8613-8615 室</p>
</div>
<div class="bg-white rounded-2xl p-8 shadow-card border border-gray-100 text-center reveal" style="transition-delay: 0.05s;">
<div class="w-14 h-14 rounded-full bg-green-50 flex items-center justify-center text-brand-green text-2xl mx-auto mb-5">
<i class="fas fa-phone-alt"></i>
</div>
<h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="cont_phone_t">联系电话</h4>
<p class="text-gray-600 text-sm leading-relaxed">0579-85875557</p>
</div>
<div class="bg-white rounded-2xl p-8 shadow-card border border-gray-100 text-center reveal" style="transition-delay: 0.1s;">
<div class="w-14 h-14 rounded-full bg-cyan-50 flex items-center justify-center text-brand-teal text-2xl mx-auto mb-5">
<i class="fas fa-envelope"></i>
</div>
<h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="cont_email_t">电子邮箱</h4>
<p class="text-gray-600 text-sm leading-relaxed break-all">contact@baiyuelogistics.com</p>
</div>
<div class="bg-white rounded-2xl p-8 shadow-card border border-gray-100 text-center reveal" style="transition-delay: 0.15s;">
<div class="w-14 h-14 rounded-full bg-indigo-50 flex items-center justify-center text-indigo-600 text-2xl mx-auto mb-5">
<i class="fas fa-clock"></i>
</div>
<h4 class="text-lg font-bold text-gray-900 mb-2" data-i18n="cont_hours_t">工作时间</h4>
<p class="text-gray-600 text-sm leading-relaxed" data-i18n="cont_hours_d">周一至周五 9:00-18:00<br>周六 9:00-12:00</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 gradient-bg relative overflow-hidden">
<div class="overlay-dots absolute inset-0"></div>
<div class="absolute top-0 right-0 w-96 h-96 bg-white/10 rounded-full blur-3xl"></div>
<div class="absolute bottom-0 left-0 w-80 h-80 bg-brand-green/20 rounded-full blur-3xl"></div>
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10 reveal">
<h2 class="text-4xl lg:text-5xl font-bold text-white mb-6" data-i18n="cta_title">开启您的出海之旅</h2>
<p class="text-xl text-white/80 mb-10" data-i18n="cta_desc">立即注册,获取专属物流方案与报价,让虫虫出海成为您的跨境物流伙伴。</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button id="ctaPrimary" onclick="window.location.href='register.html'" class="btn-accent text-white font-bold px-10 py-4 rounded-full text-lg" data-i18n="cta_btn1">
免费注册账号
</button>
<button onclick="showToast(t('toast_contact'))" class="bg-white/10 backdrop-blur-sm border-2 border-white/30 text-white hover:bg-white/20 font-bold px-10 py-4 rounded-full text-lg transition-all" data-i18n="cta_btn2">
联系销售顾问
</button>
</div>
</div>
</section>
</section>
<!-- Footer -->
<footer id="siteFooter" class="bg-brand-dark text-white pt-20 pb-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-10 mb-16">
<div>
<div class="flex items-center mb-6">
<img src="assets/logo.png" alt="虫虫出海" style="width:161px;height:60px;object-fit:contain;">
</div>
<p class="text-white/70 leading-relaxed mb-6" data-i18n="footer_desc">专注中美跨境物流,提供海外采购、海运专线、美本土卡车、一件代发等一站式供应链服务。</p>
<div class="flex space-x-4">
<a href="#" onclick="showToast('微信公众号即将上线')" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-brand-green transition-colors">
<i class="fab fa-weixin"></i>
</a>
<a href="#" onclick="showToast('官方抖音即将上线')" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-brand-green transition-colors">
<i class="fab fa-tiktok"></i>
</a>
<a href="#" onclick="showToast('LinkedIn 即将上线')" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-brand-green transition-colors">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-bold mb-6" data-i18n="footer_services_title">服务项目</h4>
<ul class="space-y-3 text-white/70">
<li><a href="#services" onclick="navigateTo('home', 'services')" class="hover:text-brand-green transition-colors" data-i18n="svc1_title">海外采购</a></li>
<li><a href="#services" onclick="navigateTo('home', 'services')" class="hover:text-brand-green transition-colors" data-i18n="svc2_title">美本土卡车</a></li>
<li><a href="#services" onclick="navigateTo('home', 'services')" class="hover:text-brand-green transition-colors" data-i18n="svc3_title">美本土散板</a></li>
<li><a href="#business" onclick="navigateTo('home', 'business')" class="hover:text-brand-green transition-colors" data-i18n="biz1_title">海运专线</a></li>
<li><a href="#business" onclick="navigateTo('home', 'business')" class="hover:text-brand-green transition-colors" data-i18n="biz2_title">一件代发</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-6" data-i18n="footer_about_title">关于我们</h4>
<ul class="space-y-3 text-white/70">
<li><a href="#about" onclick="navigateTo('home', 'about')" class="hover:text-brand-green transition-colors" data-i18n="footer_link_company">公司介绍</a></li>
<li><a href="#" onclick="showToast(t('toast_news'))" class="hover:text-brand-green transition-colors" data-i18n="footer_link_news">新闻中心</a></li>
<li><a href="#" onclick="showToast(t('toast_partners'))" class="hover:text-brand-green transition-colors" data-i18n="footer_link_partners">合作伙伴</a></li>
<li><a href="#" onclick="showToast(t('toast_join'))" class="hover:text-brand-green transition-colors" data-i18n="footer_link_join">加入我们</a></li>
<li><a href="#" onclick="showToast(t('toast_contact'))" class="hover:text-brand-green transition-colors" data-i18n="footer_link_contact">联系我们</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-6" data-i18n="footer_contact_title">联系方式</h4>
<ul class="space-y-4 text-white/70">
<li class="flex items-start space-x-3">
<i class="fas fa-map-marker-alt mt-1 text-brand-green"></i>
<span>中国 · 深圳 · 义乌<br>美国 · 洛杉矶 / 纽约</span>
</li>
<li class="flex items-center space-x-3">
<i class="fas fa-phone-alt text-brand-green"></i>
<span>0579-85875557</span>
</li>
<li class="flex items-center space-x-3">
<i class="fas fa-envelope text-brand-green"></i>
<span>contact@baiyuelogistics.com</span>
</li>
<li class="flex items-start space-x-3">
<i class="fas fa-clock mt-1 text-brand-green"></i>
<span data-i18n="footer_hours">周一至周五 9:00-18:00<br>周六 9:00-12:00</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-white/50">
<p data-i18n="footer_copyright">© 2026 虫虫出海 CHONGCHONG GLOBAL. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" onclick="showToast(t('toast_tos'))" class="hover:text-white transition-colors" data-i18n="footer_tos">服务协议</a>
<a href="#" onclick="showToast(t('toast_pp'))" class="hover:text-white transition-colors" data-i18n="footer_pp">隐私政策</a>
<a href="#" onclick="showToast(t('toast_sitemap'))" class="hover:text-white transition-colors" data-i18n="footer_sitemap">网站地图</a>
</div>
</div>
</div>
</footer>
<!-- Toast 提示 -->
<div id="toast" class="fixed top-24 left-1/2 -translate-x-1/2 z-[60] opacity-0 pointer-events-none transition-all duration-300 transform -translate-y-4">
<div class="bg-gray-900 text-white px-6 py-3 rounded-full shadow-2xl flex items-center space-x-2">
<i class="fas fa-info-circle text-brand-green"></i>
<span id="toastMessage">提示信息</span>
</div>
</div>
<script>
// 登录态(前端演示,刷新后重置)
let isLoggedIn = false;
// 路由导航
function navigateTo(page, sectionId = null) {
// 隐藏所有页面
document.querySelectorAll('.route-section').forEach(section => {
section.classList.remove('active');
});
// 显示目标页面
const targetMap = {
'home': 'homeSection',
};
const targetId = targetMap[page];
if (targetId) {
document.getElementById(targetId).classList.add('active');
}
// 滚动到顶部
window.scrollTo(0, 0);
// 如果指定了 section,滚动到对应位置
if (page === 'home' && sectionId) {
setTimeout(() => {
const element = document.getElementById(sectionId);
if (element) {
const navHeight = 80;
const elementPosition = element.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - navHeight;
window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
}
}, 100);
}
// 更新导航栏样式
updateNavbarStyle(page === 'home');
}
// 导航栏滚动效果
function updateNavbarStyle(isHome = true) {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50 || !isHome) {
navbar.classList.add('nav-scrolled');
} else {
navbar.classList.remove('nav-scrolled');
}
}
window.addEventListener('scroll', () => {
const homeActive = document.getElementById('homeSection').classList.contains('active');
updateNavbarStyle(homeActive);
});
// 移动端菜单
const mobileMenu = document.getElementById('mobileMenu');
const mobileOverlay = document.getElementById('mobileOverlay');
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const closeMobileMenuBtn = document.getElementById('closeMobileMenu');
function openMobileMenu() {
mobileMenu.classList.add('open');
mobileOverlay.classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
function closeMobileMenu() {
mobileMenu.classList.remove('open');
mobileOverlay.classList.add('hidden');
document.body.style.overflow = '';
}
mobileMenuBtn.addEventListener('click', openMobileMenu);
closeMobileMenuBtn.addEventListener('click', closeMobileMenu);
mobileOverlay.addEventListener('click', closeMobileMenu);
// 滚动显示动画
function reveal() {
const reveals = document.querySelectorAll('.reveal');
reveals.forEach(element => {
const windowHeight = window.innerHeight;
const elementTop = element.getBoundingClientRect().top;
const elementVisible = 100;
if (elementTop < windowHeight - elementVisible) {
element.classList.add('active');
}
});
}
window.addEventListener('scroll', reveal);
window.addEventListener('load', reveal);
// 密码显示切换
document.querySelectorAll('.toggle-password').forEach(button => {
button.addEventListener('click', function() {
const input = this.previousElementSibling;
const icon = this.querySelector('i');
if (input.type === 'password') {
input.type = 'text';
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
} else {
input.type = 'password';
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
}
});
});
// 退出登录
function doLogout() {
isLoggedIn = false;
updateAuthUI();
showToast(t('toast_logout'));
setTimeout(() => navigateTo('home'), 700);
}
// ====== 多语言 i18n ======
const i18n = {
zh: {
nav_home: "首页",
nav_services: "服务",
nav_process: "流程",
nav_business: "业务",
nav_about: "关于",
nav_login: "登录",
nav_register: "免费注册",
nav_dashboard: "工作台",
dash_logout: "退出登录",
lang_zh: "中文",
lang_en: "English",
lang_es: "Español",
hero_badge: "跨境物流一站式解决方案",
hero_title1: "让世界贸易",
hero_title2: "更简单高效",
hero_desc: "虫虫出海专注中美跨境物流,提供海外采购、美本土卡车、美本土散板、海运专线、一件代发等全链路服务,助力中国品牌出海无忧。",
hero_cta1: "立即体验",
hero_cta2: "了解服务",
stat_cities: "覆盖城市",
stat_ontime: "准时率",
stat_customs: "清关响应",
stat_clients: "服务客户",
svc_eyebrow: "Core Services",
svc_title: "专业服务,覆盖跨境全链路",
svc_subtitle: "依托美国本土优势资源与全球化网络,为企业提供稳定、高效、可追踪的跨境物流服务。",
svc1_title: "海外采购",
svc1_desc: "提供海外供应商对接、采购执行、验货质检、集中采购等一体化服务,降低采购成本,提升供应链效率。",
svc1_li1: "供应商筛选与资质审核",
svc1_li2: "样品确认与批量采购",
svc1_li3: "质量检验与合规把关",
svc1_li4: "集货仓储与统一发货",
svc2_title: "美本土卡车",
svc2_desc: "覆盖美国全境的卡车运输网络,提供 FTL 整车、LTL 零担、超大件派送等灵活解决方案。",
svc2_li1: "全美 FTL/LTL 运输",
svc2_li2: "超大件及特种车辆",
svc2_li3: "实时 GPS 轨迹追踪",
svc2_li4: "预约送货与签收确认",
svc3_title: "美本土散板",
svc3_desc: "针对托盘货物提供美国本土拆板、分拣、再派服务,适配电商退货、B2B 补货、多渠道配送场景。",
svc3_li1: "托盘拆板与重新组板",
svc3_li2: "多地址分拣派送",
svc3_li3: "退货逆向物流",
svc3_li4: "仓储与库存管理",
proc_eyebrow: "Service Process",
proc_title: "标准化服务流程",
proc_subtitle: "从上门取件到签收入库,每个环节都严格把控,确保货物安全、准时送达。",
proc1_title: "上门取件",
proc1_desc: "专业团队按约定时间上门提货,核对货物信息,提供标准化包装建议。",
proc2_title: "入仓清关",
proc2_desc: "货物入仓后由专业报关团队处理清关资料,提前预审,确保快速通关。",
proc3_title: "国际运输",
proc3_desc: "海运专线稳定发运,全程轨迹可追踪,异常情况主动预警及时响应。",
proc4_title: "签收入库",
proc4_desc: "目的地仓库签收核验,系统同步入库状态,支持一键转代发或派送。",
biz_eyebrow: "Business Lines",
biz_title: "核心业务的深度布局",
biz_subtitle: "海运专线与一件代发双轮驱动,满足不同规模企业的出海需求。",
biz1_title: "海运专线",
biz1_desc: "中美海运专线,提供整柜(FCL)、拼箱(LCL)、美森快船、盐田普船等多元化海运产品,舱位稳定,价格透明。",
biz1_li1: "每周固定船期,舱位保障",
biz1_li2: "双清包税,门到门服务",
biz1_li3: "全程可视化追踪系统",
biz2_title: "一件代发",
biz2_desc: "美国本土仓储 + 订单履约,支持 Amazon、Walmart、独立站等多平台订单的一件代发,助力卖家降本增效。",
biz2_li1: "多平台 API 对接",
biz2_li2: "智能库存与订单管理",
biz2_li3: "24h 出库,快速妥投",
about_eyebrow: "Why Choose Us",
about_title: "为什么选择虫虫出海",
about_desc: "我们不只是物流服务商,更是企业出海的合作伙伴。凭借专业的团队、成熟的网络与数字化系统,为客户提供端到端的供应链保障。",
feat1_title: "全球化网络",
feat1_desc: "覆盖中美主要口岸与城市,自建与合作仓库遍布美国东西海岸。",
feat2_title: "数字化系统",
feat2_desc: "自研物流管理系统,订单、轨迹、库存、结算一站式在线管理。",
feat3_title: "专属客服",
feat3_desc: "中美两地客服团队,7×24 小时响应,异常情况第一时间处理。",
feat4_title: "合规保障",
feat4_desc: "专业清关团队,熟悉中美贸易法规,确保货物合规高效通关。",
about_stat_label: "平均物流成本降低",
cta_title: "开启您的出海之旅",
cta_desc: "立即注册,获取专属物流方案与报价,让虫虫出海成为您的跨境物流伙伴。",
cta_btn1: "免费注册账号",
cta_btn2: "联系销售顾问",
login_welcome: "欢迎回来",
login_desc: "登录虫虫出海平台,实时追踪货物轨迹,管理订单与库存。",
login_feat1: "全程可视化追踪",
login_feat2: "智能订单管理",
login_feat3: "在线询价下单",
login_title: "账号登录",
login_no_account: "还没有账号?",
login_register_link: "立即注册",
login_account_label: "邮箱 / 手机号",
login_account_ph: "请输入邮箱或手机号",
login_password_label: "密码",
login_password_ph: "请输入密码",
login_remember: "记住我",
login_forgot: "忘记密码?",
login_submit: "登 录",
login_other: "其他方式登录",
reg_welcome: "加入我们",
reg_welcome_desc: "注册虫虫出海企业账号,开启高效跨境物流体验。",
reg_feat1: "新用户专属优惠",
reg_feat2: "免费获取物流方案",
reg_feat3: "专属客户经理对接",
reg_title: "企业注册",
reg_have_account: "已有账号?",
reg_login_link: "立即登录",
reg_company_label: "企业名称",
reg_company_ph: "请输入企业名称",
reg_contact_label: "联系人",
reg_contact_ph: "请输入联系人姓名",
reg_email_label: "邮箱",
reg_email_ph: "请输入企业邮箱",
reg_phone_label: "手机号",
reg_phone_ph: "请输入手机号",
reg_password_label: "密码",
reg_password_ph: "请设置8-20位密码",
reg_agree: "我已阅读并同意",
reg_agree_tos: "《用户服务协议》",
reg_agree_pp: "《隐私政策》",
reg_submit: "立即注册",
footer_desc: "专注中美跨境物流,提供海外采购、海运专线、美本土卡车、一件代发等一站式供应链服务。",
footer_services_title: "服务项目",
footer_about_title: "关于我们",
footer_link_company: "公司介绍",
footer_link_news: "新闻中心",
footer_link_partners: "合作伙伴",
footer_link_join: "加入我们",
footer_link_contact: "联系我们",
footer_contact_title: "联系方式",
footer_hours: "周一至周五 9:00-18:00<br>周六 9:00-12:00",
nav_contact: "联系",
adv_eyebrow: "Our Advantages",
adv_title: "六大企业优势",
adv_subtitle: "深耕中美跨境物流多年,以专业能力与本土资源为客户构筑稳定可靠的供应链保障。",
adv1_title: "专业团队",
adv1_desc: "10 年以上跨境物流经验的核心团队,熟悉各国海关政策与操作流程。",
adv2_title: "自营海外仓",
adv2_desc: "美国自营海外仓,提供仓储、分拣、包装、退件处理等全方位服务。",
adv3_title: "双清包税",
adv3_desc: "专业报关清关服务,包税渠道,通关高效,让您省心省力。",
adv4_title: "全程可视化",
adv4_desc: "GPS 实时定位,订单全流程跟踪,随时掌握货物状态。",
adv5_title: "保险服务",
adv5_desc: "完善的货物保险服务,全方位保障货物安全,降低运输风险。",
adv6_title: "一站式服务",
adv6_desc: "从揽件到签收,提供完整的物流解决方案,无需对接多个服务商。",
cul_eyebrow: "Corporate Culture",
cul_title: "关于我们与企业文化",
cul_subtitle: "以心传递,畅达天下——用专业与责任连接中美贸易的每一段旅程。",
cul_profile_title: "公司简介",
cul_profile_desc1: "我们是一家专业从事中美海运专线、中美空运专线、海外仓储服务的跨境物流公司,深耕美国、加拿大市场,主营海运、空运、铁运等跨境专线业务。",
cul_profile_desc2: "建立了以美森快船、OA 联盟电商快船及中美空运为主导的 FBA 美国全程运输渠道。在美国拥有自营海外仓,加拿大有合作海外仓,配备专业报关清关团队、双清派送到门服务与完善的保险服务,为跨境电商客户提供多样化的一站式解决方案。",
cul_vision_t: "企业愿景",
cul_vision_d: "成为跨境物流行业值得信赖的优选服务平台。",
cul_mission_t: "企业使命",
cul_mission_d: "为顾客提供卓越的跨境物流服务,助力中国产品速达全球。",
cul_values_t: "核心价值观",
cul_values_d: "诚信 · 务实 · 谦卑 · 感恩",
cul_slogan_t: "我们的口号",
cul_slogan_d: "客户价值 · 服务至上 · 精益求精 · 追求卓越 · 共创共赢",
cont_eyebrow: "Contact Us",
cont_title: "联系我们",
cont_subtitle: "随时欢迎咨询,我们的专业团队将为您提供跨境物流解决方案与报价。",
cont_addr_t: "公司地址",
cont_addr_d: "浙江省义乌市福田街道稠州北路 1399 号 8613-8615 室",
cont_phone_t: "联系电话",
cont_email_t: "电子邮箱",
cont_hours_t: "工作时间",
cont_hours_d: "周一至周五 9:00-18:00<br>周六 9:00-12:00",
footer_copyright: "© 2026 虫虫出海 CHONGCHONG GLOBAL. 版权所有。",
footer_tos: "服务协议",
footer_pp: "隐私政策",
footer_sitemap: "网站地图",
toast_tos: "服务协议即将上线",
toast_pp: "隐私政策即将上线",
toast_news: "新闻中心即将上线",
toast_partners: "合作伙伴即将上线",
toast_join: "加入我们即将上线",
toast_contact: "客服咨询功能即将上线",
toast_resetpw: "请联系客服重置密码",
toast_sitemap: "网站地图即将上线",
toast_login_ok: "登录成功!欢迎回来",
toast_register_ok: "注册成功!欢迎加入虫虫出海",
toast_logout: "已退出登录"
},
en: {
nav_home: "Home",
nav_services: "Services",
nav_process: "Process",
nav_business: "Business",
nav_about: "About",
nav_login: "Login",
nav_register: "Sign Up Free",
nav_dashboard: "Workspace",
dash_logout: "Log Out",
lang_zh: "Chinese",
lang_en: "English",
lang_es: "Spanish",
hero_badge: "One-Stop Cross-Border Logistics",
hero_title1: "Make Global Trade",
hero_title2: "Simpler & More Efficient",
hero_desc: "Chongchong Global specializes in China-US cross-border logistics, offering overseas sourcing, US domestic trucking, US pallet break, ocean freight, and drop shipping — a full-chain service that helps Chinese brands go global with ease.",
hero_cta1: "Get Started",
hero_cta2: "Explore Services",
stat_cities: "Cities Covered",
stat_ontime: "On-Time Rate",
stat_customs: "Customs Response",
stat_clients: "Clients Served",
svc_eyebrow: "Core Services",
svc_title: "Professional Services Across the Full Cross-Border Chain",
svc_subtitle: "Leveraging US local resources and a global network to deliver stable, efficient, and traceable cross-border logistics.",
svc1_title: "Overseas Sourcing",
svc1_desc: "Supplier matchmaking, procurement execution, inspection, and consolidated sourcing — lowering costs and boosting supply chain efficiency.",
svc1_li1: "Supplier screening & qualification",
svc1_li2: "Sample confirmation & bulk buying",
svc1_li3: "Quality inspection & compliance",
svc1_li4: "Consolidation & unified shipping",
svc2_title: "US Domestic Trucking",
svc2_desc: "Nationwide trucking network offering FTL, LTL, and oversized delivery solutions.",
svc2_li1: "Nationwide FTL/LTL",
svc2_li2: "Oversized & specialized vehicles",
svc2_li3: "Real-time GPS tracking",
svc2_li4: "Scheduled delivery & POD",
svc3_title: "US Domestic Pallet Break",
svc3_desc: "US local de-palletizing, sorting, and re-delivery for e-commerce returns, B2B replenishment, and multi-channel fulfillment.",
svc3_li1: "Pallet break & rebuild",
svc3_li2: "Multi-address sorting",
svc3_li3: "Reverse logistics",
svc3_li4: "Warehousing & inventory",
proc_eyebrow: "Service Process",
proc_title: "Standardized Service Process",
proc_subtitle: "From pickup to warehouse receipt, every step is strictly controlled to ensure safe, on-time delivery.",
proc1_title: "Door-to-Door Pickup",
proc1_desc: "Our team picks up goods on time, verifies info, and advises on standard packaging.",
proc2_title: "Warehouse & Customs",
proc2_desc: "Professional brokers handle customs docs with pre-clearance for fast passage.",
proc3_title: "International Shipping",
proc3_desc: "Stable ocean lines with full tracking and proactive alerts.",
proc4_title: "Receipt & Storage",
proc4_desc: "Destination warehouse verifies receipt and syncs status, enabling one-click fulfillment.",
biz_eyebrow: "Business Lines",
biz_title: "Deep Layout of Core Businesses",
biz_subtitle: "Ocean freight lines and drop shipping drive growth for businesses of all sizes.",
biz1_title: "Ocean Freight Lines",
biz1_desc: "China-US ocean lines with FCL, LCL, fast and standard vessels — stable space and transparent pricing.",
biz1_li1: "Fixed weekly sailings, guaranteed space",
biz1_li2: "DDP, door-to-door",
biz1_li3: "Full visual tracking",
biz2_title: "Drop Shipping",
biz2_desc: "US warehousing + fulfillment for Amazon, Walmart, and DTC orders, cutting costs and boosting efficiency.",
biz2_li1: "Multi-platform API",
biz2_li2: "Smart inventory & orders",
biz2_li3: "24h dispatch, fast delivery",
about_eyebrow: "Why Choose Us",
about_title: "Why Choose Chongchong Global",
about_desc: "We are not just a logistics provider, but a partner for going global, delivering end-to-end supply chain assurance.",
feat1_title: "Global Network",
feat1_desc: "Covering major ports and cities in China and the US, with warehouses on both coasts.",
feat2_title: "Digital System",
feat2_desc: "In-house TMS for one-stop online management of orders, tracking, inventory, and billing.",
feat3_title: "Dedicated Support",
feat3_desc: "Bilingual support teams in China and the US, responding 7×24 and handling issues promptly.",
feat4_title: "Compliance Assurance",
feat4_desc: "Expert brokers familiar with China-US trade laws ensure compliant, efficient clearance.",
about_stat_label: "Avg. Logistics Cost Cut",
cta_title: "Start Your Global Journey",
cta_desc: "Sign up now for a tailored plan and quote, and make Chongchong Global your logistics partner.",
cta_btn1: "Create Free Account",
cta_btn2: "Contact Sales",
login_welcome: "Welcome Back",
login_desc: "Log in to track shipments in real time and manage orders and inventory.",
login_feat1: "Full Visual Tracking",
login_feat2: "Smart Order Management",
login_feat3: "Online Quoting & Ordering",
login_title: "Account Login",
login_no_account: "No account yet?",
login_register_link: "Sign Up Now",
login_account_label: "Email / Phone",
login_account_ph: "Enter email or phone",
login_password_label: "Password",
login_password_ph: "Enter password",
login_remember: "Remember Me",
login_forgot: "Forgot Password?",
login_submit: "Log In",
login_other: "Other Sign-In Methods",
reg_welcome: "Join Us",
reg_welcome_desc: "Register a Chongchong Global business account and start efficient cross-border logistics.",
reg_feat1: "Exclusive New-User Offers",
reg_feat2: "Free Logistics Plan",
reg_feat3: "Dedicated Account Manager",
reg_title: "Business Registration",
reg_have_account: "Already have an account?",
reg_login_link: "Log In Now",
reg_company_label: "Company Name",
reg_company_ph: "Enter company name",
reg_contact_label: "Contact Person",
reg_contact_ph: "Enter contact name",
reg_email_label: "Email",
reg_email_ph: "Enter company email",
reg_phone_label: "Phone Number",
reg_phone_ph: "Enter phone number",
reg_password_label: "Password",
reg_password_ph: "Set an 8-20 char password",
reg_agree: "I have read and agree to the",
reg_agree_tos: "User Agreement",
reg_agree_pp: "Privacy Policy",
reg_submit: "Sign Up Now",
footer_desc: "Focused on China-US cross-border logistics, offering sourcing, ocean freight, US trucking, and drop shipping.",
footer_services_title: "Services",
footer_about_title: "About Us",
footer_link_company: "Company Profile",
footer_link_news: "News Center",
footer_link_partners: "Partners",
footer_link_join: "Join Us",
footer_link_contact: "Contact Us",
footer_contact_title: "Contact Info",
footer_hours: "Mon-Fri 9:00-18:00<br>Sat 9:00-12:00",
nav_contact: "Contact",
adv_eyebrow: "Our Advantages",
adv_title: "Six Core Advantages",
adv_subtitle: "With years of expertise in China-US cross-border logistics, we build a stable and reliable supply chain with professional capabilities and local resources.",
adv1_title: "Professional Team",
adv1_desc: "A core team with 10+ years of cross-border logistics experience, well-versed in customs policies and operations of various countries.",
adv2_title: "Own Overseas Warehouse",
adv2_desc: "Self-operated warehouses in the US offering storage, sorting, packing and return processing.",
adv3_title: "Duty-Paid Customs",
adv3_desc: "Professional customs clearance with duty-paid channels for efficient, worry-free delivery.",
adv4_title: "Full Visibility",
adv4_desc: "Real-time GPS tracking and full order visibility, keeping you informed at every step.",
adv5_title: "Insurance Service",
adv5_desc: "Comprehensive cargo insurance for all-round protection and reduced transport risk.",
adv6_title: "One-Stop Service",
adv6_desc: "From pickup to delivery, a complete logistics solution without juggling multiple providers.",
cul_eyebrow: "Corporate Culture",
cul_title: "About Us & Our Culture",
cul_subtitle: "Delivering with heart, reaching the world — connecting every step of China-US trade with expertise and responsibility.",
cul_profile_title: "Company Profile",
cul_profile_desc1: "We are a cross-border logistics company specializing in China-US sea freight, China-US air freight and overseas warehousing, deeply rooted in the US and Canadian markets with sea, air and rail line-haul services.",
cul_profile_desc2: "We have established FBA full-route channels to the US led by Matson express, OA alliance e-commerce express and China-US air freight. With self-operated warehouses in the US and partner warehouses in Canada, a professional customs team, door-to-door duty-paid delivery and full insurance, we offer diverse one-stop solutions for cross-border e-commerce clients.",
cul_vision_t: "Vision",
cul_vision_d: "To become a trusted, preferred service platform in the cross-border logistics industry.",
cul_mission_t: "Mission",
cul_mission_d: "To provide outstanding cross-border logistics and help Chinese products reach the world fast.",
cul_values_t: "Core Values",
cul_values_d: "Integrity · Pragmatism · Humility · Gratitude",
cul_slogan_t: "Our Slogan",
cul_slogan_d: "Customer Value · Service First · Excellence · Pursuit of Perfection · Win-Win Together",
cont_eyebrow: "Contact Us",
cont_title: "Contact Us",
cont_subtitle: "You are always welcome to reach out — our team will provide cross-border logistics solutions and quotes.",
cont_addr_t: "Address",
cont_addr_d: "Room 8613-8615, No.1399 Chouzhou North Rd, Futian St., Yiwu, Zhejiang, China",
cont_phone_t: "Phone",
cont_email_t: "Email",
cont_hours_t: "Business Hours",
cont_hours_d: "Mon-Fri 9:00-18:00<br>Sat 9:00-12:00",
footer_copyright: "© 2026 Chongchong Global. All rights reserved.",
footer_tos: "Terms of Service",
footer_pp: "Privacy Policy",
footer_sitemap: "Sitemap",
toast_tos: "Terms of Service coming soon",
toast_pp: "Privacy Policy coming soon",
toast_news: "News Center coming soon",
toast_partners: "Partners coming soon",
toast_join: "Join Us coming soon",
toast_contact: "Sales consultation coming soon",
toast_resetpw: "Please contact support to reset your password",
toast_sitemap: "Sitemap coming soon",
toast_login_ok: "Login successful! Welcome back",
toast_register_ok: "Registration successful! Welcome to Chongchong Global",
toast_logout: "Logged out"
},
es: {
nav_home: "Inicio",
nav_services: "Servicios",
nav_process: "Proceso",
nav_business: "Negocio",
nav_about: "Acerca de",
nav_login: "Iniciar sesión",
nav_register: "Regístrate Gratis",
nav_dashboard: "Panel",
dash_logout: "Cerrar sesión",
lang_zh: "Chino",
lang_en: "Inglés",
lang_es: "Español",
hero_badge: "Solución integral de logística transfronteriza",
hero_title1: "Haz del comercio mundial",
hero_title2: "Más simple y eficiente",
hero_desc: "Chongchong Global se especializa en logística transfronteriza China-EE.UU., ofreciendo abastecimiento en el extranjero, transporte por camión en EE.UU., despaletizado en EE.UU., líneas marítimas y envío directo, un servicio de cadena completa que ayuda a las marcas chinas a salir al mundo sin problemas.",
hero_cta1: "Comenzar",
hero_cta2: "Conoce nuestros servicios",
stat_cities: "Ciudades cubiertas",
stat_ontime: "Tasa de puntualidad",
stat_customs: "Respuesta aduanera",
stat_clients: "Clientes atendidos",
svc_eyebrow: "Servicios principales",
svc_title: "Servicios profesionales en toda la cadena transfronteriza",
svc_subtitle: "Con recursos locales en EE.UU. y una red global, ofrecemos logística transfronteriza estable, eficiente y rastreable.",
svc1_title: "Abastecimiento en el extranjero",
svc1_desc: "Conectamos proveedores, ejecutamos compras, inspeccionamos y consolidamos, reduciendo costos y mejorando la eficiencia.",
svc1_li1: "Selección y verificación de proveedores",
svc1_li2: "Confirmación de muestras y compras al por mayor",
svc1_li3: "Inspección de calidad y cumplimiento",
svc1_li4: "Consolidación y envío unificado",
svc2_title: "Transporte por camión en EE.UU.",
svc2_desc: "Red de transporte por camión en todo EE.UU. con soluciones FTL, LTL y cargas sobredimensionadas.",
svc2_li1: "FTL/LTL a nivel nacional",
svc2_li2: "Cargas sobredimensionadas y vehículos especiales",
svc2_li3: "Seguimiento GPS en tiempo real",
svc2_li4: "Entrega programada y confirmación",
svc3_title: "Despaletizado en EE.UU.",
svc3_desc: "Despaletizado, clasificación y reenvío en EE.UU. para devoluciones, reabastecimiento B2B y cumplimiento multicanal.",
svc3_li1: "Despaletizado y reagrupación",
svc3_li2: "Clasificación a múltiples direcciones",
svc3_li3: "Logística inversa",
svc3_li4: "Almacenamiento e inventario",
proc_eyebrow: "Proceso de servicio",
proc_title: "Proceso de servicio estandarizado",
proc_subtitle: "Desde la recogida hasta el ingreso al almacén, cada paso se controla para garantizar entregas seguras y puntuales.",
proc1_title: "Recogida a domicilio",
proc1_desc: "Nuestro equipo recoge la mercancía puntualmente, verifica la información y asesora sobre el embalaje.",
proc2_title: "Almacén y aduana",
proc2_desc: "Agentes aduanales gestionan los documentos con preaprobación para un paso rápido.",
proc3_title: "Transporte internacional",
proc3_desc: "Líneas marítimas estables con rastreo completo y alertas proactivas.",
proc4_title: "Recepción y almacenamiento",
proc4_desc: "El almacén de destino verifica la recepción y sincroniza el estado para un cumplimiento con un clic.",
biz_eyebrow: "Líneas de negocio",
biz_title: "Despliegue profundo de negocios clave",
biz_subtitle: "Las líneas marítimas y el envío directo impulsan el crecimiento de todo tipo de empresas.",
biz1_title: "Líneas marítimas",
biz1_desc: "Líneas marítimas China-EE.UU. con FCL, LCL y buques rápidos y estándar, con espacio estable y precios transparentes.",
biz1_li1: "Salidas semanales fijas, espacio garantizado",
biz1_li2: "DDP, puerta a puerta",
biz1_li3: "Seguimiento visual completo",
biz2_title: "Envío directo",
biz2_desc: "Almacenamiento y cumplimiento en EE.UU. para Amazon, Walmart e independientes, reduciendo costos.",
biz2_li1: "API multiplataforma",
biz2_li2: "Inventario y pedidos inteligentes",
biz2_li3: "Despacho en 24h, entrega rápida",
about_eyebrow: "Por qué elegirnos",
about_title: "Por qué elegir Chongchong Global",
about_desc: "No somos solo un proveedor logístico, sino un socio para salir al mundo, con una cadena de suministro de extremo a extremo.",
feat1_title: "Red global",
feat1_desc: "Cubrimos puertos y ciudades clave en China y EE.UU., con almacenes en ambas costas.",
feat2_title: "Sistema digital",
feat2_desc: "Sistema propio de gestión de pedidos, rastreo, inventario y facturación en línea.",
feat3_title: "Soporte dedicado",
feat3_desc: "Equipos de soporte en China y EE.UU., disponibles 7×24 y atendiendo incidencias de inmediato.",
feat4_title: "Garantía de cumplimiento",
feat4_desc: "Agentes expertos en leyes comerciales China-EE.UU. aseguran un despacho cumplido y eficiente.",
about_stat_label: "Reducción de costos logísticos",
cta_title: "Inicia tu viaje global",
cta_desc: "Regístrate ahora para un plan y cotización a medida y haz de Chongchong Global tu socio logístico.",
cta_btn1: "Crear cuenta gratis",
cta_btn2: "Contactar ventas",
login_welcome: "Bienvenido de nuevo",
login_desc: "Inicia sesión para rastrear envíos en tiempo real y gestionar pedidos e inventario.",
login_feat1: "Seguimiento visual completo",
login_feat2: "Gestión inteligente de pedidos",
login_feat3: "Cotización y pedidos en línea",
login_title: "Inicio de sesión",
login_no_account: "¿Aún no tienes cuenta?",
login_register_link: "Regístrate ahora",
login_account_label: "Correo / Teléfono",
login_account_ph: "Ingresa correo o teléfono",
login_password_label: "Contraseña",
login_password_ph: "Ingresa tu contraseña",
login_remember: "Recuérdame",
login_forgot: "¿Olvidó su contraseña?",
login_submit: "Iniciar sesión",
login_other: "Otros métodos de acceso",
reg_welcome: "Únete a nosotros",
reg_welcome_desc: "Regístrate en la cuenta empresarial de Chongchong Global y comienza una logística eficiente.",
reg_feat1: "Ofertas exclusivas para nuevos usuarios",
reg_feat2: "Plan logístico gratuito",
reg_feat3: "Gerente de cuenta dedicado",
reg_title: "Registro empresarial",
reg_have_account: "¿Ya tienes una cuenta?",
reg_login_link: "Inicia sesión ahora",
reg_company_label: "Nombre de empresa",
reg_company_ph: "Ingresa el nombre de empresa",
reg_contact_label: "Persona de contacto",
reg_contact_ph: "Ingresa el nombre de contacto",
reg_email_label: "Correo electrónico",
reg_email_ph: "Ingresa el correo empresarial",
reg_phone_label: "Número de teléfono",
reg_phone_ph: "Ingresa tu número de teléfono",
reg_password_label: "Contraseña",
reg_password_ph: "Define una contraseña de 8-20 caracteres",
reg_agree: "He leído y acepto los",
reg_agree_tos: "Términos de servicio",
reg_agree_pp: "Política de privacidad",
reg_submit: "Regístrate ahora",
footer_desc: "Especializados en logística China-EE.UU.: abastecimiento, marítimo, camiones y envío directo.",
footer_services_title: "Servicios",
footer_about_title: "Sobre nosotros",
footer_link_company: "Perfil de empresa",
footer_link_news: "Centro de noticias",
footer_link_partners: "Socios",
footer_link_join: "Únete a nosotros",
footer_link_contact: "Contáctanos",
footer_contact_title: "Información de contacto",
footer_hours: "Lun-Vie 9:00-18:00<br>Sáb 9:00-12:00",
nav_contact: "Contacto",
adv_eyebrow: "Our Advantages",
adv_title: "Seis Ventajas Clave",
adv_subtitle: "Con años de experiencia en logística transfronteriza China-EE.UU., construimos una cadena de suministro estable y confiable con capacidad profesional y recursos locales.",
adv1_title: "Equipo Profesional",
adv1_desc: "Un equipo central con más de 10 años de experiencia, conocedor de las políticas aduaneras y operaciones de varios países.",
adv2_title: "Almacén Propio",
adv2_desc: "Almacenes propios en EE.UU. con almacenamiento, clasificación, embalaje y gestión de devoluciones.",
adv3_title: "Despacho con Impuestos",
adv3_desc: "Despacho aduanero profesional con canales de impuestos incluidos, eficiente y sin preocupaciones.",
adv4_title: "Visibilidad Total",
adv4_desc: "Localización GPS en tiempo real y seguimiento completo del pedido en cada paso.",
adv5_title: "Servicio de Seguro",
adv5_desc: "Seguro de carga integral para una protección total y menor riesgo de transporte.",
adv6_title: "Servicio Integral",
adv6_desc: "Desde la recogida hasta la entrega, una solución logística completa con un solo proveedor.",
cul_eyebrow: "Corporate Culture",
cul_title: "Sobre Nosotros y Cultura",
cul_subtitle: "Entregar con el corazón, llegar al mundo: conectando cada etapa del comercio China-EE.UU. con profesionalismo y responsabilidad.",
cul_profile_title: "Perfil de Empresa",
cul_profile_desc1: "Somos una empresa de logística transfronteriza especializada en flete marítimo y aéreo China-EE.UU. y almacenamiento en el extranjero, con fuerte presencia en los mercados de EE.UU. y Canadá.",
cul_profile_desc2: "Hemos establecido canales de ruta completa FBA a EE.UU. liderados por Matson express, express de comercio electrónico de la alianza OA y flete aéreo China-EE.UU. Con almacenes propios en EE.UU. y aliados en Canadá, equipo aduanero profesional, entrega puerta a puerta con impuestos pagados y seguro completo, ofrecemos soluciones integrales para clientes de comercio electrónico.",
cul_vision_t: "Visión",
cul_vision_d: "Convertirnos en una plataforma de servicio confiable y preferida en la logística transfronteriza.",
cul_mission_t: "Misión",
cul_mission_d: "Brindar una logística transfronteriza excepcional y ayudar a que los productos chinos lleguen rápido al mundo.",
cul_values_t: "Valores Fundamentales",
cul_values_d: "Integridad · Pragmatismo · Humildad · Gratitud",
cul_slogan_t: "Nuestro Lema",
cul_slogan_d: "Valor al Cliente · Servicio Primero · Excelencia · Búsqueda de la Perfección · Ganar-Ganar",
cont_eyebrow: "Contact Us",
cont_title: "Contáctanos",
cont_subtitle: "Siempre eres bienvenido a contactarnos: nuestro equipo te ofrecerá soluciones logísticas y cotizaciones.",
cont_addr_t: "Dirección",
cont_addr_d: "Sala 8613-8615, No.1399 Chouzhou North Rd, Calle Futian, Yiwu, Zhejiang, China",
cont_phone_t: "Teléfono",
cont_email_t: "Correo",
cont_hours_t: "Horario",
cont_hours_d: "Lun-Vie 9:00-18:00<br>Sáb 9:00-12:00",
footer_copyright: "© 2026 Chongchong Global. Todos los derechos reservados.",
footer_tos: "Términos de servicio",
footer_pp: "Política de privacidad",
footer_sitemap: "Mapa del sitio",
toast_tos: "Términos de servicio próximamente",
toast_pp: "Política de privacidad próximamente",
toast_news: "Centro de noticias próximamente",
toast_partners: "Socios próximamente",
toast_join: "Únete a nosotros próximamente",
toast_contact: "Consulta de ventas próximamente",
toast_resetpw: "Contacta a soporte para restablecer tu contraseña",
toast_sitemap: "Mapa del sitio próximamente",
toast_login_ok: "¡Inicio de sesión exitoso! Bienvenido",
toast_register_ok: "¡Registro exitoso! Bienvenido a Chongchong Global",
toast_logout: "Sesión cerrada"
}
};
let currentLang = localStorage.getItem('cc_lang') || 'zh';
function t(key) {
return (i18n[currentLang] && i18n[currentLang][key] !== undefined) ? i18n[currentLang][key] : key;
}
function applyLanguage(lang) {
if (!i18n[lang]) lang = 'zh';
currentLang = lang;
const langAttr = lang === 'zh' ? 'zh-CN' : (lang === 'es' ? 'es-MX' : 'en');
document.documentElement.setAttribute('lang', langAttr);
document.querySelectorAll('[data-i18n]').forEach(el => {
const k = el.getAttribute('data-i18n');
const v = i18n[lang][k];
if (v !== undefined) { if (v.indexOf('<br>') !== -1) el.innerHTML = v; else el.textContent = v; }
});
document.querySelectorAll('[data-i18n-ph]').forEach(el => {
const k = el.getAttribute('data-i18n-ph');
if (i18n[lang][k] !== undefined) el.setAttribute('placeholder', i18n[lang][k]);
});
document.querySelectorAll('[data-lang]').forEach(b => {
b.classList.toggle('active', b.getAttribute('data-lang') === lang);
});
try { localStorage.setItem('cc_lang', lang); } catch (e) {}
updateAuthUI();
}
document.querySelectorAll('#langSwitcher [data-lang], #langSwitcherMobile [data-lang]').forEach(b => {
b.addEventListener('click', () => applyLanguage(b.getAttribute('data-lang')));
});
// Toast 提示
function showToast(message) {
const toast = document.getElementById('toast');
const toastMessage = document.getElementById('toastMessage');
toastMessage.textContent = message;
toast.classList.remove('opacity-0', 'pointer-events-none', '-translate-y-4');
toast.classList.add('opacity-100', 'translate-y-0');
setTimeout(() => {
toast.classList.add('opacity-0', 'pointer-events-none', '-translate-y-4');
toast.classList.remove('opacity-100', 'translate-y-0');
}, 3000);
}
// 初始化
document.addEventListener('DOMContentLoaded', function() {
applyLanguage(currentLang);
updateAuthUI();
reveal();
updateNavbarStyle(true);
});
// 立即应用(脚本位于 body 末尾,DOM 已就绪)
applyLanguage(currentLang);
</script>
</body>
</html>