424 lines
46 KiB
HTML
424 lines
46 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hanmo Control & Network Co., Ltd. | Control Precision</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
</head>
|
|
<body class="antialiased">
|
|
|
|
<!-- HEADER -->
|
|
<header id="main-header" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500 py-6">
|
|
<div class="container mx-auto px-6 flex justify-between items-center">
|
|
<a href="#home" class="flex items-center gap-3 group">
|
|
<div class="bg-blue-600 w-10 h-10 rounded-lg flex items-center justify-center shrink-0 shadow-lg group-hover:bg-blue-700 transition-colors">
|
|
<span class="text-white font-bold text-xl font-industrial">H</span>
|
|
</div>
|
|
<div class="flex flex-col leading-none">
|
|
<span id="brand-name" class="font-bold text-xl tracking-tight font-industrial text-white transition-colors duration-300">HANMO</span>
|
|
<span id="brand-sub" class="text-[9px] font-bold uppercase tracking-[0.2em] mt-1 text-blue-500">Control & Network</span>
|
|
</div>
|
|
</a>
|
|
|
|
<nav class="hidden md:flex gap-10">
|
|
<a href="#home" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors" data-i18n="nav.home">Home</a>
|
|
<a href="#dcs" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors" data-i18n="nav.dcs">DCS</a>
|
|
<a href="#batch" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors" data-i18n="nav.batch">Batch Process</a>
|
|
<a href="#dbsvr" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors" data-i18n="nav.dbsvr">Database Server</a>
|
|
<a href="#products" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors" data-i18n="nav.products">Instruments</a>
|
|
<a href="#services" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors" data-i18n="nav.services">Services</a>
|
|
<a href="#about" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors" data-i18n="nav.about">About</a>
|
|
<a href="#contact" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors" data-i18n="nav.contact">Contact</a>
|
|
</nav>
|
|
|
|
<div class="hidden md:flex items-center gap-3">
|
|
<!-- 언어 전환 버튼 -->
|
|
<div class="flex rounded-full overflow-hidden border border-white/20">
|
|
<button onclick="switchLang('en')" data-lang="en" class="lang-btn active-lang px-3 py-1.5 text-[10px] font-bold font-industrial text-white transition-all">EN</button>
|
|
<button onclick="switchLang('ko')" data-lang="ko" class="lang-btn px-3 py-1.5 text-[10px] font-bold font-industrial text-white transition-all">KO</button>
|
|
</div>
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-7 py-2.5 rounded-full text-xs font-bold shadow-xl transition-all active:scale-95 font-industrial tracking-widest uppercase" data-i18n="nav.quote">Request Quote</button>
|
|
</div>
|
|
|
|
<button id="mobile-menu-btn" class="md:hidden text-white p-2">
|
|
<i class="fas fa-bars text-2xl"></i>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- MOBILE MENU -->
|
|
<div id="mobile-menu" class="fixed inset-0 z-[60] bg-slate-900 flex flex-col p-8 transition-transform translate-x-full duration-500 overflow-y-auto">
|
|
<div class="flex justify-between items-center mb-12">
|
|
<!-- 모바일 언어 전환 -->
|
|
<div class="flex rounded-full overflow-hidden border border-white/20">
|
|
<button onclick="switchLang('en')" data-lang="en" class="lang-btn active-lang px-4 py-2 text-xs font-bold font-industrial text-white transition-all">EN</button>
|
|
<button onclick="switchLang('ko')" data-lang="ko" class="lang-btn px-4 py-2 text-xs font-bold font-industrial text-white transition-all">KO</button>
|
|
</div>
|
|
<button id="close-menu-btn" class="text-white text-3xl">×</button>
|
|
</div>
|
|
<nav class="flex flex-col gap-8 text-center">
|
|
<a href="#home" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors" data-i18n="nav.home">Home</a>
|
|
<a href="#dcs" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors" data-i18n="nav.dcs">DCS</a>
|
|
<a href="#batch" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors" data-i18n="nav.batch">Batch Process</a>
|
|
<a href="#dbsvr" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors" data-i18n="nav.dbsvr">Database Server</a>
|
|
<a href="#products" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors" data-i18n="nav.products">Instruments</a>
|
|
<a href="#services" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors" data-i18n="nav.services">Services</a>
|
|
<a href="#about" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors" data-i18n="nav.about">About</a>
|
|
<a href="#contact" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors" data-i18n="nav.contact">Contact</a>
|
|
<button class="mt-8 bg-blue-600 hover:bg-blue-700 text-white py-5 rounded-2xl font-bold font-industrial tracking-widest uppercase transition-colors" data-i18n="nav.quote">Request Quote</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<main>
|
|
<!-- HERO SECTION -->
|
|
<section id="home" class="relative min-h-screen flex items-center pt-20 overflow-hidden bg-slate-900">
|
|
<div class="absolute inset-0 z-0 opacity-50">
|
|
<img src="assets/images/ControlRoom3.png" alt="Industrial Facility" class="w-full h-full object-cover">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-900/80 to-transparent"></div>
|
|
</div>
|
|
<div class="container mx-auto px-6 relative z-10">
|
|
<div class="max-w-5xl animate-fade-in">
|
|
<div class="inline-block px-4 py-1.5 mb-8 rounded-full bg-blue-600/20 border border-blue-400/30 text-blue-400 text-[10px] font-bold uppercase industrial-tracking font-industrial" data-i18n="hero.badge">Precision Industrial Control</div>
|
|
<h1 class="text-5xl md:text-8xl font-extralight text-white mb-8 hero-title premium-kerning font-premium" data-i18n="hero.title" data-i18n-type="html">
|
|
Engineering <span class="text-blue-500 font-normal">Precision</span> <br class="hidden md:block"/> Industrial Control
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-slate-300 mb-12 leading-relaxed max-w-2xl font-premium font-light opacity-80" data-i18n="hero.desc">
|
|
Hanmo Control & Network Co., Ltd. provides elite-tier DCS and SCADA architectures for critical infrastructure and modern digital transformation.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-5">
|
|
<a href="#services" class="bg-blue-600 hover:bg-blue-700 text-white px-10 py-5 rounded-2xl font-bold shadow-2xl transition-all hover:-translate-y-1 text-center font-industrial text-xs tracking-widest uppercase" data-i18n="hero.btn1">Explore Expertise</a>
|
|
<a href="#contact" class="bg-white/10 hover:bg-white/20 text-white border border-white/20 backdrop-blur-md px-10 py-5 rounded-2xl font-bold transition-all text-center font-industrial text-xs tracking-widest uppercase" data-i18n="hero.btn2">Consultation</a>
|
|
</div>
|
|
</div>
|
|
<div class="mt-24 grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-10 max-w-5xl animate-fade-in" style="animation-delay: 0.3s">
|
|
<div class="p-8 bg-white/5 backdrop-blur-xl rounded-3xl border border-white/10">
|
|
<div class="text-3xl md:text-5xl font-extralight text-white mb-2 font-premium premium-kerning">1,500+</div>
|
|
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold" data-i18n="stat.nodes">Active Nodes</div>
|
|
</div>
|
|
<div class="p-8 bg-white/5 backdrop-blur-xl rounded-3xl border border-white/10">
|
|
<div class="text-3xl md:text-5xl font-extralight text-white mb-2 font-premium premium-kerning">99.99%</div>
|
|
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold" data-i18n="stat.uptime">System Uptime</div>
|
|
</div>
|
|
<div class="p-8 bg-white/5 backdrop-blur-xl rounded-3xl border border-white/10">
|
|
<div class="text-3xl md:text-5xl font-extralight text-white mb-2 font-premium premium-kerning">60+</div>
|
|
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold" data-i18n="stat.engineers">Engineers</div>
|
|
</div>
|
|
<div class="p-8 bg-white/5 backdrop-blur-xl rounded-3xl border border-white/10">
|
|
<div class="text-3xl md:text-5xl font-extralight text-white mb-2 font-premium premium-kerning">15</div>
|
|
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold" data-i18n="stat.years">Years Excellence</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- DCS SECTION -->
|
|
<section id="dcs" class="py-32 bg-white">
|
|
<div class="container mx-auto px-6">
|
|
<div class="text-center max-w-3xl mx-auto mb-24">
|
|
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="dcs.badge">Advanced Control Systems</h2>
|
|
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium" data-i18n="dcs.title">DCS Integration</h3>
|
|
<p class="text-slate-500 text-lg leading-relaxed font-light" data-i18n="dcs.desc">Enterprise-grade Distributed Control System architecture designed for the most critical industrial applications.</p>
|
|
</div>
|
|
<div class="grid lg:grid-cols-2 gap-16 items-center max-w-6xl mx-auto">
|
|
<div class="aspect-square rounded-[2.5rem] overflow-hidden shadow-2xl"><img src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=1000" alt="DCS Control Room" class="w-full h-full object-cover"></div>
|
|
<div>
|
|
<div class="space-y-8">
|
|
<div class="flex gap-6">
|
|
<div class="flex-shrink-0"><div class="flex items-center justify-center h-12 w-12 rounded-xl bg-blue-600 text-white"><i class="fas fa-shield-alt"></i></div></div>
|
|
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium" data-i18n="dcs.f1.title">Redundant Architecture</h4><p class="text-slate-500 leading-relaxed font-light" data-i18n="dcs.f1.desc">Fault-tolerant systems with dual processing units ensuring 99.99% uptime</p></div>
|
|
</div>
|
|
<div class="flex gap-6">
|
|
<div class="flex-shrink-0"><div class="flex items-center justify-center h-12 w-12 rounded-xl bg-blue-600 text-white"><i class="fas fa-network-wired"></i></div></div>
|
|
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium" data-i18n="dcs.f2.title">Real-time Communication</h4><p class="text-slate-500 leading-relaxed font-light" data-i18n="dcs.f2.desc">Sub-millisecond response times with synchronized control across multiple nodes</p></div>
|
|
</div>
|
|
<div class="flex gap-6">
|
|
<div class="flex-shrink-0"><div class="flex items-center justify-center h-12 w-12 rounded-xl bg-blue-600 text-white"><i class="fas fa-lock"></i></div></div>
|
|
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium" data-i18n="dcs.f3.title">Security Certified</h4><p class="text-slate-500 leading-relaxed font-light" data-i18n="dcs.f3.desc">IEC 62443 compliance with military-grade encryption protocols</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-12"><a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-2xl font-bold shadow-lg transition-all inline-flex items-center gap-3 font-industrial text-xs tracking-widest uppercase" data-i18n="dcs.btn">Request Technical Specs</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- BATCH PROCESS SECTION -->
|
|
<section id="batch" class="py-32 bg-slate-50">
|
|
<div class="container mx-auto px-6">
|
|
<div class="text-center max-w-3xl mx-auto mb-24">
|
|
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="batch.badge">Process Automation</h2>
|
|
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium" data-i18n="batch.title">Batch Process Control</h3>
|
|
<p class="text-slate-500 text-lg leading-relaxed font-light" data-i18n="batch.desc">Sophisticated batch automation for pharmaceutical, chemical, and specialty manufacturing operations.</p>
|
|
</div>
|
|
<div class="grid lg:grid-cols-2 gap-16 items-center max-w-6xl mx-auto">
|
|
<div>
|
|
<div class="space-y-8">
|
|
<div class="flex gap-6">
|
|
<div class="flex-shrink-0"><div class="flex items-center justify-center h-12 w-12 rounded-xl bg-blue-600 text-white"><i class="fas fa-tasks"></i></div></div>
|
|
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium" data-i18n="batch.f1.title">Recipe Management</h4><p class="text-slate-500 leading-relaxed font-light" data-i18n="batch.f1.desc">Dynamic recipe engine with version control and audit trail capabilities</p></div>
|
|
</div>
|
|
<div class="flex gap-6">
|
|
<div class="flex-shrink-0"><div class="flex items-center justify-center h-12 w-12 rounded-xl bg-blue-600 text-white"><i class="fas fa-chart-bar"></i></div></div>
|
|
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium" data-i18n="batch.f2.title">Performance Analytics</h4><p class="text-slate-500 leading-relaxed font-light" data-i18n="batch.f2.desc">Real-time batch tracking with predictive quality monitoring</p></div>
|
|
</div>
|
|
<div class="flex gap-6">
|
|
<div class="flex-shrink-0"><div class="flex items-center justify-center h-12 w-12 rounded-xl bg-blue-600 text-white"><i class="fas fa-check-circle"></i></div></div>
|
|
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium" data-i18n="batch.f3.title">GMP Compliant</h4><p class="text-slate-500 leading-relaxed font-light" data-i18n="batch.f3.desc">FDA 21 CFR Part 11 compliance and complete data integrity</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-12"><a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-2xl font-bold shadow-lg transition-all inline-flex items-center gap-3 font-industrial text-xs tracking-widest uppercase" data-i18n="batch.btn">Start Implementation</a></div>
|
|
</div>
|
|
<div class="aspect-square rounded-[2.5rem] overflow-hidden shadow-2xl"><img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?auto=format&fit=crop&q=80&w=1000" alt="Batch Process" class="w-full h-full object-cover"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- DATABASE SERVER SECTION -->
|
|
<section id="dbsvr" class="py-32 bg-white">
|
|
<div class="container mx-auto px-6">
|
|
<div class="text-center max-w-3xl mx-auto mb-24">
|
|
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="db.badge">Data Infrastructure</h2>
|
|
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium" data-i18n="db.title">Database Server Solutions</h3>
|
|
<p class="text-slate-500 text-lg leading-relaxed font-light" data-i18n="db.desc">Mission-critical historian and data management infrastructure for continuous industrial operations.</p>
|
|
</div>
|
|
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
|
<div class="bg-slate-50 rounded-[2.5rem] p-10 border border-slate-100 hover:border-blue-200 transition-all hover:shadow-xl">
|
|
<div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mb-8 text-white text-2xl"><i class="fas fa-database"></i></div>
|
|
<h4 class="text-2xl font-semibold text-slate-900 mb-4 font-premium" data-i18n="db.c1.title">High-Performance Historian</h4>
|
|
<p class="text-slate-500 leading-relaxed mb-6 font-light" data-i18n="db.c1.desc">SQL Server-based architecture optimized for 1M+ data points per second with sub-second query response</p>
|
|
<ul class="space-y-3 text-sm text-slate-600">
|
|
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> Time-series optimization</li>
|
|
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> Automatic compression</li>
|
|
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> Hot-cold storage</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-slate-50 rounded-[2.5rem] p-10 border border-slate-100 hover:border-blue-200 transition-all hover:shadow-xl">
|
|
<div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mb-8 text-white text-2xl"><i class="fas fa-shield-alt"></i></div>
|
|
<h4 class="text-2xl font-semibold text-slate-900 mb-4 font-premium" data-i18n="db.c2.title">Disaster Recovery</h4>
|
|
<p class="text-slate-500 leading-relaxed mb-6 font-light" data-i18n="db.c2.desc">Geo-redundant replication with RTO < 15 minutes and RPO < 5 minutes</p>
|
|
<ul class="space-y-3 text-sm text-slate-600">
|
|
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> Multi-site failover</li>
|
|
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> Continuous backup</li>
|
|
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> Zero data loss</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-slate-50 rounded-[2.5rem] p-10 border border-slate-100 hover:border-blue-200 transition-all hover:shadow-xl">
|
|
<div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mb-8 text-white text-2xl"><i class="fas fa-lock"></i></div>
|
|
<h4 class="text-2xl font-semibold text-slate-900 mb-4 font-premium" data-i18n="db.c3.title">Security & Compliance</h4>
|
|
<p class="text-slate-500 leading-relaxed mb-6 font-light" data-i18n="db.c3.desc">Role-based access control, encryption at rest/transit, and full audit logging</p>
|
|
<ul class="space-y-3 text-sm text-slate-600">
|
|
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> ISO 27001 certified</li>
|
|
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> CCPA/GDPR compliant</li>
|
|
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> Immutable logs</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="text-center mt-16"><a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-2xl font-bold shadow-lg transition-all inline-flex items-center gap-3 font-industrial text-xs tracking-widest uppercase" data-i18n="db.btn">Get Infrastructure Consultation</a></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- INSTRUMENTS SECTION -->
|
|
<section id="products" class="py-32 bg-slate-50">
|
|
<div class="container mx-auto px-6">
|
|
<div class="text-center max-w-3xl mx-auto mb-24">
|
|
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="inst.badge">Precision Measurement</h2>
|
|
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium" data-i18n="inst.title">Control Instruments</h3>
|
|
<p class="text-slate-500 text-lg leading-relaxed font-light" data-i18n="inst.desc">Smart field instruments engineered for accuracy and reliability in demanding industrial environments.</p>
|
|
</div>
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
|
|
<div class="h-48 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-water text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
|
|
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i1.title">Flow Transmitters</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i1.desc">Magnetic, Coriolis, and vortex flow meters with ±0.5% accuracy</p>
|
|
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Range: 0-1000 m³/h</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> 4-20mA / Pulse output</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> IP67 rated</div></div>
|
|
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
|
|
<div class="h-48 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-gauge-high text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
|
|
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i2.title">Pressure Transmitters</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i2.desc">Differential and absolute pressure sensors for ultra-high sensitivity</p>
|
|
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Range: -1 to 1000 bar</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> ±0.1% accuracy</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> ATEX certified</div></div>
|
|
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
|
|
<div class="h-48 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-thermometer-half text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
|
|
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i3.title">Temperature Sensors</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i3.desc">RTD, thermocouple, and infrared temperature measurement</p>
|
|
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Range: -50 to +300°C</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> ±0.3°C accuracy</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Fast response time</div></div>
|
|
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
|
|
<div class="h-48 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-fill-drip text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
|
|
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i4.title">Level Transmitters</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i4.desc">Ultrasonic, radar, and capacitive level sensors</p>
|
|
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Range: 0-30 meters</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> ±2mm repeatability</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Dust-proof design</div></div>
|
|
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
|
|
<div class="h-48 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-flask text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
|
|
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i5.title">Analytical Sensors</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i5.desc">pH, conductivity, oxygen, and dissolved gas analyzers</p>
|
|
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Multi-parameter capability</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Automatic calibration</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Real-time data logging</div></div>
|
|
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
|
|
<div class="h-48 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-sliders-h text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
|
|
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i6.title">Control Valves</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i6.desc">Smart positioners with HART communication</p>
|
|
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> ±0.5% repeatability</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> HART protocol</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Self-tuning algorithm</div></div>
|
|
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
|
|
<div class="h-48 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-wave-square text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
|
|
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i7.title">Vibration Monitors</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i7.desc">Accelerometers and velocity sensors for predictive maintenance</p>
|
|
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Frequency: 0-20 kHz</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Wireless capability</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> FFT analysis ready</div></div>
|
|
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
|
|
<div class="h-48 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-microchip text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
|
|
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i8.title">Smart Data Loggers</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i8.desc">IoT-enabled data acquisition units with cloud connectivity</p>
|
|
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> 16-32 analog channels</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> 4G/WiFi/Ethernet</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Local data storage</div></div>
|
|
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-20 p-12 bg-gradient-to-r from-blue-600 to-blue-700 rounded-[2.5rem] text-white text-center">
|
|
<h3 class="text-3xl font-semibold mb-4 font-premium" data-i18n="inst.custom.title">Custom Integration Available</h3>
|
|
<p class="text-white/90 mb-8 max-w-2xl mx-auto font-light" data-i18n="inst.custom.desc">All instruments integrate seamlessly with our DCS and SCADA platforms.</p>
|
|
<a href="#contact" class="bg-white text-blue-600 hover:bg-slate-100 px-8 py-3 rounded-2xl font-bold transition-all inline-flex items-center gap-3 font-industrial text-xs tracking-widest uppercase" data-i18n="inst.custom.btn">Request Custom Configuration</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SERVICES SECTION -->
|
|
<section id="services" class="py-32 bg-white">
|
|
<div class="container mx-auto px-6">
|
|
<div class="text-center max-w-3xl mx-auto mb-24">
|
|
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="svc.badge">Our Capabilities</h2>
|
|
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium" data-i18n="svc.title">World-Class Automation</h3>
|
|
<p class="text-slate-500 text-lg leading-relaxed font-light" data-i18n="svc.desc">Specialized engineering for complex physical operations through advanced data integration and distributed control systems.</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<div class="service-card group flex flex-col h-full bg-slate-50 rounded-[2.5rem] overflow-hidden border border-transparent hover:border-blue-100 transition-all duration-500 hover:shadow-2xl">
|
|
<div class="h-56 overflow-hidden"><img src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800" alt="DCS" class="service-image w-full h-full object-cover grayscale transition-all duration-700"></div>
|
|
<div class="p-10 flex-grow flex flex-col">
|
|
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-8 group-hover:bg-blue-600 transition-all duration-500"><i class="fas fa-network-wired text-blue-600 group-hover:text-white text-xl"></i></div>
|
|
<h4 class="text-2xl font-normal text-slate-900 mb-4 font-premium" data-i18n="svc.s1.title">DCS Integration</h4>
|
|
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow" data-i18n="svc.s1.desc">Redundant control architectures for utility-scale industries including power and chemical plants.</p>
|
|
<a href="#dcs" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3" data-i18n="svc.s1.link">Learn More <i class="fas fa-arrow-right"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="service-card group flex flex-col h-full bg-slate-50 rounded-[2.5rem] overflow-hidden border border-transparent hover:border-blue-100 transition-all duration-500 hover:shadow-2xl">
|
|
<div class="h-56 overflow-hidden"><img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800" alt="SCADA" class="service-image w-full h-full object-cover grayscale transition-all duration-700"></div>
|
|
<div class="p-10 flex-grow flex flex-col">
|
|
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-8 group-hover:bg-blue-600 transition-all duration-500"><i class="fas fa-chart-line text-blue-600 group-hover:text-white text-xl"></i></div>
|
|
<h4 class="text-2xl font-normal text-slate-900 mb-4 font-premium" data-i18n="svc.s2.title">SCADA Design</h4>
|
|
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow" data-i18n="svc.s2.desc">Real-time monitoring platforms with advanced HMI and secure remote access protocols.</p>
|
|
<a href="#services" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3" data-i18n="svc.s2.link">Case Studies <i class="fas fa-arrow-right"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="service-card group flex flex-col h-full bg-slate-50 rounded-[2.5rem] overflow-hidden border border-transparent hover:border-blue-100 transition-all duration-500 hover:shadow-2xl">
|
|
<div class="h-56 overflow-hidden"><img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc48?auto=format&fit=crop&q=80&w=800" alt="Historian" class="service-image w-full h-full object-cover grayscale transition-all duration-700"></div>
|
|
<div class="p-10 flex-grow flex flex-col">
|
|
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-8 group-hover:bg-blue-600 transition-all duration-500"><i class="fas fa-database text-blue-600 group-hover:text-white text-xl"></i></div>
|
|
<h4 class="text-2xl font-normal text-slate-900 mb-4 font-premium" data-i18n="svc.s3.title">Data Historians</h4>
|
|
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow" data-i18n="svc.s3.desc">Mission-critical SQL infrastructure optimized for massive industrial time-series data storage.</p>
|
|
<a href="#dbsvr" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3" data-i18n="svc.s3.link">Data Security <i class="fas fa-arrow-right"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="service-card group flex flex-col h-full bg-slate-50 rounded-[2.5rem] overflow-hidden border border-transparent hover:border-blue-100 transition-all duration-500 hover:shadow-2xl">
|
|
<div class="h-56 overflow-hidden"><img src="https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&q=80&w=800" alt="Instruments" class="service-image w-full h-full object-cover grayscale transition-all duration-700"></div>
|
|
<div class="p-10 flex-grow flex flex-col">
|
|
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-8 group-hover:bg-blue-600 transition-all duration-500"><i class="fas fa-gauge-high text-blue-600 group-hover:text-white text-xl"></i></div>
|
|
<h4 class="text-2xl font-normal text-slate-900 mb-4 font-premium" data-i18n="svc.s4.title">Control Instruments</h4>
|
|
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow" data-i18n="svc.s4.desc">Smart field sensors for flow, pressure, and temperature with high-accuracy calibration.</p>
|
|
<a href="#products" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3" data-i18n="svc.s4.link">Product Catalog <i class="fas fa-arrow-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ABOUT SECTION -->
|
|
<section id="about" class="py-32 bg-slate-50">
|
|
<div class="container mx-auto px-6">
|
|
<div class="grid lg:grid-cols-2 gap-20 items-center">
|
|
<div class="relative">
|
|
<div class="aspect-square rounded-[3rem] overflow-hidden shadow-2xl"><img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&q=80&w=1000" alt="About Hanmo" class="w-full h-full object-cover"></div>
|
|
<div class="absolute -bottom-10 -right-10 p-10 bg-blue-600 text-white rounded-[2rem] shadow-2xl max-w-xs">
|
|
<div class="text-6xl font-extralight mb-4 font-premium">15+</div>
|
|
<div class="text-xs font-bold uppercase tracking-widest leading-loose" data-i18n="about.years">Years of Industrial Excellence</div>
|
|
</div>
|
|
</div>
|
|
<div class="pt-10">
|
|
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="about.badge">About Hanmo</h2>
|
|
<h3 class="text-4xl md:text-5xl font-light text-slate-900 mb-8 premium-kerning font-premium" data-i18n="about.title">Trusted Partner in Industrial Automation</h3>
|
|
<p class="text-slate-500 leading-relaxed mb-6 font-light" data-i18n="about.p1">Since our founding, Hanmo Control & Network Co., Ltd. has been at the forefront of industrial automation engineering.</p>
|
|
<p class="text-slate-500 leading-relaxed mb-12 font-light" data-i18n="about.p2">Our team of 60+ certified engineers brings decades of combined experience in DCS, SCADA, and industrial networking.</p>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div class="p-6 bg-white rounded-2xl border border-slate-100 shadow-sm">
|
|
<div class="text-3xl font-light text-slate-900 mb-1 font-premium">ISO 9001</div>
|
|
<div class="text-xs text-slate-400 uppercase tracking-widest font-industrial font-semibold" data-i18n="about.cert">Certified</div>
|
|
</div>
|
|
<div class="p-6 bg-white rounded-2xl border border-slate-100 shadow-sm">
|
|
<div class="text-3xl font-light text-slate-900 mb-1 font-premium">24 / 7</div>
|
|
<div class="text-xs text-slate-400 uppercase tracking-widest font-industrial font-semibold" data-i18n="about.support">Support</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CONTACT SECTION -->
|
|
<section id="contact" class="py-32 bg-slate-900">
|
|
<div class="container mx-auto px-6">
|
|
<div class="text-center max-w-3xl mx-auto mb-20">
|
|
<h2 class="text-blue-400 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="contact.badge">Get In Touch</h2>
|
|
<h3 class="text-4xl md:text-6xl font-light text-white mb-8 premium-kerning font-premium" data-i18n="contact.title">Start Your Project</h3>
|
|
<p class="text-slate-400 text-lg leading-relaxed font-light" data-i18n="contact.desc">Contact our engineering team for a detailed consultation and project assessment.</p>
|
|
</div>
|
|
<div class="max-w-2xl mx-auto">
|
|
<div class="grid grid-cols-1 gap-5">
|
|
<div class="grid grid-cols-2 gap-5">
|
|
<input type="text" id="contact-name" data-i18n="contact.name" data-i18n-type="placeholder" placeholder="Full Name" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
|
|
<input type="email" id="contact-email" data-i18n="contact.email" data-i18n-type="placeholder" placeholder="Email Address" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
|
|
</div>
|
|
<input type="text" id="contact-company" data-i18n="contact.company" data-i18n-type="placeholder" placeholder="Company Name" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
|
|
<textarea rows="5" id="contact-message" data-i18n="contact.msg" data-i18n-type="placeholder" placeholder="Describe your project requirements..." class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors resize-none font-light"></textarea>
|
|
<button id="contact-submit" class="bg-blue-600 hover:bg-blue-700 text-white py-5 rounded-2xl font-bold transition-all hover:-translate-y-0.5 font-industrial text-xs tracking-widest uppercase shadow-2xl" data-i18n="contact.btn">Send Message</button>
|
|
<div id="contact-status" class="hidden p-5 rounded-2xl text-center font-light"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="bg-slate-950 py-12 border-t border-white/5">
|
|
<div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="bg-blue-600 w-8 h-8 rounded-lg flex items-center justify-center">
|
|
<span class="text-white font-bold text-sm font-industrial">H</span>
|
|
</div>
|
|
<span class="text-white font-bold font-industrial text-sm">HANMO</span>
|
|
<span class="text-slate-500 text-xs font-industrial">Control & Network Co., Ltd.</span>
|
|
</div>
|
|
<p class="text-slate-600 text-xs font-light" data-i18n="footer.copy">© 2024 Hanmo Control & Network Co., Ltd. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- EmailJS SDK -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
|
|
<!-- i18n 먼저 로드 후 script.js -->
|
|
<script src="assets/js/i18n.js"></script>
|
|
<script src="assets/js/script.js"></script>
|
|
</body>
|
|
</html>
|