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

1759 lines
110 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>