diff --git a/src/assets/partners/mining-partners.jpg b/src/assets/partners/mining-partners.jpg
new file mode 100644
index 0000000..1f6d666
Binary files /dev/null and b/src/assets/partners/mining-partners.jpg differ
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 8f63bd0..6cdabf0 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -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>
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index ed8ad13..d8fe025 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -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>