windpacer/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Wind
2026-02-14 23:00:55 +09:00
commit ebd2be03a2
59 changed files with 2532 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

265
.Backup/html/index.html Normal file
View File

@@ -0,0 +1,265 @@
<!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">
<style>
:root {
scroll-behavior: smooth;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #f8fafc;
color: #0f172a;
}
.font-industrial { font-family: 'Space Grotesk', sans-serif; }
.font-premium { font-family: 'Plus Jakarta Sans', sans-serif; }
.glass-effect {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Premium Typography Styles */
.premium-kerning { letter-spacing: -0.04em; }
.industrial-tracking { letter-spacing: 0.15em; }
.hero-title {
line-height: 1.05;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }
/* Hide scrollbar but keep functionality */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.service-card:hover .service-image {
transform: scale(1.1);
filter: grayscale(0);
}
</style>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@^19.2.4",
"react-dom/": "https://esm.sh/react-dom@^19.2.4/",
"react/": "https://esm.sh/react@^19.2.4/",
"@google/genai": "https://esm.sh/@google/genai@^1.41.0",
"react-router-dom": "https://esm.sh/react-router-dom@^7.13.0"
}
}
</script>
<link rel="stylesheet" href="/index.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">Home</a>
<a href="#services" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Services</a>
<a href="#about" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">About</a>
<a href="#contact" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Contact</a>
</nav>
<div class="hidden md:block">
<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">
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">
<div class="flex justify-end mb-12">
<button id="close-menu-btn" class="text-white text-3xl">&times;</button>
</div>
<nav class="flex flex-col gap-8 text-center">
<a href="#home" class="text-2xl font-light text-white font-premium">Home</a>
<a href="#services" class="text-2xl font-light text-white font-premium">Services</a>
<a href="#about" class="text-2xl font-light text-white font-premium">About</a>
<a href="#contact" class="text-2xl font-light text-white font-premium">Contact</a>
<button class="mt-8 bg-blue-600 text-white py-5 rounded-2xl font-bold font-industrial tracking-widest uppercase">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">
Precision Industrial Control
</div>
<h1 class="text-5xl md:text-8xl font-extralight text-white mb-8 hero-title premium-kerning font-premium">
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">
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">
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">
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">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">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">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">Years Excellence</div>
</div>
</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">Our Capabilities</h2>
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium">World-Class Automation</h3>
<p class="text-slate-500 text-lg leading-relaxed font-light">
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">
<!-- DCS -->
<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">DCS Integration</h4>
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow">
Redundant control architectures for utility-scale industries including power and chemical plants.
</p>
<a href="#" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3">
Technical Specs <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
<!-- SCADA -->
<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">SCADA Design</h4>
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow">
Real-time monitoring platforms with advanced HMI and secure remote access protocols.
</p>
<a href="#" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3">
Case Studies <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
<!-- Database -->
<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 Historians</h4>
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow">
Mission-critical SQL infrastructure optimized for massive industrial time-series data storage.
</p>
<a href="#" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3">
Data Security <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
<!-- Instruments -->
<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">Control Instruments</h4>
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow">
Smart field sensors for flow, pressure, and temperature with high-accuracy calibration.
</p>
<a href="#" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3">
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-lo