jeisaimporters-WEBSITE/contact.html
Dave 56e0b930b0 style: round buttons (pill) and give hero image breathing room on mobile
- .btn gets border-radius: 999px so all CTAs render as pills instead of
  hard rectangles.
- .hero__art mobile padding bumped 16px -> 24px so the MagBeast schematic
  has more inset from the screen edge on phones.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-08-19 12:54:42 +02:00

612 lines
32 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Contact &amp; Quote — JEI South Africa</title>
<meta name="description" content="Request a quote, datasheet, or on-site demo. Phone, email, WhatsApp, and a request form — same-day response from JEI South Africa." />
<!-- Open Graph (WhatsApp, Facebook, LinkedIn, Slack, Discord) -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="JEI South Africa">
<meta property="og:title" content="Contact &amp; Quote — JEI South Africa">
<meta property="og:description" content="Request a quote, datasheet, or on-site demo. Phone, email, WhatsApp, and a request form — same-day response from JEI South Africa.">
<meta property="og:url" content="https://jeisaimporters.co.za/contact.html">
<meta property="og:image" content="https://jeisaimporters.co.za/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="JEI South Africa — Magnetic Drills and Annular Cutters">
<meta property="og:locale" content="en_ZA">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Contact &amp; Quote — JEI South Africa">
<meta name="twitter:description" content="Request a quote, datasheet, or on-site demo. Phone, email, WhatsApp, and a request form — same-day response from JEI South Africa.">
<meta name="twitter:image" content="https://jeisaimporters.co.za/og-image.jpg">
<!-- Canonical &amp; favicon -->
<link rel="canonical" href="https://jeisaimporters.co.za/contact.html">
<link rel="icon" type="image/png" href="/brand-mark.png">
<meta name="theme-color" content="#2C3A45">
<style>
/* Tokens */
:root {
--bg: #2C3A45;
--surface: #FFFFFF;
--fg: #1B2A33;
--muted: #5A6770;
--border: #D7DCE0;
--accent: #FBE35B;
--accent-ink:#1B2A33;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
--font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
--container: 1280px;
--gutter: 24px;
--header-h: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.55;
color: var(--fg);
background: var(--surface);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-variant-numeric: tabular-nums;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--accent); color: var(--accent-ink); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.eyebrow.on-dark { color: rgba(255,255,255,0.7); }
/* Header (shared) */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); }
.topbar__inner { height: var(--header-h); display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
.brand__mark { display: block; height: 40px; width: auto; }
.brand__sub { font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.brand__sub .accent { color: var(--accent); }
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s; }
.nav a:hover, .nav a.is-active { color: #fff; border-bottom-color: var(--accent); }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 0; padding: 10px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.nav-toggle { display: none; background: transparent; color: #fff; border: 0; width: 40px; height: 40px; align-items: center; justify-content: center; margin-left: auto; }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-drawer { position: fixed; inset: 0; background: var(--bg); z-index: 60; display: none; flex-direction: column; padding: 24px; }
.nav-drawer.is-open { display: flex; }
.nav-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.nav-drawer a { color: #fff; font-size: 22px; font-weight: 500; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.nav-drawer__cta { margin-top: 32px; }
/* Page hero */
.page-hero { background: var(--bg); color: #fff; padding: 64px 0 56px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.page-hero__crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 16px; }
.page-hero__crumb a { color: rgba(255,255,255,0.7); }
.page-hero h1 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; max-width: 22ch; }
.page-hero p { margin: 0; color: rgba(255,255,255,0.78); max-width: 60ch; font-size: 17px; line-height: 1.6; }
/* Sections */
.section { padding: 80px 0; }
.section--alt { background: #F4F5F6; }
.section--dark { background: var(--bg); color: #fff; }
.section--dark h2 { color: #fff; }
.section--dark .eyebrow { color: rgba(255,255,255,0.7); }
.section__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; margin-bottom: 40px; }
.section__head h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 0; }
.section__head p { margin: 0; color: var(--muted); max-width: 50ch; font-size: 16px; line-height: 1.6; }
.section--dark .section__head p { color: rgba(255,255,255,0.78); }
/* Contact split: form + sidebar */
.contact-split { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 64px; align-items: start; }
/* Form */
.form { display: flex; flex-direction: column; gap: 24px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.field label .req { color: var(--accent-ink); }
.field input, .field select, .field textarea {
font: inherit; font-size: 15px; color: var(--fg);
padding: 12px 0 10px; background: transparent;
border: 0; border-bottom: 1px solid var(--border);
border-radius: 0; outline: none;
transition: border-color 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--fg); }
.field textarea { min-height: 120px; resize: vertical; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-bottom-color: #B03A2E; }
.field__err { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: #B03A2E; min-height: 14px; }
.field__hint { font-size: 12.5px; color: var(--muted); }
.form__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: 8px; }
.form__note { font-size: 12.5px; color: var(--muted); }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; border: 1px solid transparent; border-radius: 999px; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: #FFD96A; }
.btn--ink { background: var(--fg); color: #fff; }
.btn--ink:hover { background: #2A3942; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn--ghost:hover { border-color: #fff; }
.btn--ghost-dark { background: transparent; color: var(--fg); border-color: var(--border); }
.btn--ghost-dark:hover { border-color: var(--fg); }
.btn .arr { width: 14px; height: 14px; }
.form__success {
display: none;
padding: 32px 28px;
background: #EAF5EE;
border: 1px solid #1B5E3F;
color: #1B5E3F;
}
.form__success.is-shown { display: block; }
.form__success h3 { margin: 0 0 8px; font-size: 18px; }
.form__success p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #1B5E3F; }
.form__success strong { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 13px; }
/* Sidebar */
.side { display: flex; flex-direction: column; gap: 24px; }
.side__card {
border: 1px solid var(--border);
padding: 24px 24px 22px;
background: var(--surface);
}
.side__card h3 { margin: 0 0 12px; font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.side__row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.side__row:last-child { border-bottom: 0; }
.side__row .k { color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.side__row .v { color: var(--fg); }
.side__row .v a:hover { color: var(--accent-ink); }
.side__card--accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.side__card--accent h3 { color: var(--accent-ink); }
.side__card--accent .side__row .k { color: rgba(0,0,0,0.6); }
.side__card--accent .side__row .v { color: var(--accent-ink); }
.side__card--accent .side__row { border-color: rgba(0,0,0,0.18); }
.side__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0,0,0,0.6); margin: 0 0 6px; }
.side__card--accent h3 { font-family: var(--font-sans); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; margin: 0 0 10px; }
.side__lede { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: rgba(0,0,0,0.75); }
/* Offices (dark) */
.grid-offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.12); border-left: 1px solid rgba(255,255,255,0.12); }
.office { padding: 28px 28px 24px; border-right: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); }
.office__role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.office h3 { margin: 0 0 14px; font-size: 18px; font-weight: 600; color: #fff; }
.office p { margin: 0 0 4px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.78); }
.office .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 12px; }
/* CTA strip */
.cta-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cta-strip__inner { padding: 56px 0; display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 48px; align-items: center; }
.cta-strip h2 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 8px; }
.cta-strip p { margin: 0; color: var(--muted); max-width: 56ch; }
.cta-strip__actions { display: flex; gap: 12px; justify-self: end; flex-wrap: wrap; }
/* Footer (shared) */
.footer { background: var(--bg); color: rgba(255,255,255,0.78); padding: 64px 0 32px; }
.footer__top { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { font-size: 14.5px; color: rgba(255,255,255,0.85); border-bottom: 1px solid transparent; }
.footer ul a:hover { border-bottom-color: var(--accent); }
.footer__brand p { margin: 14px 0 0; max-width: 32ch; font-size: 14px; color: rgba(255,255,255,0.6); }
.footer__bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
/* Responsive */
@media (max-width: 1024px) {
.section__head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
.contact-split { grid-template-columns: 1fr; gap: 48px; }
.grid-offices { grid-template-columns: 1fr; }
.form__row { grid-template-columns: 1fr; }
.footer__top { grid-template-columns: 1fr 1fr; }
.cta-strip__inner { grid-template-columns: 1fr; }
.cta-strip__actions { justify-self: start; }
}
@media (max-width: 720px) {
:root { --gutter: 20px; }
.nav { display: none; }
.nav-toggle { display: inline-flex; }
.topbar__inner { gap: 12px; }
.section { padding: 56px 0; }
.grid-offices, .footer__top { grid-template-columns: 1fr; }
.office, .side__card { padding: 20px; }
.footer__top { gap: 32px; }
.footer__bot { flex-direction: column; align-items: flex-start; gap: 8px; }
}
</style>
<!-- Schema.org structured data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"@id": "https://jeisaimporters.co.za/#business",
"name": "JEI South Africa",
"image": "https://jeisaimporters.co.za/og-image.jpg",
"logo": "https://jeisaimporters.co.za/brand-mark.png",
"url": "https://jeisaimporters.co.za/",
"telephone": "+27-18-786-2897",
"email": "gary@wfsales.co.za",
"priceRange": "$$",
"description": "Magnetic drilling machines and annular cutters stocked and supported in South Africa. Local partner of JEI Solutions (UK).",
"address": {
"@type": "PostalAddress",
"addressLocality": "Johannesburg",
"addressRegion": "Gauteng",
"addressCountry": "ZA"
},
"areaServed": [
{ "@type": "Country", "name": "South Africa" }
],
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
"opens": "07:30",
"closes": "17:00"
}
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+27-82-852-4633",
"contactType": "customer service",
"areaServed": "ZA",
"availableLanguage": ["English", "Afrikaans"]
},
"parentOrganization": {
"@type": "Organization",
"name": "JEI Solutions UK",
"url": "https://www.jeiuk.com/"
},
"sameAs": [
"https://www.jeiuk.com/"
]
}
</script>
</head>
<body>
<!-- Header -->
<header class="topbar">
<div class="container topbar__inner">
<a href="index.html" class="brand">
<img class="brand__mark" src="brand-mark.png" alt="JEI South Africa — Built for Industry" width="208" height="219" decoding="async">
<span class="brand__sub">South&nbsp;Africa</span>
</a>
<nav class="nav" aria-label="Primary">
<a href="products.html">Products</a>
<a href="index.html#industries">Industries</a>
<a href="about.html">About</a>
<a href="contact.html" class="is-active">Contact</a>
<a href="contact.html" class="nav-cta">Request a quote</a>
</nav>
<button class="nav-toggle" aria-label="Open menu" aria-controls="nav-drawer" aria-expanded="false">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
</button>
</div>
</header>
<div class="nav-drawer" id="nav-drawer" aria-hidden="true">
<div class="nav-drawer__top">
<a href="index.html" class="brand"><img class="brand__mark" src="brand-mark.png" alt="JEI South Africa — Built for Industry" width="208" height="219" decoding="async"><span class="brand__sub">South Africa</span></a>
<button class="nav-toggle" aria-label="Close menu" data-close><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"/></svg></button>
</div>
<a href="products.html">Products</a>
<a href="index.html#industries">Industries</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<a href="contact.html" class="btn btn--accent nav-drawer__cta">Request a quote</a>
</div>
<!-- Page hero -->
<section class="page-hero">
<div class="container">
<div class="page-hero__crumb"><a href="index.html">Home</a> &nbsp;/&nbsp; Contact</div>
<h1>Quote, datasheet, on-site demo — same-day response.</h1>
<p>Tell us what you need to cut, the material, the diameter, and the quantity. A JEI-trained technician will come back with stock, lead time, and price the same business day.</p>
</div>
</section>
<!-- Form + side -->
<section class="section">
<div class="container">
<div class="section__head">
<div>
<p class="eyebrow">Get a quote</p>
<h2>Request a quote or a datasheet</h2>
</div>
<p>Required fields marked with <span style="font-family:var(--font-mono); color: var(--fg);">*</span>. For machine demos, please add a rough date in the message field.</p>
</div>
<div class="contact-split">
<form class="form" id="quote-form" novalidate>
<div class="form__row">
<div class="field" data-field="name">
<label for="f-name">Your name <span class="req">*</span></label>
<input type="text" id="f-name" name="name" autocomplete="name" required />
<div class="field__err" data-err></div>
</div>
<div class="field" data-field="company">
<label for="f-company">Company <span class="req">*</span></label>
<input type="text" id="f-company" name="company" autocomplete="organization" required />
<div class="field__err" data-err></div>
</div>
</div>
<div class="form__row">
<div class="field" data-field="email">
<label for="f-email">Email <span class="req">*</span></label>
<input type="email" id="f-email" name="email" autocomplete="email" required />
<div class="field__err" data-err></div>
</div>
<div class="field" data-field="phone">
<label for="f-phone">Phone</label>
<input type="tel" id="f-phone" name="phone" autocomplete="tel" placeholder="+27 …" />
<div class="field__err" data-err></div>
</div>
</div>
<div class="form__row">
<div class="field" data-field="category">
<label for="f-category">Product interest <span class="req">*</span></label>
<select id="f-category" name="category" required>
<option value="">— Select a category —</option>
<option>Magnetic drills — Electric</option>
<option>Magnetic drills — Cordless</option>
<option>Magnetic drills — Pneumatic</option>
<option>Magnetic drills — Rail</option>
<option>Annular cutters — HSS</option>
<option>Annular cutters — TCT</option>
<option>Accessories / consumables</option>
<option>Fabrication equipment</option>
<option>Service / repair / spare parts</option>
<option>On-site demo / training</option>
</select>
<div class="field__err" data-err></div>
</div>
<div class="field" data-field="qty">
<label for="f-qty">Quantity</label>
<input type="text" id="f-qty" name="qty" placeholder="e.g. 1 unit, 25 cutters" />
<div class="field__err" data-err></div>
</div>
</div>
<div class="field" data-field="message">
<label for="f-message">Message <span class="req">*</span></label>
<textarea id="f-message" name="message" required placeholder="Material, cutter diameter, cutting depth, application. Anything you want the technician to know."></textarea>
<div class="field__hint">We aim to respond the same business day.</div>
<div class="field__err" data-err></div>
</div>
<div class="form__actions">
<button type="submit" class="btn btn--ink">
Send request
<svg class="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</button>
<span class="form__note">Or call us on 0187862897.</span>
</div>
</form>
<div class="form__success" id="quote-success" role="status" aria-live="polite">
<h3>Request received.</h3>
<p>Thanks — your request is in. A JEI technician will be in touch the same business day with stock, lead time, and price.</p>
<strong id="quote-success-ref">REF · —</strong>
</div>
<aside class="side">
<div class="side__card side__card--accent">
<p class="side__eyebrow">South African sales</p>
<h3>Gary Isherwood</h3>
<p class="side__lede">Your first call for stock, pricing and lead times on the JEI range. Gary handles SA sales and on-site demos.</p>
<div class="side__row"><span class="k">Mobile</span><span class="v"><a href="tel:+27828524633">082 852 4633</a></span></div>
<div class="side__row"><span class="k">Email</span><span class="v"><a href="mailto:gary@wfsales.co.za">gary@wfsales.co.za</a></span></div>
<div class="side__row"><span class="k">Hours</span><span class="v">Mon–Fri · 07:30 – 17:00 SAST</span></div>
</div>
<div class="side__card">
<h3>Technical support</h3>
<p style="margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--muted);">Application advice, cutter selection, machine comparison and warranty queries — JEI-trained technicians in JHB.</p>
<div class="side__row"><span class="k">Phone</span><span class="v"><a href="tel:+27187862897">0187862897</a></span></div>
<div class="side__row"><span class="k">WhatsApp</span><span class="v"><a href="https://wa.me/27828524633">+27 82 852 4633</a></span></div>
<div class="side__row"><span class="k">Email</span><span class="v"><a href="mailto:gary@wfsales.co.za">gary@wfsales.co.za</a></span></div>
</div>
<div class="side__card">
<h3>For UK enquiries</h3>
<p style="margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--muted);">For trade enquiries, technical datasheets in metric/imperial, or to discuss bespoke tooling:</p>
<div class="side__row"><span class="k">JEI UK</span><span class="v">+44 (0) 1706 229490</span></div>
<div class="side__row"><span class="k">Email</span><span class="v"><a href="mailto:gary@wfsales.co.za">gary@wfsales.co.za</a></span></div>
<div class="side__row"><span class="k">Web</span><span class="v"><a href="https://www.jeiuk.com/">jeiuk.com</a></span></div>
</div>
</aside>
</div>
</div>
</section>
<!-- Offices -->
<section class="section section--dark">
<div class="container">
<div class="section__head">
<div>
<p class="eyebrow on-dark">Offices</p>
<h2>Where to find us</h2>
</div>
<p>Walk-in collections by appointment. Most orders ship the same day from Johannesburg.</p>
</div>
<div class="grid-offices">
<div class="office">
<div class="office__role">HQ · Warehouse</div>
<h3>Johannesburg, Gauteng</h3>
<p>Unit XX, Industrial Park</p>
<p>Johannesburg, 2000</p>
<p>South Africa</p>
<div class="meta">Mon–Fri 07:30 – 17:00 SAST</div>
</div>
<div class="office">
<div class="office__role">Depot</div>
<h3>Cape Town, Western Cape</h3>
<p>Unit XX, Epping Industria</p>
<p>Cape Town, 7460</p>
<p>South Africa</p>
<div class="meta">Mon–Fri 08:00 – 16:30 SAST</div>
</div>
<div class="office">
<div class="office__role">Depot</div>
<h3>Durban, KwaZulu-Natal</h3>
<p>Unit XX, New Germany</p>
<p>Durban, 3610</p>
<p>South Africa</p>
<div class="meta">Mon–Fri 08:00 – 16:30 SAST</div>
</div>
</div>
</div>
</section>
<!-- CTA strip -->
<section class="cta-strip">
<div class="container cta-strip__inner">
<div>
<p class="eyebrow">Browse first</p>
<h2>Not sure what you need? Start with the catalogue.</h2>
<p>Full product list with indicative specs, category by category. Datasheet PDF available on every product line.</p>
</div>
<div class="cta-strip__actions">
<a href="products.html" class="btn btn--ink">Browse products
<svg class="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
<a href="about.html" class="btn btn--ghost-dark">About JEI ZA</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__top">
<div class="footer__brand">
<a href="index.html" class="brand">
<img class="brand__mark" src="brand-mark.png" alt="JEI South Africa — Built for Industry" width="208" height="219" decoding="async">
<span class="brand__sub">South Africa</span>
</a>
<p>Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).</p>
</div>
<div>
<h4>Products</h4>
<ul>
<li><a href="products.html#drills">Magnetic drills</a></li>
<li><a href="products.html#cutters">Annular cutters</a></li>
<li><a href="products.html#cordless">Cordless</a></li>
<li><a href="products.html#fabrication">Fabrication</a></li>
<li><a href="products.html#accessories">Accessories</a></li>
</ul>
</div>
<div>
<h4>Company</h4>
<ul>
<li><a href="about.html">About JEI ZA</a></li>
<li><a href="index.html#industries">Industries</a></li>
<li><a href="about.html#uk-partner">JEI UK partner</a></li>
<li><a href="about.html#quality">Quality &amp; warranty</a></li>
</ul>
</div>
<div>
<h4>Contact</h4>
<ul>
<li><a href="contact.html">Request a quote</a></li>
<li><a href="tel:+27187862897">0187862897</a></li>
<li><a href="mailto:gary@wfsales.co.za">gary@wfsales.co.za</a></li>
<li><a href="https://wa.me/27828524633">WhatsApp</a></li>
</ul>
</div>
</div>
<div class="footer__bot">
<div>© 2026 JEI South Africa</div>
<div>EN · ZAR</div>
</div>
</div>
</footer>
<script>
// Mobile drawer (shared)
(function () {
var toggle = document.querySelector('.topbar .nav-toggle');
var drawer = document.getElementById('nav-drawer');
if (!toggle || !drawer) return;
function setOpen(open) {
drawer.classList.toggle('is-open', open);
drawer.setAttribute('aria-hidden', open ? 'false' : 'true');
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
document.body.style.overflow = open ? 'hidden' : '';
}
toggle.addEventListener('click', function () { setOpen(true); });
drawer.querySelectorAll('[data-close]').forEach(function (b) { b.addEventListener('click', function () { setOpen(false); }); });
drawer.querySelectorAll('a').forEach(function (a) { a.addEventListener('click', function () { setOpen(false); }); });
})();
// Quote form: validation + success state
(function () {
var form = document.getElementById('quote-form');
var success = document.getElementById('quote-success');
var successRef = document.getElementById('quote-success-ref');
if (!form) return;
function setErr(field, msg) {
var el = form.querySelector('[data-field="' + field + '"]');
if (!el) return;
el.classList.toggle('is-invalid', !!msg);
var err = el.querySelector('[data-err]');
if (err) err.textContent = msg || '';
}
function validate() {
var ok = true;
var v = function (n) { return form.querySelector('[name="' + n + '"]').value.trim(); };
[['name', 'Please add your name.'],
['company', 'Please add your company.'],
['email', 'Please add a valid email.'],
['category', 'Please pick a category.'],
['message', 'Please describe what you need.']].forEach(function (pair) {
var name = pair[0], msg = pair[1];
var val = v(name);
var invalid = !val || (name === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val));
setErr(name, invalid ? msg : '');
if (invalid) ok = false;
});
// phone is optional but if present, do a soft check
var phone = v('phone');
if (phone && phone.replace(/\D/g, '').length < 7) {
setErr('phone', 'That phone number looks short.');
ok = false;
} else { setErr('phone', ''); }
return ok;
}
form.addEventListener('submit', function (e) {
e.preventDefault();
if (!validate()) {
var first = form.querySelector('.is-invalid input, .is-invalid select, .is-invalid textarea');
if (first) first.focus();
return;
}
// Pretend submission — generate a reference and show success.
var ref = 'JEI-ZA-' + Date.now().toString(36).toUpperCase().slice(-6);
if (successRef) successRef.textContent = 'REF · ' + ref;
form.style.display = 'none';
success.classList.add('is-shown');
success.scrollIntoView({ behavior: 'smooth', block: 'center' });
});
// Clear errors on input
form.querySelectorAll('input, select, textarea').forEach(function (el) {
el.addEventListener('input', function () {
var field = el.closest('[data-field]');
if (field && field.classList.contains('is-invalid')) {
field.classList.remove('is-invalid');
var err = field.querySelector('[data-err]');
if (err) err.textContent = '';
}
});
});
})();
</script>
</body>
</html>