Fertig

src/components/About.tsx

@@ -44,7 +44,7 @@ const About = () => {
   ];
 
   return (
-    <section id="about" className="jagged-divider-top py-40 bg-background dark-section">
+    <section id="about" className="jagged-divider-top jagged-divider-bottom py-40 bg-background dark-section">
       <div 
         className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 parallax-element"
         style={{ transform: `translateY(${scrollY * 0.05}px)` }}
@@ -66,11 +66,10 @@ const About = () => {
             <div>
               <h3 className="text-2xl font-bold text-white mb-4 drop-shadow-md">Our Mission</h3>
               <p className="text-gray-200 leading-relaxed drop-shadow-sm">
-                At NQS Inspection Ltd, we are dedicated to providing exceptional non-destructive 
+                At NQS Inspection, Ltd. it is our mission to obtain state of the art procedures and proven NDE techniques 
-                testing and industrial inspection services that ensure the safety, reliability, 
+                in order to present the best possible results along with the highest reliability, accuracy, and integrity. 
-                and integrity of critical infrastructure. Our certified professionals utilize 
+                Assuring our customers that their plant structures and components possess the height of integrity required 
-                state-of-the-art technology and proven methodologies to deliver accurate, 
+                by their engineer's, their codes, and their environment.
-                actionable insights that help our clients maintain operational excellence.
               </p>
             </div>
 

src/components/Contact.tsx

@@ -24,32 +24,44 @@ const Contact = () => {
   const contactInfo = [
     {
       icon: Phone,
-      title: "Emergency Line",
+      title: "Phone",
-      details: "+1 (555) 123-4567",
+      details: "(361) 438-6807",
-      subtitle: "Available 24/7 for urgent inspections"
+      subtitle: "Main business line"
+    },
+    {
+      icon: Phone,
+      title: "Additional Phone",
+      details: "(760) 908-2269",
+      subtitle: "Alternative contact"
     },
     {
       icon: Mail,
       title: "Email",
-      details: "info@nqsinspection.com",
+      details: "shugger@nqsltd.com",
-      subtitle: "Response within 24 hours"
+      subtitle: "Primary contact email"
+    },
+    {
+      icon: Mail,
+      title: "General Inquiries",
+      details: "tward@nqsltd.com",
+      subtitle: "General inquiries email"
     },
     {
       icon: MapPin,
       title: "Location",
-      details: "Corpus Christi, Texas",
+      details: "1906 Suntide Rd, Corpus Christi, TX 78409",
-      subtitle: "Serving all of Texas"
+      subtitle: "Our office location"
     },
     {
       icon: Clock,
       title: "Business Hours",
-      details: "Mon-Fri: 7:00 AM - 6:00 PM",
+      details: "Monday – Friday: 8AM – 4PM",
-      subtitle: "Emergency services available 24/7"
+      subtitle: "Saturday: By Appointment Only, Sunday: Closed"
     }
   ];
 
   return (
-    <section id="contact" className="light-section jagged-divider-light-top pt-16 pb-64">
+    <section id="contact" className="light-section pt-16 pb-64">
       <div 
         className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 parallax-element"
         style={{ transform: `translateY(${scrollY * 0.05}px)` }}
@@ -90,10 +102,10 @@ const Contact = () => {
                           <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                             <IconComponent className="w-5 h-5 text-primary" />
                           </div>
-                          <div>
+                          <div className="min-w-0 flex-1">
                             <h4 className="font-semibold text-foreground mb-1">{info.title}</h4>
-                            <p className="text-primary font-medium mb-1">{info.details}</p>
+                            <p className="text-primary font-medium mb-1 break-words">{info.details}</p>
-                            <p className="text-sm text-muted-foreground">{info.subtitle}</p>
+                            <p className="text-sm text-muted-foreground break-words">{info.subtitle}</p>
                           </div>
                         </div>
                       </CardContent>
@@ -140,7 +152,7 @@ const Contact = () => {
                     <Label htmlFor="firstName" className="text-foreground">First Name</Label>
                     <Input 
                       id="firstName" 
-                      className="bg-background border-border focus:border-primary"
+                      className="bg-white text-black border-gray-300 focus:border-primary"
                       placeholder="John"
                     />
                   </div>
@@ -148,7 +160,7 @@ const Contact = () => {
                     <Label htmlFor="lastName" className="text-foreground">Last Name</Label>
                     <Input 
                       id="lastName" 
-                      className="bg-background border-border focus:border-primary"
+                      className="bg-white text-black border-gray-300 focus:border-primary"
                       placeholder="Doe"
                     />
                   </div>
@@ -159,7 +171,7 @@ const Contact = () => {
                   <Input 
                     id="email" 
                     type="email" 
-                    className="bg-background border-border focus:border-primary"
+                    className="bg-white text-black border-gray-300 focus:border-primary"
                     placeholder="john.doe@company.com"
                   />
                 </div>
@@ -169,7 +181,7 @@ const Contact = () => {
                   <Input 
                     id="phone" 
                     type="tel" 
-                    className="bg-background border-border focus:border-primary"
+                    className="bg-white text-black border-gray-300 focus:border-primary"
                     placeholder="+1 (555) 123-4567"
                   />
                 </div>
@@ -178,7 +190,7 @@ const Contact = () => {
                   <Label htmlFor="service" className="text-foreground">Service Required</Label>
                   <Input 
                     id="service" 
-                    className="bg-background border-border focus:border-primary"
+                    className="bg-white text-black border-gray-300 focus:border-primary"
                     placeholder="e.g., Pipeline Inspection, Welding Testing"
                   />
                 </div>
@@ -187,7 +199,7 @@ const Contact = () => {
                   <Label htmlFor="message" className="text-foreground">Project Details</Label>
                   <Textarea 
                     id="message" 
-                    className="bg-background border-border focus:border-primary min-h-[100px]"
+                    className="bg-white text-black border-gray-300 focus:border-primary min-h-[100px]"
                     placeholder="Please describe your inspection requirements, timeline, and any specific standards or certifications needed..."
                   />
                 </div>

src/components/Footer.tsx

@@ -46,16 +46,24 @@ const Footer = () => {
               {/* Contact Info */}
               <div className="space-y-3">
                 <div className="flex items-center space-x-3">
-                  <Phone className="w-4 h-4 text-primary" />
+                  <Phone className="w-4 h-4 text-primary flex-shrink-0" />
-                  <span className="text-white font-medium drop-shadow-sm">+1 (555) 123-4567</span>
+                  <span className="text-white font-medium drop-shadow-sm break-words">(361) 438-6807</span>
                 </div>
                 <div className="flex items-center space-x-3">
-                  <Mail className="w-4 h-4 text-primary" />
+                  <Phone className="w-4 h-4 text-primary flex-shrink-0" />
-                  <span className="text-white drop-shadow-sm">info@nqsinspection.com</span>
+                  <span className="text-white font-medium drop-shadow-sm break-words">(760) 908-2269</span>
                 </div>
                 <div className="flex items-center space-x-3">
-                  <MapPin className="w-4 h-4 text-primary" />
+                  <Mail className="w-4 h-4 text-primary flex-shrink-0" />
-                  <span className="text-white drop-shadow-sm">Corpus Christi, Texas</span>
+                  <span className="text-white drop-shadow-sm break-words">shugger@nqsltd.com</span>
+                </div>
+                <div className="flex items-center space-x-3">
+                  <Mail className="w-4 h-4 text-primary flex-shrink-0" />
+                  <span className="text-white drop-shadow-sm break-words">tward@nqsltd.com</span>
+                </div>
+                <div className="flex items-center space-x-3">
+                  <MapPin className="w-4 h-4 text-primary flex-shrink-0" />
+                  <span className="text-white drop-shadow-sm break-words">1906 Suntide Rd, Corpus Christi, TX 78409</span>
                 </div>
               </div>
             </div>
@@ -101,6 +109,9 @@ const Footer = () => {
             {/* Copyright */}
             <div className="text-gray-300 text-sm drop-shadow-sm">
               © 2024 NQS Inspection Ltd. All rights reserved.
+              <div className="mt-2 text-xs break-words">
+                1906 Suntide Rd, Corpus Christi TX | (361) 438-6807 | shugger@nqsltd.com
+              </div>
             </div>
 
             {/* Emergency Badge */}

src/components/Hero.tsx

@@ -24,8 +24,8 @@ const Hero = () => {
         }}
       />
       
-      {/* Hero Overlay - Enhanced for better contrast */}
+      {/* Hero Overlay - Reduced filter */}
-      <div className="absolute inset-0 z-10 bg-gradient-to-b from-black/90 via-black/80 to-black/95" />
+      <div className="absolute inset-0 z-10 bg-gradient-to-b from-black/60 via-black/50 to-black/70" />
       
       {/* Content */}
       <div className="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
@@ -38,29 +38,28 @@ const Hero = () => {
 
           {/* Main Headline */}
           <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight drop-shadow-lg">
-            Premier Industrial 
+            Quality - Safety - 
-            <span className="block text-glow">Inspection</span>
+            <span className="block text-glow">Reliability</span>
           </h1>
 
           {/* Subheadline */}
           <p className="text-xl md:text-2xl text-gray-200 mb-8 max-w-2xl mx-auto leading-relaxed drop-shadow-md">
-            Professional non-destructive testing and pipeline integrity services across Texas.
+            Starts With You
           </p>
 
           {/* CTA Buttons */}
           <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
             <Button size="lg" className="btn-orange-glow text-lg px-8 py-4 shadow-2xl">
-              Schedule Inspection
+              Learn More
               <ArrowRight className="w-5 h-5 ml-2" />
             </Button>
-            <Button 
+          </div>
-              variant="outline" 
+
-              size="lg" 
+          {/* Technology Description */}
-              className="text-lg px-8 py-4 border-white/30 text-white hover:bg-white/10 backdrop-blur-sm"
+          <div className="max-w-4xl mx-auto mb-12">
-            >
+            <p className="text-lg text-gray-200 leading-relaxed drop-shadow-md">
-              <Clock className="w-5 h-5 mr-2" />
+              We leverage the latest in technology and techniques to obtain the ground truth of the components inspected.
-              24/7 Emergency
+            </p>
-            </Button>
           </div>
 
           {/* Trust Indicators with Organic Shape */}

src/components/Navigation.tsx

@@ -1,9 +1,33 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Menu, X, Phone } from "lucide-react";
+import { useLocation, useNavigate } from "react-router-dom";
 
 const Navigation = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const handleContactClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    // If we're already on the home page, just scroll to contact section
+    if (location.pathname === '/') {
+      const contactSection = document.getElementById('contact');
+      if (contactSection) {
+        contactSection.scrollIntoView({ behavior: 'smooth' });
+      }
+    } else {
+      // Navigate to home page and then scroll to contact section
+      navigate('/');
+      // Use setTimeout to ensure the page has loaded before scrolling
+      setTimeout(() => {
+        const contactSection = document.getElementById('contact');
+        if (contactSection) {
+          contactSection.scrollIntoView({ behavior: 'smooth' });
+        }
+      }, 100);
+    }
+  };
 
   const navItems = [
     { name: "Home", href: "/" },
@@ -31,6 +55,7 @@ const Navigation = () => {
                 <a
                   key={item.name}
                   href={item.href}
+                  onClick={item.name === 'Contact' ? handleContactClick : undefined}
                   className="text-muted-foreground hover:text-primary transition-colors duration-200 font-medium"
                 >
                   {item.name}
@@ -41,7 +66,7 @@ const Navigation = () => {
 
           {/* CTA Button */}
           <div className="hidden md:block">
-            <Button className="btn-orange-glow">
+            <Button onClick={handleContactClick} className="btn-orange-glow">
               <Phone className="w-4 h-4 mr-2" />
               Emergency Support
             </Button>
@@ -69,13 +94,13 @@ const Navigation = () => {
                   key={item.name}
                   href={item.href}
                   className="block px-3 py-2 text-muted-foreground hover:text-primary transition-colors duration-200"
-                  onClick={() => setIsOpen(false)}
+                  onClick={item.name === 'Contact' ? (e) => { handleContactClick(e); setIsOpen(false); } : () => setIsOpen(false)}
                 >
                   {item.name}
                 </a>
               ))}
               <div className="pt-2">
-                <Button className="btn-orange-glow w-full">
+                <Button onClick={(e) => { handleContactClick(e); setIsOpen(false); }} className="btn-orange-glow w-full">
                   <Phone className="w-4 h-4 mr-2" />
                   Emergency Support
                 </Button>

src/index.css

@@ -252,27 +252,26 @@ All colors MUST be HSL.
     clip-path: polygon(0 0, 12% 30%, 25% 10%, 38% 40%, 50% 20%, 62% 45%, 75% 25%, 88% 35%, 100% 15%, 100% 0);
     z-index: 10;
     border: none;
-    filter: drop-shadow(0 -8px 16px rgba(0, 0, 0, 0.3));
   }
 
   .jagged-divider-bottom {
     position: relative;
+    overflow: hidden;
   }
 
   .jagged-divider-bottom::after {
     content: '';
     position: absolute;
-    bottom: -2px;
+    bottom: 0;
-    left: -1px;
+    left: 0;
-    right: -1px;
+    right: 0;
-    width: calc(100% + 2px);
+    width: 100%;
-    height: 122px;
+    height: 100px;
     background: white;
     clip-path: polygon(0 100%, 12% 70%, 25% 90%, 38% 60%, 50% 80%, 62% 55%, 75% 75%, 88% 65%, 100% 85%, 100% 100%);
     z-index: 10;
-    border: none;
+    transform: translateZ(0);
-    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
+    will-change: transform;
-    outline: none;
   }
 
   .jagged-divider-light-top {

src/pages/EmployeeNotice.tsx

@@ -20,15 +20,29 @@ const EmployeeNotice = () => {
       
       {/* Hero Section */}
       <section className="relative py-24 bg-background dark-section jagged-divider-bottom">
+        {/* Background Image with Parallax */}
         <div 
-          className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 parallax-element"
+          className="absolute inset-0 z-0 parallax-element"
+          style={{
+            backgroundImage: `url('/lovable-uploads/abstract.png')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            transform: `translateY(${scrollY * 0.1}px)`,
+          }}
+        />
+        
+        {/* Hero Overlay */}
+        <div className="absolute inset-0 z-10 bg-gradient-to-b from-black/60 via-black/50 to-black/70" />
+        
+        <div 
+          className="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 parallax-element"
           style={{ transform: `translateY(${scrollY * 0.1}px)` }}
         >
           <div className="text-center mb-16">
-            <h1 className="text-4xl md:text-6xl font-bold text-white mb-6">
+            <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 drop-shadow-lg">
               Employee <span className="text-glow">Notices</span>
             </h1>
-            <p className="text-xl text-gray-200 max-w-3xl mx-auto leading-relaxed">
+            <p className="text-xl text-gray-200 max-w-3xl mx-auto leading-relaxed drop-shadow-md">
               Important information and updates for NQS Inspection Ltd employees
             </p>
           </div>

src/pages/Index.tsx

@@ -4,6 +4,9 @@ import Services from "@/components/Services";
 import About from "@/components/About";
 import Contact from "@/components/Contact";
 import Footer from "@/components/Footer";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Mail } from "lucide-react";
 
 const Index = () => {
   return (
@@ -13,6 +16,33 @@ const Index = () => {
       <Services />
       <About />
       <Contact />
+      
+      {/* Subscribe Section */}
+      <section className="py-24 bg-background dark-section">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <div className="bg-black/80 backdrop-blur-sm rounded-3xl p-12 border-2 border-primary/30 shadow-2xl">
+            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
+              <span className="text-glow">Subscribe</span>
+            </h2>
+            <p className="text-xl text-gray-200 mb-8 max-w-2xl mx-auto">
+              Sign up with your email address to receive news and updates.
+            </p>
+            
+            <div className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
+              <Input 
+                type="email" 
+                placeholder="Email Address" 
+                className="flex-1 h-12 bg-white/10 border-white/20 text-white placeholder:text-gray-300 focus:border-primary text-lg"
+              />
+              <Button className="btn-orange-glow h-12 px-8 text-lg">
+                <Mail className="w-5 h-5 mr-2" />
+                Sign Up
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+      
       <Footer />
     </div>
   );

src/pages/Methods.tsx

@@ -70,15 +70,29 @@ const Methods = () => {
       <Navigation />
       {/* Hero Section */}
       <section className="relative py-24 bg-background dark-section jagged-divider-bottom">
+        {/* Background Image with Parallax */}
         <div 
-          className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 parallax-element"
+          className="absolute inset-0 z-0 parallax-element"
+          style={{
+            backgroundImage: `url('/lovable-uploads/abstract.png')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            transform: `translateY(${scrollY * 0.1}px)`,
+          }}
+        />
+        
+        {/* Hero Overlay */}
+        <div className="absolute inset-0 z-10 bg-gradient-to-b from-black/60 via-black/50 to-black/70" />
+        
+        <div 
+          className="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 parallax-element"
           style={{ transform: `translateY(${scrollY * 0.1}px)` }}
         >
           <div className="text-center mb-16">
-            <h1 className="text-4xl md:text-6xl font-bold text-white mb-6">
+            <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 drop-shadow-lg">
               Our <span className="text-glow">Methods</span>
             </h1>
-            <p className="text-xl text-gray-200 max-w-3xl mx-auto leading-relaxed">
+            <p className="text-xl text-gray-200 max-w-3xl mx-auto leading-relaxed drop-shadow-md">
               Advanced NDT technologies and proven inspection methods delivering precise, 
               reliable results for critical infrastructure across diverse industries.
             </p>
@@ -133,7 +147,7 @@ const Methods = () => {
       </section>
 
       {/* Current Services Section */}
-      <section className="py-24 bg-background dark-section">
+      <section className="jagged-divider-top py-24 bg-background dark-section">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
             <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">

src/pages/WhatWeDo.tsx

@@ -74,15 +74,29 @@ const WhatWeDo = () => {
       <Navigation />
       {/* Hero Section */}
       <section className="relative py-24 bg-background dark-section jagged-divider-bottom">
+        {/* Background Image with Parallax */}
         <div 
-          className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 parallax-element"
+          className="absolute inset-0 z-0 parallax-element"
+          style={{
+            backgroundImage: `url('/lovable-uploads/abstract.png')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            transform: `translateY(${scrollY * 0.1}px)`,
+          }}
+        />
+        
+        {/* Hero Overlay */}
+        <div className="absolute inset-0 z-10 bg-gradient-to-b from-black/60 via-black/50 to-black/70" />
+        
+        <div 
+          className="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 parallax-element"
           style={{ transform: `translateY(${scrollY * 0.1}px)` }}
         >
           <div className="text-center mb-16">
-            <h1 className="text-4xl md:text-6xl font-bold text-white mb-6">
+            <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 drop-shadow-lg">
               What We <span className="text-glow">Do</span>
             </h1>
-            <p className="text-xl text-gray-200 max-w-3xl mx-auto leading-relaxed">
+            <p className="text-xl text-gray-200 max-w-3xl mx-auto leading-relaxed drop-shadow-md">
               Since 2005, we have provided NDE expertise to our clients in Petro/Chem and Power Generation. 
               We bring unmatched quality at the most competitive pricing.
             </p>
@@ -122,7 +136,7 @@ const WhatWeDo = () => {
       </section>
 
       {/* Achievements Section */}
-      <section className="py-24 bg-background dark-section">
+      <section className="jagged-divider-top py-24 bg-background dark-section">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
             <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">