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

Very Good Version !

Browse Source
This commit is contained in:
Wind
2026-02-19 13:20:09 +09:00
parent e33d42bd7e
commit 40bfe784a6
89 changed files with 2864 additions and 70917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
html/App.tsx
View File

@@ -1,50 +0,0 @@
import React, { useEffect } from 'react';
import { HashRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import Header from './components/Header';
import Hero from './components/Hero';
import Services from './components/Services';
import About from './components/About';
import Contact from './components/Contact';
import Footer from './components/Footer';
import ChatBot from './components/ChatBot';
const ScrollToTop = () => {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return null;
};
const HomePage = () => (
<>
<Hero />
<Services />
<About />
<Contact />
</>
);
const App: React.FC = () => {
return (
<Router>
<ScrollToTop />
<div className="min-h-screen flex flex-col relative">
<Header />
<main className="flex-grow">
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/services" element={<div className="pt-24"><Services /></div>} />
<Route path="/about" element={<div className="pt-24"><About /></div>} />
<Route path="/contact" element={<div className="pt-24"><Contact /></div>} />
</Routes>
</main>
<Footer />
<ChatBot />
</div>
</Router>
);
};
export default App;

20
html/README.md
View File

@@ -1,20 +0,0 @@
<div align="center">
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
</div>
# Run and deploy your AI Studio app
This contains everything you need to run your app locally.
View your app in AI Studio: https://ai.studio/apps/drive/12rxvTk7cfpawzA-KqF6Z1AfiIdHEhLqT
## Run Locally
**Prerequisites:** Node.js
1. Install dependencies:
`npm install`
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
3. Run the app:
`npm run dev`

2
html/assets/images/icons/icons.svg
View File

@@ -13,7 +13,7 @@
<rect x="246" y="230" width="20" height="170" rx="10"/>
<!-- 밸브 본체 (아치형) -->
<path d="M 100 230 Q 256 80, 412 230"
<path d="M 100 230 Q 256 24, 412 230"
stroke="currentColor"
stroke-width="30"
fill="none"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

4
html/assets/js/i18n.js
View File

@@ -285,10 +285,10 @@ const translations = {
'about.badge' : '회사 소개',
'about.title' : '공정 자동화의 신뢰할 수 있는 파트너',
'about.p1' : '(주)한모씨앤앤는 창립 이래 공정 자동화 엔지니어링의 최전선에서 활동하고 있습니다. 세계에서 가장 까다로운 공정 현장을 위한 미션 크리티컬 제어 시스템 설계, 구현 및 유지보수를 전문으로 합니다.',
'about.p2' : 'DCS, SCADA, 계측기기, 공정 네트워킹 분야에서 수십 년의 경험을 바탕으로 최고의 정밀도와 신뢰성을 보장합니다.',
'about.p2' : 'DCS, SCADA, 계측기기, 제어반 설계 및 제작, 공정 네트워킹 분야에서 수십 년의 경험을 바탕으로 최고의 정밀도와 신뢰성을 보장합니다.',
'about.cert' : '인증',
'about.support' : '지원',
'about.years' : '여년간의 공정 제어 전문성',
'about.years' : 'Years of Industrial Excellence',
// CONTACT
'contact.badge' : '문의하기',

57
html/components/About.tsx
View File

@@ -1,57 +0,0 @@
import React from 'react';
const About: React.FC = () => {
return (
<section id="about" className="py-24 bg-slate-50">
<div className="container mx-auto px-6">
<div className="grid lg:grid-cols-2 gap-16 items-center">
<div className="order-2 lg:order-1 relative">
<div className="aspect-[4/3] md:aspect-square rounded-[2rem] overflow-hidden shadow-2xl">
<img
src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&q=80&w=1000"
alt="Our Engineering Facility"
className="w-full h-full object-cover"
/>
</div>
<div className="absolute -bottom-6 -left-6 md:-bottom-10 md:-left-10 p-6 md:p-8 bg-blue-600 text-white rounded-3xl shadow-2xl max-w-[200px] md:max-w-[240px]">
<div className="text-4xl md:text-5xl font-bold mb-2">15+</div>
<div className="text-sm font-semibold opacity-90 uppercase tracking-widest leading-tight">Years of Industrial Excellence</div>
</div>
</div>
<div className="order-1 lg:order-2">
<h2 className="text-blue-600 font-bold uppercase tracking-widest text-sm mb-3">Our Identity</h2>
<h3 className="text-3xl md:text-5xl font-extrabold text-slate-900 mb-8 leading-tight">
Designing the Future of Industrial Frameworks
</h3>
<p className="text-slate-600 mb-6 text-lg leading-relaxed">
Hanmo Control & Network Co., Ltd. was established on the foundation that industrial automation must be inherently reliable, perfectly integrated, and intelligently scalable.
</p>
<p className="text-slate-600 mb-10 leading-relaxed">
As strategic partners for global leaders transitioning into Industry 4.0, our experts specialize in everything from site-wide instrumentation to enterprise-grade data management.
</p>
<div className="grid sm:grid-cols-2 gap-6">
{[
{ title: 'Reliability Focused', icon: 'fa-shield-halved' },
{ title: 'Global Standards', icon: 'fa-globe' },
{ title: '24/7 Support', icon: 'fa-clock' },
{ title: 'Custom R&D', icon: 'fa-flask' },
].map((item, i) => (
<div key={i} className="flex items-center gap-4 p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
<div className="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center text-blue-600">
<i className={`fas ${item.icon}`}></i>
</div>
<span className="font-bold text-slate-800 text-sm">{item.title}</span>
</div>
))}
</div>
</div>
</div>
</div>
</section>
);
};
export default About;

100
html/components/ChatBot.tsx
View File

@@ -1,100 +0,0 @@
import React, { useState, useRef, useEffect } from 'react';
import { chatWithExpert } from '../services/geminiService';
import { Message } from '../types';
const ChatBot: React.FC = () => {
const [isOpen, setIsOpen] = useState(false);
const [input, setInput] = useState('');
const [messages, setMessages] = useState<Message[]>([
{ role: 'model', text: "Welcome to Hanmo! I'm your Technical Assistant. How can I help you with our DCS, SCADA, or field instrument solutions today?" }
]);
const [isLoading, setIsLoading] = useState(false);
const scrollRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}
}, [messages, isOpen]);
const handleSend = async () => {
if (!input.trim() || isLoading) return;
const userMsg = input.trim();
setInput('');
setMessages(prev => [...prev, { role: 'user', text: userMsg }]);
setIsLoading(true);
const history = messages.map(m => ({ role: m.role, text: m.text }));
const responseText = await chatWithExpert(userMsg, history);
setMessages(prev => [...prev, { role: 'model', text: responseText }]);
setIsLoading(false);
};
return (
<div className="fixed bottom-6 right-6 z-[60]">
<button
onClick={() => setIsOpen(!isOpen)}
className="w-14 h-14 md:w-16 md:h-16 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-2xl flex items-center justify-center transition-transform hover:scale-110 active:scale-95"
>
{isOpen ? <i className="fas fa-times text-2xl"></i> : <i className="fas fa-robot text-2xl"></i>}
</button>
{isOpen && (
<div className="absolute bottom-20 right-0 w-[calc(100vw-3rem)] md:w-96 h-[500px] max-h-[70vh] bg-white rounded-3xl shadow-2xl flex flex-col overflow-hidden border border-slate-200 animate-in fade-in slide-in-from-bottom-5">
<div className="p-5 bg-blue-600 text-white font-bold flex items-center justify-between">
<div className="flex items-center gap-3">
<i className="fas fa-microchip"></i>
<span>Tech Advisor</span>
</div>
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
</div>
<div ref={scrollRef} className="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
{messages.map((m, i) => (
<div key={i} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
<div className={`max-w-[85%] p-4 rounded-2xl text-sm leading-relaxed ${
m.role === 'user'
? 'bg-blue-600 text-white rounded-tr-none shadow-md'
: 'bg-white text-slate-700 shadow-sm border border-slate-100 rounded-tl-none'
}`}>
{m.text}
</div>
</div>
))}
{isLoading && (
<div className="flex justify-start">
<div className="bg-white p-4 rounded-2xl border border-slate-100 rounded-tl-none flex gap-1.5 shadow-sm">
<div className="w-1.5 h-1.5 bg-blue-400 rounded-full animate-bounce"></div>
<div className="w-1.5 h-1.5 bg-blue-400 rounded-full animate-bounce [animation-delay:0.2s]"></div>
<div className="w-1.5 h-1.5 bg-blue-400 rounded-full animate-bounce [animation-delay:0.4s]"></div>
</div>
</div>
)}
</div>
<div className="p-4 bg-white border-t border-slate-100 flex gap-2">
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSend()}
placeholder="Ask a technical question..."
className="flex-1 bg-slate-100 text-sm p-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-600/20"
/>
<button
onClick={handleSend}
className="bg-blue-600 hover:bg-blue-700 text-white w-12 h-12 rounded-xl flex items-center justify-center transition-colors"
>
<i className="fas fa-paper-plane"></i>
</button>
</div>
</div>
)}
</div>
);
};
export default ChatBot;

123
html/components/Contact.tsx
View File

@@ -1,123 +0,0 @@
import React, { useState } from 'react';
const Contact: React.FC = () => {
const [status, setStatus] = useState<'idle' | 'sending' | 'success'>('idle');
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
setStatus('sending');
setTimeout(() => setStatus('success'), 1500);
};
return (
<section id="contact" className="py-24 bg-white">
<div className="container mx-auto px-6">
<div className="max-w-6xl mx-auto bg-slate-900 rounded-[2rem] md:rounded-[3rem] overflow-hidden shadow-2xl flex flex-col lg:flex-row">
{/* Information Section */}
<div className="lg:w-5/12 p-8 md:p-16 bg-blue-600 text-white flex flex-col justify-between">
<div>
<h3 className="text-3xl md:text-4xl font-bold mb-6">Get in Touch</h3>
<p className="text-blue-100 mb-12 text-lg">
Ready to optimize your industrial infrastructure? Our engineering team is standing by to assist with your technical inquiries.
</p>
<div className="space-y-8">
<div className="flex gap-5 items-start">
<div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center shrink-0">
<i className="fas fa-map-marker-alt"></i>
</div>
<div>
<h4 className="font-bold">Headquarters</h4>
<p className="text-blue-100 text-sm">Industrial Hub B123, Gangnam District<br />Seoul, South Korea</p>
</div>
</div>
<div className="flex gap-5 items-start">
<div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center shrink-0">
<i className="fas fa-phone-alt"></i>
</div>
<div>
<h4 className="font-bold">Phone</h4>
<p className="text-blue-100 text-sm">+82 2-1234-5678</p>
</div>
</div>
<div className="flex gap-5 items-start">
<div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center shrink-0">
<i className="fas fa-envelope"></i>
</div>
<div>
<h4 className="font-bold">Email</h4>
<p className="text-blue-100 text-sm">solutions@hanmocontrol.com</p>
</div>
</div>
</div>
</div>
<div className="mt-16 flex gap-4">
<a href="#" className="w-12 h-12 bg-white/10 hover:bg-white/30 rounded-full flex items-center justify-center transition-all">
<i className="fab fa-linkedin-in text-xl"></i>
</a>
<a href="#" className="w-12 h-12 bg-white/10 hover:bg-white/30 rounded-full flex items-center justify-center transition-all">
<i className="fab fa-twitter text-xl"></i>
</a>
</div>
</div>
{/* Form Section */}
<div className="lg:w-7/12 p-8 md:p-16 bg-white">
{status === 'success' ? (
<div className="h-full flex flex-col items-center justify-center text-center space-y-6">
<div className="w-24 h-24 bg-green-100 text-green-600 rounded-full flex items-center justify-center text-4xl">
<i className="fas fa-check"></i>
</div>
<h4 className="text-3xl font-extrabold text-slate-900">Inquiry Received</h4>
<p className="text-slate-500 text-lg">Thank you for reaching out. An automation consultant will review your request and contact you within 24 hours.</p>
<button
onClick={() => setStatus('idle')}
className="text-blue-600 font-bold hover:underline"
>
Send another request
</button>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid sm:grid-cols-2 gap-6">
<div className="space-y-2">
<label className="text-xs font-bold text-slate-500 uppercase tracking-widest">Full Name</label>
<input required type="text" className="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all" placeholder="John Doe" />
</div>
<div className="space-y-2">
<label className="text-xs font-bold text-slate-500 uppercase tracking-widest">Work Email</label>
<input required type="email" className="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all" placeholder="j.doe@company.com" />
</div>
</div>
<div className="space-y-2">
<label className="text-xs font-bold text-slate-500 uppercase tracking-widest">Requirement Type</label>
<select className="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all">
<option>DCS Architecture Design</option>
<option>SCADA System Integration</option>
<option>Database & Historian Setup</option>
<option>Field Instrumentation Supply</option>
<option>Technical Support</option>
</select>
</div>
<div className="space-y-2">
<label className="text-xs font-bold text-slate-500 uppercase tracking-widest">Project Details</label>
<textarea required rows={5} className="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all" placeholder="Tell us about your technical requirements..."></textarea>
</div>
<button
disabled={status === 'sending'}
className="w-full bg-slate-900 hover:bg-blue-600 text-white font-bold py-5 rounded-xl shadow-lg transition-all active:scale-[0.98] disabled:opacity-50"
>
{status === 'sending' ? 'Processing...' : 'Submit Inquiry'}
</button>
</form>
)}
</div>
</div>
</div>
</section>
);
};
export default Contact;

74
html/components/Footer.tsx
View File

@@ -1,74 +0,0 @@
import React from 'react';
const Footer: React.FC = () => {
return (
<footer className="bg-slate-900 text-white pt-20 pb-10">
<div className="container mx-auto px-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
<div className="lg:col-span-1">
<div className="flex items-center gap-3 mb-8">
<div className="bg-blue-600 w-10 h-10 rounded-lg flex items-center justify-center shrink-0 shadow-lg">
<span className="text-white font-bold text-xl font-industrial">H</span>
</div>
<div className="flex flex-col leading-none">
<span className="font-bold text-xl tracking-tight font-industrial text-white">
HANMO
</span>
<span className="text-[9px] font-bold uppercase tracking-[0.2em] mt-1 text-blue-500">
Control & Network
</span>
</div>
</div>
<p className="text-slate-400 leading-relaxed mb-8 max-w-sm">
Providing resilient, high-precision control and networking solutions for the world's most demanding industrial environments.
</p>
</div>
<div>
<h4 className="font-bold text-lg mb-6 border-b border-slate-800 pb-2 font-industrial tracking-wide">Solutions</h4>
<ul className="space-y-4 text-slate-400">
<li><a href="#" className="hover:text-blue-500 transition-colors">DCS Integration</a></li>
<li><a href="#" className="hover:text-blue-500 transition-colors">SCADA Design</a></li>
<li><a href="#" className="hover:text-blue-500 transition-colors">Industrial Historians</a></li>
<li><a href="#" className="hover:text-blue-500 transition-colors">Smart Field Devices</a></li>
</ul>
</div>
<div>
<h4 className="font-bold text-lg mb-6 border-b border-slate-800 pb-2 font-industrial tracking-wide">Resources</h4>
<ul className="space-y-4 text-slate-400">
<li><a href="#" className="hover:text-blue-500 transition-colors">Technical Docs</a></li>
<li><a href="#" className="hover:text-blue-500 transition-colors">Case Studies</a></li>
<li><a href="#" className="hover:text-blue-500 transition-colors">Security Updates</a></li>
<li><a href="#" className="hover:text-blue-500 transition-colors">Training Portal</a></li>
</ul>
</div>
<div>
<h4 className="font-bold text-lg mb-6 border-b border-slate-800 pb-2 font-industrial tracking-wide">Connect</h4>
<div className="flex gap-4 mb-6">
<a href="#" className="w-10 h-10 rounded-xl bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition-all">
<i className="fab fa-linkedin-in"></i>
</a>
<a href="#" className="w-10 h-10 rounded-xl bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition-all">
<i className="fab fa-twitter"></i>
</a>
</div>
<p className="text-slate-500 text-sm">Subscribe to our newsletter for automation insights.</p>
</div>
</div>
<div className="pt-10 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-500 text-xs uppercase tracking-widest font-bold">
<p>© 2024 Hanmo Control & Network Co., Ltd.</p>
<div className="flex gap-8">
<a href="#" className="hover:text-slate-300">Privacy Policy</a>
<a href="#" className="hover:text-slate-300">Terms & Conditions</a>
</div>
</div>
</div>
</footer>
);
};
export default Footer;

88
html/components/Header.tsx
View File

@@ -1,88 +0,0 @@
import React, { useState, useEffect } from 'react';
const Header: React.FC = () => {
const [isScrolled, setIsScrolled] = useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
useEffect(() => {
const handleScroll = () => setIsScrolled(window.scrollY > 20);
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const navItems = [
{ name: 'Home', href: '#/' },
{ name: 'Services', href: '#/services' },
{ name: 'About', href: '#/about' },
{ name: 'Contact', href: '#/contact' },
];
return (
<header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled ? 'glass-effect shadow-md py-3' : 'bg-transparent py-6'}`}>
<div className="container mx-auto px-6 flex justify-between items-center">
<a href="#/" className="flex items-center gap-3 group">
<div className="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 className="text-white font-bold text-xl font-industrial">H</span>
</div>
<div className="flex flex-col leading-none">
<span className={`font-bold text-xl tracking-tight font-industrial ${isScrolled ? 'text-slate-900' : 'text-slate-900 md:text-white'}`}>
HANMO
</span>
<span className={`text-[9px] font-bold uppercase tracking-[0.2em] mt-1 ${isScrolled ? 'text-blue-600' : 'text-blue-500'}`}>
Control & Network
</span>
</div>
</a>
{/* Desktop Nav */}
<nav className="hidden md:flex gap-8">
{navItems.map((item) => (
<a
key={item.name}
href={item.href}
className={`text-sm font-semibold hover:text-blue-600 transition-colors ${isScrolled ? 'text-slate-700' : 'text-slate-100'}`}
>
{item.name}
</a>
))}
</nav>
<div className="hidden md:block">
<button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full text-sm font-bold shadow-lg transition-all active:scale-95 font-industrial tracking-wide">
REQUEST QUOTE
</button>
</div>
{/* Mobile menu toggle */}
<button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
className={`md:hidden p-2 rounded-lg transition-colors ${isScrolled ? 'text-slate-900' : 'text-slate-100'}`}
>
<i className={`fas ${isMobileMenuOpen ? 'fa-times' : 'fa-bars'} text-2xl`}></i>
</button>
</div>
{/* Mobile Menu Drawer */}
<div className={`md:hidden absolute top-full left-0 right-0 bg-white border-t border-slate-100 shadow-2xl transition-all duration-300 ${isMobileMenuOpen ? 'opacity-100 translate-y-0 visible' : 'opacity-0 -translate-y-4 invisible'}`}>
<nav className="flex flex-col p-6 space-y-4">
{navItems.map((item) => (
<a
key={item.name}
href={item.href}
onClick={() => setIsMobileMenuOpen(false)}
className="text-lg font-medium text-slate-800 hover:text-blue-600 border-b border-slate-50 pb-2"
>
{item.name}
</a>
))}
<button className="w-full bg-blue-600 text-white py-4 rounded-xl font-bold font-industrial tracking-widest">
REQUEST QUOTE
</button>
</nav>
</div>
</header>
);
};
export default Header;

55
html/components/Hero.tsx
View File

@@ -1,55 +0,0 @@
import React from 'react';
const Hero: React.FC = () => {
return (
<section id="home" className="relative min-h-screen flex items-center pt-20 overflow-hidden">
<div className="absolute inset-0 z-0">
<img
src="https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&q=80&w=2000"
alt="Control Room"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-slate-900/80 md:bg-transparent md:bg-gradient-to-r md:from-slate-900/90 md:to-slate-900/20"></div>
</div>
<div className="container mx-auto px-6 relative z-10">
<div className="max-w-5xl">
<div className="inline-block px-4 py-1.5 mb-6 rounded-full bg-blue-600/20 border border-blue-400/30 text-blue-400 text-[10px] font-bold uppercase industrial-tracking animate-pulse font-industrial">
Next-Gen Industrial Solutions
</div>
<h1 className="text-5xl md:text-8xl font-extralight text-white mb-8 leading-[1.05] premium-kerning font-premium">
Engineering <span className="text-blue-500 font-normal">Precision</span> <br className="hidden md:block"/> for Industrial Networks
</h1>
<p className="text-lg md:text-xl text-slate-300 mb-10 leading-relaxed max-w-2xl font-premium font-light opacity-80">
Hanmo Control & Network Co., Ltd. delivers global-standard DCS and SCADA infrastructure for mission-critical industrial ecosystems and digital transformation.
</p>
<div className="flex flex-col sm:flex-row gap-4">
<a href="#services" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-xl font-bold shadow-xl transition-all hover:-translate-y-1 text-center font-industrial text-xs tracking-widest uppercase">
Our Expertise
</a>
<a href="#contact" className="bg-white/10 hover:bg-white/20 text-white border border-white/20 backdrop-blur-md px-8 py-4 rounded-xl font-bold transition-all text-center font-industrial text-xs tracking-widest uppercase">
Schedule Consultation
</a>
</div>
</div>
<div className="mt-20 grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-8 max-w-5xl">
{[
{ label: 'Installed Nodes', value: '1,500+' },
{ label: 'Uptime', value: '99.99%' },
{ label: 'Certified Experts', value: '60+' },
{ label: 'Years Active', value: '15' },
].map((stat, i) => (
<div key={i} className="p-6 bg-white/5 backdrop-blur-xl rounded-2xl border border-white/10 group hover:bg-white/10 transition-colors">
<div className="text-3xl md:text-4xl font-extralight text-white mb-2 font-premium premium-kerning">{stat.value}</div>
<div className="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold">{stat.label}</div>
</div>
))}
</div>
</div>
</section>
);
};
export default Hero;

78
html/components/Services.tsx
View File

@@ -1,78 +0,0 @@
import React from 'react';
import { ServiceItem } from '../types';
const SERVICES: ServiceItem[] = [
{
id: 'dcs',
title: 'Distributed Control (DCS)',
description: 'Advanced, redundant control architectures designed for continuous process industries including power generation and chemicals.',
icon: 'fa-network-wired',
image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800'
},
{
id: 'scada',
title: 'SCADA Solutions',
description: 'High-performance monitoring platforms with cutting-edge HMI, real-time analytics, and secure remote access protocols.',
icon: 'fa-chart-line',
image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800'
},
{
id: 'database',
title: 'Industrial Historians',
description: 'Mission-critical database servers and SQL infrastructure optimized for heavy manufacturing data and regulatory compliance.',
icon: 'fa-database',
image: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc48?auto=format&fit=crop&q=80&w=800'
},
{
id: 'instruments',
title: 'Control Instruments',
description: 'Precision field instruments including flow, pressure, and temperature transmitters and smart control valves.',
icon: 'fa-gauge-high',
image: 'https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&q=80&w=800'
}
];
const Services: React.FC = () => {
return (
<section id="services" className="py-24 bg-white">
<div className="container mx-auto px-6">
<div className="text-center max-w-3xl mx-auto mb-20">
<h2 className="text-blue-600 font-bold uppercase tracking-widest text-sm mb-3">Capabilities</h2>
<h3 className="text-3xl md:text-5xl font-extrabold text-slate-900 mb-6">World-Class Automation</h3>
<p className="text-slate-600 text-lg leading-relaxed">
We bridge the gap between heavy physical operations and digital intelligence through robust networking and control systems.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{SERVICES.map((service) => (
<div key={service.id} className="group flex flex-col h-full bg-slate-50 border border-slate-100 rounded-3xl overflow-hidden hover:border-blue-200 transition-all hover:shadow-2xl hover:-translate-y-2">
<div className="h-48 overflow-hidden">
<img
src={service.image}
alt={service.title}
className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 group-hover:scale-110"
/>
</div>
<div className="p-8 flex-grow flex flex-col">
<div className="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 group-hover:bg-blue-600 transition-colors">
<i className={`fas ${service.icon} text-blue-600 group-hover:text-white text-xl`}></i>
</div>
<h4 className="text-xl font-bold text-slate-900 mb-4">{service.title}</h4>
<p className="text-slate-600 text-sm leading-relaxed mb-8 flex-grow">
{service.description}
</p>
<a href="#" className="text-blue-600 font-bold text-sm inline-flex items-center gap-2 group-hover:gap-4 transition-all">
Technical Specs <i className="fas fa-arrow-right"></i>
</a>
</div>
</div>
))}
</div>
</div>
</section>
);
};
export default Services;

104
html/index.html
View File

@@ -129,45 +129,92 @@
</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 class="text-center max-w-3xl mx-auto mb-12">
<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="assets/images/dcsintegration.png?auto=format&fit=crop&q=80&w=1000" alt="DCS Control Room" class="w-full h-full object-cover"></div>
<!-- 이미지 -->
<div class="aspect-square rounded-[2.5rem] overflow-hidden shadow-2xl">
<img src="assets/images/dcsintegration.png?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-18">
<!-- Honeywell 로고 이미지 추가 -->
<!-- Honeywell 로고 + 설명 (맨 위로 이동) -->
<div class="mb-12">
<img src="assets/images/honeywell-logo.svg" alt="Honeywell Logo" class="h-8 w-auto mb-4 object-contain">
<p class="text-slate-500 leading-relaxed font-light" data-i18n="dcs.f0.desc">
Reliable DCS solutions with Honeywell's Experion PKS, ensuring seamless integration and optimal performance
</p>
</div>
<!-- 아이콘 리스트 -->
<div class="space-y-6">
<div class="flex gap-6">
<p class="text-slate-500 leading-relaxed font-light" data-i18n="dcs.f0.desc">Reliable DCS solutions with Honeywell's Experion PKS, ensuring seamless integration and optimal performance</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-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 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-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 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 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="pt-32 pb-32 bg-slate-50">
<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-8"> <!--아래 내용과의 간격 mb-16에서 줄임-->
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="batch.badge">Process Automation</h2>
@@ -203,8 +250,7 @@
<div class="aspect-square rounded-[2.5rem] overflow-hidden shadow-2xl"><img src="assets/images/BatchControl.png" alt="Batch Process" class="w-full h-full object-cover"></div>
</div>
</div>
</section>
</section>
<!-- DATABASE SERVER SECTION -->
<section id="dbsvr" class="py-32 bg-white">
<div class="container mx-auto px-6">
@@ -301,7 +347,7 @@
</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-32 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><svg class="w-20 h-20 text-blue-300 group-hover:text-blue-600 transition-colors"><use href="assets/images/icons/icons.svg#icon-xv"></use></svg></div>
<div class="h-32 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><svg class="w-16 h-16 text-blue-300 group-hover:text-blue-600 transition-colors"><use href="assets/images/icons/icons.svg#icon-xv"></use></svg></div>
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i7.title">Shutoff Valves</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> Automa</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Proval</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Flowserve</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> -->
@@ -491,16 +537,16 @@
<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="assets/images/ControlRoom7.png" 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="absolute -bottom-10 -right-10 p-8 bg-blue-600 text-white rounded-[2rem] shadow-2xl max-w-xs">
<div class="text-6xl font-extralight mb-4 font-premium">20+</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">
<div class="mt-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>
<p class="text-slate-500 leading-relaxed mb-6 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>

16
html/index.tsx
View File

@@ -1,16 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const rootElement = document.getElementById('root');
if (!rootElement) {
throw new Error("Could not find root element to mount to");
}
const root = ReactDOM.createRoot(rootElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

7
html/metadata.json
View File

@@ -1,7 +0,0 @@
{
"name": "Hanmo Control & Network Co., Ltd.",
"description": "Premium industrial automation solutions provider specializing in DCS, SCADA, Database Servers, and Control Instruments.",
"requestFramePermissions": [
"camera"
]
}

23
html/package.json
View File

@@ -1,23 +0,0 @@
{
"name": "hanmo-control-&-network-co.,-ltd.",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^19.2.4",
"react-dom": "^19.2.4",
"@google/genai": "^1.41.0",
"react-router-dom": "^7.13.0"
},
"devDependencies": {
"@types/node": "^22.14.0",
"@vitejs/plugin-react": "^5.0.0",
"typescript": "~5.8.2",
"vite": "^6.2.0"
}
}

36
html/services/geminiService.ts
View File

@@ -1,36 +0,0 @@
import { GoogleGenAI } from "@google/genai";
const SYSTEM_INSTRUCTION = `You are the primary AI Technical Consultant for "Hanmo Control & Network Co., Ltd.".
Hanmo is a global leader specializing in:
1. DCS (Distributed Control Systems): High-availability process automation for utility-scale industries.
2. SCADA (Supervisory Control and Data Acquisition): Real-time remote operations and monitoring.
3. Database & Historian Servers: Secure, high-speed industrial data management.
4. Precision Control Instruments: Smart sensors and actuators for flow, pressure, and thermal management.
Tone: Professional, highly technical, authoritative, and helpful.
Language: You must respond in English at all times.
Guidance: Provide expert advice on automation architecture and integration. For pricing or project-specific quotes, instruct the user to use the official contact form on the website.`;
export async function chatWithExpert(message: string, history: {role: 'user' | 'model', text: string}[]) {
try {
const ai = new GoogleGenAI({ apiKey: process.env.API_KEY || '' });
const response = await ai.models.generateContent({
model: 'gemini-3-flash-preview',
contents: [
...history.map(h => ({ role: h.role === 'user' ? 'user' : 'model', parts: [{ text: h.text }] })),
{ role: 'user', parts: [{ text: message }] }
],
config: {
systemInstruction: SYSTEM_INSTRUCTION,
temperature: 0.7,
},
});
return response.text || "I apologize, but I am unable to process your technical inquiry right now. Please try again later.";
} catch (error) {
console.error("Gemini API Error:", error);
return "Our technical advisor is currently offline. Please contact our support team directly via email.";
}
}

2
html/status.json
View File

@@ -1 +1 @@
{"cpu_temp": "40", "nvme_temp": "33", "uptime_days": 6, "last_update": "07:51:01"}
{"cpu_temp": "40", "nvme_temp": "33", "uptime_days": 6, "last_update": "13:19:01"}

29
html/tsconfig.json
View File

@@ -1,29 +0,0 @@
{
"compilerOptions": {
"target": "ES2022",
"experimentalDecorators": true,
"useDefineForClassFields": false,
"module": "ESNext",
"lib": [
"ES2022",
"DOM",
"DOM.Iterable"
],
"skipLibCheck": true,
"types": [
"node"
],
"moduleResolution": "bundler",
"isolatedModules": true,
"moduleDetection": "force",
"allowJs": true,
"jsx": "react-jsx",
"paths": {
"@/*": [
"./*"
]
},
"allowImportingTsExtensions": true,
"noEmit": true
}
}

20
html/types.ts
View File

@@ -1,20 +0,0 @@
export interface Message {
role: 'user' | 'model';
text: string;
}
export interface ServiceItem {
id: string;
title: string;
description: string;
icon: string;
image: string;
}
export interface ContactFormData {
name: string;
email: string;
subject: string;
message: string;
}

23
html/vite.config.ts
View File

@@ -1,23 +0,0 @@
import path from 'path';
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, '.', '');
return {
server: {
port: 3000,
host: '0.0.0.0',
},
plugins: [react()],
define: {
'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
},
resolve: {
alias: {
'@': path.resolve(__dirname, '.'),
}
}
};
});