first commit

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;