|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Contact & Global Grid - Nenghui</title>
|
|
|
|
|
|
<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" />
|
|
|
<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>
|
|
|
<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) translate(-80%, 50%) scale(1.1)' },
|
|
|
'100%': { transform: 'rotate(360deg) translate(0) 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>
|
|
|
<style type="text/tailwindcss">
|
|
|
|
|
|
@layer utilities {
|
|
|
/* contact us */
|
|
|
#contact-us .focus-group:hover > div:not(:hover) {
|
|
|
opacity: 0.6;
|
|
|
transform: scale(0.98);
|
|
|
filter: blur(2px);
|
|
|
}
|
|
|
#contact-us .focus-group > div {
|
|
|
transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
|
|
|
}
|
|
|
|
|
|
/* about-us */
|
|
|
/* 新增：专门为副标题定制的 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); /* 远距离环境阴影 */
|
|
|
}
|
|
|
.-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(18, 181, 127, 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 class="bg-liquid-gradient text-slate-700 font-sans overflow-x-hidden selection:bg-primary selection:text-white cursor-default">
|
|
|
|
|
|
<style>
|
|
|
html { scroll-behavior: smooth; }
|
|
|
@media (min-width: 768px) {
|
|
|
body a, body button, body .magnetic-btn, body .tab-btn { cursor: none !important; }
|
|
|
}
|
|
|
/* Tier-1 横向无限跑马灯动画引擎 (极致丝滑修复版) */
|
|
|
@keyframes marquee-x {
|
|
|
0% { transform: translate3d(0, 0, 0); }
|
|
|
/* 精确平移 50%，需确保内外结构绝对对称 */
|
|
|
100% { transform: translate3d(-50%, 0, 0); }
|
|
|
}
|
|
|
.animate-marquee-x {
|
|
|
display: flex;
|
|
|
width: max-content;
|
|
|
/* 提升时间至 40s 让运动更从容，强制 GPU 加速 */
|
|
|
animation: marquee-x 40s linear infinite;
|
|
|
will-change: transform;
|
|
|
}
|
|
|
.marquee-container:hover .animate-marquee-x {
|
|
|
animation-play-state: paused;
|
|
|
}
|
|
|
.mask-edges-x {
|
|
|
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
|
|
|
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
|
|
|
}
|
|
|
/* 取消使用 flex gap，改用精确的右侧外边距保证无缝对接 */
|
|
|
.marquee-item {
|
|
|
width: 12rem; /* w-48 = 192px */
|
|
|
flex-shrink: 0;
|
|
|
margin-right: 1.5rem; /* space-x-6 的等效值 24px */
|
|
|
}
|
|
|
|
|
|
/* Swiper 案例轮播图定制样式 */
|
|
|
.swiper { padding-bottom: 60px !important; }
|
|
|
.swiper-wrapper { cursor: grab; }
|
|
|
.swiper-wrapper:active { cursor: grabbing; }
|
|
|
|
|
|
/* EPC (绿色系) 分页器 */
|
|
|
.epc-swiper .swiper-pagination-bullet { background: rgba(0,0,0,0.2); opacity: 1; transition: all 0.3s; }
|
|
|
.epc-swiper .swiper-pagination-bullet-active { background: #13eca4; width: 24px; border-radius: 4px; box-shadow: 0 0 10px rgba(19, 236, 164, 0.5); }
|
|
|
|
|
|
/* EMC (橙色系) 分页器 */
|
|
|
.emc-swiper .swiper-pagination-bullet { background: rgba(0,0,0,0.2); opacity: 1; transition: all 0.3s; }
|
|
|
.emc-swiper .swiper-pagination-bullet-active { background: #ff6b00; width: 24px; border-radius: 4px; box-shadow: 0 0 10px rgba(255, 107, 0, 0.5); }
|
|
|
|
|
|
#energy-cursor {
|
|
|
position: fixed;
|
|
|
top: 0; left: 0;
|
|
|
width: 32px; height: 32px;
|
|
|
background: rgba(19, 236, 164, 0.4);
|
|
|
border-radius: 50%;
|
|
|
pointer-events: none;
|
|
|
z-index: 9999;
|
|
|
transform: translate(-50%, -50%);
|
|
|
transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
|
|
|
height 0.3s cubic-bezier(0.25, 1, 0.5, 1),
|
|
|
background-color 0.3s ease,
|
|
|
box-shadow 0.3s ease, border 0.3s ease;
|
|
|
/* 修正明亮模式下的光标融合效果 */
|
|
|
mix-blend-mode: multiply;
|
|
|
backdrop-filter: blur(4px);
|
|
|
}
|
|
|
|
|
|
#energy-cursor.active {
|
|
|
width: 80px; height: 80px;
|
|
|
background: rgba(19, 236, 164, 0.2);
|
|
|
border: 1px solid rgba(19, 236, 164, 0.5);
|
|
|
box-shadow: 0 0 20px rgba(19, 236, 164, 0.4);
|
|
|
}
|
|
|
|
|
|
#energy-cursor.active-emc {
|
|
|
width: 80px; height: 80px;
|
|
|
background: rgba(255, 107, 0, 0.1);
|
|
|
border: 1px solid rgba(255, 107, 0, 0.5);
|
|
|
box-shadow: 0 0 20px rgba(255, 107, 0, 0.4);
|
|
|
}
|
|
|
|
|
|
/* 极致丝滑的 Tab 切换动画引擎 */
|
|
|
.tab-wrapper {
|
|
|
display: grid;
|
|
|
grid-template-columns: minmax(0, 1fr);
|
|
|
}
|
|
|
|
|
|
.tab-content {
|
|
|
/* 关键：让两个面板在同一网格区域重叠，由最高的元素撑开父容器 */
|
|
|
grid-area: 1 / 1;
|
|
|
opacity: 0;
|
|
|
/* 初始状态：轻微向下且缩小，形成“深处”的纵深感 */
|
|
|
transform: translateY(15px) scale(0.98);
|
|
|
pointer-events: none;
|
|
|
visibility: hidden;
|
|
|
/* 使用 Apple 级别的物理缓动曲线 */
|
|
|
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
|
|
|
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
|
|
|
visibility 0.6s step-end;
|
|
|
z-index: 0;
|
|
|
}
|
|
|
|
|
|
.tab-content.active {
|
|
|
opacity: 1;
|
|
|
transform: translateY(0) scale(1);
|
|
|
pointer-events: auto;
|
|
|
visibility: visible;
|
|
|
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
|
|
|
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
|
|
|
visibility 0s step-start;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<div id="energy-cursor" class="hidden md:block"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<main class="relative pt-40 pb-24 overflow-hidden min-h-[85vh] flex items-center parallax-container">
|
|
|
<div class="parallax-bg absolute top-1/4 -right-1/4 w-[800px] h-[800px] bg-primary/20 rounded-full blur-[120px] animate-blob-spin pointer-events-none" data-speed="-0.03"></div>
|
|
|
<div class="parallax-bg absolute bottom-0 left-0 w-[600px] h-[600px] bg-[#ff6b00]/10 rounded-full blur-[100px] animate-blob-spin pointer-events-none" style="animation-direction: reverse;" data-speed="0.03"></div>
|
|
|
|
|
|
<div class="container mx-auto px-6 relative z-10 text-center">
|
|
|
<div class="inline-block px-4 py-1 mb-8 rounded-full border border-primary/30 bg-primary/10 text-primary font-mono text-sm tracking-widest uppercase shadow-glow animate-fade-in">
|
|
|
Global Energy Transition Standard
|
|
|
</div>
|
|
|
<h1 class="text-4xl md:text-[2.66rem] -ultra mb-8 leading-[1.1] animate-fade-in" style="animation-delay: 0.2s;">
|
|
|
Mastering the <br/>
|
|
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-green-500 animate-text-shimmer" style="background-size: 200% auto;">Zero-Carbon</span> Equation.
|
|
|
</h1>
|
|
|
<p class="max-w-3xl mx-auto text-[1rem] text-slate-600 mb-12 font-inter leading-relaxed animate-fade-in" style="animation-delay: 0.4s;">
|
|
|
Empowering industrial giants and commercial leaders worldwide through elite Turnkey EPC execution and Zero-CAPEX Energy Management Contracting (EMC/PPA).
|
|
|
</p>
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
<section id="models" class="container mx-auto px-6 py-24 relative z-10 -mt-20">
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
|
<div data-aos="fade-right" class="hover-trigger relative group p-10 lg:p-14 rounded-[2.5rem] bg-white/70 border border-silver-accent shadow-bento hover:shadow-bento-hover hover:border-primary/50 transition-all duration-500 overflow-hidden backdrop-blur-xl" data-tilt>
|
|
|
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/10 blur-[80px] rounded-full group-hover:bg-primary/20 transition-all duration-700 pointer-events-none"></div>
|
|
|
<div class="flex items-center justify-between mb-8 relative z-10">
|
|
|
<h2 class="text-3xl text-slate-900 ">EPC</h2>
|
|
|
<span class="material-symbols-outlined text-5xl text-primary opacity-70 group-hover:opacity-100 group-hover:rotate-12 transition-all duration-500"></span>
|
|
|
</div>
|
|
|
<h3 class="text-xl text-primary font-mono mb-6 uppercase tracking-widest border-l-2 border-primary pl-4 relative z-10">Engineering, Procurement, Construction</h3>
|
|
|
<p class="text-slate-600 mb-10 leading-relaxed text-lg relative z-10">
|
|
|
A traditional, robust model for clients holding CAPEX. We deliver end-to-end turnkey infrastructure, ensuring absolute quality control, timeline adherence, and tier-1 component integration.
|
|
|
</p>
|
|
|
<div class="grid grid-cols-2 gap-4 font-inter text-slate-700 text-sm relative z-10 pointer-events-none">
|
|
|
<div class="bg-white/90 p-4 rounded-2xl border border-silver-accent shadow-sm"><span class="material-symbols-outlined text-primary block mb-2"></span>Site-Specific Design</div>
|
|
|
<div class="bg-white/90 p-4 rounded-2xl border border-silver-accent shadow-sm"><span class="material-symbols-outlined text-primary block mb-2"></span>Global Sourcing</div>
|
|
|
<div class="bg-white/90 p-4 rounded-2xl border border-silver-accent shadow-sm"><span class="material-symbols-outlined text-primary block mb-2"></span>Certified Build</div>
|
|
|
<div class="bg-white/90 p-4 rounded-2xl border border-silver-accent shadow-sm"><span class="material-symbols-outlined text-primary block mb-2"></span>Grid Handover</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div data-aos="fade-left" class="hover-trigger hover-emc relative group p-10 lg:p-14 rounded-[2.5rem] bg-white/70 border border-silver-accent shadow-bento hover:shadow-bento-hover hover:border-[#ff6b00]/50 transition-all duration-500 overflow-hidden backdrop-blur-xl" data-tilt>
|
|
|
<div class="absolute bottom-0 right-0 w-64 h-64 bg-[#ff6b00]/10 blur-[80px] rounded-full group-hover:bg-[#ff6b00]/20 transition-all duration-700 pointer-events-none"></div>
|
|
|
<div class="flex items-center justify-between mb-8 relative z-10">
|
|
|
<h2 class="text-3xl text-slate-900 ">EMC/PPA</h2>
|
|
|
<span class="material-symbols-outlined text-5xl text-[#ff6b00] opacity-70 group-hover:opacity-100 group-hover:-rotate-12 transition-all duration-500"></span>
|
|
|
</div>
|
|
|
<h3 class="text-xl text-[#ff6b00] font-mono mb-6 uppercase tracking-widest border-l-2 border-[#ff6b00] pl-4 relative z-10">Energy Management Contracting</h3>
|
|
|
<p class="text-slate-600 mb-10 leading-relaxed text-lg relative z-10">
|
|
|
The modern standard for risk-free upgrades. We finance 100% of the project. You enjoy immediate utility savings. We share the profit derived exclusively from the generated energy efficiency.
|
|
|
</p>
|
|
|
<div class="grid grid-cols-2 gap-4 font-inter text-slate-700 text-sm relative z-10 pointer-events-none">
|
|
|
<div class="bg-white/90 p-4 rounded-2xl border border-silver-accent shadow-sm"><span class="material-symbols-outlined text-[#ff6b00] block mb-2"></span>Zero CAPEX Required</div>
|
|
|
<div class="bg-white/90 p-4 rounded-2xl border border-silver-accent shadow-sm"><span class="material-symbols-outlined text-[#ff6b00] block mb-2"></span>Guaranteed Savings</div>
|
|
|
<div class="bg-white/90 p-4 rounded-2xl border border-silver-accent shadow-sm"><span class="material-symbols-outlined text-[#ff6b00] block mb-2"></span>Free O&M Included</div>
|
|
|
<div class="bg-white/90 p-4 rounded-2xl border border-silver-accent shadow-sm"><span class="material-symbols-outlined text-[#ff6b00] block mb-2"></span>Immediate ROI</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section id="dual-workflow" class="py-24 relative overflow-hidden bg-pearlescent border-y border-silver-accent">
|
|
|
<div class="container mx-auto px-6 relative z-10">
|
|
|
<div class="text-center mb-24" data-aos="zoom-in">
|
|
|
<h2 class="text-4xl md:text-[2.66rem] text-slate-900 mb-8 ">Execution Pathways</h2>
|
|
|
<div class="inline-flex bg-white/80 border border-silver-accent p-1.5 rounded-full backdrop-blur-md relative overflow-hidden shadow-sm">
|
|
|
<div id="tab-slider" class="absolute top-1.5 left-1.5 bottom-1.5 w-[calc(50%-6px)] bg-primary rounded-full transition-all duration-500 cubic-bezier(0.34, 1.56, 0.64, 1) ease-in-out"></div>
|
|
|
|
|
|
<button id="btn-epc" class="tab-btn hover-trigger relative z-10 px-6 md:px-10 py-3 md:py-4 rounded-full text-slate-900 transition-colors duration-300 flex items-center">
|
|
|
<span class="material-symbols-outlined mr-2 text-base md:text-lg pointer-events-none"></span> <span class="pointer-events-none">EPC Workflow</span>
|
|
|
</button>
|
|
|
<button id="btn-emc" class="tab-btn hover-trigger hover-emc relative z-10 px-6 md:px-10 py-3 md:py-4 rounded-full text-slate-500 hover:text-slate-900 transition-colors duration-300 flex items-center ">
|
|
|
<span class="material-symbols-outlined mr-2 text-base md:text-lg pointer-events-none"></span> <span class="pointer-events-none">EMC/PPA Workflow</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="tab-wrapper w-full relative">
|
|
|
<div id="content-epc" class="tab-content active">
|
|
|
<div class="relative flex flex-col lg:flex-row justify-between items-start space-y-12 lg:space-y-0 lg:space-x-4 before:absolute before:content-[''] before:w-[2px] lg:before:w-full lg:before:h-[2px] before:bg-slate-300 before:left-[23px] lg:before:top-[24px] lg:before:left-0 z-0">
|
|
|
<div class="hidden lg:block absolute top-[24px] left-0 h-[2px] bg-gradient-to-r from-transparent via-primary to-transparent z-0 animate-sweep" style="width: 400px; animation-duration: 4s;"></div>
|
|
|
|
|
|
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger">
|
|
|
<div class="w-12 h-12 rounded-full bg-white border-2 border-primary flex items-center justify-center shadow-sm mb-0 lg:mb-6 shrink-0 group-hover:scale-110 transition-transform duration-500"><span class="material-symbols-outlined text-primary text-xl"></span></div>
|
|
|
<div class="ml-6 lg:ml-0 lg:text-center">
|
|
|
<h4 class="text-lg text-slate-900 mb-2">Site Survey</h4>
|
|
|
<p class="text-slate-600 text-xs leading-relaxed">Comprehensive assessment of roof integrity, shading, and electrical infrastructure.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger">
|
|
|
<div class="w-12 h-12 rounded-full bg-white border-2 border-slate-200 group-hover:border-primary flex items-center justify-center mb-0 lg:mb-6 shrink-0 transition-colors duration-500"><span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors text-xl"></span></div>
|
|
|
<div class="ml-6 lg:ml-0 lg:text-center">
|
|
|
<h4 class="text-lg text-slate-900 mb-2">Engineering</h4>
|
|
|
<p class="text-slate-600 text-xs leading-relaxed">Precision CAD/3D design optimized for maximum energy density.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger">
|
|
|
<div class="w-12 h-12 rounded-full bg-white border-2 border-slate-200 group-hover:border-primary flex items-center justify-center mb-0 lg:mb-6 shrink-0 transition-colors duration-500"><span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors text-xl"></span></div>
|
|
|
<div class="ml-6 lg:ml-0 lg:text-center">
|
|
|
<h4 class="text-lg text-slate-900 mb-2">Procurement</h4>
|
|
|
<p class="text-slate-600 text-xs leading-relaxed">Sourcing high-efficiency components through our robust supply chain.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger">
|
|
|
<div class="w-12 h-12 rounded-full bg-white border-2 border-slate-200 group-hover:border-primary flex items-center justify-center mb-0 lg:mb-6 shrink-0 transition-colors duration-500"><span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors text-xl"></span></div>
|
|
|
<div class="ml-6 lg:ml-0 lg:text-center">
|
|
|
<h4 class="text-lg text-slate-900 mb-2">Construction</h4>
|
|
|
<p class="text-slate-600 text-xs leading-relaxed">Rigorous on-site management following international safety & quality standards.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger">
|
|
|
<div class="w-12 h-12 rounded-full bg-white border-2 border-slate-200 group-hover:border-primary flex items-center justify-center mb-0 lg:mb-6 shrink-0 transition-colors duration-500"><span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors text-xl"></span></div>
|
|
|
<div class="ml-6 lg:ml-0 lg:text-center">
|
|
|
<h4 class="text-lg text-slate-900 mb-2">Grid & Testing</h4>
|
|
|
<p class="text-slate-600 text-xs leading-relaxed">Handling all PEA/MEA permits and conducting strict pre-commissioning tests.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger">
|
|
|
<div class="w-12 h-12 rounded-full bg-white border-2 border-primary flex items-center justify-center mb-0 lg:mb-6 shrink-0 group-hover:bg-primary transition-colors duration-500"><span class="material-symbols-outlined text-primary group-hover:text-white transition-colors text-xl"></span></div>
|
|
|
<div class="ml-6 lg:ml-0 lg:text-center">
|
|
|
<h4 class="text-lg text-slate-900 mb-2">O&M</h4>
|
|
|
<p class="text-slate-600 text-xs leading-relaxed">24/7 remote monitoring and localized cleaning/repair services.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="content-emc" class="tab-content">
|
|
|
<div class="relative flex flex-col lg:flex-row justify-between items-start space-y-12 lg:space-y-0 lg:space-x-6 before:absolute before:content-[''] before:w-[2px] lg:before:w-full lg:before:h-[2px] before:bg-slate-300 before:left-[23px] lg:before:top-[24px] lg:before:left-0 z-0">
|
|
|
<div class="hidden lg:block absolute top-[24px] left-0 h-[2px] bg-gradient-to-r from-transparent via-[#ff6b00] to-transparent z-0 animate-sweep" style="width: 400px; animation-duration: 4s;"></div>
|
|
|
|
|
|
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger hover-emc">
|
|
|
<div class="w-12 h-12 rounded-full bg-white border-2 border-[#ff6b00] flex items-center justify-center shadow-sm mb-0 lg:mb-6 shrink-0 group-hover:scale-110 transition-transform duration-500"><span class="material-symbols-outlined text-[#ff6b00] text-xl"></span></div>
|
|
|
<div class="ml-6 lg:ml-0 lg:text-center">
|
|
|
<h4 class="text-lg text-slate-900 mb-2">Evaluation</h4>
|
|
|
<p class="text-slate-600 text-xs leading-relaxed">Financial feasibility study based on your historical electricity bills.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger hover-emc">
|
|
|
<div class="w-12 h-12 rounded-full bg-white border-2 border-slate-200 group-hover:border-[#ff6b00] flex items-center justify-center mb-0 lg:mb-6 shrink-0 transition-colors duration-500"><span class="material-symbols-outlined text-slate-400 group-hover:text-[#ff6b00] transition-colors text-xl"></span></div>
|
|
|
<div class="ml-6 lg:ml-0 lg:text-center">
|
|
|
<h4 class="text-lg text-slate-900 mb-2">Agreement</h4>
|
|
|
<p class="text-slate-600 text-xs leading-relaxed">Clear, transparent PPA (Power Purchase Agreement) with no hidden fees.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger hover-emc">
|
|
|
<div class="w-12 h-12 rounded-full bg-white border-2 border-slate-200 group-hover:border-[#ff6b00] flex items-center justify-center mb-0 lg:mb-6 shrink-0 transition-colors duration-500"><span class="material-symbols-outlined text-slate-400 group-hover:text-[#ff6b00] transition-colors text-xl"></span></div>
|
|
|
<div class="ml-6 lg:ml-0 lg:text-center">
|
|
|
<h4 class="text-lg text-slate-900 mb-2">Deployment</h4>
|
|
|
<p class="text-slate-600 text-xs leading-relaxed">Rapid installation and commissioning by our expert engineering team.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger hover-emc">
|
|
|
<div class="w-12 h-12 rounded-full bg-white border-2 border-slate-200 group-hover:border-[#ff6b00] flex items-center justify-center mb-0 lg:mb-6 shrink-0 transition-colors duration-500"><span class="material-symbols-outlined text-slate-400 group-hover:text-[#ff6b00] transition-colors text-xl"></span></div>
|
|
|
<div class="ml-6 lg:ml-0 lg:text-center">
|
|
|
<h4 class="text-lg text-slate-900 mb-2">Management</h4>
|
|
|
<p class="text-slate-600 text-xs leading-relaxed">Intelligent dispatching of solar and storage to optimize self-consumption.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger hover-emc">
|
|
|
<div class="w-12 h-12 rounded-full bg-white border-2 border-[#ff6b00] flex items-center justify-center mb-0 lg:mb-6 shrink-0 group-hover:bg-[#ff6b00] transition-colors duration-500"><span class="material-symbols-outlined text-[#ff6b00] group-hover:text-white transition-colors text-xl"></span></div>
|
|
|
<div class="ml-6 lg:ml-0 lg:text-center">
|
|
|
<h4 class="text-lg text-slate-900 mb-2">Benefit Share</h4>
|
|
|
<p class="text-slate-600 text-xs leading-relaxed">Pay only for the solar energy generated at a rate significantly lower than the grid.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section id="trust" class="py-32 bg-background-light border-y border-silver-accent relative overflow-hidden">
|
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-[1200px] h-[600px] bg-gradient-to-b from-primary/10 to-transparent blur-[120px] pointer-events-none"></div>
|
|
|
|
|
|
<div class="container mx-auto px-6 relative z-10">
|
|
|
<div class="text-center mb-20" data-aos="fade-up">
|
|
|
<div class="text-primary font-mono text-sm tracking-widest mb-4 uppercase flex justify-center items-center inline-block px-3 py-1 ">Trust & Service</div>
|
|
|
<h3 class="text-4xl md:text-[2.66rem] text-slate-900 ">Built on Absolute Reliability.</h3>
|
|
|
</div>
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
|
|
|
<div data-aos="fade-right" class="lg:col-span-2 hover-trigger group bg-white border border-silver-accent rounded-[2rem] p-10 md:p-14 hover:border-primary/50 shadow-bento hover:shadow-bento-hover transition-all duration-500 relative overflow-hidden flex flex-col justify-center">
|
|
|
<div class="absolute top-0 right-0 w-full h-1 bg-gradient-to-r from-transparent via-primary/50 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-in-out"></div>
|
|
|
|
|
|
<div class="flex items-center mb-10">
|
|
|
<span class="material-symbols-outlined text-primary text-4xl mr-4"></span>
|
|
|
<div>
|
|
|
<h4 class="text-2xl md:text-3xl text-slate-900">Localized O&M Support</h4>
|
|
|
<p class="text-slate-600 mt-1">24/7/365 lifecycle protection for your energy assets.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 divide-y md:divide-y-0 md:divide-x divide-slate-200">
|
|
|
<div class="pt-6 md:pt-0 md:pr-8 group-hover:pl-2 transition-all duration-300">
|
|
|
<div class="text-4xl font-mono text-slate-800 mb-2 flex items-baseline">2<span class="text-primary text-xl ml-1">H</span></div>
|
|
|
<div class="text-xs text-primary uppercase tracking-widest mb-2 ">Consultation</div>
|
|
|
<p class="text-sm text-slate-600 leading-relaxed">Technical Consultation Response within 2 hours.</p>
|
|
|
</div>
|
|
|
<div class="pt-6 md:pt-0 md:px-8 group-hover:pl-10 transition-all duration-300 delay-75">
|
|
|
<div class="text-4xl font-mono text-slate-800 mb-2 flex items-baseline">24<span class="text-[#ff6b00] text-xl ml-1">H</span></div>
|
|
|
<div class="text-xs text-[#ff6b00] uppercase tracking-widest mb-2 ">Diagnosis</div>
|
|
|
<p class="text-sm text-slate-600 leading-relaxed">Remote Diagnosis & Solution proposition.</p>
|
|
|
</div>
|
|
|
<div class="pt-6 md:pt-0 md:pl-8 group-hover:pl-10 transition-all duration-300 delay-150">
|
|
|
<div class="text-4xl font-mono text-slate-800 mb-2 flex items-baseline">48<span class="text-slate-500 text-xl ml-1">H</span></div>
|
|
|
<div class="text-xs text-slate-500 uppercase tracking-widest mb-2 ">On-Site</div>
|
|
|
<p class="text-sm text-slate-600 leading-relaxed">On-site Engineering Support deployment.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div data-aos="fade-left" class="hover-trigger group bg-white border border-silver-accent rounded-[2rem] p-10 md:p-14 flex flex-col justify-center relative shadow-bento hover:shadow-bento-hover overflow-hidden transition-all duration-500">
|
|
|
<div class="absolute inset-0 bg-gradient-to-br from-slate-50 to-transparent pointer-events-none"></div>
|
|
|
<div class="mb-8 relative z-10">
|
|
|
<span class="material-symbols-outlined text-slate-300 text-4xl mb-4 block"></span>
|
|
|
<h4 class="text-3xl text-slate-900 mb-2">Global Quality Benchmarks</h4>
|
|
|
<p class="text-slate-600 text-sm">Strictest adherence to global standards.</p>
|
|
|
</div>
|
|
|
<div class="flex flex-col gap-4 relative z-10">
|
|
|
<div class="w-full px-5 py-3.5 rounded-xl bg-white border border-silver-accent text-slate-700 font-mono text-sm flex items-center shadow-sm group-hover:border-primary transition-colors"><span class="w-1.5 h-1.5 rounded-full bg-primary mr-3"></span> ISO 9001 : 2015</div>
|
|
|
<div class="w-full px-5 py-3.5 rounded-xl bg-white border border-silver-accent text-slate-700 font-mono text-sm flex items-center shadow-sm group-hover:border-primary transition-colors"><span class="w-1.5 h-1.5 rounded-full bg-primary mr-3"></span> ISO 14001 : 2015</div>
|
|
|
<div class="w-full px-5 py-3.5 rounded-xl bg-white border border-silver-accent text-slate-700 font-mono text-sm flex items-center shadow-sm group-hover:border-[#ff6b00] transition-colors"><span class="w-1.5 h-1.5 rounded-full bg-[#ff6b00] mr-3"></span> ISO 45001 / CE</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div data-aos="fade-up" class="hover-trigger group bg-gradient-to-b from-pearlescent to-white border border-silver-accent rounded-[2rem] shadow-bento p-10 md:p-14 relative overflow-hidden flex flex-col">
|
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[60%] h-[1px] bg-gradient-to-r from-transparent via-primary/30 to-transparent pointer-events-none"></div>
|
|
|
|
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between mb-12 border-b border-slate-200 pb-8 gap-6 pointer-events-none">
|
|
|
<div class="max-w-xl">
|
|
|
<span class="material-symbols-outlined text-slate-300 text-3xl mb-4 block"></span>
|
|
|
<h4 class="text-2xl md:text-3xl text-slate-900 mb-3">Tier-1 Ecosystem</h4>
|
|
|
<p class="text-slate-600 text-sm leading-relaxed relative z-10">Forging Strategic Alliances with Global Leaders in PV manufacturing and inverter technology, backed by our <span id="dynamic-years" class="text-primary font-mono mx-1 border-b border-primary/50"></span>years of industry expertise, ensuring lifecycle performance and uncompromised safety.</p>
|
|
|
</div>
|
|
|
<div class="text-left md:text-right shrink-0">
|
|
|
<div class="text-sm font-mono text-slate-900 ">100%</div>
|
|
|
<div class="text-[10px] text-slate-500 uppercase tracking-widest mt-1">Authentic Component Sourcing</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div data-no-translation class="marquee-container relative w-full overflow-hidden mask-edges-x py-2 cursor-default">
|
|
|
<div class="animate-marquee-x">
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-primary/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">LONGi</span>
|
|
|
</div>
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-primary/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">JA Solar</span>
|
|
|
</div>
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-[#ff6b00]/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">Trina Solar</span>
|
|
|
</div>
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-primary/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">Huawei</span>
|
|
|
</div>
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-[#ff6b00]/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">Sungrow</span>
|
|
|
</div>
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-primary/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-lg font-display text-slate-600 pointer-events-none">Ginlong</span>
|
|
|
</div>
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-primary/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-lg font-display text-slate-600 pointer-events-none">Chint</span>
|
|
|
</div>
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-primary/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-lg font-display text-slate-600 pointer-events-none">GoodWe</span>
|
|
|
</div>
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-primary/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-lg font-display text-slate-600 pointer-events-none">Deye</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-primary/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">LONGi</span>
|
|
|
</div>
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-primary/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">JA Solar</span>
|
|
|
</div>
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-[#ff6b00]/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">Trina Solar</span>
|
|
|
</div>
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-primary/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">Huawei</span>
|
|
|
</div>
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-[#ff6b00]/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">Sungrow</span>
|
|
|
</div>
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-primary/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-lg font-display text-slate-600 pointer-events-none">Ginlong</span>
|
|
|
</div>
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-primary/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-lg font-display text-slate-600 pointer-events-none">Chint</span>
|
|
|
</div>
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-primary/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-lg font-display text-slate-600 pointer-events-none">GoodWe</span>
|
|
|
</div>
|
|
|
<div class="marquee-item h-20 flex justify-center items-center bg-white/80 rounded-xl border border-silver-accent shadow-sm hover:border-primary/50 transition-all duration-300 hover:bg-white">
|
|
|
<span class="text-lg font-display text-slate-600 pointer-events-none">Deye</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section id="cases" class="py-32 bg-aurora overflow-hidden relative">
|
|
|
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-primary/10 blur-[150px] pointer-events-none"></div>
|
|
|
<div class="absolute bottom-0 left-0 w-[500px] h-[500px] bg-[#ff6b00]/10 blur-[150px] pointer-events-none"></div>
|
|
|
|
|
|
<div class="container mx-auto px-6 relative z-10">
|
|
|
<div class="text-center mb-20" data-aos="fade-up">
|
|
|
<div class="text-primary font-mono text-sm tracking-widest mb-4 uppercase flex justify-center items-center inline-block px-3 py-1 ">Success Stories</div>
|
|
|
<h3 class="text-4xl md:text-[2.66rem] text-slate-900 ">Our Portfolio</h3>
|
|
|
</div>
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16">
|
|
|
<div data-aos="fade-right">
|
|
|
<div class="flex items-center justify-between mb-6 border-b border-slate-200 pb-4">
|
|
|
<div class="flex items-center">
|
|
|
<span class="material-symbols-outlined text-primary text-3xl mr-3"></span>
|
|
|
<h4 class="text-3xl text-slate-900">Turnkey EPC</h4>
|
|
|
</div>
|
|
|
<div class="flex space-x-2 relative z-50">
|
|
|
<button id="epc-btn-prev" class="w-10 h-10 rounded-full border border-slate-300 bg-white shadow-sm flex items-center justify-center text-slate-600 hover:border-primary hover:text-primary transition-colors cursor-pointer hover-trigger"><span class="material-symbols-outlined text-sm pointer-events-none"></span></button>
|
|
|
<button id="epc-btn-next" class="w-10 h-10 rounded-full border border-slate-300 bg-white shadow-sm flex items-center justify-center text-slate-600 hover:border-primary hover:text-primary transition-colors cursor-pointer hover-trigger"><span class="material-symbols-outlined text-sm pointer-events-none"></span></button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="swiper epc-swiper rounded-[2rem] overflow-hidden shadow-bento h-[450px]">
|
|
|
<div class="swiper-wrapper">
|
|
|
<div class="swiper-slide hover-trigger group relative bg-black h-full cursor-grab active:cursor-grabbing">
|
|
|
<div class="absolute inset-0 transition-transform duration-700 pointer-events-none group-hover:scale-105">
|
|
|
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_epc5.avif')] bg-cover bg-center opacity-80 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
|
|
|
</div>
|
|
|
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
|
|
|
<div class="flex justify-between items-start">
|
|
|
<span class="px-4 py-1.5 bg-primary text-black text-[10px] rounded-full uppercase tracking-wider shadow-glow">Wind Power</span>
|
|
|
</div>
|
|
|
<div class="mb-6">
|
|
|
<h3 class="text-2xl text-white mb-3 group-hover:text-primary transition-colors leading-tight line-clamp-2 drop-shadow-lg">Yulin’s Wind Frontier: A Global Benchmark</h3>
|
|
|
<p class="text-slate-200 text-sm mb-6 max-w-md line-clamp-3 drop-shadow-md">Proven technical architectures seamlessly aligned with national energy policies to ensure rapid, high-yield grid integration.</p>
|
|
|
<div class="flex space-x-6 border-t border-white/30 pt-4">
|
|
|
<div><div class="text-2xl font-mono text-white drop-shadow-md">100<span class="text-primary text-sm ml-1">MW</span></div><div class="text-[10px] text-slate-300 uppercase tracking-wider mt-1 ">Capacity</div></div>
|
|
|
<div><div class="text-2xl font-mono text-white drop-shadow-md">280<span class="text-primary text-sm ml-1">Days</span></div><div class="text-[10px] text-slate-300 uppercase tracking-wider mt-1 ">Commencement to Grid</div></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="swiper-slide hover-trigger group relative bg-black h-full cursor-grab active:cursor-grabbing">
|
|
|
<div class="absolute inset-0 transition-transform duration-700 pointer-events-none group-hover:scale-105">
|
|
|
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_epc6.avif')] bg-cover bg-center opacity-80 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
|
|
|
</div>
|
|
|
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
|
|
|
<div class="flex justify-between items-start">
|
|
|
<span class="px-4 py-1.5 bg-primary text-black text-[10px] rounded-full uppercase tracking-wider shadow-glow">Dual-Axis Solar</span>
|
|
|
</div>
|
|
|
<div class="mb-6">
|
|
|
<h3 class="text-2xl text-white mb-3 group-hover:text-primary transition-colors leading-tight line-clamp-2 drop-shadow-lg">The Solar Sentinel</h3>
|
|
|
<p class="text-slate-200 text-sm mb-6 max-w-md line-clamp-3 drop-shadow-md">Pioneering dual-axis tracking and high-concentration technology, maximizing energy yields across Southwest China’s largest solar landscape.</p>
|
|
|
<div class="flex space-x-6 border-t border-white/30 pt-4">
|
|
|
<div><div class="text-2xl font-mono text-white drop-shadow-md">50<span class="text-primary text-sm ml-1">MWp</span></div><div class="text-[10px] text-slate-300 uppercase tracking-wider mt-1 ">Capacity</div></div>
|
|
|
<div><div class="text-2xl font-mono text-white drop-shadow-md">210<span class="text-primary text-sm ml-1">Days</span></div><div class="text-[10px] text-slate-300 uppercase tracking-wider mt-1 ">Commencement to Grid</div></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="swiper-slide hover-trigger group relative bg-black h-full cursor-grab active:cursor-grabbing">
|
|
|
<div class="absolute inset-0 transition-transform duration-700 pointer-events-none group-hover:scale-105">
|
|
|
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_epc.avif')] bg-cover bg-center opacity-80 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
|
|
|
</div>
|
|
|
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
|
|
|
<div class="flex justify-between items-start">
|
|
|
<span class="px-4 py-1.5 bg-primary text-black text-[10px] rounded-full uppercase tracking-wider shadow-glow">Grid Integration</span>
|
|
|
</div>
|
|
|
<div class="mb-6">
|
|
|
<h3 class="text-2xl text-white mb-3 group-hover:text-primary transition-colors leading-tight line-clamp-2 drop-shadow-lg">The Grid-Ready Blueprint</h3>
|
|
|
<p class="text-slate-200 text-sm mb-6 max-w-md line-clamp-3 drop-shadow-md">Optimized 110kV substation and localized 35kV collection lines ensuring ultra-fast, seamless connection to the regional power grid.</p>
|
|
|
<div class="flex space-x-6 border-t border-white/30 pt-4">
|
|
|
<div><div class="text-2xl font-mono text-white drop-shadow-md">40<span class="text-primary text-sm ml-1">MW</span></div><div class="text-[10px] text-slate-300 uppercase tracking-wider mt-1 ">Capacity</div></div>
|
|
|
<div><div class="text-2xl font-mono text-white drop-shadow-md">180<span class="text-primary text-sm ml-1">Days</span></div><div class="text-[10px] text-slate-300 uppercase tracking-wider mt-1 ">Commencement to Grid</div></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="swiper-slide hover-trigger group relative bg-black h-full cursor-grab active:cursor-grabbing">
|
|
|
<div class="absolute inset-0 transition-transform duration-700 pointer-events-none group-hover:scale-105">
|
|
|
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_epc1.png')] bg-cover bg-center opacity-80 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
|
|
|
</div>
|
|
|
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
|
|
|
<div class="flex justify-between items-start">
|
|
|
<span class="px-4 py-1.5 bg-primary text-black text-[10px] rounded-full uppercase tracking-wider shadow-glow">Agrivoltaics</span>
|
|
|
</div>
|
|
|
<div class="mb-6">
|
|
|
<h3 class="text-2xl text-white mb-3 group-hover:text-primary transition-colors leading-tight line-clamp-2 drop-shadow-lg">The Green Synergy Blueprint</h3>
|
|
|
<p class="text-slate-200 text-sm mb-6 max-w-md line-clamp-3 drop-shadow-md">Customized panel height and irrigation-friendly design with optimized electrical safety to harmonize solar and agriculture.</p>
|
|
|
<div class="flex space-x-6 border-t border-white/30 pt-4">
|
|
|
<div><div class="text-2xl font-mono text-white drop-shadow-md">70<span class="text-primary text-sm ml-1">MWp</span></div><div class="text-[10px] text-slate-300 uppercase tracking-wider mt-1 ">Capacity</div></div>
|
|
|
<div><div class="text-2xl font-mono text-white drop-shadow-md">245<span class="text-primary text-sm ml-1">Days</span></div><div class="text-[10px] text-slate-300 uppercase tracking-wider mt-1 ">Commencement to Grid</div></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="swiper-pagination epc-pagination z-30"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div data-aos="fade-left" data-aos-delay="100">
|
|
|
<div class="flex items-center justify-between mb-6 border-b border-slate-200 pb-4">
|
|
|
<div class="flex items-center">
|
|
|
<span class="material-symbols-outlined text-[#ff6b00] text-3xl mr-3"></span>
|
|
|
<h4 class="text-3xl text-slate-900">EMC/PPA Contracts</h4>
|
|
|
</div>
|
|
|
<div class="flex space-x-2 relative z-50">
|
|
|
<button id="emc-btn-prev" class="w-10 h-10 rounded-full border border-slate-300 bg-white shadow-sm flex items-center justify-center text-slate-600 hover:border-[#ff6b00] hover:text-[#ff6b00] transition-colors cursor-pointer hover-trigger hover-emc"><span class="material-symbols-outlined text-sm pointer-events-none"></span></button>
|
|
|
<button id="emc-btn-next" class="w-10 h-10 rounded-full border border-slate-300 bg-white shadow-sm flex items-center justify-center text-slate-600 hover:border-[#ff6b00] hover:text-[#ff6b00] transition-colors cursor-pointer hover-trigger hover-emc"><span class="material-symbols-outlined text-sm pointer-events-none"></span></button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="swiper emc-swiper rounded-[2rem] overflow-hidden shadow-bento h-[450px]">
|
|
|
<div class="swiper-wrapper">
|
|
|
<div class="swiper-slide hover-trigger hover-emc group relative bg-black h-full cursor-grab active:cursor-grabbing">
|
|
|
<div class="absolute inset-0 transition-transform duration-700 pointer-events-none group-hover:scale-105">
|
|
|
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_emc2.avif')] bg-cover bg-center opacity-80 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/95 via-black/60 to-transparent"></div>
|
|
|
</div>
|
|
|
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
|
|
|
<div class="flex justify-between items-start">
|
|
|
<span class="px-4 py-1.5 bg-[#ff6b00] text-white text-[10px] rounded-full uppercase tracking-wider shadow-[0_0_10px_rgba(255,107,0,0.5)]">Industrial Park</span>
|
|
|
</div>
|
|
|
<div class="mb-5">
|
|
|
<h3 class="text-2xl text-white mb-2 group-hover:text-[#ff6b00] transition-colors leading-tight line-clamp-2 drop-shadow-lg">10MWp Distributed Solar PV Empowerment</h3>
|
|
|
<p class="text-slate-200 text-sm mb-4 line-clamp-2 drop-shadow-md">Optimizing industrial energy efficiency through a seamless 10MWp solar integration, slashing carbon footprints.</p>
|
|
|
<div class="space-y-3 border-t border-white/20 pt-3">
|
|
|
<div class="flex items-center justify-between">
|
|
|
<span class="text-[11px] text-slate-300 uppercase tracking-wider ">CAPEX Est.</span>
|
|
|
<span class="text-sm font-mono text-white drop-shadow-md">$6.5M - $7.2M</span>
|
|
|
</div>
|
|
|
<div class="flex items-center justify-between">
|
|
|
<span class="text-[11px] text-[#ff6b00] uppercase tracking-wider ">Energy Optimization</span>
|
|
|
<span class="text-sm font-mono text-[#ff6b00] drop-shadow-md">$450k - $600k / Yr</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="swiper-slide hover-trigger hover-emc group relative bg-black h-full cursor-grab active:cursor-grabbing">
|
|
|
<div class="absolute inset-0 transition-transform duration-700 pointer-events-none group-hover:scale-105">
|
|
|
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_emc3.avif')] bg-cover bg-center opacity-80 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/95 via-black/60 to-transparent"></div>
|
|
|
</div>
|
|
|
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
|
|
|
<div class="flex justify-between items-start">
|
|
|
<span class="px-4 py-1.5 bg-[#ff6b00] text-white text-[10px] rounded-full uppercase tracking-wider shadow-[0_0_10px_rgba(255,107,0,0.5)]">Tier-1 Hub</span>
|
|
|
</div>
|
|
|
<div class="mb-5">
|
|
|
<h3 class="text-2xl text-white mb-2 group-hover:text-[#ff6b00] transition-colors leading-tight line-clamp-2 drop-shadow-lg">5.2MWp High-Efficiency PV System</h3>
|
|
|
<p class="text-slate-200 text-sm mb-4 line-clamp-2 drop-shadow-md">Empowering a global Tier-1 manufacturer with sustainable energy, ensuring significant carbon reduction.</p>
|
|
|
<div class="space-y-3 border-t border-white/20 pt-3">
|
|
|
<div class="flex items-center justify-between">
|
|
|
<span class="text-[11px] text-slate-300 uppercase tracking-wider ">Client CAPEX</span>
|
|
|
<span class="text-sm font-mono text-white drop-shadow-md">$3.6M <span class="text-xs text-slate-400 font-sans font-normal">(Fully Funded)</span></span>
|
|
|
</div>
|
|
|
<div class="flex items-center justify-between">
|
|
|
<span class="text-[11px] text-[#ff6b00] uppercase tracking-wider ">Energy Optimization</span>
|
|
|
<span class="text-sm font-mono text-[#ff6b00] drop-shadow-md">15% - 20% <span class="text-xs text-[#ff6b00]/70 font-sans font-normal">Annual Savings</span></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="swiper-slide hover-trigger hover-emc group relative bg-black h-full cursor-grab active:cursor-grabbing">
|
|
|
<div class="absolute inset-0 transition-transform duration-700 pointer-events-none group-hover:scale-105">
|
|
|
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_emc1.avif')] bg-cover bg-center opacity-80 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/95 via-black/60 to-transparent"></div>
|
|
|
</div>
|
|
|
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
|
|
|
<div class="flex justify-between items-start">
|
|
|
<span class="px-4 py-1.5 bg-[#ff6b00] text-white text-[10px] rounded-full uppercase tracking-wider shadow-[0_0_10px_rgba(255,107,0,0.5)]">Logistics Park</span>
|
|
|
</div>
|
|
|
<div class="mb-5">
|
|
|
<h3 class="text-2xl text-white mb-2 group-hover:text-[#ff6b00] transition-colors leading-tight line-clamp-2 drop-shadow-lg">4.99MWp Rooftop PV Project</h3>
|
|
|
<p class="text-slate-200 text-sm mb-4 line-clamp-2 drop-shadow-md">Transforming expansive logistics rooftops into high-yield green assets for modern industrial infrastructure.</p>
|
|
|
<div class="space-y-3 border-t border-white/20 pt-3">
|
|
|
<div class="flex items-center justify-between">
|
|
|
<span class="text-[11px] text-slate-300 uppercase tracking-wider ">Client CAPEX</span>
|
|
|
<span class="text-sm font-mono text-white drop-shadow-md">$3.2M <span class="text-xs text-slate-400 font-sans font-normal">(Zero Upfront)</span></span>
|
|
|
</div>
|
|
|
<div class="flex items-center justify-between">
|
|
|
<span class="text-[11px] text-[#ff6b00] uppercase tracking-wider ">Energy Optimization</span>
|
|
|
<span class="text-sm font-mono text-[#ff6b00] drop-shadow-md">12% - 18% <span class="text-xs text-[#ff6b00]/70 font-sans font-normal">Annual Discount</span></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="swiper-slide hover-trigger hover-emc group relative bg-black h-full cursor-grab active:cursor-grabbing">
|
|
|
<div class="absolute inset-0 transition-transform duration-700 pointer-events-none group-hover:scale-105">
|
|
|
<div class="absolute inset-0 bg-[url('https://nenghui.com/wp-content/uploads/2026/03/contact-us_emc4.avif')] bg-cover bg-center opacity-80 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/95 via-black/60 to-transparent"></div>
|
|
|
</div>
|
|
|
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
|
|
|
<div class="flex justify-between items-start">
|
|
|
<span class="px-4 py-1.5 bg-[#ff6b00] text-white text-[10px] rounded-full uppercase tracking-wider shadow-[0_0_10px_rgba(255,107,0,0.5)]">Manufacturing</span>
|
|
|
</div>
|
|
|
<div class="mb-5">
|
|
|
<h3 class="text-2xl text-white mb-2 group-hover:text-[#ff6b00] transition-colors leading-tight line-clamp-2 drop-shadow-lg">5.86MWp Integrated PV Solution</h3>
|
|
|
<p class="text-slate-200 text-sm mb-4 line-clamp-2 drop-shadow-md">Driving sustainable manufacturing with a high-capacity solar array, significantly lowering energy overheads.</p>
|
|
|
<div class="space-y-3 border-t border-white/20 pt-3">
|
|
|
<div class="flex items-center justify-between">
|
|
|
<span class="text-[11px] text-slate-300 uppercase tracking-wider ">Client CAPEX</span>
|
|
|
<span class="text-sm font-mono text-white drop-shadow-md">$4.1M <span class="text-xs text-slate-400 font-sans font-normal">(Zero Upfront)</span></span>
|
|
|
</div>
|
|
|
<div class="flex items-center justify-between">
|
|
|
<span class="text-[11px] text-[#ff6b00] uppercase tracking-wider ">Energy Optimization</span>
|
|
|
<span class="text-sm font-mono text-[#ff6b00] drop-shadow-md">15% - 22% <span class="text-xs text-[#ff6b00]/70 font-sans font-normal">Annual Reduction</span></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="swiper-pagination emc-pagination z-30"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section id="contact" class="py-24 relative bg-liquid-gradient">
|
|
|
<div class="container mx-auto px-6 text-center z-10 relative" data-aos="zoom-in">
|
|
|
<h2 class="text-4xl md:text-[2.66rem] text-slate-900 mb-8 drop-shadow-sm">Ready to Decarbonize?</h2>
|
|
|
<p class="text-[1rem] text-slate-600 mb-10 max-w-2xl mx-auto">Whether you are looking for a Turnkey EPC build or a Zero-CAPEX EMC/PPA partnership, our engineering teams are ready to assess your site.</p>
|
|
|
<div class="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6">
|
|
|
<a href="/contact-us" class="magnetic-btn hover-trigger bg-primary text-black px-12 py-5 rounded-full text-lg shadow-sm hover:shadow-[0_0_40px_rgba(19,236,164,0.4)] transition-all flex items-center justify-center">
|
|
|
<span class="material-symbols-outlined mr-2 pointer-events-none"></span> <span class="pointer-events-none">Connect with Local Experts</span>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
|
|
|
|
|
|
<script>
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
// 动态计算公司成立年份
|
|
|
const calculateYearsOfExperience = () => {
|
|
|
const startYear = 2009;
|
|
|
const currentYear = new Date().getFullYear();
|
|
|
const yearsOfExperience = currentYear - startYear;
|
|
|
|
|
|
const yearElement = document.getElementById('dynamic-years');
|
|
|
if (yearElement) {
|
|
|
yearElement.textContent = yearsOfExperience + "+ ";
|
|
|
}
|
|
|
};
|
|
|
calculateYearsOfExperience();
|
|
|
|
|
|
// 1. 初始化 AOS & Tilt
|
|
|
if(typeof AOS !== 'undefined') AOS.init({ duration: 800, once: true, offset: 50 });
|
|
|
if(typeof VanillaTilt !== 'undefined') VanillaTilt.init(document.querySelectorAll("[data-tilt]"), { max: 5, speed: 400, glare: true, "max-glare": 0.05, scale: 1.02 });
|
|
|
|
|
|
// 2. 双轨流程切换交互 (Tab Workflows) - 针对亮色系修正文字颜色反馈
|
|
|
const btnEpc = document.getElementById('btn-epc');
|
|
|
const btnEmc = document.getElementById('btn-emc');
|
|
|
const contentEpc = document.getElementById('content-epc');
|
|
|
const contentEmc = document.getElementById('content-emc');
|
|
|
const slider = document.getElementById('tab-slider');
|
|
|
|
|
|
const switchTab = (tab) => {
|
|
|
if (tab === 'epc') {
|
|
|
btnEpc.classList.add('text-slate-900');
|
|
|
btnEpc.classList.remove('text-slate-500');
|
|
|
btnEmc.classList.remove('text-slate-900');
|
|
|
btnEmc.classList.add('text-slate-500');
|
|
|
|
|
|
slider.style.transition = 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)';
|
|
|
slider.style.transform = 'translateX(0)';
|
|
|
slider.style.backgroundColor = '#13eca4';
|
|
|
|
|
|
contentEmc.classList.remove('active');
|
|
|
contentEpc.classList.add('active');
|
|
|
} else {
|
|
|
btnEmc.classList.add('text-slate-900');
|
|
|
btnEmc.classList.remove('text-slate-500');
|
|
|
btnEpc.classList.remove('text-slate-900');
|
|
|
btnEpc.classList.add('text-slate-500');
|
|
|
|
|
|
slider.style.transition = 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)';
|
|
|
slider.style.transform = 'translateX(100%)';
|
|
|
slider.style.backgroundColor = '#ff6b00';
|
|
|
|
|
|
contentEpc.classList.remove('active');
|
|
|
contentEmc.classList.add('active');
|
|
|
}
|
|
|
};
|
|
|
if(btnEpc) btnEpc.addEventListener('click', () => switchTab('epc'));
|
|
|
if(btnEmc) btnEmc.addEventListener('click', () => switchTab('emc'));
|
|
|
|
|
|
// 4. 自定义光标
|
|
|
const cursor = document.getElementById('energy-cursor');
|
|
|
const hoverTriggers = document.querySelectorAll('a, button, .hover-trigger');
|
|
|
|
|
|
if (window.innerWidth > 768 && cursor) {
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
|
requestAnimationFrame(() => {
|
|
|
cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
|
|
|
});
|
|
|
});
|
|
|
hoverTriggers.forEach(el => {
|
|
|
el.addEventListener('mouseenter', () => {
|
|
|
if(el.classList.contains('hover-emc')) cursor.classList.add('active-emc');
|
|
|
else cursor.classList.add('active');
|
|
|
});
|
|
|
el.addEventListener('mouseleave', () => cursor.classList.remove('active', 'active-emc'));
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 5. 磁性按钮
|
|
|
const magneticBtns = document.querySelectorAll('.magnetic-btn');
|
|
|
magneticBtns.forEach(btn => {
|
|
|
btn.addEventListener('mousemove', (e) => {
|
|
|
const rect = btn.getBoundingClientRect();
|
|
|
const x = (e.clientX - rect.left - rect.width / 2) * 0.3;
|
|
|
const y = (e.clientY - rect.top - rect.height / 2) * 0.3;
|
|
|
btn.style.transform = `translate(${x}px, ${y}px)`;
|
|
|
});
|
|
|
btn.addEventListener('mouseleave', () => {
|
|
|
btn.style.transform = `translate(0px, 0px)`;
|
|
|
btn.style.transition = `transform 0.5s ease-out`;
|
|
|
});
|
|
|
btn.addEventListener('mouseenter', () => btn.style.transition = `none`);
|
|
|
});
|
|
|
|
|
|
// 6. 视差背景
|
|
|
const parallaxContainer = document.querySelector('.parallax-container');
|
|
|
const parallaxBgs = document.querySelectorAll('.parallax-bg');
|
|
|
if (parallaxContainer && window.innerWidth > 768) {
|
|
|
parallaxContainer.addEventListener('mousemove', (e) => {
|
|
|
const x = (e.clientX - window.innerWidth / 2);
|
|
|
const y = (e.clientY - window.innerHeight / 2);
|
|
|
parallaxBgs.forEach(bg => {
|
|
|
const speed = bg.getAttribute('data-speed');
|
|
|
bg.style.transform = `translate(${x * speed}px, ${y * speed}px)`;
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 8. Swiper 左右画中画初始化
|
|
|
if (typeof Swiper !== 'undefined') {
|
|
|
const commonConfig = {
|
|
|
slidesPerView: 1,
|
|
|
loop: true,
|
|
|
effect: 'fade',
|
|
|
fadeEffect: { crossFade: true },
|
|
|
speed: 800,
|
|
|
grabCursor: true,
|
|
|
};
|
|
|
|
|
|
new Swiper('.epc-swiper', {
|
|
|
...commonConfig,
|
|
|
autoplay: { delay: 4500, disableOnInteraction: false, pauseOnMouseEnter: true },
|
|
|
pagination: { el: ".epc-pagination", clickable: true },
|
|
|
navigation: { nextEl: '#epc-btn-next', prevEl: '#epc-btn-prev' }
|
|
|
});
|
|
|
|
|
|
new Swiper('.emc-swiper', {
|
|
|
...commonConfig,
|
|
|
autoplay: { delay: 5500, disableOnInteraction: false, pauseOnMouseEnter: true },
|
|
|
pagination: { el: ".emc-pagination", clickable: true },
|
|
|
navigation: { nextEl: '#emc-btn-next', prevEl: '#emc-btn-prev' }
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
