huyuanxiang
/
official-website-abroad
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: huyuanxiang:1ffc0e9be661baee0fc04e775685dd79589ec6b6
Branches Tags
huyuanxiang:dev-about
huyuanxiang:dev
huyuanxiang:main
..
compare: huyuanxiang:720866e0423916dbddd881eb7008bdc6d1c7ba41
Branches Tags
huyuanxiang:dev-about
huyuanxiang:dev
huyuanxiang:main

No commits in common. '1ffc0e9be661baee0fc04e775685dd79589ec6b6' and '720866e0423916dbddd881eb7008bdc6d1c7ba41' have entirely different histories.
1ffc0e9be6 ... 720866e042

16 changed files with 2291 additions and 1869 deletions
Show Stats

564
html/Microgrids.html
Unescape View File

@ -8,11 +8,13 @@
<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/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com" rel="preconnect"/> <link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.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 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 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"> <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://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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config"> <script id="tailwind-config">
tailwind.config = { tailwind.config = {
@ -21,12 +23,11 @@
extend: { extend: {
colors: { colors: {
"primary": "#13eca4", "primary": "#13eca4",
"primary-dark": "#0da670", // Added for contrast on light mode
"background-light": "#f8fcfa", "background-light": "#f8fcfa",
"background-dark": "#10221c", "background-dark": "#10221c",
"pearlescent": "#f0f7f5", "pearlescent": "#f0f7f5",
"silver-accent": "#e2e8f0", "silver-accent": "#e2e8f0",
"accent": "#ff6b00" "about-us": "#ff6b00"
}, },
fontFamily: { fontFamily: {
"display": ["Montserrat", "sans-serif"], "display": ["Montserrat", "sans-serif"],
@ -34,72 +35,131 @@
"mono": ["JetBrains Mono", "Montserrat"], "mono": ["JetBrains Mono", "Montserrat"],
"inter": ["Inter", "Montserrat"], "inter": ["Inter", "Montserrat"],
}, },
borderRadius: {
"DEFAULT": "0.5rem",
"lg": "1rem",
"xl": "1.5rem",
"2xl": "2rem",
"3xl": "3rem",
"full": "9999px"
},
backgroundImage: { backgroundImage: {
'liquid-gradient': 'linear-gradient(135deg, #f8fcfa 0%, #e8f5f1 50%, #dcfce7 100%)', 'liquid-gradient': 'linear-gradient(135deg, #f8fcfa 0%, #e8f5f1 50%, #dcfce7 100%)',
'glass-gradient': 'linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 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.15) 0%, rgba(13,166,112,0.08) 50%, rgba(248,252,250,0) 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: { boxShadow: {
// 将光效统一映射为 primary 颜色 (13eca4 的 RGBA)
'glow': '0 0 20px rgba(19, 236, 164, 0.4)', 'glow': '0 0 20px rgba(19, 236, 164, 0.4)',
'bento': '0 20px 40px -15px rgba(0,0,0,0.05), 0 0 0 1px rgba(255,255,255,0.6)', 'glow-lg': '0 10px 30px rgba(19, 236, 164, 0.4)',
'bento-hover': '0 30px 60px -20px rgba(19,236,164,0.25), 0 0 0 1px rgba(19,236,164,0.5)', 'bento': '0 20px 40px -15px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.02)',
'glass': '0 8px 32px 0 rgba(13, 166, 112, 0.1)', '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: { keyframes: {
fadeIn: { fadeIn: {
'0%': { opacity: '0', transform: 'translateY(10px)' }, '0%': { opacity: '0', transform: 'translateY(10px)' },
'100%': { opacity: '1', transform: 'translateY(0)' }, '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: { dash: {
'0%': { strokeDashoffset: '1000' }, '0%': { strokeDashoffset: '1000' },
'100%': { strokeDashoffset: '0' }, '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: { animation: {
'fade-in': 'fadeIn 0.5s ease-out forwards', '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', '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> </script>
</head> </head>
<body class="bg-liquid-gradient text-background-dark font-sans antialiased overflow-x-hidden selection:bg-primary selection:text-white min-h-screen"> <body class="bg-[#0a0f0d] text-gray-200 font-sans antialiased overflow-x-hidden selection:bg-[#ff8c00] selection:text-white">
<!-- Three.js Canvas Container --> <div id="canvas-container" class="fixed inset-0 z-0 pointer-events-none opacity-90"></div>
<div id="canvas-container" class="fixed inset-0 z-0 pointer-events-none opacity-80"></div> <div class="fixed inset-0 bg-gradient-to-t from-[#0a0f0d] via-[#0a0f0d]/50 to-transparent z-0 pointer-events-none"></div>
<div class="fixed inset-0 bg-gradient-to-t from-background-light via-background-light/40 to-transparent z-0 pointer-events-none"></div>
<main class="relative z-10 mx-auto "> <main class="relative z-10 max-w-[1200px] mx-auto px-6">
<!-- === Hero Section === -->
<section id="mod-hero" class="min-h-screen flex flex-col justify-center text-center"> <section id="mod-hero" class="min-h-screen flex flex-col justify-center text-center">
<span class="text-primary font-mono text-sm tracking-[0.3em] uppercase mb-6 " data-aos="fade-down"> <span class="text-[#ff8c00] font-mono text-sm tracking-[0.3em] uppercase mb-6" data-aos="fade-down">
Smart Energy System Smart Energy System
</span> </span>
<h1 class="text-4xl md:text-[2.66rem] leading-tight tracking-tighter text-background-dark mb-8 drop-shadow-sm" data-aos="zoom-in"> <h1 class="text-4xl md:text-[2.66rem] leading-none tracking-tighter text-white mb-8 drop-shadow-2xl" data-aos="zoom-in">
INTEGRATED INDEPENDENT INTEGRATED INDEPENDENT
<span class="text-primary">INTELLIGENT.</span> <span class="text-[#13eca4]">INTELLIGENT.</span>
</h1> </h1>
<p class="text-[1rem] text-background-dark/70 font-medium max-w-4xl mx-auto leading-relaxed md:text-center" data-aos="fade-up"> <p class="text-[1rem] text-gray-400 font-light max-w-4xl mx-auto leading-relaxed md:text-center" data-aos="fade-up">
The Next Generation of Microgrid Solutions Empowering industrial parks and zero-carbon communities with seamless, green, and autonomous energy. The Next Generation of Microgrid Solutions Empowering industrial parks and zero-carbon communities with seamless, green, and autonomous energy.
</p> </p>
</section> </section>
<!-- === 系统拓扑图模块 === --> <!-- === 新增：系统拓扑图模块 === -->
<section id="mod-topology" class="min-h-screen flex flex-col justify-center items-center text-center py-24 relative z-10 overflow-hidden"> <section id="mod-topology" class="min-h-screen flex flex-col justify-center items-center text-center py-24 relative z-10 overflow-hidden bg-[#020504]/50">
<!-- 明亮网格背景 --> <div class="absolute inset-0 z-0 opacity-[0.15] pointer-events-none hex-bg"></div>
<div class="absolute inset-0 z-0 opacity-[0.4] pointer-events-none hex-bg"></div> <div class="absolute inset-0 z-0 opacity-[0.1] pointer-events-none" style="background-image: linear-gradient(rgba(19,236,164,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(19,236,164,0.1) 1px, transparent 1px); background-size: 60px 60px; transform: perspective(800px) rotateX(60deg) scale(2.5) translateY(-50px); transform-origin: top center;"></div>
<div class="absolute inset-0 z-0 opacity-[0.5] pointer-events-none" style="background-image: linear-gradient(rgba(19,236,164,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(19,236,164,0.2) 1px, transparent 1px); background-size: 60px 60px; transform: perspective(800px) rotateX(60deg) scale(2.5) translateY(-50px); transform-origin: top center;"></div>
<style> <style>
.hex-bg { background-image: url("data:image/svg+xml,%3Csvg width='24' height='40' viewBox='0 0 24 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10L12 3l12 7v14l-12 7-12-7V10z' stroke='rgba(13,166,112,0.1)' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); } /* 样式部分完全保留你的原始代码 */
.hex-bg { background-image: url("data:image/svg+xml,%3Csvg width='24' height='40' viewBox='0 0 24 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10L12 3l12 7v14l-12 7-12-7V10z' stroke='rgba(19,236,164,0.05)' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.cyber-clip { clip-path: polygon(0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%); } .cyber-clip { clip-path: polygon(0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%); }
.cyber-hub { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); } .cyber-hub { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
.tilt-card { transform-style: preserve-3d; will-change: transform; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale3d(1, 1, 1); transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.4s ease; } .tilt-card { transform-style: preserve-3d; will-change: transform; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale3d(1, 1, 1); transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.4s ease; }
.tilt-card.reset { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.4s ease; } .tilt-card.reset { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.4s ease; }
.svg-circuit-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .svg-circuit-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flow-packet { stroke-dasharray: 15, 150; animation: dashFlow 3s linear infinite; } .flow-packet { stroke-dasharray: 15, 150; animation: dashFlow 3s linear infinite; }
@keyframes dashFlow { 0% { stroke-dashoffset: 165; } 100% { stroke-dashoffset: 0; } } @keyframes dashFlow { 0% { stroke-dashoffset: 165; } 100% { stroke-dashoffset: 0; } }
.layer-stats { opacity: 1; transition: opacity 0.3s ease, transform 0.3s ease; transform: translateY(0); } .layer-stats { opacity: 1; transition: opacity 0.3s ease, transform 0.3s ease; transform: translateY(0); }
@ -109,335 +169,362 @@
</style> </style>
<div class="relative z-30 mb-20" data-aos="fade-down"> <div class="relative z-30 mb-20" data-aos="fade-down">
<h2 class="text-4xl md:text-[2.66rem] mb-4 uppercase tracking-[0.2em] text-background-dark flex items-center justify-center gap-4"> <h2 class="text-4xl md:text-[2.66rem] mb-4 uppercase tracking-[0.2em] text-white flex items-center justify-center gap-4 drop-shadow-lg">
CORE ARCHITECTURE OF MICROGRID SYSTEM <!-- <span class="text-[#13eca4] opacity-50 font-light">&lt;</span> -->
Core Architecture of Microgrid System
<!-- <span class="text-[#13eca4] opacity-50 font-light">&gt;</span> -->
</h2> </h2>
<div class="flex items-center justify-center gap-4 text-primary font-mono text-xs tracking-[0.4em] "> <div class="flex items-center justify-center gap-4 text-[#13eca4] font-mono text-xs tracking-[0.4em]">
<span class="w-8 h-[2px] bg-gradient-to-r from-transparent to-primary-dark"></span> <span class="w-8 h-[1px] bg-gradient-to-r from-transparent to-[#13eca4]"></span>
INTELLIGENT MICROGRID NETWORK INTELLIGENT MICROGRID NETWORK
<span class="w-8 h-[2px] bg-gradient-to-l from-transparent to-primary-dark"></span> <span class="w-8 h-[1px] bg-gradient-to-l from-transparent to-[#13eca4]"></span>
</div> </div>
</div> </div>
<div class="relative w-full max-w-[1400px] mx-auto z-30 flex items-center justify-center px-10 lg:px-20 min-h-[500px]"> <div class="relative w-full max-w-[1400px] mx-auto z-30 flex items-center justify-center px-10 lg:px-20 min-h-[500px]">
<div class="hidden lg:block absolute inset-0 z-0 pointer-events-none"> <div class="hidden lg:block absolute inset-0 z-0 pointer-events-none">
<svg class="w-full h-full drop-shadow-[0_0_8px_rgba(19,236,164,0.4)]" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1400 500"> <svg class="w-full h-full drop-shadow-[0_0_8px_rgba(19,236,164,0.6)]" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1400 500">
<path d="M 380 130 L 450 130 Q 480 130 480 160 L 480 250 L 550 250" class="svg-circuit-line stroke-primary/30" /> <path d="M 380 130 L 450 130 Q 480 130 480 160 L 480 250 L 550 250" class="svg-circuit-line stroke-[#13eca4]/20" />
<path d="M 380 130 L 450 130 Q 480 130 480 160 L 480 250 L 550 250" class="svg-circuit-line stroke-primary-dark flow-packet" /> <path d="M 380 130 L 450 130 Q 480 130 480 160 L 480 250 L 550 250" class="svg-circuit-line stroke-[#13eca4] flow-packet" />
<path d="M 380 370 L 450 370 Q 480 370 480 340 L 480 250 L 550 250" class="svg-circuit-line stroke-accent/30" /> <path d="M 380 370 L 450 370 Q 480 370 480 340 L 480 250 L 550 250" class="svg-circuit-line stroke-[#ff8c00]/20" />
<path d="M 380 370 L 450 370 Q 480 370 480 340 L 480 250 L 550 250" class="svg-circuit-line stroke-accent flow-packet" style="animation-duration: 2.5s; animation-direction: reverse;" /> <path d="M 380 370 L 450 370 Q 480 370 480 340 L 480 250 L 550 250" class="svg-circuit-line stroke-[#ff8c00] flow-packet" style="animation-duration: 2.5s; animation-direction: reverse; filter: drop-shadow(0 0 8px #ff8c00);" />
<path d="M 850 250 L 1020 250" class="svg-circuit-line stroke-primary/30" /> <path d="M 850 250 L 1020 250" class="svg-circuit-line stroke-white/20" />
<path d="M 850 250 L 1020 250" class="svg-circuit-line stroke-primary-dark flow-packet" style="stroke-dasharray: 20, 100; animation-duration: 1.5s;" /> <path d="M 850 250 L 1020 250" class="svg-circuit-line stroke-white flow-packet" style="stroke-dasharray: 20, 100; animation-duration: 1.5s; filter: drop-shadow(0 0 8px #fff);" />
</svg> </svg>
</div> </div>
<div class="grid grid-cols-1 lg:grid-cols-[minmax(300px,1.2fr)_auto_minmax(300px,1.2fr)] gap-8 lg:gap-16 w-full relative z-10 items-center"> <div class="grid grid-cols-1 lg:grid-cols-[minmax(300px,1.2fr)_auto_minmax(300px,1.2fr)] gap-8 lg:gap-16 w-full relative z-10 items-center">
<div class="flex flex-col gap-8 relative z-10"> <div class="flex flex-col gap-8 relative z-10">
<!-- Card 1 --> <div class="tilt-card relative bg-[#060d0a]/90 backdrop-blur-md border border-[#13eca4]/20 p-8 cyber-clip cursor-pointer hover:border-[#13eca4]/80 shadow-xl text-left w-full lg:w-[290px] ml-auto group">
<div class="tilt-card relative bg-white/70 backdrop-blur-xl border border-white p-8 cyber-clip cursor-pointer hover:border-primary/50 shadow-glass text-left w-full lg:w-[290px] ml-auto group">
<div class="flex items-start justify-between mb-6 relative z-10"> <div class="flex items-start justify-between mb-6 relative z-10">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="w-12 h-12 bg-primary/10 rounded flex items-center justify-center border border-primary/30 text-primary group-hover:bg-primary group-hover:text-white transition-colors duration-300 shadow-sm"> <div class="w-12 h-12 bg-[#13eca4]/10 rounded flex items-center justify-center border border-[#13eca4]/40 text-[#13eca4] group-hover:bg-[#13eca4] group-hover:text-black transition-colors duration-300">
<span class="material-symbols-outlined text-2xl">&#xec0f;</span> <span class="material-symbols-outlined text-2xl">&#xec0f;</span>
</div> </div>
<div> <div>
<h3 class="text-xl text-background-dark tracking-wide">Power Gen</h3> <h3 class="text-xl text-white tracking-wider">Power Generation</h3>
<div class="text-[10px] text-primary font-mono mt-1 ">NODE: GEN_01</div> <div class="text-[10px] text-[#13eca4] font-mono mt-1 opacity-70">NODE_TYPE: GEN_01</div>
</div> </div>
</div> </div>
</div> </div>
<div class="relative h-[80px] w-full"> <div class="relative h-[80px] w-full">
<div class="layer-stats absolute inset-0 w-full grid grid-cols-2 gap-3 font-mono text-xs"> <div class="layer-stats absolute inset-0 w-full grid grid-cols-2 gap-3 font-mono text-xs">
<div class="bg-primary/5 border border-primary/20 p-3 text-primary flex flex-col justify-center rounded-sm"> <div class="bg-[#13eca4]/10 border border-[#13eca4]/20 p-3 text-[#13eca4] flex flex-col justify-center">
<span class="text-background-dark/50 text-[10px] mb-1 ">VOLTAGE OUT</span> <span class="text-white/50 text-[10px] mb-1">VOLTAGE OUT</span>
<span class="text-base ">400V DC</span> <span class="text-base">400V DC</span>
</div> </div>
<div class="bg-primary/5 border border-primary/20 p-3 text-primary flex flex-col justify-center rounded-sm"> <div class="bg-[#13eca4]/10 border border-[#13eca4]/20 p-3 text-[#13eca4] flex flex-col justify-center">
<span class="text-background-dark/50 text-[10px] mb-1 ">STATUS</span> <span class="text-white/50 text-[10px] mb-1">STATUS</span>
<span class="text-base animate-pulse">STABLE</span> <span class="text-base text-[#13eca4] animate-pulse">STABLE</span>
</div> </div>
</div> </div>
<div class="layer-text absolute inset-0 w-full overflow-hidden"> <div class="layer-text absolute inset-0 w-full overflow-hidden">
<p class="decrypt-text text-[13px] text-background-dark/70 font-medium leading-relaxed" data-target="Harnessing renewable and conventional energy for consistent supply.">>_ Awaiting command...</p> <p class="decrypt-text text-[13px] text-gray-300 leading-relaxed font-light" data-target="Harnessing renewable and conventional energy for consistent supply.">>_ Awaiting command...</p>
</div> </div>
</div> </div>
<div class="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-primary/40 group-hover:border-primary-dark transition-colors m-1"></div> <div class="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-[#13eca4]/30 group-hover:border-[#13eca4] transition-colors m-1"></div>
</div> </div>
<!-- Card 2 --> <div class="tilt-card relative bg-[#060d0a]/90 backdrop-blur-md border border-[#ff8c00]/20 p-8 cyber-clip cursor-pointer hover:border-[#ff8c00]/80 shadow-xl text-left w-full lg:w-[290px] ml-auto group">
<div class="tilt-card relative bg-white/70 backdrop-blur-xl border border-white p-8 cyber-clip cursor-pointer hover:border-accent/50 shadow-glass text-left w-full lg:w-[290px] ml-auto group">
<div class="flex items-start justify-between mb-6 relative z-10"> <div class="flex items-start justify-between mb-6 relative z-10">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="w-12 h-12 bg-accent/10 rounded flex items-center justify-center border border-accent/30 text-accent group-hover:bg-accent group-hover:text-white transition-colors duration-300 shadow-sm"> <div class="w-12 h-12 bg-[#ff8c00]/10 rounded flex items-center justify-center border border-[#ff8c00]/40 text-[#ff8c00] group-hover:bg-[#ff8c00] group-hover:text-black transition-colors duration-300">
<span class="material-symbols-outlined text-2xl">&#xe1a3;</span> <span class="material-symbols-outlined text-2xl">&#xe1a3;</span>
</div> </div>
<div> <div>
<h3 class="text-xl text-background-dark tracking-wide">Energy Storage</h3> <h3 class="text-xl text-white tracking-wider">Energy Storage</h3>
<div class="text-[10px] text-accent font-mono mt-1 ">NODE: BATT_X</div> <div class="text-[10px] text-[#ff8c00] font-mono mt-1 opacity-70">NODE_TYPE: BATT_X</div>
</div> </div>
</div> </div>
</div> </div>
<div class="relative h-[80px] w-full"> <div class="relative h-[80px] w-full">
<div class="layer-stats absolute inset-0 w-full grid grid-cols-2 gap-3 font-mono text-xs"> <div class="layer-stats absolute inset-0 w-full grid grid-cols-2 gap-3 font-mono text-xs">
<div class="bg-accent/5 border border-accent/20 p-3 text-accent flex flex-col justify-center rounded-sm"> <div class="bg-[#ff8c00]/10 border border-[#ff8c00]/20 p-3 text-[#ff8c00] flex flex-col justify-center">
<span class="text-background-dark/50 text-[10px] mb-1 ">CAPACITY</span> <span class="text-white/50 text-[10px] mb-1">CAPACITY</span>
<span class="text-base ">500 kWh</span> <span class="text-base">500 kWh</span>
</div> </div>
<div class="bg-accent/5 border border-accent/20 p-3 text-accent flex flex-col justify-center rounded-sm"> <div class="bg-[#ff8c00]/10 border border-[#ff8c00]/20 p-3 text-[#ff8c00] flex flex-col justify-center">
<span class="text-background-dark/50 text-[10px] mb-1 ">MODE</span> <span class="text-white/50 text-[10px] mb-1">MODE</span>
<span class="text-base animate-pulse">CHARGE</span> <span class="text-base text-[#ff8c00] animate-pulse">CHARGE</span>
</div> </div>
</div> </div>
<div class="layer-text absolute inset-0 w-full overflow-hidden"> <div class="layer-text absolute inset-0 w-full overflow-hidden">
<p class="decrypt-text text-[13px] text-background-dark/70 font-medium leading-relaxed" data-target="Storing surplus electricity to stabilize the grid day and night.">>_ Interfacing...</p> <p class="decrypt-text text-[13px] text-gray-300 leading-relaxed font-light" data-target="Storing surplus electricity to stabilize the grid day and night.">>_ Interfacing...</p>
</div> </div>
</div> </div>
<div class="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-accent/40 group-hover:border-accent transition-colors m-1"></div> <div class="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-[#ff8c00]/30 group-hover:border-[#ff8c00] transition-colors m-1"></div>
</div> </div>
</div> </div>
<!-- Central Hub -->
<div class="flex justify-center items-center relative z-20 mx-4 py-8 lg:py-0"> <div class="flex justify-center items-center relative z-20 mx-4 py-8 lg:py-0">
<div class="relative flex flex-col items-center justify-center p-12 bg-white/80 backdrop-blur-2xl border-2 border-white cyber-hub hover:border-primary/50 transition-all duration-500 w-[300px] h-[360px] shadow-glass group"> <div class="relative flex flex-col items-center justify-center p-12 bg-[#020504]/90 backdrop-blur-lg border border-[#13eca4]/30 cyber-hub hover:border-[#13eca4] transition-all duration-500 w-[300px] h-[360px] shadow-[0_0_30px_rgba(19,236,164,0.05)] group">
<div class="relative w-32 h-32 flex items-center justify-center mb-8"> <div class="relative w-32 h-32 flex items-center justify-center mb-8">
<div class="absolute inset-0 rounded-full border border-dashed border-primary-dark/40 animate-[spin_10s_linear_infinite]"></div> <div class="absolute inset-0 rounded-full border border-dashed border-[#13eca4]/30 animate-[spin_10s_linear_infinite]"></div>
<div class="absolute inset-2 rounded-full border-t-4 border-primary/80 animate-[spin_3s_linear_infinite]"></div> <div class="absolute inset-2 rounded-full border-t-2 border-[#13eca4]/60 animate-[spin_3s_linear_infinite]"></div>
<div class="absolute inset-6 rounded-full bg-white border border-primary/30 flex items-center justify-center overflow-hidden z-10 group-hover:shadow-[0_0_20px_rgba(19,236,164,0.6)] transition-shadow duration-500"> <div class="absolute inset-6 rounded bg-[#0a120e] border border-[#13eca4]/50 flex items-center justify-center overflow-hidden z-10 group-hover:shadow-[0_0_20px_rgba(19,236,164,0.4)] transition-shadow duration-500">
<span class="material-symbols-outlined text-primary text-4xl">&#xe322;</span> <span class="material-symbols-outlined text-[#13eca4] text-4xl">&#xe322;</span>
</div> </div>
</div> </div>
<div class="bg-primary/10 border border-primary/30 px-3 py-1 rounded-full text-primary font-mono text-[10px] mb-4 flex gap-2 items-center tracking-widest "> <div class="bg-[#13eca4]/10 border border-[#13eca4]/30 px-3 py-1 rounded-sm text-[#13eca4] font-mono text-[10px] mb-4 flex gap-2 items-center tracking-widest">
<span class="w-2 h-2 bg-primary rounded-full animate-ping"></span> CONVERTER <span class="w-1.5 h-1.5 bg-[#13eca4] rounded-full animate-ping"></span> CONVERTER
</div> </div>
<h3 class="text-2xl text-background-dark tracking-wide mb-2 z-10 group-hover:text-primary transition-colors">Power Conversion</h3> <h3 class="text-xl text-white tracking-widest mb-2 z-10 group-hover:text-[#13eca4] transition-colors">Power Conversion</h3>
<p class="text-[12px] text-background-dark/60 font-mono tracking-widest text-center mt-2 ">AC/DC ⇌ DC/AC<br>EFF: <span class="text-primary">99.1%</span></p> <p class="text-[11px] text-gray-400 font-mono tracking-widest opacity-80 text-center mt-2">AC/DC ⇌ DC/AC<br>EFF: <span class="text-[#13eca4]">99.1%</span></p>
</div> </div>
</div> </div>
<!-- Card 3 -->
<div class="flex flex-col justify-center relative z-10"> <div class="flex flex-col justify-center relative z-10">
<div class="tilt-card relative bg-white/70 backdrop-blur-xl border border-white p-8 cyber-clip cursor-pointer hover:border-primary-dark/50 shadow-glass text-left w-full lg:w-[290px] group"> <div class="tilt-card relative bg-[#060d0a]/90 backdrop-blur-md border border-white/20 p-8 cyber-clip cursor-pointer hover:border-white/80 shadow-xl text-left w-full lg:w-[290px] group">
<div class="flex items-start justify-between mb-6 relative z-10"> <div class="flex items-start justify-between mb-6 relative z-10">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="w-12 h-12 bg-primary-dark/10 rounded flex items-center justify-center border border-primary-dark/30 text-primary group-hover:bg-primary-dark group-hover:text-white transition-colors duration-300 shadow-sm"> <div class="w-12 h-12 bg-white/10 rounded flex items-center justify-center border border-white/40 text-white group-hover:bg-white group-hover:text-black transition-colors duration-300">
<span class="material-symbols-outlined text-2xl">&#xe7ee;</span> <span class="material-symbols-outlined text-2xl">&#xe7ee;</span>
</div> </div>
<div> <div>
<h3 class="text-xl text-background-dark tracking-wide">Demand Mgt</h3> <h3 class="text-xl text-white tracking-wider">Demand Management</h3>
<div class="text-[10px] text-background-dark/50 font-mono mt-1 ">NODE: LOAD_END</div> <div class="text-[10px] text-gray-400 font-mono mt-1 opacity-70">NODE_TYPE: LOAD_END</div>
</div> </div>
</div> </div>
</div> </div>
<div class="relative h-[80px] w-full"> <div class="relative h-[80px] w-full">
<div class="layer-stats absolute inset-0 w-full grid grid-cols-2 gap-3 font-mono text-xs"> <div class="layer-stats absolute inset-0 w-full grid grid-cols-2 gap-3 font-mono text-xs">
<div class="bg-gray-100 border border-gray-200 p-3 text-background-dark flex flex-col justify-center rounded-sm"> <div class="bg-white/5 border border-white/10 p-3 text-white flex flex-col justify-center">
<span class="text-background-dark/50 text-[10px] mb-1 ">REAL POWER</span> <span class="text-white/50 text-[10px] mb-1">REAL POWER</span>
<span class="text-base ">120 kW</span> <span class="text-base">120 kW</span>
</div> </div>
<div class="bg-gray-100 border border-gray-200 p-3 text-background-dark flex flex-col justify-center rounded-sm"> <div class="bg-white/5 border border-white/10 p-3 text-white flex flex-col justify-center">
<span class="text-background-dark/50 text-[10px] mb-1 ">POWER FACTOR</span> <span class="text-white/50 text-[10px] mb-1">POWER FACTOR</span>
<span class="text-base ">0.98</span> <span class="text-base">0.98</span>
</div> </div>
</div> </div>
<div class="layer-text absolute inset-0 w-full overflow-hidden"> <div class="layer-text absolute inset-0 w-full overflow-hidden">
<p class="decrypt-text text-[13px] text-background-dark/70 font-medium leading-relaxed" data-target="Distributing power smartly to meet diverse load requirements.">>_ Connecting...</p> <p class="decrypt-text text-[13px] text-gray-300 leading-relaxed font-light" data-target="Distributing power smartly to meet diverse load requirements.">>_ Connecting...</p>
</div> </div>
</div> </div>
<div class="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-primary-dark/40 group-hover:border-primary-dark transition-colors m-1"></div> <div class="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-white/30 group-hover:border-white transition-colors m-1"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Features Sections (Glassmorphism & Bright Theme) --> <script>
document.addEventListener("DOMContentLoaded", () => {
// 1. 极致轻量的 JS 3D Hover 引擎 (仅修改 CSS 变量)
const cards = document.querySelectorAll('.tilt-card');
cards.forEach(card => {
card.addEventListener('mousemove', e => {
// 移除恢复动画，防止移动时卡顿
card.classList.remove('reset');
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// 减弱偏转幅度，最大限制在 3 度以内，防止视差引起的边缘闪烁
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = ((y - centerY) / centerY) * -3;
const rotateY = ((x - centerX) / centerX) * 3;
// 将计算结果推给 CSS 变量，让 GPU 处理动画
card.style.setProperty('--rx', `${rotateX}deg`);
card.style.setProperty('--ry', `${rotateY}deg`);
});
card.addEventListener('mouseleave', () => {
// 鼠标移出时添加平滑恢复 class
card.classList.add('reset');
card.style.setProperty('--rx', `0deg`);
card.style.setProperty('--ry', `0deg`);
// 重置打字机文本
const decryptEl = card.querySelector('.decrypt-text');
if(decryptEl) {
decryptEl.dataset.isAnimating = "false";
decryptEl.innerHTML = `>_ Awaiting command...`;
}
});
// 2. 优化版的文本解密引擎 (使用 requestAnimationFrame 防抖)
card.addEventListener('mouseenter', () => {
const decryptEl = card.querySelector('.decrypt-text');
if(!decryptEl || decryptEl.dataset.isAnimating === "true") return;
decryptEl.dataset.isAnimating = "true";
const targetText = decryptEl.getAttribute('data-target');
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&*';
let iteration = 0;
let cursorColor = "text-[#13eca4]";
if(card.innerHTML.includes('#ff8c00')) cursorColor = "text-[#ff8c00]";
else if(card.innerHTML.includes('border-white')) cursorColor = "text-white";
function decryptFrame() {
if(decryptEl.dataset.isAnimating === "false") return; // 如果鼠标移开提前打断
decryptEl.innerHTML = targetText.split("").map((letter, index) => {
if(index < iteration) {
return letter;
}
return chars[Math.floor(Math.random() * chars.length)];
}).join("") + `<span class="animate-pulse ${cursorColor} ml-1">_</span>`;
if(iteration < targetText.length) {
iteration += 1; // 加快解密速度
// 使用 setTimeout 配合 requestAnimationFrame 控制帧率，防止刷新过快导致视觉抖动
setTimeout(() => requestAnimationFrame(decryptFrame), 20);
} else {
decryptEl.dataset.isAnimating = "false";
decryptEl.innerHTML = targetText + `<span class="animate-pulse ${cursorColor} ml-1">_</span>`;
}
}
requestAnimationFrame(decryptFrame);
});
});
});
</script>
<section id="mod-security" class="min-h-screen flex items-center"> <section id="mod-security" class="min-h-screen flex items-center">
<div class="max-w-xl bg-white/80 backdrop-blur-xl p-10 border-l-4 border-accent rounded-r-3xl shadow-glass"> <div class="max-w-xl bg-[#0a0f0d]/80 backdrop-blur-md p-10 border-l-4 border-[#ff8c00] rounded-r-3xl shadow-2xl">
<span class="material-symbols-outlined text-5xl text-accent mb-6">&#xe32a;</span> <span class="material-symbols-outlined text-5xl text-[#ff8c00] mb-6">&#xe32a;</span>
<h2 class="text-4xl mb-4 text-background-dark">Safe &<br>Reliable</h2> <h2 class="text-3xl mb-4 text-white">Safe &<br>Reliable</h2>
<p class="text-lg text-background-dark/70 leading-relaxed font-medium">Sustains island operation without disconnection, backed by multi-power redundancy to guarantee zero downtime for critical loads.</p> <p class="text-lg text-gray-400 leading-relaxed">Sustains island operation without disconnection, backed by multi-power redundancy to guarantee zero downtime for critical loads.</p>
</div> </div>
</section> </section>
<section id="mod-efficiency" class="min-h-screen flex items-center justify-end text-right"> <section id="mod-efficiency" class="min-h-screen flex items-center justify-end text-right">
<div class="max-w-xl bg-white/80 backdrop-blur-xl p-10 border-r-4 border-primary rounded-l-3xl shadow-glass"> <div class="max-w-xl bg-[#0a0f0d]/80 backdrop-blur-md p-10 border-r-4 border-[#13eca4] rounded-l-3xl shadow-2xl">
<span class="material-symbols-outlined text-5xl text-primary mb-6">&#xf0cf;</span> <span class="material-symbols-outlined text-5xl text-[#13eca4] mb-6">&#xf0cf;</span>
<h2 class="text-4xl mb-4 text-background-dark">Smart &<br>Efficient</h2> <h2 class="text-3xl mb-4 text-white">Smart &<br>Efficient</h2>
<p class="text-lg text-background-dark/70 leading-relaxed font-medium">Intelligent optimization and dispatch enable peak shaving and valley filling, effectively reducing electricity costs and energy consumption.</p> <p class="text-lg text-gray-400 leading-relaxed">Intelligent optimization and dispatch enable peak shaving and valley filling, effectively reducing electricity costs and energy consumption.</p>
</div> </div>
</section> </section>
<section id="mod-netzero" class="min-h-screen flex items-center"> <section id="mod-netzero" class="min-h-screen flex items-center">
<div class="max-w-xl bg-white/80 backdrop-blur-xl p-10 border-l-4 border-primary-dark rounded-r-3xl shadow-glass"> <div class="max-w-xl bg-[#0a0f0d]/80 backdrop-blur-md p-10 border-l-4 border-white rounded-r-3xl shadow-2xl">
<span class="material-symbols-outlined text-5xl text-primary mb-6">&#xea35;</span> <span class="material-symbols-outlined text-5xl text-white mb-6">&#xea35;</span>
<h2 class="text-4xl mb-4 text-background-dark">Green &<br>Low-Carbon</h2> <h2 class="text-3xl mb-4 text-white">Green &<br>Low-Carbon</h2>
<p class="text-lg text-background-dark/70 leading-relaxed font-medium">Efficiently absorbs renewable energy and reduces carbon emissions, facilitating the realization of dual-carbon goals.</p> <p class="text-lg text-gray-400 leading-relaxed">Efficiently absorbs renewable energy and reduces carbon emissions, facilitating the realization of dual-carbon goals.</p>
</div> </div>
</section> </section>
<section id="mod-autonomous" class="min-h-screen flex items-center justify-end text-right"> <section id="mod-autonomous" class="min-h-screen flex items-center justify-end text-right">
<div class="max-w-xl bg-white/80 backdrop-blur-xl p-10 border-r-4 border-accent rounded-l-3xl shadow-glass"> <div class="max-w-xl bg-[#0a0f0d]/80 backdrop-blur-md p-10 border-r-4 border-[#ff8c00] rounded-l-3xl shadow-2xl">
<span class="material-symbols-outlined text-5xl text-accent mb-6">&#xe97a;</span> <span class="material-symbols-outlined text-5xl text-[#ff8c00] mb-6">&#xe97a;</span>
<h2 class="text-4xl mb-4 text-background-dark">Autonomous &<br>Controllable</h2> <h2 class="text-3xl mb-4 text-white">Autonomous &<br>Controllable</h2>
<p class="text-lg text-background-dark/70 leading-relaxed font-medium">Operates independently of the external grid, significantly enhancing energy autonomy and risk resilience.</p> <p class="text-lg text-gray-400 leading-relaxed">Operates independently of the external grid, significantly enhancing energy autonomy and risk resilience.</p>
</div> </div>
</section> </section>
<!-- === Scenarios === -->
<section id="mod-scenarios" class="min-h-[80vh] flex flex-col justify-center items-center text-center pb-20 relative z-10" style="perspective: 2000px;">
<h2 class="text-4xl md:text-[2.66rem] mb-12 uppercase tracking-widest text-background-dark mt-10 relative z-30">Applicable Scenarios</h2> <section id="mod-scenarios" class="min-h-screen flex flex-col justify-center items-center text-center pb-20 relative z-10" style="perspective: 2000px;">
<h2 class="text-4xl md:text-[2.66rem] mb-12 uppercase tracking-widest text-white mt-10 relative z-30">Applicable Scenarios</h2>
<div class="flex flex-wrap justify-center gap-4 font-mono text-sm max-w-4xl relative z-30 " id="scenario-buttons"> <div class="flex flex-wrap justify-center gap-6 font-mono text-sm max-w-4xl relative z-30" id="scenario-buttons">
<button class="scenario-btn px-6 py-2 border border-primary/20 bg-white/80 hover:border-primary-dark hover:text-primary transition-all duration-300 rounded-full shadow-sm text-background-dark/70">Industrial Parks</button> <button class="scenario-btn px-8 py-3 border border-gray-700 bg-[#0a0f0d] hover:border-[#13eca4] hover:text-[#13eca4] transition-all duration-300 rounded-full focus:outline-none">Industrial Parks</button>
<button class="scenario-btn px-6 py-2 border border-primary/20 bg-white/80 hover:border-primary-dark hover:text-primary transition-all duration-300 rounded-full shadow-sm text-background-dark/70">Data Centers</button> <button class="scenario-btn px-8 py-3 border border-gray-700 bg-[#0a0f0d] hover:border-[#13eca4] hover:text-[#13eca4] transition-all duration-300 rounded-full focus:outline-none">Data Centers</button>
<button class="scenario-btn px-6 py-2 border border-primary/20 bg-white/80 hover:border-primary-dark hover:text-primary transition-all duration-300 rounded-full shadow-sm text-background-dark/70">Commercial Complexes</button> <button class="scenario-btn px-8 py-3 border border-gray-700 bg-[#0a0f0d] hover:border-[#13eca4] hover:text-[#13eca4] transition-all duration-300 rounded-full focus:outline-none">Commercial Complexes</button>
<button class="scenario-btn px-6 py-2 border border-primary/20 bg-white/80 hover:border-primary-dark hover:text-primary transition-all duration-300 rounded-full shadow-sm text-background-dark/70">Hospitals & Schools</button> <button class="scenario-btn px-8 py-3 border border-gray-700 bg-[#0a0f0d] hover:border-[#13eca4] hover:text-[#13eca4] transition-all duration-300 rounded-full focus:outline-none">Hospitals & Schools</button>
<button class="scenario-btn px-6 py-2 border border-primary/20 bg-white/80 hover:border-primary-dark hover:text-primary transition-all duration-300 rounded-full shadow-sm text-background-dark/70">Remote Regions</button> <button class="scenario-btn px-8 py-3 border border-gray-700 bg-[#0a0f0d] hover:border-[#13eca4] hover:text-[#13eca4] transition-all duration-300 rounded-full focus:outline-none">Remote Regions</button>
<button class="scenario-btn px-6 py-2 border border-primary/20 bg-white/80 hover:border-primary-dark hover:text-primary transition-all duration-300 rounded-full shadow-sm text-background-dark/70">Islands</button> <button class="scenario-btn px-8 py-3 border border-gray-700 bg-[#0a0f0d] hover:border-[#13eca4] hover:text-[#13eca4] transition-all duration-300 rounded-full focus:outline-none">Islands</button>
<button class="scenario-btn active-scenario px-6 py-2 bg-primary/10 border border-primary text-primary shadow-[0_4px_15px_rgba(19,236,164,0.3)] transition-all duration-300 rounded-full">Zero-Carbon Communities</button> <button class="scenario-btn active-scenario px-8 py-3 bg-[#13eca4]/10 border border-[#13eca4] text-[#13eca4] shadow-[0_0_15px_rgba(19,236,164,0.3)] transition-all duration-300 rounded-full focus:outline-none">Zero-Carbon Communities</button>
<button class="scenario-btn px-6 py-2 border border-primary/20 bg-white/80 hover:border-primary-dark hover:text-primary transition-all duration-300 rounded-full shadow-sm text-background-dark/70">New Energy Stations</button> <button class="scenario-btn px-8 py-3 border border-gray-700 bg-[#0a0f0d] hover:border-[#13eca4] hover:text-[#13eca4] transition-all duration-300 rounded-full focus:outline-none">New Energy Stations</button>
</div> </div>
<div id="card-wrapper" class="relative mt-12 w-full max-w-5xl h-[450px] z-20" style="transform-style: preserve-3d;"> <div id="card-wrapper" class="relative mt-12 w-full max-w-5xl h-[450px] z-20" style="transform-style: preserve-3d;">
<div id="scenario-card" class="absolute inset-0 w-full h-full rounded-3xl overflow-hidden border-4 border-white shadow-2xl bg-white opacity-0" style="transform: translateZ(-500px) rotateX(20deg); pointer-events: none;"> <div id="scenario-card" class="absolute inset-0 w-full h-full rounded-3xl overflow-hidden border border-white/20 shadow-[0_50px_100px_rgba(0,0,0,0.8)] bg-[#0a0f0d]/90 backdrop-blur-xl opacity-0" style="transform: translateZ(-500px) rotateX(20deg); pointer-events: none;">
<div class="absolute inset-0 z-0 overflow-hidden"> <div class="absolute inset-0 z-0 overflow-hidden">
<img id="card-img" src="" class="w-full h-full object-cover opacity-90" alt="Scenario Image" /> <img id="card-img" src="" class="w-full h-full object-cover opacity-80" alt="Scenario Image" />
</div> </div>
<!-- Light theme inner gradient --> <div class="absolute inset-0 bg-gradient-to-t from-[#0a0f0d] via-transparent to-transparent z-10"></div>
<div class="absolute inset-0 bg-gradient-to-t from-white via-white/80 to-transparent z-10"></div>
<div class="absolute bottom-12 left-12 z-20 text-left"> <div class="absolute bottom-12 left-12 z-20 text-left">
<h3 id="card-title" class="text-4xl font-display text-background-dark mb-4 tracking-tighter"></h3> <h3 id="card-title" class="text-3xl font-display text-[#13eca4] mb-4 tracking-tighter"></h3>
<p id="card-desc" class="text-lg text-background-dark/80 max-w-2xl leading-relaxed font-medium"></p> <p id="card-desc" class="text-lg text-gray-300 max-w-2xl leading-relaxed font-light"></p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section id="mod-contact" class="w-full py-24 relative z-10 overflow-hidden bg-gradient-to-b from-transparent to-[#0a0f0d]">
<!-- === Contact === -->
<section id="mod-contact" class="w-full py-24 relative z-10 overflow-hidden bg-white/50 border-t border-white shadow-[0_-10px_40px_rgba(13,166,112,0.05)]">
<div class="max-w-7xl mx-auto px-6"> <div class="max-w-7xl mx-auto px-6">
<div class="flex items-center gap-4 mb-12" data-aos="fade-right"> <div class="flex items-center gap-4 mb-12" data-aos="fade-right">
<div class="h-[2px] w-12 bg-primary-dark"></div> <div class="h-[1px] w-12 bg-[#13eca4]"></div>
<span class="text-primary font-mono text-xs uppercase tracking-[0.4em] ">Get in Touch</span> <span class="text-[#13eca4] font-mono text-xs uppercase tracking-[0.4em]">Get in Touch</span>
</div> </div>
<div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-12"> <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-12">
<div data-aos="fade-up" data-aos-delay="100"> <div data-aos="fade-up" data-aos-delay="100">
<h2 class="text-background-dark/50 text-sm font-mono uppercase tracking-widest mb-2 ">Microgrid Project Leader</h2> <h2 class="text-gray-500 text-sm font-mono uppercase tracking-widest mb-2">Microgrid Project Leader</h2>
<div class="flex items-baseline gap-6"> <div class="flex items-baseline gap-6">
<span class="text-5xl tracking-tighter text-background-dark">Yan</span> <span class="text-4xl md:text-[2.66rem] font-mono tracking-tighter text-[#13eca4]">Yan</span>
</div> </div>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full lg:max-w-2xl" data-aos="fade-left" data-aos-delay="200"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full lg:max-w-2xl" data-aos="fade-left" data-aos-delay="200">
<a href="mailto:sheyanxin@nenghui.com" class="group relative p-6 bg-white border border-primary/20 rounded-2xl overflow-hidden transition-all duration-500 hover:border-primary hover:shadow-lg"> <a href="mailto:sheyanxin@nenghui.com" class="group relative p-6 bg-white/[0.02] border border-white/10 rounded-2xl overflow-hidden transition-all duration-500 hover:border-[#13eca4]/50">
<div class="absolute inset-0 bg-gradient-to-r from-primary/5 to-transparent translate-x-[-100%] group-hover:translate-x-[0%] transition-transform duration-500"></div> <div class="absolute inset-0 bg-gradient-to-r from-[#13eca4]/10 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></div>
<div class="relative flex items-center gap-4"> <div class="relative flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary"> <div class="w-12 h-12 rounded-full bg-[#13eca4]/10 flex items-center justify-center text-[#13eca4]">
<span class="material-symbols-outlined">&#xe158;</span> <span class="material-symbols-outlined">&#xe158;</span>
</div> </div>
<div> <div>
<div class="text-background-dark/50 text-[10px] uppercase tracking-widest ">Send Email</div> <div class="text-gray-500 text-[10px] uppercase tracking-widest">Send Email</div>
<div class="text-background-dark group-hover:text-primary transition-colors">sheyanxin@nenghui.com</div> <div class="text-white font-medium group-hover:text-[#13eca4] transition-colors">sheyanxin@nenghui.com</div>
</div> </div>
</div> </div>
</a> </a>
<a href="tel:8619120593729" class="group relative p-6 bg-white border border-primary/20 rounded-2xl overflow-hidden transition-all duration-500 hover:border-primary hover:shadow-lg"> <a href="tel:8619120593729" class="group relative p-6 bg-white/[0.02] border border-white/10 rounded-2xl overflow-hidden transition-all duration-500 hover:border-[#13eca4]/50">
<div class="absolute inset-0 bg-gradient-to-r from-primary/5 to-transparent translate-x-[-100%] group-hover:translate-x-[0%] transition-transform duration-500"></div> <div class="absolute inset-0 bg-gradient-to-r from-[#13eca4]/10 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></div>
<div class="relative flex items-center gap-4"> <div class="relative flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary"> <div class="w-12 h-12 rounded-full bg-[#13eca4]/10 flex items-center justify-center text-[#13eca4]">
<span class="material-symbols-outlined">&#xe0b0;</span> <span class="material-symbols-outlined">&#xe0b0;</span>
</div> </div>
<div> <div>
<div class="text-background-dark/50 text-[10px] uppercase tracking-widest ">Call Directly</div> <div class="text-gray-500 text-[10px] uppercase tracking-widest">Call Directly</div>
<div class="text-background-dark group-hover:text-primary transition-colors">+86 191 2059 3729</div> <div class="text-white font-medium group-hover:text-[#13eca4] transition-colors">+86 191 2059 3729</div>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
</main> </main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<!-- Swiper JS -->
<!-- JavaScript Logic & Animations --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
<script> <script>
AOS.init({ once: true }); AOS.init({ once: true });
gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollTrigger);
// --- 卡片倾斜与打字机特效 (保持不变) --- // --- 基础场景设置 ---
document.addEventListener("DOMContentLoaded", () => {
const cards = document.querySelectorAll('.tilt-card');
cards.forEach(card => {
card.addEventListener('mousemove', e => {
card.classList.remove('reset');
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = ((y - centerY) / centerY) * -4;
const rotateY = ((x - centerX) / centerX) * 4;
card.style.setProperty('--rx', `${rotateX}deg`);
card.style.setProperty('--ry', `${rotateY}deg`);
});
card.addEventListener('mouseleave', () => {
card.classList.add('reset');
card.style.setProperty('--rx', `0deg`);
card.style.setProperty('--ry', `0deg`);
const decryptEl = card.querySelector('.decrypt-text');
if(decryptEl) {
decryptEl.dataset.isAnimating = "false";
decryptEl.innerHTML = `>_ Awaiting command...`;
}
});
card.addEventListener('mouseenter', () => {
const decryptEl = card.querySelector('.decrypt-text');
if(!decryptEl || decryptEl.dataset.isAnimating === "true") return;
decryptEl.dataset.isAnimating = "true";
const targetText = decryptEl.getAttribute('data-target');
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&*';
let iteration = 0;
function decryptFrame() {
if(decryptEl.dataset.isAnimating === "false") return;
decryptEl.innerHTML = targetText.split("").map((letter, index) => {
if(index < iteration) return letter;
return chars[Math.floor(Math.random() * chars.length)];
}).join("") + `<span class="animate-pulse text-primary ml-1">_</span>`;
if(iteration < targetText.length) {
iteration += 1;
setTimeout(() => requestAnimationFrame(decryptFrame), 15);
} else {
decryptEl.dataset.isAnimating = "false";
decryptEl.innerHTML = targetText + `<span class="animate-pulse text-primary ml-1">_</span>`;
}
}
requestAnimationFrame(decryptFrame);
});
});
});
// --- Three.js 亮色主题粒子引擎 ---
const scene = new THREE.Scene(); const scene = new THREE.Scene();
// 增加雾化效果，让远处的粒子融入背景
scene.fog = new THREE.FogExp2(0xf8fcfa, 0.0015);
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000); const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 500; camera.position.z = 500;
function updateCameraFOV() { function updateCameraFOV() {
camera.fov = window.innerWidth < 768 ? 75 : 55; if (window.innerWidth < 768) {
camera.fov = 75;
} else {
camera.fov = 55;
}
camera.updateProjectionMatrix(); camera.updateProjectionMatrix();
} }
updateCameraFOV(); updateCameraFOV();
@ -447,6 +534,7 @@
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas-container').appendChild(renderer.domElement); document.getElementById('canvas-container').appendChild(renderer.domElement);
// --- 粒子系统基础参数 ---
const particleCount = window.innerWidth < 768 ? 9000 : 12000; const particleCount = window.innerWidth < 768 ? 9000 : 12000;
const geometry = new THREE.BufferGeometry(); const geometry = new THREE.BufferGeometry();
@ -456,19 +544,18 @@
const targetPos = new Float32Array(particleCount * 3); const targetPos = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 3); const colors = new Float32Array(particleCount * 3);
// --- 核心改动：适合亮色背景的粒子颜色 --- const colorPrimary = new THREE.Color(0x13eca4);
const colorPrimary = new THREE.Color('#09ab75'); // 深翠绿，保证在白底上清晰 const colorAccent = new THREE.Color(0xff8c00);
const colorAccent = new THREE.Color('#64e8bc'); // 亮绿色用于点缀 const colorGray = new THREE.Color(0x555555);
const colorGray = new THREE.Color('#94a3b8'); // 蓝灰色替代原有的银白色
for (let i = 0; i < particleCount; i++) { for (let i = 0; i < particleCount; i++) {
const mix = Math.random(); const mix = Math.random();
const color = colorPrimary.clone().lerp(colorAccent, mix * 0.5); const color = colorPrimary.clone().lerp(colorAccent, mix * 0.3);
colors.set([color.r, color.g, color.b], i * 3); colors.set([color.r, color.g, color.b], i * 3);
} }
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
// 形状生成器 (保持原有计算逻辑) // --- 形状预计算 ---
const shapesGen = { const shapesGen = {
text: () => { text: () => {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
@ -494,6 +581,7 @@
} }
return arr; return arr;
}, },
nestedPolyhedron: () => { nestedPolyhedron: () => {
const arr = new Float32Array(particleCount * 3); const arr = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount; i++) { for (let i = 0; i < particleCount; i++) {
@ -508,10 +596,12 @@
} }
return arr; return arr;
}, },
symbioticLeaf: () => { symbioticLeaf: () => {
const arr = new Float32Array(particleCount * 3); const arr = new Float32Array(particleCount * 3);
const leafParticles = Math.floor(particleCount * 0.85); const leafParticles = Math.floor(particleCount * 0.85);
const carbonParticles = particleCount - leafParticles; const carbonParticles = particleCount - leafParticles;
for (let i = 0; i < leafParticles; i++) { for (let i = 0; i < leafParticles; i++) {
const t = Math.random(); const t = Math.random();
const y = t * 400 - 150; const y = t * 400 - 150;
@ -519,6 +609,7 @@
const maxWidth = 160; const maxWidth = 160;
let x, z; let x, z;
const isVein = Math.random() < 0.4; const isVein = Math.random() < 0.4;
if (isVein) { if (isVein) {
if (Math.random() < 0.3) { if (Math.random() < 0.3) {
x = (Math.random() - 0.5) * 4; x = (Math.random() - 0.5) * 4;
@ -538,6 +629,7 @@
const bend = Math.sin(t * Math.PI) * 30; const bend = Math.sin(t * Math.PI) * 30;
arr.set([x + bend, y, z], i * 3); arr.set([x + bend, y, z], i * 3);
} }
for (let i = 0; i < carbonParticles; i++) { for (let i = 0; i < carbonParticles; i++) {
const idx = (leafParticles + i) * 3; const idx = (leafParticles + i) * 3;
arr.set([ arr.set([
@ -548,6 +640,7 @@
} }
return arr; return arr;
}, },
concentricSphere: () => { concentricSphere: () => {
const arr = new Float32Array(particleCount * 3); const arr = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount; i++) { for (let i = 0; i < particleCount; i++) {
@ -558,6 +651,7 @@
} }
return arr; return arr;
}, },
barGraph: () => { barGraph: () => {
const arr = new Float32Array(particleCount * 3); const arr = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount; i++) { for (let i = 0; i < particleCount; i++) {
@ -568,39 +662,54 @@
} }
return arr; return arr;
}, },
shield: () => { shield: () => {
const arr = new Float32Array(particleCount * 3); const arr = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount; i++) { for (let i = 0; i < particleCount; i++) {
let x = (Math.random() - 0.5) * 200; let x = (Math.random() - 0.5) * 200;
let y, z; let y, z;
let topEdge = 100 + 15 * Math.cos(x * Math.PI / 100); let topEdge = 100 + 15 * Math.cos(x * Math.PI / 100);
let bottomEdge = -120 + 220 * Math.pow(Math.abs(x) / 100, 2); let bottomEdge = -120 + 220 * Math.pow(Math.abs(x) / 100, 2);
let t = Math.random(); let t = Math.random();
if (Math.random() > 0.6) { if (Math.random() > 0.6) {
t = Math.random() > 0.5 ? Math.random() * 0.1 : 0.9 + Math.random() * 0.1; t = Math.random() > 0.5 ? Math.random() * 0.1 : 0.9 + Math.random() * 0.1;
} }
y = bottomEdge + t * (topEdge - bottomEdge); y = bottomEdge + t * (topEdge - bottomEdge);
let maxZ = 30 * (1 - Math.pow(Math.abs(x) / 100, 2)); let maxZ = 30 * (1 - Math.pow(Math.abs(x) / 100, 2));
if (Math.abs(x) < 8 || Math.abs(y - 10) < 8) maxZ += 10; if (Math.abs(x) < 8 || Math.abs(y - 10) < 8) {
maxZ += 10;
}
z = (Math.random() - 0.5) * maxZ; z = (Math.random() - 0.5) * maxZ;
arr.set([x, y, z], i * 3); arr.set([x, y, z], i * 3);
} }
return arr; return arr;
}, },
torusKnot: () => { torusKnot: () => {
const arr = new Float32Array(particleCount * 3); const arr = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount; i++) { for (let i = 0; i < particleCount; i++) {
const t = Math.random() * Math.PI * 2; const t = Math.random() * Math.PI * 2;
const p = 2; const q = 3; const p = 2;
const q = 3;
const r = 50 * (2 + Math.cos(q * t)); const r = 50 * (2 + Math.cos(q * t));
const x = r * Math.cos(p * t); const x = r * Math.cos(p * t);
const y = r * Math.sin(p * t); const y = r * Math.sin(p * t);
const z = 50 * Math.sin(q * t); const z = 50 * Math.sin(q * t);
const noise = 15; const noise = 15;
arr.set([x + (Math.random() - 0.5) * noise, y + (Math.random() - 0.5) * noise, z + (Math.random() - 0.5) * noise], i * 3); arr.set([
x + (Math.random() - 0.5) * noise,
y + (Math.random() - 0.5) * noise,
z + (Math.random() - 0.5) * noise
], i * 3);
} }
return arr; return arr;
}, },
networkNode: () => { networkNode: () => {
const arr = new Float32Array(particleCount * 3); const arr = new Float32Array(particleCount * 3);
const nodes = [ const nodes = [
@ -654,13 +763,12 @@
renderPositions.set(precalculatedShapes.text); renderPositions.set(precalculatedShapes.text);
geometry.setAttribute('position', new THREE.BufferAttribute(renderPositions, 3)); geometry.setAttribute('position', new THREE.BufferAttribute(renderPositions, 3));
// --- 核心改动：必须使用 NormalBlending 才能在白底上显示颜色 ---
const material = new THREE.PointsMaterial({ const material = new THREE.PointsMaterial({
size: window.innerWidth < 768 ? 3.5 : 4.0, size: window.innerWidth < 768 ? 3.5 : 4.0,
vertexColors: true, vertexColors: true,
transparent: true, transparent: true,
opacity: 0.8, opacity: 0.9,
blending: THREE.NormalBlending, // AdditiveBlending 会在白底上完全消失！ blending: THREE.AdditiveBlending,
sizeAttenuation: true, sizeAttenuation: true,
depthWrite: false depthWrite: false
}); });
@ -674,6 +782,7 @@
const rotationSpeed = { x: 0, y: 0 }; const rotationSpeed = { x: 0, y: 0 };
const waveConfig = { amplitude: 20 }; const waveConfig = { amplitude: 20 };
const leafConfigs = { carbonOpacity: 1.0, carbonYOffset: 0 };
function morphTo(shapeKey) { function morphTo(shapeKey) {
if (currentShapeKey === shapeKey) return; if (currentShapeKey === shapeKey) return;
@ -681,6 +790,7 @@
if (morphTween) morphTween.kill(); if (morphTween) morphTween.kill();
// 颜色过渡处理
const colorAttribute = geometry.attributes.color; const colorAttribute = geometry.attributes.color;
const targetColors = new Float32Array(particleCount * 3); const targetColors = new Float32Array(particleCount * 3);
const leafParticles = Math.floor(particleCount * 0.85); const leafParticles = Math.floor(particleCount * 0.85);
@ -694,7 +804,7 @@
color = colorGray.clone(); color = colorGray.clone();
} }
} else { } else {
color = colorPrimary.clone().lerp(colorAccent, Math.random() * 0.4); color = colorPrimary.clone().lerp(colorAccent, Math.random() * 0.3);
} }
targetColors.set([color.r, color.g, color.b], i * 3); targetColors.set([color.r, color.g, color.b], i * 3);
} }
@ -706,6 +816,7 @@
onUpdate: () => colorAttribute.needsUpdate = true onUpdate: () => colorAttribute.needsUpdate = true
}); });
// 形状平滑过渡
for (let i = 0; i < currentPositions.length; i++) { for (let i = 0; i < currentPositions.length; i++) {
startPos[i] = currentPositions[i]; startPos[i] = currentPositions[i];
} }
@ -723,6 +834,7 @@
} }
}); });
// 视角及其他动画
if (shapeKey === 'text') { if (shapeKey === 'text') {
gsap.to(rotationSpeed, { x: 0, y: 0, duration: 1.5 }); gsap.to(rotationSpeed, { x: 0, y: 0, duration: 1.5 });
const targetX = Math.round(particles.rotation.x / (Math.PI * 2)) * (Math.PI * 2); const targetX = Math.round(particles.rotation.x / (Math.PI * 2)) * (Math.PI * 2);
@ -734,6 +846,8 @@
gsap.to(particles.rotation, { x: targetX, duration: 2.0 }); gsap.to(particles.rotation, { x: targetX, duration: 2.0 });
} else if (shapeKey === 'symbioticLeaf') { } else if (shapeKey === 'symbioticLeaf') {
gsap.to(rotationSpeed, { x: 0.0005, y: 0.001, duration: 1.5 }); gsap.to(rotationSpeed, { x: 0.0005, y: 0.001, duration: 1.5 });
leafConfigs.carbonOpacity = 1.0;
leafConfigs.carbonYOffset = 0;
} else if (shapeKey === 'barGraph') { } else if (shapeKey === 'barGraph') {
gsap.to(rotationSpeed, { x: 0, y: 0.002, duration: 1.5 }); gsap.to(rotationSpeed, { x: 0, y: 0.002, duration: 1.5 });
const targetX = Math.round(particles.rotation.x / (Math.PI * 2)) * (Math.PI * 2); const targetX = Math.round(particles.rotation.x / (Math.PI * 2)) * (Math.PI * 2);
@ -747,6 +861,8 @@
amplitude: (shapeKey === 'text') ? 20 : 0 amplitude: (shapeKey === 'text') ? 20 : 0
}); });
} }
// --- 渲染循环与动态动画 ---
function animate() { function animate() {
requestAnimationFrame(animate); requestAnimationFrame(animate);
@ -772,12 +888,14 @@
positions[idx + 1] = baseY; positions[idx + 1] = baseY;
positions[idx + 2] = baseZ + r * Math.sin(angle); positions[idx + 2] = baseZ + r * Math.sin(angle);
} }
} else { } else {
positions[idx] = baseX + Math.sin(time + baseY * 0.1) * 2; positions[idx] = baseX + Math.sin(time + baseY * 0.1) * 2;
positions[idx + 1] = baseY; positions[idx + 1] = baseY;
positions[idx + 2] = baseZ; positions[idx + 2] = baseZ;
} }
} }
} else if (waveConfig.amplitude > 0.01) { } else if (waveConfig.amplitude > 0.01) {
const phase = baseX * 0.006 + time; const phase = baseX * 0.006 + time;
const waveY = Math.sin(phase) * (waveConfig.amplitude * 0.4); const waveY = Math.sin(phase) * (waveConfig.amplitude * 0.4);
@ -800,7 +918,9 @@
opacity = THREE.MathUtils.lerp(1.0, 0.0, (y + 150) / 100); opacity = THREE.MathUtils.lerp(1.0, 0.0, (y + 150) / 100);
} }
if (y > -50) opacity = 0; if (y > -50) opacity = 0;
positions[idx + 1] = y; positions[idx + 1] = y;
colorsArray[idx] = colorGray.r * opacity; colorsArray[idx] = colorGray.r * opacity;
colorsArray[idx + 1] = colorGray.g * opacity; colorsArray[idx + 1] = colorGray.g * opacity;
colorsArray[idx + 2] = colorGray.b * opacity; colorsArray[idx + 2] = colorGray.b * opacity;
@ -827,6 +947,7 @@
updateCameraFOV(); updateCameraFOV();
}); });
// --- 滚动监听：新增对拓扑图的监控数组 ---
const shapeList = ['text', 'shield', 'concentricSphere', 'symbioticLeaf', 'torusKnot', 'networkNode', 'barGraph', 'nestedPolyhedron']; const shapeList = ['text', 'shield', 'concentricSphere', 'symbioticLeaf', 'torusKnot', 'networkNode', 'barGraph', 'nestedPolyhedron'];
const sections = ['#mod-hero', '#mod-security', '#mod-efficiency', '#mod-netzero', '#mod-autonomous', '#mod-topology', '#mod-scenarios', '#mod-contact']; const sections = ['#mod-hero', '#mod-security', '#mod-efficiency', '#mod-netzero', '#mod-autonomous', '#mod-topology', '#mod-scenarios', '#mod-contact'];
@ -842,7 +963,7 @@
</script> </script>
<script> <script>
// --- 场景卡片 3D 动画 --- // --- 场景卡片 3D 跃出动画 ---
const scenarioData = { const scenarioData = {
"Industrial Parks": { img: "https://nenghui.com/wp-content/uploads/2026/03/icrogrid-Industrial-parks.jpg", desc: "Optimize energy consumption and reduce operational costs for smart industrial zones with intelligent management." }, "Industrial Parks": { img: "https://nenghui.com/wp-content/uploads/2026/03/icrogrid-Industrial-parks.jpg", desc: "Optimize energy consumption and reduce operational costs for smart industrial zones with intelligent management." },
"Data Centers": { img: "https://nenghui.com/wp-content/uploads/2026/03/icrogrid-data-center.jpg", desc: "Ensuring continuous mission-critical power supply for data centers with robust and resilient microgrids." }, "Data Centers": { img: "https://nenghui.com/wp-content/uploads/2026/03/icrogrid-data-center.jpg", desc: "Ensuring continuous mission-critical power supply for data centers with robust and resilient microgrids." },
@ -863,7 +984,6 @@
let currentActiveBtn = document.querySelector('.active-scenario'); let currentActiveBtn = document.querySelector('.active-scenario');
function updateCardContent(scenarioName) { function updateCardContent(scenarioName) {
if(!scenarioData[scenarioName]) return;
const data = scenarioData[scenarioName]; const data = scenarioData[scenarioName];
const tl = gsap.timeline(); const tl = gsap.timeline();
@ -884,10 +1004,10 @@
if (btn === currentActiveBtn) return; if (btn === currentActiveBtn) return;
scenarioButtons.forEach(b => { scenarioButtons.forEach(b => {
b.classList.remove('active-scenario', 'bg-primary/10', 'border-primary', 'text-primary', 'shadow-[0_4px_15px_rgba(19,236,164,0.3)]'); b.classList.remove('active-scenario', 'bg-[#13eca4]/10', 'border-[#13eca4]', 'text-[#13eca4]', 'shadow-[0_0_15px_rgba(19,236,164,0.3)]');
b.classList.add('border-primary/20', 'bg-white/80', 'text-background-dark/70'); b.classList.add('border-gray-700', 'bg-[#0a0f0d]');
}); });
btn.classList.add('active-scenario', 'bg-primary/10', 'border-primary', 'text-primary', 'shadow-[0_4px_15px_rgba(19,236,164,0.3)]'); btn.classList.add('active-scenario', 'bg-[#13eca4]/10', 'border-[#13eca4]', 'text-[#13eca4]', 'shadow-[0_0_15px_rgba(19,236,164,0.3)]');
currentActiveBtn = btn; currentActiveBtn = btn;
updateCardContent(btn.innerText.trim()); updateCardContent(btn.innerText.trim());
@ -896,11 +1016,9 @@
if (currentActiveBtn) { if (currentActiveBtn) {
const data = scenarioData[currentActiveBtn.innerText.trim()]; const data = scenarioData[currentActiveBtn.innerText.trim()];
if (data) { cardImg.src = data.img;
cardImg.src = data.img; cardTitle.innerText = currentActiveBtn.innerText.trim();
cardTitle.innerText = currentActiveBtn.innerText.trim(); cardDesc.innerText = data.desc;
cardDesc.innerText = data.desc;
}
} }
ScrollTrigger.create({ ScrollTrigger.create({

505
html/epc-emc.html
Unescape View File

@ -11,8 +11,10 @@
<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 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 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"> <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://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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config"> <script id="tailwind-config">
tailwind.config = { tailwind.config = {
@ -100,8 +102,8 @@
}, },
blobSpin: { blobSpin: {
'0%': { transform: 'rotate(0deg) scale(1)' }, '0%': { transform: 'rotate(0deg) scale(1)' },
'50%': { transform: 'rotate(180deg) translate(-80%, 50%) scale(1.1)' }, '50%': { transform: 'rotate(180deg) scale(1.1)' },
'100%': { transform: 'rotate(360deg) translate(0) scale(1)' }, '100%': { transform: 'rotate(360deg) scale(1)' },
} }
}, },
animation: { animation: {
@ -123,6 +125,7 @@
}, },
} }
</script> </script>
<!-- Tailwind 基础样式注入 -->
<style type="text/tailwindcss"> <style type="text/tailwindcss">
@layer utilities { @layer utilities {
@ -170,7 +173,7 @@
} }
} }
.text-3d { . {
text-shadow: text-shadow:
0 1px 0 #e2e8f0, /* 亮银色顶边 */ 0 1px 0 #e2e8f0, /* 亮银色顶边 */
0 2px 0 #cbd5e1, 0 2px 0 #cbd5e1,
@ -200,7 +203,7 @@
/* 4. 远距离大范围柔和投影 */ /* 4. 远距离大范围柔和投影 */
15px 15px 30px rgba(0, 0, 0, 0.6), 15px 15px 30px rgba(0, 0, 0, 0.6),
/* 5. 核心点睛之笔：在阴影反方向及底部映射出 #13eca4 (Primary) 的环境光晕 */ /* 5. 核心点睛之笔：在阴影反方向及底部映射出 #13eca4 (Primary) 的环境光晕 */
-5px -5px 30px rgba(18, 181, 127, 0.1), -5px -5px 30px rgba(19, 236, 164, 0.1),
10px 10px 40px rgba(19, 236, 164, 0.25); 10px 10px 40px rgba(19, 236, 164, 0.25);
} }
/* Tab 状态管控：选中时变为 primary 背景与深色字体 */ /* Tab 状态管控：选中时变为 primary 背景与深色字体 */
@ -211,8 +214,9 @@
</style> </style>
</head> </head>
<body class="bg-liquid-gradient text-slate-700 font-sans overflow-x-hidden selection:bg-primary selection:text-white cursor-default"> <body class="bg-background-dark text-slate-300 font-sans overflow-x-hidden selection:bg-primary selection:text-black cursor-default">
<!-- 高级交互定制 CSS -->
<style> <style>
html { scroll-behavior: smooth; } html { scroll-behavior: smooth; }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -245,17 +249,19 @@
margin-right: 1.5rem; /* space-x-6 的等效值 24px */ margin-right: 1.5rem; /* space-x-6 的等效值 24px */
} }
/* Swiper 案例轮播图定制样式 */ /* Swiper 案例轮播图定制样式 */
.swiper { padding-bottom: 60px !important; } .swiper { padding-bottom: 60px !important; }
.swiper-wrapper { cursor: grab; } .swiper-wrapper { cursor: grab; }
.swiper-wrapper:active { cursor: grabbing; } .swiper-wrapper:active { cursor: grabbing; }
/* EPC (绿色系) 分页器 */ /* EPC (绿色系) 分页器 */
.epc-swiper .swiper-pagination-bullet { background: rgba(0,0,0,0.2); opacity: 1; transition: all 0.3s; } .epc-swiper .swiper-pagination-bullet { background: rgba(255,255,255,0.3); 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); } .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 (橙色系) 分页器 */
.emc-swiper .swiper-pagination-bullet { background: rgba(0,0,0,0.2); opacity: 1; transition: all 0.3s; } .emc-swiper .swiper-pagination-bullet { background: rgba(255,255,255,0.3); 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); } .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 { #energy-cursor {
@ -271,14 +277,13 @@
height 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, background-color 0.3s ease,
box-shadow 0.3s ease, border 0.3s ease; box-shadow 0.3s ease, border 0.3s ease;
/* 修正明亮模式下的光标融合效果 */ mix-blend-mode: screen;
mix-blend-mode: multiply;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
} }
#energy-cursor.active { #energy-cursor.active {
width: 80px; height: 80px; width: 80px; height: 80px;
background: rgba(19, 236, 164, 0.2); background: rgba(19, 236, 164, 0.1);
border: 1px solid rgba(19, 236, 164, 0.5); border: 1px solid rgba(19, 236, 164, 0.5);
box-shadow: 0 0 20px rgba(19, 236, 164, 0.4); box-shadow: 0 0 20px rgba(19, 236, 164, 0.4);
} }
@ -321,173 +326,221 @@
visibility 0s step-start; visibility 0s step-start;
z-index: 10; z-index: 10;
} }
/* ::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #060c09; }
::-webkit-scrollbar-thumb { background: #1a2e26; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #13eca4; } */
</style> </style>
<!-- 自定义光标节点 -->
<div id="energy-cursor" class="hidden md:block"></div> <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> <main class="relative pt-40 pb-24 overflow-hidden bg-mesh min-h-screen flex items-center parallax-container">
<div class="parallax-bg absolute top-1/4 -right-1/4 w-[800px] h-[800px] bg-primary/10 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="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="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"> <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 Global Energy Transition Standard
</div> </div>
<h1 class="text-4xl md:text-[2.66rem] -ultra mb-8 leading-[1.1] animate-fade-in" style="animation-delay: 0.2s;"> <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/> 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. <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-green-300 animate-text-shimmer" style="background-size: 200% auto;">Zero-Carbon</span> Equation.
</h1> </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;"> <p class="max-w-3xl mx-auto text-[1rem] text-slate-400 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). Empowering industrial giants and commercial leaders worldwide through elite Turnkey EPC execution and Zero-CAPEX Energy Management Contracting (EMC/PPA).
</p> </p>
<!-- <div class="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6 animate-fade-in" style="animation-delay: 0.6s;">
<a href="#models" class="magnetic-btn hover-trigger bg-primary text-black px-10 py-4 rounded-full text-lg hover:shadow-[0_0_40px_rgba(19,236,164,0.6)] transition-all duration-300 w-full sm:w-auto flex items-center justify-center relative overflow-hidden group">
<div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out pointer-events-none"></div>
<span class="pointer-events-none">Explore Models</span>
</a>
<a href="#cases" class="magnetic-btn hover-trigger bg-white/5 border border-white/20 text-white px-10 py-4 rounded-full text-lg hover:bg-white/10 transition-all duration-300 w-full sm:w-auto flex items-center justify-center">
<span class="material-symbols-outlined mr-2 pointer-events-none">&#xe143;</span> <span class="pointer-events-none">View Track Record</span>
</a>
</div> -->
</div> </div>
</main> </main>
<!-- 核心商业模式 (EPC & EMC Bento Grid) -->
<section id="models" class="container mx-auto px-6 py-24 relative z-10 -mt-20"> <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 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 data-aos="fade-right" class="hover-trigger relative group p-10 lg:p-14 rounded-[2.5rem] bg-[#0d1613] border border-white/5 shadow-bento-dark hover:shadow-bento-hover hover:border-primary/30 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="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"> <div class="flex items-center justify-between mb-8 relative z-10">
<h2 class="text-3xl text-slate-900 ">EPC</h2> <h2 class="text-3xl text-white ">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">&#xea3d;</span> <!-- engineering -> &#xea3d; -->
<span class="material-symbols-outlined text-5xl text-primary opacity-50 group-hover:opacity-100 group-hover:rotate-12 transition-all duration-500">&#xea3d;</span>
</div> </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> <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"> <p class="text-slate-400 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. 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> </p>
<div class="grid grid-cols-2 gap-4 font-inter text-slate-700 text-sm relative z-10 pointer-events-none"> <div class="grid grid-cols-2 gap-4 font-inter text-slate-300 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">&#xea3b;</span>Site-Specific Design</div> <!-- architecture -> &#xea3b; -->
<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">&#xe1a1;</span>Global Sourcing</div> <div class="bg-white/5 p-4 rounded-2xl border border-white/5"><span class="material-symbols-outlined text-primary block mb-2">&#xea3b;</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">&#xea3c;</span>Certified Build</div> <!-- inventory_2 -> &#xe1a1; -->
<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">&#xe86c;</span>Grid Handover</div> <div class="bg-white/5 p-4 rounded-2xl border border-white/5"><span class="material-symbols-outlined text-primary block mb-2">&#xe1a1;</span>Global Sourcing</div>
<!-- construction -> &#xea3c; -->
<div class="bg-white/5 p-4 rounded-2xl border border-white/5"><span class="material-symbols-outlined text-primary block mb-2">&#xea3c;</span>Certified Build</div>
<!-- verified -> &#xe86c; -->
<div class="bg-white/5 p-4 rounded-2xl border border-white/5"><span class="material-symbols-outlined text-primary block mb-2">&#xe86c;</span>Grid Handover</div>
</div> </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 data-aos="fade-left" class="hover-trigger hover-emc relative group p-10 lg:p-14 rounded-[2.5rem] bg-[#0d1613] border border-white/5 shadow-bento-dark hover:shadow-bento-hover hover:border-[#ff6b00]/30 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="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"> <div class="flex items-center justify-between mb-8 relative z-10">
<h2 class="text-3xl text-slate-900 ">EMC/PPA</h2> <h2 class="text-3xl text-white ">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">&#xebcb;</span> <!-- handshake -> &#xebcb; -->
<span class="material-symbols-outlined text-5xl text-[#ff6b00] opacity-50 group-hover:opacity-100 group-hover:-rotate-12 transition-all duration-500">&#xebcb;</span>
</div> </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> <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"> <p class="text-slate-400 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. 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> </p>
<div class="grid grid-cols-2 gap-4 font-inter text-slate-700 text-sm relative z-10 pointer-events-none"> <div class="grid grid-cols-2 gap-4 font-inter text-slate-300 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">&#xe84d;</span>Zero CAPEX Required</div> <!-- account_balance -> &#xe84d; -->
<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">&#xf190;</span>Guaranteed Savings</div> <div class="bg-white/5 p-4 rounded-2xl border border-white/5"><span class="material-symbols-outlined text-[#ff6b00] block mb-2">&#xe84d;</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">&#xf0e2;</span>Free O&M Included</div> <!-- monitoring -> &#xf190; -->
<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">&#xe8e3;</span>Immediate ROI</div> <div class="bg-white/5 p-4 rounded-2xl border border-white/5"><span class="material-symbols-outlined text-[#ff6b00] block mb-2">&#xf190;</span>Guaranteed Savings</div>
<!-- support_agent -> &#xf0e2; -->
<div class="bg-white/5 p-4 rounded-2xl border border-white/5"><span class="material-symbols-outlined text-[#ff6b00] block mb-2">&#xf0e2;</span>Free O&M Included</div>
<!-- trending_down -> &#xe8e3; -->
<div class="bg-white/5 p-4 rounded-2xl border border-white/5"><span class="material-symbols-outlined text-[#ff6b00] block mb-2">&#xe8e3;</span>Immediate ROI</div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section id="dual-workflow" class="py-24 relative overflow-hidden bg-pearlescent border-y border-silver-accent"> <!-- ======================================================= -->
<!-- 核心更新：极度丝滑双轨执行流程 -->
<!-- ======================================================= -->
<section id="dual-workflow" class="py-24 relative overflow-hidden bg-[#060c09]">
<div class="container mx-auto px-6 relative z-10"> <div class="container mx-auto px-6 relative z-10">
<!-- 头部切换器 -->
<div class="text-center mb-24" data-aos="zoom-in"> <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> <h2 class="text-4xl md:text-[2.66rem] text-white mb-8 -subtitle">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 class="inline-flex bg-black/50 border border-white/10 p-1.5 rounded-full backdrop-blur-md relative overflow-hidden shadow-bento-dark">
<!-- 滑动背景块 -->
<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> <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"> <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-black transition-colors duration-300 flex items-center">
<!-- engineering -> &#xea3d; -->
<span class="material-symbols-outlined mr-2 text-base md:text-lg pointer-events-none">&#xea3d;</span> <span class="pointer-events-none">EPC Workflow</span> <span class="material-symbols-outlined mr-2 text-base md:text-lg pointer-events-none">&#xea3d;</span> <span class="pointer-events-none">EPC Workflow</span>
</button> </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 "> <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-400 hover:text-white transition-colors duration-300 flex items-center">
<!-- handshake -> &#xebcb; -->
<span class="material-symbols-outlined mr-2 text-base md:text-lg pointer-events-none">&#xebcb;</span> <span class="pointer-events-none">EMC/PPA Workflow</span> <span class="material-symbols-outlined mr-2 text-base md:text-lg pointer-events-none">&#xebcb;</span> <span class="pointer-events-none">EMC/PPA Workflow</span>
</button> </button>
</div> </div>
</div> </div>
<!-- 使用 Grid Wrapper 包裹 -->
<div class="tab-wrapper w-full relative"> <div class="tab-wrapper w-full relative">
<!-- EPC 流程内容 (6个步骤) -->
<div id="content-epc" class="tab-content active"> <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="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-white/10 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="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="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">&#xe55c;</span></div> <!-- my_location -> &#xe55c; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-primary flex items-center justify-center shadow-glow mb-0 lg:mb-6 shrink-0 group-hover:scale-110 transition-transform duration-500"><span class="material-symbols-outlined text-primary text-xl">&#xe55c;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center"> <div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-slate-900 mb-2">Site Survey</h4> <h4 class="text-lg text-white mb-2">Site Survey</h4>
<p class="text-slate-600 text-xs leading-relaxed">Comprehensive assessment of roof integrity, shading, and electrical infrastructure.</p> <p class="text-slate-500 text-xs leading-relaxed">Comprehensive assessment of roof integrity, shading, and electrical infrastructure.</p>
</div> </div>
</div> </div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger"> <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">&#xea3b;</span></div> <!-- architecture -> &#xea3b; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-white/30 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-white group-hover:text-primary transition-colors text-xl">&#xea3b;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center"> <div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-slate-900 mb-2">Engineering</h4> <h4 class="text-lg text-white mb-2">Engineering</h4>
<p class="text-slate-600 text-xs leading-relaxed">Precision CAD/3D design optimized for maximum energy density.</p> <p class="text-slate-500 text-xs leading-relaxed">Precision CAD/3D design optimized for maximum energy density.</p>
</div> </div>
</div> </div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger"> <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">&#xe1a1;</span></div> <!-- inventory_2 -> &#xe1a1; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-white/30 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-white group-hover:text-primary transition-colors text-xl">&#xe1a1;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center"> <div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-slate-900 mb-2">Procurement</h4> <h4 class="text-lg text-white mb-2">Procurement</h4>
<p class="text-slate-600 text-xs leading-relaxed">Sourcing high-efficiency components through our robust supply chain.</p> <p class="text-slate-500 text-xs leading-relaxed">Sourcing high-efficiency components through our robust supply chain.</p>
</div> </div>
</div> </div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger"> <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">&#xea3c;</span></div> <!-- construction -> &#xea3c; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-white/30 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-white group-hover:text-primary transition-colors text-xl">&#xea3c;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center"> <div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-slate-900 mb-2">Construction</h4> <h4 class="text-lg text-white mb-2">Construction</h4>
<p class="text-slate-600 text-xs leading-relaxed">Rigorous on-site management following international safety & quality standards.</p> <p class="text-slate-500 text-xs leading-relaxed">Rigorous on-site management following international safety & quality standards.</p>
</div> </div>
</div> </div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger"> <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">&#xf102;</span></div> <!-- electrical_services -> &#xf102; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-white/30 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-white group-hover:text-primary transition-colors text-xl">&#xf102;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center"> <div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-slate-900 mb-2">Grid & Testing</h4> <h4 class="text-lg text-white 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> <p class="text-slate-500 text-xs leading-relaxed">Handling all PEA/MEA permits and conducting strict pre-commissioning tests.</p>
</div> </div>
</div> </div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger"> <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">&#xf0e2;</span></div> <!-- support_agent -> &#xf0e2; -->
<div class="w-12 h-12 rounded-full bg-background-dark 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-black transition-colors text-xl">&#xf0e2;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center"> <div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-slate-900 mb-2">O&M</h4> <h4 class="text-lg text-white mb-2">O&M</h4>
<p class="text-slate-600 text-xs leading-relaxed">24/7 remote monitoring and localized cleaning/repair services.</p> <p class="text-slate-500 text-xs leading-relaxed">24/7 remote monitoring and localized cleaning/repair services.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- EMC 流程内容 (5个步骤) -->
<div id="content-emc" class="tab-content"> <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="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-white/10 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="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="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">&#xe4fc;</span></div> <!-- query_stats -> &#xe4fc; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-[#ff6b00] flex items-center justify-center shadow-[0_0_15px_rgba(255,107,0,0.4)] mb-0 lg:mb-6 shrink-0 group-hover:scale-110 transition-transform duration-500"><span class="material-symbols-outlined text-[#ff6b00] text-xl">&#xe4fc;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center"> <div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-slate-900 mb-2">Evaluation</h4> <h4 class="text-lg text-white mb-2">Evaluation</h4>
<p class="text-slate-600 text-xs leading-relaxed">Financial feasibility study based on your historical electricity bills.</p> <p class="text-slate-500 text-xs leading-relaxed">Financial feasibility study based on your historical electricity bills.</p>
</div> </div>
</div> </div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger hover-emc"> <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">&#xebc7;</span></div> <!-- contract -> &#xf0c9; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-white/30 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-white group-hover:text-[#ff6b00] transition-colors text-xl">&#xebc7;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center"> <div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-slate-900 mb-2">Agreement</h4> <h4 class="text-lg text-white mb-2">Agreement</h4>
<p class="text-slate-600 text-xs leading-relaxed">Clear, transparent PPA (Power Purchase Agreement) with no hidden fees.</p> <p class="text-slate-500 text-xs leading-relaxed">Clear, transparent PPA (Power Purchase Agreement) with no hidden fees.</p>
</div> </div>
</div> </div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger hover-emc"> <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">&#xf049;</span></div> <!-- precision_manufacturing -> &#xf049; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-white/30 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-white group-hover:text-[#ff6b00] transition-colors text-xl">&#xf049;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center"> <div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-slate-900 mb-2">Deployment</h4> <h4 class="text-lg text-white mb-2">Deployment</h4>
<p class="text-slate-600 text-xs leading-relaxed">Rapid installation and commissioning by our expert engineering team.</p> <p class="text-slate-500 text-xs leading-relaxed">Rapid installation and commissioning by our expert engineering team.</p>
</div> </div>
</div> </div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger hover-emc"> <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">&#xe6df;</span></div> <!-- energy_savings_leaf -> &#xec46; -->
<div class="w-12 h-12 rounded-full bg-background-dark border-2 border-white/30 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-white group-hover:text-[#ff6b00] transition-colors text-xl">&#xe6df;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center"> <div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-slate-900 mb-2">Management</h4> <h4 class="text-lg text-white mb-2">Management</h4>
<p class="text-slate-600 text-xs leading-relaxed">Intelligent dispatching of solar and storage to optimize self-consumption.</p> <p class="text-slate-500 text-xs leading-relaxed">Intelligent dispatching of solar and storage to optimize self-consumption.</p>
</div> </div>
</div> </div>
<div class="relative z-10 flex lg:flex-col items-center group flex-1 px-2 hover-trigger hover-emc"> <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">&#xe2eb;</span></div> <!-- savings -> &#xe2eb; -->
<div class="w-12 h-12 rounded-full bg-background-dark 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-black transition-colors text-xl">&#xe2eb;</span></div>
<div class="ml-6 lg:ml-0 lg:text-center"> <div class="ml-6 lg:ml-0 lg:text-center">
<h4 class="text-lg text-slate-900 mb-2">Benefit Share</h4> <h4 class="text-lg text-white 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> <p class="text-slate-500 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>
@ -496,164 +549,197 @@
</div> </div>
</section> </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> <!-- 信任枢纽：运维 SLA、资质与顶级供应链生态 (大气专业版) -->
<section id="trust" class="py-32 bg-[#030604] border-y border-white/5 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/5 to-transparent blur-[120px] pointer-events-none"></div>
<div class="container mx-auto px-6 relative z-10"> <div class="container mx-auto px-6 relative z-10">
<!-- 模块标题 -->
<div class="text-center mb-20" data-aos="fade-up"> <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> <div class="text-primary font-mono text-sm tracking-widest mb-4 uppercase flex justify-center items-center inline-block px-3 py-1 rounded-full">Trust & Service</div>
<h3 class="text-4xl md:text-[2.66rem] text-slate-900 ">Built on Absolute Reliability.</h3> <h3 class="text-4xl md:text-[2.66rem] text-white -subtitle">Built on Absolute Reliability.</h3>
</div> </div>
<!-- 上半部：运维服务 SLA 与 国际资质 (水平全宽布局) -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8"> <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">
<!-- 运维 SLA 核心卡片 (占据 2 列，展现大气) -->
<div data-aos="fade-right" class="lg:col-span-2 hover-trigger group bg-[#0a110e] border border-white/5 rounded-[2rem] p-10 md:p-14 hover:border-primary/30 transition-colors 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="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"> <div class="flex items-center mb-10">
<!-- support_agent -> &#xf0e2; -->
<span class="material-symbols-outlined text-primary text-4xl mr-4">&#xf0e2;</span> <span class="material-symbols-outlined text-primary text-4xl mr-4">&#xf0e2;</span>
<div> <div>
<h4 class="text-2xl md:text-3xl text-slate-900">Localized O&M Support</h4> <h4 class="text-2xl md:text-3xl text-white">Localized O&M Support</h4>
<p class="text-slate-600 mt-1">24/7/365 lifecycle protection for your energy assets.</p> <p class="text-slate-400 mt-1">24/7/365 lifecycle protection for your energy assets.</p>
</div> </div>
</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="grid grid-cols-1 md:grid-cols-3 gap-8 divide-y md:divide-y-0 md:divide-x divide-white/10">
<!-- SLA 1: 2H -->
<div class="pt-6 md:pt-0 md:pr-8 group-hover:pl-2 transition-all duration-300"> <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-4xl font-mono text-white 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> <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> <p class="text-sm text-slate-500 leading-relaxed">Technical Consultation Response within 2 hours.</p>
</div> </div>
<!-- SLA 2: 24H -->
<div class="pt-6 md:pt-0 md:px-8 group-hover:pl-10 transition-all duration-300 delay-75"> <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-4xl font-mono text-white 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> <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> <p class="text-sm text-slate-500 leading-relaxed">Remote Diagnosis & Solution proposition.</p>
</div> </div>
<!-- SLA 3: 48H -->
<div class="pt-6 md:pt-0 md:pl-8 group-hover:pl-10 transition-all duration-300 delay-150"> <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-4xl font-mono text-white mb-2 flex items-baseline">48<span class="text-white text-xl ml-1">H</span></div>
<div class="text-xs text-slate-500 uppercase tracking-widest mb-2 ">On-Site</div> <div class="text-xs text-slate-300 uppercase tracking-widest mb-2 ">On-Site</div>
<p class="text-sm text-slate-600 leading-relaxed">On-site Engineering Support deployment.</p> <p class="text-sm text-slate-500 leading-relaxed">On-site Engineering Support deployment.</p>
</div> </div>
</div> </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"> <!-- 国际资质证书卡片 (占据 1 列，纵向排列) -->
<div class="absolute inset-0 bg-gradient-to-br from-slate-50 to-transparent pointer-events-none"></div> <div data-aos="fade-left" class="hover-trigger group bg-[#0a110e] border border-white/5 rounded-[2rem] p-10 md:p-14 flex flex-col justify-center relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent pointer-events-none"></div>
<div class="mb-8 relative z-10"> <div class="mb-8 relative z-10">
<span class="material-symbols-outlined text-slate-300 text-4xl mb-4 block">&#xe86c;</span> <!-- verified -> &#xe86c; -->
<h4 class="text-3xl text-slate-900 mb-2">Global Quality Benchmarks</h4> <span class="material-symbols-outlined text-white/50 text-4xl mb-4 block">&#xe86c;</span>
<p class="text-slate-600 text-sm">Strictest adherence to global standards.</p> <h4 class="text-3xl text-white mb-2">Global Quality Benchmarks</h4>
<p class="text-slate-400 text-sm">Strictest adherence to global standards.</p>
</div> </div>
<div class="flex flex-col gap-4 relative z-10"> <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-black/50 border border-white/5 text-slate-300 font-mono text-sm flex items-center 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-black/50 border border-white/5 text-slate-300 font-mono text-sm flex items-center 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 class="w-full px-5 py-3.5 rounded-xl bg-black/50 border border-white/5 text-slate-300 font-mono text-sm flex items-center 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>
</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"> <!-- 下半部：Tier-1 全球供应链联盟 (全宽横向跑马灯版) -->
<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 data-aos="fade-up" class="hover-trigger group bg-gradient-to-b from-[#0a110e] to-black border border-white/5 rounded-[2rem] 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-white/20 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="flex flex-col md:flex-row md:items-end justify-between mb-12 border-b border-white/10 pb-8 gap-6 pointer-events-none">
<div class="max-w-xl"> <div class="max-w-xl">
<span class="material-symbols-outlined text-slate-300 text-3xl mb-4 block">&#xe9f4;</span> <!-- hub -> &#xe9f4; -->
<h4 class="text-2xl md:text-3xl text-slate-900 mb-3">Tier-1 Ecosystem</h4> <span class="material-symbols-outlined text-white/30 text-3xl mb-4 block">&#xe9f4;</span>
<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> <h4 class="text-2xl md:text-3xl text-white mb-3">Tier-1 Ecosystem</h4>
<p class="text-slate-400 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-white font-mono mx-1 border-b border-primary/50"></span>years of industry expertise, ensuring lifecycle performance and uncompromised safety.</p>
</div> </div>
<div class="text-left md:text-right shrink-0"> <div class="text-left md:text-right shrink-0">
<div class="text-sm font-mono text-slate-900 ">100%</div> <div class="text-sm font-mono text-white ">100%</div>
<div class="text-[10px] text-slate-500 uppercase tracking-widest mt-1">Authentic Component Sourcing</div> <div class="text-[10px] text-slate-500 uppercase tracking-widest mt-1">Authentic Component Sourcing</div>
</div> </div>
</div> </div>
<!-- 核心更新：横向无缝跑马灯容器 (绝对等宽版) -->
<div data-no-translation class="marquee-container relative w-full overflow-hidden mask-edges-x py-2 cursor-default"> <div data-no-translation class="marquee-container relative w-full overflow-hidden mask-edges-x py-2 cursor-default">
<!-- 去除了 gap-x-6，改用 CSS 控制间距以保证总体宽度的绝对数学精度 -->
<div class="animate-marquee-x"> <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> <!-- ================= 第一组名单 (9个品牌) ================= -->
<div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-primary/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">LONGi</span>
</div> </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"> <div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-primary/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">JA Solar</span> <span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">JA Solar</span>
</div> </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"> <div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-[#ff6b00]/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">Trina Solar</span> <span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">Trina Solar</span>
</div> </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"> <div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-primary/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">Huawei</span> <span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">Huawei</span>
</div> </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"> <div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-[#ff6b00]/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">Sungrow</span> <span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">Sungrow</span>
</div> </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"> <div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-white/20 transition-all duration-300 hover:bg-white/5">
<span class="text-lg font-display text-slate-600 pointer-events-none">Ginlong</span> <span class="text-lg font-display text-slate-400 pointer-events-none">Ginlong</span>
</div> </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"> <div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-white/20 transition-all duration-300 hover:bg-white/5">
<span class="text-lg font-display text-slate-600 pointer-events-none">Chint</span> <span class="text-lg font-display text-slate-400 pointer-events-none">Chint</span>
</div> </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"> <div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-white/20 transition-all duration-300 hover:bg-white/5">
<span class="text-lg font-display text-slate-600 pointer-events-none">GoodWe</span> <span class="text-lg font-display text-slate-400 pointer-events-none">GoodWe</span>
</div> </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"> <div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-white/20 transition-all duration-300 hover:bg-white/5">
<span class="text-lg font-display text-slate-600 pointer-events-none">Deye</span> <span class="text-lg font-display text-slate-400 pointer-events-none">Deye</span>
</div> </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 class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-primary/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">LONGi</span>
</div> </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"> <div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-primary/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">JA Solar</span> <span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">JA Solar</span>
</div> </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"> <div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-[#ff6b00]/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">Trina Solar</span> <span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">Trina Solar</span>
</div> </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"> <div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-primary/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">Huawei</span> <span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">Huawei</span>
</div> </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"> <div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-[#ff6b00]/20 transition-all duration-300 hover:bg-white/5">
<span class="text-xl font-display text-slate-800 tracking-wider pointer-events-none">Sungrow</span> <span class="text-xl font-display text-slate-300 tracking-wider pointer-events-none">Sungrow</span>
</div> </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"> <div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-white/20 transition-all duration-300 hover:bg-white/5">
<span class="text-lg font-display text-slate-600 pointer-events-none">Ginlong</span> <span class="text-lg font-display text-slate-400 pointer-events-none">Ginlong</span>
</div> </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"> <div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-white/20 transition-all duration-300 hover:bg-white/5">
<span class="text-lg font-display text-slate-600 pointer-events-none">Chint</span> <span class="text-lg font-display text-slate-400 pointer-events-none">Chint</span>
</div> </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"> <div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-white/20 transition-all duration-300 hover:bg-white/5">
<span class="text-lg font-display text-slate-600 pointer-events-none">GoodWe</span> <span class="text-lg font-display text-slate-400 pointer-events-none">GoodWe</span>
</div> </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"> <div class="marquee-item h-20 flex justify-center items-center bg-black/40 rounded-xl border border-white/5 hover:border-white/20 transition-all duration-300 hover:bg-white/5">
<span class="text-lg font-display text-slate-600 pointer-events-none">Deye</span> <span class="text-lg font-display text-slate-400 pointer-events-none">Deye</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </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> <!-- 6. 标杆案例 (双轨 Swiper) -->
<div class="absolute bottom-0 left-0 w-[500px] h-[500px] bg-[#ff6b00]/10 blur-[150px] pointer-events-none"></div> <section id="cases" class="py-32 bg-[#060c09] overflow-hidden relative">
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-primary/5 blur-[150px] pointer-events-none"></div>
<div class="absolute bottom-0 left-0 w-[500px] h-[500px] bg-[#ff6b00]/5 blur-[150px] pointer-events-none"></div>
<div class="container mx-auto px-6 relative z-10"> <div class="container mx-auto px-6 relative z-10">
<div class="text-center mb-20" data-aos="fade-up"> <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> <div class="text-primary font-mono text-sm tracking-widest mb-4 uppercase flex justify-center items-center inline-block px-3 py-1 rounded-full">Success Stories</div>
<h3 class="text-4xl md:text-[2.66rem] text-slate-900 ">Our Portfolio</h3> <h3 class="text-4xl md:text-[2.66rem] text-white ">Our Portfolio</h3>
</div> </div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16">
<!-- ================= 左侧：EPC 轨道 (绿色系) ================= -->
<div data-aos="fade-right"> <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 justify-between mb-6 border-b border-white/10 pb-4">
<div class="flex items-center"> <div class="flex items-center">
<!-- engineering -> &#xea3d; -->
<span class="material-symbols-outlined text-primary text-3xl mr-3">&#xea3d;</span> <span class="material-symbols-outlined text-primary text-3xl mr-3">&#xea3d;</span>
<h4 class="text-3xl text-slate-900">Turnkey EPC</h4> <h4 class="text-3xl text-white">Turnkey EPC</h4>
</div> </div>
<div class="flex space-x-2 relative z-50"> <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">&#xe5c4;</span></button> <!-- arrow_back -> &#xe5c4; -->
<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">&#xe5c8;</span></button> <button id="epc-btn-prev" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center text-white hover:border-primary hover:text-primary transition-colors cursor-pointer hover-trigger"><span class="material-symbols-outlined text-sm pointer-events-none">&#xe5c4;</span></button>
<!-- arrow_forward -> &#xe5c8; -->
<button id="epc-btn-next" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center text-white hover:border-primary hover:text-primary transition-colors cursor-pointer hover-trigger"><span class="material-symbols-outlined text-sm pointer-events-none">&#xe5c8;</span></button>
</div> </div>
</div> </div>
<div class="swiper epc-swiper rounded-[2rem] overflow-hidden shadow-bento h-[450px]"> <div class="swiper epc-swiper rounded-[2rem] overflow-hidden shadow-bento-dark h-[450px]">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<!-- EPC Case 1 -->
<div class="swiper-slide hover-trigger group relative bg-black h-full cursor-grab active:cursor-grabbing"> <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 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-[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>
@ -662,6 +748,8 @@
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none"> <div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
<div class="flex justify-between items-start"> <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> <span class="px-4 py-1.5 bg-primary text-black text-[10px] rounded-full uppercase tracking-wider shadow-glow">Wind Power</span>
<!-- location_on -> &#xe0c8; -->
<!-- <span class="text-white font-mono text-sm flex items-center drop-shadow-md bg-black/30 px-3 py-1 rounded-full backdrop-blur-sm"><span class="material-symbols-outlined text-sm mr-1">&#xe0c8;</span> Yulin, CN</span> -->
</div> </div>
<div class="mb-6"> <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> <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>
@ -673,6 +761,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- EPC Case 2 -->
<div class="swiper-slide hover-trigger group relative bg-black h-full cursor-grab active:cursor-grabbing"> <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 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-[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>
@ -681,6 +770,7 @@
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none"> <div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
<div class="flex justify-between items-start"> <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> <span class="px-4 py-1.5 bg-primary text-black text-[10px] rounded-full uppercase tracking-wider shadow-glow">Dual-Axis Solar</span>
<!-- <span class="text-white font-mono text-sm flex items-center drop-shadow-md bg-black/30 px-3 py-1 rounded-full backdrop-blur-sm"><span class="material-symbols-outlined text-sm mr-1">&#xe0c8;</span> Southwest, CN</span> -->
</div> </div>
<div class="mb-6"> <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> <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>
@ -692,6 +782,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- EPC Case 3 -->
<div class="swiper-slide hover-trigger group relative bg-black h-full cursor-grab active:cursor-grabbing"> <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 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-[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>
@ -700,9 +791,10 @@
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none"> <div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
<div class="flex justify-between items-start"> <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> <span class="px-4 py-1.5 bg-primary text-black text-[10px] rounded-full uppercase tracking-wider shadow-glow">Grid Integration</span>
<!-- <span class="text-white font-mono text-sm flex items-center drop-shadow-md bg-black/30 px-3 py-1 rounded-full backdrop-blur-sm"><span class="material-symbols-outlined text-sm mr-1">&#xe0c8;</span> Regional, CN</span> -->
</div> </div>
<div class="mb-6"> <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> <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> <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 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">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>
@ -711,6 +803,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- EPC Case 4 -->
<div class="swiper-slide hover-trigger group relative bg-black h-full cursor-grab active:cursor-grabbing"> <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 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-[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>
@ -719,9 +812,10 @@
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none"> <div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
<div class="flex justify-between items-start"> <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> <span class="px-4 py-1.5 bg-primary text-black text-[10px] rounded-full uppercase tracking-wider shadow-glow">Agrivoltaics</span>
<!-- <span class="text-white font-mono text-sm flex items-center drop-shadow-md bg-black/30 px-3 py-1 rounded-full backdrop-blur-sm"><span class="material-symbols-outlined text-sm mr-1">&#xe0c8;</span> Terrain, CN</span> -->
</div> </div>
<div class="mb-6"> <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> <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> <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 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">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>
@ -735,20 +829,25 @@
</div> </div>
</div> </div>
<!-- ================= 右侧：EMC 轨道 (橙色系) ================= -->
<div data-aos="fade-left" data-aos-delay="100"> <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 justify-between mb-6 border-b border-white/10 pb-4">
<div class="flex items-center"> <div class="flex items-center">
<!-- handshake -> &#xebcb; -->
<span class="material-symbols-outlined text-[#ff6b00] text-3xl mr-3">&#xebcb;</span> <span class="material-symbols-outlined text-[#ff6b00] text-3xl mr-3">&#xebcb;</span>
<h4 class="text-3xl text-slate-900">EMC/PPA Contracts</h4> <h4 class="text-3xl text-white">EMC/PPA Contracts</h4>
</div> </div>
<div class="flex space-x-2 relative z-50"> <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">&#xe5c4;</span></button> <!-- arrow_back -> &#xe5c4; -->
<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">&#xe5c8;</span></button> <button id="emc-btn-prev" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center text-white hover:border-[#ff6b00] hover:text-[#ff6b00] transition-colors cursor-pointer hover-trigger hover-emc"><span class="material-symbols-outlined text-sm pointer-events-none">&#xe5c4;</span></button>
<!-- arrow_forward -> &#xe5c8; -->
<button id="emc-btn-next" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center text-white hover:border-[#ff6b00] hover:text-[#ff6b00] transition-colors cursor-pointer hover-trigger hover-emc"><span class="material-symbols-outlined text-sm pointer-events-none">&#xe5c8;</span></button>
</div> </div>
</div> </div>
<div class="swiper emc-swiper rounded-[2rem] overflow-hidden shadow-bento h-[450px]"> <div class="swiper emc-swiper rounded-[2rem] overflow-hidden shadow-[0_30px_60px_-15px_rgba(0,0,0,0.5)] h-[450px]">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<!-- EMC Case 1 -->
<div class="swiper-slide hover-trigger hover-emc group relative bg-black h-full cursor-grab active:cursor-grabbing"> <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 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-[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>
@ -757,6 +856,7 @@
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none"> <div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
<div class="flex justify-between items-start"> <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> <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>
<!-- <span class="text-white font-mono text-sm flex items-center drop-shadow-md bg-black/40 px-3 py-1 rounded-full backdrop-blur-sm"><span class="material-symbols-outlined text-sm mr-1">&#xe0c8;</span> Zhuhai, CN</span> -->
</div> </div>
<div class="mb-5"> <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> <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>
@ -774,6 +874,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- EMC Case 2 -->
<div class="swiper-slide hover-trigger hover-emc group relative bg-black h-full cursor-grab active:cursor-grabbing"> <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 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-[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>
@ -782,6 +883,7 @@
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none"> <div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
<div class="flex justify-between items-start"> <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> <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>
<!-- <span class="text-white font-mono text-sm flex items-center drop-shadow-md bg-black/40 px-3 py-1 rounded-full backdrop-blur-sm"><span class="material-symbols-outlined text-sm mr-1">&#xe0c8;</span> B7 Mfg, CN</span> -->
</div> </div>
<div class="mb-5"> <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> <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>
@ -799,6 +901,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- EMC Case 3 -->
<div class="swiper-slide hover-trigger hover-emc group relative bg-black h-full cursor-grab active:cursor-grabbing"> <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 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-[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>
@ -807,6 +910,7 @@
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none"> <div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
<div class="flex justify-between items-start"> <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> <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>
<!-- <span class="text-white font-mono text-sm flex items-center drop-shadow-md bg-black/40 px-3 py-1 rounded-full backdrop-blur-sm"><span class="material-symbols-outlined text-sm mr-1">&#xe0c8;</span> Xinfei, CN</span> -->
</div> </div>
<div class="mb-5"> <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> <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>
@ -824,6 +928,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- EMC Case 4 -->
<div class="swiper-slide hover-trigger hover-emc group relative bg-black h-full cursor-grab active:cursor-grabbing"> <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 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-[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>
@ -832,6 +937,7 @@
<div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none"> <div class="absolute inset-0 p-8 flex flex-col justify-between pointer-events-none">
<div class="flex justify-between items-start"> <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> <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>
<!-- <span class="text-white font-mono text-sm flex items-center drop-shadow-md bg-black/40 px-3 py-1 rounded-full backdrop-blur-sm"><span class="material-symbols-outlined text-sm mr-1">&#xe0c8;</span> Cheng-Ou, CN</span> -->
</div> </div>
<div class="mb-5"> <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> <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>
@ -857,25 +963,32 @@
</div> </div>
</section> </section>
<section id="contact" class="py-24 relative bg-liquid-gradient"> <!-- 行动呼吁 -->
<section id="contact" class="py-24 relative bg-[#0a1410]">
<div class="container mx-auto px-6 text-center z-10 relative" data-aos="zoom-in"> <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> <h2 class="text-4xl md:text-[2.66rem] text-white mb-8">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> <p class="text-[1rem] text-slate-400 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"> <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"> <a href="/contact-us" class="magnetic-btn hover-trigger bg-primary text-black px-12 py-5 rounded-full text-lg hover:shadow-[0_0_40px_rgba(19,236,164,0.4)] transition-all flex items-center justify-center">
<!-- description -> &#xe873; -->
<span class="material-symbols-outlined mr-2 pointer-events-none">&#xe873;</span> <span class="pointer-events-none">Connect with Local Experts</span> <span class="material-symbols-outlined mr-2 pointer-events-none">&#xe873;</span> <span class="pointer-events-none">Connect with Local Experts</span>
</a> </a>
<!-- <button class="magnetic-btn hover-trigger hover-emc bg-transparent border border-white/20 text-white px-12 py-5 rounded-full text-lg hover:border-[#ff6b00] hover:text-[#ff6b00] transition-all">
<span class="pointer-events-none">Become a Channel Partner</span>
</button> -->
</div> </div>
</div> </div>
</section> </section>
<!-- ================= 核心依赖与高级 JS 交互引擎 ================= -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script> <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/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
<!-- 引入 Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// 动态计算公司成立年份 // 动态计算公司成立年份 (从 2009 年起算)
const calculateYearsOfExperience = () => { const calculateYearsOfExperience = () => {
const startYear = 2009; const startYear = 2009;
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
@ -892,7 +1005,7 @@
if(typeof AOS !== 'undefined') AOS.init({ duration: 800, once: true, offset: 50 }); 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 }); 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) - 针对亮色系修正文字颜色反馈 // 2. 双轨流程切换交互 (Tab Workflows)
const btnEpc = document.getElementById('btn-epc'); const btnEpc = document.getElementById('btn-epc');
const btnEmc = document.getElementById('btn-emc'); const btnEmc = document.getElementById('btn-emc');
const contentEpc = document.getElementById('content-epc'); const contentEpc = document.getElementById('content-epc');
@ -901,10 +1014,10 @@
const switchTab = (tab) => { const switchTab = (tab) => {
if (tab === 'epc') { if (tab === 'epc') {
btnEpc.classList.add('text-slate-900'); btnEpc.classList.add('text-black');
btnEpc.classList.remove('text-slate-500'); btnEpc.classList.remove('text-slate-400');
btnEmc.classList.remove('text-slate-900'); btnEmc.classList.remove('text-black');
btnEmc.classList.add('text-slate-500'); btnEmc.classList.add('text-slate-400');
slider.style.transition = 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)'; slider.style.transition = 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)';
slider.style.transform = 'translateX(0)'; slider.style.transform = 'translateX(0)';
@ -913,10 +1026,10 @@
contentEmc.classList.remove('active'); contentEmc.classList.remove('active');
contentEpc.classList.add('active'); contentEpc.classList.add('active');
} else { } else {
btnEmc.classList.add('text-slate-900'); btnEmc.classList.add('text-black');
btnEmc.classList.remove('text-slate-500'); btnEmc.classList.remove('text-slate-400');
btnEpc.classList.remove('text-slate-900'); btnEpc.classList.remove('text-black');
btnEpc.classList.add('text-slate-500'); btnEpc.classList.add('text-slate-400');
slider.style.transition = 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)'; slider.style.transition = 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)';
slider.style.transform = 'translateX(100%)'; slider.style.transform = 'translateX(100%)';
@ -929,6 +1042,20 @@
if(btnEpc) btnEpc.addEventListener('click', () => switchTab('epc')); if(btnEpc) btnEpc.addEventListener('click', () => switchTab('epc'));
if(btnEmc) btnEmc.addEventListener('click', () => switchTab('emc')); if(btnEmc) btnEmc.addEventListener('click', () => switchTab('emc'));
// 3. 导航栏滚效 (虽然 HTML 移除了，但保留 JS 防报错)
const nav = document.getElementById('main-nav');
if(nav) {
window.addEventListener('scroll', () => {
if(window.scrollY > 50) {
nav.classList.add('bg-background-dark/80', 'backdrop-blur-xl', 'py-4', 'border-white/5');
nav.classList.remove('bg-transparent', 'py-6', 'border-transparent');
} else {
nav.classList.remove('bg-background-dark/80', 'backdrop-blur-xl', 'py-4', 'border-white/5');
nav.classList.add('bg-transparent', 'py-6', 'border-transparent');
}
});
}
// 4. 自定义光标 // 4. 自定义光标
const cursor = document.getElementById('energy-cursor'); const cursor = document.getElementById('energy-cursor');
const hoverTriggers = document.querySelectorAll('a, button, .hover-trigger'); const hoverTriggers = document.querySelectorAll('a, button, .hover-trigger');
@ -978,6 +1105,39 @@
}); });
} }
// 7. 滚动数字
const counters = document.querySelectorAll('.count-up');
const counterSection = document.getElementById('counter-section');
let started = false;
const runCounter = () => {
counters.forEach(counter => {
const target = parseFloat(counter.getAttribute('data-target'));
const isFloat = counter.getAttribute('data-is-float') === 'true';
const totalFrames = Math.round(2000 / (1000 / 60));
let currentFrame = 0;
const updateCounter = () => {
currentFrame++;
const progress = currentFrame / totalFrames === 1 ? 1 : 1 - Math.pow(2, -10 * (currentFrame / totalFrames));
const currentVal = target * progress;
counter.innerText = isFloat ? currentVal.toFixed(1) : Math.floor(currentVal);
if (currentFrame < totalFrames) requestAnimationFrame(updateCounter);
else counter.innerText = target;
};
updateCounter();
});
};
if (counterSection) {
if( 'IntersectionObserver' in window) {
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !started) {
started = true; runCounter();
}
}, { threshold: 0.5 });
observer.observe(counterSection);
}
}
// 8. Swiper 左右画中画初始化 // 8. Swiper 左右画中画初始化
if (typeof Swiper !== 'undefined') { if (typeof Swiper !== 'undefined') {
const commonConfig = { const commonConfig = {
@ -1006,4 +1166,7 @@
}); });
</script> </script>
</body> </body>
</html>
</html>

2761
html/home.html
View File

File diff suppressed because it is too large Load Diff

22
html/product copy.html
Unescape View File

@ -294,7 +294,7 @@
--> -->
<div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="0"> <div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="0">
<div class="skeleton-wrapper relative h-64 w-full bg-gradient-to-b from-[#787878] to-white dark:from-[#333] dark:to-[#111318] flex items-center justify-center p-6 transition-all duration-500 group-hover:from-[#666666] group-hover:to-[#e6fcf5]"> <div class="skeleton-wrapper relative h-64 w-full bg-gradient-to-b from-[#787878] to-white dark:from-[#333] dark:to-[#111318] flex items-center justify-center p-6 transition-all duration-500 group-hover:from-[#666666] group-hover:to-[#e6fcf5]">
<div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-[#295ca8] text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10"> <div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-primary text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10">
≥93% Efficiency ≥93% Efficiency
</div> </div>
<div class="lazy-target w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500" data-alt="Liquid-cooled Battery Cabinet 418kWh" <div class="lazy-target w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500" data-alt="Liquid-cooled Battery Cabinet 418kWh"
@ -328,7 +328,7 @@
<p class="text-[#5f6e8c] dark:text-gray-400 text-sm leading-relaxed mb-6 line-clamp-4"> <p class="text-[#5f6e8c] dark:text-gray-400 text-sm leading-relaxed mb-6 line-clamp-4">
Nenghui all-in-one liquid-cooled ESS cabinet adopts advanced cabinet-level liquid cooling and temperature balancing strategy. The cell temperature difference is less than 3°C, which further improves the consistency of cell temperature and extends the battery life. The modular design makes the parallel solution more flexible and has a higher energy density, which significantly improves the economy, safety and construction convenience of ESS projects. Nenghui all-in-one liquid-cooled ESS cabinet adopts advanced cabinet-level liquid cooling and temperature balancing strategy. The cell temperature difference is less than 3°C, which further improves the consistency of cell temperature and extends the battery life. The modular design makes the parallel solution more flexible and has a higher energy density, which significantly improves the economy, safety and construction convenience of ESS projects.
</p> </p>
<a href="/products/ne418l/"> <a href="https://nenghui.com/products/ne418l/">
<button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow"> <button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow">
<span>View Datasheet</span> <span>View Datasheet</span>
<span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform">&#xe5c8;</span> <span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform">&#xe5c8;</span>
@ -378,7 +378,7 @@
</div>--> </div>-->
<div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="0"> <div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="0">
<div class=" skeleton-wrapper relative h-64 w-full bg-gradient-to-b from-[#787878] to-white dark:from-[#333] dark:to-[#111318] flex items-center justify-center p-6 transition-all duration-500 group-hover:from-[#666666] group-hover:to-[#e6fcf5]"> <div class=" skeleton-wrapper relative h-64 w-full bg-gradient-to-b from-[#787878] to-white dark:from-[#333] dark:to-[#111318] flex items-center justify-center p-6 transition-all duration-500 group-hover:from-[#666666] group-hover:to-[#e6fcf5]">
<div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-[#295ca8] text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10"> <div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-primary text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10">
≥90% Efficiency ≥90% Efficiency
</div> </div>
<div class="lazy-target w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500" data-alt="All-in-one Liquid-cooled ESS Cabinet 233kWh" <div class="lazy-target w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500" data-alt="All-in-one Liquid-cooled ESS Cabinet 233kWh"
@ -412,7 +412,7 @@
<p class="text-[#5f6e8c] dark:text-gray-400 text-sm leading-relaxed mb-6 line-clamp-4"> <p class="text-[#5f6e8c] dark:text-gray-400 text-sm leading-relaxed mb-6 line-clamp-4">
Nenghui all-in-one liquid-cooled ESS cabinet adopts advanced cabinet-level liquid cooling and temperature balancing strategy. The cell temperature difference is less than 3°C, which further improves the consistency of cell temperature and extends the battery life. The modular design makes the parallel solution more flexible and has a higher energy density, which significantly improves the economy, safety and construction convenience of ESS projects. Nenghui all-in-one liquid-cooled ESS cabinet adopts advanced cabinet-level liquid cooling and temperature balancing strategy. The cell temperature difference is less than 3°C, which further improves the consistency of cell temperature and extends the battery life. The modular design makes the parallel solution more flexible and has a higher energy density, which significantly improves the economy, safety and construction convenience of ESS projects.
</p> </p>
<a href="/products/ne233l/"> <a href="https://nenghui.com/products/ne233l/">
<button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow"> <button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow">
<span>View Datasheet</span> <span>View Datasheet</span>
<span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform">&#xe5c8;</span> <span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform">&#xe5c8;</span>
@ -456,7 +456,7 @@
--> -->
<div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="0"> <div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="0">
<div class=" skeleton-wrapper relative h-64 w-full bg-gradient-to-b from-[#787878] to-white dark:from-[#333] dark:to-[#111318] flex items-center justify-center p-6 transition-all duration-500 group-hover:from-[#666666] group-hover:to-[#e6fcf5]"> <div class=" skeleton-wrapper relative h-64 w-full bg-gradient-to-b from-[#787878] to-white dark:from-[#333] dark:to-[#111318] flex items-center justify-center p-6 transition-all duration-500 group-hover:from-[#666666] group-hover:to-[#e6fcf5]">
<div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-[#295ca8] text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10"> <div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-primary text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10">
≥90% Efficiency ≥90% Efficiency
</div> </div>
<div class="lazy-target w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500" <div class="lazy-target w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500"
@ -492,7 +492,7 @@
Nenghui all-in-one liquid-cooled ESS cabinet adopts advanced cabinet-level liquid cooling and temperature balancing strategy. The cell temperature difference is less than 3°C, which further improves the consistency of cell temperature and extends the battery life. The modular design makes the parallel solution more flexible and has a higher energy density, which significantly improves the economy, safety and construction convenience of ESS projects. Nenghui all-in-one liquid-cooled ESS cabinet adopts advanced cabinet-level liquid cooling and temperature balancing strategy. The cell temperature difference is less than 3°C, which further improves the consistency of cell temperature and extends the battery life. The modular design makes the parallel solution more flexible and has a higher energy density, which significantly improves the economy, safety and construction convenience of ESS projects.
</p> </p>
<a href="/products/ne261l/"> <a href="https://nenghui.com/products/ne261l/">
<button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow"> <button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow">
<span>View Datasheet</span> <span>View Datasheet</span>
<span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform">&#xe5c8;</span> <span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform">&#xe5c8;</span>
@ -534,7 +534,7 @@
</div>--> </div>-->
<div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="0"> <div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="0">
<div class="skeleton-wrapper relative h-64 w-full bg-gradient-to-b from-[#787878] to-white dark:from-[#333] dark:to-[#111318] flex items-center justify-center p-6 transition-all duration-500 group-hover:from-[#666666] group-hover:to-[#e6fcf5]"> <div class="skeleton-wrapper relative h-64 w-full bg-gradient-to-b from-[#787878] to-white dark:from-[#333] dark:to-[#111318] flex items-center justify-center p-6 transition-all duration-500 group-hover:from-[#666666] group-hover:to-[#e6fcf5]">
<div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-[#295ca8] text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10"> <div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-primary text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10">
≥93% Efficiency ≥93% Efficiency
</div> </div>
<div class="lazy-target w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500" <div class="lazy-target w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500"
@ -569,7 +569,7 @@
<p class="text-[#5f6e8c] dark:text-gray-400 text-sm leading-relaxed mb-6 line-clamp-4"> <p class="text-[#5f6e8c] dark:text-gray-400 text-sm leading-relaxed mb-6 line-clamp-4">
Nenghui’s N20HC5000 factory-assembled DC battery storage container ships with 12 battery racks on the 5.015MWh 20ft container, power distribution cabinet, fire suppression system and advanced liquid-cooling system. And the module is made up of 1P104S LFP prismatic cells. Each cell undergoes strict quality inspections to ensure high energy density, wide operating temperature range, extended battery life, as well as the highest protection and safety features. Nenghui’s N20HC5000 factory-assembled DC battery storage container ships with 12 battery racks on the 5.015MWh 20ft container, power distribution cabinet, fire suppression system and advanced liquid-cooling system. And the module is made up of 1P104S LFP prismatic cells. Each cell undergoes strict quality inspections to ensure high energy density, wide operating temperature range, extended battery life, as well as the highest protection and safety features.
</p> </p>
<a href="/products/n20hc5000/"> <a href="https://nenghui.com/products/n20hc5000/">
<button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow"> <button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow">
<span>View Datasheet</span> <span>View Datasheet</span>
<span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform">&#xe5c8;</span> <span class="material-symbols-outlined text-[18px] group-hover:translate-x-1 transition-transform">&#xe5c8;</span>
@ -581,12 +581,12 @@
<!-- Card 5: High Performance Residential --> <!-- Card 5: High Performance Residential -->
<div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="100"> <div data-category="residential" class="product-card break-inside-avoid bg-white dark:bg-card-dark rounded-xl overflow-hidden border border-[#e5e7eb] dark:border-[#2a3441] shadow-sm hover:shadow-card-hover hover:border-primary/40 group" data-aos="fade-up" data-aos-delay="100">
<div class="skeleton-wrapper relative h-64 w-full bg-gradient-to-b from-[#787878] to-white dark:from-[#333] dark:to-[#111318] flex items-center justify-center p-6 transition-all duration-500 group-hover:from-[#666666] group-hover:to-[#e6fcf5]"> <div class="skeleton-wrapper relative h-64 w-full bg-gradient-to-b from-[#787878] to-white dark:from-[#333] dark:to-[#111318] flex items-center justify-center p-6 transition-all duration-500 group-hover:from-[#666666] group-hover:to-[#e6fcf5]">
<div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-[#295ca8] text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10"> <div class="absolute top-4 right-4 bg-white/90 dark:bg-[#2a3441]/90 backdrop-blur text-primary text-xs px-2.5 py-1 rounded shadow-sm border border-primary/10 z-10">
≥95% Efficiency ≥95% Efficiency
</div> </div>
<div class="lazy-target w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500" <div class="lazy-target w-full h-full bg-center bg-no-repeat bg-contain transform group-hover:scale-105 transition-transform duration-500"
data-alt="Max EV Charging Power: 180kW ESS: 261kWh" data-alt="Max EV Charging Power: 180kW ESS: 261kWh"
data-bg="https://nenghui.com/wp-content/uploads/2026/03/NH-ICS180-261-2-1.jpg"></div> data-bg="https://nenghui.com/wp-content/uploads/2026/02/product-NH-ICS180-261-scaled.jpg"></div>
</div> </div>
<div class="p-5"> <div class="p-5">
<div class="flex items-center gap-2 mb-3"> <div class="flex items-center gap-2 mb-3">
@ -616,7 +616,7 @@
<!-- Our premium solid-state solution offering higher energy density and improved safety profile in a slimmer form factor. --> <!-- Our premium solid-state solution offering higher energy density and improved safety profile in a slimmer form factor. -->
Nenghui ESS-Charger integrated charging and storage solution combines DC fast charging with a built-in 261 kWh battery. It enables peak shaving and load shifting to reduce grid impact and enhances operational flexibility. It delivers efficient and reliable fast charging (1*180kw or 2*90kw) while maintaining compatibility with multiple global charging standards. An intelligent operation platform supports OCPP integration, real-time load balancing, and remote monitoring, ensuring optimized asset utilization and seamless coordination with the overall power system. Nenghui ESS-Charger integrated charging and storage solution combines DC fast charging with a built-in 261 kWh battery. It enables peak shaving and load shifting to reduce grid impact and enhances operational flexibility. It delivers efficient and reliable fast charging (1*180kw or 2*90kw) while maintaining compatibility with multiple global charging standards. An intelligent operation platform supports OCPP integration, real-time load balancing, and remote monitoring, ensuring optimized asset utilization and seamless coordination with the overall power system.
</p> </p>
<a href="/products/nh-ics180-261/"> <a href="https://nenghui.com/products/nh-ics180-261/">
<button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow"> <button class="w-full flex items-center justify-center gap-2 h-11 rounded-lg bg-[#f0f1f5] dark:bg-[#2a3441] text-[#111318] dark:text-white text-sm hover:bg-[#e0e2e8] dark:hover:bg-[#374151] transition-all group-hover:bg-primary group-hover:text-white group-hover:shadow-glow">
<span>View Datasheet</span> <span>View Datasheet</span>
</button> </button>

106
wp-content/themes/nenghui-energy-theme-4/404.php
Unescape View File

@ -1,106 +0,0 @@
<?php
/**
* The template for displaying 404 pages (Not Found)
* Theme: NENGHUI Energy - Borderless Digital Space & 3D Typography
*/
// 强制修改标题
add_filter('pre_get_document_title', function() { return '404'; }, 9999);
add_filter('wp_title', function() { return '404'; }, 9999);
get_header(); ?>
<style>
:root {
--nh-primary: #13eca4;
--nh-dark: #121010;
--nh-bg-light: #f8fcfa;
}
/* 确保主背景通透大气 */
.nh-404-canvas {
min-height: 100vh;
background: #f8fcfa; /* 使用你定义的背景底色 */
background: linear-gradient(135deg, #f8fcfa 0%, #f0f7f5 50%, #dcfce7 60%);
font-family: 'Inter', sans-serif;
color: var(--nh-dark);
position: relative;
overflow: hidden;
}
.font-display { font-family: 'Space Grotesk', sans-serif; }
/* * 核心视觉：3D 立体悬浮数字 404
* 利用多层 text-shadow 营造绿色霓虹的厚度感
*/
.text-3d-glow {
color: white; /* 亮色前景 */
/* 1层：核心亮绿霓虹 */
text-shadow: 0 1px 0 #b3f3db,
0 2px 0 #83f0ca,
0 3px 0 #54eeb8,
0 4px 0 #13eca4, /* 主色层 */
/* 2层：向下的柔和深色投影 */
0 6px 1px rgba(0,0,0,0.1),
0 0 5px rgba(0,0,0,0.1),
/* 3层：绿色氛围发光 (Neon Glow) */
0 1px 15px rgba(19, 236, 164, 0.4),
0 3px 25px rgba(19, 236, 164, 0.2);
}
/* 微动效 */
@keyframes float-soft {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.floating-text {
animation: float-soft 5s ease-in-out infinite;
}
</style>
<main class="nh-404-canvas relative flex items-center justify-center p-8 overflow-hidden">
<div class="fixed inset-0 pointer-events-none z-0">
<div class="absolute -top-[10%] -left-[10%] w-[50%] h-[50%] bg-primary/5 rounded-full blur-[150px] animate-blob-spin"></div>
<div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-teal-200/20 rounded-full blur-[120px]"></div>
</div>
<div class="relative z-10 w-full max-w-4xl text-center" data-aos="fade-up" data-aos-duration="1200">
<div class="flex flex-col items-center mb-24">
<h1 class="text-3d-glow font-display text-[150px] md:text-[200px] font-black tracking-tighter leading-none floating-text">
404
</h1>
</div>
<div class="space-y-6 mb-24 flex flex-col items-center">
<h2 class="font-display text-3xl text-background-dark tracking-tight leading-tight max-w-lg">
Oops! That page can't be found.
</h2>
<p>You might have typed in the wrong address or the page has moved.</p>
</div>
<div class="flex flex-col sm:flex-row items-center justify-center gap-8 mt-12 w-full sm:w-auto">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"
class="w-full sm:w-auto px-16 h-16 bg-primary text-background-dark font-bold rounded-full flex items-center justify-center shadow-lg shadow-primary/20 hover:shadow-primary/40 hover:scale-105 transition-all duration-300 text-xs uppercase tracking-[0.2em]">
Go Homepage
</a>
<a href="<?php echo esc_url( home_url( '/contact-us/' ) ); ?>"
class="w-full sm:w-auto px-16 h-16 bg-white/60 backdrop-blur-md border border-primary/10 text-background-dark font-bold rounded-full flex items-center justify-center hover:bg-white transition-all duration-300 text-xs uppercase tracking-[0.2em]">
Contact Us
</a>
</div>
</div>
</main>
<script>
// 最终保险：JS 强制修改标题
document.title = "Shanghai Nenghui Energy: Innovative ESS Solutions";
</script>
<?php get_footer(); ?>

5
wp-content/themes/nenghui-energy-theme-4/assets/css/index.css
Unescape View File

@ -250,7 +250,7 @@ img {
.banner-title { .banner-title {
font-size: 3rem; font-size: 3rem;
font-weight: bold;
margin-bottom: 1rem; margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
} }
@ -434,7 +434,8 @@ img {
} }
.news-title { .news-title {
font-size: 42px; font-size: 48px;
font-weight: bold;
color: #333; color: #333;
letter-spacing: 2px; letter-spacing: 2px;
} }

35
wp-content/themes/nenghui-energy-theme-4/assets/js/globe.2.32.2.min.js vendored
View File

File diff suppressed because one or more lines are too long

104
wp-content/themes/nenghui-energy-theme-4/assets/js/index.js
Unescape View File

@ -299,62 +299,62 @@ document.addEventListener('DOMContentLoaded', function() {
// }); // });
// 鼠标移入移出导航栏效果 // 鼠标移入移出导航栏效果
// nav.addEventListener('mouseenter', function() { nav.addEventListener('mouseenter', function() {
// nav.classList.add('scrolled'); nav.classList.add('scrolled');
// nav.style.backgroundColor = '#fff'; nav.style.backgroundColor = '#fff';
// nav.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)'; nav.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
// // 设置菜单项颜色为黑色 // 设置菜单项颜色为黑色
// const menuLinks = nav.querySelectorAll('.menu-items > li > a'); const menuLinks = nav.querySelectorAll('.menu-items > li > a');
// menuLinks.forEach(link => { menuLinks.forEach(link => {
// link.style.color = '#ddd'; link.style.color = '#000';
// }); });
// // 确保下拉菜单项保持黑色 // 确保下拉菜单项保持黑色
// const subMenuLinks = nav.querySelectorAll('.sub-menu li a'); const subMenuLinks = nav.querySelectorAll('.sub-menu li a');
// subMenuLinks.forEach(link => { subMenuLinks.forEach(link => {
// link.style.color = '#333'; link.style.color = '#333';
// }); });
// }); });
// nav.addEventListener('mouseleave', function() { nav.addEventListener('mouseleave', function() {
// const currentScroll = window.pageYOffset; const currentScroll = window.pageYOffset;
// // 根据当前滚动位置决定是否保持背景色 // 根据当前滚动位置决定是否保持背景色
// if (currentScroll <= 80) { if (currentScroll <= 80) {
// nav.classList.remove('scrolled'); nav.classList.remove('scrolled');
// nav.style.backgroundColor = ''; nav.style.backgroundColor = '';
// nav.style.boxShadow = ''; nav.style.boxShadow = '';
// // 设置菜单项颜色为白色 // 设置菜单项颜色为白色
// const menuLinks = nav.querySelectorAll('.menu-items > li > a'); const menuLinks = nav.querySelectorAll('.menu-items > li > a');
// menuLinks.forEach(link => { menuLinks.forEach(link => {
// link.style.color = '#333'; link.style.color = '#333';
// }); });
// // 确保下拉菜单项保持黑色 // 确保下拉菜单项保持黑色
// const subMenuLinks = nav.querySelectorAll('.sub-menu li a'); const subMenuLinks = nav.querySelectorAll('.sub-menu li a');
// subMenuLinks.forEach(link => { subMenuLinks.forEach(link => {
// link.style.color = '#333'; link.style.color = '#333';
// }); });
// } }
// }); });
// 为有子菜单的项目添加特殊处理 // 为有子菜单的项目添加特殊处理
// const menuItemsWithChildren = nav.querySelectorAll('.menu-item-has-children'); const menuItemsWithChildren = nav.querySelectorAll('.menu-item-has-children');
// menuItemsWithChildren.forEach(function(item) { menuItemsWithChildren.forEach(function(item) {
// item.addEventListener('mouseenter', function() { item.addEventListener('mouseenter', function() {
// // 确保导航栏有背景色以便下拉菜单显示 // 确保导航栏有背景色以便下拉菜单显示
// nav.classList.add('scrolled'); nav.classList.add('scrolled');
// nav.style.backgroundColor = '#fff'; nav.style.backgroundColor = '#fff';
// nav.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)'; nav.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
// const menuLinks = nav.querySelectorAll('.menu-items > li > a'); const menuLinks = nav.querySelectorAll('.menu-items > li > a');
// menuLinks.forEach(link => { menuLinks.forEach(link => {
// link.style.color = '#333'; link.style.color = '#000';
// }); });
// // 确保下拉菜单项保持黑色 // 确保下拉菜单项保持黑色
// const subMenuLinks = nav.querySelectorAll('.sub-menu li a'); const subMenuLinks = nav.querySelectorAll('.sub-menu li a');
// subMenuLinks.forEach(link => { subMenuLinks.forEach(link => {
// link.style.color = '#333'; link.style.color = '#333';
// }); });
// }); });
// }); });
// 窗口大小改变时重置菜单状态 // 窗口大小改变时重置菜单状态
window.addEventListener('resize', function() { window.addEventListener('resize', function() {

1
wp-content/themes/nenghui-energy-theme-4/assets/js/lenis.1.0.39.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
wp-content/themes/nenghui-energy-theme-4/assets/json/countries.geojson
View File

File diff suppressed because one or more lines are too long

2
wp-content/themes/nenghui-energy-theme-4/footer.php
Unescape View File

@ -57,7 +57,7 @@
</div> </div>
<div class="footer-nav-column"> <div class="footer-nav-column">
<h3 class="footer-nav-title">PRODUCTS & SOLUTIONS</h3> <h3 class="footer-nav-title">PRODUCTS & SOLUTIONNS</h3>
<ul class="footer-nav-list"> <ul class="footer-nav-list">
<li><a href="/pros/">Products</a></li> <li><a href="/pros/">Products</a></li>
<li><a href="/epc-solutions">EPC & Energy Solutions</a></li> <li><a href="/epc-solutions">EPC & Energy Solutions</a></li>

18
wp-content/themes/nenghui-energy-theme-4/header.php
Unescape View File

@ -29,9 +29,7 @@
"background-dark": "#10221c", "background-dark": "#10221c",
"pearlescent": "#f0f7f5", "pearlescent": "#f0f7f5",
"silver-accent": "#e2e8f0", "silver-accent": "#e2e8f0",
"about-us": "#ff6b00", "about-us": "#ff6b00"
"primary-dark": "#0da670", // Added for contrast on light mode
"accent": "#ff6b00"
}, },
fontFamily: { fontFamily: {
"display": ["Montserrat", "sans-serif"], "display": ["Montserrat", "sans-serif"],
@ -106,8 +104,8 @@
}, },
blobSpin: { blobSpin: {
'0%': { transform: 'rotate(0deg) scale(1)' }, '0%': { transform: 'rotate(0deg) scale(1)' },
'50%': { transform: 'rotate(180deg) translate(-80%, 50%) scale(1.1)' }, '50%': { transform: 'rotate(180deg) scale(1.1)' },
'100%': { transform: 'rotate(360deg) translate(0) scale(1)' }, '100%': { transform: 'rotate(360deg) scale(1)' },
} }
}, },
animation: { animation: {
@ -189,7 +187,7 @@
0 15px 20px rgba(0, 0, 0, 0.3), /* 中距离扩散阴影 */ 0 15px 20px rgba(0, 0, 0, 0.3), /* 中距离扩散阴影 */
0 25px 40px rgba(0, 0, 0, 0.8); /* 远距离环境阴影 */ 0 25px 40px rgba(0, 0, 0, 0.8); /* 远距离环境阴影 */
} }
.-ultra { .text-3d-ultra {
color: #ffffff; color: #ffffff;
/* 1. 顶部左侧的亮色高光切割边 */ /* 1. 顶部左侧的亮色高光切割边 */
text-shadow: text-shadow:
@ -220,7 +218,7 @@
<body <?php body_class(); ?>> <body <?php body_class(); ?>>
<nav class="main-nav"> <nav class="main-nav">
<div class="nav-container"> <div class="nav-container">
<div class="nav-logo flex items-center"> <div class="nav-logo">
<a class="flex flex-col" href="<?php echo home_url(); ?>"> <a class="flex flex-col" href="<?php echo home_url(); ?>">
<?php <?php
$logo = get_theme_mod('site_logo'); $logo = get_theme_mod('site_logo');
@ -229,12 +227,8 @@
<?php else: ?> <?php else: ?>
<img src="https://nenghui.com/wp-content/uploads/2025/11/logo-2.png" alt="logo"> <img src="https://nenghui.com/wp-content/uploads/2025/11/logo-2.png" alt="logo">
<?php endif; ?> <?php endif; ?>
<p data-no-translation class="text-[12px] text-[#517bb9] text-justify pl-1 max-w-[12rem] hover:text-normal">Cleaner Energy. Greater Value. </p> <p class="text-[12px] text-[#517bb9] text-justify pl-1">Smart Energy, Digital Future </p>
</a> </a>
<a href="https://cn.nenghui.com/" class="ml-[2rem] text-[#295ca8] cursor-pointer relative group hover:text-[#295ca8]" data-no-translation>
中国版
<div class="absolute bottom-0 left-0 w-0 h-[2px] bg-[#295ca8] transition-all duration-300 group-hover:w-full"></"></div>
</a>
</div> </div>
<button class="menu-toggle" aria-label="菜单"> <button class="menu-toggle" aria-label="菜单">

29
wp-content/themes/nenghui-energy-theme-4/style.css
Unescape View File

@ -43,7 +43,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
/* 确保容器有高度，否则图片没加载时高度为0 */ /* 确保容器有高度，否则图片没加载时高度为0 */
min-height: 100px; min-height: 100px;
} }
.dark .skeleton-wrapper { .dark .skeleton-wrapper {
background-color: #374151; /* Tailwind gray-700 */ background-color: #374151; /* Tailwind gray-700 */
@ -62,7 +62,7 @@
table{ table{
width: 100%!important; width: 100%!important;
max-width: 100%!important; max-width: 100%!important;
} }
/* 防止横向滚动条 */ /* 防止横向滚动条 */
html, body { html, body {
/* overflow-x: hidden; */ /* overflow-x: hidden; */
@ -132,7 +132,7 @@
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
padding: 20px; padding: 20px;
} }
/* 导航菜单样式 */ /* 导航菜单样式 */
.main-nav { .main-nav {
position: sticky; position: sticky;
@ -143,7 +143,7 @@
z-index: 1000; z-index: 1000;
transition: transform 0.3s ease; transition: transform 0.3s ease;
background-color: #fff;; background-color: #fff;;
} }
.nav-container { .nav-container {
@ -201,22 +201,21 @@
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
cursor: pointer;
} }
.menu-items li a { .menu-items li a {
color: #333; color: #333;
text-decoration: none; text-decoration: none;
font-size: 1rem; font-size: 1rem;
font-weight: 500;
padding: 8px 0; padding: 8px 0;
border-radius: 4px; border-radius: 4px;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.menu-items li a:hover, .menu-items li.menu-item-has-children > a:hover { .menu-items li a:hover {
/* background: rgba(0, 0, 0, 0.05); */ background: rgba(0, 0, 0, 0.05);
font-weight: normal; color: #000;
color: #007cba !important;;
} }
/* 下拉菜单样式 */ /* 下拉菜单样式 */
@ -360,7 +359,7 @@
} }
/* 响应式设计 */ /* 响应式设计 */
@media screen and (max-width: 1225px) { @media screen and (max-width: 768px) {
.menu-toggle { .menu-toggle {
display: block; display: block;
} }
@ -507,11 +506,11 @@
form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style) { form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style) {
width: 100% !important; width: 100% !important;
} }
form.fluent_form_1 .ff-btn-submit:not(.ff_btn_no_style){ form.fluent_form_1 .ff-btn-submit:not(.ff_btn_no_style){
width: 100%; width: 100%;
} }
} }
/* 文章卡片网格布局 */ /* 文章卡片网格布局 */
.content-area { .content-area {
max-width: 1200px; max-width: 1200px;
@ -613,4 +612,4 @@
} }
.accordion-body{ .accordion-body{
color: #000000!important; color: #000000!important;
} }

1
wp-content/themes/nenghui-energy-theme-4/template-parts/blocks/block-banner-title.php
Unescape View File

@ -278,6 +278,7 @@ $overlay_opacity = is_numeric($overlay_opacity) ? $overlay_opacity : '0.4';
/* 文字样式 */ /* 文字样式 */
.nenghui-banner-title .banner-title { .nenghui-banner-title .banner-title {
font-size: clamp(2.5rem, 5vw, 4rem); font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
line-height: 1.2; line-height: 1.2;
margin: 0 0 1.5rem 0; margin: 0 0 1.5rem 0;
letter-spacing: 3px; letter-spacing: 3px;

4
wp-content/themes/nenghui-energy-theme-4/template-parts/blocks/block-news.php
Unescape View File

@ -139,6 +139,7 @@ $news_query = new WP_Query($query_args);
.news-title { .news-title {
font-size: 36px; font-size: 36px;
font-weight: bold;
color: #333; color: #333;
margin: 0; margin: 0;
} }
@ -177,6 +178,7 @@ $news_query = new WP_Query($query_args);
.news-card-title { .news-card-title {
font-size: 16px; font-size: 16px;
font-weight: 600;
color: #333; color: #333;
margin-bottom: 8px; margin-bottom: 8px;
line-height: 1.4; line-height: 1.4;
@ -187,7 +189,7 @@ $news_query = new WP_Query($query_args);
} }
.news-card-description { .news-card-description {
font-size: 12px; font-size: 14px;
color: #666; color: #666;
line-height: 1.6; line-height: 1.6;
display: -webkit-box; display: -webkit-box;

2
wp-content/themes/nenghui-energy-theme-4/template-parts/products-content.php
Unescape View File

@ -31,7 +31,7 @@ if (empty($banner_url)) {
</div> </div>
</div> </div>
<!-- 产品详情内容 --> <!-- 产品详情内容 -->
<div class="container mt-5" style="margin: 1rem auto; "> <div class="container mt-5">
<?php <?php
// 获取产品特性显示开关 // 获取产品特性显示开关
$show_features = get_post_meta(get_the_ID(), '_show_product_features', true); $show_features = get_post_meta(get_the_ID(), '_show_product_features', true);

Write Preview
Loading…
Cancel
Save