erste version
This commit is contained in:
@@ -1,60 +1,109 @@
|
||||
import React from 'react';
|
||||
import Header from '@/components/Header';
|
||||
import Footer from '@/components/Footer';
|
||||
import { Wrench, Settings, Shield } from 'lucide-react';
|
||||
import content from '@/content/content.json';
|
||||
import { Wrench, Settings, Shield, Award, Users, CheckCircle } from 'lucide-react';
|
||||
|
||||
const Services = () => {
|
||||
const services = [
|
||||
'Tig Welders', 'Pipe Welders', 'Mig Welders', 'Flux Cored Welders', 'Sub Arc Welders',
|
||||
'6-GR Welders', 'Structural Welders', 'Tack Welders', 'Pipe Fitters', 'Structural Fitters',
|
||||
'Supervisors', 'Foremans', 'Safety Inspectors', 'Boiler Makers', 'Scaffold Builders',
|
||||
'Personnel / Laborers', 'CWI Inspectors', 'Rig Welders'
|
||||
];
|
||||
|
||||
const specialties = [
|
||||
'Jack Up Oil Rigs', 'Semi-Submersible Oil Rigs', 'Gas Land Rigs', 'Refineries',
|
||||
'Platform Jackets', 'Civil Structures', 'Piled Towers', 'Platform Decks',
|
||||
'Pressure Vessels', 'Structure Skids', 'Pipe Lines', 'Boats / Ships'
|
||||
];
|
||||
|
||||
const certifications = [
|
||||
'AWS Certified Welders',
|
||||
'ASME Code Welding',
|
||||
'ABS Marine Welding',
|
||||
'API Standards',
|
||||
'Quality Control Inspectors'
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="min-h-screen bg-slate-900">
|
||||
<Header />
|
||||
<main className="pt-16">
|
||||
{/* Hero Section */}
|
||||
<section className="py-24 hero-gradient">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-6">
|
||||
<h1 className="text-display-md font-bold text-foreground">
|
||||
{content.services.title}
|
||||
<main>
|
||||
{/* Hero Section with Image */}
|
||||
<section className="relative py-32 overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
style={{ backgroundImage: 'url(/carousel_2.png)' }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-900/80"></div>
|
||||
</div>
|
||||
|
||||
{/* Geometric Elements */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute top-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-20 left-20 w-64 h-64 bg-blue-400/5 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<h1 className="text-5xl lg:text-6xl font-bold text-white leading-tight">
|
||||
Services &
|
||||
<span className="text-blue-400"> Specialties</span>
|
||||
</h1>
|
||||
<p className="text-xl text-muted">
|
||||
Professional welding and fabrication services tailored to your industrial needs
|
||||
<p className="text-xl text-slate-300 leading-relaxed">
|
||||
Professional welding and fabrication services for industrial and commercial projects.
|
||||
Delivering expert craftsmanship with certified welders and modern equipment.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services Grid */}
|
||||
<section className="py-24 bg-bg-elevated">
|
||||
{/* Services Section */}
|
||||
<section className="py-24 bg-slate-800">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
||||
{/* Services Column */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center space-x-3 mb-8">
|
||||
<Wrench className="h-8 w-8 text-accent" />
|
||||
<h2 className="text-2xl font-bold text-foreground">Services</h2>
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-center space-x-4 mb-8">
|
||||
<div className="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center">
|
||||
<Wrench className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold text-white">Services</h2>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{content.services.services.map((service, index) => (
|
||||
<div key={index} className="bg-gradient-card p-6 rounded-xl border border-border hover:shadow-subtle transition-smooth">
|
||||
<h3 className="font-semibold text-foreground mb-2">{service}</h3>
|
||||
<p className="text-muted text-sm">Professional service with certified specialists and modern equipment</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{services.map((service, index) => (
|
||||
<div key={index} className="bg-slate-700/50 border border-slate-600 rounded-lg p-4 hover:bg-slate-700/70 transition-all duration-300">
|
||||
<div className="flex items-center space-x-3">
|
||||
<CheckCircle className="h-5 w-5 text-blue-400 flex-shrink-0" />
|
||||
<span className="text-white font-medium">{service}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Specialties Column */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center space-x-3 mb-8">
|
||||
<Settings className="h-8 w-8 text-accent" />
|
||||
<h2 className="text-2xl font-bold text-foreground">Specialties</h2>
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-center space-x-4 mb-8">
|
||||
<div className="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center">
|
||||
<Settings className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold text-white">Specialties</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{content.services.specialties.map((specialty, index) => (
|
||||
<div key={index} className="bg-gradient-card p-6 rounded-xl border border-border hover:shadow-subtle transition-smooth">
|
||||
<h3 className="font-semibold text-foreground mb-2">{specialty}</h3>
|
||||
<p className="text-muted text-sm">Specialized expertise with attention to detail and quality assurance</p>
|
||||
{specialties.map((specialty, index) => (
|
||||
<div key={index} className="bg-slate-700/50 border border-slate-600 rounded-lg p-6 hover:bg-slate-700/70 transition-all duration-300">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Award className="h-6 w-6 text-blue-400 flex-shrink-0" />
|
||||
<div>
|
||||
<h3 className="text-white font-semibold text-lg">{specialty}</h3>
|
||||
<p className="text-slate-400 text-sm">Specialized expertise with attention to detail and quality assurance</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -64,38 +113,47 @@ const Services = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Quality Assurance */}
|
||||
<section className="py-24">
|
||||
{/* Certifications Section */}
|
||||
<section className="py-24 bg-slate-900">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-12">
|
||||
<div className="flex items-center justify-center space-x-3 mb-6">
|
||||
<Shield className="h-10 w-10 text-accent" />
|
||||
<h2 className="text-display-sm font-bold text-foreground">Quality Assurance</h2>
|
||||
<div className="max-w-6xl mx-auto text-center">
|
||||
<div className="flex items-center justify-center space-x-4 mb-12">
|
||||
<div className="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center">
|
||||
<Shield className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold text-white">Welder Certifications</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="space-y-4">
|
||||
<div className="w-16 h-16 bg-accent/20 rounded-xl flex items-center justify-center mx-auto">
|
||||
<Shield className="h-8 w-8 text-accent" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
|
||||
{certifications.map((cert, index) => (
|
||||
<div key={index} className="bg-slate-800/50 border border-slate-600 rounded-xl p-6 hover:bg-slate-800/70 transition-all duration-300">
|
||||
<div className="space-y-4">
|
||||
<div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mx-auto">
|
||||
<Shield className="h-6 w-6 text-blue-400" />
|
||||
</div>
|
||||
<h3 className="text-white font-semibold">{cert}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground">Certified Processes</h3>
|
||||
<p className="text-muted">All work follows industry standards and safety protocols</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8">
|
||||
<Users className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Expert Team</h3>
|
||||
<p className="text-slate-400">Certified professionals with decades of experience in industrial welding</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="w-16 h-16 bg-accent/20 rounded-xl flex items-center justify-center mx-auto">
|
||||
<Wrench className="h-8 w-8 text-accent" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground">Expert Craftsmen</h3>
|
||||
<p className="text-muted">Skilled professionals with extensive experience</p>
|
||||
<div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8">
|
||||
<Settings className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Modern Equipment</h3>
|
||||
<p className="text-slate-400">State-of-the-art welding equipment and fabrication tools</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="w-16 h-16 bg-accent/20 rounded-xl flex items-center justify-center mx-auto">
|
||||
<Settings className="h-8 w-8 text-accent" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground">Modern Equipment</h3>
|
||||
<p className="text-muted">State-of-the-art tools and technology</p>
|
||||
<div className="bg-slate-800/50 border border-slate-600 rounded-xl p-8">
|
||||
<Award className="h-12 w-12 text-blue-400 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">Quality Assurance</h3>
|
||||
<p className="text-slate-400">Rigorous quality control and safety standards on every project</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user