Implement Black & Orange Theme
This commit is contained in:
gpt-engineer-app[bot]
parent
49354f8a93
commit
038efb504c
11
index.html
11
index.html
|
|
@ -3,12 +3,15 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>nqs-glow-lux-web</title>
|
||||
<meta name="description" content="Lovable Generated Project" />
|
||||
<title>NQS Inspection Ltd - Premier Industrial Inspection Services</title>
|
||||
<meta name="description" content="Professional non-destructive testing and industrial inspection services in Texas. Pipeline integrity, welding inspection, and 24/7 emergency support." />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap" rel="stylesheet">
|
||||
<meta name="author" content="Lovable" />
|
||||
|
||||
<meta property="og:title" content="nqs-glow-lux-web" />
|
||||
<meta property="og:description" content="Lovable Generated Project" />
|
||||
<meta property="og:title" content="NQS Inspection Ltd - Premier Industrial Inspection Services" />
|
||||
<meta property="og:description" content="Professional non-destructive testing and industrial inspection services in Texas. Pipeline integrity, welding inspection, and 24/7 emergency support." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 848 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
|
|
@ -0,0 +1,153 @@
|
|||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Award, Target, Users, Lightbulb } from "lucide-react";
|
||||
|
||||
const About = () => {
|
||||
const values = [
|
||||
{
|
||||
icon: Award,
|
||||
title: "Excellence",
|
||||
description: "Delivering the highest quality inspection services with certified professionals and cutting-edge technology."
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: "Precision",
|
||||
description: "Accurate, detailed inspections that provide actionable insights for optimal operational safety."
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Partnership",
|
||||
description: "Building long-term relationships through reliable service, transparent communication, and expert guidance."
|
||||
},
|
||||
{
|
||||
icon: Lightbulb,
|
||||
title: "Innovation",
|
||||
description: "Continuously advancing our methods and technology to provide industry-leading inspection solutions."
|
||||
}
|
||||
];
|
||||
|
||||
const certifications = [
|
||||
"AWS Certified Welding Inspector",
|
||||
"ASNT Level III Certified",
|
||||
"API 510 Pressure Vessel Inspector",
|
||||
"API 570 Piping Inspector",
|
||||
"NACE Corrosion Specialist",
|
||||
"ISO 9001:2015 Quality Management"
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="about" className="py-24 bg-background">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* 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">
|
||||
Your trusted partner for comprehensive industrial inspection services
|
||||
across Texas, ensuring safety and compliance in critical operations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 mb-16">
|
||||
{/* Left Column - Mission & Vision */}
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-foreground mb-4">Our Mission</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
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
|
||||
state-of-the-art technology and proven methodologies to deliver accurate,
|
||||
actionable insights that help our clients maintain operational excellence.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="rounded-lg h-64 bg-cover bg-center relative overflow-hidden"
|
||||
style={{
|
||||
backgroundImage: `url('/lovable-uploads/0a023c3c-76e5-4475-a0de-b3e0891c9d50.png')`,
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-background/80 to-primary/20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Values & Certifications */}
|
||||
<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">
|
||||
{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="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
|
||||
<IconComponent className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-foreground mb-1">{value.title}</h4>
|
||||
<p className="text-sm text-muted-foreground">{value.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-foreground mb-6">Certifications & Standards</h3>
|
||||
<div className="space-y-4">
|
||||
<p className="text-muted-foreground">
|
||||
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"
|
||||
>
|
||||
{cert}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="text-center p-4 bg-card rounded-lg border border-border">
|
||||
<div className="text-2xl font-bold text-glow mb-1">500+</div>
|
||||
<div className="text-sm text-muted-foreground">Projects Completed</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-card rounded-lg border border-border">
|
||||
<div className="text-2xl font-bold text-glow mb-1">99.9%</div>
|
||||
<div className="text-sm text-muted-foreground">Accuracy Rate</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import {
|
||||
Phone,
|
||||
Mail,
|
||||
MapPin,
|
||||
Clock,
|
||||
AlertCircle,
|
||||
Send
|
||||
} from "lucide-react";
|
||||
|
||||
const Contact = () => {
|
||||
const contactInfo = [
|
||||
{
|
||||
icon: Phone,
|
||||
title: "Emergency Line",
|
||||
details: "+1 (555) 123-4567",
|
||||
subtitle: "Available 24/7 for urgent inspections"
|
||||
},
|
||||
{
|
||||
icon: Mail,
|
||||
title: "Email",
|
||||
details: "info@nqsinspection.com",
|
||||
subtitle: "Response within 24 hours"
|
||||
},
|
||||
{
|
||||
icon: MapPin,
|
||||
title: "Location",
|
||||
details: "Corpus Christi, Texas",
|
||||
subtitle: "Serving all of Texas"
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: "Business Hours",
|
||||
details: "Mon-Fri: 7:00 AM - 6:00 PM",
|
||||
subtitle: "Emergency services available 24/7"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="contact" className="py-24 bg-gradient-dark">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
|
||||
Get In <span className="text-glow">Touch</span>
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||
Ready to schedule an inspection or need emergency support?
|
||||
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="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>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
For urgent inspection needs or emergency situations, call our hotline immediately.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Contact Information */}
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-foreground mb-6">Contact Information</h3>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
{contactInfo.map((info, index) => {
|
||||
const IconComponent = info.icon;
|
||||
return (
|
||||
<Card key={index} className="industrial-card">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<IconComponent className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-foreground mb-1">{info.title}</h4>
|
||||
<p className="text-primary font-medium mb-1">{info.details}</p>
|
||||
<p className="text-sm text-muted-foreground">{info.subtitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Service Areas */}
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-foreground mb-4">Service Areas</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
We provide comprehensive inspection services throughout Texas, including:
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm text-muted-foreground">
|
||||
<div>• Houston</div>
|
||||
<div>• Corpus Christi</div>
|
||||
<div>• Austin</div>
|
||||
<div>• Dallas</div>
|
||||
<div>• San Antonio</div>
|
||||
<div>• Beaumont</div>
|
||||
<div>• Port Arthur</div>
|
||||
<div>• And surrounding areas</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<div>
|
||||
<Card className="industrial-card">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl font-bold text-foreground">
|
||||
Schedule an Inspection
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="firstName" className="text-foreground">First Name</Label>
|
||||
<Input
|
||||
id="firstName"
|
||||
className="bg-background border-border focus:border-primary"
|
||||
placeholder="John"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="lastName" className="text-foreground">Last Name</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
className="bg-background border-border focus:border-primary"
|
||||
placeholder="Doe"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="email" className="text-foreground">Email Address</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
className="bg-background border-border focus:border-primary"
|
||||
placeholder="john.doe@company.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="phone" className="text-foreground">Phone Number</Label>
|
||||
<Input
|
||||
id="phone"
|
||||
type="tel"
|
||||
className="bg-background border-border focus:border-primary"
|
||||
placeholder="+1 (555) 123-4567"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="service" className="text-foreground">Service Required</Label>
|
||||
<Input
|
||||
id="service"
|
||||
className="bg-background border-border focus:border-primary"
|
||||
placeholder="e.g., Pipeline Inspection, Welding Testing"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="message" className="text-foreground">Project Details</Label>
|
||||
<Textarea
|
||||
id="message"
|
||||
className="bg-background border-border focus:border-primary min-h-[100px]"
|
||||
placeholder="Please describe your inspection requirements, timeline, and any specific standards or certifications needed..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button className="btn-orange-glow w-full">
|
||||
<Send className="w-4 h-4 mr-2" />
|
||||
Submit Request
|
||||
</Button>
|
||||
|
||||
<p className="text-sm text-muted-foreground text-center">
|
||||
We'll respond to your inquiry within 24 hours. For emergency services, please call our hotline.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
import { Badge } from "@/components/ui/badge";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
Phone,
|
||||
Mail,
|
||||
MapPin,
|
||||
Shield,
|
||||
Award,
|
||||
CheckCircle
|
||||
} from "lucide-react";
|
||||
|
||||
const Footer = () => {
|
||||
const certifications = [
|
||||
{ name: "AWS", description: "Certified Welding Inspector" },
|
||||
{ name: "API", description: "Pressure Vessel & Piping" },
|
||||
{ name: "ASNT", description: "Level III Certified" },
|
||||
{ name: "ISO 9001", description: "Quality Management" }
|
||||
];
|
||||
|
||||
const services = [
|
||||
"Non-Destructive Testing",
|
||||
"Pipeline Integrity",
|
||||
"Welding Inspection",
|
||||
"Pressure Vessel Testing",
|
||||
"Industrial Maintenance",
|
||||
"Quality Assurance"
|
||||
];
|
||||
|
||||
return (
|
||||
<footer className="bg-background border-t border-border">
|
||||
<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">
|
||||
NQS <span className="text-glow">Inspection Ltd</span>
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-6 max-w-md">
|
||||
Premier industrial inspection services across Texas. Ensuring safety,
|
||||
reliability, and integrity through cutting-edge non-destructive testing
|
||||
and certified professional expertise.
|
||||
</p>
|
||||
|
||||
{/* Contact Info */}
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold text-foreground mb-4">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>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Certifications */}
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold text-foreground mb-4">Certifications</h4>
|
||||
<div className="space-y-4">
|
||||
{certifications.map((cert, index) => (
|
||||
<div key={index} className="flex items-start space-x-3">
|
||||
<div className="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Award className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-primary text-sm">{cert.name}</div>
|
||||
<div className="text-xs text-muted-foreground">{cert.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator className="bg-border" />
|
||||
|
||||
{/* Bottom 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">
|
||||
© 2024 NQS Inspection Ltd. All rights reserved.
|
||||
</div>
|
||||
|
||||
{/* Emergency Badge */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-primary/30 text-primary bg-primary/10 hover:bg-primary/20 animate-pulse-glow"
|
||||
>
|
||||
<Shield className="w-3 h-3 mr-1" />
|
||||
24/7 Emergency Support
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
<div className="flex space-x-6 text-sm">
|
||||
<a href="#" className="text-muted-foreground hover:text-primary transition-colors">
|
||||
Privacy Policy
|
||||
</a>
|
||||
<a href="#" className="text-muted-foreground hover:text-primary transition-colors">
|
||||
Terms of Service
|
||||
</a>
|
||||
<a href="#" className="text-muted-foreground hover:text-primary transition-colors">
|
||||
Safety Standards
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowRight, Shield, Clock } from "lucide-react";
|
||||
|
||||
const Hero = () => {
|
||||
return (
|
||||
<section id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 z-0"
|
||||
style={{
|
||||
backgroundImage: `url('/lovable-uploads/9e823547-8ef1-49cf-8796-5bdd3ef81771.png')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Hero Overlay */}
|
||||
<div className="hero-overlay z-10" />
|
||||
|
||||
{/* 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">
|
||||
<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">
|
||||
Premier Industrial
|
||||
<span className="block text-glow">Inspection Services</span>
|
||||
</h1>
|
||||
|
||||
{/* Subheadline */}
|
||||
<p className="text-xl md:text-2xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
|
||||
Ensuring safety, reliability & integrity with cutting-edge non-destructive
|
||||
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
|
||||
<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"
|
||||
>
|
||||
<Clock className="w-5 h-5 mr-2" />
|
||||
Request Emergency Support (24/7)
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<div className="grid grid-cols-1 md: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-muted-foreground">Years Experience</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-glow mb-2">24/7</div>
|
||||
<div className="text-muted-foreground">Emergency Response</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-glow mb-2">100%</div>
|
||||
<div className="text-muted-foreground">Certified Inspectors</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Energy Flow Effect */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-1 energy-flow bg-gradient-energy"></div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Menu, X, Phone } from "lucide-react";
|
||||
|
||||
const Navigation = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", href: "#home" },
|
||||
{ name: "Services", href: "#services" },
|
||||
{ name: "About", href: "#about" },
|
||||
{ name: "Contact", href: "#contact" },
|
||||
];
|
||||
|
||||
return (
|
||||
<nav className="fixed top-0 w-full z-50 bg-background/95 backdrop-blur-sm border-b border-border">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
{/* Logo */}
|
||||
<div className="flex-shrink-0">
|
||||
<h1 className="text-2xl font-bold text-foreground">
|
||||
NQS <span className="text-glow">Inspection</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden md:block">
|
||||
<div className="ml-10 flex items-baseline space-x-8">
|
||||
{navItems.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="text-muted-foreground hover:text-primary transition-colors duration-200 font-medium"
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="hidden md:block">
|
||||
<Button className="btn-orange-glow">
|
||||
<Phone className="w-4 h-4 mr-2" />
|
||||
Emergency Support
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<div className="md:hidden">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="text-foreground"
|
||||
>
|
||||
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
{isOpen && (
|
||||
<div className="md:hidden">
|
||||
<div className="px-2 pt-2 pb-3 space-y-1 border-t border-border bg-card">
|
||||
{navItems.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="block px-3 py-2 text-muted-foreground hover:text-primary transition-colors duration-200"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
<div className="pt-2">
|
||||
<Button className="btn-orange-glow w-full">
|
||||
<Phone className="w-4 h-4 mr-2" />
|
||||
Emergency Support
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Search,
|
||||
Wrench,
|
||||
Shield,
|
||||
Zap,
|
||||
Settings,
|
||||
CheckCircle,
|
||||
ArrowRight
|
||||
} from "lucide-react";
|
||||
|
||||
const Services = () => {
|
||||
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)"]
|
||||
},
|
||||
{
|
||||
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"]
|
||||
},
|
||||
{
|
||||
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"]
|
||||
},
|
||||
{
|
||||
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"]
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="services" className="py-24 bg-gradient-dark">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
|
||||
Comprehensive Industrial
|
||||
<span className="block text-glow">Inspection Services</span>
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||
From non-destructive testing to complete integrity management, we provide
|
||||
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">
|
||||
{services.map((service, index) => {
|
||||
const IconComponent = service.icon;
|
||||
return (
|
||||
<Card key={index} className="industrial-card group">
|
||||
<CardHeader>
|
||||
<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">
|
||||
{service.title}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-muted-foreground">
|
||||
{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">
|
||||
<CheckCircle className="w-4 h-4 text-primary mr-2 flex-shrink-0" />
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<h3 className="text-2xl font-bold text-foreground mb-4">
|
||||
Need Custom Inspection Solutions?
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-6">
|
||||
Our experienced team can develop tailored inspection programs to meet your specific requirements and industry standards.
|
||||
</p>
|
||||
<Button className="btn-orange-glow">
|
||||
Discuss Your Requirements
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
191
src/index.css
191
src/index.css
|
|
@ -8,36 +8,66 @@ All colors MUST be HSL.
|
|||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
/* Core black and orange luxury industrial theme */
|
||||
--background: 0 0% 6%;
|
||||
--foreground: 0 0% 98%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 8%;
|
||||
--card-foreground: 0 0% 95%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 8%;
|
||||
--popover-foreground: 0 0% 95%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
/* Orange primary - industrial glow */
|
||||
--primary: 24 100% 50%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--primary-glow: 24 100% 60%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
/* Steel grey secondary */
|
||||
--secondary: 210 15% 15%;
|
||||
--secondary-foreground: 0 0% 90%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
/* Muted dark greys */
|
||||
--muted: 0 0% 12%;
|
||||
--muted-foreground: 0 0% 70%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
/* Orange accent */
|
||||
--accent: 24 100% 50%;
|
||||
--accent-foreground: 0 0% 10%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
/* Dark borders and inputs */
|
||||
--border: 0 0% 20%;
|
||||
--input: 0 0% 12%;
|
||||
--ring: 24 100% 50%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Custom luxury industrial tokens */
|
||||
--industrial-orange: 24 100% 50%;
|
||||
--industrial-orange-glow: 24 100% 60%;
|
||||
--industrial-orange-dark: 24 100% 40%;
|
||||
--charcoal: 0 0% 8%;
|
||||
--charcoal-light: 0 0% 12%;
|
||||
--steel: 210 15% 25%;
|
||||
--steel-light: 210 15% 35%;
|
||||
|
||||
/* Gradients */
|
||||
--gradient-orange: linear-gradient(135deg, hsl(var(--industrial-orange)), hsl(var(--industrial-orange-glow)));
|
||||
--gradient-dark: linear-gradient(180deg, hsl(var(--background)), hsl(var(--charcoal)));
|
||||
--gradient-energy: linear-gradient(90deg, transparent, hsl(var(--industrial-orange) / 0.3), transparent);
|
||||
|
||||
/* Shadows and glows */
|
||||
--shadow-orange-glow: 0 0 40px hsl(var(--industrial-orange) / 0.3);
|
||||
--shadow-orange-intense: 0 0 60px hsl(var(--industrial-orange) / 0.5);
|
||||
--shadow-dark: 0 10px 30px hsl(0 0% 0% / 0.5);
|
||||
|
||||
/* Animations */
|
||||
--transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-glow: box-shadow 0.3s ease, transform 0.3s ease;
|
||||
|
||||
--sidebar-background: 0 0% 98%;
|
||||
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
|
|
@ -56,41 +86,35 @@ All colors MUST be HSL.
|
|||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
/* Dark mode uses same colors - we're already dark themed */
|
||||
--background: 0 0% 6%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 0 0% 8%;
|
||||
--card-foreground: 0 0% 95%;
|
||||
--popover: 0 0% 8%;
|
||||
--popover-foreground: 0 0% 95%;
|
||||
--primary: 24 100% 50%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 210 15% 15%;
|
||||
--secondary-foreground: 0 0% 90%;
|
||||
--muted: 0 0% 12%;
|
||||
--muted-foreground: 0 0% 70%;
|
||||
--accent: 24 100% 50%;
|
||||
--accent-foreground: 0 0% 10%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 0 0% 20%;
|
||||
--input: 0 0% 12%;
|
||||
--ring: 24 100% 50%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
--sidebar-background: 240 5.9% 10%;
|
||||
--sidebar-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-primary: 224.3 76.3% 48%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 240 3.7% 15.9%;
|
||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-border: 240 3.7% 15.9%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
--sidebar-background: 0 0% 8%;
|
||||
--sidebar-foreground: 0 0% 95%;
|
||||
--sidebar-primary: 24 100% 50%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 0 0% 12%;
|
||||
--sidebar-accent-foreground: 0 0% 90%;
|
||||
--sidebar-border: 0 0% 20%;
|
||||
--sidebar-ring: 24 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -100,6 +124,73 @@ All colors MUST be HSL.
|
|||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@apply bg-background text-foreground font-sans;
|
||||
font-family: 'Montserrat', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Montserrat', system-ui, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Orange glow button variant */
|
||||
.btn-orange-glow {
|
||||
@apply bg-primary text-primary-foreground font-semibold px-8 py-4 rounded-lg;
|
||||
@apply transition-all duration-300 ease-out;
|
||||
@apply hover:shadow-[var(--shadow-orange-glow)] hover:scale-105;
|
||||
@apply border border-primary/30;
|
||||
}
|
||||
|
||||
/* Energy flow animation */
|
||||
.energy-flow {
|
||||
@apply relative overflow-hidden;
|
||||
}
|
||||
|
||||
.energy-flow::before {
|
||||
content: '';
|
||||
@apply absolute inset-0 bg-gradient-to-r from-transparent via-primary/20 to-transparent;
|
||||
@apply -translate-x-full animate-[slideRight_3s_ease-in-out_infinite];
|
||||
}
|
||||
|
||||
/* Industrial card hover effect */
|
||||
.industrial-card {
|
||||
@apply bg-card border border-border rounded-lg p-6;
|
||||
@apply transition-all duration-300 ease-out;
|
||||
@apply hover:border-primary/50 hover:shadow-[var(--shadow-orange-glow)];
|
||||
@apply hover:-translate-y-1;
|
||||
}
|
||||
|
||||
/* Glowing text */
|
||||
.text-glow {
|
||||
@apply text-primary;
|
||||
text-shadow: 0 0 20px hsl(var(--primary) / 0.5);
|
||||
}
|
||||
|
||||
/* Hero overlay */
|
||||
.hero-overlay {
|
||||
@apply absolute inset-0;
|
||||
background: linear-gradient(135deg,
|
||||
hsl(var(--background) / 0.9) 0%,
|
||||
hsl(var(--background) / 0.7) 50%,
|
||||
hsl(var(--primary) / 0.1) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Custom animations */
|
||||
@keyframes slideRight {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% { box-shadow: 0 0 20px hsl(var(--primary) / 0.3); }
|
||||
50% { box-shadow: 0 0 40px hsl(var(--primary) / 0.6); }
|
||||
}
|
||||
|
||||
.animate-pulse-glow {
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,19 @@
|
|||
// Update this page (the content is just a fallback if you fail to update the page)
|
||||
import Navigation from "@/components/Navigation";
|
||||
import Hero from "@/components/Hero";
|
||||
import Services from "@/components/Services";
|
||||
import About from "@/components/About";
|
||||
import Contact from "@/components/Contact";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
const Index = () => {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background">
|
||||
<div className="text-center">
|
||||
<h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
|
||||
<p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
|
||||
</div>
|
||||
<div className="min-h-screen bg-background">
|
||||
<Navigation />
|
||||
<Hero />
|
||||
<Services />
|
||||
<About />
|
||||
<Contact />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,6 +13,10 @@ export default {
|
|||
},
|
||||
},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Montserrat', 'system-ui', 'sans-serif'],
|
||||
montserrat: ['Montserrat', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
|
|
@ -22,6 +26,7 @@ export default {
|
|||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
glow: "hsl(var(--primary-glow))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
|
|
@ -57,6 +62,25 @@ export default {
|
|||
border: "hsl(var(--sidebar-border))",
|
||||
ring: "hsl(var(--sidebar-ring))",
|
||||
},
|
||||
industrial: {
|
||||
orange: "hsl(var(--industrial-orange))",
|
||||
"orange-glow": "hsl(var(--industrial-orange-glow))",
|
||||
"orange-dark": "hsl(var(--industrial-orange-dark))",
|
||||
charcoal: "hsl(var(--charcoal))",
|
||||
"charcoal-light": "hsl(var(--charcoal-light))",
|
||||
steel: "hsl(var(--steel))",
|
||||
"steel-light": "hsl(var(--steel-light))",
|
||||
},
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-orange': 'var(--gradient-orange)',
|
||||
'gradient-dark': 'var(--gradient-dark)',
|
||||
'gradient-energy': 'var(--gradient-energy)',
|
||||
},
|
||||
boxShadow: {
|
||||
'orange-glow': 'var(--shadow-orange-glow)',
|
||||
'orange-intense': 'var(--shadow-orange-intense)',
|
||||
'dark': 'var(--shadow-dark)',
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
|
|
|
|||
Loading…
Reference in New Issue