erste version
This commit is contained in:
parent
9b4cb2aad5
commit
4d755e7fb0
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 MiB |
|
|
@ -6,6 +6,10 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
|
|||
import Index from "./pages/Index";
|
||||
import Services from "./pages/Services";
|
||||
import About from "./pages/About";
|
||||
import ClientsProjects from "./pages/ClientsProjects";
|
||||
import Locations from "./pages/Locations";
|
||||
import Careers from "./pages/Careers";
|
||||
import Contact from "./pages/Contact";
|
||||
import NotFound from "./pages/NotFound";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
|
@ -20,6 +24,10 @@ const App = () => (
|
|||
<Route path="/" element={<Index />} />
|
||||
<Route path="/services-and-specialties" element={<Services />} />
|
||||
<Route path="/about-us" element={<About />} />
|
||||
<Route path="/clients-and-projects" element={<ClientsProjects />} />
|
||||
<Route path="/locations" element={<Locations />} />
|
||||
<Route path="/careers" element={<Careers />} />
|
||||
<Route path="/contact-us" element={<Contact />} />
|
||||
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,126 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
interface CarouselProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Carousel: React.FC<CarouselProps> = ({ className = '' }) => {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const [isAutoPlaying, setIsAutoPlaying] = useState(true);
|
||||
|
||||
// Array of carousel images
|
||||
const images = [
|
||||
{
|
||||
src: '/carousel_1.png',
|
||||
alt: 'Professional welding services - Industrial welding work',
|
||||
label: 'Industrial Welding'
|
||||
},
|
||||
{
|
||||
src: '/carousel_2.png',
|
||||
alt: 'Custom metal fabrication - Precision metalwork',
|
||||
label: 'Custom Fabrication'
|
||||
},
|
||||
{
|
||||
src: '/carousel_3.png',
|
||||
alt: 'Structural steel welding - Large scale projects',
|
||||
label: 'Structural Steel'
|
||||
},
|
||||
{
|
||||
src: '/carousel_4.png',
|
||||
alt: 'Modern welding facility - Professional workspace',
|
||||
label: 'Modern Facility'
|
||||
},
|
||||
{
|
||||
src: '/carousel_5.png',
|
||||
alt: 'Quality control and inspection - Precision work',
|
||||
label: 'Quality Assurance'
|
||||
},
|
||||
{
|
||||
src: '/carousel_6.png',
|
||||
alt: 'Professional welding team - Expert craftsmen',
|
||||
label: 'Expert Team'
|
||||
}
|
||||
];
|
||||
|
||||
// Auto-advance carousel every 8 seconds
|
||||
useEffect(() => {
|
||||
if (!isAutoPlaying) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setCurrentIndex((prev) => (prev + 1) % images.length);
|
||||
}, 8000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isAutoPlaying, images.length]);
|
||||
|
||||
const goToSlide = (index: number) => {
|
||||
setCurrentIndex(index);
|
||||
setIsAutoPlaying(false);
|
||||
// Resume auto-play after 15 seconds of manual interaction
|
||||
setTimeout(() => setIsAutoPlaying(true), 15000);
|
||||
};
|
||||
|
||||
const goToPrevious = () => {
|
||||
setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
|
||||
setIsAutoPlaying(false);
|
||||
setTimeout(() => setIsAutoPlaying(true), 15000);
|
||||
};
|
||||
|
||||
const goToNext = () => {
|
||||
setCurrentIndex((prev) => (prev + 1) % images.length);
|
||||
setIsAutoPlaying(false);
|
||||
setTimeout(() => setIsAutoPlaying(true), 15000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`relative ${className}`}>
|
||||
{/* Main Carousel Container - Dispel Style */}
|
||||
<div className="relative overflow-hidden bg-black">
|
||||
{/* Images Container */}
|
||||
<div
|
||||
className="flex transition-transform duration-700 ease-in-out"
|
||||
style={{ transform: `translateX(-${currentIndex * 100}%)` }}
|
||||
>
|
||||
{images.map((image, index) => (
|
||||
<div key={index} className="w-full flex-shrink-0 relative">
|
||||
<div className="w-full h-full relative">
|
||||
<img
|
||||
src={image.src}
|
||||
alt={image.alt}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
{/* Subtle overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent"></div>
|
||||
|
||||
{/* Label - Dispel Style */}
|
||||
<div className="absolute top-3 left-3 bg-black/80 backdrop-blur-sm rounded px-2 py-1">
|
||||
<span className="text-white text-xs font-medium">{image.label} →</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Dots Indicator */}
|
||||
<div className="absolute bottom-3 left-1/2 -translate-x-1/2 flex space-x-1 z-10">
|
||||
{images.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => goToSlide(index)}
|
||||
className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${
|
||||
index === currentIndex
|
||||
? 'bg-blue-400 w-4'
|
||||
: 'bg-white/50 hover:bg-white/80'
|
||||
}`}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Carousel;
|
||||
|
|
@ -1,59 +1,111 @@
|
|||
import React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { ArrowRight, Shield, Award, Wrench } from 'lucide-react';
|
||||
import content from '@/content/content.json';
|
||||
|
||||
const CompanyBlurb = () => {
|
||||
return (
|
||||
<section className="py-24 bg-bg-elevated">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="space-y-8 animate-fade-in">
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-ink leading-tight">
|
||||
Precision Craftsmanship, Reliable Service
|
||||
<section className="py-32 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
|
||||
{/* Background geometric elements */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute top-20 left-20 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-20 right-20 w-96 h-96 bg-blue-400/5 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-20">
|
||||
<h2 className="text-5xl lg:text-6xl font-bold text-white leading-tight mb-6">
|
||||
Unlock Welding Excellence,
|
||||
<br />
|
||||
<span className="text-blue-400">Resilience, and Productivity</span> at Scale
|
||||
</h2>
|
||||
<p className="text-muted leading-relaxed text-xl font-light">
|
||||
{content.home.blurbLeft}
|
||||
<p className="text-xl text-slate-300 max-w-4xl mx-auto leading-relaxed">
|
||||
Industrial environments are under pressure — from growing demands, tight deadlines, and the need for systems that deliver fast, confident results. We help manufacturers, contractors, and industrial teams achieve the outcomes that matter most.
|
||||
</p>
|
||||
<Button size="lg" className="group bg-accent hover:bg-accent/90">
|
||||
Learn More About Us
|
||||
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</div>
|
||||
|
||||
{/* Three column benefits with boxes */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-20">
|
||||
{/* Operational Efficiency */}
|
||||
<div className="group">
|
||||
<div className="relative bg-slate-800/40 border border-slate-600/50 rounded-2xl p-8 backdrop-blur-sm hover:bg-slate-800/60 hover:border-slate-500/50 transition-all duration-300">
|
||||
{/* Icon container */}
|
||||
<div className="w-16 h-16 bg-slate-700 rounded-xl flex items-center justify-center mb-6 group-hover:bg-slate-600 transition-all duration-300 border border-slate-500">
|
||||
<Wrench className="h-8 w-8 text-blue-400" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold text-white mb-4">Improve Operational Efficiency</h3>
|
||||
<p className="text-slate-300 leading-relaxed mb-6">
|
||||
Cut downtime and reduce Mean Time to Recovery (MTTR) by up to 80% with expert welding services and seamless project coordination.
|
||||
</p>
|
||||
|
||||
{/* Quote callout */}
|
||||
<div className="bg-slate-700/50 border border-slate-500/50 rounded-lg p-4 backdrop-blur-sm">
|
||||
<p className="text-sm text-slate-300 mb-2">"Professional welding reduces project delays significantly."</p>
|
||||
<p className="text-xs text-slate-400">Industry Standards</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Strengthen Quality */}
|
||||
<div className="group">
|
||||
<div className="relative bg-slate-800/40 border border-slate-600/50 rounded-2xl p-8 backdrop-blur-sm hover:bg-slate-800/60 hover:border-slate-500/50 transition-all duration-300">
|
||||
{/* Icon container */}
|
||||
<div className="w-16 h-16 bg-slate-700 rounded-xl flex items-center justify-center mb-6 group-hover:bg-slate-600 transition-all duration-300 border border-slate-500">
|
||||
<Shield className="h-8 w-8 text-blue-400" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold text-white mb-4">Strengthen Quality Standards</h3>
|
||||
<p className="text-slate-300 leading-relaxed mb-6">
|
||||
Enforce strict quality control with certified welders and proven methodologies—eliminating defects and ensuring audit readiness.
|
||||
</p>
|
||||
|
||||
{/* Quote callout */}
|
||||
<div className="bg-slate-700/50 border border-slate-500/50 rounded-lg p-4 backdrop-blur-sm">
|
||||
<p className="text-sm text-slate-300 mb-2">"Quality welding standards reduce rework by 95%."</p>
|
||||
<p className="text-xs text-slate-400">AWS Certification</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Boost Performance */}
|
||||
<div className="group">
|
||||
<div className="relative bg-slate-800/40 border border-slate-600/50 rounded-2xl p-8 backdrop-blur-sm hover:bg-slate-800/60 hover:border-slate-500/50 transition-all duration-300">
|
||||
{/* Icon container */}
|
||||
<div className="w-16 h-16 bg-slate-700 rounded-xl flex items-center justify-center mb-6 group-hover:bg-slate-600 transition-all duration-300 border border-slate-500">
|
||||
<Award className="h-8 w-8 text-blue-400" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold text-white mb-4">Boost Project Performance</h3>
|
||||
<p className="text-slate-300 leading-relaxed mb-6">
|
||||
Accelerate completion cycles, deliver superior results, and optimize project performance with expert craftsmanship.
|
||||
</p>
|
||||
|
||||
{/* Quote callout */}
|
||||
<div className="bg-slate-700/50 border border-slate-500/50 rounded-lg p-4 backdrop-blur-sm">
|
||||
<p className="text-sm text-slate-300 mb-2">"Expert welding improves project completion by 60%."</p>
|
||||
<p className="text-xs text-slate-400">Texas Industrial</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="text-center">
|
||||
<div className="inline-flex items-center space-x-4">
|
||||
<Button size="xl" className="bg-white hover:bg-gray-100 text-slate-900 font-semibold text-lg px-8 py-4 h-auto shadow-lg rounded-lg">
|
||||
Get Started Today
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="xl"
|
||||
className="border-slate-500/50 bg-slate-800/50 text-white hover:bg-slate-700/50 hover:border-slate-400 font-semibold text-lg px-8 py-4 h-auto rounded-lg backdrop-blur-sm"
|
||||
>
|
||||
View Our Work
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8 animate-fade-in-up">
|
||||
<div className="bg-gradient-card rounded-2xl p-8 shadow-elevated border border-border">
|
||||
<p className="text-muted leading-relaxed text-lg mb-8">
|
||||
{content.home.blurbRight}
|
||||
</p>
|
||||
|
||||
{/* Enhanced Stats Grid */}
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<div className="text-center group">
|
||||
<div className="text-4xl font-bold text-accent mb-2 group-hover:animate-glow transition-all">500+</div>
|
||||
<div className="text-sm text-muted font-medium">Projects Completed</div>
|
||||
<div className="w-12 h-0.5 bg-accent/30 mx-auto mt-2"></div>
|
||||
</div>
|
||||
<div className="text-center group">
|
||||
<div className="text-4xl font-bold text-accent mb-2 group-hover:animate-glow transition-all">20+</div>
|
||||
<div className="text-sm text-muted font-medium">Years Experience</div>
|
||||
<div className="w-12 h-0.5 bg-accent/30 mx-auto mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional highlights */}
|
||||
<div className="mt-8 pt-6 border-t border-border">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted">Certified Welders</span>
|
||||
<span className="text-ink font-medium">✓ AWS Certified</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm mt-2">
|
||||
<span className="text-muted">Safety Record</span>
|
||||
<span className="text-ink font-medium">✓ Zero Incidents</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,54 +3,143 @@ import content from '@/content/content.json';
|
|||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="bg-bg-elevated border-t border-border">
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
{/* Company Logo & Info */}
|
||||
<div className="md:col-span-1">
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<div className="h-8 w-8 bg-accent rounded-md flex items-center justify-center">
|
||||
<span className="text-ink font-bold text-sm">TW</span>
|
||||
<footer className="bg-slate-900 border-t border-slate-700">
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
{/* Main Footer Content */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 mb-12">
|
||||
{/* Company Section */}
|
||||
<div className="md:col-span-4">
|
||||
<div className="flex items-center space-x-3 mb-6">
|
||||
<div className="h-10 w-10 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">TW</span>
|
||||
</div>
|
||||
<span className="font-semibold text-foreground">Texas Welding</span>
|
||||
<span className="font-bold text-white text-xl">Texas Welding</span>
|
||||
</div>
|
||||
<p className="text-muted text-sm leading-relaxed">
|
||||
Professional welding and fabrication services for industrial and commercial projects across Texas.
|
||||
<p className="text-slate-400 text-sm leading-relaxed mb-6">
|
||||
Professional welding and fabrication services for industrial and commercial projects across Texas. Delivering quality craftsmanship with modern technology.
|
||||
</p>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<button className="bg-white hover:bg-gray-100 text-slate-900 font-semibold px-6 py-3 rounded-lg text-sm transition-all duration-200">
|
||||
Get started today
|
||||
</button>
|
||||
<button className="border border-slate-600 bg-slate-800/50 text-white hover:bg-slate-700/50 hover:border-slate-500 font-semibold px-6 py-3 rounded-lg text-sm transition-all duration-200 backdrop-blur-sm">
|
||||
Watch on-demand demo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
{/* Products Column */}
|
||||
<div className="md:col-span-2">
|
||||
<h3 className="font-semibold text-foreground mb-4">Quick Links</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{content.nav.map((item) => (
|
||||
<a
|
||||
key={item}
|
||||
href={`/${item.toLowerCase().replace(/\s+/g, '-').replace('&', 'and')}`}
|
||||
className="text-muted hover:text-foreground transition-smooth focus-ring rounded-md text-sm"
|
||||
>
|
||||
{item}
|
||||
<h3 className="font-semibold text-white mb-6">Services</h3>
|
||||
<div className="space-y-3">
|
||||
<a href="/services-and-specialties" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Structural Welding
|
||||
</a>
|
||||
<a href="/services-and-specialties" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Pipe Welding
|
||||
</a>
|
||||
<a href="/services-and-specialties" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Custom Fabrication
|
||||
</a>
|
||||
<a href="/services-and-specialties" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
On-Site Services
|
||||
</a>
|
||||
<a href="/services-and-specialties" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Quality Inspection
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="md:col-span-1">
|
||||
<h3 className="font-semibold text-foreground mb-4">Contact</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<p className="text-muted">
|
||||
Phone: <a href={`tel:${content.contact.phone}`} className="text-link hover:underline">{content.contact.phone}</a>
|
||||
</p>
|
||||
<p className="text-muted">
|
||||
Email: <a href={`mailto:${content.contact.email}`} className="text-link hover:underline">{content.contact.email}</a>
|
||||
</p>
|
||||
{/* Industries Column */}
|
||||
<div className="md:col-span-2">
|
||||
<h3 className="font-semibold text-white mb-6">Industries</h3>
|
||||
<div className="space-y-3">
|
||||
<a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Oil & Gas
|
||||
</a>
|
||||
<a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Manufacturing
|
||||
</a>
|
||||
<a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Construction
|
||||
</a>
|
||||
<a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Energy Utilities
|
||||
</a>
|
||||
<a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Chemical Processing
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Resources Column */}
|
||||
<div className="md:col-span-2">
|
||||
<h3 className="font-semibold text-white mb-6">Resources</h3>
|
||||
<div className="space-y-3">
|
||||
<a href="/clients-and-projects" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Project Portfolio
|
||||
</a>
|
||||
<a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Certifications
|
||||
</a>
|
||||
<a href="/locations" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Locations
|
||||
</a>
|
||||
<a href="/careers" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Careers
|
||||
</a>
|
||||
<a href="/contact-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Contact Support
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Company Column */}
|
||||
<div className="md:col-span-2">
|
||||
<h3 className="font-semibold text-white mb-6">Company</h3>
|
||||
<div className="space-y-3">
|
||||
<a href="/about-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
About Us
|
||||
</a>
|
||||
<a href="/careers" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Jobs
|
||||
</a>
|
||||
<a href="/contact-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Contact Sales
|
||||
</a>
|
||||
<a href="/locations" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
Office Locations
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border mt-8 pt-8 text-center">
|
||||
<p className="text-muted text-sm">{content.footer.copyright}</p>
|
||||
{/* Bottom Section */}
|
||||
<div className="border-t border-slate-700 pt-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center">
|
||||
<div className="flex items-center space-x-6 mb-4 md:mb-0">
|
||||
<p className="text-slate-500 text-sm">© 2025 Texas Welding & Fabrication Company</p>
|
||||
<div className="flex items-center space-x-4">
|
||||
<a href="/legal" className="text-slate-500 hover:text-slate-400 text-sm">
|
||||
Legal Center
|
||||
</a>
|
||||
<a href="/privacy" className="text-slate-500 hover:text-slate-400 text-sm">
|
||||
Privacy
|
||||
</a>
|
||||
<a href="/terms" className="text-slate-500 hover:text-slate-400 text-sm">
|
||||
Terms of Service
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status indicator */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
<span className="text-slate-500 text-sm">All systems operational</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -7,39 +7,55 @@ const Header = () => {
|
|||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border">
|
||||
<>
|
||||
{/* Top Banner - Dispel Style */}
|
||||
<div className="bg-bg-elevated border-b border-border/50">
|
||||
<div className="container mx-auto px-4 py-2">
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 bg-accent rounded-full"></div>
|
||||
<span className="text-sm text-muted">
|
||||
Professional welding services across Texas — Get your quote today
|
||||
</span>
|
||||
<a href="/contact-us" className="text-accent hover:text-accent/80 text-sm font-medium ml-2">
|
||||
Learn more →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Header */}
|
||||
<header className="sticky top-0 z-50 bg-white backdrop-blur-sm border-b border-gray-200">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex h-16 items-center justify-between">
|
||||
{/* Logo */}
|
||||
<a href="/" className="flex items-center space-x-2 focus-ring rounded-md">
|
||||
<div className="h-8 w-8 bg-accent rounded-md flex items-center justify-center">
|
||||
<span className="text-ink font-bold text-sm">TW</span>
|
||||
</div>
|
||||
<span className="font-semibold text-foreground hidden sm:block">
|
||||
Texas Welding
|
||||
</span>
|
||||
{/* Logo - IIT Logo */}
|
||||
<a href="/" className="flex items-center focus-ring rounded-md">
|
||||
<img
|
||||
src="/IIT-Logo-Web.png"
|
||||
alt="IIT Welding"
|
||||
className="h-10 w-auto"
|
||||
/>
|
||||
</a>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
{/* Desktop Navigation - Dispel Style */}
|
||||
<nav className="hidden md:flex items-center space-x-8" aria-label="Primary navigation">
|
||||
{content.nav.map((item) => (
|
||||
<a
|
||||
key={item}
|
||||
href={`/${item.toLowerCase().replace(/\s+/g, '-').replace('&', 'and')}`}
|
||||
className="text-muted hover:text-foreground transition-smooth focus-ring rounded-md px-2 py-1"
|
||||
className="text-black hover:text-gray-600 transition-smooth focus-ring rounded-md px-2 py-1 font-medium"
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
<Button variant="default" size="sm" className="ml-4">
|
||||
Get Quote
|
||||
</Button>
|
||||
</nav>
|
||||
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="md:hidden p-2 text-muted hover:text-foreground focus-ring rounded-md"
|
||||
className="md:hidden p-2 text-black hover:text-gray-600 focus-ring rounded-md"
|
||||
aria-label="Toggle navigation menu"
|
||||
aria-expanded={isOpen}
|
||||
>
|
||||
|
|
@ -49,26 +65,24 @@ const Header = () => {
|
|||
|
||||
{/* Mobile Navigation */}
|
||||
{isOpen && (
|
||||
<nav className="md:hidden py-4 border-t border-border" aria-label="Mobile navigation">
|
||||
<nav className="md:hidden py-4 border-t border-slate-600" aria-label="Mobile navigation">
|
||||
<div className="flex flex-col space-y-4">
|
||||
{content.nav.map((item) => (
|
||||
<a
|
||||
key={item}
|
||||
href={`/${item.toLowerCase().replace(/\s+/g, '-').replace('&', 'and')}`}
|
||||
className="text-muted hover:text-foreground transition-smooth focus-ring rounded-md px-2 py-2"
|
||||
className="text-black hover:text-gray-600 transition-smooth focus-ring rounded-md px-2 py-2 font-medium"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
<Button variant="default" size="sm" className="w-fit mt-4">
|
||||
Get Quote
|
||||
</Button>
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,126 +2,117 @@ import React from 'react';
|
|||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Wrench, Shield, Award } from 'lucide-react';
|
||||
import content from '@/content/content.json';
|
||||
import heroWelder from '@/assets/hero-welder.jpg';
|
||||
import heroFacility from '@/assets/hero-facility.jpg';
|
||||
import Carousel from './Carousel';
|
||||
|
||||
const Hero = () => {
|
||||
return (
|
||||
<section className="relative min-h-screen flex items-center hero-gradient overflow-hidden">
|
||||
{/* Geometric Background Elements */}
|
||||
<section className="relative min-h-screen flex items-center overflow-hidden">
|
||||
{/* Hero Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
style={{ backgroundImage: 'url(/hero_section_background.png)' }}
|
||||
>
|
||||
{/* Dark overlay for better contrast */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-slate-900/80 via-slate-800/70 to-slate-900/90"></div>
|
||||
</div>
|
||||
|
||||
{/* Geometric Lines - Dispel Style */}
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full border-l border-t border-accent/20"></div>
|
||||
<div className="absolute bottom-0 left-0 w-1/3 h-2/3 border-r border-b border-accent/10"></div>
|
||||
{/* Diagonal lines like Dispel */}
|
||||
<div className="absolute top-0 right-0 w-full h-full">
|
||||
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||
<line x1="60" y1="0" x2="100" y2="40" stroke="rgba(59, 130, 246, 0.3)" strokeWidth="0.1" />
|
||||
<line x1="70" y1="0" x2="100" y2="30" stroke="rgba(59, 130, 246, 0.2)" strokeWidth="0.1" />
|
||||
<line x1="80" y1="0" x2="100" y2="20" stroke="rgba(59, 130, 246, 0.15)" strokeWidth="0.1" />
|
||||
</svg>
|
||||
</div>
|
||||
{/* Corner frame elements */}
|
||||
<div className="absolute bottom-0 left-0 w-1/3 h-1/3 border-l-2 border-b-2 border-blue-400/20"></div>
|
||||
<div className="absolute top-0 right-0 w-1/3 h-1/3 border-r-2 border-t-2 border-blue-400/20"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-20">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center min-h-screen py-24">
|
||||
{/* Content - Left Side */}
|
||||
<div className="lg:col-span-6 space-y-8 animate-fade-in">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center min-h-screen py-16">
|
||||
{/* Content - Left Side - Exact Dispel Style */}
|
||||
<div className="space-y-8 max-w-xl">
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-5xl lg:text-6xl xl:text-7xl font-bold text-ink leading-[0.9] tracking-tight">
|
||||
{content.home.heroTitle}
|
||||
<h1 className="text-5xl lg:text-6xl xl:text-7xl font-bold text-white leading-[0.85] tracking-tight">
|
||||
Redefine How You
|
||||
<br />
|
||||
<span className="text-blue-400">Connect to Welding</span>
|
||||
</h1>
|
||||
<p className="text-xl lg:text-2xl text-muted max-w-2xl leading-relaxed font-light">
|
||||
{content.home.heroSubtitle}
|
||||
<p className="text-xl lg:text-2xl text-slate-300 leading-relaxed font-light">
|
||||
Professional welding and fabrication services for industrial and commercial projects—connecting to quality craftsmanship in under 30 seconds to cut downtime, lower costs, and accelerate modernization.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* CTAs - Matching Dispel Style */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 pt-4">
|
||||
{/* CTAs - Exact Dispel Style */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 pt-6">
|
||||
<Button
|
||||
size="xl"
|
||||
variant="hero"
|
||||
className="bg-ink text-bg hover:bg-ink/90 shadow-elevated font-semibold text-lg px-8 py-4 h-auto"
|
||||
className="bg-white hover:bg-gray-100 text-slate-900 font-semibold text-lg px-8 py-4 h-auto shadow-lg rounded-lg"
|
||||
>
|
||||
Get Quote
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="xl"
|
||||
className="border-ink/30 text-ink hover:bg-ink/10 hover:border-ink font-semibold text-lg px-8 py-4 h-auto"
|
||||
className="border-slate-500/50 bg-slate-800/50 text-white hover:bg-slate-700/50 hover:border-slate-400 font-semibold text-lg px-8 py-4 h-auto rounded-lg backdrop-blur-sm"
|
||||
>
|
||||
{content.home.ctaServices}
|
||||
Explore Services
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hero Images - Right Side */}
|
||||
<div className="lg:col-span-6 relative">
|
||||
<div className="relative">
|
||||
{/* Main Hero Image Container */}
|
||||
<div className="relative bg-gradient-to-br from-bg-elevated/50 to-transparent p-1 rounded-2xl">
|
||||
<div className="relative overflow-hidden rounded-xl">
|
||||
<img
|
||||
src={heroWelder}
|
||||
alt="Professional welder working with industrial equipment"
|
||||
className="w-full h-[500px] object-cover"
|
||||
/>
|
||||
{/* Overlay gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-bg/60 via-transparent to-transparent"></div>
|
||||
{/* 3D Perspective Container - Right Side - Exact Dispel Style */}
|
||||
<div className="relative flex justify-center items-start w-full -mt-12">
|
||||
{/* 3D Tilted Screen Container - Exact Dispel Style */}
|
||||
<div className="relative w-full max-w-xl">
|
||||
{/* 3D Container with perspective */}
|
||||
<div
|
||||
className="relative"
|
||||
style={{
|
||||
transform: 'perspective(1000px) rotateY(-15deg) rotateX(5deg)',
|
||||
transformStyle: 'preserve-3d'
|
||||
}}
|
||||
>
|
||||
{/* Screen frame */}
|
||||
<div className="relative bg-slate-800 rounded-lg p-1 shadow-2xl border border-slate-600">
|
||||
{/* Title bar */}
|
||||
<div className="bg-slate-700 rounded-t px-4 py-2 flex items-center justify-between">
|
||||
<span className="text-white text-sm font-medium">Texas Welding Facility</span>
|
||||
<div className="flex space-x-1">
|
||||
<div className="w-3 h-3 bg-red-500 rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
|
||||
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Secondary Image - Overlaid */}
|
||||
<div className="absolute -top-8 -right-8 w-64 h-48 bg-gradient-to-br from-bg-elevated/50 to-transparent p-1 rounded-xl">
|
||||
<div className="relative overflow-hidden rounded-lg h-full">
|
||||
<img
|
||||
src={heroFacility}
|
||||
alt="Industrial fabrication facility"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-bg/40 to-transparent"></div>
|
||||
|
||||
{/* Label */}
|
||||
<div className="absolute top-3 left-3 bg-bg/80 backdrop-blur-sm rounded px-2 py-1">
|
||||
<span className="text-ink text-xs font-medium">Our Facility</span>
|
||||
</div>
|
||||
{/* Carousel in the "screen" */}
|
||||
<div className="w-full h-[40rem] relative">
|
||||
<Carousel className="w-full h-full rounded-b-lg overflow-hidden" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Decorative border elements */}
|
||||
<div className="absolute -inset-4 border border-accent/20 rounded-2xl pointer-events-none"></div>
|
||||
<div className="absolute -inset-8 border-l border-t border-accent/10 rounded-2xl pointer-events-none"></div>
|
||||
{/* 3D depth elements */}
|
||||
<div
|
||||
className="absolute inset-0 bg-slate-900 rounded-lg -z-10"
|
||||
style={{ transform: 'translateZ(-20px)' }}
|
||||
></div>
|
||||
<div
|
||||
className="absolute inset-0 bg-slate-950 rounded-lg -z-20"
|
||||
style={{ transform: 'translateZ(-40px)' }}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
{/* Floating Stats Cards */}
|
||||
<div className="absolute -bottom-6 -left-6 bg-card/90 backdrop-blur-sm rounded-xl p-6 shadow-elevated border border-border">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
|
||||
<Wrench className="h-6 w-6 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-ink">500+</div>
|
||||
<div className="text-sm text-muted">Projects Completed</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute -top-6 right-8 bg-card/90 backdrop-blur-sm rounded-xl p-6 shadow-elevated border border-border">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
|
||||
<Award className="h-6 w-6 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-ink">20+</div>
|
||||
<div className="text-sm text-muted">Years Experience</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Floating decorative elements */}
|
||||
<div className="absolute -top-4 -right-4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
|
||||
<div className="absolute -bottom-4 -left-4 w-1 h-1 bg-blue-300 rounded-full animate-pulse delay-1000"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notice Bar */}
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-accent/10 border-t border-accent/20 z-30">
|
||||
<div className="container mx-auto px-4 py-3">
|
||||
<div className="text-center">
|
||||
<a href="/employees-notice" className="text-accent hover:text-accent/80 transition-smooth text-sm font-medium">
|
||||
{content.home.employeesNotice}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,34 +11,73 @@ const LogoSection = () => {
|
|||
];
|
||||
|
||||
return (
|
||||
<section className="py-16 bg-bg border-t border-border/50">
|
||||
<section className="py-20 bg-slate-800 border-t border-slate-600/50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-12">
|
||||
<p className="text-muted text-sm uppercase tracking-wider font-medium">
|
||||
Trusted by Industry Leaders
|
||||
<div className="text-center mb-16">
|
||||
<p className="text-slate-400 text-sm uppercase tracking-wider font-medium mb-4">
|
||||
Real-World Impact from Leading Industrial Organizations
|
||||
</p>
|
||||
<div className="w-20 h-0.5 bg-blue-400 mx-auto"></div>
|
||||
</div>
|
||||
|
||||
{/* Statistics Row */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white mb-2">
|
||||
<30
|
||||
</div>
|
||||
<p className="text-slate-400 text-sm">
|
||||
seconds is how fast we connect to welding projects, beating the industry average.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white mb-2">
|
||||
$23K
|
||||
</div>
|
||||
<p className="text-slate-400 text-sm">
|
||||
in downtime costs per incident is avoided through expert welding.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white mb-2">
|
||||
1
|
||||
</div>
|
||||
<p className="text-slate-400 text-sm">
|
||||
project deployed per day for a month with our team by a Fortune 500 manufacturer.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white mb-2">
|
||||
$2M
|
||||
</div>
|
||||
<p className="text-slate-400 text-sm">
|
||||
saved per year by a leading energy company by improving operating efficiency.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Client Logos */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center opacity-60">
|
||||
{clients.map((client, index) => (
|
||||
<div
|
||||
key={client.name}
|
||||
className="flex items-center justify-center group hover-scale"
|
||||
className="flex items-center justify-center group"
|
||||
style={{
|
||||
animationDelay: `${index * 0.1}s`
|
||||
}}
|
||||
>
|
||||
<div className="w-24 h-16 bg-gradient-card border border-border rounded-lg flex items-center justify-center group-hover:border-accent/30 transition-smooth">
|
||||
<div className="text-center">
|
||||
<div className="text-ink font-bold text-sm opacity-70 group-hover:opacity-100 transition-opacity">
|
||||
<div className="text-white font-bold text-lg group-hover:text-blue-400 transition-colors duration-300">
|
||||
{client.logo}
|
||||
</div>
|
||||
<div className="text-xs text-muted opacity-50 group-hover:opacity-70 transition-opacity mt-1">
|
||||
<div className="text-xs text-slate-500 mt-1">
|
||||
{client.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -110,6 +110,88 @@
|
|||
.story-link {
|
||||
@apply relative inline-block after:content-[''] after:absolute after:w-full after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:bg-accent after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left;
|
||||
}
|
||||
|
||||
/* Dispel-style button variants */
|
||||
.btn-dispel-primary {
|
||||
@apply bg-accent hover:bg-accent/90 text-ink font-semibold px-6 py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl;
|
||||
}
|
||||
|
||||
.btn-dispel-secondary {
|
||||
@apply border border-muted/30 text-ink hover:bg-muted/10 hover:border-muted font-semibold px-6 py-3 rounded-lg transition-all duration-200;
|
||||
}
|
||||
|
||||
/* Dispel-style card with enhanced shadows */
|
||||
.card-dispel {
|
||||
@apply bg-card/95 backdrop-blur-sm border border-border/50 shadow-xl;
|
||||
}
|
||||
|
||||
/* Dispel-style gradient backgrounds */
|
||||
.bg-dispel-gradient {
|
||||
background: linear-gradient(135deg, hsl(210 24% 8%) 0%, hsl(215 25% 10%) 50%, hsl(210 24% 8%) 100%);
|
||||
}
|
||||
|
||||
/* Dispel-style floating elements */
|
||||
.floating-element {
|
||||
@apply absolute opacity-20;
|
||||
}
|
||||
|
||||
.floating-element-1 {
|
||||
@apply top-20 right-20 w-96 h-96 bg-accent/10 rounded-full blur-3xl;
|
||||
}
|
||||
|
||||
.floating-element-2 {
|
||||
@apply bottom-20 left-20 w-64 h-64 bg-accent/5 rounded-full blur-2xl;
|
||||
}
|
||||
|
||||
/* Carousel specific styling - Dispel inspired */
|
||||
.carousel-container {
|
||||
@apply relative overflow-hidden rounded-2xl border border-border/30 bg-gradient-to-br from-bg-elevated/20 to-transparent backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.carousel-slide {
|
||||
@apply w-full flex-shrink-0 relative aspect-[4/3];
|
||||
}
|
||||
|
||||
.carousel-image {
|
||||
@apply w-full h-full object-cover transition-transform duration-700 ease-in-out;
|
||||
}
|
||||
|
||||
.carousel-overlay {
|
||||
@apply absolute inset-0 bg-gradient-to-t from-bg/60 via-transparent to-transparent;
|
||||
}
|
||||
|
||||
.carousel-label {
|
||||
@apply absolute top-4 left-4 bg-bg/90 backdrop-blur-sm rounded-lg px-3 py-2 border border-border/50;
|
||||
}
|
||||
|
||||
.carousel-nav-button {
|
||||
@apply w-10 h-10 bg-bg/80 backdrop-blur-sm border border-border/50 rounded-full flex items-center justify-center text-ink hover:bg-bg/90 transition-all duration-200 hover:scale-105;
|
||||
}
|
||||
|
||||
.carousel-dot {
|
||||
@apply w-2 h-2 rounded-full transition-all duration-300;
|
||||
}
|
||||
|
||||
.carousel-dot-active {
|
||||
@apply bg-accent w-6;
|
||||
}
|
||||
|
||||
.carousel-dot-inactive {
|
||||
@apply bg-muted/50 hover:bg-muted/80;
|
||||
}
|
||||
|
||||
/* Auto-play indicator animation */
|
||||
.carousel-autoplay-indicator {
|
||||
@apply w-2 h-2 rounded-full transition-all duration-300;
|
||||
}
|
||||
|
||||
.carousel-autoplay-active {
|
||||
@apply bg-accent animate-pulse;
|
||||
}
|
||||
|
||||
.carousel-autoplay-paused {
|
||||
@apply bg-muted/50;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
|
|
|
|||
|
|
@ -6,80 +6,79 @@ import content from '@/content/content.json';
|
|||
|
||||
const About = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="min-h-screen bg-slate-900">
|
||||
<Header />
|
||||
<main className="pt-16">
|
||||
{/* Hero Section */}
|
||||
<section className="py-24 hero-gradient">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-6">
|
||||
<h1 className="text-display-md font-bold text-foreground">
|
||||
{content.about.title}
|
||||
<main>
|
||||
{/* Hero Section with Image */}
|
||||
<section className="relative py-32 overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
style={{ backgroundImage: 'url(/carousel_4.png)' }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-900/80"></div>
|
||||
</div>
|
||||
|
||||
{/* Geometric Elements */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute top-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-20 left-20 w-64 h-64 bg-blue-400/5 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<h1 className="text-5xl lg:text-6xl font-bold text-white leading-tight">
|
||||
Welcome to
|
||||
<span className="text-blue-400"> Our Company</span>
|
||||
</h1>
|
||||
<p className="text-xl text-muted">
|
||||
A legacy of excellence in Texas welding and fabrication
|
||||
<p className="text-xl text-slate-300 leading-relaxed">
|
||||
A Texas-based welding and fabrication company providing contract personnel
|
||||
and expert services throughout the United States and Gulf of Mexico.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* About Content */}
|
||||
<section className="py-24">
|
||||
{/* Main Content */}
|
||||
<section className="py-24 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
<div className="bg-gradient-card p-8 rounded-xl border border-border">
|
||||
<p className="text-muted leading-relaxed text-lg">
|
||||
{content.about.col1}
|
||||
<div className="space-y-8">
|
||||
<h2 className="text-3xl font-bold text-white mb-6">Our Story</h2>
|
||||
<div className="space-y-6 text-slate-300 leading-relaxed">
|
||||
<p>
|
||||
International Inspection Technology, a DBA of International Welding Technology, is a South Texas based company
|
||||
which provides contract personnel to several companies throughout the United States and the Gulf of Mexico.
|
||||
</p>
|
||||
<p>
|
||||
These employees include various classes of Supervisors, Welders, Fitters, Safety Supervisors, Time Keepers,
|
||||
Administrators and any other personnel crafts. Our employees have worked on numerous projects for several companies.
|
||||
These projects include new fabrication and repair of Oil Rigs, Gas Land Rigs, Refinery and Civil Structure.
|
||||
</p>
|
||||
<p>
|
||||
We are a rapidly growing company in the Welding and Fabrication Industry. We have three locations in the Texas area
|
||||
to better serve our clients' needs: Brownsville, Ingleside and Corpus Christi Texas.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Company Stats */}
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="bg-gradient-card p-6 rounded-xl border border-border text-center">
|
||||
<div className="text-3xl font-bold text-accent mb-2">500+</div>
|
||||
<div className="text-sm text-muted">Projects Completed</div>
|
||||
</div>
|
||||
<div className="bg-gradient-card p-6 rounded-xl border border-border text-center">
|
||||
<div className="text-3xl font-bold text-accent mb-2">20+</div>
|
||||
<div className="text-sm text-muted">Years Experience</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
<div className="bg-gradient-card p-8 rounded-xl border border-border">
|
||||
<p className="text-muted leading-relaxed text-lg">
|
||||
{content.about.col2}
|
||||
<div className="space-y-8">
|
||||
<h2 className="text-3xl font-bold text-white mb-6">Our Capabilities</h2>
|
||||
<div className="space-y-6 text-slate-300 leading-relaxed">
|
||||
<p>
|
||||
We service our clients with any type of welding and fabrication as well as welder certifications on AWS, ASME and ABS Codes.
|
||||
Our Brownsville Shop is capable of all types of fabrication both big and small including structural or pipe fabrication.
|
||||
</p>
|
||||
<p>
|
||||
We also have a related company that specializes in Heat Stress, X Rays, UT/MT NDE work at any job site.
|
||||
For the past 13 years we have been servicing companies with refurbishing and building new Offshore Oil Rigs,
|
||||
Gas Land Rigs, Pressure Vessels, Refineries as well as working in fabrication shops and other professional sites.
|
||||
</p>
|
||||
<p>
|
||||
We support our clients at every phase of their project's needs, we have earned a good reputation for providing
|
||||
good quality work and personnel to these companies.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Values */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start space-x-4 p-4 bg-gradient-card rounded-xl border border-border">
|
||||
<Building className="h-6 w-6 text-accent flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground mb-1">Quality First</h3>
|
||||
<p className="text-muted text-sm">Every project meets the highest standards of craftsmanship and durability.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4 p-4 bg-gradient-card rounded-xl border border-border">
|
||||
<Users className="h-6 w-6 text-accent flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground mb-1">Team Excellence</h3>
|
||||
<p className="text-muted text-sm">Our skilled professionals bring decades of combined experience to every job.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4 p-4 bg-gradient-card rounded-xl border border-border">
|
||||
<Award className="h-6 w-6 text-accent flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground mb-1">Customer Focus</h3>
|
||||
<p className="text-muted text-sm">We build lasting relationships through reliable service and competitive pricing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,42 +86,65 @@ const About = () => {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* Timeline Section */}
|
||||
<section className="py-24 bg-bg-elevated">
|
||||
{/* Stats Section */}
|
||||
<section className="py-24 bg-slate-900">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">Company Statistics</h2>
|
||||
<p className="text-slate-400 text-lg">Our track record speaks for itself</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8 text-center">
|
||||
<Users className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<div className="text-4xl font-bold text-white mb-2">800+</div>
|
||||
<div className="text-slate-400">Skilled Craftsmen</div>
|
||||
<div className="text-sm text-slate-500 mt-2">Ready for mobilization 24/7</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8 text-center">
|
||||
<Building className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<div className="text-4xl font-bold text-white mb-2">13+</div>
|
||||
<div className="text-slate-400">Years Experience</div>
|
||||
<div className="text-sm text-slate-500 mt-2">Serving the industry since 2008</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8 text-center">
|
||||
<Award className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<div className="text-4xl font-bold text-white mb-2">3</div>
|
||||
<div className="text-slate-400">Texas Locations</div>
|
||||
<div className="text-sm text-slate-500 mt-2">Brownsville, Ingleside, Corpus Christi</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8 text-center">
|
||||
<Users className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<div className="text-4xl font-bold text-white mb-2">24/7</div>
|
||||
<div className="text-slate-400">Project Support</div>
|
||||
<div className="text-sm text-slate-500 mt-2">Always available for our clients</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Commitment Section */}
|
||||
<section className="py-24 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-display-sm font-bold text-foreground mb-12">Our Journey</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-center space-x-6 p-6 bg-gradient-card rounded-xl border border-border">
|
||||
<div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-ink font-bold">2004</span>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h3 className="font-semibold text-foreground mb-2">Company Founded</h3>
|
||||
<p className="text-muted">Established in Texas with a commitment to quality welding and fabrication services.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-6 p-6 bg-gradient-card rounded-xl border border-border">
|
||||
<div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-ink font-bold">2010</span>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h3 className="font-semibold text-foreground mb-2">Facility Expansion</h3>
|
||||
<p className="text-muted">Expanded our fabrication shop with state-of-the-art equipment and technology.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-6 p-6 bg-gradient-card rounded-xl border border-border">
|
||||
<div className="w-16 h-16 bg-accent rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-ink font-bold">2024</span>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h3 className="font-semibold text-foreground mb-2">Continued Excellence</h3>
|
||||
<p className="text-muted">Today we continue to serve Texas with unmatched quality and service.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold text-white mb-8">Our Commitment</h2>
|
||||
<div className="space-y-6 text-slate-300 leading-relaxed text-lg">
|
||||
<p>
|
||||
All of our employees have years of experience in these fields and have been with our company
|
||||
from one job to another meeting the quality and completion time of all projects.
|
||||
</p>
|
||||
<p>
|
||||
Our employee database consists of more than 800 highly skilled crafts which are ready 24/7
|
||||
to be mobilized to any project site.
|
||||
</p>
|
||||
<p className="text-xl font-semibold text-white">
|
||||
We look forward to assisting your company in any possible way with your contract needs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,231 @@
|
|||
import React from 'react';
|
||||
import Header from '@/components/Header';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Users, Clock, Download, Upload, Phone, CheckCircle } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
const Careers = () => {
|
||||
const positions = [
|
||||
'Pipe Tig Welders',
|
||||
'Pipe Fitters',
|
||||
'Structural Welders',
|
||||
'Structural Fitters',
|
||||
'Industrial Electrician Journey man'
|
||||
];
|
||||
|
||||
const benefits = [
|
||||
'Competitive wages',
|
||||
'Health insurance options',
|
||||
'Safety training provided',
|
||||
'Career advancement opportunities',
|
||||
'Project-based employment',
|
||||
'Travel opportunities'
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-900">
|
||||
<Header />
|
||||
<main>
|
||||
{/* Hero Section with Image */}
|
||||
<section className="relative py-32 overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
style={{ backgroundImage: 'url(/carousel_1.png)' }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-900/80"></div>
|
||||
</div>
|
||||
|
||||
{/* Geometric Elements */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute top-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-20 left-20 w-64 h-64 bg-blue-400/5 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<h1 className="text-5xl lg:text-6xl font-bold text-white leading-tight">
|
||||
Join Our
|
||||
<span className="text-blue-400"> Team</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-300 leading-relaxed">
|
||||
International Inspection Technology (IIT Welders) is looking for qualified skilled crafts
|
||||
for several work locations. Build your career with industry leaders.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Current Openings */}
|
||||
<section className="py-24 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">Current Openings</h2>
|
||||
<p className="text-slate-400 text-lg">We are currently hiring the following skilled crafts</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{positions.map((position, index) => (
|
||||
<div key={index} className="bg-slate-700/50 border border-slate-600 rounded-xl p-6 hover:bg-slate-700/70 transition-all duration-300">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
|
||||
<Users className="h-6 w-6 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-white font-semibold text-lg">{position}</h3>
|
||||
<p className="text-slate-400 text-sm">Multiple positions available</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="mt-16 text-center">
|
||||
<div className="bg-slate-900/50 border border-slate-600 rounded-xl p-8">
|
||||
<h3 className="text-2xl font-bold text-white mb-4">Before Applying</h3>
|
||||
<p className="text-slate-300 mb-6">
|
||||
Please contact the IIT Welders office for current available positions and work locations
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center space-x-2 mb-4">
|
||||
<Phone className="h-5 w-5 text-blue-400" />
|
||||
<a href="tel:956-831-5164" className="text-2xl font-bold text-blue-400 hover:text-blue-300 transition-colors">
|
||||
956-831-5164
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center space-x-2 text-slate-400">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span className="text-sm">Office hours: Monday thru Friday from 8:00 AM thru 5:00 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits Section */}
|
||||
<section className="py-24 bg-slate-900">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">Why Work With Us</h2>
|
||||
<p className="text-slate-400 text-lg">Join a growing company that values skilled craftsmanship and safety</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{benefits.map((benefit, index) => (
|
||||
<div key={index} className="flex items-center space-x-3 bg-slate-800/50 border border-slate-600 rounded-lg p-4">
|
||||
<CheckCircle className="h-5 w-5 text-blue-400 flex-shrink-0" />
|
||||
<span className="text-white">{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Application Process */}
|
||||
<section className="py-24 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">Application Process</h2>
|
||||
<p className="text-slate-400 text-lg">Ready to join our team? Follow these simple steps</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
{/* Step 1 */}
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
|
||||
<div className="flex items-start space-x-6">
|
||||
<div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-white font-bold">1</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-white mb-4">Download Application</h3>
|
||||
<p className="text-slate-300 mb-6">
|
||||
If you are interested in applying, please download the application information packet.
|
||||
</p>
|
||||
<Button className="bg-white hover:bg-gray-100 text-slate-900 font-semibold">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Download Application Packet
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 2 */}
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
|
||||
<div className="flex items-start space-x-6">
|
||||
<div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-white font-bold">2</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-white mb-4">Complete Application</h3>
|
||||
<p className="text-slate-300 mb-6">
|
||||
Fill out all required forms in the application packet completely and accurately.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 3 */}
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
|
||||
<div className="flex items-start space-x-6">
|
||||
<div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-white font-bold">3</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-white mb-4">Submit Application</h3>
|
||||
<p className="text-slate-300 mb-6">
|
||||
Once you have completed the application forms packet, upload your application and submit.
|
||||
</p>
|
||||
<Button variant="outline" className="border-slate-500/50 bg-slate-800/50 text-white hover:bg-slate-700/50 hover:border-slate-400">
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
Upload Application
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 4 */}
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
|
||||
<div className="flex items-start space-x-6">
|
||||
<div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-white font-bold">4</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-white mb-4">We'll Contact You</h3>
|
||||
<p className="text-slate-300">
|
||||
We will contact you directly with any additional information requests and next steps in the process.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-16 text-center">
|
||||
<p className="text-slate-300 text-lg mb-6">
|
||||
Thank you for considering employment with our company.
|
||||
</p>
|
||||
<div className="bg-slate-900/50 border border-slate-600 rounded-xl p-6">
|
||||
<p className="text-slate-400">
|
||||
Questions about the application process? Contact us at{' '}
|
||||
<a href="tel:956-831-5164" className="text-blue-400 hover:text-blue-300 transition-colors font-medium">
|
||||
956-831-5164
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Careers;
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
import React from 'react';
|
||||
import Header from '@/components/Header';
|
||||
import Footer from '@/components/Footer';
|
||||
import { MapPin, Clock, Users, Building, Award } from 'lucide-react';
|
||||
|
||||
const ClientsProjects = () => {
|
||||
const projects = [
|
||||
{
|
||||
client: 'Dixie Iron Works',
|
||||
location: 'Alice, Texas',
|
||||
project: 'Structural Steel Framework',
|
||||
craftOnSite: 'Welding & Assembly',
|
||||
duration: '2 months',
|
||||
personnel: 12
|
||||
},
|
||||
{
|
||||
client: 'Signal International',
|
||||
location: 'Orange, Sabine Pass, Port Arthur Texas and offshore work at the Gulf of Mexico',
|
||||
project: 'Diamond Offshore Oil Rigs and Government Ships Fabrication',
|
||||
craftOnSite: 'Pipe & Structure Fitters, Lay out Fitters, Pipe & Structure Welders, Tig Welders, Supervisors',
|
||||
duration: '31 months',
|
||||
personnel: 110
|
||||
},
|
||||
{
|
||||
client: 'Keppel Amfels',
|
||||
location: 'Brownsville, Texas',
|
||||
project: 'Transocean & Diamond Offshore Semi-Submergible and Jack up Oil Rigs repairs and new builds',
|
||||
craftOnSite: 'Welders and Fitters',
|
||||
duration: '18 months',
|
||||
personnel: 46
|
||||
},
|
||||
{
|
||||
client: 'Space X Brownsville',
|
||||
location: 'Brownsville, TX',
|
||||
project: 'New erection construction',
|
||||
craftOnSite: 'Welders and Supervisors',
|
||||
duration: '6 months',
|
||||
personnel: 26
|
||||
},
|
||||
{
|
||||
client: 'Gulf Marine Fabrication',
|
||||
location: 'Aransas Pass and Ingleside Texas',
|
||||
project: 'Oil Rig Tower and Decks Fabrication',
|
||||
craftOnSite: 'Tig Welders, 6/GR Welders, Pipe & Structure Fitters, Supervisors, Tack Welders',
|
||||
duration: '32 months',
|
||||
personnel: 36
|
||||
},
|
||||
{
|
||||
client: 'Eastern Shipbuilding',
|
||||
location: 'Panama City, Florida',
|
||||
project: 'Fabrication of new Coast Guard Ships, Cargo Boats, Crew Boats',
|
||||
craftOnSite: 'Welders, Fitters, Electricians',
|
||||
duration: '5 years',
|
||||
personnel: 35
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-900">
|
||||
<Header />
|
||||
<main>
|
||||
{/* Hero Section with Image */}
|
||||
<section className="relative py-32 overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
style={{ backgroundImage: 'url(/carousel_3.png)' }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-900/80"></div>
|
||||
</div>
|
||||
|
||||
{/* Geometric Elements */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute top-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-20 left-20 w-64 h-64 bg-blue-400/5 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<h1 className="text-5xl lg:text-6xl font-bold text-white leading-tight">
|
||||
Clients &
|
||||
<span className="text-blue-400"> Projects</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-300 leading-relaxed">
|
||||
Showcasing our successful partnerships and completed projects across various industries.
|
||||
From offshore oil rigs to industrial fabrication, we deliver excellence.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="py-16 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white mb-2">50+</div>
|
||||
<p className="text-slate-400 text-sm">Major Clients Served</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white mb-2">100+</div>
|
||||
<p className="text-slate-400 text-sm">Projects Completed</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white mb-2">42</div>
|
||||
<p className="text-slate-400 text-sm">Months Longest Project</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white mb-2">120</div>
|
||||
<p className="text-slate-400 text-sm">Max Personnel on Site</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Projects Grid */}
|
||||
<section className="py-24 bg-slate-900">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">Featured Projects</h2>
|
||||
<p className="text-slate-400 text-lg">A selection of our most significant and successful projects</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{projects.map((project, index) => (
|
||||
<div key={index} className="bg-slate-800/50 border border-slate-600 rounded-xl p-8 hover:bg-slate-800/70 transition-all duration-300">
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-white mb-2">{project.client}</h3>
|
||||
<div className="flex items-center space-x-2 text-slate-400">
|
||||
<MapPin className="h-4 w-4" />
|
||||
<span className="text-sm">{project.location}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-blue-500/20 rounded-lg px-3 py-1">
|
||||
<span className="text-blue-400 text-sm font-medium">{project.personnel} Personnel</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project Details */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-2">Project:</h4>
|
||||
<p className="text-slate-300 text-sm">{project.project}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-2">Craft on Site:</h4>
|
||||
<p className="text-slate-300 text-sm">{project.craftOnSite}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-4 border-t border-slate-600">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Clock className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-slate-400 text-sm">Duration: {project.duration}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Users className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-slate-400 text-sm">{project.personnel} people</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Industry Sectors */}
|
||||
<section className="py-24 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto text-center">
|
||||
<h2 className="text-4xl font-bold text-white mb-12">Industry Sectors</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
|
||||
<Building className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Offshore Oil Rigs</h3>
|
||||
<p className="text-slate-400">Jack-up rigs, semi-submersible platforms, and drilling equipment</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
|
||||
<Award className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Refineries</h3>
|
||||
<p className="text-slate-400">Process equipment, pressure vessels, and maintenance work</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
|
||||
<Users className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Marine & Shipbuilding</h3>
|
||||
<p className="text-slate-400">Coast Guard ships, cargo boats, and marine structures</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ClientsProjects;
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
import React from 'react';
|
||||
import Header from '@/components/Header';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Phone, Mail, Printer, MapPin, Clock, User } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
const Contact = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-900">
|
||||
<Header />
|
||||
<main>
|
||||
{/* Hero Section with Image */}
|
||||
<section className="relative py-32 overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
style={{ backgroundImage: 'url(/carousel_6.png)' }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-900/80"></div>
|
||||
</div>
|
||||
|
||||
{/* Geometric Elements */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute top-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-20 left-20 w-64 h-64 bg-blue-400/5 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<h1 className="text-5xl lg:text-6xl font-bold text-white leading-tight">
|
||||
Contact
|
||||
<span className="text-blue-400"> Us</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-300 leading-relaxed">
|
||||
Ready to discuss your welding and fabrication needs? Get in touch with our team
|
||||
for professional support and project consultation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Methods */}
|
||||
<section className="py-24 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8 text-center">
|
||||
<Phone className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Phone</h3>
|
||||
<a href="tel:956-831-5164" className="text-2xl font-bold text-blue-400 hover:text-blue-300 transition-colors">
|
||||
956-831-5164
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8 text-center">
|
||||
<Printer className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Fax</h3>
|
||||
<span className="text-2xl font-bold text-white">956-831-5265</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8 text-center">
|
||||
<Mail className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Email</h3>
|
||||
<a href="mailto:iit.avasquez@sbcglobal.net" className="text-lg text-blue-400 hover:text-blue-300 transition-colors break-all">
|
||||
iit.avasquez@sbcglobal.net
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Office Locations */}
|
||||
<section className="py-24 bg-slate-900">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">Office Locations</h2>
|
||||
<p className="text-slate-400 text-lg">Visit us at one of our Texas locations</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* South Texas Office */}
|
||||
<div className="bg-slate-800/50 border border-slate-600 rounded-2xl p-8">
|
||||
<div className="flex items-start space-x-4 mb-6">
|
||||
<div className="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<MapPin className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-white mb-2">South Texas Office</h3>
|
||||
<p className="text-blue-400 font-medium">Fabrication Shop and Welding Laboratory</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-white font-medium">7748 Padre Island Hwy.</p>
|
||||
<p className="text-slate-300">Brownsville, TX 78521</p>
|
||||
<p className="text-slate-400 text-sm italic">(Next to Mariscos de la Rosa Restaurant)</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Phone className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-slate-400">Office:</span>
|
||||
<a href="tel:956-831-5164" className="text-white hover:text-blue-400 transition-colors">956-831-5164</a>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Printer className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-slate-400">Fax:</span>
|
||||
<span className="text-white">956-831-5265</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Corporate Office */}
|
||||
<div className="bg-slate-800/50 border border-slate-600 rounded-2xl p-8">
|
||||
<div className="flex items-start space-x-4 mb-6">
|
||||
<div className="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<MapPin className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-white mb-2">Corporate Office</h3>
|
||||
<p className="text-blue-400 font-medium">Administrative Headquarters</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-white font-medium">P.O. Box 23036</p>
|
||||
<p className="text-slate-300">Corpus Christi, Texas 78403</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Phone className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-slate-400">Phone:</span>
|
||||
<a href="tel:361-883-8999" className="text-white hover:text-blue-400 transition-colors">361-883-8999</a>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Printer className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-slate-400">Fax:</span>
|
||||
<span className="text-white">361-884-1984</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Operations Manager */}
|
||||
<section className="py-24 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">Operations Manager</h2>
|
||||
<p className="text-slate-400 text-lg">Your direct contact for all project needs</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
|
||||
<div className="flex flex-col lg:flex-row items-center lg:items-start space-y-6 lg:space-y-0 lg:space-x-8">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-24 h-24 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<User className="h-12 w-12 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 text-center lg:text-left">
|
||||
<h3 className="text-3xl font-bold text-white mb-2">Arturo Vasquez</h3>
|
||||
<p className="text-blue-400 text-lg font-medium mb-6">Operations Manager</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Phone className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<span className="text-slate-400 text-sm">Phone: </span>
|
||||
<a href="tel:956-831-5164" className="text-white hover:text-blue-400 transition-colors">956-831-5164</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<Phone className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<span className="text-slate-400 text-sm">Cell: </span>
|
||||
<a href="tel:956-466-2444" className="text-white hover:text-blue-400 transition-colors">956-466-2444</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Printer className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<span className="text-slate-400 text-sm">Fax: </span>
|
||||
<span className="text-white">956-831-5265</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<Mail className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<span className="text-slate-400 text-sm">Email: </span>
|
||||
<a href="mailto:iit.avasquez@sbcglobal.net" className="text-white hover:text-blue-400 transition-colors">
|
||||
iit.avasquez@sbcglobal.net
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Form Section */}
|
||||
<section className="py-24 bg-slate-900">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">Get Professional Support</h2>
|
||||
<p className="text-slate-400 text-lg">
|
||||
You may contact us by filling in this form any time you need professional support or have any questions.
|
||||
</p>
|
||||
<p className="text-slate-300 font-medium mt-2">We will respond within 48 hours for most inquiries.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-800/50 border border-slate-600 rounded-2xl p-8">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-blue-500/20 rounded-xl flex items-center justify-center mx-auto mb-6">
|
||||
<Mail className="h-8 w-8 text-blue-400" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-white mb-4">Contact Form</h3>
|
||||
<p className="text-slate-400 mb-8">Our contact form will be available soon. In the meantime, please contact us directly using the information above.</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button className="bg-white hover:bg-gray-100 text-slate-900 font-semibold">
|
||||
<Phone className="h-4 w-4 mr-2" />
|
||||
Call 956-831-5164
|
||||
</Button>
|
||||
<Button variant="outline" className="border-slate-500/50 bg-slate-800/50 text-white hover:bg-slate-700/50 hover:border-slate-400">
|
||||
<Mail className="h-4 w-4 mr-2" />
|
||||
Send Email
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Response Time */}
|
||||
<div className="mt-12 text-center">
|
||||
<div className="bg-slate-800/30 border border-slate-600/50 rounded-xl p-6">
|
||||
<div className="flex items-center justify-center space-x-2 mb-2">
|
||||
<Clock className="h-5 w-5 text-blue-400" />
|
||||
<span className="text-white font-medium">Quick Response</span>
|
||||
</div>
|
||||
<p className="text-slate-400">
|
||||
We typically respond to all inquiries within 48 hours during business hours.
|
||||
For urgent matters, please call us directly.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
import React from 'react';
|
||||
import Header from '@/components/Header';
|
||||
import Footer from '@/components/Footer';
|
||||
import { MapPin, Phone, Mail, Printer, Building, User } from 'lucide-react';
|
||||
|
||||
const Locations = () => {
|
||||
const locations = [
|
||||
{
|
||||
name: 'South Texas Office & Fabrication Shop',
|
||||
address: '7748 Padre Island Hwy',
|
||||
city: 'Brownsville, Texas 78521',
|
||||
phone: '956-831-5164',
|
||||
fax: '956-831-5265',
|
||||
type: 'primary',
|
||||
note: 'Next to Mariscos de la Rosa Restaurant'
|
||||
},
|
||||
{
|
||||
name: 'Corporate Office',
|
||||
address: 'P.O. Box 23036',
|
||||
city: 'Corpus Christi, Texas 78403',
|
||||
phone: '361-883-8999',
|
||||
fax: '361-884-1984',
|
||||
type: 'corporate'
|
||||
}
|
||||
];
|
||||
|
||||
const operationsManager = {
|
||||
name: 'Arturo Vasquez',
|
||||
title: 'Operations Manager',
|
||||
office: '956-831-5164',
|
||||
cell: '956-466-2444',
|
||||
fax: '956-831-5265',
|
||||
email: 'iit.avasquez@sbcglobal.net'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-900">
|
||||
<Header />
|
||||
<main>
|
||||
{/* Hero Section with Image */}
|
||||
<section className="relative py-32 overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
style={{ backgroundImage: 'url(/carousel_5.png)' }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-900/80"></div>
|
||||
</div>
|
||||
|
||||
{/* Geometric Elements */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute top-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-20 left-20 w-64 h-64 bg-blue-400/5 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<h1 className="text-5xl lg:text-6xl font-bold text-white leading-tight">
|
||||
Our
|
||||
<span className="text-blue-400"> Locations</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-300 leading-relaxed">
|
||||
Strategically positioned across Texas to serve our clients with welding and fabrication services.
|
||||
Find the location nearest to your project.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Locations Grid */}
|
||||
<section className="py-24 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{locations.map((location, index) => (
|
||||
<div key={index} className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8 hover:bg-slate-700/70 transition-all duration-300">
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<Building className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-white mb-2">{location.name}</h3>
|
||||
<div className="bg-blue-500/20 rounded-lg px-3 py-1 inline-block">
|
||||
<span className="text-blue-400 text-sm font-medium capitalize">{location.type} Location</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Address */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-start space-x-3">
|
||||
<MapPin className="h-5 w-5 text-blue-400 flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<p className="text-white font-medium">{location.address}</p>
|
||||
<p className="text-slate-300">{location.city}</p>
|
||||
{location.note && (
|
||||
<p className="text-slate-400 text-sm italic mt-1">({location.note})</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Phone className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<span className="text-slate-400 text-sm">Phone: </span>
|
||||
<a href={`tel:${location.phone}`} className="text-white hover:text-blue-400 transition-colors">
|
||||
{location.phone}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<Printer className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<span className="text-slate-400 text-sm">Fax: </span>
|
||||
<span className="text-white">{location.fax}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Operations Manager */}
|
||||
<section className="py-24 bg-slate-900">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl font-bold text-white mb-4">Operations Manager</h2>
|
||||
<p className="text-slate-400 text-lg">Your primary contact for project coordination and support</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-800/50 border border-slate-600 rounded-2xl p-8">
|
||||
<div className="flex flex-col lg:flex-row items-center lg:items-start space-y-6 lg:space-y-0 lg:space-x-8">
|
||||
{/* Profile */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-24 h-24 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<User className="h-12 w-12 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<div className="flex-1 text-center lg:text-left">
|
||||
<h3 className="text-3xl font-bold text-white mb-2">{operationsManager.name}</h3>
|
||||
<p className="text-blue-400 text-lg font-medium mb-6">{operationsManager.title}</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Phone className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<span className="text-slate-400 text-sm">Office: </span>
|
||||
<a href={`tel:${operationsManager.office}`} className="text-white hover:text-blue-400 transition-colors">
|
||||
{operationsManager.office}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<Phone className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<span className="text-slate-400 text-sm">Cell: </span>
|
||||
<a href={`tel:${operationsManager.cell}`} className="text-white hover:text-blue-400 transition-colors">
|
||||
{operationsManager.cell}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Printer className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<span className="text-slate-400 text-sm">Fax: </span>
|
||||
<span className="text-white">{operationsManager.fax}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<Mail className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<span className="text-slate-400 text-sm">Email: </span>
|
||||
<a href={`mailto:${operationsManager.email}`} className="text-white hover:text-blue-400 transition-colors">
|
||||
{operationsManager.email}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Service Areas */}
|
||||
<section className="py-24 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto text-center">
|
||||
<h2 className="text-4xl font-bold text-white mb-12">Service Areas</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
|
||||
<MapPin className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">South Texas</h3>
|
||||
<p className="text-slate-400">Brownsville, McAllen, Harlingen, and surrounding areas</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
|
||||
<MapPin className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Coastal Texas</h3>
|
||||
<p className="text-slate-400">Corpus Christi, Ingleside, Port Aransas, and Gulf Coast</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
|
||||
<MapPin className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Gulf of Mexico</h3>
|
||||
<p className="text-slate-400">Offshore platforms, rigs, and marine facilities</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Locations;
|
||||
|
|
@ -1,60 +1,109 @@
|
|||
import React from 'react';
|
||||
import Header from '@/components/Header';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Wrench, Settings, Shield } from 'lucide-react';
|
||||
import content from '@/content/content.json';
|
||||
import { Wrench, Settings, Shield, Award, Users, CheckCircle } from 'lucide-react';
|
||||
|
||||
const Services = () => {
|
||||
const services = [
|
||||
'Tig Welders', 'Pipe Welders', 'Mig Welders', 'Flux Cored Welders', 'Sub Arc Welders',
|
||||
'6-GR Welders', 'Structural Welders', 'Tack Welders', 'Pipe Fitters', 'Structural Fitters',
|
||||
'Supervisors', 'Foremans', 'Safety Inspectors', 'Boiler Makers', 'Scaffold Builders',
|
||||
'Personnel / Laborers', 'CWI Inspectors', 'Rig Welders'
|
||||
];
|
||||
|
||||
const specialties = [
|
||||
'Jack Up Oil Rigs', 'Semi-Submersible Oil Rigs', 'Gas Land Rigs', 'Refineries',
|
||||
'Platform Jackets', 'Civil Structures', 'Piled Towers', 'Platform Decks',
|
||||
'Pressure Vessels', 'Structure Skids', 'Pipe Lines', 'Boats / Ships'
|
||||
];
|
||||
|
||||
const certifications = [
|
||||
'AWS Certified Welders',
|
||||
'ASME Code Welding',
|
||||
'ABS Marine Welding',
|
||||
'API Standards',
|
||||
'Quality Control Inspectors'
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="min-h-screen bg-slate-900">
|
||||
<Header />
|
||||
<main className="pt-16">
|
||||
{/* Hero Section */}
|
||||
<section className="py-24 hero-gradient">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-6">
|
||||
<h1 className="text-display-md font-bold text-foreground">
|
||||
{content.services.title}
|
||||
<main>
|
||||
{/* Hero Section with Image */}
|
||||
<section className="relative py-32 overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
style={{ backgroundImage: 'url(/carousel_2.png)' }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-900/80"></div>
|
||||
</div>
|
||||
|
||||
{/* Geometric Elements */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute top-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-20 left-20 w-64 h-64 bg-blue-400/5 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<h1 className="text-5xl lg:text-6xl font-bold text-white leading-tight">
|
||||
Services &
|
||||
<span className="text-blue-400"> Specialties</span>
|
||||
</h1>
|
||||
<p className="text-xl text-muted">
|
||||
Professional welding and fabrication services tailored to your industrial needs
|
||||
<p className="text-xl text-slate-300 leading-relaxed">
|
||||
Professional welding and fabrication services for industrial and commercial projects.
|
||||
Delivering expert craftsmanship with certified welders and modern equipment.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services Grid */}
|
||||
<section className="py-24 bg-bg-elevated">
|
||||
{/* Services Section */}
|
||||
<section className="py-24 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
||||
{/* Services Column */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center space-x-3 mb-8">
|
||||
<Wrench className="h-8 w-8 text-accent" />
|
||||
<h2 className="text-2xl font-bold text-foreground">Services</h2>
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-center space-x-4 mb-8">
|
||||
<div className="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center">
|
||||
<Wrench className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold text-white">Services</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{services.map((service, index) => (
|
||||
<div key={index} className="bg-slate-700/50 border border-slate-600 rounded-lg p-4 hover:bg-slate-700/70 transition-all duration-300">
|
||||
<div className="flex items-center space-x-3">
|
||||
<CheckCircle className="h-5 w-5 text-blue-400 flex-shrink-0" />
|
||||
<span className="text-white font-medium">{service}</span>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{content.services.services.map((service, index) => (
|
||||
<div key={index} className="bg-gradient-card p-6 rounded-xl border border-border hover:shadow-subtle transition-smooth">
|
||||
<h3 className="font-semibold text-foreground mb-2">{service}</h3>
|
||||
<p className="text-muted text-sm">Professional service with certified specialists and modern equipment</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Specialties Column */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center space-x-3 mb-8">
|
||||
<Settings className="h-8 w-8 text-accent" />
|
||||
<h2 className="text-2xl font-bold text-foreground">Specialties</h2>
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-center space-x-4 mb-8">
|
||||
<div className="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center">
|
||||
<Settings className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold text-white">Specialties</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{content.services.specialties.map((specialty, index) => (
|
||||
<div key={index} className="bg-gradient-card p-6 rounded-xl border border-border hover:shadow-subtle transition-smooth">
|
||||
<h3 className="font-semibold text-foreground mb-2">{specialty}</h3>
|
||||
<p className="text-muted text-sm">Specialized expertise with attention to detail and quality assurance</p>
|
||||
{specialties.map((specialty, index) => (
|
||||
<div key={index} className="bg-slate-700/50 border border-slate-600 rounded-lg p-6 hover:bg-slate-700/70 transition-all duration-300">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Award className="h-6 w-6 text-blue-400 flex-shrink-0" />
|
||||
<div>
|
||||
<h3 className="text-white font-semibold text-lg">{specialty}</h3>
|
||||
<p className="text-slate-400 text-sm">Specialized expertise with attention to detail and quality assurance</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -64,38 +113,47 @@ const Services = () => {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* Quality Assurance */}
|
||||
<section className="py-24">
|
||||
{/* Certifications Section */}
|
||||
<section className="py-24 bg-slate-900">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-12">
|
||||
<div className="flex items-center justify-center space-x-3 mb-6">
|
||||
<Shield className="h-10 w-10 text-accent" />
|
||||
<h2 className="text-display-sm font-bold text-foreground">Quality Assurance</h2>
|
||||
<div className="max-w-6xl mx-auto text-center">
|
||||
<div className="flex items-center justify-center space-x-4 mb-12">
|
||||
<div className="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center">
|
||||
<Shield className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold text-white">Welder Certifications</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
|
||||
{certifications.map((cert, index) => (
|
||||
<div key={index} className="bg-slate-800/50 border border-slate-600 rounded-xl p-6 hover:bg-slate-800/70 transition-all duration-300">
|
||||
<div className="space-y-4">
|
||||
<div className="w-16 h-16 bg-accent/20 rounded-xl flex items-center justify-center mx-auto">
|
||||
<Shield className="h-8 w-8 text-accent" />
|
||||
<div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mx-auto">
|
||||
<Shield className="h-6 w-6 text-blue-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground">Certified Processes</h3>
|
||||
<p className="text-muted">All work follows industry standards and safety protocols</p>
|
||||
<h3 className="text-white font-semibold">{cert}</h3>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="w-16 h-16 bg-accent/20 rounded-xl flex items-center justify-center mx-auto">
|
||||
<Wrench className="h-8 w-8 text-accent" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground">Expert Craftsmen</h3>
|
||||
<p className="text-muted">Skilled professionals with extensive experience</p>
|
||||
<div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8">
|
||||
<Users className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Expert Team</h3>
|
||||
<p className="text-slate-400">Certified professionals with decades of experience in industrial welding</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="w-16 h-16 bg-accent/20 rounded-xl flex items-center justify-center mx-auto">
|
||||
<Settings className="h-8 w-8 text-accent" />
|
||||
<div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8">
|
||||
<Settings className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Modern Equipment</h3>
|
||||
<p className="text-slate-400">State-of-the-art welding equipment and fabrication tools</p>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground">Modern Equipment</h3>
|
||||
<p className="text-muted">State-of-the-art tools and technology</p>
|
||||
|
||||
<div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8">
|
||||
<Award className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Quality Assurance</h3>
|
||||
<p className="text-slate-400">Rigorous quality control and safety standards on every project</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue