Jagged-divider

.dockerignore

@@ -0,0 +1,15 @@
+node_modules
+npm-debug.log*
+.git
+.gitignore
+README.md
+Dockerfile
+docker-compose.yml
+.dockerignore
+dist
+.vite
+coverage
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

.env.example

@@ -0,0 +1,17 @@
+# Environment Configuration Example
+# Copy this file to .env and update the values as needed
+
+# Application Environment
+NODE_ENV=development
+
+# Vite Configuration
+VITE_APP_TITLE=NQS Ltd
+VITE_APP_URL=http://localhost:8080
+
+# API Configuration (if needed)
+# VITE_API_BASE_URL=http://localhost:3000/api
+# VITE_API_KEY=your-api-key-here
+
+# External Services (examples - uncomment and configure as needed)
+# VITE_GOOGLE_ANALYTICS_ID=GA-XXXXXXXXX
+# VITE_SENTRY_DSN=https://your-sentry-dsn

Dockerfile

@@ -0,0 +1,23 @@
+# Use Node.js 18 Alpine as base image
+FROM node:18-alpine
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy source code
+COPY . .
+
+# Expose the development port (Vite default)
+EXPOSE 8080
+
+# Set environment to development
+ENV NODE_ENV=development
+
+# Command to run the development server
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

docker-compose.yml

@@ -0,0 +1,15 @@
+version: '3.8'
+
+services:
+  app:
+    build: .
+    ports:
+      - "8080:8080"
+    volumes:
+      - .:/app
+      - /app/node_modules
+    environment:
+      - NODE_ENV=development
+    stdin_open: true
+    tty: true
+    command: npm run dev -- --host 0.0.0.0

package.json

@@ -8,7 +8,12 @@
     "build": "vite build",
     "build:dev": "vite build --mode development",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "docker:build": "docker build -t nqsltd-app .",
+    "docker:run": "docker run -p 8080:8080 nqsltd-app",
+    "docker:dev": "docker-compose up",
+    "docker:dev:build": "docker-compose up --build",
+    "docker:down": "docker-compose down"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.10.0",

src/App.tsx

@@ -4,6 +4,9 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
+import WhatWeDo from "./pages/WhatWeDo";
+import Methods from "./pages/Methods";
+import EmployeeNotice from "./pages/EmployeeNotice";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
@@ -16,6 +19,9 @@ const App = () => (
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Index />} />
+          <Route path="/what-we-do" element={<WhatWeDo />} />
+          <Route path="/methods" element={<Methods />} />
+          <Route path="/employee-notice" element={<EmployeeNotice />} />
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
         </Routes>

src/components/About.tsx

@@ -44,17 +44,17 @@ const About = () => {
   ];
 
   return (
-    <section id="about" className="diagonal-cut-bottom py-24 bg-background">
+    <section id="about" className="jagged-divider-top 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)` }}
       >
         {/* Section Header */}
         <div className="text-center mb-16">
-          <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
+          <h2 className="text-4xl md:text-5xl font-bold text-white mb-6 drop-shadow-lg">
             About <span className="text-glow">NQS Inspection</span>
           </h2>
-          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+          <p className="text-xl text-gray-200 max-w-2xl mx-auto drop-shadow-md">
             Your trusted partner for industrial inspection services across Texas.
           </p>
         </div>
@@ -64,8 +64,8 @@ const About = () => {
           {/* Left Column - Mission & Vision */}
           <div className="space-y-8">
             <div>
-              <h3 className="text-2xl font-bold text-foreground mb-4">Our Mission</h3>
+              <h3 className="text-2xl font-bold text-white mb-4 drop-shadow-md">Our Mission</h3>
-              <p className="text-muted-foreground leading-relaxed">
+              <p className="text-gray-200 leading-relaxed drop-shadow-sm">
                 At NQS Inspection Ltd, we are dedicated to providing exceptional non-destructive 
                 testing and industrial inspection services that ensure the safety, reliability, 
                 and integrity of critical infrastructure. Our certified professionals utilize 
@@ -75,8 +75,8 @@ const About = () => {
             </div>
 
             <div>
-              <h3 className="text-2xl font-bold text-foreground mb-4">Our Vision</h3>
+              <h3 className="text-2xl font-bold text-white mb-4 drop-shadow-md">Our Vision</h3>
-              <p className="text-muted-foreground leading-relaxed">
+              <p className="text-gray-200 leading-relaxed drop-shadow-sm">
                 To be the leading industrial inspection company in Texas, recognized for 
                 technical expertise and commitment to safety.
               </p>
@@ -96,19 +96,19 @@ const About = () => {
           {/* Right Column - Values & Certifications */}
           <div className="space-y-8">
             <div>
-              <h3 className="text-2xl font-bold text-foreground mb-6">Core Values</h3>
+              <h3 className="text-2xl font-bold text-white mb-6 drop-shadow-md">Core Values</h3>
               <div className="grid grid-cols-2 gap-4">
                 {values.map((value, index) => {
                   const IconComponent = value.icon;
                   return (
-                    <Card key={index} className="industrial-card">
+                    <Card key={index} className="industrial-card bg-card/80 backdrop-blur-sm border-white/20">
                       <CardContent className="p-4">
                         <div className="flex items-center space-x-3">
-                          <div className="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
+                          <div className="w-8 h-8 bg-primary/20 rounded-lg flex items-center justify-center flex-shrink-0">
                             <IconComponent className="w-4 h-4 text-primary" />
                           </div>
                           <div>
-                            <h4 className="font-semibold text-foreground text-sm">{value.title}</h4>
+                            <h4 className="font-semibold text-white text-sm drop-shadow-sm">{value.title}</h4>
                           </div>
                         </div>
                       </CardContent>
@@ -119,7 +119,7 @@ const About = () => {
             </div>
 
             <div>
-              <h3 className="text-2xl font-bold text-foreground mb-6">Certifications</h3>
+              <h3 className="text-2xl font-bold text-white mb-6 drop-shadow-md">Certifications</h3>
               <div className="flex flex-wrap gap-2 mb-6">
                 {certifications.slice(0, 4).map((cert, index) => (
                   <Badge 
@@ -133,15 +133,25 @@ const About = () => {
               </div>
             </div>
 
-            {/* Stats */}
+            {/* Stats with Organic Shape */}
-            <div className="grid grid-cols-2 gap-4">
+            <div className="relative">
-              <div className="text-center p-4 bg-card rounded-lg border border-border">
+              {/* Organic Shape Background */}
-                <div className="text-2xl font-bold text-glow mb-1">500+</div>
+              <div className="absolute inset-0 bg-black/60 backdrop-blur-sm rounded-2xl"
-                <div className="text-sm text-muted-foreground">Projects Completed</div>
+                   style={{
+                     clipPath: 'polygon(0% 15%, 12% 0%, 25% 20%, 40% 5%, 55% 25%, 70% 10%, 85% 30%, 100% 15%, 100% 100%, 0% 100%)'
+                   }}>
               </div>
-              <div className="text-center p-4 bg-card rounded-lg border border-border">
+              
+              {/* Stats Content */}
+              <div className="relative z-10 grid grid-cols-2 gap-4 p-12">
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-glow mb-1">500+</div>
+                  <div className="text-sm text-gray-200 drop-shadow-sm">Projects Completed</div>
+                </div>
+                <div className="text-center">
                   <div className="text-2xl font-bold text-glow mb-1">99.9%</div>
-                <div className="text-sm text-muted-foreground">Accuracy Rate</div>
+                  <div className="text-sm text-gray-200 drop-shadow-sm">Accuracy Rate</div>
+                </div>
               </div>
             </div>
           </div>

src/components/Contact.tsx

@@ -49,13 +49,13 @@ const Contact = () => {
   ];
 
   return (
-    <section id="contact" className="light-section diagonal-cut-top py-24">
+    <section id="contact" className="light-section jagged-divider-light-top 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)` }}
       >
         {/* Section Header */}
-        <div className="text-center mb-16">
+        <div className="text-center mb-12">
           <h2 className="text-4xl md:text-5xl font-bold mb-6">
             Get In <span className="text-glow">Touch</span>
           </h2>
@@ -75,11 +75,11 @@ const Contact = () => {
           </div>
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
           {/* Contact Information */}
-          <div className="space-y-8">
+          <div className="space-y-12">
             <div>
-              <h3 className="text-2xl font-bold text-foreground mb-6">Contact Information</h3>
+              <h3 className="text-2xl font-bold text-foreground mb-8">Contact Information</h3>
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                 {contactInfo.map((info, index) => {
                   const IconComponent = info.icon;
@@ -104,20 +104,24 @@ const Contact = () => {
             </div>
 
             {/* Service Areas */}
-            <div>
+            <div className="mt-12 mb-8">
-              <h3 className="text-xl font-bold text-foreground mb-4">Service Areas</h3>
+              <h3 className="text-2xl font-bold text-foreground mb-8">Service Areas</h3>
-              <p className="text-muted-foreground mb-4">
+              <p className="text-gray-600 mb-10 text-lg">
-                We provide comprehensive inspection services throughout Texas, including:
+                We provide comprehensive inspection services in the Coastal Bend area, including:
               </p>
-              <div className="grid grid-cols-2 gap-2 text-sm text-muted-foreground">
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 text-sm text-gray-700">
-                <div>• Houston</div>
+                <div className="flex items-center">
-                <div>• Corpus Christi</div>
+                  <div className="w-2 h-2 bg-primary rounded-full mr-3 flex-shrink-0"></div>
-                <div>• Austin</div>
+                  <span>Corpus Christi</span>
-                <div>• Dallas</div>
+                </div>
-                <div>• San Antonio</div>
+                <div className="flex items-center">
-                <div>• Beaumont</div>
+                  <div className="w-2 h-2 bg-primary rounded-full mr-3 flex-shrink-0"></div>
-                <div>• Port Arthur</div>
+                  <span>Port Aransas</span>
-                <div>• And surrounding areas</div>
+                </div>
+                <div className="flex items-center">
+                  <div className="w-2 h-2 bg-primary rounded-full mr-3 flex-shrink-0"></div>
+                  <span>Rockport</span>
+                </div>
               </div>
             </div>
           </div>
@@ -130,7 +134,7 @@ const Contact = () => {
                   Schedule an Inspection
                 </CardTitle>
               </CardHeader>
-              <CardContent className="space-y-6">
+              <CardContent className="space-y-8">
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div>
                     <Label htmlFor="firstName" className="text-foreground">First Name</Label>
@@ -193,7 +197,7 @@ const Contact = () => {
                   Submit Request
                 </Button>
                 
-                <p className="text-sm text-muted-foreground text-center">
+                <p className="text-sm text-muted-foreground text-center mt-6">
                   We'll respond to your inquiry within 24 hours. For emergency services, please call our hotline.
                 </p>
               </CardContent>

src/components/Footer.tsx

@@ -27,17 +27,17 @@ const Footer = () => {
   ];
 
   return (
-    <footer className="bg-background border-t border-border">
+    <footer className="bg-background border-t border-border dark-section">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Main Footer Content */}
         <div className="py-16">
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
             {/* Company Info */}
             <div className="lg:col-span-2">
-              <h3 className="text-2xl font-bold text-foreground mb-4">
+              <h3 className="text-2xl font-bold text-white mb-4 drop-shadow-lg">
                 NQS <span className="text-glow">Inspection Ltd</span>
               </h3>
-              <p className="text-muted-foreground mb-6 max-w-md">
+              <p className="text-gray-200 mb-6 max-w-md drop-shadow-sm">
                 Premier industrial inspection services across Texas. Ensuring safety, 
                 reliability, and integrity through cutting-edge non-destructive testing 
                 and certified professional expertise.
@@ -47,27 +47,27 @@ const Footer = () => {
               <div className="space-y-3">
                 <div className="flex items-center space-x-3">
                   <Phone className="w-4 h-4 text-primary" />
-                  <span className="text-foreground font-medium">+1 (555) 123-4567</span>
+                  <span className="text-white font-medium drop-shadow-sm">+1 (555) 123-4567</span>
                 </div>
                 <div className="flex items-center space-x-3">
                   <Mail className="w-4 h-4 text-primary" />
-                  <span className="text-foreground">info@nqsinspection.com</span>
+                  <span className="text-white drop-shadow-sm">info@nqsinspection.com</span>
                 </div>
                 <div className="flex items-center space-x-3">
                   <MapPin className="w-4 h-4 text-primary" />
-                  <span className="text-foreground">Corpus Christi, Texas</span>
+                  <span className="text-white drop-shadow-sm">Corpus Christi, Texas</span>
                 </div>
               </div>
             </div>
 
             {/* Services */}
             <div>
-              <h4 className="text-lg font-semibold text-foreground mb-4">Our Services</h4>
+              <h4 className="text-lg font-semibold text-white mb-4 drop-shadow-md">Our Services</h4>
               <ul className="space-y-2">
                 {services.map((service, index) => (
                   <li key={index} className="flex items-center space-x-2">
                     <CheckCircle className="w-3 h-3 text-primary flex-shrink-0" />
-                    <span className="text-muted-foreground text-sm">{service}</span>
+                    <span className="text-gray-200 text-sm drop-shadow-sm">{service}</span>
                   </li>
                 ))}
               </ul>
@@ -75,7 +75,7 @@ const Footer = () => {
 
             {/* Certifications */}
             <div>
-              <h4 className="text-lg font-semibold text-foreground mb-4">Certifications</h4>
+              <h4 className="text-lg font-semibold text-white mb-4 drop-shadow-md">Certifications</h4>
               <div className="space-y-4">
                 {certifications.map((cert, index) => (
                   <div key={index} className="flex items-start space-x-3">
@@ -99,7 +99,7 @@ const Footer = () => {
         <div className="py-8">
           <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
             {/* Copyright */}
-            <div className="text-muted-foreground text-sm">
+            <div className="text-gray-300 text-sm drop-shadow-sm">
               © 2024 NQS Inspection Ltd. All rights reserved.
             </div>
 
@@ -116,13 +116,13 @@ const Footer = () => {
 
             {/* Links */}
             <div className="flex space-x-6 text-sm">
-              <a href="#" className="text-muted-foreground hover:text-primary transition-colors">
+              <a href="#" className="text-gray-300 hover:text-primary transition-colors drop-shadow-sm">
                 Privacy Policy
               </a>
-              <a href="#" className="text-muted-foreground hover:text-primary transition-colors">
+              <a href="#" className="text-gray-300 hover:text-primary transition-colors drop-shadow-sm">
                 Terms of Service
               </a>
-              <a href="#" className="text-muted-foreground hover:text-primary transition-colors">
+              <a href="#" className="text-gray-300 hover:text-primary transition-colors drop-shadow-sm">
                 Safety Standards
               </a>
             </div>

src/components/Hero.tsx

@@ -12,7 +12,7 @@ const Hero = () => {
   }, []);
 
   return (
-    <section id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden">
+    <section id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden jagged-divider-bottom dark-section py-24">
       {/* Background Image with Parallax */}
       <div 
         className="absolute inset-0 z-0 parallax-element"
@@ -24,58 +24,68 @@ const Hero = () => {
         }}
       />
       
-      {/* Hero Overlay */}
+      {/* Hero Overlay - Enhanced for better contrast */}
-      <div className="hero-overlay z-10" />
+      <div className="absolute inset-0 z-10 bg-gradient-to-b from-black/90 via-black/80 to-black/95" />
       
       {/* Content */}
       <div className="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
         <div className="max-w-4xl mx-auto">
           {/* Badge */}
-          <div className="inline-flex items-center px-4 py-2 rounded-full bg-primary/10 border border-primary/30 mb-8">
+          <div className="inline-flex items-center px-4 py-2 rounded-full bg-primary/20 border border-primary/40 mb-8 backdrop-blur-sm">
             <Shield className="w-4 h-4 text-primary mr-2" />
             <span className="text-sm font-medium text-primary">Certified Industrial Inspection</span>
           </div>
 
           {/* Main Headline */}
-          <h1 className="text-5xl md:text-7xl font-bold text-foreground mb-6 leading-tight">
+          <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight drop-shadow-lg">
             Premier Industrial 
             <span className="block text-glow">Inspection</span>
           </h1>
 
           {/* Subheadline */}
-          <p className="text-xl md:text-2xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">
+          <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.
           </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">
+            <Button size="lg" className="btn-orange-glow text-lg px-8 py-4 shadow-2xl">
               Schedule Inspection
               <ArrowRight className="w-5 h-5 ml-2" />
             </Button>
             <Button 
               variant="outline" 
               size="lg" 
-              className="text-lg px-8 py-4 border-primary/30 text-primary hover:bg-primary/10"
+              className="text-lg px-8 py-4 border-white/30 text-white hover:bg-white/10 backdrop-blur-sm"
             >
               <Clock className="w-5 h-5 mr-2" />
               24/7 Emergency
             </Button>
           </div>
 
-          {/* Trust Indicators */}
+          {/* Trust Indicators with Organic Shape */}
-          <div className="grid grid-cols-3 gap-8 mt-16">
+          <div className="relative mt-16">
+            {/* Organic Shape Background */}
+            <div className="absolute inset-0 bg-black/80 backdrop-blur-sm rounded-3xl"
+                 style={{
+                   clipPath: 'polygon(0% 20%, 8% 0%, 18% 15%, 28% 5%, 38% 25%, 48% 10%, 58% 30%, 68% 15%, 78% 35%, 88% 20%, 100% 25%, 100% 100%, 0% 100%)'
+                 }}>
+            </div>
+            
+            {/* Trust Indicators Content */}
+            <div className="relative z-10 grid grid-cols-3 gap-8 py-16 px-12">
               <div className="text-center">
                 <div className="text-2xl font-bold text-glow mb-1">15+</div>
-              <div className="text-muted-foreground text-sm">Years</div>
+                <div className="text-gray-300 text-sm">Years</div>
               </div>
               <div className="text-center">
                 <div className="text-2xl font-bold text-glow mb-1">24/7</div>
-              <div className="text-muted-foreground text-sm">Support</div>
+                <div className="text-gray-300 text-sm">Support</div>
               </div>
               <div className="text-center">
                 <div className="text-2xl font-bold text-glow mb-1">100%</div>
-              <div className="text-muted-foreground text-sm">Certified</div>
+                <div className="text-gray-300 text-sm">Certified</div>
+              </div>
             </div>
           </div>
         </div>

src/components/Navigation.tsx

@@ -6,10 +6,11 @@ const Navigation = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   const navItems = [
-    { name: "Home", href: "#home" },
+    { name: "Home", href: "/" },
-    { name: "Services", href: "#services" },
+    { name: "What We Do", href: "/what-we-do" },
-    { name: "About", href: "#about" },
+    { name: "Methods", href: "/methods" },
-    { name: "Contact", href: "#contact" },
+    { name: "Employee Notices", href: "/employee-notice" },
+    { name: "Contact", href: "/#contact" },
   ];
 
   return (

src/components/Services.tsx

@@ -47,13 +47,13 @@ const Services = () => {
   ];
 
   return (
-    <section id="services" className="light-section diagonal-cut-top py-24">
+    <section id="services" className="light-section jagged-divider-light-top py-24">
       <div 
         className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 parallax-element"
         style={{ transform: `translateY(${scrollY * 0.1}px)` }}
       >
         {/* Section Header */}
-        <div className="text-center mb-16">
+        <div className="text-center mb-12">
           <h2 className="text-4xl md:text-5xl font-bold mb-6">
             Our <span className="text-glow">Services</span>
           </h2>
@@ -95,12 +95,12 @@ const Services = () => {
         </div>
 
         {/* CTA Section */}
-        <div className="text-center">
+        <div className="text-center mt-16 mb-20">
-          <div className="bg-white/50 backdrop-blur-sm border border-gray-200 rounded-2xl p-8 max-w-3xl mx-auto">
+          <div className="bg-white/50 backdrop-blur-sm border border-gray-200 rounded-2xl p-16 max-w-3xl mx-auto">
             <h3 className="text-2xl font-bold mb-4">
               Need Custom Solutions?
             </h3>
-            <p className="mb-6">
+            <p className="mb-6 text-gray-700">
               We develop tailored inspection programs to meet your specific requirements.
             </p>
             <Button className="btn-orange-glow">

src/index.css

@@ -9,27 +9,27 @@ All colors MUST be HSL.
 @layer base {
   :root {
     /* Core black and orange luxury industrial theme */
-    --background: 0 0% 6%;
+    --background: 0 0% 4%;
-    --foreground: 0 0% 98%;
+    --foreground: 0 0% 99%;
 
-    --card: 0 0% 8%;
+    --card: 0 0% 6%;
-    --card-foreground: 0 0% 95%;
+    --card-foreground: 0 0% 97%;
 
-    --popover: 0 0% 8%;
+    --popover: 0 0% 6%;
-    --popover-foreground: 0 0% 95%;
+    --popover-foreground: 0 0% 97%;
 
     /* Orange primary - industrial glow */
     --primary: 24 100% 50%;
-    --primary-foreground: 0 0% 98%;
+    --primary-foreground: 0 0% 99%;
     --primary-glow: 24 100% 60%;
 
     /* Steel grey secondary */
     --secondary: 210 15% 15%;
-    --secondary-foreground: 0 0% 90%;
+    --secondary-foreground: 0 0% 92%;
 
-    /* Muted dark greys */
+    /* Muted dark greys - improved contrast */
-    --muted: 0 0% 12%;
+    --muted: 0 0% 10%;
-    --muted-foreground: 0 0% 70%;
+    --muted-foreground: 0 0% 75%;
 
     /* Orange accent */
     --accent: 24 100% 50%;
@@ -47,11 +47,11 @@ All colors MUST be HSL.
 
     /* Light theme variants for white sections */
     --background-light: 0 0% 100%;
-    --foreground-light: 0 0% 10%;
+    --foreground-light: 0 0% 5%;
     --card-light: 0 0% 98%;
-    --card-foreground-light: 0 0% 15%;
+    --card-foreground-light: 0 0% 8%;
     --muted-light: 0 0% 95%;
-    --muted-foreground-light: 0 0% 40%;
+    --muted-foreground-light: 0 0% 30%;
 
     /* Custom luxury industrial tokens */
     --industrial-orange: 24 100% 50%;
@@ -149,6 +149,20 @@ All colors MUST be HSL.
     color: hsl(var(--foreground-light));
   }
 
+  .light-section h1,
+  .light-section h2,
+  .light-section h3,
+  .light-section h4,
+  .light-section h5,
+  .light-section h6 {
+    color: hsl(var(--foreground-light)) !important;
+    font-weight: 700;
+  }
+
+  .light-section p {
+    color: hsl(var(--foreground-light));
+  }
+
   .light-section .card {
     background: hsl(var(--card-light));
     color: hsl(var(--card-foreground-light));
@@ -156,7 +170,20 @@ All colors MUST be HSL.
   }
 
   .light-section .text-muted-foreground {
-    color: hsl(var(--muted-foreground-light));
+    color: hsl(var(--muted-foreground-light)) !important;
+  }
+
+  .light-section .text-foreground {
+    color: hsl(var(--foreground-light)) !important;
+  }
+
+  /* Service cards feature lists need darker text */
+  .light-section .industrial-card ul li {
+    color: hsl(var(--foreground-light)) !important;
+  }
+
+  .light-section .industrial-card .text-sm {
+    color: hsl(var(--foreground-light)) !important;
   }
 
   /* Orange glow button variant */
@@ -209,6 +236,97 @@ All colors MUST be HSL.
     clip-path: polygon(0 0, 100% 50%, 100% 0);
   }
 
+  /* Jagged/organic divider styles */
+  .jagged-divider-top {
+    position: relative;
+  }
+
+  .jagged-divider-top::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 120px;
+    background: hsl(var(--background-light));
+    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;
+  }
+
+  .jagged-divider-bottom::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: -1px;
+    right: -1px;
+    width: calc(100% + 2px);
+    height: 122px;
+    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;
+    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
+    outline: none;
+  }
+
+  .jagged-divider-light-top {
+    position: relative;
+  }
+
+  .jagged-divider-light-top::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100px;
+    background: hsl(var(--background-light));
+    clip-path: polygon(0 0, 15% 25%, 30% 5%, 45% 35%, 60% 15%, 75% 40%, 90% 20%, 100% 30%, 100% 0);
+    z-index: 10;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  }
+
+  .jagged-divider-light-bottom {
+    position: relative;
+  }
+
+  .jagged-divider-light-bottom::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100px;
+    background: hsl(var(--background-light));
+    clip-path: polygon(0 100%, 15% 75%, 30% 95%, 45% 65%, 60% 85%, 75% 60%, 90% 80%, 100% 70%, 100% 100%);
+    z-index: 10;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Clean jagged divider for Employee Notice page */
+  .jagged-divider-clean {
+    position: relative;
+  }
+
+  .jagged-divider-clean::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 80px;
+    background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--background-light)) 100%);
+    clip-path: polygon(0 90%, 33% 90%, 36% 85%, 39% 80%, 42% 75%, 45% 70%, 47% 70%, 48% 70%, 49% 70%, 50% 70%, 51% 70%, 52% 70%, 53% 70%, 55% 70%, 58% 75%, 61% 80%, 64% 85%, 67% 90%, 70% 90%, 100% 90%);
+    z-index: 10;
+    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
+  }
+
   /* Energy flow animation */
   .energy-flow {
     @apply relative overflow-hidden;
@@ -248,6 +366,32 @@ All colors MUST be HSL.
       hsl(var(--background) / 0.7) 50%, 
       hsl(var(--primary) / 0.1) 100%);
   }
+
+  /* Enhanced contrast for dark sections */
+  .dark-section {
+    background: hsl(var(--background)) !important;
+  }
+
+  .dark-section h1,
+  .dark-section h2,
+  .dark-section h3,
+  .dark-section h4,
+  .dark-section h5,
+  .dark-section h6 {
+    color: white !important;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
+  }
+
+  .dark-section p,
+  .dark-section span:not(.text-primary):not(.text-glow) {
+    color: #e5e7eb !important;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
+  }
+
+  .dark-section .text-muted-foreground {
+    color: #d1d5db !important;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
+  }
 }
 
 @layer utilities {

src/pages/EmployeeNotice.tsx

@@ -0,0 +1,157 @@
+import { useEffect, useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Mail, FileText, Calendar, Users } from "lucide-react";
+import Navigation from "@/components/Navigation";
+import Footer from "@/components/Footer";
+
+const EmployeeNotice = () => {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => setScrollY(window.scrollY);
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navigation />
+      
+      {/* Hero Section */}
+      <section className="relative py-24 bg-background dark-section jagged-divider-bottom">
+        <div 
+          className="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">
+              Employee <span className="text-glow">Notices</span>
+            </h1>
+            <p className="text-xl text-gray-200 max-w-3xl mx-auto leading-relaxed">
+              Important information and updates for NQS Inspection Ltd employees
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Main Content */}
+      <section className="py-24 bg-white">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          {/* Memo Header */}
+          <div className="text-center mb-12">
+            <h2 className="text-6xl font-bold text-gray-900 mb-8" style={{ fontFamily: 'serif' }}>
+              MEMO
+            </h2>
+            <div className="bg-white rounded-lg shadow-lg p-8 border border-gray-200">
+              <div className="text-left space-y-4">
+                <div className="text-lg text-gray-900">
+                  <strong className="text-gray-900">TO:</strong> <span className="text-gray-700">Employees</span>
+                </div>
+                <div className="text-lg text-gray-900">
+                  <strong className="text-gray-900">SUBJECT:</strong> <em className="text-gray-700">FORM 1095-C; EMPLOYER-PROVIDED HEALTH INSURANCE OFFER AND COVERAGE</em>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Memo Content */}
+          <Card className="mb-8 bg-white border-2 border-primary/20 shadow-lg">
+            <CardContent className="p-8">
+              <div className="prose prose-lg max-w-none">
+                <p className="text-gray-900 leading-relaxed mb-6">
+                  Due to the <em className="text-primary font-semibold">Employer Reporting and Improvement Act</em> and the <em className="text-primary font-semibold">Paperwork Burden Reduction Act of 2024</em>, 
+                  we are informing you of upcoming changes to how the Form 1095-C will be distributed.
+                </p>
+
+                <h3 className="text-2xl font-bold text-gray-900 mb-4 border-l-4 border-primary pl-4">What is the 1095-C?</h3>
+                <p className="text-gray-900 leading-relaxed mb-6">
+                  Form 1095-C provides information about the health insurance coverage we offered you during the year. 
+                  You are not required to file this statement with your personal taxes.
+                </p>
+
+                <h3 className="text-2xl font-bold text-gray-900 mb-4 border-l-4 border-primary pl-4">How to Request your Form 1095-C:</h3>
+                <div className="bg-gray-50 rounded-lg p-6 mb-6">
+                  <p className="text-gray-700 leading-relaxed mb-4">
+                    If you want to request a copy of the 1095-C form, please email your request to:
+                  </p>
+                  <div className="flex items-center space-x-2 mb-4">
+                    <Mail className="w-5 h-5 text-primary" />
+                    <span className="font-semibold text-lg text-primary bg-primary/10 px-3 py-2 rounded-lg border border-primary/20">LIZA@GREGKNOPPCPA.COM</span>
+                  </div>
+                </div>
+
+                <p className="text-gray-900 leading-relaxed mb-4">
+                  In your request, please indicate how you want the 1095-C copy provided to you:
+                </p>
+                <ol className="list-decimal list-inside space-y-2 text-gray-900 mb-6">
+                  <li>Please provide a valid email address; or</li>
+                  <li>Please provide your current mailing address.</li>
+                </ol>
+
+                <div className="bg-primary/5 border-l-4 border-primary p-4 mb-6">
+                  <p className="text-gray-900">
+                    <strong className="text-primary">Note:</strong> A copy of the Form 1095-C will be provided by IRS due date or 30 days from your written request, whichever is later.
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Additional Information */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+            <Card className="text-center bg-white border-2 border-primary/20 shadow-lg">
+              <CardContent className="p-6">
+                <FileText className="w-8 h-8 text-primary mx-auto mb-3" />
+                <h4 className="font-semibold text-gray-900 mb-2">Form 1095-C</h4>
+                <p className="text-sm text-gray-700">Health insurance coverage information</p>
+              </CardContent>
+            </Card>
+            
+            <Card className="text-center bg-white border-2 border-primary/20 shadow-lg">
+              <CardContent className="p-6">
+                <Calendar className="w-8 h-8 text-primary mx-auto mb-3" />
+                <h4 className="font-semibold text-gray-900 mb-2">Annual Distribution</h4>
+                <p className="text-sm text-gray-700">Provided by IRS due date</p>
+              </CardContent>
+            </Card>
+            
+            <Card className="text-center bg-white border-2 border-primary/20 shadow-lg">
+              <CardContent className="p-6">
+                <Users className="w-8 h-8 text-primary mx-auto mb-3" />
+                <h4 className="font-semibold text-gray-900 mb-2">All Employees</h4>
+                <p className="text-sm text-gray-700">Covered under company health plan</p>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Contact Information */}
+          <Card className="bg-white border-2 border-primary/20 shadow-lg">
+            <CardContent className="p-6">
+              <h3 className="text-xl font-bold text-gray-900 mb-4 border-l-4 border-primary pl-4">Need Help?</h3>
+              <p className="text-gray-900 mb-4">
+                If you have any questions about Form 1095-C or need assistance with your request, 
+                please contact our HR department or reach out to the email address provided above.
+              </p>
+              <div className="flex flex-wrap gap-2">
+                <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/30">
+                  HR Support Available
+                </Badge>
+                <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/30">
+                  Quick Response Time
+                </Badge>
+                <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/30">
+                  Secure Processing
+                </Badge>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default EmployeeNotice;

src/pages/Methods.tsx

@@ -0,0 +1,203 @@
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { 
+  Zap, 
+  Radio, 
+  Search, 
+  Shield, 
+  CheckCircle,
+  Target,
+  Eye,
+  Wrench,
+  Award,
+  Camera,
+  Settings
+} from "lucide-react";
+import Navigation from "@/components/Navigation";
+import Footer from "@/components/Footer";
+
+const Methods = () => {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => setScrollY(window.scrollY);
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const featuredMethods = [
+    {
+      icon: Zap,
+      title: "Ultrasonic: Phased Array",
+      description: "Since the early 2000's, our organization has been demonstrating the strength and reliability of PAUT inspections. This technology allows our customers to have confidence in their manufacturing deliverable with a full volumetric code compliant inspection in real-time without having to have exclusion zones or shooting windows.",
+      image: "/lovable-uploads/0a023c3c-76e5-4475-a0de-b3e0891c9d50.png"
+    },
+    {
+      icon: Target,
+      title: "Ultrasonic: Time of Flight Diffraction",
+      description: "Since the early 2000's, our organization has been demonstrating the strength and reliability of PAUT inspections. This technology allows our customers to have confidence in their manufacturing deliverable with a full volumetric code compliant inspection in real-time without having to have exclusion zones or shooting windows.",
+      image: "/lovable-uploads/9e823547-8ef1-49cf-8796-5bdd3ef81771.png"
+    },
+    {
+      icon: Radio,
+      title: "Radiology: Computed Radiography",
+      description: "By combining the granularity of control that software brings coupled with the straightforward image acquisition of traditional radiography, this technology brings the best of both worlds. Smaller exposures and smaller exclusion zones are required through the use of phosphorus imaging plates. In addition, the permanent record is stored on digital media eliminating the large storage requirement of film.",
+      image: "/lovable-uploads/981f66b9-4fe6-482d-8377-9c377a293e62.png"
+    }
+  ];
+
+  const currentServices = [
+    { name: "RADIOGRAPHY", icon: Radio },
+    { name: "COMPUTERIZED RADIOGRAPHY (CR)", icon: Camera },
+    { name: "ULTRASONIC", icon: Zap },
+    { name: "COMPUTERIZED ULTRASONICS (PA/TOFD)", icon: Target },
+    { name: "LIQUID PENETRANT", icon: Search },
+    { name: "MAGNETIC PARTICLE", icon: Shield },
+    { name: "VISUAL (API)", icon: Eye },
+    { name: "CWI (AWS)", icon: Award },
+    { name: "ASNT NDT LEVEL III", icon: CheckCircle },
+    { name: "HARDNESS TESTING", icon: Settings },
+    { name: "VACUUM TESTING", icon: Search },
+    { name: "VIDEO PROBE", icon: Camera },
+    { name: "WELDER CERTIFICATIONS", icon: Award },
+    { name: "WELDING", icon: Wrench },
+    { name: "NDT TRAINING", icon: CheckCircle }
+  ];
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navigation />
+      {/* Hero Section */}
+      <section className="relative py-24 bg-background dark-section jagged-divider-bottom">
+        <div 
+          className="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">
+              Our <span className="text-glow">Methods</span>
+            </h1>
+            <p className="text-xl text-gray-200 max-w-3xl mx-auto leading-relaxed">
+              Advanced NDT technologies and proven inspection methods delivering precise, 
+              reliable results for critical infrastructure across diverse industries.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Featured Methods Section */}
+      <section className="light-section py-24">
+        <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 mb-6">
+              Featured <span className="text-glow">Technologies</span>
+            </h2>
+            <p className="text-lg text-gray-700 max-w-2xl mx-auto">
+              Cutting-edge inspection technologies that set industry standards for accuracy and efficiency.
+            </p>
+          </div>
+
+          <div className="space-y-16">
+            {featuredMethods.map((method, index) => {
+              const IconComponent = method.icon;
+              const isEven = index % 2 === 0;
+              
+              return (
+                <div key={index} className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center ${!isEven ? 'lg:grid-flow-col-dense' : ''}`}>
+                  <div className={isEven ? 'lg:order-1' : 'lg:order-2'}>
+                    <div className="flex items-center mb-6">
+                      <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mr-4">
+                        <IconComponent className="w-6 h-6 text-primary" />
+                      </div>
+                      <h3 className="text-2xl font-bold">{method.title}</h3>
+                    </div>
+                    <p className="text-gray-700 leading-relaxed">{method.description}</p>
+                  </div>
+                  
+                  <div className={isEven ? 'lg:order-2' : 'lg:order-1'}>
+                    <div 
+                      className="rounded-lg h-64 bg-cover bg-center relative overflow-hidden shadow-lg"
+                      style={{
+                        backgroundImage: `url('${method.image}')`,
+                      }}
+                    >
+                      <div className="absolute inset-0 bg-gradient-to-r from-background/20 to-primary/10"></div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* Current Services Section */}
+      <section className="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">
+              Current Services <span className="text-glow">Offered</span>
+            </h2>
+            <p className="text-gray-300 max-w-2xl mx-auto">
+              Comprehensive NDT and inspection services covering all industry requirements 
+              with certified professionals and advanced equipment.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {currentServices.map((service, index) => {
+              const IconComponent = service.icon;
+              return (
+                <Card key={index} className="industrial-card bg-card/80 backdrop-blur-sm border-white/20 hover:border-primary/50 transition-all duration-300">
+                  <CardContent className="p-6">
+                    <div className="flex items-center space-x-4">
+                      <div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center flex-shrink-0">
+                        <IconComponent className="w-5 h-5 text-primary" />
+                      </div>
+                      <div>
+                        <h4 className="font-semibold text-white text-sm">{service.name}</h4>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+
+          {/* Certifications and Standards */}
+          <div className="mt-16">
+            <div className="bg-black/60 backdrop-blur-sm rounded-2xl p-8 max-w-4xl mx-auto"
+                 style={{
+                   clipPath: 'polygon(0% 10%, 10% 0%, 20% 15%, 35% 5%, 50% 20%, 65% 8%, 80% 25%, 90% 12%, 100% 18%, 100% 100%, 0% 100%)'
+                 }}>
+              <div className="text-center relative z-10">
+                <h3 className="text-2xl font-bold text-white mb-6">Industry Standards & Certifications</h3>
+                <div className="flex flex-wrap justify-center gap-3">
+                  <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/30">
+                    AWS Certified
+                  </Badge>
+                  <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/30">
+                    ASNT Level III
+                  </Badge>
+                  <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/30">
+                    API Standards
+                  </Badge>
+                  <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/30">
+                    ASME Compliant
+                  </Badge>
+                  <Badge variant="secondary" className="bg-primary/10 text-primary border-primary/30">
+                    ISO 9001:2015
+                  </Badge>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <Footer />
+    </div>
+  );
+};
+
+export default Methods;

src/pages/WhatWeDo.tsx

@@ -0,0 +1,195 @@
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Quote, Building2, Zap, MapPin } from "lucide-react";
+import Navigation from "@/components/Navigation";
+import Footer from "@/components/Footer";
+
+const WhatWeDo = () => {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => setScrollY(window.scrollY);
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const pipingProjects = [
+    { name: "Frontier Generating station", contractor: "Black and Veatch", location: "College Station, TX" },
+    { name: "Valley Re-powering Station", contractor: "Kiewit", location: "Los Angeles, CA" },
+    { name: "Tenasta Fluvanna", contractor: "Kiewit", location: "Virginia" },
+    { name: "Forney Power", contractor: "Duke/Fluor Daniel", location: "Forney, TX" },
+    { name: "Calpine", contractor: "Duke/Fluor Daniel", location: "Oneta, OK" },
+    { name: "Marion", contractor: "Duke/Fluor Daniel", location: "New Braunsfels, TX" },
+    { name: "Permian", contractor: "Kiewit", location: "Odessa, TX" },
+    { name: "Florida Power", contractor: "Duke/ Fluor Daniel", location: "Bastrop, TX" },
+    { name: "Chuck Lindsey", contractor: "Fluor Power", location: "Las Vegas, NV" },
+    { name: "Palomar", contractor: "Kiewit", location: "Escondido, CA" },
+    { name: "Flint Hill expansion", contractor: "Kiewit Industrial", location: "Minneapolis, MN" },
+    { name: "Lake Side Power", contractor: "Teton Industrial", location: "Prove, UT" },
+    { name: "Cross Generating", contractor: "Teton Industrial", location: "Cross, SC" },
+    { name: "Navasota Quail Run FASE 1", contractor: "Teton Industrial", location: "Odessa, TX" },
+    { name: "Navasota Colorado Bend FASE 1", contractor: "Teton Industrial", location: "Wharton, TX" },
+    { name: "Navasota Quail Run FASE 2", contractor: "Teton Industrial", location: "Odessa, TX" },
+    { name: "Navasota Colorado Bend FASE 2", contractor: "Teton Industrial", location: "Wharton, TX" },
+    { name: "Dallman Generating station 4", contractor: "KBV", location: "Springfield, IL" },
+    { name: "Bartow Repowering Project", contractor: "TIC/The Industrial Company", location: "St Petersburg, FL" },
+    { name: "Total Refinery Expansion", contractor: "Teton Industrial", location: "Port Arthur, TX" },
+    { name: "John Sever", contractor: "Kiewit", location: "Rogersville, TN" },
+    { name: "Progress Energy", contractor: "TIC/The Industrial Company", location: "Goldsboro, NC" },
+    { name: "Langley Gulch", contractor: "TIC/The Industrial Company", location: "Boise, ID" },
+    { name: "Walnut Creek", contractor: "Kiewit Power", location: "City of In, CA" },
+    { name: "Chouteau Power Unit II", contractor: "TIC/The Industrial Company", location: "Chouteau, OK" },
+    { name: "J. Lamar Stall Project", contractor: "TIC/The Industrial Company", location: "Shreveport, LA" },
+    { name: "La Cygne Environmental Retrofit", contractor: "Kiewit Power", location: "La Cygne, KS" },
+    { name: "Columbia AQCS Project", contractor: "Black & Veatch Construction", location: "Portage, WI" },
+    { name: "LGE Cane Run Bluegrass Project", contractor: "PCL", location: "Louisville, KY" },
+    { name: "Woodbridge Energy Project", contractor: "Kiewit", location: "Keasbey, NJ" },
+    { name: "Wildcat Energy Center", contractor: "PCL", location: "Rising Sun, MD" },
+    { name: "St Joseph's Energy Center", contractor: "Kiewit", location: "New Carlisle, IN" },
+    { name: "Westmoreland Energy Center", contractor: "Black & Veatch Construction", location: "Smithton, PA" },
+    { name: "Oregon Clean Energy", contractor: "Black & Veatch Construction", location: "Oregon, OH" },
+    { name: "TVA Paradise", contractor: "Kiewit", location: "Paradise, KY" },
+    { name: "TVA Allen", contractor: "Kiewit", location: "Memphis, TN" },
+    { name: "Naheola Energy", contractor: "TIC", location: "Pennington, AL" },
+    { name: "Birdsboro Energy Center", contractor: "Kiewit", location: "Birdsboro, PA" },
+    { name: "Fairview Energy Center", contractor: "Kiewit", location: "Johnstown, PA" },
+    { name: "Hickory Run Energy Center", contractor: "Kiewit", location: "New Castle, PA" }
+  ];
+
+  const offshoreProjects = [
+    { client: "Exxon", project: "Heritage & Harmony", contractor: "Gulf Marine Fabricators" },
+    { client: "Mobile", project: "Green Canyon", contractor: "Gulf Marine Fabricators" },
+    { client: "Shell Offshore", project: "Auger project", contractor: "Aker Kiewit GMF" },
+    { client: "Shell Offshore", project: "Mars Project", contractor: "Aker Kiewit GMF" },
+    { client: "Shell Offshore", project: "Ram Powell", contractor: "Aker Kiewit GMF" },
+    { client: "Shell Offshore", project: "Ursa project", contractor: "Aker Kiewit GMF" },
+    { client: "BP–Deepwater", project: "Holstein project", contractor: "Technip Gulf Marine" },
+    { client: "Kerr McGee \"Spar\"", project: "Red Hawk project", contractor: "Technip Gulf Marine" },
+    { client: "Chevron", project: "project", contractor: "Technip Gulf Marine" }
+  ];
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navigation />
+      {/* Hero Section */}
+      <section className="relative py-24 bg-background dark-section jagged-divider-bottom">
+        <div 
+          className="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">
+              What We <span className="text-glow">Do</span>
+            </h1>
+            <p className="text-xl text-gray-200 max-w-3xl mx-auto leading-relaxed">
+              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>
+          </div>
+        </div>
+      </section>
+
+      {/* Mission Section */}
+      <section className="light-section py-24">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+            <div>
+              <h2 className="text-3xl md:text-4xl font-bold mb-6">
+                Our <span className="text-glow">Mission</span>
+              </h2>
+              <p className="text-lg text-gray-700 leading-relaxed">
+                At NQS Inspection, Ltd. it is our mission to obtain state of the art procedures and proven NDE techniques 
+                in order to present the best possible results along with the highest reliability, accuracy, and integrity. 
+                Assuring our customers that their plant structures and components possess the height of integrity required 
+                by their engineer's, their codes, and their environment.
+              </p>
+            </div>
+            
+            {/* Testimonial */}
+            <div className="bg-white/80 backdrop-blur-sm border border-gray-200 rounded-2xl p-8">
+              <Quote className="w-8 h-8 text-primary mb-4" />
+              <blockquote className="text-lg text-gray-800 italic mb-6">
+                "We had set our expectations pretty high when it came to Quality for our Project. 
+                NQS came in and exceeded them in every measurable way possible."
+              </blockquote>
+              <cite className="text-sm font-semibold text-primary">
+                — PQM Wyatt Field Service
+              </cite>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Achievements Section */}
+      <section className="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">
+              What We've <span className="text-glow">Achieved</span>
+            </h2>
+          </div>
+
+          {/* Piping Projects History */}
+          <div className="mb-16">
+            <div className="flex items-center mb-8">
+              <Building2 className="w-6 h-6 text-primary mr-3" />
+              <h3 className="text-2xl font-bold text-white">Piping Projects History</h3>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {pipingProjects.map((project, index) => (
+                <Card key={index} className="industrial-card bg-card/80 backdrop-blur-sm border-white/20">
+                  <CardContent className="p-4">
+                    <h4 className="font-semibold text-white text-sm mb-2">{project.name}</h4>
+                    <p className="text-xs text-primary mb-1">{project.contractor}</p>
+                    <div className="flex items-center text-xs text-gray-300">
+                      <MapPin className="w-3 h-3 mr-1" />
+                      {project.location}
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+
+          {/* Offshore Projects */}
+          <div className="mb-16">
+            <div className="flex items-center mb-8">
+              <Zap className="w-6 h-6 text-primary mr-3" />
+              <h3 className="text-2xl font-bold text-white">Major Offshore Construction Projects</h3>
+            </div>
+            <p className="text-gray-300 mb-8">
+              Some of the major offshore construction projects NQS has participated in over the last 20 years:
+            </p>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+              {offshoreProjects.map((project, index) => (
+                <Card key={index} className="industrial-card bg-card/80 backdrop-blur-sm border-white/20">
+                  <CardContent className="p-4">
+                    <h4 className="font-semibold text-white text-sm mb-2">{project.client}</h4>
+                    <p className="text-xs text-gray-300 mb-1">{project.project}</p>
+                    <p className="text-xs text-primary">{project.contractor}</p>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+
+            {/* KEPPEL Amfels */}
+            <Card className="industrial-card bg-card/80 backdrop-blur-sm border-white/20 max-w-2xl mx-auto">
+              <CardContent className="p-6 text-center">
+                <h4 className="font-semibold text-white text-lg mb-2">KEPPEL Amfels</h4>
+                <p className="text-gray-300">
+                  NDT services on Jack-up rig, New builds and repairs, for the past 18 years.
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+      <Footer />
+    </div>
+  );
+};
+
+export default WhatWeDo;