Fast fertig
This commit is contained in:
parent
4d755e7fb0
commit
ecce65db79
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
|
|
@ -10,6 +10,9 @@ import ClientsProjects from "./pages/ClientsProjects";
|
|||
import Locations from "./pages/Locations";
|
||||
import Careers from "./pages/Careers";
|
||||
import Contact from "./pages/Contact";
|
||||
import Legal from "./pages/Legal";
|
||||
import Privacy from "./pages/Privacy";
|
||||
import Terms from "./pages/Terms";
|
||||
import NotFound from "./pages/NotFound";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
|
@ -28,6 +31,9 @@ const App = () => (
|
|||
<Route path="/locations" element={<Locations />} />
|
||||
<Route path="/careers" element={<Careers />} />
|
||||
<Route path="/contact-us" element={<Contact />} />
|
||||
<Route path="/legal" element={<Legal />} />
|
||||
<Route path="/privacy" element={<Privacy />} />
|
||||
<Route path="/terms" element={<Terms />} />
|
||||
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,21 @@ import React from 'react';
|
|||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Shield, Award, Wrench } from 'lucide-react';
|
||||
import content from '@/content/content.json';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const CompanyBlurb = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleGetStarted = () => {
|
||||
navigate('/contact-us');
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const handleViewWork = () => {
|
||||
navigate('/clients-and-projects');
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-32 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
|
||||
{/* Background geometric elements */}
|
||||
|
|
@ -29,8 +42,8 @@ const CompanyBlurb = () => {
|
|||
{/* 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">
|
||||
<div className="group animate-fadeInUp">
|
||||
<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 hover-lift">
|
||||
{/* 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" />
|
||||
|
|
@ -50,8 +63,8 @@ const CompanyBlurb = () => {
|
|||
</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">
|
||||
<div className="group animate-fadeInUp" style={{animationDelay: '0.1s'}}>
|
||||
<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 hover-lift">
|
||||
{/* 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" />
|
||||
|
|
@ -71,8 +84,8 @@ const CompanyBlurb = () => {
|
|||
</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">
|
||||
<div className="group animate-fadeInUp" style={{animationDelay: '0.2s'}}>
|
||||
<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 hover-lift">
|
||||
{/* 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" />
|
||||
|
|
@ -95,7 +108,11 @@ const CompanyBlurb = () => {
|
|||
{/* 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">
|
||||
<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"
|
||||
onClick={handleGetStarted}
|
||||
>
|
||||
Get Started Today
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
|
|
@ -103,6 +120,7 @@ const CompanyBlurb = () => {
|
|||
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"
|
||||
onClick={handleViewWork}
|
||||
>
|
||||
View Our Work
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,20 @@
|
|||
import React from 'react';
|
||||
import content from '@/content/content.json';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const Footer = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleGetStarted = () => {
|
||||
navigate('/contact-us');
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const handleNavigation = (path) => {
|
||||
navigate(path);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className="bg-slate-900 border-t border-slate-700">
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
|
|
@ -10,23 +23,24 @@ const Footer = () => {
|
|||
{/* 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-bold text-white text-xl">Texas Welding</span>
|
||||
<img
|
||||
src="/LOGO-Light-Web.png"
|
||||
alt="IIT Welders Logo"
|
||||
className="h-12 w-auto"
|
||||
/>
|
||||
</div>
|
||||
<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 */}
|
||||
{/* CTA Button */}
|
||||
<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">
|
||||
<button
|
||||
onClick={handleGetStarted}
|
||||
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>
|
||||
|
||||
|
|
@ -34,21 +48,12 @@ const Footer = () => {
|
|||
<div className="md:col-span-2">
|
||||
<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>
|
||||
<button
|
||||
onClick={() => handleNavigation('/services-and-specialties')}
|
||||
className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
|
||||
>
|
||||
Services & Specialties
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -56,21 +61,30 @@ const Footer = () => {
|
|||
<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>
|
||||
<button
|
||||
onClick={() => handleNavigation('/clients-and-projects')}
|
||||
className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
|
||||
>
|
||||
Offshore Oil Rigs
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigation('/clients-and-projects')}
|
||||
className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
|
||||
>
|
||||
Marine Construction
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigation('/clients-and-projects')}
|
||||
className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
|
||||
>
|
||||
Industrial Fabrication
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigation('/clients-and-projects')}
|
||||
className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
|
||||
>
|
||||
Aerospace Projects
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -78,21 +92,36 @@ const Footer = () => {
|
|||
<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">
|
||||
<button
|
||||
onClick={() => handleNavigation('/clients-and-projects')}
|
||||
className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
|
||||
>
|
||||
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">
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigation('/about-us')}
|
||||
className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
|
||||
>
|
||||
About Our Company
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigation('/locations')}
|
||||
className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
|
||||
>
|
||||
Locations
|
||||
</a>
|
||||
<a href="/careers" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigation('/careers')}
|
||||
className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
|
||||
>
|
||||
Careers
|
||||
</a>
|
||||
<a href="/contact-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigation('/contact-us')}
|
||||
className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
|
||||
>
|
||||
Contact Support
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -100,18 +129,30 @@ const Footer = () => {
|
|||
<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">
|
||||
<button
|
||||
onClick={() => handleNavigation('/about-us')}
|
||||
className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
|
||||
>
|
||||
About Us
|
||||
</a>
|
||||
<a href="/careers" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigation('/careers')}
|
||||
className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
|
||||
>
|
||||
Jobs
|
||||
</a>
|
||||
<a href="/contact-us" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigation('/contact-us')}
|
||||
className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
|
||||
>
|
||||
Contact Sales
|
||||
</a>
|
||||
<a href="/locations" className="block text-slate-400 hover:text-white transition-colors text-sm">
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigation('/locations')}
|
||||
className="block text-slate-400 hover:text-white transition-colors text-sm text-left"
|
||||
>
|
||||
Office Locations
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -122,15 +163,24 @@ const Footer = () => {
|
|||
<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">
|
||||
<button
|
||||
onClick={() => handleNavigation('/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">
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigation('/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">
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleNavigation('/terms')}
|
||||
className="text-slate-500 hover:text-slate-400 text-sm"
|
||||
>
|
||||
Terms of Service
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@ const Hero = () => {
|
|||
</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 className="absolute bottom-0 left-0 w-1/3 h-1/3 border-l-2 border-b-2 border-blue-400/20 animate-pulse"></div>
|
||||
<div className="absolute top-0 right-0 w-1/3 h-1/3 border-r-2 border-t-2 border-blue-400/20 animate-pulse" style={{animationDelay: '1s'}}></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-20">
|
||||
|
|
@ -36,28 +36,28 @@ const Hero = () => {
|
|||
{/* 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-white leading-[0.85] tracking-tight">
|
||||
<h1 className="text-5xl lg:text-6xl xl:text-7xl font-bold text-white leading-[0.85] tracking-tight animate-fadeInLeft animate-visible" style={{transitionDelay: '0.2s'}}>
|
||||
Redefine How You
|
||||
<br />
|
||||
<span className="text-blue-400">Connect to Welding</span>
|
||||
</h1>
|
||||
<p className="text-xl lg:text-2xl text-slate-300 leading-relaxed font-light">
|
||||
<p className="text-xl lg:text-2xl text-slate-300 leading-relaxed font-light animate-fadeInLeft animate-visible" style={{transitionDelay: '0.4s'}}>
|
||||
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 - Exact Dispel Style */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 pt-6">
|
||||
<div className="flex flex-col sm:flex-row gap-4 pt-6 animate-fadeInLeft animate-visible" style={{transitionDelay: '0.6s'}}>
|
||||
<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"
|
||||
className="bg-white hover:bg-gray-100 text-slate-900 font-semibold text-lg px-8 py-4 h-auto shadow-lg rounded-lg hover-lift hover-glow"
|
||||
>
|
||||
Get Quote
|
||||
</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"
|
||||
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 hover-lift"
|
||||
>
|
||||
Explore Services
|
||||
</Button>
|
||||
|
|
@ -65,7 +65,7 @@ const Hero = () => {
|
|||
</div>
|
||||
|
||||
{/* 3D Perspective Container - Right Side - Exact Dispel Style */}
|
||||
<div className="relative flex justify-center items-start w-full -mt-12">
|
||||
<div className="relative flex justify-center items-start w-full -mt-12 animate-fadeInRight animate-visible" style={{transitionDelay: '0.3s'}}>
|
||||
{/* 3D Tilted Screen Container - Exact Dispel Style */}
|
||||
<div className="relative w-full max-w-xl">
|
||||
{/* 3D Container with perspective */}
|
||||
|
|
@ -106,8 +106,8 @@ const Hero = () => {
|
|||
</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 className="absolute -top-4 -right-4 w-2 h-2 bg-blue-400 rounded-full animate-pulse-blue animate-float"></div>
|
||||
<div className="absolute -bottom-4 -left-4 w-1 h-1 bg-blue-300 rounded-full animate-pulse-blue animate-float" style={{animationDelay: '1s', animationDuration: '7s'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
import React from 'react';
|
||||
import { useCountUp } from '@/hooks/useCountUp';
|
||||
|
||||
const LogoSection = () => {
|
||||
// Count-up animations for stats
|
||||
const secondsCount = useCountUp({ end: 30, suffix: '', duration: 2000 });
|
||||
const savingsCount = useCountUp({ end: 23, suffix: 'K', duration: 2500, delay: 200 });
|
||||
const projectsCount = useCountUp({ end: 1, suffix: '', duration: 1500, delay: 400 });
|
||||
const millionsCount = useCountUp({ end: 2, suffix: 'M', duration: 2200, delay: 600 });
|
||||
|
||||
const clients = [
|
||||
{ name: 'ExxonMobil', logo: 'EM' },
|
||||
{ name: 'Chevron', logo: 'CV' },
|
||||
|
|
@ -22,36 +29,48 @@ const LogoSection = () => {
|
|||
|
||||
{/* 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 className="text-center animate-fadeInUp">
|
||||
<div
|
||||
ref={secondsCount.ref}
|
||||
className="text-4xl lg:text-5xl font-bold text-white mb-2"
|
||||
>
|
||||
<{secondsCount.count}
|
||||
</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="text-center">
|
||||
<div className="text-4xl lg:text-5xl font-bold text-white mb-2">
|
||||
$23K
|
||||
<div className="text-center animate-fadeInUp" style={{animationDelay: '0.1s'}}>
|
||||
<div
|
||||
ref={savingsCount.ref}
|
||||
className="text-4xl lg:text-5xl font-bold text-white mb-2"
|
||||
>
|
||||
${savingsCount.count}
|
||||
</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 className="text-center animate-fadeInUp" style={{animationDelay: '0.2s'}}>
|
||||
<div
|
||||
ref={projectsCount.ref}
|
||||
className="text-4xl lg:text-5xl font-bold text-white mb-2"
|
||||
>
|
||||
{projectsCount.count}
|
||||
</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 className="text-center animate-fadeInUp" style={{animationDelay: '0.3s'}}>
|
||||
<div
|
||||
ref={millionsCount.ref}
|
||||
className="text-4xl lg:text-5xl font-bold text-white mb-2"
|
||||
>
|
||||
${millionsCount.count}
|
||||
</div>
|
||||
<p className="text-slate-400 text-sm">
|
||||
saved per year by a leading energy company by improving operating efficiency.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
import { useState, useEffect, useRef } from 'react';
|
||||
|
||||
interface UseCountUpOptions {
|
||||
end: number;
|
||||
duration?: number;
|
||||
delay?: number;
|
||||
suffix?: string;
|
||||
}
|
||||
|
||||
export const useCountUp = ({ end, duration = 2000, delay = 0, suffix = '' }: UseCountUpOptions) => {
|
||||
const [count, setCount] = useState(0);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const elementRef = useRef<HTMLDivElement>(null);
|
||||
const hasAnimated = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting && !hasAnimated.current) {
|
||||
setIsVisible(true);
|
||||
hasAnimated.current = true;
|
||||
}
|
||||
},
|
||||
{ threshold: 0.5 }
|
||||
);
|
||||
|
||||
if (elementRef.current) {
|
||||
observer.observe(elementRef.current);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (elementRef.current) {
|
||||
observer.unobserve(elementRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isVisible) return;
|
||||
|
||||
const startTime = Date.now() + delay;
|
||||
const startValue = 0;
|
||||
|
||||
const animate = () => {
|
||||
const now = Date.now();
|
||||
if (now < startTime) {
|
||||
requestAnimationFrame(animate);
|
||||
return;
|
||||
}
|
||||
|
||||
const elapsed = now - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
|
||||
// Easing function for smooth animation
|
||||
const easeOutCubic = 1 - Math.pow(1 - progress, 3);
|
||||
const currentValue = Math.floor(startValue + (end - startValue) * easeOutCubic);
|
||||
|
||||
setCount(currentValue);
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}, [isVisible, end, duration, delay]);
|
||||
|
||||
return { count: count + suffix, ref: elementRef };
|
||||
};
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import { useEffect } from 'react';
|
||||
|
||||
export const useScrollAnimation = () => {
|
||||
useEffect(() => {
|
||||
const observerCallback = (entries: IntersectionObserverEntry[]) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-visible');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(observerCallback, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px',
|
||||
});
|
||||
|
||||
// Observe all elements with animation classes
|
||||
const animatedElements = document.querySelectorAll(
|
||||
'.animate-fadeInUp, .animate-fadeInLeft, .animate-fadeInRight, .animate-scaleIn, .animate-slideInDown'
|
||||
);
|
||||
|
||||
animatedElements.forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
return () => {
|
||||
animatedElements.forEach((el) => {
|
||||
observer.unobserve(el);
|
||||
});
|
||||
};
|
||||
}, []);
|
||||
};
|
||||
198
src/index.css
198
src/index.css
|
|
@ -192,13 +192,211 @@
|
|||
.carousel-autoplay-paused {
|
||||
@apply bg-muted/50;
|
||||
}
|
||||
|
||||
/* Animation classes */
|
||||
.animate-fadeInUp {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
||||
}
|
||||
|
||||
.animate-fadeInUp.animate-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.animate-fadeInLeft {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
||||
}
|
||||
|
||||
.animate-fadeInLeft.animate-visible {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.animate-fadeInRight {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
||||
}
|
||||
|
||||
.animate-fadeInRight.animate-visible {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.animate-scaleIn {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
||||
}
|
||||
|
||||
.animate-scaleIn.animate-visible {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.animate-slideInDown {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
|
||||
}
|
||||
|
||||
.animate-slideInDown.animate-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.animate-pulse-blue {
|
||||
animation: pulseBlue 2s infinite;
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-rotate-slow {
|
||||
animation: rotateSlow 20s linear infinite;
|
||||
}
|
||||
|
||||
/* Immediate visible animations */
|
||||
.animate-bounce-subtle {
|
||||
animation: bounceSubtle 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Simple hover animations that should be immediately visible */
|
||||
.hover-lift {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.hover-glow {
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-glow:hover {
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* Keyframe animations */
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInDown {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulseBlue {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateSlow {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceSubtle {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Text truncation utilities */
|
||||
.line-clamp-1 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.line-clamp-2 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.line-clamp-3 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
/* Reduced motion support */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.transition-smooth {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.animate-fadeInUp,
|
||||
.animate-fadeInLeft,
|
||||
.animate-fadeInRight,
|
||||
.animate-scaleIn,
|
||||
.animate-slideInDown,
|
||||
.animate-pulse-blue,
|
||||
.animate-float,
|
||||
.animate-rotate-slow {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,38 @@
|
|||
import React from 'react';
|
||||
import Header from '@/components/Header';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Building, Users, Award } from 'lucide-react';
|
||||
import { Building, Users, Award, ChevronRight } from 'lucide-react';
|
||||
import content from '@/content/content.json';
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-900">
|
||||
<Header />
|
||||
|
||||
{/* Breadcrumbs */}
|
||||
<nav className="bg-slate-800 border-b border-slate-700 py-3">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center space-x-2 text-sm">
|
||||
<button
|
||||
onClick={() => window.location.href = '/'}
|
||||
className="text-slate-400 hover:text-white transition-colors"
|
||||
>
|
||||
Home
|
||||
</button>
|
||||
<ChevronRight className="h-4 w-4 text-slate-500" />
|
||||
<span className="text-white font-medium">About Us</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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)' }}
|
||||
style={{ backgroundImage: 'url(/hero-subpage.png)' }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-900/80"></div>
|
||||
</div>
|
||||
|
||||
{/* Geometric Elements */}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
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 { Users, Clock, Download, Upload, Phone, CheckCircle, ChevronRight } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
const Careers = () => {
|
||||
|
|
@ -25,15 +25,31 @@ const Careers = () => {
|
|||
return (
|
||||
<div className="min-h-screen bg-slate-900">
|
||||
<Header />
|
||||
|
||||
{/* Breadcrumbs */}
|
||||
<nav className="bg-slate-800 border-b border-slate-700 py-3">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center space-x-2 text-sm">
|
||||
<button
|
||||
onClick={() => window.location.href = '/'}
|
||||
className="text-slate-400 hover:text-white transition-colors"
|
||||
>
|
||||
Home
|
||||
</button>
|
||||
<ChevronRight className="h-4 w-4 text-slate-500" />
|
||||
<span className="text-white font-medium">Careers</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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)' }}
|
||||
style={{ backgroundImage: 'url(/hero_subpage.png)' }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-900/80"></div>
|
||||
</div>
|
||||
|
||||
{/* Geometric Elements */}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,45 @@
|
|||
import React from 'react';
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import Header from '@/components/Header';
|
||||
import Footer from '@/components/Footer';
|
||||
import { MapPin, Clock, Users, Building, Award } from 'lucide-react';
|
||||
import { MapPin, Clock, Users, Building, Award, Search, Filter, ArrowUp, ChevronRight } from 'lucide-react';
|
||||
import { useCountUp } from '@/hooks/useCountUp';
|
||||
import { useScrollAnimation } from '@/hooks/useScrollAnimation';
|
||||
|
||||
const ClientsProjects = () => {
|
||||
useScrollAnimation();
|
||||
|
||||
// Search and filter states
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedIndustry, setSelectedIndustry] = useState('All');
|
||||
const [selectedLocation, setSelectedLocation] = useState('All');
|
||||
const [showBackToTop, setShowBackToTop] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// Stats with count-up animations
|
||||
const clientsCount = useCountUp({ end: 56, duration: 2500 });
|
||||
const projectsCount = useCountUp({ end: 56, duration: 3000, delay: 200 });
|
||||
const longestProjectCount = useCountUp({ end: 81, duration: 2000, delay: 400 });
|
||||
const maxPersonnelCount = useCountUp({ end: 120, duration: 2800, delay: 600 });
|
||||
|
||||
// Back to top functionality
|
||||
React.useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setShowBackToTop(window.scrollY > 400);
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const projects = [
|
||||
{
|
||||
client: 'Dixie Iron Works',
|
||||
location: 'Alice, Texas',
|
||||
project: 'Structural Steel Framework',
|
||||
craftOnSite: 'Welding & Assembly',
|
||||
project: 'Hydraulic pumps structure frames fabrication',
|
||||
craftOnSite: '12 Fitters, Welders and Supervisor',
|
||||
duration: '2 months',
|
||||
personnel: 12
|
||||
},
|
||||
|
|
@ -17,56 +47,529 @@ const ClientsProjects = () => {
|
|||
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',
|
||||
craftOnSite: '110 Pipe & Structure Fitters, Lay out Fitters, Pipe & Structure Welders, Tig Welders, Supervisors',
|
||||
duration: '31 months',
|
||||
personnel: 110
|
||||
},
|
||||
{
|
||||
client: 'Esco Marine Inc.',
|
||||
location: 'Brownsville, Texas',
|
||||
project: 'Offshore Oil Rig Repair',
|
||||
craftOnSite: '28 Pipe & Structure Welders, Pipe & Structure Fitters, Supervisor, Fitter Helpers',
|
||||
duration: '6 months',
|
||||
personnel: 28
|
||||
},
|
||||
{
|
||||
client: 'STI Group',
|
||||
location: 'Tulsa, Oklahoma',
|
||||
project: 'H&P Flex Gas Land Rigs new Fabrication',
|
||||
craftOnSite: '8 Flux Cored Welders',
|
||||
duration: '4 weeks',
|
||||
personnel: 8
|
||||
},
|
||||
{
|
||||
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',
|
||||
craftOnSite: '46 Welders and Fitters',
|
||||
duration: '18 months',
|
||||
personnel: 46
|
||||
},
|
||||
{
|
||||
client: 'Load Craft Industries',
|
||||
location: 'Brad & Early Texas',
|
||||
project: 'Nabors Drilling Rigs Fabrication, Mud Tanks and other drilling components',
|
||||
craftOnSite: '84 Welders, Fitters, Operators',
|
||||
duration: '15 months',
|
||||
personnel: 84
|
||||
},
|
||||
{
|
||||
client: 'R.M Walsdorf Inc.',
|
||||
location: 'Port of Brownsville TX',
|
||||
project: 'Boat ladders',
|
||||
craftOnSite: '4 Welders and Fitters',
|
||||
duration: '2 months',
|
||||
personnel: 4
|
||||
},
|
||||
{
|
||||
client: 'Shoreline Foundation, Inc.',
|
||||
location: 'Kings Bay Naval Base, GA.',
|
||||
project: 'Water front, North Land Water Interface P636',
|
||||
craftOnSite: '12 Welders, Fitters & Supervisor',
|
||||
duration: '3 months',
|
||||
personnel: 12
|
||||
},
|
||||
{
|
||||
client: 'STI Group',
|
||||
location: 'Bridge City, Texas',
|
||||
project: 'H&P Gas Land Rigs',
|
||||
craftOnSite: '28 Welders & Fitters',
|
||||
duration: '2 years',
|
||||
personnel: 28
|
||||
},
|
||||
{
|
||||
client: 'INTERLUBE CORPORATION, INC',
|
||||
location: 'Port of Brownsville TX',
|
||||
project: 'Above Ground Storage Tanks Maintenance',
|
||||
craftOnSite: '4 Maintenance Group',
|
||||
duration: '1 year',
|
||||
personnel: 4
|
||||
},
|
||||
{
|
||||
client: 'STI Group',
|
||||
location: 'Vidor, Texas',
|
||||
project: 'H&P Gas Land Rigs',
|
||||
craftOnSite: '44 Welders and Fitters',
|
||||
duration: '28 months',
|
||||
personnel: 44
|
||||
},
|
||||
{
|
||||
client: 'Triton Marine',
|
||||
location: 'Port of Brownsville, TX',
|
||||
project: 'Construction of new dock #6',
|
||||
craftOnSite: '6 Fitter/Welder',
|
||||
duration: '18 months',
|
||||
personnel: 6
|
||||
},
|
||||
{
|
||||
client: 'Nehemiah\'s Vision',
|
||||
location: 'Port Arthur, Texas',
|
||||
project: 'Residential Homes Repair',
|
||||
craftOnSite: '14 Residential Carpenters',
|
||||
duration: '6 months',
|
||||
personnel: 14
|
||||
},
|
||||
{
|
||||
client: 'Keppel Amfels',
|
||||
location: 'Brownsville, Texas',
|
||||
project: 'Offshore Drilling Rig',
|
||||
craftOnSite: '30 Welders, Fitters, Supervisors',
|
||||
duration: '16 months to date',
|
||||
personnel: 30
|
||||
},
|
||||
{
|
||||
client: 'Weeks Marine',
|
||||
location: 'Cameron, LA',
|
||||
project: 'Sea Wall LNG Terminal',
|
||||
craftOnSite: 'Welders and Fitters',
|
||||
duration: '8 months',
|
||||
personnel: 8
|
||||
},
|
||||
{
|
||||
client: 'STI Group',
|
||||
location: 'Tulsa, Oklahoma',
|
||||
project: 'Flex Drilling Rigs Fabrication',
|
||||
craftOnSite: 'Welders and Fitters',
|
||||
duration: '2 months',
|
||||
personnel: 12
|
||||
},
|
||||
{
|
||||
client: 'Ready Flo',
|
||||
location: 'Corpus Christi, TX',
|
||||
project: 'Skids Gas Separators',
|
||||
craftOnSite: 'Welders and Fitters',
|
||||
duration: '16 months to date',
|
||||
personnel: 12
|
||||
},
|
||||
{
|
||||
client: 'Space X Brownsville',
|
||||
location: 'Brownsville, TX',
|
||||
project: 'New erection construction',
|
||||
craftOnSite: 'Welders and Supervisors',
|
||||
craftOnSite: '24 welders and 2 supervisors',
|
||||
duration: '6 months',
|
||||
personnel: 26
|
||||
},
|
||||
{
|
||||
client: 'South East Texas Industries',
|
||||
location: 'Beaumont, Bridge City, Vidor, Orange Texas',
|
||||
project: 'H&P Flex Gas Land Rigs new fabrication',
|
||||
craftOnSite: '120 Pipe & Structure Fitters, Pipe & Structure Welders, Tig Welders, 6/GR Welders, S.S Welders, Supervisors, Fitter Helpers',
|
||||
duration: '42 months',
|
||||
personnel: 120
|
||||
},
|
||||
{
|
||||
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',
|
||||
craftOnSite: '36 Tig Welders, 6/GR Welders, Pipe & Structure Fitters, Supervisors, Tack Welders',
|
||||
duration: '32 months',
|
||||
personnel: 36
|
||||
},
|
||||
{
|
||||
client: 'Veolia Environmental Services',
|
||||
location: 'Port Arthur, Texas',
|
||||
project: 'Veolia Environmental Processing Plant Turnaround',
|
||||
craftOnSite: '38 Pipe & Structure Fitters, Pipe & Structure Welders, Boiler Makers',
|
||||
duration: '36 Days',
|
||||
personnel: 38
|
||||
},
|
||||
{
|
||||
client: 'Environmental Evolution Services',
|
||||
location: 'Robstown, Texas',
|
||||
project: 'Acid Frac Tank Containers',
|
||||
craftOnSite: '4 Welders and Fitters',
|
||||
duration: '24 months',
|
||||
personnel: 4
|
||||
},
|
||||
{
|
||||
client: 'Eastern Shipbuilding',
|
||||
location: 'Panama City, Florida',
|
||||
project: 'Fabrication of new Coast Guard Ships, Cargo Boats, Crew Boats',
|
||||
craftOnSite: 'Welders, Fitters, Electricians',
|
||||
craftOnSite: '35 Welders, Fitters, Electricians',
|
||||
duration: '5 years',
|
||||
personnel: 35
|
||||
},
|
||||
{
|
||||
client: 'STIS',
|
||||
location: 'Livingston, Texas',
|
||||
project: 'H&P Gas Land Rigs',
|
||||
craftOnSite: '60 Welders, Fitters, Supervisors',
|
||||
duration: '19 months',
|
||||
personnel: 60
|
||||
},
|
||||
{
|
||||
client: 'Shoreline Foundation Inc.',
|
||||
location: 'Port of Brownsville TX',
|
||||
project: 'Boat Landing Tie Downs',
|
||||
craftOnSite: '12 Welders and Fitters',
|
||||
duration: '1 month',
|
||||
personnel: 12
|
||||
},
|
||||
{
|
||||
client: 'STI GROUP',
|
||||
location: 'Orange, Texas',
|
||||
project: 'Ammonia and Gas Stainless Steel Skid Plants',
|
||||
craftOnSite: '6 Welders, Fitters, Assemblers',
|
||||
duration: '2 months',
|
||||
personnel: 6
|
||||
},
|
||||
{
|
||||
client: 'MOORE IRON AND STEEL INC.',
|
||||
location: 'Hondo, Texas',
|
||||
project: 'Martin Asphalt Terminal, Above Ground Storage Tank Fabrication',
|
||||
craftOnSite: '17 Pipe Welders, Pipe Fitters and Supervisors',
|
||||
duration: '7 months',
|
||||
personnel: 17
|
||||
},
|
||||
{
|
||||
client: 'SOLARIS OIL FIELD INFRASTRUCTURE INC.',
|
||||
location: 'Early, Texas',
|
||||
project: 'Sand Silos Fabrication for the Oil Field Industries',
|
||||
craftOnSite: '16 Welders, Fitters Combination',
|
||||
duration: '26 months',
|
||||
personnel: 16
|
||||
},
|
||||
{
|
||||
client: 'Derrick Construction',
|
||||
location: 'Port of Brownsville, TX',
|
||||
project: 'Construction of new dock #3',
|
||||
craftOnSite: '10 Fitter/Welder',
|
||||
duration: '4 months',
|
||||
personnel: 10
|
||||
},
|
||||
{
|
||||
client: 'Russell Marine',
|
||||
location: 'Port Aransas, Texas',
|
||||
project: '48" Pile Fitting and Welding',
|
||||
craftOnSite: '8 Pipe Welders and 4 Pipe Fitters',
|
||||
duration: '4 months',
|
||||
personnel: 12
|
||||
},
|
||||
{
|
||||
client: 'City of Brownsville, TX',
|
||||
location: 'Brownsville, Texas',
|
||||
project: 'Structural Components Fire Dept.',
|
||||
craftOnSite: 'Welders and Fitters',
|
||||
duration: '1 month',
|
||||
personnel: 6
|
||||
},
|
||||
{
|
||||
client: 'Weeks Marine',
|
||||
location: 'Aransas Pass, TX',
|
||||
project: 'Exxon Terminal Dock Piling Fabrication',
|
||||
craftOnSite: 'Welders and Fitters',
|
||||
duration: '3 months',
|
||||
personnel: 8
|
||||
},
|
||||
{
|
||||
client: 'Orion Construction',
|
||||
location: 'Ingleside, TX',
|
||||
project: 'Dock Piling LNG Terminal',
|
||||
craftOnSite: 'Welders and Fitters',
|
||||
duration: '6 months',
|
||||
personnel: 10
|
||||
},
|
||||
{
|
||||
client: 'Orion Construction',
|
||||
location: 'Ingleside, TX',
|
||||
project: 'Dock Piling LNG Terminal',
|
||||
craftOnSite: 'Welders and Fitters',
|
||||
duration: '4 months',
|
||||
personnel: 10
|
||||
},
|
||||
{
|
||||
client: 'Stewart Construction',
|
||||
location: 'Harvey, LA',
|
||||
project: 'Dock Piling and components',
|
||||
craftOnSite: '6 Welders and 2 Fitters',
|
||||
duration: '6 months to date',
|
||||
personnel: 8
|
||||
},
|
||||
{
|
||||
client: 'Beacon Maritime',
|
||||
location: 'Orange, Sabine Pass, and Port Arthur Texas',
|
||||
project: 'Songa, Aban Chiles, Neptune and Diamond Offshore Oil Rig Fabrication',
|
||||
craftOnSite: '80 Pipe & Structure Fitters, Pipe & Structure Welders, Supervisors, Fitter Helpers',
|
||||
duration: '12 months',
|
||||
personnel: 80
|
||||
},
|
||||
{
|
||||
client: 'Jet Specialty, Inc',
|
||||
location: 'Corpus Christi, Texas',
|
||||
project: 'Gas Pressure Vessels Fabrication',
|
||||
craftOnSite: '8 Mig Pipe Welders, Pipe Fitters and Supervisor',
|
||||
duration: '81 months',
|
||||
personnel: 8
|
||||
},
|
||||
{
|
||||
client: 'Long Fence Company',
|
||||
location: 'Brownsville, Texas',
|
||||
project: 'Rio Grande Valley US/Mexico Border Wall. Sectors 017-018-and 019',
|
||||
craftOnSite: '86 St Welders & Fitters, Fitter Helpers, Supervisors, Tack Welders, Operators, Riggers, Safety Officers',
|
||||
duration: '12 months',
|
||||
personnel: 86
|
||||
},
|
||||
{
|
||||
client: 'STI Oil Field Services',
|
||||
location: 'Vidor, Gonzalez, Kennedy, York Town, McAllen Texas. North Dakota, Denver Colorado.',
|
||||
project: 'H&P Flex Gas Land Rigs new fabrication',
|
||||
craftOnSite: '26 Flux Cored Welders and Fitters',
|
||||
duration: '26 months',
|
||||
personnel: 26
|
||||
},
|
||||
{
|
||||
client: 'Brownsville Navigation District',
|
||||
location: 'Port of Brownsville TX',
|
||||
project: 'Crane Boom repair and new construction',
|
||||
craftOnSite: '4 Welders and Fitters',
|
||||
duration: '6 years to Date',
|
||||
personnel: 4
|
||||
},
|
||||
{
|
||||
client: 'Solaris Oil Field Industries',
|
||||
location: 'Early, Texas',
|
||||
project: 'Mud Tanks and other drilling components',
|
||||
craftOnSite: '16 Welders, Fitters, Operators',
|
||||
duration: '11 months',
|
||||
personnel: 16
|
||||
},
|
||||
{
|
||||
client: 'R.P. Construction',
|
||||
location: 'Brownsville TX P.U.B Location',
|
||||
project: 'Welding Stainless Steel Pipe Welding System',
|
||||
craftOnSite: '4 Tig Welders and Fitters',
|
||||
duration: '5 months',
|
||||
personnel: 4
|
||||
},
|
||||
{
|
||||
client: 'READY FLO SYSTEMS',
|
||||
location: 'Corpus Christi, Texas',
|
||||
project: 'Oil Field Gas Separators Fabrication',
|
||||
craftOnSite: '3 Pipe Welder Combos',
|
||||
duration: '4 months',
|
||||
personnel: 3
|
||||
},
|
||||
{
|
||||
client: 'RIO GRANDE TOOLS, INC',
|
||||
location: 'Brownsville, Texas',
|
||||
project: 'Valley Baptist Hospital pipe line modifications',
|
||||
craftOnSite: '4 Welder/Fitters',
|
||||
duration: '6 months',
|
||||
personnel: 4
|
||||
},
|
||||
{
|
||||
client: 'STI Group',
|
||||
location: 'Beaumont, Texas',
|
||||
project: 'H&P Gas Land Rigs',
|
||||
craftOnSite: '8 welders and fitters',
|
||||
duration: '6 months',
|
||||
personnel: 8
|
||||
},
|
||||
{
|
||||
client: 'STI Group',
|
||||
location: 'Nederland, Texas',
|
||||
project: 'H&P Gas Land Rigs',
|
||||
craftOnSite: '10 Fitters',
|
||||
duration: '27 months',
|
||||
personnel: 10
|
||||
},
|
||||
{
|
||||
client: 'STI Group Florida',
|
||||
location: 'Cape Canaveral, Florida',
|
||||
project: 'Space X fabrication of new towers, piping & structural',
|
||||
craftOnSite: '10 Fitters & Welders',
|
||||
duration: '3 months',
|
||||
personnel: 10
|
||||
},
|
||||
{
|
||||
client: 'ATS Construction',
|
||||
location: 'Corpus Christi, TX',
|
||||
project: 'Pipe Rack Fabrication',
|
||||
craftOnSite: '7 Welders and 2 St/Fitters',
|
||||
duration: '3 months',
|
||||
personnel: 9
|
||||
},
|
||||
{
|
||||
client: 'STI Group',
|
||||
location: 'Vidor and Bridge City, TX',
|
||||
project: 'Flex Drilling Rigs Fabrication',
|
||||
craftOnSite: 'Welders and Fitters',
|
||||
duration: '14 months',
|
||||
personnel: 15
|
||||
},
|
||||
{
|
||||
client: 'Orion Construction',
|
||||
location: 'Donaldsonville, LA',
|
||||
project: 'Dock Piling LNG Terminal',
|
||||
craftOnSite: 'Welders and Fitters',
|
||||
duration: '4 months',
|
||||
personnel: 10
|
||||
},
|
||||
{
|
||||
client: 'ATS Construction',
|
||||
location: 'Corpus Christi, TX',
|
||||
project: 'Tank Vessels and Pipe Fabrication',
|
||||
craftOnSite: 'Welders and Fitters',
|
||||
duration: '8 months',
|
||||
personnel: 12
|
||||
},
|
||||
{
|
||||
client: 'Orion Marine',
|
||||
location: 'New Orleans, LA',
|
||||
project: 'Refurbishment of existing dock',
|
||||
craftOnSite: '8 welders',
|
||||
duration: '6 months to date',
|
||||
personnel: 8
|
||||
}
|
||||
];
|
||||
|
||||
// Industry categories for filtering
|
||||
const industries = [
|
||||
'All',
|
||||
'Offshore Oil Rigs',
|
||||
'Marine Construction',
|
||||
'Industrial Fabrication',
|
||||
'Aerospace Projects',
|
||||
'Infrastructure',
|
||||
'Energy & Utilities',
|
||||
'Government Projects'
|
||||
];
|
||||
|
||||
// Enhanced projects with industry categorization
|
||||
const enhancedProjects = projects.map(project => {
|
||||
let industry = 'Industrial Fabrication'; // default
|
||||
|
||||
if (project.project.toLowerCase().includes('oil rig') ||
|
||||
project.project.toLowerCase().includes('offshore') ||
|
||||
project.client.toLowerCase().includes('signal') ||
|
||||
project.client.toLowerCase().includes('keppel') ||
|
||||
project.client.toLowerCase().includes('beacon')) {
|
||||
industry = 'Offshore Oil Rigs';
|
||||
} else if (project.project.toLowerCase().includes('ship') ||
|
||||
project.project.toLowerCase().includes('marine') ||
|
||||
project.project.toLowerCase().includes('dock') ||
|
||||
project.project.toLowerCase().includes('boat') ||
|
||||
project.client.toLowerCase().includes('eastern shipbuilding') ||
|
||||
project.client.toLowerCase().includes('triton marine')) {
|
||||
industry = 'Marine Construction';
|
||||
} else if (project.client.toLowerCase().includes('space') ||
|
||||
project.project.toLowerCase().includes('space')) {
|
||||
industry = 'Aerospace Projects';
|
||||
} else if (project.project.toLowerCase().includes('border wall') ||
|
||||
project.client.toLowerCase().includes('government') ||
|
||||
project.location.toLowerCase().includes('naval base')) {
|
||||
industry = 'Government Projects';
|
||||
} else if (project.project.toLowerCase().includes('terminal') ||
|
||||
project.project.toLowerCase().includes('lng') ||
|
||||
project.project.toLowerCase().includes('storage tank')) {
|
||||
industry = 'Energy & Utilities';
|
||||
} else if (project.project.toLowerCase().includes('bridge') ||
|
||||
project.client.toLowerCase().includes('navigation') ||
|
||||
project.project.toLowerCase().includes('crane')) {
|
||||
industry = 'Infrastructure';
|
||||
}
|
||||
|
||||
return { ...project, industry };
|
||||
});
|
||||
|
||||
// Get unique locations for filter
|
||||
const locations = ['All', ...new Set(enhancedProjects.map(p => {
|
||||
const state = p.location.split(',').pop()?.trim() || p.location;
|
||||
return state.replace(/\b(Texas|TX|Florida|LA|Louisiana|Oklahoma|Colorado|GA|Georgia)\b/g, (match) => {
|
||||
const stateMap = {
|
||||
'TX': 'Texas',
|
||||
'LA': 'Louisiana',
|
||||
'GA': 'Georgia'
|
||||
};
|
||||
return stateMap[match] || match;
|
||||
});
|
||||
}))];
|
||||
|
||||
// Filtered projects based on search and filters
|
||||
const filteredProjects = useMemo(() => {
|
||||
return enhancedProjects.filter(project => {
|
||||
const matchesSearch = project.client.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
project.project.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
project.location.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
|
||||
const matchesIndustry = selectedIndustry === 'All' || project.industry === selectedIndustry;
|
||||
|
||||
const projectLocation = project.location.split(',').pop()?.trim() || project.location;
|
||||
const normalizedLocation = projectLocation.replace(/\b(TX|LA|GA)\b/g, (match) => {
|
||||
const stateMap = { 'TX': 'Texas', 'LA': 'Louisiana', 'GA': 'Georgia' };
|
||||
return stateMap[match] || match;
|
||||
});
|
||||
const matchesLocation = selectedLocation === 'All' || normalizedLocation.includes(selectedLocation);
|
||||
|
||||
return matchesSearch && matchesIndustry && matchesLocation;
|
||||
});
|
||||
}, [searchTerm, selectedIndustry, selectedLocation]);
|
||||
|
||||
// Handle loading state separately
|
||||
React.useEffect(() => {
|
||||
setIsLoading(true);
|
||||
const timer = setTimeout(() => setIsLoading(false), 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchTerm, selectedIndustry, selectedLocation]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-900">
|
||||
<Header />
|
||||
|
||||
{/* Breadcrumbs */}
|
||||
<nav className="bg-slate-800 border-b border-slate-700 py-3">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center space-x-2 text-sm">
|
||||
<button
|
||||
onClick={() => window.location.href = '/'}
|
||||
className="text-slate-400 hover:text-white transition-colors"
|
||||
>
|
||||
Home
|
||||
</button>
|
||||
<ChevronRight className="h-4 w-4 text-slate-500" />
|
||||
<span className="text-white font-medium">Clients & Projects</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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)' }}
|
||||
style={{ backgroundImage: 'url(/hero_subpage.png)' }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-900/80"></div>
|
||||
</div>
|
||||
|
||||
{/* Geometric Elements */}
|
||||
|
|
@ -94,20 +597,43 @@ const ClientsProjects = () => {
|
|||
<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>
|
||||
<div className="text-center animate-fadeInUp">
|
||||
<div
|
||||
ref={clientsCount.ref}
|
||||
className="text-4xl lg:text-5xl font-bold text-white mb-2 animate-bounce-subtle"
|
||||
>
|
||||
{clientsCount.count}
|
||||
</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>
|
||||
<div className="text-center animate-fadeInUp" style={{animationDelay: '0.1s'}}>
|
||||
<div
|
||||
ref={projectsCount.ref}
|
||||
className="text-4xl lg:text-5xl font-bold text-white mb-2 animate-bounce-subtle"
|
||||
style={{animationDelay: '0.2s'}}
|
||||
>
|
||||
{projectsCount.count}
|
||||
</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>
|
||||
<div className="text-center animate-fadeInUp" style={{animationDelay: '0.2s'}}>
|
||||
<div
|
||||
ref={longestProjectCount.ref}
|
||||
className="text-4xl lg:text-5xl font-bold text-white mb-2 animate-bounce-subtle"
|
||||
style={{animationDelay: '0.4s'}}
|
||||
>
|
||||
{longestProjectCount.count}
|
||||
</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>
|
||||
<div className="text-center animate-fadeInUp" style={{animationDelay: '0.3s'}}>
|
||||
<div
|
||||
ref={maxPersonnelCount.ref}
|
||||
className="text-4xl lg:text-5xl font-bold text-white mb-2 animate-bounce-subtle"
|
||||
style={{animationDelay: '0.6s'}}
|
||||
>
|
||||
{maxPersonnelCount.count}
|
||||
</div>
|
||||
<p className="text-slate-400 text-sm">Max Personnel on Site</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -115,60 +641,150 @@ const ClientsProjects = () => {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* Search and Filter Section */}
|
||||
<section className="py-8 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
|
||||
{/* Search */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search projects, clients, or locations..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Industry Filter */}
|
||||
<div>
|
||||
<select
|
||||
value={selectedIndustry}
|
||||
onChange={(e) => setSelectedIndustry(e.target.value)}
|
||||
className="w-full py-3 px-4 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
|
||||
>
|
||||
{industries.map(industry => (
|
||||
<option key={industry} value={industry}>{industry}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Location Filter */}
|
||||
<div>
|
||||
<select
|
||||
value={selectedLocation}
|
||||
onChange={(e) => setSelectedLocation(e.target.value)}
|
||||
className="w-full py-3 px-4 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
|
||||
>
|
||||
{locations.map(location => (
|
||||
<option key={location} value={location}>{location}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results Count */}
|
||||
<div className="mt-4 text-center">
|
||||
<span className="text-slate-400 text-sm">
|
||||
Showing {filteredProjects.length} of {enhancedProjects.length} projects
|
||||
</span>
|
||||
</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>
|
||||
<h2 className="text-4xl font-bold text-white mb-4">Project Portfolio</h2>
|
||||
<p className="text-slate-400 text-lg">Complete portfolio of our successful projects and client partnerships</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 */}
|
||||
{/* Loading State */}
|
||||
{isLoading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{[...Array(6)].map((_, index) => (
|
||||
<div key={index} className="bg-slate-800/50 border border-slate-600 rounded-xl p-6 animate-pulse">
|
||||
<div className="space-y-4">
|
||||
<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 className="flex-1">
|
||||
<div className="h-5 bg-slate-700 rounded mb-2"></div>
|
||||
<div className="h-4 bg-slate-700 rounded w-3/4"></div>
|
||||
</div>
|
||||
<div className="h-6 w-12 bg-slate-700 rounded"></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 className="space-y-3">
|
||||
<div className="h-4 bg-slate-700 rounded"></div>
|
||||
<div className="h-4 bg-slate-700 rounded"></div>
|
||||
<div className="h-4 bg-slate-700 rounded w-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{filteredProjects.length === 0 ? (
|
||||
<div className="col-span-full text-center py-16">
|
||||
<div className="text-slate-400 text-lg mb-4">No projects found</div>
|
||||
<p className="text-slate-500">Try adjusting your search terms or filters</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredProjects.map((project, 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 hover:scale-[1.02] touch-manipulation">
|
||||
<div className="space-y-4">
|
||||
{/* Industry Badge */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="bg-blue-500/10 border border-blue-500/20 rounded-lg px-2 py-1 inline-block mb-3">
|
||||
<span className="text-blue-400 text-xs font-medium">{project.industry}</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-2 line-clamp-2">{project.client}</h3>
|
||||
<div className="flex items-center space-x-2 text-slate-400">
|
||||
<MapPin className="h-4 w-4 flex-shrink-0" />
|
||||
<span className="text-sm line-clamp-1">{project.location}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-blue-500/20 rounded-lg px-3 py-1 ml-2">
|
||||
<span className="text-blue-400 text-sm font-medium">{project.personnel}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project Details */}
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-2">Project:</h4>
|
||||
<p className="text-slate-300 text-sm">{project.project}</p>
|
||||
<h4 className="text-white font-semibold mb-1 text-sm">Project:</h4>
|
||||
<p className="text-slate-300 text-sm line-clamp-2">{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>
|
||||
<h4 className="text-white font-semibold mb-1 text-sm">Craft on Site:</h4>
|
||||
<p className="text-slate-300 text-sm line-clamp-2">{project.craftOnSite}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-4 border-t border-slate-600">
|
||||
<div className="flex items-center justify-between pt-3 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>
|
||||
<span className="text-slate-400 text-sm">{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>
|
||||
<span className="text-slate-400 text-sm">{project.personnel}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -203,6 +819,17 @@ const ClientsProjects = () => {
|
|||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
{/* Back to Top Button */}
|
||||
{showBackToTop && (
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className="fixed bottom-8 right-8 z-50 bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full shadow-lg transition-all duration-300 hover:scale-110 touch-manipulation"
|
||||
aria-label="Back to top"
|
||||
>
|
||||
<ArrowUp className="h-6 w-6" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,22 +1,41 @@
|
|||
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 { Phone, Mail, Printer, MapPin, Clock, User, ArrowRight, FileText, ChevronRight } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useScrollAnimation } from '@/hooks/useScrollAnimation';
|
||||
|
||||
const Contact = () => {
|
||||
useScrollAnimation();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-900">
|
||||
<Header />
|
||||
|
||||
{/* Breadcrumbs */}
|
||||
<nav className="bg-slate-800 border-b border-slate-700 py-3">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center space-x-2 text-sm">
|
||||
<button
|
||||
onClick={() => window.location.href = '/'}
|
||||
className="text-slate-400 hover:text-white transition-colors"
|
||||
>
|
||||
Home
|
||||
</button>
|
||||
<ChevronRight className="h-4 w-4 text-slate-500" />
|
||||
<span className="text-white font-medium">Contact Us</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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)' }}
|
||||
style={{ backgroundImage: 'url(/hero-subpage.png)' }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-900/80"></div>
|
||||
</div>
|
||||
|
||||
{/* Geometric Elements */}
|
||||
|
|
@ -218,49 +237,349 @@ const Contact = () => {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Form Section */}
|
||||
<section className="py-24 bg-slate-900">
|
||||
{/* Interactive Map Section */}
|
||||
<section className="py-24 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="max-w-6xl 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>
|
||||
<h2 className="text-4xl font-bold text-white mb-4">Find Us on the Map</h2>
|
||||
<p className="text-slate-400 text-lg">Our primary location in Brownsville, Texas</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 className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Map */}
|
||||
<div className="rounded-2xl overflow-hidden">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3583.2847689234647!2d-97.39826948450866!3d25.975238583630243!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x866fb43ca7a4e4a7%3A0x6b8b8b8b8b8b8b8b!2s7748%20Padre%20Island%20Hwy%2C%20Brownsville%2C%20TX%2078521%2C%20USA!5e0!3m2!1sen!2sde!4v1652901234567!5m2!1sen!2sde"
|
||||
width="100%"
|
||||
height="400"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen={true}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="IIT Welding - South Texas Office Location"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
{/* Location Details */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
|
||||
<div className="flex items-start space-x-4 mb-6">
|
||||
<div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<MapPin className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-white mb-2">Primary Location</h3>
|
||||
<p className="text-blue-400 font-medium">South Texas Office & Fabrication Shop</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-white font-medium text-lg">7748 Padre Island Hwy.</p>
|
||||
<p className="text-slate-300">Brownsville, TX 78521</p>
|
||||
<p className="text-slate-400 text-sm italic mt-1">(Next to Mariscos de la Rosa Restaurant)</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3 pt-4 border-t border-slate-600">
|
||||
<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 font-medium">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 font-medium">956-831-5265</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Mail className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-slate-400">Email:</span>
|
||||
<a href="mailto:iit.avasquez@sbcglobal.net" className="text-white hover:text-blue-400 transition-colors font-medium break-all">
|
||||
iit.avasquez@sbcglobal.net
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<a
|
||||
href="https://www.google.com/maps/dir//7748+Padre+Island+Hwy,+Brownsville,+TX+78521"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center space-x-2 bg-blue-600 hover:bg-blue-700 text-white font-medium px-6 py-3 rounded-lg transition-colors"
|
||||
>
|
||||
<MapPin className="h-4 w-4" />
|
||||
<span>Get Directions</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</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 className="bg-slate-700/50 border border-slate-600 rounded-2xl p-6">
|
||||
<h4 className="text-white font-semibold mb-3">Business Hours</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-400">Monday - Friday:</span>
|
||||
<span className="text-white">8:00 AM - 5:00 PM</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-400">Saturday:</span>
|
||||
<span className="text-white">By Appointment</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-400">Sunday:</span>
|
||||
<span className="text-white">Closed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Response Time */}
|
||||
<div className="mt-12 text-center">
|
||||
{/* Contact Forms 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">Get in Touch</h2>
|
||||
<p className="text-slate-400 text-lg">
|
||||
Contact us for professional support or request a project quote
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Contact Form */}
|
||||
<div className="bg-slate-800/50 border border-slate-600 rounded-2xl p-8 animate-fadeInUp">
|
||||
<div className="flex items-center space-x-3 mb-6">
|
||||
<Mail className="h-6 w-6 text-blue-400" />
|
||||
<h3 className="text-2xl font-bold text-white">General Contact</h3>
|
||||
</div>
|
||||
|
||||
<form className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="firstName" className="block text-sm font-medium text-slate-300 mb-2">
|
||||
First Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
required
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
|
||||
placeholder="John"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="lastName" className="block text-sm font-medium text-slate-300 mb-2">
|
||||
Last Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
required
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
|
||||
placeholder="Doe"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-slate-300 mb-2">
|
||||
Email Address *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-slate-300 mb-2">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
|
||||
placeholder="(555) 123-4567"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="company" className="block text-sm font-medium text-slate-300 mb-2">
|
||||
Company
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
|
||||
placeholder="Your Company Name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-slate-300 mb-2">
|
||||
Message *
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
rows={5}
|
||||
required
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors resize-none"
|
||||
placeholder="Tell us about your project or inquiry..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors"
|
||||
>
|
||||
Send Message
|
||||
<Mail className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Quote Request Form */}
|
||||
<div className="bg-slate-800/50 border border-slate-600 rounded-2xl p-8 animate-fadeInUp" style={{animationDelay: '0.2s'}}>
|
||||
<div className="flex items-center space-x-3 mb-6">
|
||||
<FileText className="h-6 w-6 text-blue-400" />
|
||||
<h3 className="text-2xl font-bold text-white">Get a Quote</h3>
|
||||
</div>
|
||||
|
||||
<form className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="quoteName" className="block text-sm font-medium text-slate-300 mb-2">
|
||||
Contact Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="quoteName"
|
||||
name="quoteName"
|
||||
required
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
|
||||
placeholder="Your Name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="quoteEmail" className="block text-sm font-medium text-slate-300 mb-2">
|
||||
Email *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="quoteEmail"
|
||||
name="quoteEmail"
|
||||
required
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="projectType" className="block text-sm font-medium text-slate-300 mb-2">
|
||||
Project Type *
|
||||
</label>
|
||||
<select
|
||||
id="projectType"
|
||||
name="projectType"
|
||||
required
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
|
||||
>
|
||||
<option value="">Select Project Type</option>
|
||||
<option value="structural">Structural Welding</option>
|
||||
<option value="pipe">Pipe Welding</option>
|
||||
<option value="fabrication">Custom Fabrication</option>
|
||||
<option value="onsite">On-Site Services</option>
|
||||
<option value="inspection">Quality Inspection</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="industry" className="block text-sm font-medium text-slate-300 mb-2">
|
||||
Industry
|
||||
</label>
|
||||
<select
|
||||
id="industry"
|
||||
name="industry"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
|
||||
>
|
||||
<option value="">Select Industry</option>
|
||||
<option value="oil-gas">Oil & Gas</option>
|
||||
<option value="manufacturing">Manufacturing</option>
|
||||
<option value="construction">Construction</option>
|
||||
<option value="energy">Energy Utilities</option>
|
||||
<option value="chemical">Chemical Processing</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="timeline" className="block text-sm font-medium text-slate-300 mb-2">
|
||||
Project Timeline
|
||||
</label>
|
||||
<select
|
||||
id="timeline"
|
||||
name="timeline"
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
|
||||
>
|
||||
<option value="">Select Timeline</option>
|
||||
<option value="immediate">Immediate (Within 1 week)</option>
|
||||
<option value="soon">Soon (1-4 weeks)</option>
|
||||
<option value="month">Within a month</option>
|
||||
<option value="quarter">Within 3 months</option>
|
||||
<option value="future">Future planning</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="projectDetails" className="block text-sm font-medium text-slate-300 mb-2">
|
||||
Project Details *
|
||||
</label>
|
||||
<textarea
|
||||
id="projectDetails"
|
||||
name="projectDetails"
|
||||
rows={4}
|
||||
required
|
||||
className="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors resize-none"
|
||||
placeholder="Describe your project requirements, materials, specifications, location, etc."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors"
|
||||
>
|
||||
Request Quote
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Response Time Info */}
|
||||
<div className="mt-16 text-center animate-fadeInUp" style={{animationDelay: '0.4s'}}>
|
||||
<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>
|
||||
<span className="text-white font-medium">Quick Response Guarantee</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.
|
||||
We respond to all inquiries within 48 hours during business hours.
|
||||
Quote requests typically receive responses within 24 hours.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,11 @@ import Footer from '@/components/Footer';
|
|||
import Hero from '@/components/Hero';
|
||||
import CompanyBlurb from '@/components/CompanyBlurb';
|
||||
import LogoSection from '@/components/LogoSection';
|
||||
import { useScrollAnimation } from '@/hooks/useScrollAnimation';
|
||||
|
||||
const Index = () => {
|
||||
useScrollAnimation();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
import React from 'react';
|
||||
import Header from '@/components/Header';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Scale, FileText, Shield } from 'lucide-react';
|
||||
|
||||
const Legal = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-900">
|
||||
<Header />
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<section className="relative py-32 overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-20 right-20 w-96 h-96 bg-blue-400/20 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-20 left-20 w-64 h-64 bg-cyan-400/15 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">
|
||||
Legal
|
||||
<span className="text-blue-400"> Center</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-300 leading-relaxed">
|
||||
Legal information and compliance resources for IIT Welding services.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Legal Content */}
|
||||
<section className="py-24 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl 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">
|
||||
<Scale className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Terms of Service</h3>
|
||||
<p className="text-slate-400 mb-4">Our terms and conditions for service agreements</p>
|
||||
<a href="/terms" className="text-blue-400 hover:text-blue-300 transition-colors">
|
||||
View Terms →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8 text-center">
|
||||
<Shield className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Privacy Policy</h3>
|
||||
<p className="text-slate-400 mb-4">How we protect and handle your personal information</p>
|
||||
<a href="/privacy" className="text-blue-400 hover:text-blue-300 transition-colors">
|
||||
View Policy →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8 text-center">
|
||||
<FileText className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Compliance</h3>
|
||||
<p className="text-slate-400 mb-4">Industry certifications and regulatory compliance</p>
|
||||
<a href="/about-us" className="text-blue-400 hover:text-blue-300 transition-colors">
|
||||
Learn More →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
|
||||
<h2 className="text-2xl font-bold text-white mb-6">Legal Notice</h2>
|
||||
<div className="space-y-4 text-slate-300">
|
||||
<p>
|
||||
IIT Welding operates in compliance with all applicable federal, state, and local regulations
|
||||
governing welding and fabrication services.
|
||||
</p>
|
||||
<p>
|
||||
Our services are provided under the terms and conditions outlined in our service agreements.
|
||||
All work is performed by certified professionals in accordance with industry standards.
|
||||
</p>
|
||||
<p>
|
||||
For specific legal inquiries or contract negotiations, please contact our legal department
|
||||
through our main office.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Legal;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import Header from '@/components/Header';
|
||||
import Footer from '@/components/Footer';
|
||||
import { MapPin, Phone, Mail, Printer, Building, User } from 'lucide-react';
|
||||
import { MapPin, Phone, Mail, Printer, Building, User, ChevronRight } from 'lucide-react';
|
||||
|
||||
const Locations = () => {
|
||||
const locations = [
|
||||
|
|
@ -36,15 +36,31 @@ const Locations = () => {
|
|||
return (
|
||||
<div className="min-h-screen bg-slate-900">
|
||||
<Header />
|
||||
|
||||
{/* Breadcrumbs */}
|
||||
<nav className="bg-slate-800 border-b border-slate-700 py-3">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center space-x-2 text-sm">
|
||||
<button
|
||||
onClick={() => window.location.href = '/'}
|
||||
className="text-slate-400 hover:text-white transition-colors"
|
||||
>
|
||||
Home
|
||||
</button>
|
||||
<ChevronRight className="h-4 w-4 text-slate-500" />
|
||||
<span className="text-white font-medium">Locations</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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)' }}
|
||||
style={{ backgroundImage: 'url(/hero-subpage.png)' }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-900/80"></div>
|
||||
</div>
|
||||
|
||||
{/* Geometric Elements */}
|
||||
|
|
@ -70,61 +86,138 @@ const Locations = () => {
|
|||
{/* 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 className="max-w-7xl mx-auto space-y-16">
|
||||
{/* South Texas Office */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
|
||||
<div 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">South Texas Office & Fabrication Shop</h3>
|
||||
<div className="bg-blue-500/20 rounded-lg px-3 py-1 inline-block">
|
||||
<span className="text-blue-400 text-sm font-medium">Primary 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>
|
||||
<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>
|
||||
<p className="text-white font-medium">7748 Padre Island Hwy</p>
|
||||
<p className="text-slate-300">Brownsville, Texas 78521</p>
|
||||
<p className="text-slate-400 text-sm italic mt-1">(Next to Mariscos de la Rosa Restaurant)</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:956-831-5164" className="text-white hover:text-blue-400 transition-colors">
|
||||
956-831-5164
|
||||
</a>
|
||||
</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 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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* South Texas Map */}
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-2 overflow-hidden">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3583.2847689234647!2d-97.39826948450866!3d25.975238583630243!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x866fb43ca7a4e4a7%3A0x6b8b8b8b8b8b8b8b!2s7748%20Padre%20Island%20Hwy%2C%20Brownsville%2C%20TX%2078521%2C%20USA!5e0!3m2!1sen!2sde!4v1652901234567!5m2!1sen!2sde"
|
||||
width="100%"
|
||||
height="300"
|
||||
style={{ border: 0, borderRadius: '12px' }}
|
||||
allowFullScreen={true}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="South Texas Office - Brownsville Location"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Corporate Office */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
|
||||
<div 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">Corporate Office</h3>
|
||||
<div className="bg-blue-500/20 rounded-lg px-3 py-1 inline-block">
|
||||
<span className="text-blue-400 text-sm font-medium">Corporate 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">P.O. Box 23036</p>
|
||||
<p className="text-slate-300">Corpus Christi, Texas 78403</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:361-883-8999" className="text-white hover:text-blue-400 transition-colors">
|
||||
361-883-8999
|
||||
</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">361-884-1984</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Corporate Office Map */}
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-2 overflow-hidden">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d55344.51518451891!2d-97.43946!3d27.8005828!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8669006cfe7db7dd%3A0x84c9c6ee8e77af6c!2sCorpus%20Christi%2C%20TX%2078403%2C%20USA!5e0!3m2!1sen!2sde!4v1652901234568!5m2!1sen!2sde"
|
||||
width="100%"
|
||||
height="300"
|
||||
style={{ border: 0, borderRadius: '12px' }}
|
||||
allowFullScreen={true}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="Corporate Office - Corpus Christi Location"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
import React from 'react';
|
||||
import Header from '@/components/Header';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Shield, Lock, Eye, Database } from 'lucide-react';
|
||||
|
||||
const Privacy = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-900">
|
||||
<Header />
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<section className="relative py-32 overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-20 right-20 w-96 h-96 bg-blue-400/20 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-20 left-20 w-64 h-64 bg-cyan-400/15 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">
|
||||
Privacy
|
||||
<span className="text-blue-400"> Policy</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-300 leading-relaxed">
|
||||
How we collect, use, and protect your personal information.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Privacy Content */}
|
||||
<section className="py-24 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
|
||||
<Lock className="h-8 w-8 text-blue-400 mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-4">Data Protection</h3>
|
||||
<p className="text-slate-400">
|
||||
We use industry-standard encryption and security measures to protect your personal information.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
|
||||
<Eye className="h-8 w-8 text-blue-400 mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-4">Transparency</h3>
|
||||
<p className="text-slate-400">
|
||||
We are transparent about what data we collect and how we use it for our services.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
|
||||
<h2 className="text-2xl font-bold text-white mb-6">Information We Collect</h2>
|
||||
<div className="space-y-4 text-slate-300">
|
||||
<p>
|
||||
<strong>Contact Information:</strong> When you contact us for services, we collect your name,
|
||||
email address, phone number, and company information.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Project Details:</strong> Information about your welding and fabrication requirements
|
||||
to provide accurate quotes and services.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Website Usage:</strong> We may collect anonymous usage data to improve our website
|
||||
and services.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
|
||||
<h2 className="text-2xl font-bold text-white mb-6">How We Use Your Information</h2>
|
||||
<div className="space-y-4 text-slate-300">
|
||||
<p>
|
||||
• Provide welding and fabrication services<br/>
|
||||
• Communicate about projects and quotes<br/>
|
||||
• Improve our services and customer experience<br/>
|
||||
• Comply with legal and regulatory requirements
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
|
||||
<h2 className="text-2xl font-bold text-white mb-6">Contact Us</h2>
|
||||
<p className="text-slate-300">
|
||||
If you have questions about this Privacy Policy, please contact us at:
|
||||
</p>
|
||||
<div className="mt-4 text-slate-300">
|
||||
<p>Email: iit.avasquez@sbcglobal.net</p>
|
||||
<p>Phone: 956-831-5164</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Privacy;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import Header from '@/components/Header';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Wrench, Settings, Shield, Award, Users, CheckCircle } from 'lucide-react';
|
||||
import { Wrench, Settings, Shield, Award, Users, CheckCircle, ChevronRight } from 'lucide-react';
|
||||
|
||||
const Services = () => {
|
||||
const services = [
|
||||
|
|
@ -28,15 +28,31 @@ const Services = () => {
|
|||
return (
|
||||
<div className="min-h-screen bg-slate-900">
|
||||
<Header />
|
||||
|
||||
{/* Breadcrumbs */}
|
||||
<nav className="bg-slate-800 border-b border-slate-700 py-3">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center space-x-2 text-sm">
|
||||
<button
|
||||
onClick={() => window.location.href = '/'}
|
||||
className="text-slate-400 hover:text-white transition-colors"
|
||||
>
|
||||
Home
|
||||
</button>
|
||||
<ChevronRight className="h-4 w-4 text-slate-500" />
|
||||
<span className="text-white font-medium">Services & Specialties</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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)' }}
|
||||
style={{ backgroundImage: 'url(/hero_subpage.png)' }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-900/80"></div>
|
||||
</div>
|
||||
|
||||
{/* Geometric Elements */}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,119 @@
|
|||
import React from 'react';
|
||||
import Header from '@/components/Header';
|
||||
import Footer from '@/components/Footer';
|
||||
import { FileText, CheckCircle, AlertTriangle, Clock } from 'lucide-react';
|
||||
|
||||
const Terms = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-900">
|
||||
<Header />
|
||||
<main>
|
||||
{/* Hero Section */}
|
||||
<section className="relative py-32 overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-20 right-20 w-96 h-96 bg-blue-400/20 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-20 left-20 w-64 h-64 bg-cyan-400/15 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">
|
||||
Terms of
|
||||
<span className="text-blue-400"> Service</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-300 leading-relaxed">
|
||||
Terms and conditions for IIT Welding services and agreements.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Terms Content */}
|
||||
<section className="py-24 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
|
||||
<CheckCircle className="h-8 w-8 text-green-400 mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-4">Service Agreement</h3>
|
||||
<p className="text-slate-400">
|
||||
All welding services are provided under formal service agreements with clear terms.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-xl p-8">
|
||||
<Clock className="h-8 w-8 text-blue-400 mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-4">Project Timeline</h3>
|
||||
<p className="text-slate-400">
|
||||
Timelines are established based on project scope and agreed upon before work begins.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
|
||||
<h2 className="text-2xl font-bold text-white mb-6">Service Terms</h2>
|
||||
<div className="space-y-4 text-slate-300">
|
||||
<p>
|
||||
<strong>1. Service Provision:</strong> IIT Welding provides professional welding and
|
||||
fabrication services in accordance with industry standards and applicable regulations.
|
||||
</p>
|
||||
<p>
|
||||
<strong>2. Quality Assurance:</strong> All work is performed by certified welders and
|
||||
subject to quality control inspections.
|
||||
</p>
|
||||
<p>
|
||||
<strong>3. Safety Compliance:</strong> All operations comply with OSHA and industry
|
||||
safety standards.
|
||||
</p>
|
||||
<p>
|
||||
<strong>4. Project Specifications:</strong> Work is performed according to agreed-upon
|
||||
specifications and industry standards.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
|
||||
<h2 className="text-2xl font-bold text-white mb-6">Payment Terms</h2>
|
||||
<div className="space-y-4 text-slate-300">
|
||||
<p>
|
||||
• Payment terms are established in individual service agreements<br/>
|
||||
• Invoices are due within agreed-upon timeframes<br/>
|
||||
• Progress payments may be required for large projects<br/>
|
||||
• Final payment is due upon project completion and acceptance
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
|
||||
<h2 className="text-2xl font-bold text-white mb-6">Liability and Insurance</h2>
|
||||
<div className="space-y-4 text-slate-300">
|
||||
<p>
|
||||
IIT Welding maintains comprehensive general liability and professional liability insurance.
|
||||
Specific liability terms are outlined in individual service agreements.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-700/50 border border-slate-600 rounded-2xl p-8">
|
||||
<h2 className="text-2xl font-bold text-white mb-6">Contact for Agreements</h2>
|
||||
<p className="text-slate-300">
|
||||
For specific terms and service agreements, please contact us:
|
||||
</p>
|
||||
<div className="mt-4 text-slate-300">
|
||||
<p>Arturo Vasquez, Operations Manager</p>
|
||||
<p>Email: iit.avasquez@sbcglobal.net</p>
|
||||
<p>Phone: 956-831-5164</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Terms;
|
||||
Loading…
Reference in New Issue