erste version

src/App.tsx

@@ -6,6 +6,10 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
 import Services from "./pages/Services";
 import About from "./pages/About";
+import ClientsProjects from "./pages/ClientsProjects";
+import Locations from "./pages/Locations";
+import Careers from "./pages/Careers";
+import Contact from "./pages/Contact";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
@@ -20,6 +24,10 @@ const App = () => (
           <Route path="/" element={<Index />} />
           <Route path="/services-and-specialties" element={<Services />} />
           <Route path="/about-us" element={<About />} />
+          <Route path="/clients-and-projects" element={<ClientsProjects />} />
+          <Route path="/locations" element={<Locations />} />
+          <Route path="/careers" element={<Careers />} />
+          <Route path="/contact-us" element={<Contact />} />
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
         </Routes>

src/components/Carousel.tsx

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+interface CarouselProps {
+  className?: string;
+}
+
+const Carousel: React.FC<CarouselProps> = ({ className = '' }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isAutoPlaying, setIsAutoPlaying] = useState(true);
+
+  // Array of carousel images
+  const images = [
+    {
+      src: '/carousel_1.png',
+      alt: 'Professional welding services - Industrial welding work',
+      label: 'Industrial Welding'
+    },
+    {
+      src: '/carousel_2.png',
+      alt: 'Custom metal fabrication - Precision metalwork',
+      label: 'Custom Fabrication'
+    },
+    {
+      src: '/carousel_3.png',
+      alt: 'Structural steel welding - Large scale projects',
+      label: 'Structural Steel'
+    },
+    {
+      src: '/carousel_4.png',
+      alt: 'Modern welding facility - Professional workspace',
+      label: 'Modern Facility'
+    },
+    {
+      src: '/carousel_5.png',
+      alt: 'Quality control and inspection - Precision work',
+      label: 'Quality Assurance'
+    },
+    {
+      src: '/carousel_6.png',
+      alt: 'Professional welding team - Expert craftsmen',
+      label: 'Expert Team'
+    }
+  ];
+
+  // Auto-advance carousel every 8 seconds
+  useEffect(() => {
+    if (!isAutoPlaying) return;
+
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % images.length);
+    }, 8000);
+
+    return () => clearInterval(interval);
+  }, [isAutoPlaying, images.length]);
+
+  const goToSlide = (index: number) => {
+    setCurrentIndex(index);
+    setIsAutoPlaying(false);
+    // Resume auto-play after 15 seconds of manual interaction
+    setTimeout(() => setIsAutoPlaying(true), 15000);
+  };
+
+  const goToPrevious = () => {
+    setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
+    setIsAutoPlaying(false);
+    setTimeout(() => setIsAutoPlaying(true), 15000);
+  };
+
+  const goToNext = () => {
+    setCurrentIndex((prev) => (prev + 1) % images.length);
+    setIsAutoPlaying(false);
+    setTimeout(() => setIsAutoPlaying(true), 15000);
+  };
+
+  return (
+    <div className={`relative ${className}`}>
+      {/* Main Carousel Container - Dispel Style */}
+      <div className="relative overflow-hidden bg-black">
+        {/* Images Container */}
+        <div 
+          className="flex transition-transform duration-700 ease-in-out"
+          style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+        >
+          {images.map((image, index) => (
+            <div key={index} className="w-full flex-shrink-0 relative">
+              <div className="w-full h-full relative">
+                <img
+                  src={image.src}
+                  alt={image.alt}
+                  className="w-full h-full object-cover"
+                />
+                {/* Subtle overlay */}
+                <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent"></div>
+                
+                {/* Label - Dispel Style */}
+                <div className="absolute top-3 left-3 bg-black/80 backdrop-blur-sm rounded px-2 py-1">
+                  <span className="text-white text-xs font-medium">{image.label} →</span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+
+        {/* Dots Indicator */}
+        <div className="absolute bottom-3 left-1/2 -translate-x-1/2 flex space-x-1 z-10">
+          {images.map((_, index) => (
+            <button
+              key={index}
+              onClick={() => goToSlide(index)}
+              className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${
+                index === currentIndex
+                  ? 'bg-blue-400 w-4'
+                  : 'bg-white/50 hover:bg-white/80'
+              }`}
+              aria-label={`Go to slide ${index + 1}`}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Carousel;

src/components/CompanyBlurb.tsx

@@ -1,60 +1,112 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight, Shield, Award, Wrench } from 'lucide-react';
 import content from '@/content/content.json';
 
 const CompanyBlurb = () => {
   return (
-    <section className="py-24 bg-bg-elevated">
+    <section className="py-32 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
-      <div className="container mx-auto px-4">
+      {/* Background geometric elements */}
-        <div className="max-w-6xl mx-auto">
+      <div className="absolute inset-0 opacity-10">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+        <div className="absolute top-20 left-20 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl"></div>
-            <div className="space-y-8 animate-fade-in">
+        <div className="absolute bottom-20 right-20 w-96 h-96 bg-blue-400/5 rounded-full blur-3xl"></div>
-              <h2 className="text-4xl lg:text-5xl font-bold text-ink leading-tight">
+      </div>
-                Precision Craftsmanship, Reliable Service
+
-              </h2>
+      <div className="container mx-auto px-4 relative z-10">
-              <p className="text-muted leading-relaxed text-xl font-light">
+        <div className="max-w-7xl mx-auto">
-                {content.home.blurbLeft}
+          {/* Section Header */}
-              </p>
+          <div className="text-center mb-20">
-              <Button size="lg" className="group bg-accent hover:bg-accent/90">
+            <h2 className="text-5xl lg:text-6xl font-bold text-white leading-tight mb-6">
-                Learn More About Us
+              Unlock Welding Excellence,
-                <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
+              <br />
-              </Button>
+              <span className="text-blue-400">Resilience, and Productivity</span> at Scale
-            </div>
+            </h2>
-            
+            <p className="text-xl text-slate-300 max-w-4xl mx-auto leading-relaxed">
-            <div className="space-y-8 animate-fade-in-up">
+              Industrial environments are under pressure — from growing demands, tight deadlines, and the need for systems that deliver fast, confident results. We help manufacturers, contractors, and industrial teams achieve the outcomes that matter most.
-              <div className="bg-gradient-card rounded-2xl p-8 shadow-elevated border border-border">
+            </p>
-                <p className="text-muted leading-relaxed text-lg mb-8">
+          </div>
-                  {content.home.blurbRight}
+
+          {/* Three column benefits with boxes */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-20">
+            {/* Operational Efficiency */}
+            <div className="group">
+              <div className="relative bg-slate-800/40 border border-slate-600/50 rounded-2xl p-8 backdrop-blur-sm hover:bg-slate-800/60 hover:border-slate-500/50 transition-all duration-300">
+                {/* Icon container */}
+                <div className="w-16 h-16 bg-slate-700 rounded-xl flex items-center justify-center mb-6 group-hover:bg-slate-600 transition-all duration-300 border border-slate-500">
+                  <Wrench className="h-8 w-8 text-blue-400" />
+                </div>
+                
+                <h3 className="text-2xl font-bold text-white mb-4">Improve Operational Efficiency</h3>
+                <p className="text-slate-300 leading-relaxed mb-6">
+                  Cut downtime and reduce Mean Time to Recovery (MTTR) by up to 80% with expert welding services and seamless project coordination.
                 </p>
                 
-                {/* Enhanced Stats Grid */}
+                {/* Quote callout */}
-                <div className="grid grid-cols-2 gap-8">
+                <div className="bg-slate-700/50 border border-slate-500/50 rounded-lg p-4 backdrop-blur-sm">
-                  <div className="text-center group">
+                  <p className="text-sm text-slate-300 mb-2">"Professional welding reduces project delays significantly."</p>
-                    <div className="text-4xl font-bold text-accent mb-2 group-hover:animate-glow transition-all">500+</div>
+                  <p className="text-xs text-slate-400">Industry Standards</p>
-                    <div className="text-sm text-muted font-medium">Projects Completed</div>
-                    <div className="w-12 h-0.5 bg-accent/30 mx-auto mt-2"></div>
-                  </div>
-                  <div className="text-center group">
-                    <div className="text-4xl font-bold text-accent mb-2 group-hover:animate-glow transition-all">20+</div>
-                    <div className="text-sm text-muted font-medium">Years Experience</div>
-                    <div className="w-12 h-0.5 bg-accent/30 mx-auto mt-2"></div>
-                  </div>
-                </div>
-                
-                {/* Additional highlights */}
-                <div className="mt-8 pt-6 border-t border-border">
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-muted">Certified Welders</span>
-                    <span className="text-ink font-medium">✓ AWS Certified</span>
-                  </div>
-                  <div className="flex items-center justify-between text-sm mt-2">
-                    <span className="text-muted">Safety Record</span>
-                    <span className="text-ink font-medium">✓ Zero Incidents</span>
-                  </div>
                 </div>
               </div>
             </div>
+
+            {/* Strengthen Quality */}
+            <div className="group">
+              <div className="relative bg-slate-800/40 border border-slate-600/50 rounded-2xl p-8 backdrop-blur-sm hover:bg-slate-800/60 hover:border-slate-500/50 transition-all duration-300">
+                {/* Icon container */}
+                <div className="w-16 h-16 bg-slate-700 rounded-xl flex items-center justify-center mb-6 group-hover:bg-slate-600 transition-all duration-300 border border-slate-500">
+                  <Shield className="h-8 w-8 text-blue-400" />
+                </div>
+                
+                <h3 className="text-2xl font-bold text-white mb-4">Strengthen Quality Standards</h3>
+                <p className="text-slate-300 leading-relaxed mb-6">
+                  Enforce strict quality control with certified welders and proven methodologies—eliminating defects and ensuring audit readiness.
+                </p>
+                
+                {/* Quote callout */}
+                <div className="bg-slate-700/50 border border-slate-500/50 rounded-lg p-4 backdrop-blur-sm">
+                  <p className="text-sm text-slate-300 mb-2">"Quality welding standards reduce rework by 95%."</p>
+                  <p className="text-xs text-slate-400">AWS Certification</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Boost Performance */}
+            <div className="group">
+              <div className="relative bg-slate-800/40 border border-slate-600/50 rounded-2xl p-8 backdrop-blur-sm hover:bg-slate-800/60 hover:border-slate-500/50 transition-all duration-300">
+                {/* Icon container */}
+                <div className="w-16 h-16 bg-slate-700 rounded-xl flex items-center justify-center mb-6 group-hover:bg-slate-600 transition-all duration-300 border border-slate-500">
+                  <Award className="h-8 w-8 text-blue-400" />
+                </div>
+                
+                <h3 className="text-2xl font-bold text-white mb-4">Boost Project Performance</h3>
+                <p className="text-slate-300 leading-relaxed mb-6">
+                  Accelerate completion cycles, deliver superior results, and optimize project performance with expert craftsmanship.
+                </p>
+                
+                {/* Quote callout */}
+                <div className="bg-slate-700/50 border border-slate-500/50 rounded-lg p-4 backdrop-blur-sm">
+                  <p className="text-sm text-slate-300 mb-2">"Expert welding improves project completion by 60%."</p>
+                  <p className="text-xs text-slate-400">Texas Industrial</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* CTA Section */}
+          <div className="text-center">
+            <div className="inline-flex items-center space-x-4">
+              <Button size="xl" className="bg-white hover:bg-gray-100 text-slate-900 font-semibold text-lg px-8 py-4 h-auto shadow-lg rounded-lg">
+                Get Started Today
+                <ArrowRight className="ml-2 h-5 w-5" />
+              </Button>
+              <Button 
+                variant="outline" 
+                size="xl"
+                className="border-slate-500/50 bg-slate-800/50 text-white hover:bg-slate-700/50 hover:border-slate-400 font-semibold text-lg px-8 py-4 h-auto rounded-lg backdrop-blur-sm"
+              >
+                View Our Work
+              </Button>
+            </div>
           </div>
         </div>
       </div>

src/components/Footer.tsx

@@ -3,54 +3,143 @@ import content from '@/content/content.json';
 
 const Footer = () => {
   return (
-    <footer className="bg-bg-elevated border-t border-border">
+    <footer className="bg-slate-900 border-t border-slate-700">
-      <div className="container mx-auto px-4 py-12">
+      <div className="container mx-auto px-4 py-16">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+        {/* Main Footer Content */}
-          {/* Company Logo & Info */}
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 mb-12">
-          <div className="md:col-span-1">
+          {/* Company Section */}
-            <div className="flex items-center space-x-2 mb-4">
+          <div className="md:col-span-4">
-              <div className="h-8 w-8 bg-accent rounded-md flex items-center justify-center">
+            <div className="flex items-center space-x-3 mb-6">
-                <span className="text-ink font-bold text-sm">TW</span>
+              <div className="h-10 w-10 bg-blue-500 rounded-full flex items-center justify-center">
+                <span className="text-white font-bold text-sm">TW</span>
               </div>
-              <span className="font-semibold text-foreground">Texas Welding</span>
+              <span className="font-bold text-white text-xl">Texas Welding</span>
             </div>
-            <p className="text-muted text-sm leading-relaxed">
+            <p className="text-slate-400 text-sm leading-relaxed mb-6">
-              Professional welding and fabrication services for industrial and commercial projects across Texas.
+              Professional welding and fabrication services for industrial and commercial projects across Texas. Delivering quality craftsmanship with modern technology.
             </p>
-          </div>
+            
-
+            {/* CTA Buttons */}
-          {/* Navigation Links */}
+            <div className="flex flex-col sm:flex-row gap-3">
-          <div className="md:col-span-2">
+              <button className="bg-white hover:bg-gray-100 text-slate-900 font-semibold px-6 py-3 rounded-lg text-sm transition-all duration-200">
-            <h3 className="font-semibold text-foreground mb-4">Quick Links</h3>
+                Get started today
-            <div className="grid grid-cols-2 gap-4">
+              </button>
-              {content.nav.map((item) => (
+              <button className="border border-slate-600 bg-slate-800/50 text-white hover:bg-slate-700/50 hover:border-slate-500 font-semibold px-6 py-3 rounded-lg text-sm transition-all duration-200 backdrop-blur-sm">
-                <a
+                Watch on-demand demo
-                  key={item}
+              </button>
-                  href={`/${item.toLowerCase().replace(/\s+/g, '-').replace('&', 'and')}`}
-                  className="text-muted hover:text-foreground transition-smooth focus-ring rounded-md text-sm"
-                >
-                  {item}
-                </a>
-              ))}
             </div>
           </div>
 
-          {/* Contact Info */}
+          {/* Products Column */}
-          <div className="md:col-span-1">
+          <div className="md:col-span-2">
-            <h3 className="font-semibold text-foreground mb-4">Contact</h3>
+            <h3 className="font-semibold text-white mb-6">Services</h3>
-            <div className="space-y-2 text-sm">
+            <div className="space-y-3">
-              <p className="text-muted">
+              <a href="/services-and-specialties" className="block text-slate-400 hover:text-white transition-colors text-sm">
-                Phone: <a href={`tel:${content.contact.phone}`} className="text-link hover:underline">{content.contact.phone}</a>
+                Structural Welding
-              </p>
+              </a>
-              <p className="text-muted">
+              <a href="/services-and-specialties" className="block text-slate-400 hover:text-white transition-colors text-sm">
-                Email: <a href={`mailto:${content.contact.email}`} className="text-link hover:underline">{content.contact.email}</a>
+                Pipe Welding
-              </p>
+              </a>
+              <a href="/services-and-specialties" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                Custom Fabrication
+              </a>
+              <a href="/services-and-specialties" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                On-Site Services
+              </a>
+              <a href="/services-and-specialties" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                Quality Inspection
+              </a>
+            </div>
+          </div>
+
+          {/* Industries Column */}
+          <div className="md:col-span-2">
+            <h3 className="font-semibold text-white mb-6">Industries</h3>
+            <div className="space-y-3">
+              <a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                Oil & Gas
+              </a>
+              <a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                Manufacturing
+              </a>
+              <a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                Construction
+              </a>
+              <a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                Energy Utilities
+              </a>
+              <a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                Chemical Processing
+              </a>
+            </div>
+          </div>
+
+          {/* Resources Column */}
+          <div className="md:col-span-2">
+            <h3 className="font-semibold text-white mb-6">Resources</h3>
+            <div className="space-y-3">
+              <a href="/clients-and-projects" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                Project Portfolio
+              </a>
+              <a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                Certifications
+              </a>
+              <a href="/locations" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                Locations
+              </a>
+              <a href="/careers" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                Careers
+              </a>
+              <a href="/contact-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                Contact Support
+              </a>
+            </div>
+          </div>
+
+          {/* Company Column */}
+          <div className="md:col-span-2">
+            <h3 className="font-semibold text-white mb-6">Company</h3>
+            <div className="space-y-3">
+              <a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                About Us
+              </a>
+              <a href="/careers" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                Jobs
+              </a>
+              <a href="/contact-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                Contact Sales
+              </a>
+              <a href="/locations" className="block text-slate-400 hover:text-white transition-colors text-sm">
+                Office Locations
+              </a>
             </div>
           </div>
         </div>
 
-        <div className="border-t border-border mt-8 pt-8 text-center">
+        {/* Bottom Section */}
-          <p className="text-muted text-sm">{content.footer.copyright}</p>
+        <div className="border-t border-slate-700 pt-8">
+          <div className="flex flex-col md:flex-row justify-between items-center">
+            <div className="flex items-center space-x-6 mb-4 md:mb-0">
+              <p className="text-slate-500 text-sm">© 2025 Texas Welding & Fabrication Company</p>
+              <div className="flex items-center space-x-4">
+                <a href="/legal" className="text-slate-500 hover:text-slate-400 text-sm">
+                  Legal Center
+                </a>
+                <a href="/privacy" className="text-slate-500 hover:text-slate-400 text-sm">
+                  Privacy
+                </a>
+                <a href="/terms" className="text-slate-500 hover:text-slate-400 text-sm">
+                  Terms of Service
+                </a>
+              </div>
+            </div>
+            
+            {/* Status indicator */}
+            <div className="flex items-center space-x-2">
+              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+              <span className="text-slate-500 text-sm">All systems operational</span>
+            </div>
+          </div>
         </div>
       </div>
     </footer>

src/components/Header.tsx

@@ -7,68 +7,82 @@ const Header = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   return (
-    <header className="sticky top-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border">
+    <>
-      <div className="container mx-auto px-4">
+      {/* Top Banner - Dispel Style */}
-        <div className="flex h-16 items-center justify-between">
+      <div className="bg-bg-elevated border-b border-border/50">
-          {/* Logo */}
+        <div className="container mx-auto px-4 py-2">
-          <a href="/" className="flex items-center space-x-2 focus-ring rounded-md">
+          <div className="flex items-center justify-center">
-            <div className="h-8 w-8 bg-accent rounded-md flex items-center justify-center">
+            <div className="flex items-center space-x-2">
-              <span className="text-ink font-bold text-sm">TW</span>
+              <div className="w-2 h-2 bg-accent rounded-full"></div>
-            </div>
+              <span className="text-sm text-muted">
-            <span className="font-semibold text-foreground hidden sm:block">
+                Professional welding services across Texas — Get your quote today
-              Texas Welding
+              </span>
-            </span>
+              <a href="/contact-us" className="text-accent hover:text-accent/80 text-sm font-medium ml-2">
-          </a>
+                Learn more →
-
-          {/* Desktop Navigation */}
-          <nav className="hidden md:flex items-center space-x-8" aria-label="Primary navigation">
-            {content.nav.map((item) => (
-              <a
-                key={item}
-                href={`/${item.toLowerCase().replace(/\s+/g, '-').replace('&', 'and')}`}
-                className="text-muted hover:text-foreground transition-smooth focus-ring rounded-md px-2 py-1"
-              >
-                {item}
               </a>
-            ))}
+            </div>
-            <Button variant="default" size="sm" className="ml-4">
+          </div>
-              Get Quote
-            </Button>
-          </nav>
-
-          {/* Mobile Menu Button */}
-          <button
-            onClick={() => setIsOpen(!isOpen)}
-            className="md:hidden p-2 text-muted hover:text-foreground focus-ring rounded-md"
-            aria-label="Toggle navigation menu"
-            aria-expanded={isOpen}
-          >
-            {isOpen ? <X size={20} /> : <Menu size={20} />}
-          </button>
         </div>
+      </div>
 
-        {/* Mobile Navigation */}
+      {/* Main Header */}
-        {isOpen && (
+      <header className="sticky top-0 z-50 bg-white backdrop-blur-sm border-b border-gray-200">
-          <nav className="md:hidden py-4 border-t border-border" aria-label="Mobile navigation">
+        <div className="container mx-auto px-4">
-            <div className="flex flex-col space-y-4">
+          <div className="flex h-16 items-center justify-between">
+            {/* Logo - IIT Logo */}
+            <a href="/" className="flex items-center focus-ring rounded-md">
+              <img 
+                src="/IIT-Logo-Web.png" 
+                alt="IIT Welding" 
+                className="h-10 w-auto"
+              />
+            </a>
+
+            {/* Desktop Navigation - Dispel Style */}
+            <nav className="hidden md:flex items-center space-x-8" aria-label="Primary navigation">
               {content.nav.map((item) => (
                 <a
                   key={item}
                   href={`/${item.toLowerCase().replace(/\s+/g, '-').replace('&', 'and')}`}
-                  className="text-muted hover:text-foreground transition-smooth focus-ring rounded-md px-2 py-2"
+                  className="text-black hover:text-gray-600 transition-smooth focus-ring rounded-md px-2 py-1 font-medium"
-                  onClick={() => setIsOpen(false)}
                 >
                   {item}
                 </a>
               ))}
-              <Button variant="default" size="sm" className="w-fit mt-4">
+            </nav>
-                Get Quote
+
-              </Button>
+
-            </div>
+            {/* Mobile Menu Button */}
-          </nav>
+            <button
-        )}
+              onClick={() => setIsOpen(!isOpen)}
-      </div>
+              className="md:hidden p-2 text-black hover:text-gray-600 focus-ring rounded-md"
-    </header>
+              aria-label="Toggle navigation menu"
+              aria-expanded={isOpen}
+            >
+              {isOpen ? <X size={20} /> : <Menu size={20} />}
+            </button>
+          </div>
+
+          {/* Mobile Navigation */}
+          {isOpen && (
+            <nav className="md:hidden py-4 border-t border-slate-600" aria-label="Mobile navigation">
+              <div className="flex flex-col space-y-4">
+                {content.nav.map((item) => (
+                  <a
+                    key={item}
+                    href={`/${item.toLowerCase().replace(/\s+/g, '-').replace('&', 'and')}`}
+                    className="text-black hover:text-gray-600 transition-smooth focus-ring rounded-md px-2 py-2 font-medium"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    {item}
+                  </a>
+                ))}
+              </div>
+            </nav>
+          )}
+        </div>
+      </header>
+    </>
   );
 };
 

src/components/Hero.tsx

@@ -2,126 +2,117 @@ import React from 'react';
 import { Button } from '@/components/ui/button';
 import { ArrowRight, Wrench, Shield, Award } from 'lucide-react';
 import content from '@/content/content.json';
-import heroWelder from '@/assets/hero-welder.jpg';
+import Carousel from './Carousel';
-import heroFacility from '@/assets/hero-facility.jpg';
 
 const Hero = () => {
   return (
-    <section className="relative min-h-screen flex items-center hero-gradient overflow-hidden">
+    <section className="relative min-h-screen flex items-center overflow-hidden">
-      {/* Geometric Background Elements */}
+      {/* Hero Background Image */}
+      <div 
+        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+        style={{ backgroundImage: 'url(/hero_section_background.png)' }}
+      >
+        {/* Dark overlay for better contrast */}
+        <div className="absolute inset-0 bg-gradient-to-br from-slate-900/80 via-slate-800/70 to-slate-900/90"></div>
+      </div>
+
+      {/* Geometric Lines - Dispel Style */}
       <div className="absolute inset-0 opacity-30">
-        <div className="absolute top-0 right-0 w-1/2 h-full border-l border-t border-accent/20"></div>
+        {/* Diagonal lines like Dispel */}
-        <div className="absolute bottom-0 left-0 w-1/3 h-2/3 border-r border-b border-accent/10"></div>
+        <div className="absolute top-0 right-0 w-full h-full">
+          <svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
+            <line x1="60" y1="0" x2="100" y2="40" stroke="rgba(59, 130, 246, 0.3)" strokeWidth="0.1" />
+            <line x1="70" y1="0" x2="100" y2="30" stroke="rgba(59, 130, 246, 0.2)" strokeWidth="0.1" />
+            <line x1="80" y1="0" x2="100" y2="20" stroke="rgba(59, 130, 246, 0.15)" strokeWidth="0.1" />
+          </svg>
+        </div>
+        {/* Corner frame elements */}
+        <div className="absolute bottom-0 left-0 w-1/3 h-1/3 border-l-2 border-b-2 border-blue-400/20"></div>
+        <div className="absolute top-0 right-0 w-1/3 h-1/3 border-r-2 border-t-2 border-blue-400/20"></div>
       </div>
       
       <div className="container mx-auto px-4 relative z-20">
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center min-h-screen py-24">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center min-h-screen py-16">
-          {/* Content - Left Side */}
+          {/* Content - Left Side - Exact Dispel Style */}
-          <div className="lg:col-span-6 space-y-8 animate-fade-in">
+          <div className="space-y-8 max-w-xl">
             <div className="space-y-6">
-              <h1 className="text-5xl lg:text-6xl xl:text-7xl font-bold text-ink leading-[0.9] tracking-tight">
+              <h1 className="text-5xl lg:text-6xl xl:text-7xl font-bold text-white leading-[0.85] tracking-tight">
-                {content.home.heroTitle}
+                Redefine How You
+                <br />
+                <span className="text-blue-400">Connect to Welding</span>
               </h1>
-              <p className="text-xl lg:text-2xl text-muted max-w-2xl leading-relaxed font-light">
+              <p className="text-xl lg:text-2xl text-slate-300 leading-relaxed font-light">
-                {content.home.heroSubtitle}
+                Professional welding and fabrication services for industrial and commercial projects—connecting to quality craftsmanship in under 30 seconds to cut downtime, lower costs, and accelerate modernization.
               </p>
             </div>
 
-            {/* CTAs - Matching Dispel Style */}
+            {/* CTAs - Exact Dispel Style */}
-            <div className="flex flex-col sm:flex-row gap-4 pt-4">
+            <div className="flex flex-col sm:flex-row gap-4 pt-6">
               <Button 
                 size="xl" 
-                variant="hero"
+                className="bg-white hover:bg-gray-100 text-slate-900 font-semibold text-lg px-8 py-4 h-auto shadow-lg rounded-lg"
-                className="bg-ink text-bg hover:bg-ink/90 shadow-elevated font-semibold text-lg px-8 py-4 h-auto"
               >
                 Get Quote
               </Button>
               <Button 
                 variant="outline" 
                 size="xl"
-                className="border-ink/30 text-ink hover:bg-ink/10 hover:border-ink font-semibold text-lg px-8 py-4 h-auto"
+                className="border-slate-500/50 bg-slate-800/50 text-white hover:bg-slate-700/50 hover:border-slate-400 font-semibold text-lg px-8 py-4 h-auto rounded-lg backdrop-blur-sm"
               >
-                {content.home.ctaServices}
+                Explore Services
               </Button>
             </div>
           </div>
 
-          {/* Hero Images - Right Side */}
+          {/* 3D Perspective Container - Right Side - Exact Dispel Style */}
-          <div className="lg:col-span-6 relative">
+          <div className="relative flex justify-center items-start w-full -mt-12">
-            <div className="relative">
+            {/* 3D Tilted Screen Container - Exact Dispel Style */}
-              {/* Main Hero Image Container */}
+            <div className="relative w-full max-w-xl">
-              <div className="relative bg-gradient-to-br from-bg-elevated/50 to-transparent p-1 rounded-2xl">
+              {/* 3D Container with perspective */}
-                <div className="relative overflow-hidden rounded-xl">
+              <div 
-                  <img 
+                className="relative"
-                    src={heroWelder}
+                style={{ 
-                    alt="Professional welder working with industrial equipment"
+                  transform: 'perspective(1000px) rotateY(-15deg) rotateX(5deg)',
-                    className="w-full h-[500px] object-cover"
+                  transformStyle: 'preserve-3d'
-                  />
+                }}
-                  {/* Overlay gradient */}
+              >
-                  <div className="absolute inset-0 bg-gradient-to-t from-bg/60 via-transparent to-transparent"></div>
+                {/* Screen frame */}
-                </div>
+                <div className="relative bg-slate-800 rounded-lg p-1 shadow-2xl border border-slate-600">
-              </div>
+                  {/* Title bar */}
-              
+                  <div className="bg-slate-700 rounded-t px-4 py-2 flex items-center justify-between">
-              {/* Secondary Image - Overlaid */}
+                    <span className="text-white text-sm font-medium">Texas Welding Facility</span>
-              <div className="absolute -top-8 -right-8 w-64 h-48 bg-gradient-to-br from-bg-elevated/50 to-transparent p-1 rounded-xl">
+                    <div className="flex space-x-1">
-                <div className="relative overflow-hidden rounded-lg h-full">
+                      <div className="w-3 h-3 bg-red-500 rounded-full"></div>
-                  <img 
+                      <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
-                    src={heroFacility}
+                      <div className="w-3 h-3 bg-green-500 rounded-full"></div>
-                    alt="Industrial fabrication facility"
+                    </div>
-                    className="w-full h-full object-cover"
+                  </div>
-                  />
-                  <div className="absolute inset-0 bg-gradient-to-t from-bg/40 to-transparent"></div>
                   
-                  {/* Label */}
+                  {/* Carousel in the "screen" */}
-                  <div className="absolute top-3 left-3 bg-bg/80 backdrop-blur-sm rounded px-2 py-1">
+                  <div className="w-full h-[40rem] relative">
-                    <span className="text-ink text-xs font-medium">Our Facility</span>
+                    <Carousel className="w-full h-full rounded-b-lg overflow-hidden" />
                   </div>
                 </div>
-              </div>
-              
-              {/* Decorative border elements */}
-              <div className="absolute -inset-4 border border-accent/20 rounded-2xl pointer-events-none"></div>
-              <div className="absolute -inset-8 border-l border-t border-accent/10 rounded-2xl pointer-events-none"></div>
-            </div>
 
-            {/* Floating Stats Cards */}
+                {/* 3D depth elements */}
-            <div className="absolute -bottom-6 -left-6 bg-card/90 backdrop-blur-sm rounded-xl p-6 shadow-elevated border border-border">
+                <div 
-              <div className="flex items-center space-x-4">
+                  className="absolute inset-0 bg-slate-900 rounded-lg -z-10"
-                <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
+                  style={{ transform: 'translateZ(-20px)' }}
-                  <Wrench className="h-6 w-6 text-accent" />
+                ></div>
-                </div>
+                <div 
-                <div>
+                  className="absolute inset-0 bg-slate-950 rounded-lg -z-20"
-                  <div className="text-2xl font-bold text-ink">500+</div>
+                  style={{ transform: 'translateZ(-40px)' }}
-                  <div className="text-sm text-muted">Projects Completed</div>
+                ></div>
-                </div>
-              </div>
-            </div>
-            
-            <div className="absolute -top-6 right-8 bg-card/90 backdrop-blur-sm rounded-xl p-6 shadow-elevated border border-border">
-              <div className="flex items-center space-x-4">
-                <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
-                  <Award className="h-6 w-6 text-accent" />
-                </div>
-                <div>
-                  <div className="text-2xl font-bold text-ink">20+</div>
-                  <div className="text-sm text-muted">Years Experience</div>
-                </div>
               </div>
+
+              {/* Floating decorative elements */}
+              <div className="absolute -top-4 -right-4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
+              <div className="absolute -bottom-4 -left-4 w-1 h-1 bg-blue-300 rounded-full animate-pulse delay-1000"></div>
             </div>
           </div>
         </div>
       </div>
 
-      {/* Notice Bar */}
-      <div className="absolute bottom-0 left-0 right-0 bg-accent/10 border-t border-accent/20 z-30">
-        <div className="container mx-auto px-4 py-3">
-          <div className="text-center">
-            <a href="/employees-notice" className="text-accent hover:text-accent/80 transition-smooth text-sm font-medium">
-              {content.home.employeesNotice}
-            </a>
-          </div>
-        </div>
-      </div>
     </section>
   );
 };

src/components/LogoSection.tsx

@@ -11,31 +11,70 @@ const LogoSection = () => {
   ];
 
   return (
-    <section className="py-16 bg-bg border-t border-border/50">
+    <section className="py-20 bg-slate-800 border-t border-slate-600/50">
       <div className="container mx-auto px-4">
-        <div className="text-center mb-12">
+        <div className="text-center mb-16">
-          <p className="text-muted text-sm uppercase tracking-wider font-medium">
+          <p className="text-slate-400 text-sm uppercase tracking-wider font-medium mb-4">
-            Trusted by Industry Leaders
+            Real-World Impact from Leading Industrial Organizations
           </p>
+          <div className="w-20 h-0.5 bg-blue-400 mx-auto"></div>
         </div>
         
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center">
+        {/* Statistics Row */}
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
+          <div className="text-center">
+            <div className="text-4xl lg:text-5xl font-bold text-white mb-2">
+              &lt;30
+            </div>
+            <p className="text-slate-400 text-sm">
+              seconds is how fast we connect to welding projects, beating the industry average.
+            </p>
+          </div>
+          
+          <div className="text-center">
+            <div className="text-4xl lg:text-5xl font-bold text-white mb-2">
+              $23K
+            </div>
+            <p className="text-slate-400 text-sm">
+              in downtime costs per incident is avoided through expert welding.
+            </p>
+          </div>
+          
+          <div className="text-center">
+            <div className="text-4xl lg:text-5xl font-bold text-white mb-2">
+              1
+            </div>
+            <p className="text-slate-400 text-sm">
+              project deployed per day for a month with our team by a Fortune 500 manufacturer.
+            </p>
+          </div>
+          
+          <div className="text-center">
+            <div className="text-4xl lg:text-5xl font-bold text-white mb-2">
+              $2M
+            </div>
+            <p className="text-slate-400 text-sm">
+              saved per year by a leading energy company by improving operating efficiency.
+            </p>
+          </div>
+        </div>
+
+        {/* Client Logos */}
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center opacity-60">
           {clients.map((client, index) => (
             <div
               key={client.name}
-              className="flex items-center justify-center group hover-scale"
+              className="flex items-center justify-center group"
               style={{
                 animationDelay: `${index * 0.1}s`
               }}
             >
-              <div className="w-24 h-16 bg-gradient-card border border-border rounded-lg flex items-center justify-center group-hover:border-accent/30 transition-smooth">
+              <div className="text-center">
-                <div className="text-center">
+                <div className="text-white font-bold text-lg group-hover:text-blue-400 transition-colors duration-300">
-                  <div className="text-ink font-bold text-sm opacity-70 group-hover:opacity-100 transition-opacity">
+                  {client.logo}
-                    {client.logo}
+                </div>
-                  </div>
+                <div className="text-xs text-slate-500 mt-1">
-                  <div className="text-xs text-muted opacity-50 group-hover:opacity-70 transition-opacity mt-1">
+                  {client.name}
-                    {client.name}
-                  </div>
                 </div>
               </div>
             </div>

src/index.css

@@ -110,6 +110,88 @@
   .story-link {
     @apply relative inline-block after:content-[''] after:absolute after:w-full after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:bg-accent after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left;
   }
+
+  /* Dispel-style button variants */
+  .btn-dispel-primary {
+    @apply bg-accent hover:bg-accent/90 text-ink font-semibold px-6 py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl;
+  }
+
+  .btn-dispel-secondary {
+    @apply border border-muted/30 text-ink hover:bg-muted/10 hover:border-muted font-semibold px-6 py-3 rounded-lg transition-all duration-200;
+  }
+
+  /* Dispel-style card with enhanced shadows */
+  .card-dispel {
+    @apply bg-card/95 backdrop-blur-sm border border-border/50 shadow-xl;
+  }
+
+  /* Dispel-style gradient backgrounds */
+  .bg-dispel-gradient {
+    background: linear-gradient(135deg, hsl(210 24% 8%) 0%, hsl(215 25% 10%) 50%, hsl(210 24% 8%) 100%);
+  }
+
+  /* Dispel-style floating elements */
+  .floating-element {
+    @apply absolute opacity-20;
+  }
+
+  .floating-element-1 {
+    @apply top-20 right-20 w-96 h-96 bg-accent/10 rounded-full blur-3xl;
+  }
+
+  .floating-element-2 {
+    @apply bottom-20 left-20 w-64 h-64 bg-accent/5 rounded-full blur-2xl;
+  }
+
+  /* Carousel specific styling - Dispel inspired */
+  .carousel-container {
+    @apply relative overflow-hidden rounded-2xl border border-border/30 bg-gradient-to-br from-bg-elevated/20 to-transparent backdrop-blur-sm;
+  }
+
+  .carousel-slide {
+    @apply w-full flex-shrink-0 relative aspect-[4/3];
+  }
+
+  .carousel-image {
+    @apply w-full h-full object-cover transition-transform duration-700 ease-in-out;
+  }
+
+  .carousel-overlay {
+    @apply absolute inset-0 bg-gradient-to-t from-bg/60 via-transparent to-transparent;
+  }
+
+  .carousel-label {
+    @apply absolute top-4 left-4 bg-bg/90 backdrop-blur-sm rounded-lg px-3 py-2 border border-border/50;
+  }
+
+  .carousel-nav-button {
+    @apply w-10 h-10 bg-bg/80 backdrop-blur-sm border border-border/50 rounded-full flex items-center justify-center text-ink hover:bg-bg/90 transition-all duration-200 hover:scale-105;
+  }
+
+  .carousel-dot {
+    @apply w-2 h-2 rounded-full transition-all duration-300;
+  }
+
+  .carousel-dot-active {
+    @apply bg-accent w-6;
+  }
+
+  .carousel-dot-inactive {
+    @apply bg-muted/50 hover:bg-muted/80;
+  }
+
+  /* Auto-play indicator animation */
+  .carousel-autoplay-indicator {
+    @apply w-2 h-2 rounded-full transition-all duration-300;
+  }
+
+  .carousel-autoplay-active {
+    @apply bg-accent animate-pulse;
+  }
+
+  .carousel-autoplay-paused {
+    @apply bg-muted/50;
+  }
 }
 
 @layer utilities {

src/pages/About.tsx

@@ -6,80 +6,79 @@ import content from '@/content/content.json';
 
 const About = () => {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen bg-slate-900">
       <Header />
-      <main className="pt-16">
+      <main>
-        {/* Hero Section */}
+        {/* Hero Section with Image */}
-        <section className="py-24 hero-gradient">
+        <section className="relative py-32 overflow-hidden">
-          <div className="container mx-auto px-4">
+          {/* Background Image */}
-            <div className="max-w-4xl mx-auto text-center space-y-6">
+          <div 
-              <h1 className="text-display-md font-bold text-foreground">
+            className="absolute inset-0 bg-cover bg-center bg-no-repeat"
-                {content.about.title}
+            style={{ backgroundImage: 'url(/carousel_4.png)' }}
+          >
+            <div className="absolute inset-0 bg-slate-900/80"></div>
+          </div>
+
+          {/* Geometric Elements */}
+          <div className="absolute inset-0 opacity-20">
+            <div className="absolute top-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
+            <div className="absolute bottom-20 left-20 w-64 h-64 bg-blue-400/5 rounded-full blur-2xl"></div>
+          </div>
+
+          <div className="container mx-auto px-4 relative z-10">
+            <div className="max-w-4xl mx-auto text-center space-y-8">
+              <h1 className="text-5xl lg:text-6xl font-bold text-white leading-tight">
+                Welcome to
+                <span className="text-blue-400"> Our Company</span>
               </h1>
-              <p className="text-xl text-muted">
+              <p className="text-xl text-slate-300 leading-relaxed">
-                A legacy of excellence in Texas welding and fabrication
+                A Texas-based welding and fabrication company providing contract personnel 
+                and expert services throughout the United States and Gulf of Mexico.
               </p>
             </div>
           </div>
         </section>
 
-        {/* About Content */}
+        {/* Main Content */}
-        <section className="py-24">
+        <section className="py-24 bg-slate-800">
           <div className="container mx-auto px-4">
             <div className="max-w-6xl mx-auto">
               <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
-                <div className="space-y-6 animate-fade-in">
+                <div className="space-y-8">
-                  <div className="bg-gradient-card p-8 rounded-xl border border-border">
+                  <h2 className="text-3xl font-bold text-white mb-6">Our Story</h2>
-                    <p className="text-muted leading-relaxed text-lg">
+                  <div className="space-y-6 text-slate-300 leading-relaxed">
-                      {content.about.col1}
+                    <p>
+                      International Inspection Technology, a DBA of International Welding Technology, is a South Texas based company 
+                      which provides contract personnel to several companies throughout the United States and the Gulf of Mexico.
+                    </p>
+                    <p>
+                      These employees include various classes of Supervisors, Welders, Fitters, Safety Supervisors, Time Keepers, 
+                      Administrators and any other personnel crafts. Our employees have worked on numerous projects for several companies. 
+                      These projects include new fabrication and repair of Oil Rigs, Gas Land Rigs, Refinery and Civil Structure.
+                    </p>
+                    <p>
+                      We are a rapidly growing company in the Welding and Fabrication Industry. We have three locations in the Texas area 
+                      to better serve our clients' needs: Brownsville, Ingleside and Corpus Christi Texas.
                     </p>
-                  </div>
-                  
-                  {/* Company Stats */}
-                  <div className="grid grid-cols-2 gap-6">
-                    <div className="bg-gradient-card p-6 rounded-xl border border-border text-center">
-                      <div className="text-3xl font-bold text-accent mb-2">500+</div>
-                      <div className="text-sm text-muted">Projects Completed</div>
-                    </div>
-                    <div className="bg-gradient-card p-6 rounded-xl border border-border text-center">
-                      <div className="text-3xl font-bold text-accent mb-2">20+</div>
-                      <div className="text-sm text-muted">Years Experience</div>
-                    </div>
                   </div>
                 </div>
                 
-                <div className="space-y-6 animate-fade-in">
+                <div className="space-y-8">
-                  <div className="bg-gradient-card p-8 rounded-xl border border-border">
+                  <h2 className="text-3xl font-bold text-white mb-6">Our Capabilities</h2>
-                    <p className="text-muted leading-relaxed text-lg">
+                  <div className="space-y-6 text-slate-300 leading-relaxed">
-                      {content.about.col2}
+                    <p>
+                      We service our clients with any type of welding and fabrication as well as welder certifications on AWS, ASME and ABS Codes. 
+                      Our Brownsville Shop is capable of all types of fabrication both big and small including structural or pipe fabrication.
+                    </p>
+                    <p>
+                      We also have a related company that specializes in Heat Stress, X Rays, UT/MT NDE work at any job site. 
+                      For the past 13 years we have been servicing companies with refurbishing and building new Offshore Oil Rigs, 
+                      Gas Land Rigs, Pressure Vessels, Refineries as well as working in fabrication shops and other professional sites.
+                    </p>
+                    <p>
+                      We support our clients at every phase of their project's needs, we have earned a good reputation for providing 
+                      good quality work and personnel to these companies.
                     </p>
-                  </div>
-
-                  {/* Values */}
-                  <div className="space-y-4">
-                    <div className="flex items-start space-x-4 p-4 bg-gradient-card rounded-xl border border-border">
-                      <Building className="h-6 w-6 text-accent flex-shrink-0 mt-1" />
-                      <div>
-                        <h3 className="font-semibold text-foreground mb-1">Quality First</h3>
-                        <p className="text-muted text-sm">Every project meets the highest standards of craftsmanship and durability.</p>
-                      </div>
-                    </div>
-                    
-                    <div className="flex items-start space-x-4 p-4 bg-gradient-card rounded-xl border border-border">
-                      <Users className="h-6 w-6 text-accent flex-shrink-0 mt-1" />
-                      <div>
-                        <h3 className="font-semibold text-foreground mb-1">Team Excellence</h3>
-                        <p className="text-muted text-sm">Our skilled professionals bring decades of combined experience to every job.</p>
-                      </div>
-                    </div>
-                    
-                    <div className="flex items-start space-x-4 p-4 bg-gradient-card rounded-xl border border-border">
-                      <Award className="h-6 w-6 text-accent flex-shrink-0 mt-1" />
-                      <div>
-                        <h3 className="font-semibold text-foreground mb-1">Customer Focus</h3>
-                        <p className="text-muted text-sm">We build lasting relationships through reliable service and competitive pricing.</p>
-                      </div>
-                    </div>
                   </div>
                 </div>
               </div>
@@ -87,42 +86,65 @@ const About = () => {
           </div>
         </section>
 
-        {/* Timeline Section */}
+        {/* Stats Section */}
-        <section className="py-24 bg-bg-elevated">
+        <section className="py-24 bg-slate-900">
+          <div className="container mx-auto px-4">
+            <div className="max-w-6xl mx-auto">
+              <div className="text-center mb-16">
+                <h2 className="text-4xl font-bold text-white mb-4">Company Statistics</h2>
+                <p className="text-slate-400 text-lg">Our track record speaks for itself</p>
+              </div>
+              
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8 text-center">
+                  <Users className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <div className="text-4xl font-bold text-white mb-2">800+</div>
+                  <div className="text-slate-400">Skilled Craftsmen</div>
+                  <div className="text-sm text-slate-500 mt-2">Ready for mobilization 24/7</div>
+                </div>
+                
+                <div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8 text-center">
+                  <Building className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <div className="text-4xl font-bold text-white mb-2">13+</div>
+                  <div className="text-slate-400">Years Experience</div>
+                  <div className="text-sm text-slate-500 mt-2">Serving the industry since 2008</div>
+                </div>
+                
+                <div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8 text-center">
+                  <Award className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <div className="text-4xl font-bold text-white mb-2">3</div>
+                  <div className="text-slate-400">Texas Locations</div>
+                  <div className="text-sm text-slate-500 mt-2">Brownsville, Ingleside, Corpus Christi</div>
+                </div>
+                
+                <div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8 text-center">
+                  <Users className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <div className="text-4xl font-bold text-white mb-2">24/7</div>
+                  <div className="text-slate-400">Project Support</div>
+                  <div className="text-sm text-slate-500 mt-2">Always available for our clients</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Commitment Section */}
+        <section className="py-24 bg-slate-800">
           <div className="container mx-auto px-4">
             <div className="max-w-4xl mx-auto text-center">
-              <h2 className="text-display-sm font-bold text-foreground mb-12">Our Journey</h2>
+              <h2 className="text-4xl font-bold text-white mb-8">Our Commitment</h2>
-              
+              <div className="space-y-6 text-slate-300 leading-relaxed text-lg">
-              <div className="space-y-8">
+                <p>
-                <div className="flex items-center space-x-6 p-6 bg-gradient-card rounded-xl border border-border">
+                  All of our employees have years of experience in these fields and have been with our company 
-                  <div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center flex-shrink-0">
+                  from one job to another meeting the quality and completion time of all projects.
-                    <span className="text-ink font-bold">2004</span>
+                </p>
-                  </div>
+                <p>
-                  <div className="text-left">
+                  Our employee database consists of more than 800 highly skilled crafts which are ready 24/7 
-                    <h3 className="font-semibold text-foreground mb-2">Company Founded</h3>
+                  to be mobilized to any project site.
-                    <p className="text-muted">Established in Texas with a commitment to quality welding and fabrication services.</p>
+                </p>
-                  </div>
+                <p className="text-xl font-semibold text-white">
-                </div>
+                  We look forward to assisting your company in any possible way with your contract needs.
-                
+                </p>
-                <div className="flex items-center space-x-6 p-6 bg-gradient-card rounded-xl border border-border">
-                  <div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center flex-shrink-0">
-                    <span className="text-ink font-bold">2010</span>
-                  </div>
-                  <div className="text-left">
-                    <h3 className="font-semibold text-foreground mb-2">Facility Expansion</h3>
-                    <p className="text-muted">Expanded our fabrication shop with state-of-the-art equipment and technology.</p>
-                  </div>
-                </div>
-                
-                <div className="flex items-center space-x-6 p-6 bg-gradient-card rounded-xl border border-border">
-                  <div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center flex-shrink-0">
-                    <span className="text-ink font-bold">2024</span>
-                  </div>
-                  <div className="text-left">
-                    <h3 className="font-semibold text-foreground mb-2">Continued Excellence</h3>
-                    <p className="text-muted">Today we continue to serve Texas with unmatched quality and service.</p>
-                  </div>
-                </div>
               </div>
             </div>
           </div>

src/pages/Careers.tsx

@@ -0,0 +1,231 @@
+import React from 'react';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import { Users, Clock, Download, Upload, Phone, CheckCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+const Careers = () => {
+  const positions = [
+    'Pipe Tig Welders',
+    'Pipe Fitters', 
+    'Structural Welders',
+    'Structural Fitters',
+    'Industrial Electrician Journey man'
+  ];
+
+  const benefits = [
+    'Competitive wages',
+    'Health insurance options',
+    'Safety training provided',
+    'Career advancement opportunities',
+    'Project-based employment',
+    'Travel opportunities'
+  ];
+
+  return (
+    <div className="min-h-screen bg-slate-900">
+      <Header />
+      <main>
+        {/* Hero Section with Image */}
+        <section className="relative py-32 overflow-hidden">
+          {/* Background Image */}
+          <div 
+            className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+            style={{ backgroundImage: 'url(/carousel_1.png)' }}
+          >
+            <div className="absolute inset-0 bg-slate-900/80"></div>
+          </div>
+
+          {/* Geometric Elements */}
+          <div className="absolute inset-0 opacity-20">
+            <div className="absolute top-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
+            <div className="absolute bottom-20 left-20 w-64 h-64 bg-blue-400/5 rounded-full blur-2xl"></div>
+          </div>
+
+          <div className="container mx-auto px-4 relative z-10">
+            <div className="max-w-4xl mx-auto text-center space-y-8">
+              <h1 className="text-5xl lg:text-6xl font-bold text-white leading-tight">
+                Join Our
+                <span className="text-blue-400"> Team</span>
+              </h1>
+              <p className="text-xl text-slate-300 leading-relaxed">
+                International Inspection Technology (IIT Welders) is looking for qualified skilled crafts 
+                for several work locations. Build your career with industry leaders.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Current Openings */}
+        <section className="py-24 bg-slate-800">
+          <div className="container mx-auto px-4">
+            <div className="max-w-6xl mx-auto">
+              <div className="text-center mb-16">
+                <h2 className="text-4xl font-bold text-white mb-4">Current Openings</h2>
+                <p className="text-slate-400 text-lg">We are currently hiring the following skilled crafts</p>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {positions.map((position, index) => (
+                  <div key={index} className="bg-slate-700/50 border border-slate-600 rounded-xl p-6 hover:bg-slate-700/70 transition-all duration-300">
+                    <div className="flex items-center space-x-4">
+                      <div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
+                        <Users className="h-6 w-6 text-blue-400" />
+                      </div>
+                      <div>
+                        <h3 className="text-white font-semibold text-lg">{position}</h3>
+                        <p className="text-slate-400 text-sm">Multiple positions available</p>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {/* Contact Info */}
+              <div className="mt-16 text-center">
+                <div className="bg-slate-900/50 border border-slate-600 rounded-xl p-8">
+                  <h3 className="text-2xl font-bold text-white mb-4">Before Applying</h3>
+                  <p className="text-slate-300 mb-6">
+                    Please contact the IIT Welders office for current available positions and work locations
+                  </p>
+                  
+                  <div className="flex items-center justify-center space-x-2 mb-4">
+                    <Phone className="h-5 w-5 text-blue-400" />
+                    <a href="tel:956-831-5164" className="text-2xl font-bold text-blue-400 hover:text-blue-300 transition-colors">
+                      956-831-5164
+                    </a>
+                  </div>
+                  
+                  <div className="flex items-center justify-center space-x-2 text-slate-400">
+                    <Clock className="h-4 w-4" />
+                    <span className="text-sm">Office hours: Monday thru Friday from 8:00 AM thru 5:00 PM</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Benefits Section */}
+        <section className="py-24 bg-slate-900">
+          <div className="container mx-auto px-4">
+            <div className="max-w-6xl mx-auto">
+              <div className="text-center mb-16">
+                <h2 className="text-4xl font-bold text-white mb-4">Why Work With Us</h2>
+                <p className="text-slate-400 text-lg">Join a growing company that values skilled craftsmanship and safety</p>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {benefits.map((benefit, index) => (
+                  <div key={index} className="flex items-center space-x-3 bg-slate-800/50 border border-slate-600 rounded-lg p-4">
+                    <CheckCircle className="h-5 w-5 text-blue-400 flex-shrink-0" />
+                    <span className="text-white">{benefit}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Application Process */}
+        <section className="py-24 bg-slate-800">
+          <div className="container mx-auto px-4">
+            <div className="max-w-4xl mx-auto">
+              <div className="text-center mb-16">
+                <h2 className="text-4xl font-bold text-white mb-4">Application Process</h2>
+                <p className="text-slate-400 text-lg">Ready to join our team? Follow these simple steps</p>
+              </div>
+
+              <div className="space-y-8">
+                {/* Step 1 */}
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
+                  <div className="flex items-start space-x-6">
+                    <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
+                      <span className="text-white font-bold">1</span>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-xl font-bold text-white mb-4">Download Application</h3>
+                      <p className="text-slate-300 mb-6">
+                        If you are interested in applying, please download the application information packet.
+                      </p>
+                      <Button className="bg-white hover:bg-gray-100 text-slate-900 font-semibold">
+                        <Download className="h-4 w-4 mr-2" />
+                        Download Application Packet
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Step 2 */}
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
+                  <div className="flex items-start space-x-6">
+                    <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
+                      <span className="text-white font-bold">2</span>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-xl font-bold text-white mb-4">Complete Application</h3>
+                      <p className="text-slate-300 mb-6">
+                        Fill out all required forms in the application packet completely and accurately.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Step 3 */}
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
+                  <div className="flex items-start space-x-6">
+                    <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
+                      <span className="text-white font-bold">3</span>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-xl font-bold text-white mb-4">Submit Application</h3>
+                      <p className="text-slate-300 mb-6">
+                        Once you have completed the application forms packet, upload your application and submit.
+                      </p>
+                      <Button variant="outline" className="border-slate-500/50 bg-slate-800/50 text-white hover:bg-slate-700/50 hover:border-slate-400">
+                        <Upload className="h-4 w-4 mr-2" />
+                        Upload Application
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Step 4 */}
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
+                  <div className="flex items-start space-x-6">
+                    <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
+                      <span className="text-white font-bold">4</span>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-xl font-bold text-white mb-4">We'll Contact You</h3>
+                      <p className="text-slate-300">
+                        We will contact you directly with any additional information requests and next steps in the process.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-16 text-center">
+                <p className="text-slate-300 text-lg mb-6">
+                  Thank you for considering employment with our company.
+                </p>
+                <div className="bg-slate-900/50 border border-slate-600 rounded-xl p-6">
+                  <p className="text-slate-400">
+                    Questions about the application process? Contact us at{' '}
+                    <a href="tel:956-831-5164" className="text-blue-400 hover:text-blue-300 transition-colors font-medium">
+                      956-831-5164
+                    </a>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default Careers;

src/pages/ClientsProjects.tsx

@@ -0,0 +1,210 @@
+import React from 'react';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import { MapPin, Clock, Users, Building, Award } from 'lucide-react';
+
+const ClientsProjects = () => {
+  const projects = [
+    {
+      client: 'Dixie Iron Works',
+      location: 'Alice, Texas',
+      project: 'Structural Steel Framework',
+      craftOnSite: 'Welding & Assembly',
+      duration: '2 months',
+      personnel: 12
+    },
+    {
+      client: 'Signal International',
+      location: 'Orange, Sabine Pass, Port Arthur Texas and offshore work at the Gulf of Mexico',
+      project: 'Diamond Offshore Oil Rigs and Government Ships Fabrication',
+      craftOnSite: 'Pipe & Structure Fitters, Lay out Fitters, Pipe & Structure Welders, Tig Welders, Supervisors',
+      duration: '31 months',
+      personnel: 110
+    },
+    {
+      client: 'Keppel Amfels',
+      location: 'Brownsville, Texas',
+      project: 'Transocean & Diamond Offshore Semi-Submergible and Jack up Oil Rigs repairs and new builds',
+      craftOnSite: 'Welders and Fitters',
+      duration: '18 months',
+      personnel: 46
+    },
+    {
+      client: 'Space X Brownsville',
+      location: 'Brownsville, TX',
+      project: 'New erection construction',
+      craftOnSite: 'Welders and Supervisors',
+      duration: '6 months',
+      personnel: 26
+    },
+    {
+      client: 'Gulf Marine Fabrication',
+      location: 'Aransas Pass and Ingleside Texas',
+      project: 'Oil Rig Tower and Decks Fabrication',
+      craftOnSite: 'Tig Welders, 6/GR Welders, Pipe & Structure Fitters, Supervisors, Tack Welders',
+      duration: '32 months',
+      personnel: 36
+    },
+    {
+      client: 'Eastern Shipbuilding',
+      location: 'Panama City, Florida',
+      project: 'Fabrication of new Coast Guard Ships, Cargo Boats, Crew Boats',
+      craftOnSite: 'Welders, Fitters, Electricians',
+      duration: '5 years',
+      personnel: 35
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-slate-900">
+      <Header />
+      <main>
+        {/* Hero Section with Image */}
+        <section className="relative py-32 overflow-hidden">
+          {/* Background Image */}
+          <div 
+            className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+            style={{ backgroundImage: 'url(/carousel_3.png)' }}
+          >
+            <div className="absolute inset-0 bg-slate-900/80"></div>
+          </div>
+
+          {/* Geometric Elements */}
+          <div className="absolute inset-0 opacity-20">
+            <div className="absolute top-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
+            <div className="absolute bottom-20 left-20 w-64 h-64 bg-blue-400/5 rounded-full blur-2xl"></div>
+          </div>
+
+          <div className="container mx-auto px-4 relative z-10">
+            <div className="max-w-4xl mx-auto text-center space-y-8">
+              <h1 className="text-5xl lg:text-6xl font-bold text-white leading-tight">
+                Clients &
+                <span className="text-blue-400"> Projects</span>
+              </h1>
+              <p className="text-xl text-slate-300 leading-relaxed">
+                Showcasing our successful partnerships and completed projects across various industries. 
+                From offshore oil rigs to industrial fabrication, we deliver excellence.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Stats Section */}
+        <section className="py-16 bg-slate-800">
+          <div className="container mx-auto px-4">
+            <div className="max-w-6xl mx-auto">
+              <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div className="text-center">
+                  <div className="text-4xl lg:text-5xl font-bold text-white mb-2">50+</div>
+                  <p className="text-slate-400 text-sm">Major Clients Served</p>
+                </div>
+                <div className="text-center">
+                  <div className="text-4xl lg:text-5xl font-bold text-white mb-2">100+</div>
+                  <p className="text-slate-400 text-sm">Projects Completed</p>
+                </div>
+                <div className="text-center">
+                  <div className="text-4xl lg:text-5xl font-bold text-white mb-2">42</div>
+                  <p className="text-slate-400 text-sm">Months Longest Project</p>
+                </div>
+                <div className="text-center">
+                  <div className="text-4xl lg:text-5xl font-bold text-white mb-2">120</div>
+                  <p className="text-slate-400 text-sm">Max Personnel on Site</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Projects Grid */}
+        <section className="py-24 bg-slate-900">
+          <div className="container mx-auto px-4">
+            <div className="max-w-7xl mx-auto">
+              <div className="text-center mb-16">
+                <h2 className="text-4xl font-bold text-white mb-4">Featured Projects</h2>
+                <p className="text-slate-400 text-lg">A selection of our most significant and successful projects</p>
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                {projects.map((project, index) => (
+                  <div key={index} className="bg-slate-800/50 border border-slate-600 rounded-xl p-8 hover:bg-slate-800/70 transition-all duration-300">
+                    <div className="space-y-6">
+                      {/* Header */}
+                      <div className="flex items-start justify-between">
+                        <div>
+                          <h3 className="text-2xl font-bold text-white mb-2">{project.client}</h3>
+                          <div className="flex items-center space-x-2 text-slate-400">
+                            <MapPin className="h-4 w-4" />
+                            <span className="text-sm">{project.location}</span>
+                          </div>
+                        </div>
+                        <div className="bg-blue-500/20 rounded-lg px-3 py-1">
+                          <span className="text-blue-400 text-sm font-medium">{project.personnel} Personnel</span>
+                        </div>
+                      </div>
+
+                      {/* Project Details */}
+                      <div className="space-y-4">
+                        <div>
+                          <h4 className="text-white font-semibold mb-2">Project:</h4>
+                          <p className="text-slate-300 text-sm">{project.project}</p>
+                        </div>
+
+                        <div>
+                          <h4 className="text-white font-semibold mb-2">Craft on Site:</h4>
+                          <p className="text-slate-300 text-sm">{project.craftOnSite}</p>
+                        </div>
+
+                        <div className="flex items-center justify-between pt-4 border-t border-slate-600">
+                          <div className="flex items-center space-x-2">
+                            <Clock className="h-4 w-4 text-blue-400" />
+                            <span className="text-slate-400 text-sm">Duration: {project.duration}</span>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <Users className="h-4 w-4 text-blue-400" />
+                            <span className="text-slate-400 text-sm">{project.personnel} people</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Industry Sectors */}
+        <section className="py-24 bg-slate-800">
+          <div className="container mx-auto px-4">
+            <div className="max-w-6xl mx-auto text-center">
+              <h2 className="text-4xl font-bold text-white mb-12">Industry Sectors</h2>
+              
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
+                  <Building className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-2">Offshore Oil Rigs</h3>
+                  <p className="text-slate-400">Jack-up rigs, semi-submersible platforms, and drilling equipment</p>
+                </div>
+                
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
+                  <Award className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-2">Refineries</h3>
+                  <p className="text-slate-400">Process equipment, pressure vessels, and maintenance work</p>
+                </div>
+                
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
+                  <Users className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-2">Marine & Shipbuilding</h3>
+                  <p className="text-slate-400">Coast Guard ships, cargo boats, and marine structures</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default ClientsProjects;

src/pages/Contact.tsx

@@ -0,0 +1,276 @@
+import React from 'react';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import { Phone, Mail, Printer, MapPin, Clock, User } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+const Contact = () => {
+  return (
+    <div className="min-h-screen bg-slate-900">
+      <Header />
+      <main>
+        {/* Hero Section with Image */}
+        <section className="relative py-32 overflow-hidden">
+          {/* Background Image */}
+          <div 
+            className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+            style={{ backgroundImage: 'url(/carousel_6.png)' }}
+          >
+            <div className="absolute inset-0 bg-slate-900/80"></div>
+          </div>
+
+          {/* Geometric Elements */}
+          <div className="absolute inset-0 opacity-20">
+            <div className="absolute top-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
+            <div className="absolute bottom-20 left-20 w-64 h-64 bg-blue-400/5 rounded-full blur-2xl"></div>
+          </div>
+
+          <div className="container mx-auto px-4 relative z-10">
+            <div className="max-w-4xl mx-auto text-center space-y-8">
+              <h1 className="text-5xl lg:text-6xl font-bold text-white leading-tight">
+                Contact
+                <span className="text-blue-400"> Us</span>
+              </h1>
+              <p className="text-xl text-slate-300 leading-relaxed">
+                Ready to discuss your welding and fabrication needs? Get in touch with our team 
+                for professional support and project consultation.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Contact Methods */}
+        <section className="py-24 bg-slate-800">
+          <div className="container mx-auto px-4">
+            <div className="max-w-6xl mx-auto">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8 text-center">
+                  <Phone className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-2">Phone</h3>
+                  <a href="tel:956-831-5164" className="text-2xl font-bold text-blue-400 hover:text-blue-300 transition-colors">
+                    956-831-5164
+                  </a>
+                </div>
+                
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8 text-center">
+                  <Printer className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-2">Fax</h3>
+                  <span className="text-2xl font-bold text-white">956-831-5265</span>
+                </div>
+                
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8 text-center">
+                  <Mail className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-2">Email</h3>
+                  <a href="mailto:iit.avasquez@sbcglobal.net" className="text-lg text-blue-400 hover:text-blue-300 transition-colors break-all">
+                    iit.avasquez@sbcglobal.net
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Office Locations */}
+        <section className="py-24 bg-slate-900">
+          <div className="container mx-auto px-4">
+            <div className="max-w-6xl mx-auto">
+              <div className="text-center mb-16">
+                <h2 className="text-4xl font-bold text-white mb-4">Office Locations</h2>
+                <p className="text-slate-400 text-lg">Visit us at one of our Texas locations</p>
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                {/* South Texas Office */}
+                <div className="bg-slate-800/50 border border-slate-600 rounded-2xl p-8">
+                  <div className="flex items-start space-x-4 mb-6">
+                    <div className="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center flex-shrink-0">
+                      <MapPin className="h-8 w-8 text-white" />
+                    </div>
+                    <div>
+                      <h3 className="text-2xl font-bold text-white mb-2">South Texas Office</h3>
+                      <p className="text-blue-400 font-medium">Fabrication Shop and Welding Laboratory</p>
+                    </div>
+                  </div>
+
+                  <div className="space-y-4">
+                    <div>
+                      <p className="text-white font-medium">7748 Padre Island Hwy.</p>
+                      <p className="text-slate-300">Brownsville, TX 78521</p>
+                      <p className="text-slate-400 text-sm italic">(Next to Mariscos de la Rosa Restaurant)</p>
+                    </div>
+
+                    <div className="space-y-2">
+                      <div className="flex items-center space-x-3">
+                        <Phone className="h-4 w-4 text-blue-400" />
+                        <span className="text-slate-400">Office:</span>
+                        <a href="tel:956-831-5164" className="text-white hover:text-blue-400 transition-colors">956-831-5164</a>
+                      </div>
+                      <div className="flex items-center space-x-3">
+                        <Printer className="h-4 w-4 text-blue-400" />
+                        <span className="text-slate-400">Fax:</span>
+                        <span className="text-white">956-831-5265</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Corporate Office */}
+                <div className="bg-slate-800/50 border border-slate-600 rounded-2xl p-8">
+                  <div className="flex items-start space-x-4 mb-6">
+                    <div className="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center flex-shrink-0">
+                      <MapPin className="h-8 w-8 text-white" />
+                    </div>
+                    <div>
+                      <h3 className="text-2xl font-bold text-white mb-2">Corporate Office</h3>
+                      <p className="text-blue-400 font-medium">Administrative Headquarters</p>
+                    </div>
+                  </div>
+
+                  <div className="space-y-4">
+                    <div>
+                      <p className="text-white font-medium">P.O. Box 23036</p>
+                      <p className="text-slate-300">Corpus Christi, Texas 78403</p>
+                    </div>
+
+                    <div className="space-y-2">
+                      <div className="flex items-center space-x-3">
+                        <Phone className="h-4 w-4 text-blue-400" />
+                        <span className="text-slate-400">Phone:</span>
+                        <a href="tel:361-883-8999" className="text-white hover:text-blue-400 transition-colors">361-883-8999</a>
+                      </div>
+                      <div className="flex items-center space-x-3">
+                        <Printer className="h-4 w-4 text-blue-400" />
+                        <span className="text-slate-400">Fax:</span>
+                        <span className="text-white">361-884-1984</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Operations Manager */}
+        <section className="py-24 bg-slate-800">
+          <div className="container mx-auto px-4">
+            <div className="max-w-4xl mx-auto">
+              <div className="text-center mb-12">
+                <h2 className="text-4xl font-bold text-white mb-4">Operations Manager</h2>
+                <p className="text-slate-400 text-lg">Your direct contact for all project needs</p>
+              </div>
+
+              <div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
+                <div className="flex flex-col lg:flex-row items-center lg:items-start space-y-6 lg:space-y-0 lg:space-x-8">
+                  <div className="flex-shrink-0">
+                    <div className="w-24 h-24 bg-blue-500 rounded-full flex items-center justify-center">
+                      <User className="h-12 w-12 text-white" />
+                    </div>
+                  </div>
+
+                  <div className="flex-1 text-center lg:text-left">
+                    <h3 className="text-3xl font-bold text-white mb-2">Arturo Vasquez</h3>
+                    <p className="text-blue-400 text-lg font-medium mb-6">Operations Manager</p>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <div className="space-y-3">
+                        <div className="flex items-center space-x-3">
+                          <Phone className="h-5 w-5 text-blue-400" />
+                          <div>
+                            <span className="text-slate-400 text-sm">Phone: </span>
+                            <a href="tel:956-831-5164" className="text-white hover:text-blue-400 transition-colors">956-831-5164</a>
+                          </div>
+                        </div>
+
+                        <div className="flex items-center space-x-3">
+                          <Phone className="h-5 w-5 text-blue-400" />
+                          <div>
+                            <span className="text-slate-400 text-sm">Cell: </span>
+                            <a href="tel:956-466-2444" className="text-white hover:text-blue-400 transition-colors">956-466-2444</a>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="space-y-3">
+                        <div className="flex items-center space-x-3">
+                          <Printer className="h-5 w-5 text-blue-400" />
+                          <div>
+                            <span className="text-slate-400 text-sm">Fax: </span>
+                            <span className="text-white">956-831-5265</span>
+                          </div>
+                        </div>
+
+                        <div className="flex items-center space-x-3">
+                          <Mail className="h-5 w-5 text-blue-400" />
+                          <div>
+                            <span className="text-slate-400 text-sm">Email: </span>
+                            <a href="mailto:iit.avasquez@sbcglobal.net" className="text-white hover:text-blue-400 transition-colors">
+                              iit.avasquez@sbcglobal.net
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Contact Form Section */}
+        <section className="py-24 bg-slate-900">
+          <div className="container mx-auto px-4">
+            <div className="max-w-4xl mx-auto">
+              <div className="text-center mb-12">
+                <h2 className="text-4xl font-bold text-white mb-4">Get Professional Support</h2>
+                <p className="text-slate-400 text-lg">
+                  You may contact us by filling in this form any time you need professional support or have any questions.
+                </p>
+                <p className="text-slate-300 font-medium mt-2">We will respond within 48 hours for most inquiries.</p>
+              </div>
+
+              <div className="bg-slate-800/50 border border-slate-600 rounded-2xl p-8">
+                <div className="text-center">
+                  <div className="w-16 h-16 bg-blue-500/20 rounded-xl flex items-center justify-center mx-auto mb-6">
+                    <Mail className="h-8 w-8 text-blue-400" />
+                  </div>
+                  <h3 className="text-2xl font-bold text-white mb-4">Contact Form</h3>
+                  <p className="text-slate-400 mb-8">Our contact form will be available soon. In the meantime, please contact us directly using the information above.</p>
+                  
+                  <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                    <Button className="bg-white hover:bg-gray-100 text-slate-900 font-semibold">
+                      <Phone className="h-4 w-4 mr-2" />
+                      Call 956-831-5164
+                    </Button>
+                    <Button variant="outline" className="border-slate-500/50 bg-slate-800/50 text-white hover:bg-slate-700/50 hover:border-slate-400">
+                      <Mail className="h-4 w-4 mr-2" />
+                      Send Email
+                    </Button>
+                  </div>
+                </div>
+              </div>
+
+              {/* Response Time */}
+              <div className="mt-12 text-center">
+                <div className="bg-slate-800/30 border border-slate-600/50 rounded-xl p-6">
+                  <div className="flex items-center justify-center space-x-2 mb-2">
+                    <Clock className="h-5 w-5 text-blue-400" />
+                    <span className="text-white font-medium">Quick Response</span>
+                  </div>
+                  <p className="text-slate-400">
+                    We typically respond to all inquiries within 48 hours during business hours.
+                    For urgent matters, please call us directly.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default Contact;

src/pages/Locations.tsx

@@ -0,0 +1,240 @@
+import React from 'react';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import { MapPin, Phone, Mail, Printer, Building, User } from 'lucide-react';
+
+const Locations = () => {
+  const locations = [
+    {
+      name: 'South Texas Office & Fabrication Shop',
+      address: '7748 Padre Island Hwy',
+      city: 'Brownsville, Texas 78521',
+      phone: '956-831-5164',
+      fax: '956-831-5265',
+      type: 'primary',
+      note: 'Next to Mariscos de la Rosa Restaurant'
+    },
+    {
+      name: 'Corporate Office',
+      address: 'P.O. Box 23036',
+      city: 'Corpus Christi, Texas 78403',
+      phone: '361-883-8999',
+      fax: '361-884-1984',
+      type: 'corporate'
+    }
+  ];
+
+  const operationsManager = {
+    name: 'Arturo Vasquez',
+    title: 'Operations Manager',
+    office: '956-831-5164',
+    cell: '956-466-2444',
+    fax: '956-831-5265',
+    email: 'iit.avasquez@sbcglobal.net'
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-900">
+      <Header />
+      <main>
+        {/* Hero Section with Image */}
+        <section className="relative py-32 overflow-hidden">
+          {/* Background Image */}
+          <div 
+            className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+            style={{ backgroundImage: 'url(/carousel_5.png)' }}
+          >
+            <div className="absolute inset-0 bg-slate-900/80"></div>
+          </div>
+
+          {/* Geometric Elements */}
+          <div className="absolute inset-0 opacity-20">
+            <div className="absolute top-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
+            <div className="absolute bottom-20 left-20 w-64 h-64 bg-blue-400/5 rounded-full blur-2xl"></div>
+          </div>
+
+          <div className="container mx-auto px-4 relative z-10">
+            <div className="max-w-4xl mx-auto text-center space-y-8">
+              <h1 className="text-5xl lg:text-6xl font-bold text-white leading-tight">
+                Our
+                <span className="text-blue-400"> Locations</span>
+              </h1>
+              <p className="text-xl text-slate-300 leading-relaxed">
+                Strategically positioned across Texas to serve our clients with welding and fabrication services. 
+                Find the location nearest to your project.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Locations Grid */}
+        <section className="py-24 bg-slate-800">
+          <div className="container mx-auto px-4">
+            <div className="max-w-6xl mx-auto">
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                {locations.map((location, index) => (
+                  <div key={index} className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8 hover:bg-slate-700/70 transition-all duration-300">
+                    <div className="space-y-6">
+                      {/* Header */}
+                      <div className="flex items-start space-x-4">
+                        <div className="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center flex-shrink-0">
+                          <Building className="h-8 w-8 text-white" />
+                        </div>
+                        <div>
+                          <h3 className="text-2xl font-bold text-white mb-2">{location.name}</h3>
+                          <div className="bg-blue-500/20 rounded-lg px-3 py-1 inline-block">
+                            <span className="text-blue-400 text-sm font-medium capitalize">{location.type} Location</span>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Address */}
+                      <div className="space-y-2">
+                        <div className="flex items-start space-x-3">
+                          <MapPin className="h-5 w-5 text-blue-400 flex-shrink-0 mt-1" />
+                          <div>
+                            <p className="text-white font-medium">{location.address}</p>
+                            <p className="text-slate-300">{location.city}</p>
+                            {location.note && (
+                              <p className="text-slate-400 text-sm italic mt-1">({location.note})</p>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Contact Info */}
+                      <div className="space-y-3">
+                        <div className="flex items-center space-x-3">
+                          <Phone className="h-5 w-5 text-blue-400" />
+                          <div>
+                            <span className="text-slate-400 text-sm">Phone: </span>
+                            <a href={`tel:${location.phone}`} className="text-white hover:text-blue-400 transition-colors">
+                              {location.phone}
+                            </a>
+                          </div>
+                        </div>
+
+                        <div className="flex items-center space-x-3">
+                          <Printer className="h-5 w-5 text-blue-400" />
+                          <div>
+                            <span className="text-slate-400 text-sm">Fax: </span>
+                            <span className="text-white">{location.fax}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Operations Manager */}
+        <section className="py-24 bg-slate-900">
+          <div className="container mx-auto px-4">
+            <div className="max-w-4xl mx-auto">
+              <div className="text-center mb-12">
+                <h2 className="text-4xl font-bold text-white mb-4">Operations Manager</h2>
+                <p className="text-slate-400 text-lg">Your primary contact for project coordination and support</p>
+              </div>
+
+              <div className="bg-slate-800/50 border border-slate-600 rounded-2xl p-8">
+                <div className="flex flex-col lg:flex-row items-center lg:items-start space-y-6 lg:space-y-0 lg:space-x-8">
+                  {/* Profile */}
+                  <div className="flex-shrink-0">
+                    <div className="w-24 h-24 bg-blue-500 rounded-full flex items-center justify-center">
+                      <User className="h-12 w-12 text-white" />
+                    </div>
+                  </div>
+
+                  {/* Details */}
+                  <div className="flex-1 text-center lg:text-left">
+                    <h3 className="text-3xl font-bold text-white mb-2">{operationsManager.name}</h3>
+                    <p className="text-blue-400 text-lg font-medium mb-6">{operationsManager.title}</p>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <div className="space-y-3">
+                        <div className="flex items-center space-x-3">
+                          <Phone className="h-5 w-5 text-blue-400" />
+                          <div>
+                            <span className="text-slate-400 text-sm">Office: </span>
+                            <a href={`tel:${operationsManager.office}`} className="text-white hover:text-blue-400 transition-colors">
+                              {operationsManager.office}
+                            </a>
+                          </div>
+                        </div>
+
+                        <div className="flex items-center space-x-3">
+                          <Phone className="h-5 w-5 text-blue-400" />
+                          <div>
+                            <span className="text-slate-400 text-sm">Cell: </span>
+                            <a href={`tel:${operationsManager.cell}`} className="text-white hover:text-blue-400 transition-colors">
+                              {operationsManager.cell}
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="space-y-3">
+                        <div className="flex items-center space-x-3">
+                          <Printer className="h-5 w-5 text-blue-400" />
+                          <div>
+                            <span className="text-slate-400 text-sm">Fax: </span>
+                            <span className="text-white">{operationsManager.fax}</span>
+                          </div>
+                        </div>
+
+                        <div className="flex items-center space-x-3">
+                          <Mail className="h-5 w-5 text-blue-400" />
+                          <div>
+                            <span className="text-slate-400 text-sm">Email: </span>
+                            <a href={`mailto:${operationsManager.email}`} className="text-white hover:text-blue-400 transition-colors">
+                              {operationsManager.email}
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Service Areas */}
+        <section className="py-24 bg-slate-800">
+          <div className="container mx-auto px-4">
+            <div className="max-w-6xl mx-auto text-center">
+              <h2 className="text-4xl font-bold text-white mb-12">Service Areas</h2>
+              
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
+                  <MapPin className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-2">South Texas</h3>
+                  <p className="text-slate-400">Brownsville, McAllen, Harlingen, and surrounding areas</p>
+                </div>
+                
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
+                  <MapPin className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-2">Coastal Texas</h3>
+                  <p className="text-slate-400">Corpus Christi, Ingleside, Port Aransas, and Gulf Coast</p>
+                </div>
+                
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
+                  <MapPin className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-2">Gulf of Mexico</h3>
+                  <p className="text-slate-400">Offshore platforms, rigs, and marine facilities</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default Locations;

src/pages/Services.tsx

@@ -1,60 +1,109 @@
 import React from 'react';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
-import { Wrench, Settings, Shield } from 'lucide-react';
+import { Wrench, Settings, Shield, Award, Users, CheckCircle } from 'lucide-react';
-import content from '@/content/content.json';
 
 const Services = () => {
+  const services = [
+    'Tig Welders', 'Pipe Welders', 'Mig Welders', 'Flux Cored Welders', 'Sub Arc Welders', 
+    '6-GR Welders', 'Structural Welders', 'Tack Welders', 'Pipe Fitters', 'Structural Fitters',
+    'Supervisors', 'Foremans', 'Safety Inspectors', 'Boiler Makers', 'Scaffold Builders',
+    'Personnel / Laborers', 'CWI Inspectors', 'Rig Welders'
+  ];
+
+  const specialties = [
+    'Jack Up Oil Rigs', 'Semi-Submersible Oil Rigs', 'Gas Land Rigs', 'Refineries',
+    'Platform Jackets', 'Civil Structures', 'Piled Towers', 'Platform Decks',
+    'Pressure Vessels', 'Structure Skids', 'Pipe Lines', 'Boats / Ships'
+  ];
+
+  const certifications = [
+    'AWS Certified Welders',
+    'ASME Code Welding', 
+    'ABS Marine Welding',
+    'API Standards',
+    'Quality Control Inspectors'
+  ];
+
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen bg-slate-900">
       <Header />
-      <main className="pt-16">
+      <main>
-        {/* Hero Section */}
+        {/* Hero Section with Image */}
-        <section className="py-24 hero-gradient">
+        <section className="relative py-32 overflow-hidden">
-          <div className="container mx-auto px-4">
+          {/* Background Image */}
-            <div className="max-w-4xl mx-auto text-center space-y-6">
+          <div 
-              <h1 className="text-display-md font-bold text-foreground">
+            className="absolute inset-0 bg-cover bg-center bg-no-repeat"
-                {content.services.title}
+            style={{ backgroundImage: 'url(/carousel_2.png)' }}
+          >
+            <div className="absolute inset-0 bg-slate-900/80"></div>
+          </div>
+
+          {/* Geometric Elements */}
+          <div className="absolute inset-0 opacity-20">
+            <div className="absolute top-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
+            <div className="absolute bottom-20 left-20 w-64 h-64 bg-blue-400/5 rounded-full blur-2xl"></div>
+          </div>
+
+          <div className="container mx-auto px-4 relative z-10">
+            <div className="max-w-4xl mx-auto text-center space-y-8">
+              <h1 className="text-5xl lg:text-6xl font-bold text-white leading-tight">
+                Services & 
+                <span className="text-blue-400"> Specialties</span>
               </h1>
-              <p className="text-xl text-muted">
+              <p className="text-xl text-slate-300 leading-relaxed">
-                Professional welding and fabrication services tailored to your industrial needs
+                Professional welding and fabrication services for industrial and commercial projects. 
+                Delivering expert craftsmanship with certified welders and modern equipment.
               </p>
             </div>
           </div>
         </section>
 
-        {/* Services Grid */}
+        {/* Services Section */}
-        <section className="py-24 bg-bg-elevated">
+        <section className="py-24 bg-slate-800">
           <div className="container mx-auto px-4">
-            <div className="max-w-6xl mx-auto">
+            <div className="max-w-7xl mx-auto">
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
                 {/* Services Column */}
-                <div className="space-y-6">
+                <div className="space-y-8">
-                  <div className="flex items-center space-x-3 mb-8">
+                  <div className="flex items-center space-x-4 mb-8">
-                    <Wrench className="h-8 w-8 text-accent" />
+                    <div className="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center">
-                    <h2 className="text-2xl font-bold text-foreground">Services</h2>
+                      <Wrench className="h-8 w-8 text-white" />
+                    </div>
+                    <h2 className="text-4xl font-bold text-white">Services</h2>
                   </div>
-                  <div className="space-y-4">
+                  
-                    {content.services.services.map((service, index) => (
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                      <div key={index} className="bg-gradient-card p-6 rounded-xl border border-border hover:shadow-subtle transition-smooth">
+                    {services.map((service, index) => (
-                        <h3 className="font-semibold text-foreground mb-2">{service}</h3>
+                      <div key={index} className="bg-slate-700/50 border border-slate-600 rounded-lg p-4 hover:bg-slate-700/70 transition-all duration-300">
-                        <p className="text-muted text-sm">Professional service with certified specialists and modern equipment</p>
+                        <div className="flex items-center space-x-3">
+                          <CheckCircle className="h-5 w-5 text-blue-400 flex-shrink-0" />
+                          <span className="text-white font-medium">{service}</span>
+                        </div>
                       </div>
                     ))}
                   </div>
                 </div>
 
                 {/* Specialties Column */}
-                <div className="space-y-6">
+                <div className="space-y-8">
-                  <div className="flex items-center space-x-3 mb-8">
+                  <div className="flex items-center space-x-4 mb-8">
-                    <Settings className="h-8 w-8 text-accent" />
+                    <div className="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center">
-                    <h2 className="text-2xl font-bold text-foreground">Specialties</h2>
+                      <Settings className="h-8 w-8 text-white" />
+                    </div>
+                    <h2 className="text-4xl font-bold text-white">Specialties</h2>
                   </div>
+                  
                   <div className="space-y-4">
-                    {content.services.specialties.map((specialty, index) => (
+                    {specialties.map((specialty, index) => (
-                      <div key={index} className="bg-gradient-card p-6 rounded-xl border border-border hover:shadow-subtle transition-smooth">
+                      <div key={index} className="bg-slate-700/50 border border-slate-600 rounded-lg p-6 hover:bg-slate-700/70 transition-all duration-300">
-                        <h3 className="font-semibold text-foreground mb-2">{specialty}</h3>
+                        <div className="flex items-center space-x-3">
-                        <p className="text-muted text-sm">Specialized expertise with attention to detail and quality assurance</p>
+                          <Award className="h-6 w-6 text-blue-400 flex-shrink-0" />
+                          <div>
+                            <h3 className="text-white font-semibold text-lg">{specialty}</h3>
+                            <p className="text-slate-400 text-sm">Specialized expertise with attention to detail and quality assurance</p>
+                          </div>
+                        </div>
                       </div>
                     ))}
                   </div>
@@ -64,38 +113,47 @@ const Services = () => {
           </div>
         </section>
 
-        {/* Quality Assurance */}
+        {/* Certifications Section */}
-        <section className="py-24">
+        <section className="py-24 bg-slate-900">
           <div className="container mx-auto px-4">
-            <div className="max-w-4xl mx-auto text-center space-y-12">
+            <div className="max-w-6xl mx-auto text-center">
-              <div className="flex items-center justify-center space-x-3 mb-6">
+              <div className="flex items-center justify-center space-x-4 mb-12">
-                <Shield className="h-10 w-10 text-accent" />
+                <div className="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center">
-                <h2 className="text-display-sm font-bold text-foreground">Quality Assurance</h2>
+                  <Shield className="h-8 w-8 text-white" />
+                </div>
+                <h2 className="text-4xl font-bold text-white">Welder Certifications</h2>
               </div>
               
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
-                <div className="space-y-4">
+                {certifications.map((cert, index) => (
-                  <div className="w-16 h-16 bg-accent/20 rounded-xl flex items-center justify-center mx-auto">
+                  <div key={index} className="bg-slate-800/50 border border-slate-600 rounded-xl p-6 hover:bg-slate-800/70 transition-all duration-300">
-                    <Shield className="h-8 w-8 text-accent" />
+                    <div className="space-y-4">
+                      <div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mx-auto">
+                        <Shield className="h-6 w-6 text-blue-400" />
+                      </div>
+                      <h3 className="text-white font-semibold">{cert}</h3>
+                    </div>
                   </div>
-                  <h3 className="text-lg font-semibold text-foreground">Certified Processes</h3>
+                ))}
-                  <p className="text-muted">All work follows industry standards and safety protocols</p>
+              </div>
+
+              <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8">
+                  <Users className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-2">Expert Team</h3>
+                  <p className="text-slate-400">Certified professionals with decades of experience in industrial welding</p>
                 </div>
                 
-                <div className="space-y-4">
+                <div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8">
-                  <div className="w-16 h-16 bg-accent/20 rounded-xl flex items-center justify-center mx-auto">
+                  <Settings className="h-12 w-12 text-blue-400 mx-auto mb-4" />
-                    <Wrench className="h-8 w-8 text-accent" />
+                  <h3 className="text-xl font-bold text-white mb-2">Modern Equipment</h3>
-                  </div>
+                  <p className="text-slate-400">State-of-the-art welding equipment and fabrication tools</p>
-                  <h3 className="text-lg font-semibold text-foreground">Expert Craftsmen</h3>
-                  <p className="text-muted">Skilled professionals with extensive experience</p>
                 </div>
                 
-                <div className="space-y-4">
+                <div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8">
-                  <div className="w-16 h-16 bg-accent/20 rounded-xl flex items-center justify-center mx-auto">
+                  <Award className="h-12 w-12 text-blue-400 mx-auto mb-4" />
-                    <Settings className="h-8 w-8 text-accent" />
+                  <h3 className="text-xl font-bold text-white mb-2">Quality Assurance</h3>
-                  </div>
+                  <p className="text-slate-400">Rigorous quality control and safety standards on every project</p>
-                  <h3 className="text-lg font-semibold text-foreground">Modern Equipment</h3>
-                  <p className="text-muted">State-of-the-art tools and technology</p>
                 </div>
               </div>
             </div>