first commit

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;