diff --git a/public/lovable-uploads/981f66b9-4fe6-482d-8377-9c377a293e62.png b/public/lovable-uploads/981f66b9-4fe6-482d-8377-9c377a293e62.png new file mode 100644 index 0000000..f4cf908 Binary files /dev/null and b/public/lovable-uploads/981f66b9-4fe6-482d-8377-9c377a293e62.png differ diff --git a/src/components/About.tsx b/src/components/About.tsx index e6c2d54..f6a9727 100644 --- a/src/components/About.tsx +++ b/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 Header */}

About NQS Inspection

-

- Your trusted partner for comprehensive industrial inspection services - across Texas, ensuring safety and compliance in critical operations. +

+ Your trusted partner for industrial inspection services across Texas.

@@ -67,16 +77,14 @@ const About = () => {

Our Vision

- To be the leading industrial inspection company in Texas, recognized for our - technical expertise, innovative solutions, and unwavering commitment to safety. - We strive to set new standards in the industry while building lasting partnerships - with our clients through exceptional service and reliability. + To be the leading industrial inspection company in Texas, recognized for + technical expertise and commitment to safety.

{/* Background Image */}
{

Core Values

-
+
{values.map((value, index) => { const IconComponent = value.icon; return ( -
-
+
+
-

{value.title}

-

{value.description}

+

{value.title}

@@ -112,23 +119,17 @@ const About = () => {
-

Certifications & Standards

-
-

- Our team holds industry-leading certifications and adheres to the highest - professional standards, ensuring quality and compliance in every inspection. -

-
- {certifications.map((cert, index) => ( - - {cert} - - ))} -
+

Certifications

+
+ {certifications.slice(0, 4).map((cert, index) => ( + + {cert} + + ))}
diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx index d73889d..fdbe578 100644 --- a/src/components/Contact.tsx +++ b/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 Header */}
-

+

Get In Touch

-

- Ready to schedule an inspection or need emergency support? - Contact our certified professionals today. +

+ Ready to schedule an inspection? Contact our certified professionals today.

{/* Emergency Alert */} -
+
-

24/7 Emergency Support Available

-

- For urgent inspection needs or emergency situations, call our hotline immediately. -

+

24/7 Emergency Support

+

For urgent inspection needs, call our hotline immediately.

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index 5de6799..2b4e29c 100644 --- a/src/components/Hero.tsx +++ b/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 (
- {/* Background Image */} + {/* Background Image with Parallax */}
@@ -29,19 +39,18 @@ const Hero = () => { {/* Main Headline */}

Premier Industrial - Inspection Services + Inspection

{/* Subheadline */} -

- Ensuring safety, reliability & integrity with cutting-edge non-destructive - testing techniques. Professional pipeline inspection and welding services across Texas. +

+ Professional non-destructive testing and pipeline integrity services across Texas.

{/* CTA Buttons */}
{/* Trust Indicators */} -
+
-
15+
-
Years Experience
+
15+
+
Years
-
24/7
-
Emergency Response
+
24/7
+
Support
-
100%
-
Certified Inspectors
+
100%
+
Certified
diff --git a/src/components/Services.tsx b/src/components/Services.tsx index 51a4aa9..49fe34e 100644 --- a/src/components/Services.tsx +++ b/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.", - features: ["Ultrasonic Testing (UT)", "Radiographic Testing (RT)", "Magnetic Particle Testing (MT)", "Liquid Penetrant Testing (PT)"] + description: "Advanced testing methods for comprehensive analysis without material damage.", + 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.", - features: ["Pipeline Inspection", "Integrity Assessment", "Corrosion Monitoring", "Leak Detection"] + description: "Complete pipeline inspection and integrity management services.", + 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.", - features: ["Visual Inspection", "Weld Quality Assessment", "Code Compliance", "Documentation"] + description: "Certified welding inspection meeting AWS and ASME standards.", + 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.", - features: ["Hydrostatic Testing", "Pneumatic 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"] + description: "Comprehensive pressure vessel inspection and testing services.", + features: ["Hydrostatic Testing", "Thickness Measurement", "Safety Evaluation"] } ]; return ( -
-
+
+
{/* Section Header */}
-

- Comprehensive Industrial - Inspection Services +

+ Our Services

-

- From non-destructive testing to complete integrity management, we provide - the expertise and technology to keep your operations safe and compliant. +

+ Professional inspection services to keep your operations safe and compliant.

- {/* Energy Divider */} -
- {/* Services Grid */} -
+
{services.map((service, index) => { const IconComponent = service.icon; return ( @@ -78,17 +72,17 @@ const Services = () => {
- + {service.title} - + {service.description}
    {service.features.map((feature, idx) => ( -
  • +
  • {feature}
    • @@ -102,15 +96,15 @@ const Services = () => { {/* CTA Section */}
    -
    -

    - Need Custom Inspection Solutions? +
    +

    + Need Custom Solutions?

    -

    - 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.

    diff --git a/src/index.css b/src/index.css index c8b104d..9deb1be 100644 --- a/src/index.css +++ b/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;