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 > JEI South Africa — Magnetic Drills & Annular Cutters< / title >
< meta name = "description" content = "Magnetic drilling machines and annular cutters for South African fabrication, mining, energy and rail. Local stock, technical support, ISO 9001. JEI partner." >
2026-08-19 10:05:09 +00:00
<!-- 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 = "JEI South Africa — Magnetic Drills & Annular Cutters" >
< meta property = "og:description" content = "Magnetic drilling machines and annular cutters for South African fabrication, mining, energy and rail. Local stock, technical support, ISO 9001. JEI partner." >
< meta property = "og:url" content = "https://jeisaimporters.co.za/" >
< 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 = "JEI South Africa — Magnetic Drills & Annular Cutters" >
< meta name = "twitter:description" content = "Magnetic drilling machines and annular cutters for South African fabrication, mining, energy and rail. Local stock, technical support, ISO 9001. JEI partner." >
< meta name = "twitter:image" content = "https://jeisaimporters.co.za/og-image.jpg" >
<!-- Canonical & favicon -->
< link rel = "canonical" href = "https://jeisaimporters.co.za/" >
< link rel = "icon" type = "image/png" href = "/brand-mark.png" >
<!-- Theme colour for browser chrome -->
< meta name = "theme-color" content = "#2C3A45" >
2026-06-13 16:39:13 +00:00
< style >
: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); }
.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: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); white-space: nowrap; }
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-cta:hover { background: #FFD96A; }
.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; }
.hero { background: var(--bg); color: #fff; position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.06); }
.hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 80px 80px; background-position: -1px -1px;
mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 70%);
}
.hero__inner { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; padding: 88px 0 96px; }
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
.hero__wordmark { display: block; margin-bottom: 18px; }
2026-08-19 08:24:45 +00:00
.hero__wordmark .mark { display: block; height: 64px; width: auto; }
2026-06-13 16:39:13 +00:00
.hero__tagline { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; }
.hero h1 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 18px; color: #fff; max-width: 22ch; }
.hero p.lede { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 52ch; margin: 0 0 32px; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
2026-08-19 10:54:42 +00:00
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; border-radius: 999px; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
2026-06-13 16:39:13 +00:00
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: #FFD96A; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn--ghost:hover { border-color: #fff; }
.btn--ink { background: var(--fg); color: #fff; }
.btn--ink:hover { background: #2A3942; }
.btn .arr { width: 14px; height: 14px; }
.hero__meta { margin-top: 48px; display: flex; gap: 40px; flex-wrap: wrap; }
.hero__meta dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 4px; }
.hero__meta dd { margin: 0; font-size: 14px; color: #fff; }
2026-06-14 22:40:48 +00:00
.hero__art { position: relative; aspect-ratio: 1 / 1; max-width: 520px; justify-self: end; width: 100%; padding: 24px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; }
2026-06-13 16:39:13 +00:00
.hero__art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.section { padding: 88px 0; }
.section--alt { background: #F4F5F6; }
.section--dark { background: var(--bg); color: #fff; }
.section--dark .eyebrow { color: rgba(255,255,255,0.7); }
.section--dark h2 { color: #fff; }
.section__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; margin-bottom: 48px; }
.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); }
.grid-cats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.cat { padding: 32px 28px 28px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 12px; transition: background 0.15s; }
.cat:hover { background: #FAFBFC; }
.cat__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); }
.cat h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.cat p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; flex: 1; }
.cat__more { font-size: 13px; font-weight: 600; color: var(--fg); display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--fg); padding-bottom: 2px; align-self: flex-start; }
.cat:hover .cat__more { color: var(--bg); border-bottom-color: var(--accent); }
.grid-vp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.12); }
.vp { padding: 32px 32px 36px; border-right: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); }
.vp:last-child { border-right: 0; }
.vp__mark { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 16px; }
.vp h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; color: #fff; }
.vp p { margin: 0; color: rgba(255,255,255,0.72); font-size: 14.5px; line-height: 1.6; }
.industries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); }
.industries li { padding: 22px 20px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: 14.5px; font-weight: 500; color: var(--fg); display: flex; align-items: center; gap: 12px; }
.industries li:nth-child(4n) { border-right: 0; }
.industries li::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: 0 0 6px; }
.grid-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.12); }
.feat { padding: 32px 32px 36px; border-right: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: 14px; }
.feat:last-child { border-right: 0; }
.feat__name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.feat__name sup { color: var(--accent); font-size: 14px; vertical-align: super; }
.feat__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.feat p { margin: 0; color: rgba(255,255,255,0.78); font-size: 14.5px; line-height: 1.6; flex: 1; }
.feat__row { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.6); }
.feat__row span { padding-right: 16px; border-right: 1px solid rgba(255,255,255,0.18); }
.feat__row span:last-child { border-right: 0; padding-right: 0; }
/* The JEI range — logo wall */
.range__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; margin-bottom: 32px; }
.range__head h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 0; }
.range__head p { margin: 0; color: var(--muted); max-width: 50ch; font-size: 16px; line-height: 1.6; }
.range__grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--surface); }
.range__cell { padding: 32px 18px 26px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 16px; background: #FAFBFC; transition: background 0.15s; }
.range__cell:hover { background: var(--surface); }
.range__cell:last-child { border-right: 0; }
.range__logo { height: 64px; display: flex; align-items: center; justify-content: center; width: 100%; }
.range__logo img { max-height: 100%; max-width: 78%; width: auto; height: auto; object-fit: contain; }
.range__name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.4; }
.range__name sup { color: var(--fg); font-size: 9px; }
.cta-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.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 { 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 .brand { font-size: 26px; }
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
.footer__brand .brand__mark { height: 56px; }
2026-06-13 16:39:13 +00:00
.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); }
.footer__bot a { color: rgba(255,255,255,0.7); }
.footer__bot a:hover { color: var(--accent); }
.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; }
/* Motion: scroll reveal + button arrow micro-interaction */
.btn .arr { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1); }
.btn:hover .arr { transform: translateX(4px); }
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 720ms cubic-bezier(0.2, 0, 0, 1),
transform 720ms cubic-bezier(0.2, 0, 0, 1);
}
.reveal.is-in {
opacity: 1;
transform: none;
}
.grid-cats > .cat:nth-child(3n+2) { transition-delay: 80ms; }
.grid-cats > .cat:nth-child(3n+3) { transition-delay: 160ms; }
.grid-vp > .vp:nth-child(2) { transition-delay: 100ms; }
.grid-vp > .vp:nth-child(3) { transition-delay: 200ms; }
.industries > li:nth-child(4n+2) { transition-delay: 60ms; }
.industries > li:nth-child(4n+3) { transition-delay: 120ms; }
.industries > li:nth-child(4n+4) { transition-delay: 180ms; }
.grid-feat > .feat:nth-child(2) { transition-delay: 100ms; }
.grid-feat > .feat:nth-child(3) { transition-delay: 200ms; }
.range__grid > .range__cell:nth-child(2) { transition-delay: 60ms; }
.range__grid > .range__cell:nth-child(3) { transition-delay: 120ms; }
.range__grid > .range__cell:nth-child(4) { transition-delay: 180ms; }
.range__grid > .range__cell:nth-child(5) { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.btn .arr { transition: none !important; }
.btn:hover .arr { transform: none !important; }
}
@media (max-width: 1024px) {
.hero__inner { grid-template-columns: 1fr; gap: 48px; padding: 64px 0 72px; }
2026-06-14 22:40:48 +00:00
.hero__art { max-width: 420px; justify-self: center; padding: 20px; }
2026-06-13 16:39:13 +00:00
.section__head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
.grid-cats, .grid-vp, .grid-feat { grid-template-columns: repeat(2, 1fr); }
.range__grid { grid-template-columns: repeat(3, 1fr); }
.range__cell:nth-child(3) { border-right: 0; }
.industries { grid-template-columns: repeat(2, 1fr); }
.industries li:nth-child(4n) { border-right: 1px solid var(--border); }
.industries li:nth-child(2n) { border-right: 0; }
.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; }
2026-06-14 22:40:48 +00:00
.hero__inner { padding: 48px 0 56px; gap: 36px; }
2026-08-19 08:24:45 +00:00
.hero__wordmark .mark { height: 52px; }
2026-06-13 16:39:13 +00:00
.hero h1 { font-size: 30px; }
.hero__meta { gap: 24px; }
2026-08-19 10:54:42 +00:00
.hero__art { max-width: 100%; padding: 24px; }
2026-06-13 16:39:13 +00:00
.section { padding: 64px 0; }
.grid-cats, .grid-vp, .grid-feat, .industries, .footer__top { grid-template-columns: 1fr; }
.range__grid { grid-template-columns: repeat(2, 1fr); }
.range__cell, .range__cell:nth-child(3) { border-right: 0; }
.industries li { border-right: 0 !important; }
.vp, .cat, .feat { border-right: 0; }
.footer__top { gap: 32px; }
.footer__bot { flex-direction: column; align-items: flex-start; gap: 8px; }
}
< / style >
2026-08-19 10:05:09 +00:00
<!-- Schema.org structured data -->
< script type = "application/ld+json" >
{
"@context": "https://schema.org",
"@type": "Organization",
"@id": "https://jeisaimporters.co.za/#organization",
"name": "JEI South Africa",
"alternateName": "JEI SA Importers",
"url": "https://jeisaimporters.co.za/",
"logo": "https://jeisaimporters.co.za/brand-mark.png",
"description": "Magnetic drilling machines and annular cutters stocked and supported in South Africa. Local partner of JEI Solutions (UK).",
"foundingDate": "2018",
"areaServed": { "@type": "Country", "name": "South Africa" },
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+27-18-786-2897",
"email": "gary@wfsales.co.za",
"contactType": "sales",
"areaServed": "ZA",
"availableLanguage": ["English", "Afrikaans"]
},
"parentOrganization": {
"@type": "Organization",
"name": "JEI Solutions UK",
"url": "https://www.jeiuk.com/"
},
"sameAs": [
"https://www.jeiuk.com/"
]
}
< / script >
< script type = "application/ld+json" >
{
"@context": "https://schema.org",
"@type": "WebSite",
"@id": "https://jeisaimporters.co.za/#website",
"url": "https://jeisaimporters.co.za/",
"name": "JEI South Africa",
"inLanguage": "en-ZA",
"publisher": { "@id": "https://jeisaimporters.co.za/#organization" }
}
< / script >
2026-06-13 16:39:13 +00:00
< / head >
< body >
< header class = "topbar" >
< div class = "container topbar__inner" >
2026-08-19 07:15:01 +00:00
< a href = "index.html" class = "brand" aria-label = "JEI South Africa — importers of magnetic drilling and annular cutting equipment" data-od-id = "site-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" > SA < span class = "accent" > ·< / span > < span class = "accent" > Importers< / span > < / 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" > Contact< / a >
< a href = "contact.html" class = "nav-cta" style = "color: rgb(55, 65, 81);" > 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" > < / path > < / 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" >
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 >
< 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" > < / path > < / 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 >
< section class = "hero" >
< div class = "container hero__inner" >
< div >
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 = "hero__wordmark mark" src = "brand-mark.png" alt = "" aria-hidden = "true" width = "208" height = "219" decoding = "async" >
< div class = "hero__tagline" > Stocked in South Africa< / div >
2026-06-13 16:39:13 +00:00
< h1 > Magnetic drilling and annular cutting for South African fabrication.< / h1 >
< p class = "lede" >
Magnetic base drills, annular cutters and fabrication tooling from the
JEI range — backed by local stock in Johannesburg, technical support,
and a partner of JEI Solutions (UK).
< / p >
< div class = "hero__ctas" >
< a href = "products.html" class = "btn btn--accent" >
Browse the catalogue
< 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" > < / path > < / svg >
< / a >
< a href = "contact.html" class = "btn btn--ghost" > Request a quote< / a >
< / div >
< dl class = "hero__meta" >
< div > < dt > Local stock< / dt > < dd > JHB · CPT · DBN< / dd > < / div >
< div > < dt > Quality< / dt > < dd > ISO 9001 · JEI partner< / dd > < / div >
< div > < dt > Range< / dt > < dd > Drills, cutters, fabrication< / dd > < / div >
< / dl >
< / div >
< div class = "hero__art" >
2026-08-19 10:05:09 +00:00
< img src = "mqcitja8-Gemini_Generated_Image_m7xmdtm7xmdtm7xm.jpg" alt = "MagBeast magnetic drill press — technical schematic, two-view orthographic drawing with 14 labelled parts, dimensioned in millimetres." width = "2048" height = "2048" loading = "eager" decoding = "async" fetchpriority = "high" >
2026-06-13 16:39:13 +00:00
< / div >
< / div >
< / section >
< section class = "section" id = "categories" >
< div class = "container" >
< div class = "section__head reveal" >
< div >
< p class = "eyebrow" > Catalogue< / p >
< h2 > Product categories< / h2 >
< / div >
< p > Two core ranges — magnetic base drilling machines and annular broaching cutters — plus the consumables, adaptors and fabrication equipment that keep a metalwork shop cutting.< / p >
< / div >
< div class = "grid-cats" >
< a class = "cat reveal" href = "products.html#drills" >
< span class = "cat__num" > 01 / Magnetic drills< / span >
< h3 > Electric magnetic drills< / h3 >
< p > Variable-speed and fixed-speed mag drills for structural steel, plate and pipe. Single-phase and three-phase.< / p >
< span class = "cat__more" > View range →< / span >
< / a >
< a class = "cat reveal" href = "products.html#cutters" >
< span class = "cat__num" > 02 / Annular cutters< / span >
< h3 > Annular broaching cutters< / h3 >
< p > HSS and TCT annular cutters, including the Turbo™ Tough TCT premium grade. Pilot pins and adaptor arbors.< / p >
< span class = "cat__more" > View range →< / span >
< / a >
< a class = "cat reveal" href = "products.html#low-profile" >
< span class = "cat__num" > 03 / Low profile< / span >
< h3 > Low-profile drilling< / h3 >
< p > Short-body and low-profile mag drills for tight spaces, beam flanges, and confined structural work.< / p >
< span class = "cat__more" > View range →< / span >
< / a >
< a class = "cat reveal" href = "products.html#cordless" >
< span class = "cat__num" > 04 / Cordless< / span >
< h3 > Cordless magnetic drills< / h3 >
< p > Battery mag drills — including the MiniBeast™ Cordless — for sites without mains power or generator access.< / p >
< span class = "cat__more" > View range →< / span >
< / a >
< a class = "cat reveal" href = "products.html#pneumatic" >
< span class = "cat__num" > 05 / Pneumatic< / span >
< h3 > Pneumatic magnetic drills< / h3 >
< p > Air-driven mag drills for hazardous-area work, petrochemical, and underground mining applications.< / p >
< span class = "cat__more" > View range →< / span >
< / a >
< a class = "cat reveal" href = "products.html#fabrication" >
< span class = "cat__num" > 06 / Fabrication< / span >
< h3 > Fabrication equipment< / h3 >
< p > Plate bevelling, pipe bevelling, hole punching, metal cutting saws, belt grinders and tube notchers.< / p >
< span class = "cat__more" > View range →< / span >
< / a >
< / div >
< / div >
< / section >
< section class = "section section--dark" >
< div class = "container" >
< div class = "section__head reveal" >
< div >
< p class = "eyebrow on-dark" > Why JEI South Africa< / p >
< h2 > Local stock. UK pedigree. Engineering you can call.< / h2 >
< / div >
< p > Three things that matter when a mag drill has to cut by Friday.< / p >
< / div >
< div class = "grid-vp" >
< div class = "vp reveal" >
< div class = "vp__mark" > 01 / Stock< / div >
< h3 > Local stockholding< / h3 >
< p > Machines, cutters and consumables held in Johannesburg for next-day dispatch to Gauteng, and 48– < / p >
< / div >
< div class = "vp reveal" >
< div class = "vp__mark" > 02 / Support< / div >
< h3 > Technical support< / h3 >
< p > Speak to a JEI-trained technician for application advice, cutter selection, and on-site commissioning. No call-centre queue.< / p >
< / div >
< div class = "vp reveal" >
< div class = "vp__mark" > 03 / Quality< / div >
< h3 > ISO 9001 partner of JEI Solutions (UK)< / h3 >
< p > Authorised partner of JEI Solutions Ltd (Burnley, UK) — same engineering standard as the UK parent, with local warranty handling.< / p >
< / div >
< / div >
< / div >
< / section >
< section class = "section section--alt" id = "industries" >
< div class = "container" >
< div class = "section__head reveal" >
< div >
< p class = "eyebrow" > Sectors< / p >
< h2 > Industries we serve< / h2 >
< / div >
< p > From structural steel on a Cape Town bridge deck to rail maintenance in the Karoo — JEI tooling is on South African sites every day.< / p >
< / div >
< ul class = "industries" >
< li class = "reveal" > Steel fabrication< / li >
< li class = "reveal" > Construction & infrastructure< / li >
< li class = "reveal" > Bridge construction< / li >
< li class = "reveal" > Rail & transport< / li >
< li class = "reveal" > Energy & process industries< / li >
< li class = "reveal" > Petrochemical< / li >
< li class = "reveal" > Defence & heavy engineering< / li >
< li class = "reveal" > Mining & plant maintenance< / li >
< / ul >
< / div >
< / section >
< section class = "section" id = "range" >
< div class = "container" >
< div class = "section__head reveal" >
< div >
< p class = "eyebrow" > The JEI range< / p >
< h2 > Five families. One engineering standard.< / h2 >
< / div >
< p > From heavy-duty magnetic drills to compact cordless, annular cutters and pneumatic machines — the full JEI catalogue, stocked and supported in South Africa.< / p >
< / div >
< div class = "range__grid" >
< a href = "products.html#drills" class = "range__cell reveal" aria-label = "MagBeast — magnetic drills" >
2026-08-19 07:37:41 +00:00
< div class = "range__logo" > < img src = "mqcj0lwu-image.png" alt = "MagBeast" width = "600" height = "200" loading = "lazy" decoding = "async" > < / div >
2026-06-13 16:39:13 +00:00
< div class = "range__name" > MagBeast< sup > ®< / sup > · Drills< / div >
< / a >
< a href = "products.html#cordless" class = "range__cell reveal" aria-label = "MiniBeast — compact cordless" >
2026-08-19 07:37:41 +00:00
< div class = "range__logo" > < img src = "mqcj0qbk-image.png" alt = "MiniBeast" width = "600" height = "200" loading = "lazy" decoding = "async" > < / div >
2026-06-13 16:39:13 +00:00
< div class = "range__name" > MiniBeast< sup > ™< / sup > · Cordless< / div >
< / a >
< a href = "products.html#cutters" class = "range__cell reveal" aria-label = "SteelBeast — industrial" >
2026-08-19 07:37:41 +00:00
< div class = "range__logo" > < img src = "mqcj0uhh-image.png" alt = "SteelBeast" width = "600" height = "200" loading = "lazy" decoding = "async" > < / div >
2026-06-13 16:39:13 +00:00
< div class = "range__name" > SteelBeast< sup > ®< / sup > · Industrial< / div >
< / a >
< a href = "products.html#cutters" class = "range__cell reveal" aria-label = "Turbo — annular cutters" >
2026-08-19 07:37:41 +00:00
< div class = "range__logo" > < img src = "mqcj14mi-image.png" alt = "Turbo" width = "600" height = "200" loading = "lazy" decoding = "async" > < / div >
2026-06-13 16:39:13 +00:00
< div class = "range__name" > Turbo< sup > ™< / sup > · Cutters< / div >
< / a >
< a href = "products.html#pneumatic" class = "range__cell reveal" aria-label = "AirBeast — pneumatic" >
2026-08-19 07:37:41 +00:00
< div class = "range__logo" > < img src = "mqcj189n-image.png" alt = "AirBeast" width = "600" height = "200" loading = "lazy" decoding = "async" > < / div >
2026-06-13 16:39:13 +00:00
< div class = "range__name" > AirBeast< sup > ®< / sup > · Pneumatic< / div >
< / a >
< / div >
< / div >
< / section >
< section class = "section section--dark" >
< div class = "container" >
< div class = "section__head reveal" >
< div >
< p class = "eyebrow on-dark" > Featured lines< / p >
< h2 > Flagship products from the JEI range< / h2 >
< / div >
< p > The MagBeast< sup > ®< / sup > HM and MiniBeast™ Cordless are the two lines most often specced by South African fabricators. Datasheets and lead times on request.< / p >
< / div >
< div class = "grid-feat" >
< div class = "feat reveal" >
< div class = "feat__tag" > Premium / Heavy duty< / div >
< div class = "feat__name" > MagBeast< sup > ®< / sup > HM Range< / div >
< p > Premium heavy-duty magnetic drill range. High-torque motor, strong adhesion magnet, four-speed gearbox. Built for structural steel and prolonged cutting cycles.< / p >
< div class = "feat__row" >
< span > 4-speed< / span > < span > 1100W motor< / span > < span > Magnetic LED< / span >
< / div >
< / div >
< div class = "feat reveal" >
< div class = "feat__tag" > Compact / Cordless< / div >
< div class = "feat__name" > MiniBeast™ Cordless< / div >
< p > The cordless MiniBeast — compact mag drill with a brushless motor and 18V/36V battery platform. For sites without mains and overhead work.< / p >
< div class = "feat__row" >
< span > 18V / 36V< / span > < span > Brushless< / span > < span > 4– < / span >
< / div >
< / div >
< div class = "feat reveal" >
< div class = "feat__tag" > TCT premium< / div >
< div class = "feat__name" > Turbo™ Tough TCT< / div >
< p > Premium-grade TCT annular cutters for hard metals, stainless and high-alloy steels. Longer tool life than HSS on tough substrates.< / p >
< div class = "feat__row" >
< span > 12– < / span > < span > Weldon 19mm< / span > < span > 3 / 4" depth< / span >
< / div >
< / div >
< / div >
< / div >
< / section >
< section class = "cta-strip" >
< div class = "container cta-strip__inner reveal" >
< div >
< p class = "eyebrow" > Get in touch< / p >
< h2 > Need a quote, a datasheet, or an on-site demo?< / h2 >
< p > Send us the spec — machine, cutter size, material, or quantity. We'll come back with stock, lead time and price the same business day.< / p >
< / div >
< div class = "cta-strip__actions" >
< a href = "contact.html" class = "btn btn--ink" >
Request a quote
< 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" > < / path > < / svg >
< / a >
2026-08-19 10:05:09 +00:00
< a href = "tel:+27187862897" class = "btn btn--ghost" style = "color:var(--fg); border-color:var(--border);" > Call JHB< / a >
2026-06-13 16:39:13 +00:00
< / div >
< / div >
< / section >
< footer class = "footer" >
< div class = "container" >
< div class = "footer__top reveal" >
< 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 >
2026-08-19 07:15:01 +00:00
< li > < a href = "tel:+27828524633" > +27 (0)82 852 4633< / a > < / li >
< li > < a href = "mailto:gary@wfsales.co.za" > gary@wfsales.co.za< / a > < / li >
2026-08-19 10:05:09 +00:00
< li > < a href = "https://wa.me/27828524633" > WhatsApp< / a > < / li >
2026-06-13 16:39:13 +00:00
< / ul >
< / div >
< / div >
< div class = "footer__bot reveal" >
< div > © 2026 JEI South Africa< / div >
< div > EN · ZAR< / div >
< / div >
< / div >
< / footer >
< script >
(function () {
var toggle = document.querySelector('.topbar .nav-toggle');
var drawer = document.getElementById('nav-drawer');
var closeBtns = drawer ? drawer.querySelectorAll('[data-close]') : [];
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); });
closeBtns.forEach(function (b) { b.addEventListener('click', function () { setOpen(false); }); });
drawer.querySelectorAll('a').forEach(function (a) {
a.addEventListener('click', function () { setOpen(false); });
});
})();
/* Motion: scroll-triggered section reveal */
(function () {
var els = document.querySelectorAll('.reveal');
if (!els.length) return;
var reduce = window.matchMedia & & window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduce || !('IntersectionObserver' in window)) {
els.forEach(function (el) { el.classList.add('is-in'); });
return;
}
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add('is-in');
io.unobserve(entry.target);
}
});
}, { threshold: 0, rootMargin: '0px 0px -8% 0px' });
els.forEach(function (el) { io.observe(el); });
})();
< / script >
< / body > < / html >
