first commit

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;