2026-06-13 16:39:13 +00:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
< title > Contact & 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." / >
< 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; }
Add brand-mark logo to header, remove JEI text wordmark
- Copy Untitled-design-5.png as brand-mark.png (208x219, JEI yellow E + Built for Industry tagline)
- Replace inline JE/i text spans with <img class="brand__mark" src="brand-mark.png"> in topbar, nav drawer, footer, and hero wordmark across index.html, about.html, contact.html, products.html
- Drop redundant 'Built for Industry' from .brand__sub since tagline now lives inside the image
- Tighten .brand CSS to inline-flex + center alignment so image + subline sit on one baseline
- Set .brand__mark height: 40px (topbar/drawer), 56px (footer), 96px (hero)
2026-08-19 08:18:35 +00:00
.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); }
2026-06-13 16:39:13 +00:00
.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; 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 >
< / head >
< body >
<!-- Header -->
< header class = "topbar" >
< div class = "container topbar__inner" >
< a href = "index.html" class = "brand" >
Add brand-mark logo to header, remove JEI text wordmark
- Copy Untitled-design-5.png as brand-mark.png (208x219, JEI yellow E + Built for Industry tagline)
- Replace inline JE/i text spans with <img class="brand__mark" src="brand-mark.png"> in topbar, nav drawer, footer, and hero wordmark across index.html, about.html, contact.html, products.html
- Drop redundant 'Built for Industry' from .brand__sub since tagline now lives inside the image
- Tighten .brand CSS to inline-flex + center alignment so image + subline sit on one baseline
- Set .brand__mark height: 40px (topbar/drawer), 56px (footer), 96px (hero)
2026-08-19 08:18:35 +00:00
< 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 >
2026-06-13 16:39:13 +00:00
< / 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" >
Add brand-mark logo to header, remove JEI text wordmark
- Copy Untitled-design-5.png as brand-mark.png (208x219, JEI yellow E + Built for Industry tagline)
- Replace inline JE/i text spans with <img class="brand__mark" src="brand-mark.png"> in topbar, nav drawer, footer, and hero wordmark across index.html, about.html, contact.html, products.html
- Drop redundant 'Built for Industry' from .brand__sub since tagline now lives inside the image
- Tighten .brand CSS to inline-flex + center alignment so image + subline sit on one baseline
- Set .brand__mark height: 40px (topbar/drawer), 56px (footer), 96px (hero)
2026-08-19 08:18:35 +00:00
< 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 >
2026-06-13 16:39:13 +00:00
< 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 > / 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 +27 (0)11 555 0100 — JHB.< / 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– – < / 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:+27115550100" > +27 (0)11 555 0100< / a > < / span > < / div >
< div class = "side__row" > < span class = "k" > WhatsApp< / span > < span class = "v" > < a href = "https://wa.me/27715550100" > +27 71 555 0100< / a > < / span > < / div >
< div class = "side__row" > < span class = "k" > Email< / span > < span class = "v" > < a href = "mailto:sales@jei.co.za" > sales@jei.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" > sales@jeisolutions.co.uk< / 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– – < / 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– – < / 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– – < / 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" >
Add brand-mark logo to header, remove JEI text wordmark
- Copy Untitled-design-5.png as brand-mark.png (208x219, JEI yellow E + Built for Industry tagline)
- Replace inline JE/i text spans with <img class="brand__mark" src="brand-mark.png"> in topbar, nav drawer, footer, and hero wordmark across index.html, about.html, contact.html, products.html
- Drop redundant 'Built for Industry' from .brand__sub since tagline now lives inside the image
- Tighten .brand CSS to inline-flex + center alignment so image + subline sit on one baseline
- Set .brand__mark height: 40px (topbar/drawer), 56px (footer), 96px (hero)
2026-08-19 08:18:35 +00:00
< img class = "brand__mark" src = "brand-mark.png" alt = "JEI South Africa — Built for Industry" width = "208" height = "219" decoding = "async" >
2026-06-13 16:39:13 +00:00
< 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 & warranty< / a > < / li >
< / ul >
< / div >
< div >
< h4 > Contact< / h4 >
< ul >
< li > < a href = "contact.html" > Request a quote< / a > < / li >
< li > < a href = "tel:+27115550100" > +27 (0)11 555 0100< / a > < / li >
< li > < a href = "mailto:sales@jei.co.za" > sales@jei.co.za< / a > < / li >
< li > < a href = "https://wa.me/27715550100" > 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 >
