|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Contact & Global Grid - NexEnergy</title>
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700;900&family=Montserrat:wght@400;500;700;800;900&family=Inter:wght@400;500;700;800;900&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet"/>
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" />
|
|
|
<!-- AOS Animation Library -->
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
|
|
|
<!-- Tailwind & Config -->
|
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
|
<script id="tailwind-config">
|
|
|
tailwind.config = {
|
|
|
darkMode: "class",
|
|
|
theme: {
|
|
|
extend: {
|
|
|
colors: {
|
|
|
"primary": "#13eca4",
|
|
|
"background-light": "#f8fcfa",
|
|
|
"background-dark": "#10221c",
|
|
|
"pearlescent": "#f0f7f5",
|
|
|
"silver-accent": "#e2e8f0",
|
|
|
"about-us": "#ff6b00"
|
|
|
},
|
|
|
fontFamily: {
|
|
|
"display": ["Montserrat", "sans-serif"],
|
|
|
"sans": ["Montserrat", "sans-serif"],
|
|
|
"mono": ["JetBrains Mono", "Montserrat"],
|
|
|
"inter": ["Inter", "Montserrat"],
|
|
|
},
|
|
|
borderRadius: {
|
|
|
"DEFAULT": "0.5rem",
|
|
|
"lg": "1rem",
|
|
|
"xl": "1.5rem",
|
|
|
"2xl": "2rem",
|
|
|
"3xl": "3rem",
|
|
|
"full": "9999px"
|
|
|
},
|
|
|
backgroundImage: {
|
|
|
'liquid-gradient': 'linear-gradient(135deg, #f8fcfa 0%, #e8f5f1 50%, #dcfce7 100%)',
|
|
|
'glass-gradient': 'linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%)',
|
|
|
'aurora': 'linear-gradient(135deg, rgba(19,236,164,0.1) 0%, rgba(13,166,112,0.05) 50%, rgba(248,252,250,0) 100%)',
|
|
|
'mesh': 'radial-gradient(at 40% 20%, rgba(19,236,164,0.08) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(16,34,28,0.05) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(19,236,164,0.05) 0px, transparent 50%)',
|
|
|
|
|
|
},
|
|
|
boxShadow: {
|
|
|
// 将光效统一映射为 primary 颜色 (13eca4 的 RGBA)
|
|
|
'glow': '0 0 20px rgba(19, 236, 164, 0.4)',
|
|
|
'glow-lg': '0 10px 30px rgba(19, 236, 164, 0.4)',
|
|
|
'bento': '0 20px 40px -15px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.02)',
|
|
|
'bento-hover': '0 30px 60px -20px rgba(19,236,164,0.15), 0 0 0 1px rgba(19,236,164,0.3)',
|
|
|
'bento-dark': '0 30px 60px -15px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1)',
|
|
|
},
|
|
|
keyframes: {
|
|
|
fadeIn: {
|
|
|
'0%': { opacity: '0', transform: 'translateY(10px)' },
|
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
|
},
|
|
|
scan: {
|
|
|
'0%': { top: '-10%', opacity: '0' },
|
|
|
'10%': { opacity: '1' },
|
|
|
'90%': { opacity: '1' },
|
|
|
'100%': { top: '110%', opacity: '0' },
|
|
|
},
|
|
|
rotateGlobe: {
|
|
|
'0%': { transform: 'rotate(0deg)' },
|
|
|
'100%': { transform: 'rotate(360deg)' },
|
|
|
},
|
|
|
dash: {
|
|
|
'0%': { strokeDashoffset: '1000' },
|
|
|
'100%': { strokeDashoffset: '0' },
|
|
|
},
|
|
|
globePulse: {
|
|
|
'0%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
|
|
|
'50%': { boxShadow: '0 0 50px rgba(19,236,164,0.4)', transform: 'scale(1.02)' },
|
|
|
'100%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
|
|
|
},
|
|
|
// 高级交互动画
|
|
|
pulseGlow: {
|
|
|
'0%': { textShadow: '0 0 10px rgba(19, 236, 164, 0.4)' },
|
|
|
'100%': { textShadow: '0 0 30px #ff6b00' }
|
|
|
},
|
|
|
sweep: { '100%': { left: '200%' } },
|
|
|
cardFlip: {
|
|
|
'0%': { opacity: '0', transform: 'rotateY(-90deg) translateZ(50px)' },
|
|
|
'100%': { opacity: '1', transform: 'rotateY(0deg) translateZ(0)' }
|
|
|
},
|
|
|
floatY: {
|
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
|
'50%': { transform: 'translateY(-15px)' }
|
|
|
},
|
|
|
textShimmer: {
|
|
|
'0%': { backgroundPosition: '0% 50%' },
|
|
|
'100%': { backgroundPosition: '100% 50%' },
|
|
|
},
|
|
|
blobSpin: {
|
|
|
'0%': { transform: 'rotate(0deg) scale(1)' },
|
|
|
'50%': { transform: 'rotate(180deg) scale(1.1)' },
|
|
|
'100%': { transform: 'rotate(360deg) scale(1)' },
|
|
|
}
|
|
|
},
|
|
|
animation: {
|
|
|
'fade-in': 'fadeIn 0.5s ease-out forwards',
|
|
|
'scan-slow': 'scan 6s linear infinite',
|
|
|
'spin-slow': 'rotateGlobe 60s linear infinite',
|
|
|
'dash-flow': 'dash 3s linear infinite',
|
|
|
'globe-select': 'globePulse 0.8s ease-out',
|
|
|
'pulse-glow': 'pulseGlow 2s infinite alternate',
|
|
|
'sweep': 'sweep 3s infinite',
|
|
|
'flip-in': 'cardFlip 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
|
'float-1': 'floatY 3s ease-in-out infinite',
|
|
|
'float-2': 'floatY 3s ease-in-out infinite 1s',
|
|
|
'float-3': 'floatY 3s ease-in-out infinite 2s',
|
|
|
'text-shimmer': 'textShimmer 3s ease-out infinite alternate',
|
|
|
'blob-spin': 'blobSpin 20s infinite cubic-bezier(0.4, 0, 0.2, 1)',
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style type="text/tailwindcss">
|
|
|
@layer utilities {
|
|
|
#contact-us .focus-group:hover > div:not(:hover) {
|
|
|
opacity: 0.6;
|
|
|
transform: scale(0.98);
|
|
|
filter: blur(2px);
|
|
|
}
|
|
|
#contact-us .focus-group > div {
|
|
|
transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body id="contact-us" class="bg-background-light text-background-dark font-sans selection:bg-primary selection:text-background-dark relative min-h-screen">
|
|
|
|
|
|
<!-- Background Aurora -->
|
|
|
<div class="fixed inset-0 w-full h-full bg-mesh z-1"></div>
|
|
|
<div class="fixed top-[-20%] right-[-10%] w-[60vw] h-[60vw] bg-primary/10 rounded-full blur-[120px] z-2 animate-blob-spin mix-blend-multiply"></div>
|
|
|
<div class="fixed bottom-[-20%] left-[-10%] w-[50vw] h-[50vw] bg-[#0a8257]/5 rounded-full blur-[100px] z-2 animate-blob-spin animation-delay-2000 mix-blend-multiply"></div>
|
|
|
|
|
|
<div class="h-24"></div>
|
|
|
|
|
|
<main class=" mx-auto px-6 pb-32 lg:px-8">
|
|
|
|
|
|
<!-- Hero Section -->
|
|
|
<div class="text-center max-w-5xl mx-auto mb-32 relative z-3" data-aos="zoom-out" data-aos-duration="1200">
|
|
|
<!-- Status Badge -->
|
|
|
<div class="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-white/50 backdrop-blur-md border border-black/5 shadow-sm mb-10 transform transition-transform hover:scale-105 cursor-default">
|
|
|
<span class="relative flex h-2.5 w-2.5">
|
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
|
|
|
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-primary"></span>
|
|
|
</span>
|
|
|
<span class="text-xs font-mono text-background-dark uppercase tracking-[0.2em]">Global Turnkey Delivery</span>
|
|
|
</div>
|
|
|
|
|
|
<h1 class=" text-4xl md:text-[2.66rem] tracking-tighter text-background-dark leading-[0.95] mb-8">
|
|
|
Power a Zero-Carbon <br/>
|
|
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-background-dark via-primary to-[#0da670] bg-[length:200%_auto] animate-text-shimmer">Future.</span>
|
|
|
</h1>
|
|
|
<p class="text-[1rem] text-background-dark/60 leading-relaxed font-light mt-8 max-w-3xl mx-auto">
|
|
|
From visionary system design and megawatt-scale storage integration to global EPC delivery.<br class="hidden lg:block"/> We build secure and efficient renewable energy foundations for every scenario.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<!-- Top Tier: Direct Contact Channels -->
|
|
|
<div class="focus-group grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8 mb-40 relative z-3">
|
|
|
|
|
|
<!-- Channel 1: EPC & Projects (Dark Flagship) -->
|
|
|
<div class="bg-background-dark rounded-[2.5rem] p-10 lg:p-12 shadow-bento-dark border border-white/10 hover:border-primary/50 relative overflow-hidden flex flex-col justify-between"
|
|
|
data-aos="fade-up" data-aos-delay="100">
|
|
|
<div class="absolute -right-20 -bottom-20 w-64 h-64 bg-primary/20 blur-[80px] rounded-full"></div>
|
|
|
|
|
|
<div>
|
|
|
<div class="flex justify-between items-start mb-12">
|
|
|
<div class="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center border border-white/10 backdrop-blur-md">
|
|
|
<svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
|
|
|
</div>
|
|
|
<span class="px-4 py-1.5 rounded-full bg-primary/10 text-primary text-xs font-mono tracking-widest uppercase border border-primary/20">EPC & Storage</span>
|
|
|
</div>
|
|
|
<h3 class="text-3xl mb-4 text-white">Global EPC & Partnerships</h3>
|
|
|
<p class="text-white/50 text-lg leading-relaxed mb-12">Explore partnerships for utility-scale storage plants, renewable turnkey projects, and microgrids.</p>
|
|
|
</div>
|
|
|
|
|
|
<a href="mailto:epc-projects@nenghui.com" class="group/btn inline-flex items-center justify-between w-full p-4 rounded-2xl bg-white/5 hover:bg-primary transition-all duration-300 border border-white/10 hover:border-primary">
|
|
|
<span class="text-sm sm:text-base lg:text-[1rem] font-mono font-medium text-white group-hover/btn:text-background-dark transition-colors ">epc-projects@nenghui.com</span>
|
|
|
<div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center group-hover/btn:bg-background-dark/10 transition-colors shrink-0 ml-2">
|
|
|
<svg class="w-5 h-5 text-white group-hover/btn:text-background-dark transform group-hover/btn:translate-x-1 group-hover/btn:-translate-y-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
<!-- Channel 2: Design & Consulting -->
|
|
|
<div class="bg-white/60 backdrop-blur-xl rounded-[2.5rem] p-10 lg:p-12 shadow-bento hover:shadow-bento-hover transition-all flex flex-col justify-between"
|
|
|
data-aos="fade-up" data-aos-delay="200">
|
|
|
<div>
|
|
|
<div class="w-16 h-16 rounded-2xl bg-white flex items-center justify-center shadow-sm border border-black/5 mb-12">
|
|
|
<svg class="w-8 h-8 text-background-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"></path></svg>
|
|
|
</div>
|
|
|
<h3 class=" text-3xl mb-4 text-background-dark">System Design & Consulting</h3>
|
|
|
<p class="text-background-dark/50 text-lg leading-relaxed mb-12">Get customized storage architecture planning, preliminary microgrid designs, and feasibility assessments.</p>
|
|
|
</div>
|
|
|
<a href="mailto:design-eng@nenghui.com" class="group/btn inline-flex items-center justify-between w-full p-4 rounded-2xl bg-white hover:bg-background-dark transition-all duration-300 border border-black/5">
|
|
|
<span class="text-sm sm:text-base lg:text-lg font-mono font-medium text-background-dark group-hover/btn:text-white transition-colors ">design-eng@nenghui.com</span>
|
|
|
<div class="w-10 h-10 rounded-full bg-pearlescent flex items-center justify-center group-hover/btn:bg-white/10 transition-colors shrink-0 ml-2">
|
|
|
<svg class="w-5 h-5 text-background-dark group-hover/btn:text-white transform group-hover/btn:translate-x-1 group-hover/btn:-translate-y-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
<!-- Channel 3: O&M Support -->
|
|
|
<div class="bg-white/60 backdrop-blur-xl rounded-[2.5rem] p-10 lg:p-12 shadow-bento hover:shadow-bento-hover transition-all flex flex-col justify-between"
|
|
|
data-aos="fade-up" data-aos-delay="300">
|
|
|
<div>
|
|
|
<div class="w-16 h-16 rounded-2xl bg-white flex items-center justify-center shadow-sm border border-black/5 mb-12">
|
|
|
<svg class="w-8 h-8 text-background-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
|
|
</div>
|
|
|
<h3 class="text-3xl mb-4 text-background-dark">Asset O&M Support</h3>
|
|
|
<p class="text-background-dark/50 text-lg leading-relaxed mb-12">24/7 dedicated channel providing full-lifecycle data monitoring and on-site maintenance support.</p>
|
|
|
</div>
|
|
|
<a href="tel:+8602150896255" class="group/btn inline-flex items-center justify-between w-full p-4 rounded-2xl bg-white hover:bg-background-dark transition-all duration-300 border border-black/5">
|
|
|
<span class="text-lg font-mono font-medium text-background-dark group-hover/btn:text-white transition-colors pl-2">+86 021-50896255</span>
|
|
|
<div class="w-10 h-10 rounded-full bg-pearlescent flex items-center justify-center group-hover/btn:bg-white/10 transition-colors shrink-0">
|
|
|
<svg class="w-5 h-5 text-background-dark group-hover/btn:text-white transform group-hover/btn:translate-x-1 group-hover/btn:-translate-y-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Second Tier: Global Grid -->
|
|
|
<div class="relative pt-10 z-3" data-aos="fade-up">
|
|
|
<div class="flex flex-col md:flex-row items-baseline justify-between mb-16 gap-6">
|
|
|
<h2 class="text-4xl md:text-[2.66rem] text-background-dark tracking-tight">Global<br/><span class="text-primary">Locations.</span></h2>
|
|
|
<div class="flex items-center gap-4">
|
|
|
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
|
|
|
<p class="font-mono text-sm text-background-dark/40 tracking-widest uppercase text-right">EPC & Supply Chain<br/>Zero-Carbon Hubs</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Bento Grid: 4 columns setup.
|
|
|
Row 1: Shanghai (2) - Europe (1) - Iraq (1)
|
|
|
Row 2: Thailand (2) - Cambodia (2)
|
|
|
-->
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 auto-rows-min">
|
|
|
|
|
|
<!-- 1. Shanghai HQ (col-span-2) -->
|
|
|
<div class="lg:col-span-2 group bg-white rounded-[2rem] p-8 lg:p-10 shadow-bento hover:shadow-bento-hover transition-all duration-500 border border-black/5 flex flex-col justify-between overflow-hidden relative min-h-[280px]">
|
|
|
<div class="absolute right-0 bottom-0 opacity-[0.03] w-[300px] h-[300px] bg-[url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDNDQuOCAwIDAgNDQuOCAwIDEwMHM0NC44IDEwMCAxMDAgMTAwIDEwMC00NC44IDEwMC0xMDBTMTU1LjIgMCAxMDAgMHptMCAxOTJDNDkuMiAxOTIgOCAxNTAuOCA4IDEwMFM0OS4yIDggMTAwIDggMTkyIDQ5LjIgMTkyIDEwMFMxNTAuOCAxOTIgMTAwIDE5MnoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')] bg-no-repeat bg-right-bottom transform translate-x-10 translate-y-10 group-hover:scale-110 transition-transform duration-700"></div>
|
|
|
|
|
|
<div class="relative z-10 flex justify-between items-start mb-8">
|
|
|
<div>
|
|
|
<span class="font-mono text-xs text-background-dark/50 px-3 py-1 bg-pearlescent rounded-full uppercase tracking-wider mb-4 inline-block">Headquarters</span>
|
|
|
<h3 class="font-display text-4xl text-background-dark">Shanghai</h3>
|
|
|
</div>
|
|
|
<div class="text-right shrink-0 ml-4">
|
|
|
<p class="font-mono text-3xl font-light text-primary live-clock" data-tz="Asia/Shanghai">00:00</p>
|
|
|
<p class="font-mono text-xs text-background-dark/40 uppercase mt-1">Local Time</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="relative z-10 flex flex-col md:flex-row justify-between items-end gap-6 mt-auto">
|
|
|
<div class="space-y-2">
|
|
|
<p class="text-background-dark/60 text-sm font-medium">Building 2 Hongqiao International,<br/>No.288 Tongxie Road, Shanghai, China</p>
|
|
|
<div class="flex gap-4 mt-2">
|
|
|
<a href="tel:+8602150896255" class="font-mono text-sm text-background-dark hover:text-primary transition-colors flex items-center gap-1"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg> +86 021-50896255</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a href="mailto:contact@nenghui.com" class="w-12 h-12 rounded-full bg-background-dark text-white flex items-center justify-center hover:bg-primary transition-colors shrink-0 shadow-lg">
|
|
|
<svg class="w-5 h-5 transform -rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 2. Europe (col-span-1) -->
|
|
|
<div class="group bg-white rounded-[2rem] p-8 shadow-bento hover:shadow-bento-hover transition-all duration-500 border border-black/5 flex flex-col min-h-[280px]">
|
|
|
<div class="flex justify-between items-start mb-6">
|
|
|
<h3 class="font-display text-2xl text-background-dark">Europe</h3>
|
|
|
<p class="font-mono text-lg font-light text-primary live-clock shrink-0 ml-2" data-tz="Europe/Amsterdam">00:00</p>
|
|
|
</div>
|
|
|
<div class="mt-auto">
|
|
|
<p class="text-background-dark/60 text-sm mb-4 font-medium">Haaksbergweg 75<br/>1101 BR Amsterdam<br/>The Netherlands</p>
|
|
|
<a href="https://wa.me/8613057491520" class="font-mono text-xs text-background-dark hover:text-primary transition-colors block mb-1">WA: +86 13057491520</a>
|
|
|
<a href="mailto:Alli.Yu@nenghui.com" class="font-mono text-xs text-background-dark/60 hover:text-primary transition-colors block ">Alli.Yu@nenghui.com</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 3. Iraq (col-span-1) -->
|
|
|
<div class="group bg-white rounded-[2rem] p-8 shadow-bento hover:shadow-bento-hover transition-all duration-500 border border-black/5 flex flex-col min-h-[280px]">
|
|
|
<div class="flex justify-between items-start mb-6">
|
|
|
<h3 class="font-display text-2xl text-background-dark">Iraq</h3>
|
|
|
<p class="font-mono text-lg font-light text-primary live-clock shrink-0 ml-2" data-tz="Asia/Baghdad">00:00</p>
|
|
|
</div>
|
|
|
<div class="mt-auto">
|
|
|
<p class="text-background-dark/60 text-sm mb-4 font-medium">Al-Mansour – Jordan St.<br/>BFB (near Baghdad Twr)<br/>Baghdad, Iraq</p>
|
|
|
<a href="https://wa.me/96407889681628" class="font-mono text-xs text-background-dark hover:text-primary transition-colors block mb-1">WA: +964 07889681628</a>
|
|
|
<a href="mailto:Leo@nenghui.com" class="font-mono text-xs text-background-dark/60 hover:text-primary transition-colors block ">Leo@nenghui.com</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 5. Cambodia (col-span-2) -->
|
|
|
<div class="lg:col-span-2 group bg-white rounded-[2rem] p-8 lg:p-10 shadow-bento hover:shadow-bento-hover transition-all duration-500 border border-black/5 flex flex-col justify-between md:flex-row md:items-end min-h-[280px]">
|
|
|
<div>
|
|
|
<div class="flex items-center gap-4 mb-6">
|
|
|
<h3 class="font-display text-3xl text-background-dark">Cambodia</h3>
|
|
|
<span class="font-mono text-xs text-background-dark/40 px-3 py-1 bg-pearlescent rounded-full">Operations</span>
|
|
|
</div>
|
|
|
<p class="text-background-dark/70 text-sm font-medium leading-relaxed max-w-md">
|
|
|
Borey Chip Mong Grand Mak271, No 011+013 Street MAIN.ST2,<br/>
|
|
|
Shangkat Chark Ang Re Lue, Khan Mean Chey,<br/>
|
|
|
Phnom Penh, Cambodia
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="mt-8 md:mt-0 text-left md:text-right shrink-0">
|
|
|
<p class="font-mono text-xl font-light text-primary live-clock mb-3" data-tz="Asia/Phnom_Penh">00:00</p>
|
|
|
<div class="flex flex-col gap-2">
|
|
|
<a href="tel:+855066503722" class="font-mono text-sm text-background-dark hover:text-primary transition-colors">Tel: +855 066503722</a>
|
|
|
<a href="mailto:zhangyi@nenghui.com" class="font-mono text-sm text-background-dark/60 hover:text-primary transition-colors">zhangyi@nenghui.com</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 4. Thailand (col-span-2) -->
|
|
|
<div class="lg:col-span-2 group bg-white rounded-[2rem] p-8 lg:p-10 shadow-bento hover:shadow-bento-hover transition-all duration-500 border border-black/5 flex flex-col justify-between md:flex-row md:items-end min-h-[280px]">
|
|
|
<div>
|
|
|
<div class="flex items-center gap-4 mb-6">
|
|
|
<h3 class="font-display text-3xl text-background-dark">Thailand</h3>
|
|
|
<span class="font-mono text-xs text-background-dark/40 px-3 py-1 bg-pearlescent rounded-full">SEA Hub</span>
|
|
|
</div>
|
|
|
<p class="text-background-dark/60 text-sm font-medium leading-relaxed max-w-sm">9th Floor, 909/9 AIA East Gateway Building,<br/>989 Debaratna Road, Bang Na Nuea, Bang Na,<br/>Bangkok 10260, Thailand</p>
|
|
|
</div>
|
|
|
<div class="mt-8 md:mt-0 text-left md:text-right shrink-0">
|
|
|
<p class="font-mono text-xl font-light text-primary live-clock mb-3" data-tz="Asia/Bangkok">00:00</p>
|
|
|
<div class="flex flex-col gap-2">
|
|
|
<a href="tel:+0980645276" class="font-mono text-sm text-background-dark hover:text-primary transition-colors">Tel: +0980645276</a>
|
|
|
<a href="mailto:james.chen@nenghui.com" class="font-mono text-sm text-background-dark/60 hover:text-primary transition-colors">james.chen@nenghui.com</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
|
|
|
|
|
|
<script>
|
|
|
AOS.init({ duration: 900, easing: 'ease-out-cubic', once: true, offset: 50 });
|
|
|
|
|
|
// Live Clocks
|
|
|
function updateGlobalClocks() {
|
|
|
const clocks = document.querySelectorAll('.live-clock');
|
|
|
clocks.forEach(clock => {
|
|
|
const tz = clock.getAttribute('data-tz');
|
|
|
if(!tz) return;
|
|
|
const timeString = new Intl.DateTimeFormat('en-GB', {
|
|
|
timeZone: tz, hour: '2-digit', minute: '2-digit', hour12: false
|
|
|
}).format(new Date());
|
|
|
clock.textContent = timeString;
|
|
|
});
|
|
|
}
|
|
|
updateGlobalClocks();
|
|
|
setInterval(updateGlobalClocks, 60000);
|
|
|
|
|
|
if(typeof VanillaTilt !== 'undefined') {
|
|
|
VanillaTilt.init(document.querySelectorAll("[data-tilt]"));
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
