Fast fertig

src/App.tsx

@@ -10,6 +10,9 @@ import ClientsProjects from "./pages/ClientsProjects";
 import Locations from "./pages/Locations";
 import Careers from "./pages/Careers";
 import Contact from "./pages/Contact";
+import Legal from "./pages/Legal";
+import Privacy from "./pages/Privacy";
+import Terms from "./pages/Terms";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
@@ -28,6 +31,9 @@ const App = () => (
           <Route path="/locations" element={<Locations />} />
           <Route path="/careers" element={<Careers />} />
           <Route path="/contact-us" element={<Contact />} />
+          <Route path="/legal" element={<Legal />} />
+          <Route path="/privacy" element={<Privacy />} />
+          <Route path="/terms" element={<Terms />} />
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
         </Routes>

src/components/CompanyBlurb.tsx

@@ -2,8 +2,21 @@ import React from 'react';
 import { Button } from '@/components/ui/button';
 import { ArrowRight, Shield, Award, Wrench } from 'lucide-react';
 import content from '@/content/content.json';
+import { useNavigate } from 'react-router-dom';
 
 const CompanyBlurb = () => {
+  const navigate = useNavigate();
+
+  const handleGetStarted = () => {
+    navigate('/contact-us');
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleViewWork = () => {
+    navigate('/clients-and-projects');
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
   return (
     <section className="py-32 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
       {/* Background geometric elements */}
@@ -29,8 +42,8 @@ const CompanyBlurb = () => {
           {/* 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="group animate-fadeInUp">
-              <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">
+              <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 hover-lift">
                 {/* 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" />
@@ -50,8 +63,8 @@ const CompanyBlurb = () => {
             </div>
 
             {/* Strengthen Quality */}
-            <div className="group">
+            <div className="group animate-fadeInUp" style={{animationDelay: '0.1s'}}>
-              <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">
+              <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 hover-lift">
                 {/* 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" />
@@ -71,8 +84,8 @@ const CompanyBlurb = () => {
             </div>
 
             {/* Boost Performance */}
-            <div className="group">
+            <div className="group animate-fadeInUp" style={{animationDelay: '0.2s'}}>
-              <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">
+              <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 hover-lift">
                 {/* 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" />
@@ -95,7 +108,11 @@ const CompanyBlurb = () => {
           {/* 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">
+              <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"
+                onClick={handleGetStarted}
+              >
                 Get Started Today
                 <ArrowRight className="ml-2 h-5 w-5" />
               </Button>
@@ -103,6 +120,7 @@ const CompanyBlurb = () => {
                 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"
+                onClick={handleViewWork}
               >
                 View Our Work
               </Button>

src/components/Footer.tsx

@@ -1,7 +1,20 @@
 import React from 'react';
 import content from '@/content/content.json';
+import { useNavigate } from 'react-router-dom';
 
 const Footer = () => {
+  const navigate = useNavigate();
+
+  const handleGetStarted = () => {
+    navigate('/contact-us');
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleNavigation = (path) => {
+    navigate(path);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
   return (
     <footer className="bg-slate-900 border-t border-slate-700">
       <div className="container mx-auto px-4 py-16">
@@ -10,23 +23,24 @@ const Footer = () => {
           {/* Company Section */}
           <div className="md:col-span-4">
             <div className="flex items-center space-x-3 mb-6">
-              <div className="h-10 w-10 bg-blue-500 rounded-full flex items-center justify-center">
+              <img 
-                <span className="text-white font-bold text-sm">TW</span>
+                src="/LOGO-Light-Web.png" 
-              </div>
+                alt="IIT Welders Logo" 
-              <span className="font-bold text-white text-xl">Texas Welding</span>
+                className="h-12 w-auto"
+              />
             </div>
             <p className="text-slate-400 text-sm leading-relaxed mb-6">
               Professional welding and fabrication services for industrial and commercial projects across Texas. Delivering quality craftsmanship with modern technology.
             </p>
             
-            {/* CTA Buttons */}
+            {/* CTA Button */}
             <div className="flex flex-col sm:flex-row gap-3">
-              <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">
+              <button 
+                onClick={handleGetStarted}
+                className="bg-white hover:bg-gray-100 text-slate-900 font-semibold px-6 py-3 rounded-lg text-sm transition-all duration-200"
+              >
                 Get started today
               </button>
-              <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">
-                Watch on-demand demo
-              </button>
             </div>
           </div>
 
@@ -34,21 +48,12 @@ const Footer = () => {
           <div className="md:col-span-2">
             <h3 className="font-semibold text-white mb-6">Services</h3>
             <div className="space-y-3">
-              <a href="/services-and-specialties" className="block text-slate-400 hover:text-white transition-colors text-sm">
+              <button 
-                Structural Welding
+                onClick={() => handleNavigation('/services-and-specialties')} 
-              </a>
+                className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
-              <a href="/services-and-specialties" className="block text-slate-400 hover:text-white transition-colors text-sm">
+              >
-                Pipe Welding
+                Services & Specialties
-              </a>
+              </button>
-              <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>
 
@@ -56,21 +61,30 @@ const Footer = () => {
           <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">
+              <button 
-                Oil & Gas
+                onClick={() => handleNavigation('/clients-and-projects')} 
-              </a>
+                className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
-              <a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
+              >
-                Manufacturing
+                Offshore Oil Rigs
-              </a>
+              </button>
-              <a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
+              <button 
-                Construction
+                onClick={() => handleNavigation('/clients-and-projects')} 
-              </a>
+                className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
-              <a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
+              >
-                Energy Utilities
+                Marine Construction
-              </a>
+              </button>
-              <a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
+              <button 
-                Chemical Processing
+                onClick={() => handleNavigation('/clients-and-projects')} 
-              </a>
+                className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
+              >
+                Industrial Fabrication
+              </button>
+              <button 
+                onClick={() => handleNavigation('/clients-and-projects')} 
+                className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
+              >
+                Aerospace Projects
+              </button>
             </div>
           </div>
 
@@ -78,21 +92,36 @@ const Footer = () => {
           <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">
+              <button 
+                onClick={() => handleNavigation('/clients-and-projects')} 
+                className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
+              >
                 Project Portfolio
-              </a>
+              </button>
-              <a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
+              <button 
-                Certifications
+                onClick={() => handleNavigation('/about-us')} 
-              </a>
+                className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
-              <a href="/locations" className="block text-slate-400 hover:text-white transition-colors text-sm">
+              >
+                About Our Company
+              </button>
+              <button 
+                onClick={() => handleNavigation('/locations')} 
+                className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
+              >
                 Locations
-              </a>
+              </button>
-              <a href="/careers" className="block text-slate-400 hover:text-white transition-colors text-sm">
+              <button 
+                onClick={() => handleNavigation('/careers')} 
+                className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
+              >
                 Careers
-              </a>
+              </button>
-              <a href="/contact-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
+              <button 
+                onClick={() => handleNavigation('/contact-us')} 
+                className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
+              >
                 Contact Support
-              </a>
+              </button>
             </div>
           </div>
 
@@ -100,18 +129,30 @@ const Footer = () => {
           <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">
+              <button 
+                onClick={() => handleNavigation('/about-us')} 
+                className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
+              >
                 About Us
-              </a>
+              </button>
-              <a href="/careers" className="block text-slate-400 hover:text-white transition-colors text-sm">
+              <button 
+                onClick={() => handleNavigation('/careers')} 
+                className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
+              >
                 Jobs
-              </a>
+              </button>
-              <a href="/contact-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
+              <button 
+                onClick={() => handleNavigation('/contact-us')} 
+                className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
+              >
                 Contact Sales
-              </a>
+              </button>
-              <a href="/locations" className="block text-slate-400 hover:text-white transition-colors text-sm">
+              <button 
+                onClick={() => handleNavigation('/locations')} 
+                className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
+              >
                 Office Locations
-              </a>
+              </button>
             </div>
           </div>
         </div>
@@ -122,15 +163,24 @@ const Footer = () => {
             <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">
+                <button 
+                  onClick={() => handleNavigation('/legal')} 
+                  className="text-slate-500 hover:text-slate-400 text-sm"
+                >
                   Legal Center
-                </a>
+                </button>
-                <a href="/privacy" className="text-slate-500 hover:text-slate-400 text-sm">
+                <button 
+                  onClick={() => handleNavigation('/privacy')} 
+                  className="text-slate-500 hover:text-slate-400 text-sm"
+                >
                   Privacy
-                </a>
+                </button>
-                <a href="/terms" className="text-slate-500 hover:text-slate-400 text-sm">
+                <button 
+                  onClick={() => handleNavigation('/terms')} 
+                  className="text-slate-500 hover:text-slate-400 text-sm"
+                >
                   Terms of Service
-                </a>
+                </button>
               </div>
             </div>
             

src/components/Hero.tsx

@@ -27,8 +27,8 @@ const Hero = () => {
           </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 bottom-0 left-0 w-1/3 h-1/3 border-l-2 border-b-2 border-blue-400/20 animate-pulse"></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 className="absolute top-0 right-0 w-1/3 h-1/3 border-r-2 border-t-2 border-blue-400/20 animate-pulse" style={{animationDelay: '1s'}}></div>
       </div>
       
       <div className="container mx-auto px-4 relative z-20">
@@ -36,28 +36,28 @@ const Hero = () => {
           {/* Content - Left Side - Exact Dispel Style */}
           <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-white leading-[0.85] tracking-tight">
+              <h1 className="text-5xl lg:text-6xl xl:text-7xl font-bold text-white leading-[0.85] tracking-tight animate-fadeInLeft animate-visible" style={{transitionDelay: '0.2s'}}>
                 Redefine How You
                 <br />
                 <span className="text-blue-400">Connect to Welding</span>
               </h1>
-              <p className="text-xl lg:text-2xl text-slate-300 leading-relaxed font-light">
+              <p className="text-xl lg:text-2xl text-slate-300 leading-relaxed font-light animate-fadeInLeft animate-visible" style={{transitionDelay: '0.4s'}}>
                 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 - Exact Dispel Style */}
-            <div className="flex flex-col sm:flex-row gap-4 pt-6">
+            <div className="flex flex-col sm:flex-row gap-4 pt-6 animate-fadeInLeft animate-visible" style={{transitionDelay: '0.6s'}}>
               <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"
+                className="bg-white hover:bg-gray-100 text-slate-900 font-semibold text-lg px-8 py-4 h-auto shadow-lg rounded-lg hover-lift hover-glow"
               >
                 Get Quote
               </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"
+                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 hover-lift"
               >
                 Explore Services
               </Button>
@@ -65,7 +65,7 @@ const Hero = () => {
           </div>
 
           {/* 3D Perspective Container - Right Side - Exact Dispel Style */}
-          <div className="relative flex justify-center items-start w-full -mt-12">
+          <div className="relative flex justify-center items-start w-full -mt-12 animate-fadeInRight animate-visible" style={{transitionDelay: '0.3s'}}>
             {/* 3D Tilted Screen Container - Exact Dispel Style */}
             <div className="relative w-full max-w-xl">
               {/* 3D Container with perspective */}
@@ -106,8 +106,8 @@ const Hero = () => {
               </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 -top-4 -right-4 w-2 h-2 bg-blue-400 rounded-full animate-pulse-blue animate-float"></div>
-              <div className="absolute -bottom-4 -left-4 w-1 h-1 bg-blue-300 rounded-full animate-pulse delay-1000"></div>
+              <div className="absolute -bottom-4 -left-4 w-1 h-1 bg-blue-300 rounded-full animate-pulse-blue animate-float" style={{animationDelay: '1s', animationDuration: '7s'}}></div>
             </div>
           </div>
         </div>

src/components/LogoSection.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
+import { useCountUp } from '@/hooks/useCountUp';
 
 const LogoSection = () => {
+  // Count-up animations for stats
+  const secondsCount = useCountUp({ end: 30, suffix: '', duration: 2000 });
+  const savingsCount = useCountUp({ end: 23, suffix: 'K', duration: 2500, delay: 200 });
+  const projectsCount = useCountUp({ end: 1, suffix: '', duration: 1500, delay: 400 });
+  const millionsCount = useCountUp({ end: 2, suffix: 'M', duration: 2200, delay: 600 });
+
   const clients = [
     { name: 'ExxonMobil', logo: 'EM' },
     { name: 'Chevron', logo: 'CV' },
@@ -22,36 +29,48 @@ const LogoSection = () => {
         
         {/* Statistics Row */}
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
-          <div className="text-center">
+          <div className="text-center animate-fadeInUp">
-            <div className="text-4xl lg:text-5xl font-bold text-white mb-2">
+            <div 
-              &lt;30
+              ref={secondsCount.ref}
+              className="text-4xl lg:text-5xl font-bold text-white mb-2"
+            >
+              &lt;{secondsCount.count}
             </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-center animate-fadeInUp" style={{animationDelay: '0.1s'}}>
-            <div className="text-4xl lg:text-5xl font-bold text-white mb-2">
+            <div 
-              $23K
+              ref={savingsCount.ref}
+              className="text-4xl lg:text-5xl font-bold text-white mb-2"
+            >
+              ${savingsCount.count}
             </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-center animate-fadeInUp" style={{animationDelay: '0.2s'}}>
-            <div className="text-4xl lg:text-5xl font-bold text-white mb-2">
+            <div 
-              1
+              ref={projectsCount.ref}
+              className="text-4xl lg:text-5xl font-bold text-white mb-2"
+            >
+              {projectsCount.count}
             </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-center animate-fadeInUp" style={{animationDelay: '0.3s'}}>
-            <div className="text-4xl lg:text-5xl font-bold text-white mb-2">
+            <div 
-              $2M
+              ref={millionsCount.ref}
+              className="text-4xl lg:text-5xl font-bold text-white mb-2"
+            >
+              ${millionsCount.count}
             </div>
             <p className="text-slate-400 text-sm">
               saved per year by a leading energy company by improving operating efficiency.

src/hooks/useCountUp.ts

@@ -0,0 +1,69 @@
+import { useState, useEffect, useRef } from 'react';
+
+interface UseCountUpOptions {
+  end: number;
+  duration?: number;
+  delay?: number;
+  suffix?: string;
+}
+
+export const useCountUp = ({ end, duration = 2000, delay = 0, suffix = '' }: UseCountUpOptions) => {
+  const [count, setCount] = useState(0);
+  const [isVisible, setIsVisible] = useState(false);
+  const elementRef = useRef<HTMLDivElement>(null);
+  const hasAnimated = useRef(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !hasAnimated.current) {
+          setIsVisible(true);
+          hasAnimated.current = true;
+        }
+      },
+      { threshold: 0.5 }
+    );
+
+    if (elementRef.current) {
+      observer.observe(elementRef.current);
+    }
+
+    return () => {
+      if (elementRef.current) {
+        observer.unobserve(elementRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isVisible) return;
+
+    const startTime = Date.now() + delay;
+    const startValue = 0;
+    
+    const animate = () => {
+      const now = Date.now();
+      if (now < startTime) {
+        requestAnimationFrame(animate);
+        return;
+      }
+      
+      const elapsed = now - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      
+      // Easing function for smooth animation
+      const easeOutCubic = 1 - Math.pow(1 - progress, 3);
+      const currentValue = Math.floor(startValue + (end - startValue) * easeOutCubic);
+      
+      setCount(currentValue);
+      
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      }
+    };
+
+    requestAnimationFrame(animate);
+  }, [isVisible, end, duration, delay]);
+
+  return { count: count + suffix, ref: elementRef };
+};

src/hooks/useScrollAnimation.ts

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+
+export const useScrollAnimation = () => {
+  useEffect(() => {
+    const observerCallback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('animate-visible');
+        }
+      });
+    };
+
+    const observer = new IntersectionObserver(observerCallback, {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px',
+    });
+
+    // Observe all elements with animation classes
+    const animatedElements = document.querySelectorAll(
+      '.animate-fadeInUp, .animate-fadeInLeft, .animate-fadeInRight, .animate-scaleIn, .animate-slideInDown'
+    );
+
+    animatedElements.forEach((el) => {
+      observer.observe(el);
+    });
+
+    return () => {
+      animatedElements.forEach((el) => {
+        observer.unobserve(el);
+      });
+    };
+  }, []);
+};

src/index.css

@@ -192,13 +192,211 @@
   .carousel-autoplay-paused {
     @apply bg-muted/50;
   }
+
+  /* Animation classes */
+  .animate-fadeInUp {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+  }
+
+  .animate-fadeInUp.animate-visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .animate-fadeInLeft {
+    opacity: 0;
+    transform: translateX(-30px);
+    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+  }
+
+  .animate-fadeInLeft.animate-visible {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  .animate-fadeInRight {
+    opacity: 0;
+    transform: translateX(30px);
+    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+  }
+
+  .animate-fadeInRight.animate-visible {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  .animate-scaleIn {
+    opacity: 0;
+    transform: scale(0.9);
+    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+  }
+
+  .animate-scaleIn.animate-visible {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .animate-slideInDown {
+    opacity: 0;
+    transform: translateY(-30px);
+    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
+  }
+
+  .animate-slideInDown.animate-visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .animate-pulse-blue {
+    animation: pulseBlue 2s infinite;
+  }
+
+  .animate-float {
+    animation: float 6s ease-in-out infinite;
+  }
+
+  .animate-rotate-slow {
+    animation: rotateSlow 20s linear infinite;
+  }
+
+  /* Immediate visible animations */
+  .animate-bounce-subtle {
+    animation: bounceSubtle 2s ease-in-out infinite;
+  }
+
+  /* Simple hover animations that should be immediately visible */
+  .hover-lift {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+
+  .hover-lift:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  }
+
+  .hover-glow {
+    transition: box-shadow 0.3s ease;
+  }
+
+  .hover-glow:hover {
+    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
+  }
+}
+
+/* Keyframe animations */
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInLeft {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInRight {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes scaleIn {
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideInDown {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulseBlue {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes rotateSlow {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes bounceSubtle {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
 }
 
 @layer utilities {
+  /* Text truncation utilities */
+  .line-clamp-1 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+  }
+  
+  .line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+  
+  .line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+
   /* Reduced motion support */
   @media (prefers-reduced-motion: reduce) {
     .transition-smooth {
       transition: none;
     }
+    
+    .animate-fadeInUp,
+    .animate-fadeInLeft,
+    .animate-fadeInRight,
+    .animate-scaleIn,
+    .animate-slideInDown,
+    .animate-pulse-blue,
+    .animate-float,
+    .animate-rotate-slow {
+      animation: none;
+      opacity: 1;
+      transform: none;
+    }
   }
 }

src/pages/About.tsx

@@ -1,22 +1,38 @@
 import React from 'react';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
-import { Building, Users, Award } from 'lucide-react';
+import { Building, Users, Award, ChevronRight } from 'lucide-react';
 import content from '@/content/content.json';
 
 const About = () => {
   return (
     <div className="min-h-screen bg-slate-900">
       <Header />
+      
+      {/* Breadcrumbs */}
+      <nav className="bg-slate-800 border-b border-slate-700 py-3">
+        <div className="container mx-auto px-4">
+          <div className="flex items-center space-x-2 text-sm">
+            <button 
+              onClick={() => window.location.href = '/'}
+              className="text-slate-400 hover:text-white transition-colors"
+            >
+              Home
+            </button>
+            <ChevronRight className="h-4 w-4 text-slate-500" />
+            <span className="text-white font-medium">About Us</span>
+          </div>
+        </div>
+      </nav>
+      
       <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_4.png)' }}
+            style={{ backgroundImage: 'url(/hero-subpage.png)' }}
           >
-            <div className="absolute inset-0 bg-slate-900/80"></div>
           </div>
 
           {/* Geometric Elements */}

src/pages/Careers.tsx

@@ -1,7 +1,7 @@
 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 { Users, Clock, Download, Upload, Phone, CheckCircle, ChevronRight } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
 const Careers = () => {
@@ -25,15 +25,31 @@ const Careers = () => {
   return (
     <div className="min-h-screen bg-slate-900">
       <Header />
+      
+      {/* Breadcrumbs */}
+      <nav className="bg-slate-800 border-b border-slate-700 py-3">
+        <div className="container mx-auto px-4">
+          <div className="flex items-center space-x-2 text-sm">
+            <button 
+              onClick={() => window.location.href = '/'}
+              className="text-slate-400 hover:text-white transition-colors"
+            >
+              Home
+            </button>
+            <ChevronRight className="h-4 w-4 text-slate-500" />
+            <span className="text-white font-medium">Careers</span>
+          </div>
+        </div>
+      </nav>
+      
       <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)' }}
+            style={{ backgroundImage: 'url(/hero_subpage.png)' }}
           >
-            <div className="absolute inset-0 bg-slate-900/80"></div>
           </div>
 
           {/* Geometric Elements */}

src/pages/ClientsProjects.tsx

@@ -1,15 +1,45 @@
-import React from 'react';
+import React, { useState, useMemo } from 'react';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
-import { MapPin, Clock, Users, Building, Award } from 'lucide-react';
+import { MapPin, Clock, Users, Building, Award, Search, Filter, ArrowUp, ChevronRight } from 'lucide-react';
+import { useCountUp } from '@/hooks/useCountUp';
+import { useScrollAnimation } from '@/hooks/useScrollAnimation';
 
 const ClientsProjects = () => {
+  useScrollAnimation();
+  
+  // Search and filter states
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedIndustry, setSelectedIndustry] = useState('All');
+  const [selectedLocation, setSelectedLocation] = useState('All');
+  const [showBackToTop, setShowBackToTop] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  
+  // Stats with count-up animations
+  const clientsCount = useCountUp({ end: 56, duration: 2500 });
+  const projectsCount = useCountUp({ end: 56, duration: 3000, delay: 200 });
+  const longestProjectCount = useCountUp({ end: 81, duration: 2000, delay: 400 });
+  const maxPersonnelCount = useCountUp({ end: 120, duration: 2800, delay: 600 });
+  
+  // Back to top functionality
+  React.useEffect(() => {
+    const handleScroll = () => {
+      setShowBackToTop(window.scrollY > 400);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+  
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
   const projects = [
     {
       client: 'Dixie Iron Works',
       location: 'Alice, Texas',
-      project: 'Structural Steel Framework',
+      project: 'Hydraulic pumps structure frames fabrication',
-      craftOnSite: 'Welding & Assembly',
+      craftOnSite: '12 Fitters, Welders and Supervisor',
       duration: '2 months',
       personnel: 12
     },
@@ -17,56 +47,529 @@ const ClientsProjects = () => {
       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',
+      craftOnSite: '110 Pipe & Structure Fitters, Lay out Fitters, Pipe & Structure Welders, Tig Welders, Supervisors',
       duration: '31 months',
       personnel: 110
     },
+    {
+      client: 'Esco Marine Inc.',
+      location: 'Brownsville, Texas',
+      project: 'Offshore Oil Rig Repair',
+      craftOnSite: '28 Pipe & Structure Welders, Pipe & Structure Fitters, Supervisor, Fitter Helpers',
+      duration: '6 months',
+      personnel: 28
+    },
+    {
+      client: 'STI Group',
+      location: 'Tulsa, Oklahoma',
+      project: 'H&P Flex Gas Land Rigs new Fabrication',
+      craftOnSite: '8 Flux Cored Welders',
+      duration: '4 weeks',
+      personnel: 8
+    },
     {
       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',
+      craftOnSite: '46 Welders and Fitters',
       duration: '18 months',
       personnel: 46
     },
+    {
+      client: 'Load Craft Industries',
+      location: 'Brad & Early Texas',
+      project: 'Nabors Drilling Rigs Fabrication, Mud Tanks and other drilling components',
+      craftOnSite: '84 Welders, Fitters, Operators',
+      duration: '15 months',
+      personnel: 84
+    },
+    {
+      client: 'R.M Walsdorf Inc.',
+      location: 'Port of Brownsville TX',
+      project: 'Boat ladders',
+      craftOnSite: '4 Welders and Fitters',
+      duration: '2 months',
+      personnel: 4
+    },
+    {
+      client: 'Shoreline Foundation, Inc.',
+      location: 'Kings Bay Naval Base, GA.',
+      project: 'Water front, North Land Water Interface P636',
+      craftOnSite: '12 Welders, Fitters & Supervisor',
+      duration: '3 months',
+      personnel: 12
+    },
+    {
+      client: 'STI Group',
+      location: 'Bridge City, Texas',
+      project: 'H&P Gas Land Rigs',
+      craftOnSite: '28 Welders & Fitters',
+      duration: '2 years',
+      personnel: 28
+    },
+    {
+      client: 'INTERLUBE CORPORATION, INC',
+      location: 'Port of Brownsville TX',
+      project: 'Above Ground Storage Tanks Maintenance',
+      craftOnSite: '4 Maintenance Group',
+      duration: '1 year',
+      personnel: 4
+    },
+    {
+      client: 'STI Group',
+      location: 'Vidor, Texas',
+      project: 'H&P Gas Land Rigs',
+      craftOnSite: '44 Welders and Fitters',
+      duration: '28 months',
+      personnel: 44
+    },
+    {
+      client: 'Triton Marine',
+      location: 'Port of Brownsville, TX',
+      project: 'Construction of new dock #6',
+      craftOnSite: '6 Fitter/Welder',
+      duration: '18 months',
+      personnel: 6
+    },
+    {
+      client: 'Nehemiah\'s Vision',
+      location: 'Port Arthur, Texas',
+      project: 'Residential Homes Repair',
+      craftOnSite: '14 Residential Carpenters',
+      duration: '6 months',
+      personnel: 14
+    },
+    {
+      client: 'Keppel Amfels',
+      location: 'Brownsville, Texas',
+      project: 'Offshore Drilling Rig',
+      craftOnSite: '30 Welders, Fitters, Supervisors',
+      duration: '16 months to date',
+      personnel: 30
+    },
+    {
+      client: 'Weeks Marine',
+      location: 'Cameron, LA',
+      project: 'Sea Wall LNG Terminal',
+      craftOnSite: 'Welders and Fitters',
+      duration: '8 months',
+      personnel: 8
+    },
+    {
+      client: 'STI Group',
+      location: 'Tulsa, Oklahoma',
+      project: 'Flex Drilling Rigs Fabrication',
+      craftOnSite: 'Welders and Fitters',
+      duration: '2 months',
+      personnel: 12
+    },
+    {
+      client: 'Ready Flo',
+      location: 'Corpus Christi, TX',
+      project: 'Skids Gas Separators',
+      craftOnSite: 'Welders and Fitters',
+      duration: '16 months to date',
+      personnel: 12
+    },
     {
       client: 'Space X Brownsville',
       location: 'Brownsville, TX',
       project: 'New erection construction',
-      craftOnSite: 'Welders and Supervisors',
+      craftOnSite: '24 welders and 2 supervisors',
       duration: '6 months',
       personnel: 26
     },
+    {
+      client: 'South East Texas Industries',
+      location: 'Beaumont, Bridge City, Vidor, Orange Texas',
+      project: 'H&P Flex Gas Land Rigs new fabrication',
+      craftOnSite: '120 Pipe & Structure Fitters, Pipe & Structure Welders, Tig Welders, 6/GR Welders, S.S Welders, Supervisors, Fitter Helpers',
+      duration: '42 months',
+      personnel: 120
+    },
     {
       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',
+      craftOnSite: '36 Tig Welders, 6/GR Welders, Pipe & Structure Fitters, Supervisors, Tack Welders',
       duration: '32 months',
       personnel: 36
     },
+    {
+      client: 'Veolia Environmental Services',
+      location: 'Port Arthur, Texas',
+      project: 'Veolia Environmental Processing Plant Turnaround',
+      craftOnSite: '38 Pipe & Structure Fitters, Pipe & Structure Welders, Boiler Makers',
+      duration: '36 Days',
+      personnel: 38
+    },
+    {
+      client: 'Environmental Evolution Services',
+      location: 'Robstown, Texas',
+      project: 'Acid Frac Tank Containers',
+      craftOnSite: '4 Welders and Fitters',
+      duration: '24 months',
+      personnel: 4
+    },
     {
       client: 'Eastern Shipbuilding',
       location: 'Panama City, Florida',
       project: 'Fabrication of new Coast Guard Ships, Cargo Boats, Crew Boats',
-      craftOnSite: 'Welders, Fitters, Electricians',
+      craftOnSite: '35 Welders, Fitters, Electricians',
       duration: '5 years',
       personnel: 35
+    },
+    {
+      client: 'STIS',
+      location: 'Livingston, Texas',
+      project: 'H&P Gas Land Rigs',
+      craftOnSite: '60 Welders, Fitters, Supervisors',
+      duration: '19 months',
+      personnel: 60
+    },
+    {
+      client: 'Shoreline Foundation Inc.',
+      location: 'Port of Brownsville TX',
+      project: 'Boat Landing Tie Downs',
+      craftOnSite: '12 Welders and Fitters',
+      duration: '1 month',
+      personnel: 12
+    },
+    {
+      client: 'STI GROUP',
+      location: 'Orange, Texas',
+      project: 'Ammonia and Gas Stainless Steel Skid Plants',
+      craftOnSite: '6 Welders, Fitters, Assemblers',
+      duration: '2 months',
+      personnel: 6
+    },
+    {
+      client: 'MOORE IRON AND STEEL INC.',
+      location: 'Hondo, Texas',
+      project: 'Martin Asphalt Terminal, Above Ground Storage Tank Fabrication',
+      craftOnSite: '17 Pipe Welders, Pipe Fitters and Supervisors',
+      duration: '7 months',
+      personnel: 17
+    },
+    {
+      client: 'SOLARIS OIL FIELD INFRASTRUCTURE INC.',
+      location: 'Early, Texas',
+      project: 'Sand Silos Fabrication for the Oil Field Industries',
+      craftOnSite: '16 Welders, Fitters Combination',
+      duration: '26 months',
+      personnel: 16
+    },
+    {
+      client: 'Derrick Construction',
+      location: 'Port of Brownsville, TX',
+      project: 'Construction of new dock #3',
+      craftOnSite: '10 Fitter/Welder',
+      duration: '4 months',
+      personnel: 10
+    },
+    {
+      client: 'Russell Marine',
+      location: 'Port Aransas, Texas',
+      project: '48" Pile Fitting and Welding',
+      craftOnSite: '8 Pipe Welders and 4 Pipe Fitters',
+      duration: '4 months',
+      personnel: 12
+    },
+    {
+      client: 'City of Brownsville, TX',
+      location: 'Brownsville, Texas',
+      project: 'Structural Components Fire Dept.',
+      craftOnSite: 'Welders and Fitters',
+      duration: '1 month',
+      personnel: 6
+    },
+    {
+      client: 'Weeks Marine',
+      location: 'Aransas Pass, TX',
+      project: 'Exxon Terminal Dock Piling Fabrication',
+      craftOnSite: 'Welders and Fitters',
+      duration: '3 months',
+      personnel: 8
+    },
+    {
+      client: 'Orion Construction',
+      location: 'Ingleside, TX',
+      project: 'Dock Piling LNG Terminal',
+      craftOnSite: 'Welders and Fitters',
+      duration: '6 months',
+      personnel: 10
+    },
+    {
+      client: 'Orion Construction',
+      location: 'Ingleside, TX',
+      project: 'Dock Piling LNG Terminal',
+      craftOnSite: 'Welders and Fitters',
+      duration: '4 months',
+      personnel: 10
+    },
+    {
+      client: 'Stewart Construction',
+      location: 'Harvey, LA',
+      project: 'Dock Piling and components',
+      craftOnSite: '6 Welders and 2 Fitters',
+      duration: '6 months to date',
+      personnel: 8
+    },
+    {
+      client: 'Beacon Maritime',
+      location: 'Orange, Sabine Pass, and Port Arthur Texas',
+      project: 'Songa, Aban Chiles, Neptune and Diamond Offshore Oil Rig Fabrication',
+      craftOnSite: '80 Pipe & Structure Fitters, Pipe & Structure Welders, Supervisors, Fitter Helpers',
+      duration: '12 months',
+      personnel: 80
+    },
+    {
+      client: 'Jet Specialty, Inc',
+      location: 'Corpus Christi, Texas',
+      project: 'Gas Pressure Vessels Fabrication',
+      craftOnSite: '8 Mig Pipe Welders, Pipe Fitters and Supervisor',
+      duration: '81 months',
+      personnel: 8
+    },
+    {
+      client: 'Long Fence Company',
+      location: 'Brownsville, Texas',
+      project: 'Rio Grande Valley US/Mexico Border Wall. Sectors 017-018-and 019',
+      craftOnSite: '86 St Welders & Fitters, Fitter Helpers, Supervisors, Tack Welders, Operators, Riggers, Safety Officers',
+      duration: '12 months',
+      personnel: 86
+    },
+    {
+      client: 'STI Oil Field Services',
+      location: 'Vidor, Gonzalez, Kennedy, York Town, McAllen Texas. North Dakota, Denver Colorado.',
+      project: 'H&P Flex Gas Land Rigs new fabrication',
+      craftOnSite: '26 Flux Cored Welders and Fitters',
+      duration: '26 months',
+      personnel: 26
+    },
+    {
+      client: 'Brownsville Navigation District',
+      location: 'Port of Brownsville TX',
+      project: 'Crane Boom repair and new construction',
+      craftOnSite: '4 Welders and Fitters',
+      duration: '6 years to Date',
+      personnel: 4
+    },
+    {
+      client: 'Solaris Oil Field Industries',
+      location: 'Early, Texas',
+      project: 'Mud Tanks and other drilling components',
+      craftOnSite: '16 Welders, Fitters, Operators',
+      duration: '11 months',
+      personnel: 16
+    },
+    {
+      client: 'R.P. Construction',
+      location: 'Brownsville TX P.U.B Location',
+      project: 'Welding Stainless Steel Pipe Welding System',
+      craftOnSite: '4 Tig Welders and Fitters',
+      duration: '5 months',
+      personnel: 4
+    },
+    {
+      client: 'READY FLO SYSTEMS',
+      location: 'Corpus Christi, Texas',
+      project: 'Oil Field Gas Separators Fabrication',
+      craftOnSite: '3 Pipe Welder Combos',
+      duration: '4 months',
+      personnel: 3
+    },
+    {
+      client: 'RIO GRANDE TOOLS, INC',
+      location: 'Brownsville, Texas',
+      project: 'Valley Baptist Hospital pipe line modifications',
+      craftOnSite: '4 Welder/Fitters',
+      duration: '6 months',
+      personnel: 4
+    },
+    {
+      client: 'STI Group',
+      location: 'Beaumont, Texas',
+      project: 'H&P Gas Land Rigs',
+      craftOnSite: '8 welders and fitters',
+      duration: '6 months',
+      personnel: 8
+    },
+    {
+      client: 'STI Group',
+      location: 'Nederland, Texas',
+      project: 'H&P Gas Land Rigs',
+      craftOnSite: '10 Fitters',
+      duration: '27 months',
+      personnel: 10
+    },
+    {
+      client: 'STI Group Florida',
+      location: 'Cape Canaveral, Florida',
+      project: 'Space X fabrication of new towers, piping & structural',
+      craftOnSite: '10 Fitters & Welders',
+      duration: '3 months',
+      personnel: 10
+    },
+    {
+      client: 'ATS Construction',
+      location: 'Corpus Christi, TX',
+      project: 'Pipe Rack Fabrication',
+      craftOnSite: '7 Welders and 2 St/Fitters',
+      duration: '3 months',
+      personnel: 9
+    },
+    {
+      client: 'STI Group',
+      location: 'Vidor and Bridge City, TX',
+      project: 'Flex Drilling Rigs Fabrication',
+      craftOnSite: 'Welders and Fitters',
+      duration: '14 months',
+      personnel: 15
+    },
+    {
+      client: 'Orion Construction',
+      location: 'Donaldsonville, LA',
+      project: 'Dock Piling LNG Terminal',
+      craftOnSite: 'Welders and Fitters',
+      duration: '4 months',
+      personnel: 10
+    },
+    {
+      client: 'ATS Construction',
+      location: 'Corpus Christi, TX',
+      project: 'Tank Vessels and Pipe Fabrication',
+      craftOnSite: 'Welders and Fitters',
+      duration: '8 months',
+      personnel: 12
+    },
+    {
+      client: 'Orion Marine',
+      location: 'New Orleans, LA',
+      project: 'Refurbishment of existing dock',
+      craftOnSite: '8 welders',
+      duration: '6 months to date',
+      personnel: 8
     }
   ];
 
+  // Industry categories for filtering
+  const industries = [
+    'All',
+    'Offshore Oil Rigs',
+    'Marine Construction', 
+    'Industrial Fabrication',
+    'Aerospace Projects',
+    'Infrastructure',
+    'Energy & Utilities',
+    'Government Projects'
+  ];
+  
+  // Enhanced projects with industry categorization
+  const enhancedProjects = projects.map(project => {
+    let industry = 'Industrial Fabrication'; // default
+    
+    if (project.project.toLowerCase().includes('oil rig') || 
+        project.project.toLowerCase().includes('offshore') ||
+        project.client.toLowerCase().includes('signal') ||
+        project.client.toLowerCase().includes('keppel') ||
+        project.client.toLowerCase().includes('beacon')) {
+      industry = 'Offshore Oil Rigs';
+    } else if (project.project.toLowerCase().includes('ship') ||
+               project.project.toLowerCase().includes('marine') ||
+               project.project.toLowerCase().includes('dock') ||
+               project.project.toLowerCase().includes('boat') ||
+               project.client.toLowerCase().includes('eastern shipbuilding') ||
+               project.client.toLowerCase().includes('triton marine')) {
+      industry = 'Marine Construction';
+    } else if (project.client.toLowerCase().includes('space') ||
+               project.project.toLowerCase().includes('space')) {
+      industry = 'Aerospace Projects';
+    } else if (project.project.toLowerCase().includes('border wall') ||
+               project.client.toLowerCase().includes('government') ||
+               project.location.toLowerCase().includes('naval base')) {
+      industry = 'Government Projects';
+    } else if (project.project.toLowerCase().includes('terminal') ||
+               project.project.toLowerCase().includes('lng') ||
+               project.project.toLowerCase().includes('storage tank')) {
+      industry = 'Energy & Utilities';
+    } else if (project.project.toLowerCase().includes('bridge') ||
+               project.client.toLowerCase().includes('navigation') ||
+               project.project.toLowerCase().includes('crane')) {
+      industry = 'Infrastructure';
+    }
+    
+    return { ...project, industry };
+  });
+  
+  // Get unique locations for filter
+  const locations = ['All', ...new Set(enhancedProjects.map(p => {
+    const state = p.location.split(',').pop()?.trim() || p.location;
+    return state.replace(/\b(Texas|TX|Florida|LA|Louisiana|Oklahoma|Colorado|GA|Georgia)\b/g, (match) => {
+      const stateMap = {
+        'TX': 'Texas',
+        'LA': 'Louisiana', 
+        'GA': 'Georgia'
+      };
+      return stateMap[match] || match;
+    });
+  }))];
+  
+  // Filtered projects based on search and filters
+  const filteredProjects = useMemo(() => {
+    return enhancedProjects.filter(project => {
+      const matchesSearch = project.client.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                           project.project.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                           project.location.toLowerCase().includes(searchTerm.toLowerCase());
+      
+      const matchesIndustry = selectedIndustry === 'All' || project.industry === selectedIndustry;
+      
+      const projectLocation = project.location.split(',').pop()?.trim() || project.location;
+      const normalizedLocation = projectLocation.replace(/\b(TX|LA|GA)\b/g, (match) => {
+        const stateMap = { 'TX': 'Texas', 'LA': 'Louisiana', 'GA': 'Georgia' };
+        return stateMap[match] || match;
+      });
+      const matchesLocation = selectedLocation === 'All' || normalizedLocation.includes(selectedLocation);
+      
+      return matchesSearch && matchesIndustry && matchesLocation;
+    });
+  }, [searchTerm, selectedIndustry, selectedLocation]);
+  
+  // Handle loading state separately
+  React.useEffect(() => {
+    setIsLoading(true);
+    const timer = setTimeout(() => setIsLoading(false), 300);
+    return () => clearTimeout(timer);
+  }, [searchTerm, selectedIndustry, selectedLocation]);
+
   return (
     <div className="min-h-screen bg-slate-900">
       <Header />
+      
+      {/* Breadcrumbs */}
+      <nav className="bg-slate-800 border-b border-slate-700 py-3">
+        <div className="container mx-auto px-4">
+          <div className="flex items-center space-x-2 text-sm">
+            <button 
+              onClick={() => window.location.href = '/'}
+              className="text-slate-400 hover:text-white transition-colors"
+            >
+              Home
+            </button>
+            <ChevronRight className="h-4 w-4 text-slate-500" />
+            <span className="text-white font-medium">Clients & Projects</span>
+          </div>
+        </div>
+      </nav>
+      
       <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)' }}
+            style={{ backgroundImage: 'url(/hero_subpage.png)' }}
           >
-            <div className="absolute inset-0 bg-slate-900/80"></div>
           </div>
 
           {/* Geometric Elements */}
@@ -94,20 +597,43 @@ const ClientsProjects = () => {
           <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-center animate-fadeInUp">
-                  <div className="text-4xl lg:text-5xl font-bold text-white mb-2">50+</div>
+                  <div 
+                    ref={clientsCount.ref}
+                    className="text-4xl lg:text-5xl font-bold text-white mb-2 animate-bounce-subtle"
+                  >
+                    {clientsCount.count}
+                  </div>
                   <p className="text-slate-400 text-sm">Major Clients Served</p>
                 </div>
-                <div className="text-center">
+                <div className="text-center animate-fadeInUp" style={{animationDelay: '0.1s'}}>
-                  <div className="text-4xl lg:text-5xl font-bold text-white mb-2">100+</div>
+                  <div 
+                    ref={projectsCount.ref}
+                    className="text-4xl lg:text-5xl font-bold text-white mb-2 animate-bounce-subtle"
+                    style={{animationDelay: '0.2s'}}
+                  >
+                    {projectsCount.count}
+                  </div>
                   <p className="text-slate-400 text-sm">Projects Completed</p>
                 </div>
-                <div className="text-center">
+                <div className="text-center animate-fadeInUp" style={{animationDelay: '0.2s'}}>
-                  <div className="text-4xl lg:text-5xl font-bold text-white mb-2">42</div>
+                  <div 
+                    ref={longestProjectCount.ref}
+                    className="text-4xl lg:text-5xl font-bold text-white mb-2 animate-bounce-subtle"
+                    style={{animationDelay: '0.4s'}}
+                  >
+                    {longestProjectCount.count}
+                  </div>
                   <p className="text-slate-400 text-sm">Months Longest Project</p>
                 </div>
-                <div className="text-center">
+                <div className="text-center animate-fadeInUp" style={{animationDelay: '0.3s'}}>
-                  <div className="text-4xl lg:text-5xl font-bold text-white mb-2">120</div>
+                  <div 
+                    ref={maxPersonnelCount.ref}
+                    className="text-4xl lg:text-5xl font-bold text-white mb-2 animate-bounce-subtle"
+                    style={{animationDelay: '0.6s'}}
+                  >
+                    {maxPersonnelCount.count}
+                  </div>
                   <p className="text-slate-400 text-sm">Max Personnel on Site</p>
                 </div>
               </div>
@@ -115,60 +641,150 @@ const ClientsProjects = () => {
           </div>
         </section>
 
+        {/* Search and Filter Section */}
+        <section className="py-8 bg-slate-800">
+          <div className="container mx-auto px-4">
+            <div className="max-w-7xl mx-auto">
+              <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
+                {/* Search */}
+                <div className="lg:col-span-2">
+                  <div className="relative">
+                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-slate-400" />
+                    <input
+                      type="text"
+                      placeholder="Search projects, clients, or locations..."
+                      value={searchTerm}
+                      onChange={(e) => setSearchTerm(e.target.value)}
+                      className="w-full pl-10 pr-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+                    />
+                  </div>
+                </div>
+                
+                {/* Industry Filter */}
+                <div>
+                  <select
+                    value={selectedIndustry}
+                    onChange={(e) => setSelectedIndustry(e.target.value)}
+                    className="w-full py-3 px-4 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+                  >
+                    {industries.map(industry => (
+                      <option key={industry} value={industry}>{industry}</option>
+                    ))}
+                  </select>
+                </div>
+                
+                {/* Location Filter */}
+                <div>
+                  <select
+                    value={selectedLocation}
+                    onChange={(e) => setSelectedLocation(e.target.value)}
+                    className="w-full py-3 px-4 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+                  >
+                    {locations.map(location => (
+                      <option key={location} value={location}>{location}</option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+              
+              {/* Results Count */}
+              <div className="mt-4 text-center">
+                <span className="text-slate-400 text-sm">
+                  Showing {filteredProjects.length} of {enhancedProjects.length} projects
+                </span>
+              </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>
+                <h2 className="text-4xl font-bold text-white mb-4">Project Portfolio</h2>
-                <p className="text-slate-400 text-lg">A selection of our most significant and successful projects</p>
+                <p className="text-slate-400 text-lg">Complete portfolio of our successful projects and client partnerships</p>
               </div>
 
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+              {/* Loading State */}
-                {projects.map((project, index) => (
+              {isLoading ? (
-                  <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="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
-                    <div className="space-y-6">
+                  {[...Array(6)].map((_, index) => (
-                      {/* Header */}
+                    <div key={index} className="bg-slate-800/50 border border-slate-600 rounded-xl p-6 animate-pulse">
+                      <div className="space-y-4">
                       <div className="flex items-start justify-between">
-                        <div>
+                          <div className="flex-1">
-                          <h3 className="text-2xl font-bold text-white mb-2">{project.client}</h3>
+                            <div className="h-5 bg-slate-700 rounded mb-2"></div>
-                          <div className="flex items-center space-x-2 text-slate-400">
+                            <div className="h-4 bg-slate-700 rounded w-3/4"></div>
-                            <MapPin className="h-4 w-4" />
-                            <span className="text-sm">{project.location}</span>
                           </div>
+                          <div className="h-6 w-12 bg-slate-700 rounded"></div>
                         </div>
-                        <div className="bg-blue-500/20 rounded-lg px-3 py-1">
+                        <div className="space-y-3">
-                          <span className="text-blue-400 text-sm font-medium">{project.personnel} Personnel</span>
+                          <div className="h-4 bg-slate-700 rounded"></div>
+                          <div className="h-4 bg-slate-700 rounded"></div>
+                          <div className="h-4 bg-slate-700 rounded w-1/2"></div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+                  {filteredProjects.length === 0 ? (
+                    <div className="col-span-full text-center py-16">
+                      <div className="text-slate-400 text-lg mb-4">No projects found</div>
+                      <p className="text-slate-500">Try adjusting your search terms or filters</p>
+                    </div>
+                  ) : (
+                    filteredProjects.map((project, index) => (
+                      <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 hover:scale-[1.02] touch-manipulation">
+                        <div className="space-y-4">
+                          {/* Industry Badge */}
+                          <div className="flex items-start justify-between">
+                            <div className="flex-1">
+                              <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg px-2 py-1 inline-block mb-3">
+                                <span className="text-blue-400 text-xs font-medium">{project.industry}</span>
+                              </div>
+                              <h3 className="text-lg font-bold text-white mb-2 line-clamp-2">{project.client}</h3>
+                              <div className="flex items-center space-x-2 text-slate-400">
+                                <MapPin className="h-4 w-4 flex-shrink-0" />
+                                <span className="text-sm line-clamp-1">{project.location}</span>
+                              </div>
+                            </div>
+                            <div className="bg-blue-500/20 rounded-lg px-3 py-1 ml-2">
+                              <span className="text-blue-400 text-sm font-medium">{project.personnel}</span>
                         </div>
                       </div>
 
                       {/* Project Details */}
-                      <div className="space-y-4">
+                          <div className="space-y-3">
                         <div>
-                          <h4 className="text-white font-semibold mb-2">Project:</h4>
+                              <h4 className="text-white font-semibold mb-1 text-sm">Project:</h4>
-                          <p className="text-slate-300 text-sm">{project.project}</p>
+                              <p className="text-slate-300 text-sm line-clamp-2">{project.project}</p>
                         </div>
 
                         <div>
-                          <h4 className="text-white font-semibold mb-2">Craft on Site:</h4>
+                              <h4 className="text-white font-semibold mb-1 text-sm">Craft on Site:</h4>
-                          <p className="text-slate-300 text-sm">{project.craftOnSite}</p>
+                              <p className="text-slate-300 text-sm line-clamp-2">{project.craftOnSite}</p>
                         </div>
 
-                        <div className="flex items-center justify-between pt-4 border-t border-slate-600">
+                            <div className="flex items-center justify-between pt-3 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>
+                                <span className="text-slate-400 text-sm">{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>
+                                <span className="text-slate-400 text-sm">{project.personnel}</span>
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
+                    ))
+                  )}
                     </div>
-                  </div>
+              )}
-                ))}
-              </div>
             </div>
           </div>
         </section>
@@ -203,6 +819,17 @@ const ClientsProjects = () => {
         </section>
       </main>
       <Footer />
+      
+      {/* Back to Top Button */}
+      {showBackToTop && (
+        <button
+          onClick={scrollToTop}
+          className="fixed bottom-8 right-8 z-50 bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full shadow-lg transition-all duration-300 hover:scale-110 touch-manipulation"
+          aria-label="Back to top"
+        >
+          <ArrowUp className="h-6 w-6" />
+        </button>
+      )}
     </div>
   );
 };

src/pages/Contact.tsx

@@ -1,22 +1,41 @@
 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 { Phone, Mail, Printer, MapPin, Clock, User, ArrowRight, FileText, ChevronRight } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { useScrollAnimation } from '@/hooks/useScrollAnimation';
 
 const Contact = () => {
+  useScrollAnimation();
+  
   return (
     <div className="min-h-screen bg-slate-900">
       <Header />
+      
+      {/* Breadcrumbs */}
+      <nav className="bg-slate-800 border-b border-slate-700 py-3">
+        <div className="container mx-auto px-4">
+          <div className="flex items-center space-x-2 text-sm">
+            <button 
+              onClick={() => window.location.href = '/'}
+              className="text-slate-400 hover:text-white transition-colors"
+            >
+              Home
+            </button>
+            <ChevronRight className="h-4 w-4 text-slate-500" />
+            <span className="text-white font-medium">Contact Us</span>
+          </div>
+        </div>
+      </nav>
+      
       <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)' }}
+            style={{ backgroundImage: 'url(/hero-subpage.png)' }}
           >
-            <div className="absolute inset-0 bg-slate-900/80"></div>
           </div>
 
           {/* Geometric Elements */}
@@ -218,49 +237,349 @@ const Contact = () => {
           </div>
         </section>
 
-        {/* Contact Form Section */}
+        {/* Interactive Map Section */}
-        <section className="py-24 bg-slate-900">
+        <section className="py-24 bg-slate-800">
           <div className="container mx-auto px-4">
-            <div className="max-w-4xl mx-auto">
+            <div className="max-w-6xl mx-auto">
               <div className="text-center mb-12">
-                <h2 className="text-4xl font-bold text-white mb-4">Get Professional Support</h2>
+                <h2 className="text-4xl font-bold text-white mb-4">Find Us on the Map</h2>
-                <p className="text-slate-400 text-lg">
+                <p className="text-slate-400 text-lg">Our primary location in Brownsville, Texas</p>
-                  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="grid grid-cols-1 lg:grid-cols-2 gap-12">
-                <div className="text-center">
+                {/* Map */}
-                  <div className="w-16 h-16 bg-blue-500/20 rounded-xl flex items-center justify-center mx-auto mb-6">
+                <div className="rounded-2xl overflow-hidden">
-                    <Mail className="h-8 w-8 text-blue-400" />
+                  <iframe
+                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3583.2847689234647!2d-97.39826948450866!3d25.975238583630243!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x866fb43ca7a4e4a7%3A0x6b8b8b8b8b8b8b8b!2s7748%20Padre%20Island%20Hwy%2C%20Brownsville%2C%20TX%2078521%2C%20USA!5e0!3m2!1sen!2sde!4v1652901234567!5m2!1sen!2sde"
+                    width="100%"
+                    height="400"
+                    style={{ border: 0 }}
+                    allowFullScreen={true}
+                    loading="lazy"
+                    referrerPolicy="no-referrer-when-downgrade"
+                    title="IIT Welding - South Texas Office Location"
+                  ></iframe>
+                </div>
+
+                {/* Location Details */}
+                <div className="space-y-6">
+                  <div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
+                    <div className="flex items-start space-x-4 mb-6">
+                      <div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center flex-shrink-0">
+                        <MapPin className="h-6 w-6 text-white" />
+                      </div>
+                      <div>
+                        <h3 className="text-xl font-bold text-white mb-2">Primary Location</h3>
+                        <p className="text-blue-400 font-medium">South Texas Office & Fabrication Shop</p>
+                      </div>
+                    </div>
+
+                    <div className="space-y-4">
+                      <div>
+                        <p className="text-white font-medium text-lg">7748 Padre Island Hwy.</p>
+                        <p className="text-slate-300">Brownsville, TX 78521</p>
+                        <p className="text-slate-400 text-sm italic mt-1">(Next to Mariscos de la Rosa Restaurant)</p>
+                      </div>
+
+                      <div className="grid grid-cols-1 gap-3 pt-4 border-t border-slate-600">
+                        <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 font-medium">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 font-medium">956-831-5265</span>
+                        </div>
+                        <div className="flex items-center space-x-3">
+                          <Mail className="h-4 w-4 text-blue-400" />
+                          <span className="text-slate-400">Email:</span>
+                          <a href="mailto:iit.avasquez@sbcglobal.net" className="text-white hover:text-blue-400 transition-colors font-medium break-all">
+                            iit.avasquez@sbcglobal.net
+                          </a>
+                        </div>
+                      </div>
+
+                      <div className="pt-4">
+                        <a 
+                          href="https://www.google.com/maps/dir//7748+Padre+Island+Hwy,+Brownsville,+TX+78521" 
+                          target="_blank" 
+                          rel="noopener noreferrer"
+                          className="inline-flex items-center space-x-2 bg-blue-600 hover:bg-blue-700 text-white font-medium px-6 py-3 rounded-lg transition-colors"
+                        >
+                          <MapPin className="h-4 w-4" />
+                          <span>Get Directions</span>
+                        </a>
+                      </div>
+                    </div>
                   </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="bg-slate-700/50 border border-slate-600 rounded-2xl p-6">
-                  
+                    <h4 className="text-white font-semibold mb-3">Business Hours</h4>
-                  <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                    <div className="space-y-2 text-sm">
-                    <Button className="bg-white hover:bg-gray-100 text-slate-900 font-semibold">
+                      <div className="flex justify-between">
-                      <Phone className="h-4 w-4 mr-2" />
+                        <span className="text-slate-400">Monday - Friday:</span>
-                      Call 956-831-5164
+                        <span className="text-white">8:00 AM - 5:00 PM</span>
-                    </Button>
+                      </div>
-                    <Button variant="outline" className="border-slate-500/50 bg-slate-800/50 text-white hover:bg-slate-700/50 hover:border-slate-400">
+                      <div className="flex justify-between">
-                      <Mail className="h-4 w-4 mr-2" />
+                        <span className="text-slate-400">Saturday:</span>
-                      Send Email
+                        <span className="text-white">By Appointment</span>
-                    </Button>
+                      </div>
+                      <div className="flex justify-between">
+                        <span className="text-slate-400">Sunday:</span>
+                        <span className="text-white">Closed</span>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
+            </div>
+          </div>
+        </section>
 
-              {/* Response Time */}
+        {/* Contact Forms Section */}
-              <div className="mt-12 text-center">
+        <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">Get in Touch</h2>
+                <p className="text-slate-400 text-lg">
+                  Contact us for professional support or request a project quote
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                {/* Contact Form */}
+                <div className="bg-slate-800/50 border border-slate-600 rounded-2xl p-8 animate-fadeInUp">
+                  <div className="flex items-center space-x-3 mb-6">
+                    <Mail className="h-6 w-6 text-blue-400" />
+                    <h3 className="text-2xl font-bold text-white">General Contact</h3>
+                  </div>
+                  
+                  <form className="space-y-6">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <div>
+                        <label htmlFor="firstName" className="block text-sm font-medium text-slate-300 mb-2">
+                          First Name *
+                        </label>
+                        <input
+                          type="text"
+                          id="firstName"
+                          name="firstName"
+                          required
+                          className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+                          placeholder="John"
+                        />
+                      </div>
+                      <div>
+                        <label htmlFor="lastName" className="block text-sm font-medium text-slate-300 mb-2">
+                          Last Name *
+                        </label>
+                        <input
+                          type="text"
+                          id="lastName"
+                          name="lastName"
+                          required
+                          className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+                          placeholder="Doe"
+                        />
+                      </div>
+                    </div>
+
+                    <div>
+                      <label htmlFor="email" className="block text-sm font-medium text-slate-300 mb-2">
+                        Email Address *
+                      </label>
+                      <input
+                        type="email"
+                        id="email"
+                        name="email"
+                        required
+                        className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+                        placeholder="john@example.com"
+                      />
+                    </div>
+
+                    <div>
+                      <label htmlFor="phone" className="block text-sm font-medium text-slate-300 mb-2">
+                        Phone Number
+                      </label>
+                      <input
+                        type="tel"
+                        id="phone"
+                        name="phone"
+                        className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+                        placeholder="(555) 123-4567"
+                      />
+                    </div>
+
+                    <div>
+                      <label htmlFor="company" className="block text-sm font-medium text-slate-300 mb-2">
+                        Company
+                      </label>
+                      <input
+                        type="text"
+                        id="company"
+                        name="company"
+                        className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+                        placeholder="Your Company Name"
+                      />
+                    </div>
+
+                    <div>
+                      <label htmlFor="message" className="block text-sm font-medium text-slate-300 mb-2">
+                        Message *
+                      </label>
+                      <textarea
+                        id="message"
+                        name="message"
+                        rows={5}
+                        required
+                        className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors resize-none"
+                        placeholder="Tell us about your project or inquiry..."
+                      ></textarea>
+                    </div>
+
+                    <Button 
+                      type="submit" 
+                      className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors"
+                    >
+                      Send Message
+                      <Mail className="ml-2 h-4 w-4" />
+                    </Button>
+                  </form>
+                </div>
+
+                {/* Quote Request Form */}
+                <div className="bg-slate-800/50 border border-slate-600 rounded-2xl p-8 animate-fadeInUp" style={{animationDelay: '0.2s'}}>
+                  <div className="flex items-center space-x-3 mb-6">
+                    <FileText className="h-6 w-6 text-blue-400" />
+                    <h3 className="text-2xl font-bold text-white">Get a Quote</h3>
+                  </div>
+                  
+                  <form className="space-y-6">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <div>
+                        <label htmlFor="quoteName" className="block text-sm font-medium text-slate-300 mb-2">
+                          Contact Name *
+                        </label>
+                        <input
+                          type="text"
+                          id="quoteName"
+                          name="quoteName"
+                          required
+                          className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+                          placeholder="Your Name"
+                        />
+                      </div>
+                      <div>
+                        <label htmlFor="quoteEmail" className="block text-sm font-medium text-slate-300 mb-2">
+                          Email *
+                        </label>
+                        <input
+                          type="email"
+                          id="quoteEmail"
+                          name="quoteEmail"
+                          required
+                          className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+                          placeholder="your@email.com"
+                        />
+                      </div>
+                    </div>
+
+                    <div>
+                      <label htmlFor="projectType" className="block text-sm font-medium text-slate-300 mb-2">
+                        Project Type *
+                      </label>
+                      <select
+                        id="projectType"
+                        name="projectType"
+                        required
+                        className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+                      >
+                        <option value="">Select Project Type</option>
+                        <option value="structural">Structural Welding</option>
+                        <option value="pipe">Pipe Welding</option>
+                        <option value="fabrication">Custom Fabrication</option>
+                        <option value="onsite">On-Site Services</option>
+                        <option value="inspection">Quality Inspection</option>
+                        <option value="other">Other</option>
+                      </select>
+                    </div>
+
+                    <div>
+                      <label htmlFor="industry" className="block text-sm font-medium text-slate-300 mb-2">
+                        Industry
+                      </label>
+                      <select
+                        id="industry"
+                        name="industry"
+                        className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+                      >
+                        <option value="">Select Industry</option>
+                        <option value="oil-gas">Oil & Gas</option>
+                        <option value="manufacturing">Manufacturing</option>
+                        <option value="construction">Construction</option>
+                        <option value="energy">Energy Utilities</option>
+                        <option value="chemical">Chemical Processing</option>
+                        <option value="other">Other</option>
+                      </select>
+                    </div>
+
+                    <div>
+                      <label htmlFor="timeline" className="block text-sm font-medium text-slate-300 mb-2">
+                        Project Timeline
+                      </label>
+                      <select
+                        id="timeline"
+                        name="timeline"
+                        className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+                      >
+                        <option value="">Select Timeline</option>
+                        <option value="immediate">Immediate (Within 1 week)</option>
+                        <option value="soon">Soon (1-4 weeks)</option>
+                        <option value="month">Within a month</option>
+                        <option value="quarter">Within 3 months</option>
+                        <option value="future">Future planning</option>
+                      </select>
+                    </div>
+
+                    <div>
+                      <label htmlFor="projectDetails" className="block text-sm font-medium text-slate-300 mb-2">
+                        Project Details *
+                      </label>
+                      <textarea
+                        id="projectDetails"
+                        name="projectDetails"
+                        rows={4}
+                        required
+                        className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors resize-none"
+                        placeholder="Describe your project requirements, materials, specifications, location, etc."
+                      ></textarea>
+                    </div>
+
+                    <Button 
+                      type="submit" 
+                      className="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors"
+                    >
+                      Request Quote
+                      <ArrowRight className="ml-2 h-4 w-4" />
+                    </Button>
+                  </form>
+                </div>
+              </div>
+
+              {/* Response Time Info */}
+              <div className="mt-16 text-center animate-fadeInUp" style={{animationDelay: '0.4s'}}>
                 <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>
+                    <span className="text-white font-medium">Quick Response Guarantee</span>
                   </div>
                   <p className="text-slate-400">
-                    We typically respond to all inquiries within 48 hours during business hours.
+                    We respond to all inquiries within 48 hours during business hours. 
-                    For urgent matters, please call us directly.
+                    Quote requests typically receive responses within 24 hours.
                   </p>
                 </div>
               </div>

src/pages/Index.tsx

@@ -4,8 +4,11 @@ import Footer from '@/components/Footer';
 import Hero from '@/components/Hero';
 import CompanyBlurb from '@/components/CompanyBlurb';
 import LogoSection from '@/components/LogoSection';
+import { useScrollAnimation } from '@/hooks/useScrollAnimation';
 
 const Index = () => {
+  useScrollAnimation();
+  
   return (
     <div className="min-h-screen bg-background">
       <Header />

src/pages/Legal.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import { Scale, FileText, Shield } from 'lucide-react';
+
+const Legal = () => {
+  return (
+    <div className="min-h-screen bg-slate-900">
+      <Header />
+      <main>
+        {/* Hero Section */}
+        <section className="relative py-32 overflow-hidden">
+          <div className="absolute inset-0 opacity-30">
+            <div className="absolute top-20 right-20 w-96 h-96 bg-blue-400/20 rounded-full blur-3xl"></div>
+            <div className="absolute bottom-20 left-20 w-64 h-64 bg-cyan-400/15 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">
+                Legal
+                <span className="text-blue-400"> Center</span>
+              </h1>
+              <p className="text-xl text-slate-300 leading-relaxed">
+                Legal information and compliance resources for IIT Welding services.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Legal Content */}
+        <section className="py-24 bg-slate-800">
+          <div className="container mx-auto px-4">
+            <div className="max-w-4xl 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">
+                  <Scale className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-2">Terms of Service</h3>
+                  <p className="text-slate-400 mb-4">Our terms and conditions for service agreements</p>
+                  <a href="/terms" className="text-blue-400 hover:text-blue-300 transition-colors">
+                    View Terms →
+                  </a>
+                </div>
+                
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8 text-center">
+                  <Shield className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-2">Privacy Policy</h3>
+                  <p className="text-slate-400 mb-4">How we protect and handle your personal information</p>
+                  <a href="/privacy" className="text-blue-400 hover:text-blue-300 transition-colors">
+                    View Policy →
+                  </a>
+                </div>
+                
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8 text-center">
+                  <FileText className="h-12 w-12 text-blue-400 mx-auto mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-2">Compliance</h3>
+                  <p className="text-slate-400 mb-4">Industry certifications and regulatory compliance</p>
+                  <a href="/about-us" className="text-blue-400 hover:text-blue-300 transition-colors">
+                    Learn More →
+                  </a>
+                </div>
+              </div>
+
+              <div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
+                <h2 className="text-2xl font-bold text-white mb-6">Legal Notice</h2>
+                <div className="space-y-4 text-slate-300">
+                  <p>
+                    IIT Welding operates in compliance with all applicable federal, state, and local regulations 
+                    governing welding and fabrication services.
+                  </p>
+                  <p>
+                    Our services are provided under the terms and conditions outlined in our service agreements. 
+                    All work is performed by certified professionals in accordance with industry standards.
+                  </p>
+                  <p>
+                    For specific legal inquiries or contract negotiations, please contact our legal department 
+                    through our main office.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default Legal;

src/pages/Locations.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
-import { MapPin, Phone, Mail, Printer, Building, User } from 'lucide-react';
+import { MapPin, Phone, Mail, Printer, Building, User, ChevronRight } from 'lucide-react';
 
 const Locations = () => {
   const locations = [
@@ -36,15 +36,31 @@ const Locations = () => {
   return (
     <div className="min-h-screen bg-slate-900">
       <Header />
+      
+      {/* Breadcrumbs */}
+      <nav className="bg-slate-800 border-b border-slate-700 py-3">
+        <div className="container mx-auto px-4">
+          <div className="flex items-center space-x-2 text-sm">
+            <button 
+              onClick={() => window.location.href = '/'}
+              className="text-slate-400 hover:text-white transition-colors"
+            >
+              Home
+            </button>
+            <ChevronRight className="h-4 w-4 text-slate-500" />
+            <span className="text-white font-medium">Locations</span>
+          </div>
+        </div>
+      </nav>
+      
       <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)' }}
+            style={{ backgroundImage: 'url(/hero-subpage.png)' }}
           >
-            <div className="absolute inset-0 bg-slate-900/80"></div>
           </div>
 
           {/* Geometric Elements */}
@@ -70,61 +86,138 @@ const Locations = () => {
         {/* 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="max-w-7xl mx-auto space-y-16">
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+              {/* South Texas Office */}
-                {locations.map((location, index) => (
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
-                  <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="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">
+                  <div className="space-y-6">
-                      {/* Header */}
+                    {/* Header */}
-                      <div className="flex items-start space-x-4">
+                    <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">
+                      <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" />
+                        <Building className="h-8 w-8 text-white" />
+                      </div>
+                      <div>
+                        <h3 className="text-2xl font-bold text-white mb-2">South Texas Office & Fabrication Shop</h3>
+                        <div className="bg-blue-500/20 rounded-lg px-3 py-1 inline-block">
+                          <span className="text-blue-400 text-sm font-medium">Primary 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>
-                          <h3 className="text-2xl font-bold text-white mb-2">{location.name}</h3>
+                          <p className="text-white font-medium">7748 Padre Island Hwy</p>
-                          <div className="bg-blue-500/20 rounded-lg px-3 py-1 inline-block">
+                          <p className="text-slate-300">Brownsville, Texas 78521</p>
-                            <span className="text-blue-400 text-sm font-medium capitalize">{location.type} Location</span>
+                          <p className="text-slate-400 text-sm italic mt-1">(Next to Mariscos de la Rosa Restaurant)</p>
-                          </div>
+                        </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:956-831-5164" className="text-white hover:text-blue-400 transition-colors">
+                            956-831-5164
+                          </a>
                         </div>
                       </div>
 
-                      {/* Address */}
+                      <div className="flex items-center space-x-3">
-                      <div className="space-y-2">
+                        <Printer className="h-5 w-5 text-blue-400" />
-                        <div className="flex items-start space-x-3">
+                        <div>
-                          <MapPin className="h-5 w-5 text-blue-400 flex-shrink-0 mt-1" />
+                          <span className="text-slate-400 text-sm">Fax: </span>
-                          <div>
+                          <span className="text-white">956-831-5265</span>
-                            <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>
+
+                {/* South Texas Map */}
+                <div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-2 overflow-hidden">
+                  <iframe
+                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3583.2847689234647!2d-97.39826948450866!3d25.975238583630243!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x866fb43ca7a4e4a7%3A0x6b8b8b8b8b8b8b8b!2s7748%20Padre%20Island%20Hwy%2C%20Brownsville%2C%20TX%2078521%2C%20USA!5e0!3m2!1sen!2sde!4v1652901234567!5m2!1sen!2sde"
+                    width="100%"
+                    height="300"
+                    style={{ border: 0, borderRadius: '12px' }}
+                    allowFullScreen={true}
+                    loading="lazy"
+                    referrerPolicy="no-referrer-when-downgrade"
+                    title="South Texas Office - Brownsville Location"
+                  ></iframe>
+                </div>
+              </div>
+
+              {/* Corporate Office */}
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+                <div 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">Corporate Office</h3>
+                        <div className="bg-blue-500/20 rounded-lg px-3 py-1 inline-block">
+                          <span className="text-blue-400 text-sm font-medium">Corporate 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">P.O. Box 23036</p>
+                          <p className="text-slate-300">Corpus Christi, Texas 78403</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:361-883-8999" className="text-white hover:text-blue-400 transition-colors">
+                            361-883-8999
+                          </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">361-884-1984</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Corporate Office Map */}
+                <div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-2 overflow-hidden">
+                  <iframe
+                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d55344.51518451891!2d-97.43946!3d27.8005828!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8669006cfe7db7dd%3A0x84c9c6ee8e77af6c!2sCorpus%20Christi%2C%20TX%2078403%2C%20USA!5e0!3m2!1sen!2sde!4v1652901234568!5m2!1sen!2sde"
+                    width="100%"
+                    height="300"
+                    style={{ border: 0, borderRadius: '12px' }}
+                    allowFullScreen={true}
+                    loading="lazy"
+                    referrerPolicy="no-referrer-when-downgrade"
+                    title="Corporate Office - Corpus Christi Location"
+                  ></iframe>
+                </div>
               </div>
             </div>
           </div>

src/pages/Privacy.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import { Shield, Lock, Eye, Database } from 'lucide-react';
+
+const Privacy = () => {
+  return (
+    <div className="min-h-screen bg-slate-900">
+      <Header />
+      <main>
+        {/* Hero Section */}
+        <section className="relative py-32 overflow-hidden">
+          <div className="absolute inset-0 opacity-30">
+            <div className="absolute top-20 right-20 w-96 h-96 bg-blue-400/20 rounded-full blur-3xl"></div>
+            <div className="absolute bottom-20 left-20 w-64 h-64 bg-cyan-400/15 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">
+                Privacy
+                <span className="text-blue-400"> Policy</span>
+              </h1>
+              <p className="text-xl text-slate-300 leading-relaxed">
+                How we collect, use, and protect your personal information.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Privacy Content */}
+        <section className="py-24 bg-slate-800">
+          <div className="container mx-auto px-4">
+            <div className="max-w-4xl mx-auto">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
+                  <Lock className="h-8 w-8 text-blue-400 mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-4">Data Protection</h3>
+                  <p className="text-slate-400">
+                    We use industry-standard encryption and security measures to protect your personal information.
+                  </p>
+                </div>
+                
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
+                  <Eye className="h-8 w-8 text-blue-400 mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-4">Transparency</h3>
+                  <p className="text-slate-400">
+                    We are transparent about what data we collect and how we use it for our services.
+                  </p>
+                </div>
+              </div>
+
+              <div className="space-y-8">
+                <div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
+                  <h2 className="text-2xl font-bold text-white mb-6">Information We Collect</h2>
+                  <div className="space-y-4 text-slate-300">
+                    <p>
+                      <strong>Contact Information:</strong> When you contact us for services, we collect your name, 
+                      email address, phone number, and company information.
+                    </p>
+                    <p>
+                      <strong>Project Details:</strong> Information about your welding and fabrication requirements 
+                      to provide accurate quotes and services.
+                    </p>
+                    <p>
+                      <strong>Website Usage:</strong> We may collect anonymous usage data to improve our website 
+                      and services.
+                    </p>
+                  </div>
+                </div>
+
+                <div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
+                  <h2 className="text-2xl font-bold text-white mb-6">How We Use Your Information</h2>
+                  <div className="space-y-4 text-slate-300">
+                    <p>
+                      • Provide welding and fabrication services<br/>
+                      • Communicate about projects and quotes<br/>
+                      • Improve our services and customer experience<br/>
+                      • Comply with legal and regulatory requirements
+                    </p>
+                  </div>
+                </div>
+
+                <div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
+                  <h2 className="text-2xl font-bold text-white mb-6">Contact Us</h2>
+                  <p className="text-slate-300">
+                    If you have questions about this Privacy Policy, please contact us at:
+                  </p>
+                  <div className="mt-4 text-slate-300">
+                    <p>Email: iit.avasquez@sbcglobal.net</p>
+                    <p>Phone: 956-831-5164</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default Privacy;

src/pages/Services.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
-import { Wrench, Settings, Shield, Award, Users, CheckCircle } from 'lucide-react';
+import { Wrench, Settings, Shield, Award, Users, CheckCircle, ChevronRight } from 'lucide-react';
 
 const Services = () => {
   const services = [
@@ -28,15 +28,31 @@ const Services = () => {
   return (
     <div className="min-h-screen bg-slate-900">
       <Header />
+      
+      {/* Breadcrumbs */}
+      <nav className="bg-slate-800 border-b border-slate-700 py-3">
+        <div className="container mx-auto px-4">
+          <div className="flex items-center space-x-2 text-sm">
+            <button 
+              onClick={() => window.location.href = '/'}
+              className="text-slate-400 hover:text-white transition-colors"
+            >
+              Home
+            </button>
+            <ChevronRight className="h-4 w-4 text-slate-500" />
+            <span className="text-white font-medium">Services & Specialties</span>
+          </div>
+        </div>
+      </nav>
+      
       <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_2.png)' }}
+            style={{ backgroundImage: 'url(/hero_subpage.png)' }}
           >
-            <div className="absolute inset-0 bg-slate-900/80"></div>
           </div>
 
           {/* Geometric Elements */}

src/pages/Terms.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import { FileText, CheckCircle, AlertTriangle, Clock } from 'lucide-react';
+
+const Terms = () => {
+  return (
+    <div className="min-h-screen bg-slate-900">
+      <Header />
+      <main>
+        {/* Hero Section */}
+        <section className="relative py-32 overflow-hidden">
+          <div className="absolute inset-0 opacity-30">
+            <div className="absolute top-20 right-20 w-96 h-96 bg-blue-400/20 rounded-full blur-3xl"></div>
+            <div className="absolute bottom-20 left-20 w-64 h-64 bg-cyan-400/15 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">
+                Terms of
+                <span className="text-blue-400"> Service</span>
+              </h1>
+              <p className="text-xl text-slate-300 leading-relaxed">
+                Terms and conditions for IIT Welding services and agreements.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Terms Content */}
+        <section className="py-24 bg-slate-800">
+          <div className="container mx-auto px-4">
+            <div className="max-w-4xl mx-auto">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
+                  <CheckCircle className="h-8 w-8 text-green-400 mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-4">Service Agreement</h3>
+                  <p className="text-slate-400">
+                    All welding services are provided under formal service agreements with clear terms.
+                  </p>
+                </div>
+                
+                <div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
+                  <Clock className="h-8 w-8 text-blue-400 mb-4" />
+                  <h3 className="text-xl font-bold text-white mb-4">Project Timeline</h3>
+                  <p className="text-slate-400">
+                    Timelines are established based on project scope and agreed upon before work begins.
+                  </p>
+                </div>
+              </div>
+
+              <div className="space-y-8">
+                <div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
+                  <h2 className="text-2xl font-bold text-white mb-6">Service Terms</h2>
+                  <div className="space-y-4 text-slate-300">
+                    <p>
+                      <strong>1. Service Provision:</strong> IIT Welding provides professional welding and 
+                      fabrication services in accordance with industry standards and applicable regulations.
+                    </p>
+                    <p>
+                      <strong>2. Quality Assurance:</strong> All work is performed by certified welders and 
+                      subject to quality control inspections.
+                    </p>
+                    <p>
+                      <strong>3. Safety Compliance:</strong> All operations comply with OSHA and industry 
+                      safety standards.
+                    </p>
+                    <p>
+                      <strong>4. Project Specifications:</strong> Work is performed according to agreed-upon 
+                      specifications and industry standards.
+                    </p>
+                  </div>
+                </div>
+
+                <div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
+                  <h2 className="text-2xl font-bold text-white mb-6">Payment Terms</h2>
+                  <div className="space-y-4 text-slate-300">
+                    <p>
+                      • Payment terms are established in individual service agreements<br/>
+                      • Invoices are due within agreed-upon timeframes<br/>
+                      • Progress payments may be required for large projects<br/>
+                      • Final payment is due upon project completion and acceptance
+                    </p>
+                  </div>
+                </div>
+
+                <div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
+                  <h2 className="text-2xl font-bold text-white mb-6">Liability and Insurance</h2>
+                  <div className="space-y-4 text-slate-300">
+                    <p>
+                      IIT Welding maintains comprehensive general liability and professional liability insurance. 
+                      Specific liability terms are outlined in individual service agreements.
+                    </p>
+                  </div>
+                </div>
+
+                <div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
+                  <h2 className="text-2xl font-bold text-white mb-6">Contact for Agreements</h2>
+                  <p className="text-slate-300">
+                    For specific terms and service agreements, please contact us:
+                  </p>
+                  <div className="mt-4 text-slate-300">
+                    <p>Arturo Vasquez, Operations Manager</p>
+                    <p>Email: iit.avasquez@sbcglobal.net</p>
+                    <p>Phone: 956-831-5164</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default Terms;