first commit

.Backup/docker-compose.yml

@@ -0,0 +1,22 @@
+version: '3.8'
+services:
+  # 1. 관리 도구 (Nginx Proxy Manager)
+  npm:
+    image: 'jc21/nginx-proxy-manager:latest'
+    container_name: npm-admin
+    restart: unless-stopped
+    ports:
+      - '80:80'      # HTTP 외부 접속용
+      - '81:81'      # 관리자 화면 접속용 (HMI 역할)
+      - '443:443'    # HTTPS 보안 접속용
+    volumes:
+      - ./npm/data:/data
+      - ./npm/letsencrypt:/etc/letsencrypt
+
+  # 2. 실제 홈페이지 (공사 중 페이지)
+  web-server:
+    image: nginx:alpine
+    container_name: hanmo-home
+    restart: unless-stopped
+    volumes:
+      - ./html:/usr/share/nginx/html:ro

.Backup/html/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.Backup/html/App.tsx

@@ -0,0 +1,50 @@
+
+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;

.Backup/html/README.md

@@ -0,0 +1,20 @@
+<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`

.Backup/html/assets/css/style.css

@@ -0,0 +1,58 @@
+/* 기본 스타일 */
+: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);
+}
+
+/* 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; }
+
+/* 서비스 카드 이미지 hover */
+.service-card:hover .service-image {
+    transform: scale(1.1);
+    filter: grayscale(0);
+}
+
+/* ==================== 이미지 보호 레이어 ==================== */
+.img-protect-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+.img-protect-wrapper img {
+    display: block;
+}
+
+.img-protect-wrapper .img-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    cursor: default;
+    z-index: 10;
+    user-select: none;
+    -webkit-user-drag: none;
+}

.Backup/html/components/About.tsx

@@ -0,0 +1,57 @@
+
+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;

.Backup/html/components/ChatBot.tsx

@@ -0,0 +1,100 @@
+
+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;

.Backup/html/components/Contact.tsx

@@ -0,0 +1,123 @@
+
+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;

.Backup/html/components/Footer.tsx

@@ -0,0 +1,74 @@
+
+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;

.Backup/html/components/Header.tsx

@@ -0,0 +1,88 @@
+
+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;

.Backup/html/components/Hero.tsx

@@ -0,0 +1,55 @@
+
+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;

.Backup/html/components/Services.tsx

@@ -0,0 +1,78 @@
+
+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;

.Backup/html/index.html

@@ -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

.Backup/html/index.tsx

@@ -0,0 +1,16 @@
+
+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>
+);

.Backup/html/metadata.json

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

.Backup/html/package.json

@@ -0,0 +1,23 @@
+{
+  "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"
+  }
+}

.Backup/html/services/geminiService.ts

@@ -0,0 +1,36 @@
+
+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.";
+  }
+}

.Backup/html/status.json

@@ -0,0 +1 @@
+{"cpu_temp": "41", "nvme_temp": "34", "uptime_days": 2, "last_update": "22:07:01"}

.Backup/html/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "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
+  }
+}

.Backup/html/types.ts

@@ -0,0 +1,20 @@
+
+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;
+}

.Backup/html/vite.config.ts

@@ -0,0 +1,23 @@
+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, '.'),
+        }
+      }
+    };
+});

.Backup/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>한모CNN - 서비스 준비 중</title>
+    <style>
+        body { background-color: #0b0e14; color: #d1d5db; font-family: sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; }
+        .main-box { text-align: center; border: 1px solid #1f2937; background: #111827; padding: 40px; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); width: 350px; }
+        h1 { color: #60a5fa; margin-bottom: 5px; letter-spacing: -1px; }
+        .sub-text { color: #9ca3af; margin-bottom: 30px; font-size: 0.9rem; }
+        .hmi-panel { background: #000; border-radius: 8px; padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; border-left: 4px solid #60a5fa; }
+        .sensor { display: flex; flex-direction: column; align-items: center; }
+        .s-label { font-size: 0.7rem; color: #6b7280; margin-bottom: 5px; text-transform: uppercase; }
+        .s-value { font-family: 'Courier New', monospace; font-size: 1.6rem; color: #10b981; font-weight: bold; }
+        .full-width { grid-column: span 2; border-top: 1px solid #1f2937; padding-top: 10px; margin-top: 5px; }
+        .update-time { font-size: 0.7rem; color: #374151; margin-top: 25px; }
+        .blink { animation: fade 2s infinite; }
+        @keyframes fade { 50% { opacity: 0.3; } }
+    </style>
+</head>
+<body>
+<div class="main-box">
+    <h1>HANMO CONTROL & NETWORK CO., LTD.</h1>
+    <p class="sub-text">시스템 정식 서비스 준비 중입니다.</p>
+    <div class="hmi-panel">
+        <div class="sensor">
+            <span class="s-label">CPU</span>
+            <span class="s-value"><span id="cpu">--</span>°C</span>
+        </div>
+        <div class="sensor">
+            <span class="s-label">NVMe</span>
+            <span class="s-value"><span id="nvme">--</span>°C</span>
+        </div>
+        <div class="sensor full-width">
+            <span class="s-label">UPTIME</span>
+            <span class="s-value"><span id="days">--</span> DAYS</span>
+        </div>
+    </div>
+    <div class="update-time">
+        <span class="blink" style="color:#10b981">●</span> LIVE SCAN: <span id="time">--</span>
+    </div>
+</div>
+<script>
+    function update() {
+        fetch('status.json?t=' + Date.now())
+            .then(r => r.json())
+            .then(d => {
+                document.getElementById('cpu').innerText = d.cpu_temp;
+                document.getElementById('nvme').innerText = d.nvme_temp;
+                document.getElementById('days').innerText = d.uptime_days;
+                document.getElementById('time').innerText = d.last_update;
+            }).catch(() => console.log("Waiting for data..."));
+    }
+    setInterval(update, 10000); update();
+</script>
+</body>
+</html>

.Backup/status.json

@@ -0,0 +1 @@
+{"cpu_temp": "40", "nvme_temp": "33", "uptime_days": 2, "last_update": "18:31:01"}

.Backup/update_status.py

@@ -0,0 +1,42 @@
+# 파일 경로: ~/services/hanmocnn/update_status.py
+import json
+import os
+import time
+
+def get_temp(name_keyword):
+    """hwmon 폴더에서 이름 키워드로 온도를 찾아 반환 (milli-degree to degree)"""
+    try:
+        base_path = "/sys/class/hwmon"
+        for folder in os.listdir(base_path):
+            with open(os.path.join(base_path, folder, "name"), "r") as f:
+                if name_keyword in f.read():
+                    with open(os.path.join(base_path, folder, "temp1_input"), "r") as t:
+                        return int(t.read()) // 1000
+    except:
+        return "N/A"
+    return "N/A"
+
+def get_hw_info():
+    # 1. CPU 온도 (가장 부하가 큰 bigcore0 기준)
+    cpu_temp = get_temp("bigcore0_thermal")
+    
+    # 2. NVMe 온도
+    nvme_temp = get_temp("nvme")
+
+    # 3. 가동 시간 (Uptime)
+    with open("/proc/uptime", "r") as f:
+        uptime_days = int(float(f.readline().split()[0]) // 86400)
+
+    return {
+        "cpu_temp": str(cpu_temp),
+        "nvme_temp": str(nvme_temp),
+        "uptime_days": uptime_days,
+        "last_update": time.strftime("%H:%M:%S")
+    }
+
+if __name__ == "__main__":
+    status = get_hw_info()
+    # 저장 경로: ~/services/hanmocnn/html/status.json
+    base_dir = os.path.dirname(os.path.abspath(__file__))
+    with open(os.path.join(base_dir, "html", "status.json"), "w") as f:
+        json.dump(status, f)

docker-compose.yml

@@ -0,0 +1,22 @@
+version: '3.8'
+services:
+  # 1. 관리 도구 (Nginx Proxy Manager)
+  npm:
+    image: 'jc21/nginx-proxy-manager:latest'
+    container_name: npm-admin
+    restart: unless-stopped
+    ports:
+      - '80:80'      # HTTP 외부 접속용
+      - '81:81'      # 관리자 화면 접속용 (HMI 역할)
+      - '443:443'    # HTTPS 보안 접속용
+    volumes:
+      - ./npm/data:/data
+      - ./npm/letsencrypt:/etc/letsencrypt
+
+  # 2. 실제 홈페이지 (공사 중 페이지)
+  web-server:
+    image: nginx:alpine
+    container_name: hanmo-home
+    restart: unless-stopped
+    volumes:
+      - ./html:/usr/share/nginx/html:ro

html/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

html/App.tsx

@@ -0,0 +1,50 @@
+
+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;

html/README.md

@@ -0,0 +1,20 @@
+<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`

html/assets/css/style.css

@@ -0,0 +1,39 @@
+: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);
+}

html/assets/js/script.js

@@ -0,0 +1,48 @@
+// Header scroll effect
+const mainHeader = document.getElementById('main-header');
+const brandName = document.getElementById('brand-name');
+const navLinks = document.querySelectorAll('.nav-link');
+
+window.addEventListener('scroll', () => {
+    if (window.scrollY > 50) {
+        mainHeader.classList.add('glass-effect', 'py-3');
+        mainHeader.classList.remove('py-6');
+        if (brandName) brandName.classList.replace('text-white', 'text-slate-900');
+        navLinks.forEach(link => {
+            link.classList.replace('text-slate-100', 'text-slate-700');
+        });
+    } else {
+        mainHeader.classList.remove('glass-effect', 'py-3');
+        mainHeader.classList.add('py-6');
+        if (brandName) brandName.classList.replace('text-slate-900', 'text-white');
+        navLinks.forEach(link => {
+            link.classList.replace('text-slate-700', 'text-slate-100');
+        });
+    }
+});
+
+// Mobile menu open
+const mobileMenuBtn = document.getElementById('mobile-menu-btn');
+const mobileMenu = document.getElementById('mobile-menu');
+const closeMenuBtn = document.getElementById('close-menu-btn');
+
+if (mobileMenuBtn) {
+    mobileMenuBtn.addEventListener('click', () => {
+        mobileMenu.classList.remove('translate-x-full');
+    });
+}
+
+// Mobile menu close
+if (closeMenuBtn) {
+    closeMenuBtn.addEventListener('click', () => {
+        mobileMenu.classList.add('translate-x-full');
+    });
+}
+
+// Close on nav link click
+const mobileNavLinks = mobileMenu ? mobileMenu.querySelectorAll('a') : [];
+mobileNavLinks.forEach(link => {
+    link.addEventListener('click', () => {
+        mobileMenu.classList.add('translate-x-full');
+    });
+});

html/components/About.tsx

@@ -0,0 +1,57 @@
+
+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;

html/components/ChatBot.tsx

@@ -0,0 +1,100 @@
+
+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;

html/components/Contact.tsx

@@ -0,0 +1,123 @@
+
+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;

html/components/Footer.tsx

@@ -0,0 +1,74 @@
+
+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;

html/components/Header.tsx

@@ -0,0 +1,88 @@
+
+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;

html/components/Hero.tsx

@@ -0,0 +1,55 @@
+
+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;

html/components/Services.tsx

@@ -0,0 +1,78 @@
+
+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;

html/index.html

@@ -0,0 +1,287 @@
+<!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">Home</a>
+                <a href="#dcs" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">DCS</a>
+                <a href="#batch" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Batch Process</a>
+                <a href="#dbsvr" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Database Server</a>
+                <a href="#products" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Instruments</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-loose">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">About Hanmo</h2>
+                        <h3 class="text-4xl md:text-5xl font-light text-slate-900 mb-8 premium-kerning font-premium">Trusted Partner in Industrial Automation</h3>
+                        <p class="text-slate-500 leading-relaxed mb-6 font-light">
+                            Since our founding, Hanmo Control & Network Co., Ltd. has been at the forefront of industrial automation engineering. We specialize in designing, implementing, and maintaining mission-critical control systems for the world's most demanding industries.
+                        </p>
+                        <p class="text-slate-500 leading-relaxed mb-12 font-light">
+                            Our team of 60+ certified engineers brings decades of combined experience in DCS, SCADA, and industrial networking, ensuring your operations run with unmatched precision and reliability.
+                        </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">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">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">Get In Touch</h2>
+                    <h3 class="text-4xl md:text-6xl font-light text-white mb-8 premium-kerning font-premium">Start Your Project</h3>
+                    <p class="text-slate-400 text-lg leading-relaxed font-light">
+                        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" 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" 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" 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" 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 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">
+                            Send Message
+                        </button>
+                    </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">© 2024 Hanmo Control & Network Co., Ltd. All rights reserved.</p>
+        </div>
+    </footer>
+
+    <script src="assets/js/script.js"></script>
+</body>
+</html>

html/index.tsx

@@ -0,0 +1,16 @@
+
+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>
+);

html/metadata.json

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

html/package.json

@@ -0,0 +1,23 @@
+{
+  "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"
+  }
+}

html/services/geminiService.ts

@@ -0,0 +1,36 @@
+
+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.";
+  }
+}

html/status.json

@@ -0,0 +1 @@
+{"cpu_temp": "41", "nvme_temp": "34", "uptime_days": 2, "last_update": "23:00:01"}

html/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "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
+  }
+}

html/types.ts

@@ -0,0 +1,20 @@
+
+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;
+}

html/vite.config.ts

@@ -0,0 +1,23 @@
+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, '.'),
+        }
+      }
+    };
+});

update_status.py

@@ -0,0 +1,42 @@
+# 파일 경로: ~/services/hanmocnn/update_status.py
+import json
+import os
+import time
+
+def get_temp(name_keyword):
+    """hwmon 폴더에서 이름 키워드로 온도를 찾아 반환 (milli-degree to degree)"""
+    try:
+        base_path = "/sys/class/hwmon"
+        for folder in os.listdir(base_path):
+            with open(os.path.join(base_path, folder, "name"), "r") as f:
+                if name_keyword in f.read():
+                    with open(os.path.join(base_path, folder, "temp1_input"), "r") as t:
+                        return int(t.read()) // 1000
+    except:
+        return "N/A"
+    return "N/A"
+
+def get_hw_info():
+    # 1. CPU 온도 (가장 부하가 큰 bigcore0 기준)
+    cpu_temp = get_temp("bigcore0_thermal")
+    
+    # 2. NVMe 온도
+    nvme_temp = get_temp("nvme")
+
+    # 3. 가동 시간 (Uptime)
+    with open("/proc/uptime", "r") as f:
+        uptime_days = int(float(f.readline().split()[0]) // 86400)
+
+    return {
+        "cpu_temp": str(cpu_temp),
+        "nvme_temp": str(nvme_temp),
+        "uptime_days": uptime_days,
+        "last_update": time.strftime("%H:%M:%S")
+    }
+
+if __name__ == "__main__":
+    status = get_hw_info()
+    # 저장 경로: ~/services/hanmocnn/html/status.json
+    base_dir = os.path.dirname(os.path.abspath(__file__))
+    with open(os.path.join(base_dir, "html", "status.json"), "w") as f:
+        json.dump(status, f)