|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN" >
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Global Tech Company | Tailwind Edition</title>
|
|
|
|
|
|
|
|
|
<!-- 项目原有: Google Fonts & Material Icons -->
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700;900&family=Montserrat:wght@400;500;700;800;900&family=Inter:wght@400;500;700;800;900&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet"/>
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" />
|
|
|
<!-- AOS Animation Library -->
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
|
|
|
<!-- Tailwind & Config -->
|
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
|
<script id="tailwind-config">
|
|
|
tailwind.config = {
|
|
|
darkMode: "class",
|
|
|
theme: {
|
|
|
extend: {
|
|
|
colors: {
|
|
|
"primary": "#13eca4",
|
|
|
"background-light": "#f8fcfa",
|
|
|
"background-dark": "#10221c",
|
|
|
"pearlescent": "#f0f7f5",
|
|
|
"silver-accent": "#e2e8f0",
|
|
|
"about-us": "#ff6b00"
|
|
|
},
|
|
|
fontFamily: {
|
|
|
"display": ["Montserrat", "sans-serif"],
|
|
|
"sans": ["Montserrat", "sans-serif"],
|
|
|
"mono": ["JetBrains Mono", "Montserrat"],
|
|
|
"inter": ["Inter", "Montserrat"],
|
|
|
},
|
|
|
borderRadius: {
|
|
|
"DEFAULT": "0.5rem",
|
|
|
"lg": "1rem",
|
|
|
"xl": "1.5rem",
|
|
|
"2xl": "2rem",
|
|
|
"3xl": "3rem",
|
|
|
"full": "9999px"
|
|
|
},
|
|
|
backgroundImage: {
|
|
|
'liquid-gradient': 'linear-gradient(135deg, #f8fcfa 0%, #e8f5f1 50%, #dcfce7 100%)',
|
|
|
'glass-gradient': 'linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%)',
|
|
|
'aurora': 'linear-gradient(135deg, rgba(19,236,164,0.1) 0%, rgba(13,166,112,0.05) 50%, rgba(248,252,250,0) 100%)',
|
|
|
'mesh': 'radial-gradient(at 40% 20%, rgba(19,236,164,0.08) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(16,34,28,0.05) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(19,236,164,0.05) 0px, transparent 50%)',
|
|
|
|
|
|
},
|
|
|
boxShadow: {
|
|
|
// 将光效统一映射为 primary 颜色 (13eca4 的 RGBA)
|
|
|
'glow': '0 0 20px rgba(19, 236, 164, 0.4)',
|
|
|
'glow-lg': '0 10px 30px rgba(19, 236, 164, 0.4)',
|
|
|
'bento': '0 20px 40px -15px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.02)',
|
|
|
'bento-hover': '0 30px 60px -20px rgba(19,236,164,0.15), 0 0 0 1px rgba(19,236,164,0.3)',
|
|
|
'bento-dark': '0 30px 60px -15px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1)',
|
|
|
},
|
|
|
keyframes: {
|
|
|
fadeIn: {
|
|
|
'0%': { opacity: '0', transform: 'translateY(10px)' },
|
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
|
},
|
|
|
scan: {
|
|
|
'0%': { top: '-10%', opacity: '0' },
|
|
|
'10%': { opacity: '1' },
|
|
|
'90%': { opacity: '1' },
|
|
|
'100%': { top: '110%', opacity: '0' },
|
|
|
},
|
|
|
rotateGlobe: {
|
|
|
'0%': { transform: 'rotate(0deg)' },
|
|
|
'100%': { transform: 'rotate(360deg)' },
|
|
|
},
|
|
|
dash: {
|
|
|
'0%': { strokeDashoffset: '1000' },
|
|
|
'100%': { strokeDashoffset: '0' },
|
|
|
},
|
|
|
globePulse: {
|
|
|
'0%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
|
|
|
'50%': { boxShadow: '0 0 50px rgba(19,236,164,0.4)', transform: 'scale(1.02)' },
|
|
|
'100%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
|
|
|
},
|
|
|
// 高级交互动画
|
|
|
pulseGlow: {
|
|
|
'0%': { textShadow: '0 0 10px rgba(19, 236, 164, 0.4)' },
|
|
|
'100%': { textShadow: '0 0 30px #ff6b00' }
|
|
|
},
|
|
|
sweep: { '100%': { left: '200%' } },
|
|
|
cardFlip: {
|
|
|
'0%': { opacity: '0', transform: 'rotateY(-90deg) translateZ(50px)' },
|
|
|
'100%': { opacity: '1', transform: 'rotateY(0deg) translateZ(0)' }
|
|
|
},
|
|
|
floatY: {
|
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
|
'50%': { transform: 'translateY(-15px)' }
|
|
|
},
|
|
|
textShimmer: {
|
|
|
'0%': { backgroundPosition: '0% 50%' },
|
|
|
'100%': { backgroundPosition: '100% 50%' },
|
|
|
},
|
|
|
blobSpin: {
|
|
|
'0%': { transform: 'rotate(0deg) scale(1)' },
|
|
|
'50%': { transform: 'rotate(180deg) scale(1.1)' },
|
|
|
'100%': { transform: 'rotate(360deg) scale(1)' },
|
|
|
}
|
|
|
},
|
|
|
animation: {
|
|
|
'fade-in': 'fadeIn 0.5s ease-out forwards',
|
|
|
'scan-slow': 'scan 6s linear infinite',
|
|
|
'spin-slow': 'rotateGlobe 60s linear infinite',
|
|
|
'dash-flow': 'dash 3s linear infinite',
|
|
|
'globe-select': 'globePulse 0.8s ease-out',
|
|
|
'pulse-glow': 'pulseGlow 2s infinite alternate',
|
|
|
'sweep': 'sweep 3s infinite',
|
|
|
'flip-in': 'cardFlip 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
|
'float-1': 'floatY 3s ease-in-out infinite',
|
|
|
'float-2': 'floatY 3s ease-in-out infinite 1s',
|
|
|
'float-3': 'floatY 3s ease-in-out infinite 2s',
|
|
|
'text-shimmer': 'textShimmer 3s ease-out infinite alternate',
|
|
|
'blob-spin': 'blobSpin 20s infinite cubic-bezier(0.4, 0, 0.2, 1)',
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<!-- Tailwind 基础样式注入 -->
|
|
|
<style type="text/tailwindcss">
|
|
|
|
|
|
@layer utilities {
|
|
|
/* 滚动揭示动效 */
|
|
|
/* 新增：专门为副标题定制的 3D 荧光挤压动画 */
|
|
|
.text-3d-subtitle {
|
|
|
color: #ff6b00; /* 保持主题色 */
|
|
|
animation: pulse3d 2s infinite alternate;
|
|
|
}
|
|
|
|
|
|
@keyframes pulse3d {
|
|
|
0% {
|
|
|
text-shadow:
|
|
|
/* 左上高光 */
|
|
|
-1px -1px 0px rgba(255, 255, 255, 0.5),
|
|
|
/* 右下厚度 (深翠绿色系) */
|
|
|
1px 1px 0px #ce6c33,
|
|
|
2px 2px 0px #b44914,
|
|
|
3px 3px 0px #75600a,
|
|
|
/* 基础投影 */
|
|
|
4px 4px 10px rgba(0, 0, 0, 0.6),
|
|
|
/* 较弱的呼吸背光 */
|
|
|
0px 0px 10px rgba(224, 114, 12, 0.3);
|
|
|
}
|
|
|
100% {
|
|
|
text-shadow:
|
|
|
-1px -1px 0px rgba(255, 255, 255, 0.7),
|
|
|
1px 1px 0px #cc7e19,
|
|
|
2px 2px 0px #e2d921,
|
|
|
3px 3px 0px #692a05,
|
|
|
5px 5px 15px rgba(0, 0, 0, 0.8),
|
|
|
/* 较强的呼吸背光，模拟能量溢出 */
|
|
|
0px 0px 30px #f2e930,
|
|
|
0px 0px 50px rgba(195, 159, 16, 0.6);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.text-3d {
|
|
|
text-shadow:
|
|
|
0 1px 0 #e2e8f0, /* 亮银色顶边 */
|
|
|
0 2px 0 #cbd5e1,
|
|
|
0 3px 0 #94a3b8,
|
|
|
0 4px 0 #64748b, /* 逐渐变暗模拟背光面 */
|
|
|
0 5px 0 #475569,
|
|
|
0 6px 0 #334155,
|
|
|
0 8px 10px rgba(0, 0, 0, 0.4), /* 近处接触阴影 */
|
|
|
0 15px 20px rgba(0, 0, 0, 0.3), /* 中距离扩散阴影 */
|
|
|
0 25px 40px rgba(0, 0, 0, 0.8); /* 远距离环境阴影 */
|
|
|
}
|
|
|
.text-3d-ultra {
|
|
|
color: #ffffff;
|
|
|
/* 1. 顶部左侧的亮色高光切割边 */
|
|
|
text-shadow:
|
|
|
-1px -1px 1px rgba(255, 255, 255, 0.3),
|
|
|
/* 2. 右下角 45度 斜向挤压厚度 (融入您的深墨绿环境色) */
|
|
|
1px 1px 0px #0d1e18,
|
|
|
2px 2px 0px #0a1813,
|
|
|
3px 3px 0px #08130e,
|
|
|
4px 4px 0px #060e0a,
|
|
|
5px 5px 0px #040906,
|
|
|
6px 6px 0px #020403,
|
|
|
7px 7px 0px #000000,
|
|
|
/* 3. 接触面的死黑投影 */
|
|
|
8px 8px 15px rgba(0, 0, 0, 0.8),
|
|
|
/* 4. 远距离大范围柔和投影 */
|
|
|
15px 15px 30px rgba(0, 0, 0, 0.6),
|
|
|
/* 5. 核心点睛之笔：在阴影反方向及底部映射出 #13eca4 (Primary) 的环境光晕 */
|
|
|
-5px -5px 30px rgba(19, 236, 164, 0.1),
|
|
|
10px 10px 40px rgba(19, 236, 164, 0.25);
|
|
|
}
|
|
|
/* Tab 状态管控：选中时变为 primary 背景与深色字体 */
|
|
|
|
|
|
#tech-landing-wrapper .tab-content { @apply hidden; }
|
|
|
#tech-landing-wrapper .tab-content.active { @apply grid; }
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body id="tech-landing-wrapper" class="bg-background-dark text-background-light font-sans w-full leading-relaxed relative">
|
|
|
|
|
|
<!-- 进度条 -->
|
|
|
<!-- <div id="progress-bar" class="fixed top-0 left-0 w-0 h-1 bg-theme-primary z-50 shadow-glow transition-all duration-100"></div> -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 模块一：品牌愿景与全球定位 -->
|
|
|
<section data-aos="fade-down" class="h-screen relative flex items-center justify-center text-center overflow-hidden " id="hero-sec">
|
|
|
<!-- 沉浸式背景 (添加3D视差联动) -->
|
|
|
<div id="m1-bg" class="absolute -top-[5%] -left-[5%] w-[110%] h-[110%] -z-10 bg-[url('https://nenghui.com/wp-content/uploads/2026/02/about-us-banner.jpg')] bg-cover bg-center brightness-70 transition-transform duration-100 ease-out"></div>
|
|
|
|
|
|
<!-- 前景文字层 -->
|
|
|
<div id="m1-content" style="transform-style: preserve-3d;" class="relative z-10 pointer-events-none transition-transform duration-100 ease-out reveal">
|
|
|
<h1 data-aos="fade-down" style="transform: translateZ(80px);" class="text-3d-ultra text-4xl md:text-[2.66rem] tracking-widest uppercase text-white drop-shadow-[0_10px_40px_rgba(0,0,0,0.8)] leading-tight mb-4">
|
|
|
From China to the World
|
|
|
</h1>
|
|
|
<!-- 光效能量条，也向前推一点点形成错层 -->
|
|
|
<div class="w-32 h-1 bg-primary mx-auto mb-6 shadow-[0_0_20px_#13eca4] rounded-full" style="transform: translateZ(40px);"></div>
|
|
|
|
|
|
<p data-aos="fade-up" data-aos-delay="150" style="transform: translateZ(20px);" class="text-3d-subtitle text-sm text-about-us mt-4 tracking-[5px]">Empowering a Sustainable Future.</p>
|
|
|
</div>
|
|
|
</section>
|
|
|
<!-- 模块二：创新驱动与技术内核 -->
|
|
|
<section class="max-w-7xl mx-auto px-8 py-24 grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
|
|
|
<div class="reveal" data-aos="fade-right">
|
|
|
<h2 class=" text-4xl md:text-[2.66rem] text-about-us mb-6">Innovation & Engineering Excellence</h2>
|
|
|
<p class="text-[1rem] mb-4">We firmly believe that technology is the sole driving force behind industry transformation. By continuously pushing the boundaries of physics and engineering, we provide cutting-edge solutions to customers worldwide.</p>
|
|
|
|
|
|
<div class="flex flex-col sm:flex-row gap-8 my-8">
|
|
|
|
|
|
|
|
|
<div class="flex-1 bg-black/20 p-6 border-l-4 border-about-us rounded-r-lg shadow-lg relative overflow-hidden group">
|
|
|
<div class="absolute top-0 -left-full w-1/2 h-full bg-gradient-to-r from-transparent via-white/5 to-transparent -skew-x-12 animate-sweep"></div>
|
|
|
<h3 class="font-mono text-4xl mb-2 text-white">100+</h3>
|
|
|
<p class="text-sm tracking-wider uppercase text-about-us/80">Specialized R&D Engineers</p>
|
|
|
</div>
|
|
|
<div class="flex-1 bg-black/20 p-6 border-l-4 border-about-us rounded-r-lg shadow-lg relative overflow-hidden group">
|
|
|
<div class="absolute top-0 -left-full w-1/2 h-full bg-gradient-to-r from-transparent via-white/5 to-transparent -skew-x-12 animate-sweep"></div>
|
|
|
<h3 class="font-mono text-4xl mb-2 text-white">10%+</h3>
|
|
|
<p class="text-sm tracking-wider uppercase text-about-us/80">Annual R&D investment ratio</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p class="text-theme-mut text-[1rem]">The core self-developed algorithms and sophisticated hardware architecture undergo ultra-high standard laboratory testing to ensure that every product meets industrial-grade stability standards.</p>
|
|
|
</div>
|
|
|
|
|
|
<!-- 图片网格 (启用 3D Tilt) -->
|
|
|
<div class="grid grid-cols-2 gap-4 perspective-[1000px] reveal delay-1" data-aos="fade-left" data-aos-delay="200">
|
|
|
<img src="https://nenghui.com/wp-content/uploads/2026/02/about-us-pc3.jpg" alt="Circuit Board" class="w-full aspect-square object-cover rounded-xl shadow-2xl translate-z-[20px]" data-tilt data-tilt-max="15" data-tilt-speed="400" data-tilt-glare data-tilt-max-glare="0.4">
|
|
|
<img src="https://nenghui.com/wp-content/uploads/2026/02/about-us-pc2.jpg" alt="Lab Test" class="w-full aspect-square object-cover rounded-xl shadow-2xl translate-z-[20px] mt-8" data-tilt data-tilt-max="15" data-tilt-speed="400" data-tilt-glare data-tilt-max-glare="0.4">
|
|
|
<img src="https://nenghui.com/wp-content/uploads/2026/02/about-us-pc1.jpg" alt="Lab Test" class="w-full aspect-square object-cover rounded-xl shadow-2xl translate-z-[20px] mt-8" data-tilt data-tilt-max="15" data-tilt-speed="400" data-tilt-glare data-tilt-max-glare="0.4">
|
|
|
<img src=" https://nenghui.com/wp-content/uploads/2026/02/about-us-pc4.jpg" alt="Lab Test" class="w-full aspect-square object-cover rounded-xl shadow-2xl translate-z-[20px] mt-8" data-tilt data-tilt-max="15" data-tilt-speed="400" data-tilt-glare data-tilt-max-glare="0.4">
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 模块三：精益制造与供应链优势 -->
|
|
|
<section class="py-32 px-8 text-center text-white bg-[url('https://nenghui.com/wp-content/uploads/2026/02/about-us-pc5.jpg')] bg-fixed bg-cover bg-center relative z-0">
|
|
|
<!-- 黑色渐变遮罩 -->
|
|
|
<div class="absolute inset-0 bg-black/40 -z-10"></div>
|
|
|
|
|
|
<h2 data-aos="fade-up" class="text-4xl md:text-[2.66rem] mb-4 relative z-10 reveal">Precision Manufacturing & Supply Chain</h2>
|
|
|
<p data-aos="fade-up" data-aos-delay="150" class="text-[1rem] text-gray-300 relative z-10 reveal delay-1 mb-16">Fully automated robotic arms and Class 100 cleanrooms form an insurmountable competitive advantage.</p>
|
|
|
|
|
|
<!-- 1行3列数据网格 -->
|
|
|
<div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12 relative z-10 reveal delay-2" data-aos="fade-up" data-aos-delay="300">
|
|
|
<!-- 维度1：原有的 GW 产能 -->
|
|
|
<div class="flex flex-col items-center justify-center group">
|
|
|
<div class="flex items-baseline gap-2 mb-2">
|
|
|
<div class="counter text-6xl md:text-[8rem] text-about-us leading-none drop-shadow-[0_0_20px_rgba(246,155,0,0.4)]" data-target="17" data-decimals="0" >0</div>
|
|
|
<span class="text-3xl md:text-5xl text-theme-primary drop-shadow-[0_0_20px_var(--glow)] text-about-us">+Years</span>
|
|
|
</div>
|
|
|
<span class="text-sm uppercase tracking-widest text-gray-300 group-hover:text-white transition-colors">Dedicated R&D in Solar & ESS </span>
|
|
|
</div>
|
|
|
|
|
|
<!-- 维度2：新增机械臂数量 -->
|
|
|
<div class="flex flex-col items-center justify-center group">
|
|
|
<div class="flex items-baseline gap-2 mb-2">
|
|
|
<div class="counter text-6xl md:text-[8rem] text-about-us leading-none drop-shadow-[0_0_20px_rgba(246,155,0,0.4)]" data-target="10" data-decimals="0">0</div>
|
|
|
<span class="text-3xl md:text-5xl text-theme-primary drop-shadow-[0_0_20px_var(--glow)] text-about-us">GWp+</span>
|
|
|
</div>
|
|
|
<span class="text-sm uppercase tracking-widest text-gray-300 group-hover:text-white transition-colors">Global PV Project Track Record </span>
|
|
|
</div>
|
|
|
|
|
|
<!-- 维度3：新增良品率 (带小数位支持) -->
|
|
|
<div class="flex flex-col items-center justify-center group">
|
|
|
<div class="flex items-baseline gap-2 mb-2">
|
|
|
<div class="counter text-6xl md:text-[8rem] text-about-us leading-none drop-shadow-[0_0_20px_rgb(246,155,0,0.4)]" data-target="1.2" data-decimals="1">0</div>
|
|
|
<span class="text-3xl md:text-5xl text-theme-primary drop-shadow-[0_0_20px_var(--glow)] text-about-us">GWp+</span>
|
|
|
</div>
|
|
|
<span class="text-sm uppercase tracking-widest text-gray-300 group-hover:text-white transition-colors">Self-owned & Managed Assets</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 模块四：全球化服务与本土化枢纽 -->
|
|
|
<section class="bg-theme-sec py-24">
|
|
|
<div class="max-w-7xl mx-auto px-8 reveal">
|
|
|
<h2 class="text-4xl md:text-[2.66rem] text-center mb-12 text-white" data-aos="fade-up">Global Hubs & Localized Support</h2>
|
|
|
|
|
|
<div class="flex justify-center gap-4 mb-12 flex-wrap sticky top-[100px] z-10" data-aos="fade-up" data-aos-delay="150">
|
|
|
<button class="backdrop-blur-md p-1.5 rounded-full tab-btn active px-8 py-3 rounded-full border-2 border-[#ff6b00] bg-[#ff6b00] text-white transition-all duration-300 shadow-[0_0_20px_rgba(255,107,0,0.4)] " onclick="switchTab('eu', this)">Europe Hub</button>
|
|
|
<button class="backdrop-blur-md p-1.5 rounded-full tab-btn px-8 py-3 rounded-full border-2 border-theme-mut text-theme-text text-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-glow" onclick="switchTab('asia', this)">Nenghui Middle East</button>
|
|
|
<button class="backdrop-blur-md p-1.5 rounded-full tab-btn px-8 py-3 rounded-full border-2 border-theme-mut text-theme-text text-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-glow" onclick="switchTab('na', this)">Nenghui Thailand</button>
|
|
|
<button class="backdrop-blur-md p-1.5 rounded-full tab-btn px-8 py-3 rounded-full border-2 border-theme-mut text-theme-text text-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-glow" onclick="switchTab('va', this)">Nenghui Cambodia</button>
|
|
|
</div>
|
|
|
|
|
|
<!-- Tab 容器 (使用 Tailwind 群组动画控制) -->
|
|
|
<!-- 欧洲内容 -->
|
|
|
<div id="eu" class="tab-content active grid-cols-1 md:grid-cols-3 gap-8 perspective-[1200px]">
|
|
|
<div class="bg-theme-bg rounded-2xl overflow-hidden shadow-lg animate-flip-in [animation-delay:0ms] hover:-translate-y-3 hover:shadow-2xl transition-all duration-500 group">
|
|
|
<img src="https://nenghui.com/wp-content/uploads/2026/02/about-us-hub1-1.jpg" alt="Office" class="h-64 w-full object-cover group-hover:scale-110 transition-transform duration-500">
|
|
|
<p class="p-6 text-center text-xl m-0 relative z-10 bg-theme-bg">Netherlands Hub </p>
|
|
|
</div>
|
|
|
<div class="bg-theme-bg rounded-2xl overflow-hidden shadow-lg animate-flip-in [animation-delay:100ms] hover:-translate-y-3 hover:shadow-2xl transition-all duration-500 group">
|
|
|
<img src="https://nenghui.com/wp-content/uploads/2026/02/about-us-hub1-2.jpg" alt="Warehouse" class="h-64 w-full object-cover group-hover:scale-110 transition-transform duration-500">
|
|
|
<p class="p-6 text-center text-xl m-0 relative z-10 bg-theme-bg">Belgium Smart Logistics </p>
|
|
|
</div>
|
|
|
<div class="bg-theme-bg rounded-2xl overflow-hidden shadow-lg animate-flip-in [animation-delay:200ms] hover:-translate-y-3 hover:shadow-2xl transition-all duration-500 group">
|
|
|
<img src="https://nenghui.com/wp-content/uploads/2026/02/about-us-hub1-3.jpg" alt="Team" class="h-64 w-full object-cover group-hover:scale-110 transition-transform duration-500">
|
|
|
<p class="p-6 text-center text-xl m-0 relative z-10 bg-theme-bg"> Localized Expert Support </p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 东南亚内容 -->
|
|
|
<div id="asia" class="tab-content grid-cols-1 md:grid-cols-3 gap-8 perspective-[1200px]">
|
|
|
<div class="bg-theme-bg rounded-2xl overflow-hidden shadow-lg animate-flip-in [animation-delay:0ms] hover:-translate-y-3 hover:shadow-2xl transition-all duration-500 group">
|
|
|
<img src="https://nenghui.com/wp-content/uploads/2026/02/about-us-hub2-1.jpg" alt="Office" class="h-64 w-full object-cover group-hover:scale-110 transition-transform duration-500">
|
|
|
<p class="p-6 text-center text-xl m-0 relative z-10 bg-theme-bg">Iraq Hub</p>
|
|
|
</div>
|
|
|
<div class="bg-theme-bg rounded-2xl overflow-hidden shadow-lg animate-flip-in [animation-delay:100ms] hover:-translate-y-3 hover:shadow-2xl transition-all duration-500 group">
|
|
|
<img src="https://nenghui.com/wp-content/uploads/2026/02/about-us-hub2-2.jpg" alt="Warehouse" class="h-64 w-full object-cover group-hover:scale-110 transition-transform duration-500">
|
|
|
<p class="p-6 text-center text-xl m-0 relative z-10 bg-theme-bg">Iraq Smart Logistics Hub</p>
|
|
|
</div>
|
|
|
<div class="bg-theme-bg rounded-2xl overflow-hidden shadow-lg animate-flip-in [animation-delay:200ms] hover:-translate-y-3 hover:shadow-2xl transition-all duration-500 group">
|
|
|
<img src="https://nenghui.com/wp-content/uploads/2026/02/about-us-hub2-3.jpg" alt="Team" class="h-64 w-full object-cover group-hover:scale-110 transition-transform duration-500">
|
|
|
<p class="p-6 text-center text-xl m-0 relative z-10 bg-theme-bg">Localized Technical Support</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 北美内容 -->
|
|
|
<div id="na" class="tab-content grid-cols-1 md:grid-cols-3 gap-8 perspective-[1200px]">
|
|
|
<div class="bg-theme-bg rounded-2xl overflow-hidden shadow-lg animate-flip-in [animation-delay:0ms] hover:-translate-y-3 hover:shadow-2xl transition-all duration-500 group">
|
|
|
<img src="https://nenghui.com/wp-content/uploads/2026/02/about-us-hub3-1.jpg" alt="Office" class="h-64 w-full object-cover group-hover:scale-110 transition-transform duration-500">
|
|
|
<p class="p-6 text-center text-xl m-0 relative z-10 bg-theme-bg">Thailand Strategic Hub</p>
|
|
|
</div>
|
|
|
<div class="bg-theme-bg rounded-2xl overflow-hidden shadow-lg animate-flip-in [animation-delay:100ms] hover:-translate-y-3 hover:shadow-2xl transition-all duration-500 group">
|
|
|
<img src="https://nenghui.com/wp-content/uploads/2026/02/about-us-hub3-2.jpg" alt="Warehouse" class="h-64 w-full object-cover group-hover:scale-110 transition-transform duration-500">
|
|
|
<p class="p-6 text-center text-xl m-0 relative z-10 bg-theme-bg">Thailand Strategic Hub</p>
|
|
|
</div>
|
|
|
<div class="bg-theme-bg rounded-2xl overflow-hidden shadow-lg animate-flip-in [animation-delay:200ms] hover:-translate-y-3 hover:shadow-2xl transition-all duration-500 group">
|
|
|
<img src="https://nenghui.com/wp-content/uploads/2026/02/about-us-hub3-3.jpg" alt="Team" class="h-64 w-full object-cover group-hover:scale-110 transition-transform duration-500">
|
|
|
<p class="p-6 text-center text-xl m-0 relative z-10 bg-theme-bg">Expert On-site Support</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- ddd -->
|
|
|
<div id="va" class="tab-content grid-cols-1 md:grid-cols-3 gap-8 perspective-[1200px]">
|
|
|
<div class="bg-theme-bg rounded-2xl overflow-hidden shadow-lg animate-flip-in [animation-delay:0ms] hover:-translate-y-3 hover:shadow-2xl transition-all duration-500 group">
|
|
|
<img src="https://nenghui.com/wp-content/uploads/2026/02/about-us-hub4-1.jpg" alt="Office" class="h-64 w-full object-cover group-hover:scale-110 transition-transform duration-500">
|
|
|
<p class="p-6 text-center text-xl m-0 relative z-10 bg-theme-bg">Cambodia Branch</p>
|
|
|
</div>
|
|
|
<div class="bg-theme-bg rounded-2xl overflow-hidden shadow-lg animate-flip-in [animation-delay:100ms] hover:-translate-y-3 hover:shadow-2xl transition-all duration-500 group">
|
|
|
<img src="https://nenghui.com/wp-content/uploads/2026/02/about-us-hub4-2.jpg" alt="Warehouse" class="h-64 w-full object-cover group-hover:scale-110 transition-transform duration-500">
|
|
|
<p class="p-6 text-center text-xl m-0 relative z-10 bg-theme-bg">Smart Warehousing & Distribution</p>
|
|
|
</div>
|
|
|
<div class="bg-theme-bg rounded-2xl overflow-hidden shadow-lg animate-flip-in [animation-delay:200ms] hover:-translate-y-3 hover:shadow-2xl transition-all duration-500 group">
|
|
|
<img src="https://nenghui.com/wp-content/uploads/2026/02/about-us-hub4-3.jpg" alt="Team" class="h-64 w-full object-cover group-hover:scale-110 transition-transform duration-500">
|
|
|
<p class="p-6 text-center text-xl m-0 relative z-10 bg-theme-bg">Local Technical Support Team</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<!-- 模块五：可持续发展与企业公民 -->
|
|
|
<section class="bg-[#f0fdf4] py-32 text-center transition-colors duration-1000 text-[#064e3b]">
|
|
|
<div class="max-w-4xl mx-auto px-8">
|
|
|
<h2 class="text-4xl md:text-[2.66rem] mb-6 reveal" data-aos="fade-up">Sustainability & Corporate Responsibility</h2>
|
|
|
<p class="text-[1rem] opacity-80 mb-16 reveal delay-1" data-aos="fade-up" data-aos-delay="150">We are committed to achieving carbon neutrality by 2030. Being green is not an option, but a responsibility ingrained in our DNA: to live in harmony with nature and create a sustainable future.</p>
|
|
|
|
|
|
<div class="flex justify-center gap-12 md:gap-24 mb-16 flex-wrap reveal delay-2" data-aos="fade-up" data-aos-delay="300">
|
|
|
<!-- 图标使用 Primary 色 -->
|
|
|
<div class="flex flex-col items-center gap-4 animate-float-1 group cursor-pointer">
|
|
|
<svg viewBox="0 0 24 24" class="w-16 h-16 stroke-primary fill-none stroke-[1.5] group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300 drop-shadow-md"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /></svg>
|
|
|
<span class="text-lg ">100% Clean Energy</span>
|
|
|
</div>
|
|
|
<div class="flex flex-col items-center gap-4 animate-float-2 group cursor-pointer">
|
|
|
<svg viewBox="0 0 24 24" class="w-16 h-16 stroke-primary fill-none stroke-[1.5] group-hover:scale-110 group-hover:-rotate-6 transition-transform duration-300 drop-shadow-md"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" /></svg>
|
|
|
<span class="text-lg ">ISO 14001 certification</span>
|
|
|
</div>
|
|
|
<div class="flex flex-col items-center gap-4 animate-float-3 group cursor-pointer">
|
|
|
<svg viewBox="0 0 24 24" class="w-16 h-16 stroke-primary fill-none stroke-[1.5] group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300 drop-shadow-md"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043 A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" /></svg>
|
|
|
<span class="text-lg ">Zero-waste factory</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</section>
|
|
|
<!-- 6. 引入 AOS.js -->
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
|
|
|
|
|
|
<!-- 7. 交互逻辑 (AOS 初始化与功能脚本) -->
|
|
|
|
|
|
<script>
|
|
|
// --- 初始化 AOS 动画 ---
|
|
|
AOS.init({
|
|
|
duration: 800, // 动画持续时间 800ms
|
|
|
easing: 'ease-out-cubic', // 平滑的缓动函数
|
|
|
once: true, // 是否只动画一次
|
|
|
offset: 100, // 距离视口多远触发
|
|
|
});
|
|
|
// 1. 模板(主题)切换
|
|
|
// function setTheme(themeName) {
|
|
|
// document.documentElement.setAttribute('data-theme', themeName);
|
|
|
// }
|
|
|
|
|
|
// // 2. 顶部阅读进度条
|
|
|
// window.addEventListener('scroll', () => {
|
|
|
// const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
|
|
|
// const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
|
|
// const scrolled = (winScroll / height) * 100;
|
|
|
// document.getElementById("progress-bar").style.width = scrolled + "%";
|
|
|
// });
|
|
|
|
|
|
// 3. Tab 切换 + 强制重绘触发 Tailwind flip-in 动画
|
|
|
// function switchTab(tabId, btnElement) {
|
|
|
// document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
|
|
// document.querySelectorAll('.tab-content').forEach(content => {
|
|
|
// content.classList.remove('active');
|
|
|
// void content.offsetWidth; // 触发重绘
|
|
|
// });
|
|
|
// btnElement.classList.add('active');
|
|
|
// document.getElementById(tabId).classList.add('active');
|
|
|
// }
|
|
|
|
|
|
// Tab 切换逻辑
|
|
|
function switchTab(tabId, btnElement) {
|
|
|
const wrapper = document.getElementById('tech-landing-wrapper');
|
|
|
const tabs = wrapper.querySelectorAll('.tab-btn');
|
|
|
const contents = wrapper.querySelectorAll('.tab-content');
|
|
|
|
|
|
// 重置所有按钮状态 (Hover 设为 #ff6b00)
|
|
|
tabs.forEach(btn => {
|
|
|
btn.className = "backdrop-blur-md p-1.5 rounded-full tab-btn px-8 py-3 rounded-full border-2 border-silver-accent/30 text-silver-accent transition-all duration-300 hover:-translate-y-1 hover:border-[#ff6b00] hover:text-[#ff6b00] ";
|
|
|
});
|
|
|
// 隐藏内容并重绘
|
|
|
contents.forEach(content => {
|
|
|
content.classList.remove('active');
|
|
|
void content.offsetWidth;
|
|
|
});
|
|
|
|
|
|
// 激活当前选中项 (赋值 #ff6b00)
|
|
|
btnElement.className = "backdrop-blur-md p-1.5 rounded-full tab-btn active px-8 py-3 rounded-full border-2 border-[#ff6b00] bg-[#ff6b00] text-white transition-all duration-300 shadow-[0_0_20px_rgba(255,107,0,0.4)] ";
|
|
|
document.getElementById(tabId).classList.add('active');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
// 4. 高级非线性缓动数字滚动 (支持多节点与小数点)
|
|
|
const counters = document.querySelectorAll('.counter');
|
|
|
const myCounter = counters[0];
|
|
|
|
|
|
// 如果没有加 ID，也可以默认选第一个： document.querySelectorAll('.counter')[0]
|
|
|
if(myCounter) {
|
|
|
const year = 2009
|
|
|
const dynamicValue = (new Date().getFullYear()) - year;
|
|
|
myCounter.setAttribute('data-target', dynamicValue);
|
|
|
}
|
|
|
const counterObserver = new IntersectionObserver((entries, observer) => {
|
|
|
entries.forEach(entry => {
|
|
|
if(entry.isIntersecting) {
|
|
|
const el = entry.target;
|
|
|
const target = parseFloat(el.getAttribute('data-target'));
|
|
|
const decimals = parseInt(el.getAttribute('data-decimals')) || 0; // 获取小数位数
|
|
|
let count = 0;
|
|
|
|
|
|
const updateCounter = () => {
|
|
|
// 缓动算法：每次增加剩余距离的 5%
|
|
|
count += (target - count) * 0.05;
|
|
|
|
|
|
// 当距离目标值非常近时（小于0.1），直接停在目标值
|
|
|
if (target - count > 0.1) {
|
|
|
el.innerText = count.toFixed(decimals);
|
|
|
requestAnimationFrame(updateCounter);
|
|
|
} else {
|
|
|
el.innerText = target.toFixed(decimals);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
updateCounter();
|
|
|
// 动画执行一次后取消监听该元素
|
|
|
observer.unobserve(el);
|
|
|
}
|
|
|
});
|
|
|
}, { threshold: 0.5 }); // 当元素有 50% 露出时触发
|
|
|
|
|
|
counters.forEach(counter => counterObserver.observe(counter));
|
|
|
|
|
|
|
|
|
|
|
|
// 6. 首屏 3D 鼠标视差位移
|
|
|
const m1 = document.getElementById('hero-sec');
|
|
|
const m1Bg = document.getElementById('m1-bg');
|
|
|
const m1Content = document.getElementById('m1-content');
|
|
|
// 首屏动态 3D 鼠标视差 (平移 + 物理扭转)
|
|
|
|
|
|
|
|
|
if(m1 && m1Bg && m1Content){
|
|
|
m1.addEventListener('mousemove', (e) => {
|
|
|
// 计算鼠标偏离屏幕中心的距离
|
|
|
const xAxis = (window.innerWidth / 2 - e.pageX) / 30;
|
|
|
const yAxis = (window.innerHeight / 2 - e.pageY) / 30;
|
|
|
|
|
|
// 背景反向移动
|
|
|
m1Bg.style.transform = `translate(${-xAxis}px, ${-yAxis}px) scale(1.05)`;
|
|
|
|
|
|
// 前景不仅跟随移动，还根据鼠标位置进行 3D 翻转 (Rotate)
|
|
|
// 除以的数值越大，翻转角度越小越柔和
|
|
|
m1Content.style.transform = `translate(${xAxis}px, ${yAxis}px) rotateY(${-xAxis / 2}deg) rotateX(${yAxis / 2}deg)`;
|
|
|
});
|
|
|
|
|
|
// 鼠标移出时缓慢复位
|
|
|
m1.addEventListener('mouseleave', () => {
|
|
|
m1Bg.style.transform = `translate(0, 0) scale(1.05)`;
|
|
|
m1Content.style.transform = `translate(0px, 0px) rotateY(0deg) rotateX(0deg)`;
|
|
|
});
|
|
|
}
|
|
|
// m1.addEventListener('mousemove', (e) => {
|
|
|
// const x = (window.innerWidth / 2 - e.pageX) / 40;
|
|
|
// const y = (window.innerHeight / 2 - e.pageY) / 40;
|
|
|
// m1Bg.style.transform = `translate(${-x}px, ${-y}px)`; // 背景反向移动
|
|
|
// m1Content.style.transform = `translate(${x}px, ${y}px)`; // 前景正向移动
|
|
|
// });
|
|
|
// m1.addEventListener('mouseleave', () => {
|
|
|
// m1Bg.style.transform = `translate(0, 0)`;
|
|
|
// m1Content.style.transform = `translate(0, 0)`;
|
|
|
// });
|
|
|
|
|
|
// 7. 初始化 3D 图片倾斜
|
|
|
VanillaTilt.init(document.querySelectorAll("[data-tilt]"));
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
