Update hero section background

src/components/About.tsx

@@ -1,8 +1,16 @@
+import { useEffect, useState } from "react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Award, Target, Users, Lightbulb } from "lucide-react";
 
 const About = () => {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => setScrollY(window.scrollY);
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
   const values = [
     {
       icon: Award,
@@ -36,16 +44,18 @@ const About = () => {
   ];
 
   return (
-    <section id="about" className="py-24 bg-background">
+    <section id="about" className="diagonal-cut-bottom py-24 bg-background">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <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">
             About <span className="text-glow">NQS Inspection</span>
           </h2>
-          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
-            Your trusted partner for comprehensive industrial inspection services 
+            Your trusted partner for industrial inspection services across Texas.
-            across Texas, ensuring safety and compliance in critical operations.
           </p>
         </div>
 
@@ -67,16 +77,14 @@ const About = () => {
             <div>
               <h3 className="text-2xl font-bold text-foreground mb-4">Our Vision</h3>
               <p className="text-muted-foreground leading-relaxed">
-                To be the leading industrial inspection company in Texas, recognized for our 
+                To be the leading industrial inspection company in Texas, recognized for 
-                technical expertise, innovative solutions, and unwavering commitment to safety. 
+                technical expertise and commitment to safety.
-                We strive to set new standards in the industry while building lasting partnerships 
-                with our clients through exceptional service and reliability.
               </p>
             </div>
 
             {/* Background Image */}
             <div 
-              className="rounded-lg h-64 bg-cover bg-center relative overflow-hidden"
+              className="rounded-lg h-48 bg-cover bg-center relative overflow-hidden"
               style={{
                 backgroundImage: `url('/lovable-uploads/0a023c3c-76e5-4475-a0de-b3e0891c9d50.png')`,
               }}
@@ -89,19 +97,18 @@ const About = () => {
           <div className="space-y-8">
             <div>
               <h3 className="text-2xl font-bold text-foreground mb-6">Core Values</h3>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="grid grid-cols-2 gap-4">
                 {values.map((value, index) => {
                   const IconComponent = value.icon;
                   return (
                     <Card key={index} className="industrial-card">
                       <CardContent className="p-4">
-                        <div className="flex items-start space-x-3">
+                        <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 mt-1">
+                          <div className="w-8 h-8 bg-primary/10 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 mb-1">{value.title}</h4>
+                            <h4 className="font-semibold text-foreground text-sm">{value.title}</h4>
-                            <p className="text-sm text-muted-foreground">{value.description}</p>
                           </div>
                         </div>
                       </CardContent>
@@ -112,25 +119,19 @@ const About = () => {
             </div>
 
             <div>
-              <h3 className="text-2xl font-bold text-foreground mb-6">Certifications & Standards</h3>
+              <h3 className="text-2xl font-bold text-foreground mb-6">Certifications</h3>
-              <div className="space-y-4">
+              <div className="flex flex-wrap gap-2 mb-6">
-                <p className="text-muted-foreground">
+                {certifications.slice(0, 4).map((cert, index) => (
-                  Our team holds industry-leading certifications and adheres to the highest 
-                  professional standards, ensuring quality and compliance in every inspection.
-                </p>
-                <div className="flex flex-wrap gap-2">
-                  {certifications.map((cert, index) => (
                   <Badge 
                     key={index} 
                     variant="secondary" 
-                      className="bg-primary/10 text-primary border-primary/30 hover:bg-primary/20 transition-colors"
+                    className="bg-primary/10 text-primary border-primary/30 text-xs"
                   >
                     {cert}
                   </Badge>
                 ))}
               </div>
             </div>
-            </div>
 
             {/* Stats */}
             <div className="grid grid-cols-2 gap-4">

src/components/Contact.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -13,6 +14,13 @@ import {
 } from "lucide-react";
 
 const Contact = () => {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => setScrollY(window.scrollY);
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
   const contactInfo = [
     {
       icon: Phone,
@@ -41,28 +49,28 @@ const Contact = () => {
   ];
 
   return (
-    <section id="contact" className="py-24 bg-gradient-dark">
+    <section id="contact" className="light-section diagonal-cut-top py-24">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <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 mb-6">
             Get In <span className="text-glow">Touch</span>
           </h2>
-          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+          <p className="text-xl max-w-2xl mx-auto">
-            Ready to schedule an inspection or need emergency support? 
+            Ready to schedule an inspection? Contact our certified professionals today.
-            Contact our certified professionals today.
           </p>
         </div>
 
         {/* Emergency Alert */}
-        <div className="bg-primary/10 border border-primary/30 rounded-lg p-4 mb-12 max-w-4xl mx-auto">
+        <div className="bg-primary/10 border border-primary/30 rounded-lg p-4 mb-12 max-w-3xl mx-auto">
           <div className="flex items-center space-x-3">
             <AlertCircle className="w-5 h-5 text-primary flex-shrink-0" />
             <div>
-              <h3 className="font-semibold text-primary">24/7 Emergency Support Available</h3>
+              <h3 className="font-semibold text-primary">24/7 Emergency Support</h3>
-              <p className="text-sm text-muted-foreground">
+              <p className="text-sm">For urgent inspection needs, call our hotline immediately.</p>
-                For urgent inspection needs or emergency situations, call our hotline immediately.
-              </p>
             </div>
           </div>
         </div>

src/components/Hero.tsx

@@ -1,16 +1,26 @@
+import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { ArrowRight, Shield, Clock } from "lucide-react";
 
 const Hero = () => {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => setScrollY(window.scrollY);
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   return (
     <section id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden">
-      {/* Background Image */}
+      {/* Background Image with Parallax */}
       <div 
-        className="absolute inset-0 z-0"
+        className="absolute inset-0 z-0 parallax-element"
         style={{
-          backgroundImage: `url('/lovable-uploads/9e823547-8ef1-49cf-8796-5bdd3ef81771.png')`,
+          backgroundImage: `url('/lovable-uploads/981f66b9-4fe6-482d-8377-9c377a293e62.png')`,
           backgroundSize: 'cover',
           backgroundPosition: 'center',
+          transform: `translateY(${scrollY * 0.5}px)`,
         }}
       />
       
@@ -29,19 +39,18 @@ const Hero = () => {
           {/* Main Headline */}
           <h1 className="text-5xl md:text-7xl font-bold text-foreground mb-6 leading-tight">
             Premier Industrial 
-            <span className="block text-glow">Inspection Services</span>
+            <span className="block text-glow">Inspection</span>
           </h1>
 
           {/* Subheadline */}
-          <p className="text-xl md:text-2xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
+          <p className="text-xl md:text-2xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">
-            Ensuring safety, reliability & integrity with cutting-edge non-destructive 
+            Professional non-destructive testing and pipeline integrity services across Texas.
-            testing techniques. Professional pipeline inspection and welding 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">
-              Schedule Your Inspection Today
+              Schedule Inspection
               <ArrowRight className="w-5 h-5 ml-2" />
             </Button>
             <Button 
@@ -50,23 +59,23 @@ const Hero = () => {
               className="text-lg px-8 py-4 border-primary/30 text-primary hover:bg-primary/10"
             >
               <Clock className="w-5 h-5 mr-2" />
-              Request Emergency Support (24/7)
+              24/7 Emergency
             </Button>
           </div>
 
           {/* Trust Indicators */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
+          <div className="grid grid-cols-3 gap-8 mt-16">
             <div className="text-center">
-              <div className="text-3xl font-bold text-glow mb-2">15+</div>
+              <div className="text-2xl font-bold text-glow mb-1">15+</div>
-              <div className="text-muted-foreground">Years Experience</div>
+              <div className="text-muted-foreground text-sm">Years</div>
             </div>
             <div className="text-center">
-              <div className="text-3xl font-bold text-glow mb-2">24/7</div>
+              <div className="text-2xl font-bold text-glow mb-1">24/7</div>
-              <div className="text-muted-foreground">Emergency Response</div>
+              <div className="text-muted-foreground text-sm">Support</div>
             </div>
             <div className="text-center">
-              <div className="text-3xl font-bold text-glow mb-2">100%</div>
+              <div className="text-2xl font-bold text-glow mb-1">100%</div>
-              <div className="text-muted-foreground">Certified Inspectors</div>
+              <div className="text-muted-foreground text-sm">Certified</div>
             </div>
           </div>
         </div>

src/components/Services.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { 
@@ -5,71 +6,64 @@ import {
   Wrench, 
   Shield, 
   Zap, 
-  Settings, 
   CheckCircle,
   ArrowRight 
 } from "lucide-react";
 
 const Services = () => {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => setScrollY(window.scrollY);
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   const services = [
     {
       icon: Search,
       title: "Non-Destructive Testing",
-      description: "Advanced ultrasonic, radiographic, and magnetic particle testing for comprehensive material analysis without damage.",
+      description: "Advanced testing methods for comprehensive analysis without material damage.",
-      features: ["Ultrasonic Testing (UT)", "Radiographic Testing (RT)", "Magnetic Particle Testing (MT)", "Liquid Penetrant Testing (PT)"]
+      features: ["Ultrasonic Testing", "Radiographic Testing", "Magnetic Particle Testing"]
     },
     {
       icon: Wrench,
       title: "Pipeline Integrity",
-      description: "Complete pipeline inspection and integrity management services ensuring optimal performance and safety compliance.",
+      description: "Complete pipeline inspection and integrity management services.",
-      features: ["Pipeline Inspection", "Integrity Assessment", "Corrosion Monitoring", "Leak Detection"]
+      features: ["Pipeline Inspection", "Integrity Assessment", "Corrosion Monitoring"]
     },
     {
       icon: Shield,
       title: "Welding Inspection",
-      description: "Certified welding inspection services meeting AWS and ASME standards for critical industrial applications.",
+      description: "Certified welding inspection meeting AWS and ASME standards.",
-      features: ["Visual Inspection", "Weld Quality Assessment", "Code Compliance", "Documentation"]
+      features: ["Visual Inspection", "Weld Quality Assessment", "Code Compliance"]
     },
     {
       icon: Zap,
       title: "Pressure Vessel Testing",
-      description: "Comprehensive pressure vessel inspection and testing services ensuring operational safety and regulatory compliance.",
+      description: "Comprehensive pressure vessel inspection and testing services.",
-      features: ["Hydrostatic Testing", "Pneumatic Testing", "Thickness Measurement", "Safety Evaluation"]
+      features: ["Hydrostatic Testing", "Thickness Measurement", "Safety Evaluation"]
-    },
-    {
-      icon: Settings,
-      title: "Industrial Maintenance",
-      description: "Preventive maintenance and inspection programs designed to maximize equipment life and minimize downtime.",
-      features: ["Scheduled Inspections", "Condition Monitoring", "Maintenance Planning", "Equipment Certification"]
-    },
-    {
-      icon: CheckCircle,
-      title: "Quality Assurance",
-      description: "Complete quality assurance programs ensuring your operations meet the highest industry standards and regulations.",
-      features: ["Quality Control", "Standards Compliance", "Audit Services", "Training Programs"]
     }
   ];
 
   return (
-    <section id="services" className="py-24 bg-gradient-dark">
+    <section id="services" className="light-section diagonal-cut-top py-24">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <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">
-          <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
+          <h2 className="text-4xl md:text-5xl font-bold mb-6">
-            Comprehensive Industrial 
+            Our <span className="text-glow">Services</span>
-            <span className="block text-glow">Inspection Services</span>
           </h2>
-          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+          <p className="text-xl max-w-2xl mx-auto">
-            From non-destructive testing to complete integrity management, we provide 
+            Professional inspection services to keep your operations safe and compliant.
-            the expertise and technology to keep your operations safe and compliant.
           </p>
         </div>
 
-        {/* Energy Divider */}
-        <div className="w-full h-px bg-gradient-energy mb-16"></div>
-
         {/* Services Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
           {services.map((service, index) => {
             const IconComponent = service.icon;
             return (
@@ -78,17 +72,17 @@ const Services = () => {
                   <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
                     <IconComponent className="w-6 h-6 text-primary" />
                   </div>
-                  <CardTitle className="text-xl font-bold text-foreground">
+                  <CardTitle className="text-xl font-bold">
                     {service.title}
                   </CardTitle>
-                  <CardDescription className="text-muted-foreground">
+                  <CardDescription>
                     {service.description}
                   </CardDescription>
                 </CardHeader>
                 <CardContent>
                   <ul className="space-y-2">
                     {service.features.map((feature, idx) => (
-                      <li key={idx} className="flex items-center text-sm text-muted-foreground">
+                      <li key={idx} className="flex items-center text-sm">
                         <CheckCircle className="w-4 h-4 text-primary mr-2 flex-shrink-0" />
                         {feature}
                       </li>
@@ -102,15 +96,15 @@ const Services = () => {
 
         {/* CTA Section */}
         <div className="text-center">
-          <div className="bg-card/50 backdrop-blur-sm border border-border rounded-2xl p-8 max-w-4xl mx-auto">
+          <div className="bg-white/50 backdrop-blur-sm border border-gray-200 rounded-2xl p-8 max-w-3xl mx-auto">
-            <h3 className="text-2xl font-bold text-foreground mb-4">
+            <h3 className="text-2xl font-bold mb-4">
-              Need Custom Inspection Solutions?
+              Need Custom Solutions?
             </h3>
-            <p className="text-muted-foreground mb-6">
+            <p className="mb-6">
-              Our experienced team can develop tailored inspection programs to meet your specific requirements and industry standards.
+              We develop tailored inspection programs to meet your specific requirements.
             </p>
             <Button className="btn-orange-glow">
-              Discuss Your Requirements
+              Discuss Requirements
               <ArrowRight className="w-4 h-4 ml-2" />
             </Button>
           </div>

src/index.css

@@ -45,6 +45,14 @@ All colors MUST be HSL.
 
     --radius: 0.5rem;
 
+    /* Light theme variants for white sections */
+    --background-light: 0 0% 100%;
+    --foreground-light: 0 0% 10%;
+    --card-light: 0 0% 98%;
+    --card-foreground-light: 0 0% 15%;
+    --muted-light: 0 0% 95%;
+    --muted-foreground-light: 0 0% 40%;
+
     /* Custom luxury industrial tokens */
     --industrial-orange: 24 100% 50%;
     --industrial-orange-glow: 24 100% 60%;
@@ -135,6 +143,22 @@ All colors MUST be HSL.
 }
 
 @layer components {
+  /* Light theme classes */
+  .light-section {
+    background: hsl(var(--background-light));
+    color: hsl(var(--foreground-light));
+  }
+
+  .light-section .card {
+    background: hsl(var(--card-light));
+    color: hsl(var(--card-foreground-light));
+    border-color: hsl(0 0% 90%);
+  }
+
+  .light-section .text-muted-foreground {
+    color: hsl(var(--muted-foreground-light));
+  }
+
   /* Orange glow button variant */
   .btn-orange-glow {
     @apply bg-primary text-primary-foreground font-semibold px-8 py-4 rounded-lg;
@@ -143,6 +167,48 @@ All colors MUST be HSL.
     @apply border border-primary/30;
   }
 
+  /* Parallax container */
+  .parallax-container {
+    transform-style: preserve-3d;
+    perspective: 1000px;
+  }
+
+  .parallax-element {
+    will-change: transform;
+  }
+
+  /* Diagonal cut sections */
+  .diagonal-cut-bottom {
+    position: relative;
+  }
+
+  .diagonal-cut-bottom::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100px;
+    background: hsl(var(--background));
+    clip-path: polygon(0 50%, 100% 100%, 0 100%);
+  }
+
+  .diagonal-cut-top {
+    position: relative;
+    padding-top: 100px;
+  }
+
+  .diagonal-cut-top::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100px;
+    background: hsl(var(--background-light));
+    clip-path: polygon(0 0, 100% 50%, 100% 0);
+  }
+
   /* Energy flow animation */
   .energy-flow {
     @apply relative overflow-hidden;
@@ -162,6 +228,12 @@ All colors MUST be HSL.
     @apply hover:-translate-y-1;
   }
 
+  /* Light theme industrial card */
+  .light-section .industrial-card {
+    @apply bg-white border-gray-200;
+    @apply hover:border-primary/50 hover:shadow-[var(--shadow-orange-glow)];
+  }
+
   /* Glowing text */
   .text-glow {
     @apply text-primary;