- .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>
612 lines
32 KiB
HTML
612 lines
32 KiB
HTML
<!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." />
|
||
|
||
<!-- 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 & 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 & 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 & 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 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> / 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 & 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>
|