mirror of
https://gitlab.com/davidels1986/ore-cart-checkout.git
synced 2026-10-30 02:59:13 +00:00
Changes
This commit is contained in:
gpt-engineer-app[bot]
parent
6cc4fd5ab3
commit
ef930b58be
3 changed files with 305 additions and 246 deletions
BIN
src/assets/partners/mining-partners.jpg
Normal file
BIN
src/assets/partners/mining-partners.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
|
|
@ -1,98 +1,144 @@
|
|||
import { Building2, Users, Award, Globe } from 'lucide-react';
|
||||
import { Building2, Users, Award, Globe, CheckCircle } from 'lucide-react';
|
||||
|
||||
const partners = [
|
||||
'AngloGold Ashanti',
|
||||
'Redpath',
|
||||
'West African Resources',
|
||||
'Tietto Minerals',
|
||||
'Master Drilling',
|
||||
'Sibanye Gold',
|
||||
'Sibanye Stillwater',
|
||||
'Harmony',
|
||||
'Gold Fields',
|
||||
'Blyvoor Gold',
|
||||
'Durban Roodepoort Deep',
|
||||
{ name: 'AngloGold Ashanti', initials: 'AA' },
|
||||
{ name: 'Redpath', initials: 'RP' },
|
||||
{ name: 'West African Resources', initials: 'WA' },
|
||||
{ name: 'Tietto Minerals', initials: 'TM' },
|
||||
{ name: 'Master Drilling', initials: 'MD' },
|
||||
{ name: 'Sibanye Gold', initials: 'SG' },
|
||||
{ name: 'Sibanye Stillwater', initials: 'SS' },
|
||||
{ name: 'Harmony', initials: 'HM' },
|
||||
{ name: 'Gold Fields', initials: 'GF' },
|
||||
{ name: 'Blyvoor Gold', initials: 'BG' },
|
||||
{ name: 'Durban Roodepoort Deep', initials: 'DR' },
|
||||
];
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-primary py-16">
|
||||
<section className="gradient-industrial py-16 md:py-20">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h1 className="font-display text-3xl md:text-4xl lg:text-5xl font-bold text-primary-foreground mb-4">
|
||||
About Westscott Group
|
||||
</h1>
|
||||
<p className="text-primary-foreground/80 max-w-2xl mx-auto text-lg">
|
||||
Trusted partnerships in the mining and industrial supply industry
|
||||
Trusted industrial supply partner to Africa's leading mining companies
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Bar */}
|
||||
<section className="bg-card border-b">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 divide-x divide-border">
|
||||
<div className="flex flex-col items-center justify-center py-8">
|
||||
<span className="text-3xl md:text-4xl font-bold text-primary">20+</span>
|
||||
<span className="text-muted-foreground text-sm">Years Experience</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center py-8">
|
||||
<span className="text-3xl md:text-4xl font-bold text-primary">500+</span>
|
||||
<span className="text-muted-foreground text-sm">Mining Clients</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center py-8">
|
||||
<span className="text-3xl md:text-4xl font-bold text-primary">1,000+</span>
|
||||
<span className="text-muted-foreground text-sm">Products</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center py-8">
|
||||
<span className="text-3xl md:text-4xl font-bold text-primary">24hr</span>
|
||||
<span className="text-muted-foreground text-sm">Quote Response</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Company Overview */}
|
||||
<section className="container mx-auto px-4 py-12">
|
||||
<div className="grid md:grid-cols-2 gap-8 items-center">
|
||||
<section className="container mx-auto px-4 py-12 md:py-16">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 className="font-display text-2xl md:text-3xl font-bold text-foreground mb-4">
|
||||
<h2 className="font-display text-2xl md:text-3xl font-bold text-foreground mb-6">
|
||||
Who We Are
|
||||
</h2>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
<p className="text-muted-foreground mb-4 leading-relaxed">
|
||||
Westscott Group of Companies is a leading supplier of industrial fasteners, tools, and equipment
|
||||
to the mining and construction sectors. Based in Carletonville, South Africa, we have built
|
||||
a reputation for quality products and reliable service.
|
||||
</p>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
<p className="text-muted-foreground mb-6 leading-relaxed">
|
||||
With over two decades of experience, we understand the demanding requirements of the mining
|
||||
industry and provide solutions that meet the highest standards of safety and performance.
|
||||
</p>
|
||||
<p className="text-muted-foreground">
|
||||
Our address: <strong>47 Station Street, Oberholzer, Carletonville, 2499</strong>
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle className="h-5 w-5 text-primary" />
|
||||
<span className="text-foreground">Quality certified products</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle className="h-5 w-5 text-primary" />
|
||||
<span className="text-foreground">24-hour quote turnaround</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle className="h-5 w-5 text-primary" />
|
||||
<span className="text-foreground">Bulk order discounts</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle className="h-5 w-5 text-primary" />
|
||||
<span className="text-foreground">Africa-wide delivery</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-card border rounded-xl p-6 text-center">
|
||||
<div className="bg-card border rounded-xl p-6 text-center hover:shadow-lg transition-shadow">
|
||||
<Building2 className="h-10 w-10 text-primary mx-auto mb-3" />
|
||||
<h3 className="font-semibold text-foreground">20+ Years</h3>
|
||||
<p className="text-sm text-muted-foreground">Industry Experience</p>
|
||||
<h3 className="font-semibold text-foreground">Established</h3>
|
||||
<p className="text-sm text-muted-foreground">Industry Leader</p>
|
||||
</div>
|
||||
<div className="bg-card border rounded-xl p-6 text-center">
|
||||
<div className="bg-card border rounded-xl p-6 text-center hover:shadow-lg transition-shadow">
|
||||
<Users className="h-10 w-10 text-primary mx-auto mb-3" />
|
||||
<h3 className="font-semibold text-foreground">500+</h3>
|
||||
<p className="text-sm text-muted-foreground">Mining Clients</p>
|
||||
<h3 className="font-semibold text-foreground">Expert Team</h3>
|
||||
<p className="text-sm text-muted-foreground">Industry Knowledge</p>
|
||||
</div>
|
||||
<div className="bg-card border rounded-xl p-6 text-center">
|
||||
<div className="bg-card border rounded-xl p-6 text-center hover:shadow-lg transition-shadow">
|
||||
<Award className="h-10 w-10 text-primary mx-auto mb-3" />
|
||||
<h3 className="font-semibold text-foreground">1,000+</h3>
|
||||
<p className="text-sm text-muted-foreground">Products</p>
|
||||
<h3 className="font-semibold text-foreground">Quality</h3>
|
||||
<p className="text-sm text-muted-foreground">Certified Products</p>
|
||||
</div>
|
||||
<div className="bg-card border rounded-xl p-6 text-center">
|
||||
<div className="bg-card border rounded-xl p-6 text-center hover:shadow-lg transition-shadow">
|
||||
<Globe className="h-10 w-10 text-primary mx-auto mb-3" />
|
||||
<h3 className="font-semibold text-foreground">Africa</h3>
|
||||
<p className="text-sm text-muted-foreground">Wide Coverage</p>
|
||||
<h3 className="font-semibold text-foreground">Africa Wide</h3>
|
||||
<p className="text-sm text-muted-foreground">Delivery Coverage</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Trusted Partners */}
|
||||
<section className="bg-card border-y py-12">
|
||||
<section className="bg-card border-y py-12 md:py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-10">
|
||||
<h2 className="font-display text-2xl md:text-3xl font-bold text-foreground mb-3">
|
||||
Trusted Partnerships
|
||||
<span className="text-primary font-medium text-sm uppercase tracking-wider">Vendor Numbers</span>
|
||||
<h2 className="font-display text-2xl md:text-3xl font-bold text-foreground mt-2 mb-3">
|
||||
Trusted Partnerships in the Industry
|
||||
</h2>
|
||||
<p className="text-muted-foreground">
|
||||
We are proud to supply leading mining companies across Africa
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||||
We are proud to be an approved vendor for leading mining companies across Africa
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{partners.map((partner) => (
|
||||
<div
|
||||
key={partner}
|
||||
className="bg-background border rounded-xl p-4 md:p-6 flex items-center justify-center text-center hover:shadow-lg transition-shadow"
|
||||
key={partner.name}
|
||||
className="group bg-background border rounded-xl p-5 flex flex-col items-center justify-center text-center hover:shadow-lg hover:border-primary/30 transition-all"
|
||||
>
|
||||
<span className="font-semibold text-foreground text-sm md:text-base">
|
||||
{partner}
|
||||
<div className="h-14 w-14 rounded-full bg-gradient-to-br from-primary/20 to-accent/20 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
|
||||
<span className="font-bold text-primary text-lg">{partner.initials}</span>
|
||||
</div>
|
||||
<span className="font-medium text-foreground text-sm leading-tight">
|
||||
{partner.name}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -100,27 +146,37 @@ const About = () => {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="container mx-auto px-4 py-16 text-center">
|
||||
<h2 className="font-display text-2xl md:text-3xl font-bold text-foreground mb-4">
|
||||
Ready to Partner With Us?
|
||||
</h2>
|
||||
<p className="text-muted-foreground max-w-xl mx-auto mb-6">
|
||||
Contact our team today to discuss your industrial supply needs.
|
||||
{/* Address Section */}
|
||||
<section className="container mx-auto px-4 py-12 text-center">
|
||||
<h3 className="font-display text-xl font-bold text-foreground mb-2">Our Location</h3>
|
||||
<p className="text-muted-foreground">
|
||||
47 Station Street, Oberholzer, Carletonville, 2499
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<a
|
||||
href="/contact"
|
||||
className="inline-flex items-center gap-2 bg-primary text-primary-foreground font-semibold px-8 py-3 rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
<a
|
||||
href="/products"
|
||||
className="inline-flex items-center gap-2 bg-secondary text-secondary-foreground font-semibold px-8 py-3 rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
View Products
|
||||
</a>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="gradient-industrial py-12">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="font-display text-2xl md:text-3xl font-bold text-primary-foreground mb-4">
|
||||
Ready to Partner With Us?
|
||||
</h2>
|
||||
<p className="text-primary-foreground/80 max-w-xl mx-auto mb-6">
|
||||
Contact our team today to discuss your industrial supply needs.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<a
|
||||
href="/contact"
|
||||
className="inline-flex items-center gap-2 bg-brand-yellow text-brand-yellow-foreground font-semibold px-8 py-3 rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
<a
|
||||
href="/products"
|
||||
className="inline-flex items-center gap-2 bg-primary-foreground text-primary font-semibold px-8 py-3 rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
View Products
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,202 +1,205 @@
|
|||
import { Phone, Mail, MapPin, Users, Briefcase, Calculator, Building2 } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Phone, Mail, MapPin, Clock } from 'lucide-react';
|
||||
|
||||
const Contact = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-primary py-16">
|
||||
<section className="gradient-industrial py-16 md:py-20">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h1 className="font-display text-3xl md:text-4xl lg:text-5xl font-bold text-primary-foreground mb-4">
|
||||
Contact Us
|
||||
Get In Touch
|
||||
</h1>
|
||||
<p className="text-primary-foreground/80 max-w-2xl mx-auto text-lg">
|
||||
Meet the team and get in touch with us
|
||||
Our team is ready to assist with your industrial supply needs
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Cards */}
|
||||
<section className="container mx-auto px-4 py-12">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* Management */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<Users className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<CardTitle className="text-primary">Management</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div>
|
||||
<p className="font-medium text-foreground">JD Wolfaardt</p>
|
||||
<a href="mailto:jd@wfsales.co.za" className="text-sm text-primary hover:underline">
|
||||
jd@wfsales.co.za
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-foreground">Gary Isherwood</p>
|
||||
<a href="mailto:gary@wfsales.co.za" className="text-sm text-primary hover:underline">
|
||||
gary@wfsales.co.za
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Internal Sales */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-12 w-12 rounded-full bg-brand-yellow/20 flex items-center justify-center">
|
||||
<Briefcase className="h-6 w-6 text-brand-yellow" />
|
||||
</div>
|
||||
<CardTitle className="text-brand-yellow">Internal Sales</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div>
|
||||
<p className="font-medium text-foreground">David Els</p>
|
||||
<a href="mailto:david@wfsales.co.za" className="text-sm text-primary hover:underline">
|
||||
david@wfsales.co.za
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-foreground">Tiaan Wolfaardt</p>
|
||||
<a href="mailto:tiaan@wfsales.co.za" className="text-sm text-primary hover:underline">
|
||||
tiaan@wfsales.co.za
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-foreground">Florence van der Walt</p>
|
||||
<a href="mailto:florence@wfsaels.co.za" className="text-sm text-primary hover:underline">
|
||||
florence@wfsaels.co.za
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Company Representatives */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-12 w-12 rounded-full bg-green-500/20 flex items-center justify-center">
|
||||
<Users className="h-6 w-6 text-green-600" />
|
||||
</div>
|
||||
<CardTitle className="text-green-600">Company Representatives</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-foreground">Calvin van Eck</span>
|
||||
<a href="mailto:calvin@wfsales.co.za" className="text-primary hover:underline">calvin@wfsales.co.za</a>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-foreground">Tiaan Wolfaardt</span>
|
||||
<a href="mailto:tiaan@wfsales.co.za" className="text-primary hover:underline">tiaan@wfsales.co.za</a>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-foreground">Chris Janneke</span>
|
||||
<a href="mailto:chris@wfsales.co.za" className="text-primary hover:underline">chris@wfsales.co.za</a>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-foreground">Gary Isherwood</span>
|
||||
<a href="mailto:gary@wfsales.co.za" className="text-primary hover:underline">gary@wfsales.co.za</a>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-foreground">George Shipley</span>
|
||||
<a href="mailto:sales4@wfsales.co.za" className="text-primary hover:underline">sales4@wfsales.co.za</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Accounts */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-12 w-12 rounded-full bg-red-500/20 flex items-center justify-center">
|
||||
<Calculator className="h-6 w-6 text-red-500" />
|
||||
</div>
|
||||
<CardTitle className="text-red-500">Accounts</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div>
|
||||
<p className="font-medium text-foreground">SJ Coetzee</p>
|
||||
<a href="mailto:sj@wfsales.co.za" className="text-sm text-primary hover:underline">
|
||||
sj@wfsales.co.za
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-foreground">Laura Isherwood</p>
|
||||
<a href="mailto:laura@wfsales.co.za" className="text-sm text-primary hover:underline">
|
||||
laura@wfsales.co.za
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Office */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-12 w-12 rounded-full bg-blue-500/20 flex items-center justify-center">
|
||||
<Building2 className="h-6 w-6 text-blue-500" />
|
||||
</div>
|
||||
<CardTitle className="text-blue-500">Office</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Phone className="h-4 w-4 text-muted-foreground" />
|
||||
<a href="tel:0187862427" className="text-primary hover:underline font-medium">
|
||||
018 786 2427/2859
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Address */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-12 w-12 rounded-full bg-purple-500/20 flex items-center justify-center">
|
||||
<MapPin className="h-6 w-6 text-purple-500" />
|
||||
</div>
|
||||
<CardTitle className="text-purple-500">Address</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-foreground font-medium">47 Station Street</p>
|
||||
<p className="text-muted-foreground">Oberholzer</p>
|
||||
<p className="text-muted-foreground">Carletonville, 2499</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Quick Contact Bar */}
|
||||
<section className="bg-card border-b">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 divide-x divide-border">
|
||||
<a href="tel:0187862427" className="flex items-center justify-center gap-3 py-6 hover:bg-secondary/50 transition-colors">
|
||||
<Phone className="h-5 w-5 text-primary" />
|
||||
<span className="font-medium text-foreground text-sm md:text-base">018 786 2427</span>
|
||||
</a>
|
||||
<a href="mailto:sales@wfsales.co.za" className="flex items-center justify-center gap-3 py-6 hover:bg-secondary/50 transition-colors">
|
||||
<Mail className="h-5 w-5 text-primary" />
|
||||
<span className="font-medium text-foreground text-sm md:text-base hidden sm:inline">sales@wfsales.co.za</span>
|
||||
<span className="font-medium text-foreground text-sm sm:hidden">Email Us</span>
|
||||
</a>
|
||||
<a href="#address" className="flex items-center justify-center gap-3 py-6 hover:bg-secondary/50 transition-colors">
|
||||
<MapPin className="h-5 w-5 text-primary" />
|
||||
<span className="font-medium text-foreground text-sm md:text-base">Carletonville</span>
|
||||
</a>
|
||||
<div className="flex items-center justify-center gap-3 py-6">
|
||||
<Clock className="h-5 w-5 text-primary" />
|
||||
<span className="font-medium text-foreground text-sm md:text-base">Mon-Fri 8-5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Quick Contact CTA */}
|
||||
<section className="bg-card border-y py-12">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="font-display text-2xl font-bold text-foreground mb-6">
|
||||
Get in Touch Quickly
|
||||
</h2>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<a
|
||||
href="tel:0187862427"
|
||||
className="inline-flex items-center gap-2 bg-primary text-primary-foreground font-semibold px-8 py-3 rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
<Phone className="h-5 w-5" />
|
||||
Call Us Now
|
||||
</a>
|
||||
<a
|
||||
href="mailto:sales@wfsales.co.za"
|
||||
className="inline-flex items-center gap-2 bg-brand-yellow text-brand-yellow-foreground font-semibold px-8 py-3 rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
<Mail className="h-5 w-5" />
|
||||
Email Sales
|
||||
</a>
|
||||
{/* Main Content */}
|
||||
<section className="container mx-auto px-4 py-12 md:py-16">
|
||||
<div className="grid lg:grid-cols-3 gap-8">
|
||||
{/* Left Column - Team Contacts */}
|
||||
<div className="lg:col-span-2 space-y-8">
|
||||
<div>
|
||||
<h2 className="font-display text-2xl font-bold text-foreground mb-6">
|
||||
Our Team
|
||||
</h2>
|
||||
|
||||
{/* Team Grid */}
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
{/* Management */}
|
||||
<div className="bg-card border rounded-xl p-5 hover:shadow-lg transition-shadow">
|
||||
<div className="flex items-center gap-3 mb-4 pb-3 border-b">
|
||||
<div className="h-10 w-10 rounded-full gradient-industrial flex items-center justify-center">
|
||||
<span className="text-primary-foreground font-bold text-sm">M</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-foreground">Management</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<p className="font-medium text-foreground text-sm">JD Wolfaardt</p>
|
||||
<a href="mailto:jd@wfsales.co.za" className="text-xs text-primary hover:underline">jd@wfsales.co.za</a>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-foreground text-sm">Gary Isherwood</p>
|
||||
<a href="mailto:gary@wfsales.co.za" className="text-xs text-primary hover:underline">gary@wfsales.co.za</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Internal Sales */}
|
||||
<div className="bg-card border rounded-xl p-5 hover:shadow-lg transition-shadow">
|
||||
<div className="flex items-center gap-3 mb-4 pb-3 border-b">
|
||||
<div className="h-10 w-10 rounded-full bg-brand-yellow flex items-center justify-center">
|
||||
<span className="text-brand-yellow-foreground font-bold text-sm">S</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-foreground">Internal Sales</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<p className="font-medium text-foreground text-sm">David Els</p>
|
||||
<a href="mailto:david@wfsales.co.za" className="text-xs text-primary hover:underline">david@wfsales.co.za</a>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-foreground text-sm">Tiaan Wolfaardt</p>
|
||||
<a href="mailto:tiaan@wfsales.co.za" className="text-xs text-primary hover:underline">tiaan@wfsales.co.za</a>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-foreground text-sm">Florence van der Walt</p>
|
||||
<a href="mailto:florence@wfsaels.co.za" className="text-xs text-primary hover:underline">florence@wfsaels.co.za</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Company Representatives */}
|
||||
<div className="bg-card border rounded-xl p-5 hover:shadow-lg transition-shadow">
|
||||
<div className="flex items-center gap-3 mb-4 pb-3 border-b">
|
||||
<div className="h-10 w-10 rounded-full bg-accent flex items-center justify-center">
|
||||
<span className="text-accent-foreground font-bold text-sm">R</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-foreground">Representatives</h3>
|
||||
</div>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-foreground">Calvin van Eck</span>
|
||||
<a href="mailto:calvin@wfsales.co.za" className="text-xs text-primary hover:underline">calvin@wfsales.co.za</a>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-foreground">Chris Janneke</span>
|
||||
<a href="mailto:chris@wfsales.co.za" className="text-xs text-primary hover:underline">chris@wfsales.co.za</a>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-foreground">George Shipley</span>
|
||||
<a href="mailto:sales4@wfsales.co.za" className="text-xs text-primary hover:underline">sales4@wfsales.co.za</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accounts */}
|
||||
<div className="bg-card border rounded-xl p-5 hover:shadow-lg transition-shadow">
|
||||
<div className="flex items-center gap-3 mb-4 pb-3 border-b">
|
||||
<div className="h-10 w-10 rounded-full bg-secondary flex items-center justify-center">
|
||||
<span className="text-secondary-foreground font-bold text-sm">A</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-foreground">Accounts</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<p className="font-medium text-foreground text-sm">SJ Coetzee</p>
|
||||
<a href="mailto:sj@wfsales.co.za" className="text-xs text-primary hover:underline">sj@wfsales.co.za</a>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-foreground text-sm">Laura Isherwood</p>
|
||||
<a href="mailto:laura@wfsales.co.za" className="text-xs text-primary hover:underline">laura@wfsales.co.za</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Office Info */}
|
||||
<div className="space-y-6">
|
||||
{/* Office Card */}
|
||||
<div id="address" className="bg-card border rounded-xl overflow-hidden">
|
||||
<div className="gradient-industrial p-5">
|
||||
<h3 className="font-display text-lg font-bold text-primary-foreground">Head Office</h3>
|
||||
</div>
|
||||
<div className="p-5 space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<MapPin className="h-5 w-5 text-primary mt-0.5" />
|
||||
<div>
|
||||
<p className="font-medium text-foreground">47 Station Street</p>
|
||||
<p className="text-muted-foreground text-sm">Oberholzer</p>
|
||||
<p className="text-muted-foreground text-sm">Carletonville, 2499</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Phone className="h-5 w-5 text-primary" />
|
||||
<div>
|
||||
<a href="tel:0187862427" className="font-medium text-foreground hover:text-primary transition-colors">
|
||||
018 786 2427 / 2859
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Clock className="h-5 w-5 text-primary" />
|
||||
<div>
|
||||
<p className="font-medium text-foreground">Mon - Fri</p>
|
||||
<p className="text-muted-foreground text-sm">8:00 AM - 5:00 PM</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="space-y-3">
|
||||
<a
|
||||
href="tel:0187862427"
|
||||
className="flex items-center justify-center gap-2 w-full bg-primary text-primary-foreground font-semibold py-4 rounded-xl hover:opacity-90 transition-opacity"
|
||||
>
|
||||
<Phone className="h-5 w-5" />
|
||||
Call Us Now
|
||||
</a>
|
||||
<a
|
||||
href="mailto:sales@wfsales.co.za"
|
||||
className="flex items-center justify-center gap-2 w-full bg-brand-yellow text-brand-yellow-foreground font-semibold py-4 rounded-xl hover:opacity-90 transition-opacity"
|
||||
>
|
||||
<Mail className="h-5 w-5" />
|
||||
Email Sales Team
|
||||
</a>
|
||||
<a
|
||||
href="/products"
|
||||
className="flex items-center justify-center gap-2 w-full bg-secondary text-secondary-foreground font-semibold py-4 rounded-xl hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Browse Products
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in a new issue