Update website to match style
This commit is contained in:
gpt-engineer-app[bot]
parent
b759dd51f6
commit
9b4cb2aad5
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
|
|
@ -8,35 +8,49 @@ const CompanyBlurb = () => {
|
|||
<section className="py-24 bg-bg-elevated">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
<h2 className="text-display-sm font-bold text-foreground">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="space-y-8 animate-fade-in">
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-ink leading-tight">
|
||||
Precision Craftsmanship, Reliable Service
|
||||
</h2>
|
||||
<p className="text-muted leading-relaxed text-lg">
|
||||
<p className="text-muted leading-relaxed text-xl font-light">
|
||||
{content.home.blurbLeft}
|
||||
</p>
|
||||
<Button className="group">
|
||||
<Button size="lg" className="group bg-accent hover:bg-accent/90">
|
||||
Learn More About Us
|
||||
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 animate-fade-in">
|
||||
<div className="bg-gradient-card rounded-xl p-8 shadow-subtle border border-border">
|
||||
<p className="text-muted leading-relaxed">
|
||||
<div className="space-y-8 animate-fade-in-up">
|
||||
<div className="bg-gradient-card rounded-2xl p-8 shadow-elevated border border-border">
|
||||
<p className="text-muted leading-relaxed text-lg mb-8">
|
||||
{content.home.blurbRight}
|
||||
</p>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 gap-6 mt-8 pt-6 border-t border-border">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-accent">500+</div>
|
||||
<div className="text-sm text-muted">Projects Completed</div>
|
||||
{/* Enhanced Stats Grid */}
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<div className="text-center group">
|
||||
<div className="text-4xl font-bold text-accent mb-2 group-hover:animate-glow transition-all">500+</div>
|
||||
<div className="text-sm text-muted font-medium">Projects Completed</div>
|
||||
<div className="w-12 h-0.5 bg-accent/30 mx-auto mt-2"></div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-accent">20+</div>
|
||||
<div className="text-sm text-muted">Years Experience</div>
|
||||
<div className="text-center group">
|
||||
<div className="text-4xl font-bold text-accent mb-2 group-hover:animate-glow transition-all">20+</div>
|
||||
<div className="text-sm text-muted font-medium">Years Experience</div>
|
||||
<div className="w-12 h-0.5 bg-accent/30 mx-auto mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional highlights */}
|
||||
<div className="mt-8 pt-6 border-t border-border">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted">Certified Welders</span>
|
||||
<span className="text-ink font-medium">✓ AWS Certified</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm mt-2">
|
||||
<span className="text-muted">Safety Record</span>
|
||||
<span className="text-ink font-medium">✓ Zero Incidents</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,77 +2,109 @@ import React from 'react';
|
|||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Wrench, Shield, Award } from 'lucide-react';
|
||||
import content from '@/content/content.json';
|
||||
import heroWelder from '@/assets/hero-welder.jpg';
|
||||
import heroFacility from '@/assets/hero-facility.jpg';
|
||||
|
||||
const Hero = () => {
|
||||
return (
|
||||
<section className="relative min-h-screen flex items-center hero-gradient overflow-hidden">
|
||||
{/* Background Image Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-bg/90 to-transparent z-10"></div>
|
||||
{/* Geometric Background Elements */}
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full border-l border-t border-accent/20"></div>
|
||||
<div className="absolute bottom-0 left-0 w-1/3 h-2/3 border-r border-b border-accent/10"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-20">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Content */}
|
||||
<div className="space-y-8 animate-fade-in-up">
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-display-lg font-bold text-ink leading-none">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center min-h-screen py-24">
|
||||
{/* Content - Left Side */}
|
||||
<div className="lg:col-span-6 space-y-8 animate-fade-in">
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-5xl lg:text-6xl xl:text-7xl font-bold text-ink leading-[0.9] tracking-tight">
|
||||
{content.home.heroTitle}
|
||||
</h1>
|
||||
<p className="text-xl text-muted max-w-lg leading-relaxed">
|
||||
<p className="text-xl lg:text-2xl text-muted max-w-2xl leading-relaxed font-light">
|
||||
{content.home.heroSubtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* CTAs */}
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Button size="lg" className="group">
|
||||
{/* CTAs - Matching Dispel Style */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 pt-4">
|
||||
<Button
|
||||
size="xl"
|
||||
variant="hero"
|
||||
className="bg-ink text-bg hover:bg-ink/90 shadow-elevated font-semibold text-lg px-8 py-4 h-auto"
|
||||
>
|
||||
Get Quote
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="xl"
|
||||
className="border-ink/30 text-ink hover:bg-ink/10 hover:border-ink font-semibold text-lg px-8 py-4 h-auto"
|
||||
>
|
||||
{content.home.ctaServices}
|
||||
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</Button>
|
||||
<Button variant="outline" size="lg">
|
||||
{content.home.ctaExplore}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-6 pt-8">
|
||||
{content.home.features.map((feature, index) => (
|
||||
<div key={index} className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-accent/20 rounded-md flex items-center justify-center">
|
||||
{index === 0 && <Wrench className="h-4 w-4 text-accent" />}
|
||||
{index === 1 && <Shield className="h-4 w-4 text-accent" />}
|
||||
{index === 2 && <Award className="h-4 w-4 text-accent" />}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-ink text-sm">{feature.title}</h3>
|
||||
<p className="text-muted text-xs leading-relaxed mt-1">{feature.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hero Image Placeholder */}
|
||||
<div className="relative lg:ml-8">
|
||||
<div className="relative bg-gradient-card rounded-2xl p-8 shadow-elevated">
|
||||
<div className="aspect-[4/3] bg-muted/20 rounded-xl flex items-center justify-center">
|
||||
<div className="text-center space-y-4">
|
||||
<Wrench className="h-16 w-16 text-accent mx-auto" />
|
||||
<p className="text-muted text-sm">Industrial Facility Image</p>
|
||||
{/* Hero Images - Right Side */}
|
||||
<div className="lg:col-span-6 relative">
|
||||
<div className="relative">
|
||||
{/* Main Hero Image Container */}
|
||||
<div className="relative bg-gradient-to-br from-bg-elevated/50 to-transparent p-1 rounded-2xl">
|
||||
<div className="relative overflow-hidden rounded-xl">
|
||||
<img
|
||||
src={heroWelder}
|
||||
alt="Professional welder working with industrial equipment"
|
||||
className="w-full h-[500px] object-cover"
|
||||
/>
|
||||
{/* Overlay gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-bg/60 via-transparent to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating Cards */}
|
||||
<div className="absolute -bottom-4 -left-4 bg-card rounded-xl p-4 shadow-subtle border border-border">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
<span className="text-xs text-ink font-medium">Active Projects: 15+</span>
|
||||
{/* Secondary Image - Overlaid */}
|
||||
<div className="absolute -top-8 -right-8 w-64 h-48 bg-gradient-to-br from-bg-elevated/50 to-transparent p-1 rounded-xl">
|
||||
<div className="relative overflow-hidden rounded-lg h-full">
|
||||
<img
|
||||
src={heroFacility}
|
||||
alt="Industrial fabrication facility"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-bg/40 to-transparent"></div>
|
||||
|
||||
{/* Label */}
|
||||
<div className="absolute top-3 left-3 bg-bg/80 backdrop-blur-sm rounded px-2 py-1">
|
||||
<span className="text-ink text-xs font-medium">Our Facility</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute -top-4 -right-4 bg-card rounded-xl p-4 shadow-subtle border border-border">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Award className="h-4 w-4 text-accent" />
|
||||
<span className="text-xs text-ink font-medium">20+ Years Experience</span>
|
||||
{/* Decorative border elements */}
|
||||
<div className="absolute -inset-4 border border-accent/20 rounded-2xl pointer-events-none"></div>
|
||||
<div className="absolute -inset-8 border-l border-t border-accent/10 rounded-2xl pointer-events-none"></div>
|
||||
</div>
|
||||
|
||||
{/* Floating Stats Cards */}
|
||||
<div className="absolute -bottom-6 -left-6 bg-card/90 backdrop-blur-sm rounded-xl p-6 shadow-elevated border border-border">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
|
||||
<Wrench className="h-6 w-6 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-ink">500+</div>
|
||||
<div className="text-sm text-muted">Projects Completed</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute -top-6 right-8 bg-card/90 backdrop-blur-sm rounded-xl p-6 shadow-elevated border border-border">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
|
||||
<Award className="h-6 w-6 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-ink">20+</div>
|
||||
<div className="text-sm text-muted">Years Experience</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
import React from 'react';
|
||||
|
||||
const LogoSection = () => {
|
||||
const clients = [
|
||||
{ name: 'ExxonMobil', logo: 'EM' },
|
||||
{ name: 'Chevron', logo: 'CV' },
|
||||
{ name: 'Valero', logo: 'VL' },
|
||||
{ name: 'Phillips 66', logo: 'P66' },
|
||||
{ name: 'Marathon', logo: 'MPC' },
|
||||
{ name: 'Citgo', logo: 'CG' }
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-16 bg-bg border-t border-border/50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-12">
|
||||
<p className="text-muted text-sm uppercase tracking-wider font-medium">
|
||||
Trusted by Industry Leaders
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center">
|
||||
{clients.map((client, index) => (
|
||||
<div
|
||||
key={client.name}
|
||||
className="flex items-center justify-center group hover-scale"
|
||||
style={{
|
||||
animationDelay: `${index * 0.1}s`
|
||||
}}
|
||||
>
|
||||
<div className="w-24 h-16 bg-gradient-card border border-border rounded-lg flex items-center justify-center group-hover:border-accent/30 transition-smooth">
|
||||
<div className="text-center">
|
||||
<div className="text-ink font-bold text-sm opacity-70 group-hover:opacity-100 transition-opacity">
|
||||
{client.logo}
|
||||
</div>
|
||||
<div className="text-xs text-muted opacity-50 group-hover:opacity-70 transition-opacity mt-1">
|
||||
{client.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default LogoSection;
|
||||
|
|
@ -100,6 +100,16 @@
|
|||
.focus-ring {
|
||||
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background;
|
||||
}
|
||||
|
||||
/* Interactive hover effects */
|
||||
.hover-scale {
|
||||
@apply transition-all duration-300 ease-out hover:scale-105;
|
||||
}
|
||||
|
||||
/* Story link with underline animation */
|
||||
.story-link {
|
||||
@apply relative inline-block after:content-[''] after:absolute after:w-full after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:bg-accent after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
|
|
|
|||
|
|
@ -3,13 +3,15 @@ import Header from '@/components/Header';
|
|||
import Footer from '@/components/Footer';
|
||||
import Hero from '@/components/Hero';
|
||||
import CompanyBlurb from '@/components/CompanyBlurb';
|
||||
import LogoSection from '@/components/LogoSection';
|
||||
|
||||
const Index = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
<main>
|
||||
<main id="main">
|
||||
<Hero />
|
||||
<LogoSection />
|
||||
<CompanyBlurb />
|
||||
</main>
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -140,12 +140,43 @@ export default {
|
|||
transform: "translateY(0)",
|
||||
},
|
||||
},
|
||||
"scale-in": {
|
||||
from: {
|
||||
opacity: "0",
|
||||
transform: "scale(0.95)",
|
||||
},
|
||||
to: {
|
||||
opacity: "1",
|
||||
transform: "scale(1)",
|
||||
},
|
||||
},
|
||||
"slide-in-right": {
|
||||
from: {
|
||||
opacity: "0",
|
||||
transform: "translateX(100px)",
|
||||
},
|
||||
to: {
|
||||
opacity: "1",
|
||||
transform: "translateX(0)",
|
||||
},
|
||||
},
|
||||
"glow": {
|
||||
"0%, 100%": {
|
||||
boxShadow: "0 0 20px hsl(355 75% 47% / 0.3)",
|
||||
},
|
||||
"50%": {
|
||||
boxShadow: "0 0 40px hsl(355 75% 47% / 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
"fade-in": "fade-in 0.6s ease-out",
|
||||
"fade-in-up": "fade-in-up 0.8s ease-out",
|
||||
"scale-in": "scale-in 0.4s ease-out",
|
||||
"slide-in-right": "slide-in-right 0.6s ease-out",
|
||||
"glow": "glow 2s ease-in-out infinite",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue