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;

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;