first commit

2026-02-14 23:00:55 +09:00
commit ebd2be03a2
59 changed files with 2532 additions and 0 deletions
--- a/html/components/Header.tsx
+++ b/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;