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

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

646 lines
No EOL
36 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

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

<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JEI South Africa — Magnetic Drills &amp; 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.">
<!-- 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 &amp; 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 &amp; 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 &amp; 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">
<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; }
.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; }
.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; }
.hero__wordmark { display: block; margin-bottom: 18px; }
.hero__wordmark .mark { display: block; height: 64px; width: auto; }
.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; }
.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; }
.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; }
.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; }
.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; }
.footer__brand .brand__mark { height: 56px; }
.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; }
.hero__art { max-width: 420px; justify-self: center; padding: 20px; }
.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; }
.hero__inner { padding: 48px 0 56px; gap: 36px; }
.hero__wordmark .mark { height: 52px; }
.hero h1 { font-size: 30px; }
.hero__meta { gap: 24px; }
.hero__art { max-width: 100%; padding: 24px; }
.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>
<!-- 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>
</head>
<body>
<header class="topbar">
<div class="container topbar__inner">
<a href="index.html" class="brand" aria-label="JEI South Africa — importers of magnetic drilling and annular cutting equipment" data-od-id="site-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">SA <span class="accent">·</span> <span class="accent">Importers</span></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">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">
<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"></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>
<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>
<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">
<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">
</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–72h courier to Cape Town, Durban and Gqeberha.</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 &amp; infrastructure</li>
<li class="reveal">Bridge construction</li>
<li class="reveal">Rail &amp; transport</li>
<li class="reveal">Energy &amp; process industries</li>
<li class="reveal">Petrochemical</li>
<li class="reveal">Defence &amp; heavy engineering</li>
<li class="reveal">Mining &amp; 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">
<div class="range__logo"><img src="mqcj0lwu-image.png" alt="MagBeast" width="600" height="200" loading="lazy" decoding="async"></div>
<div class="range__name">MagBeast<sup>®</sup> · Drills</div>
</a>
<a href="products.html#cordless" class="range__cell reveal" aria-label="MiniBeast — compact cordless">
<div class="range__logo"><img src="mqcj0qbk-image.png" alt="MiniBeast" width="600" height="200" loading="lazy" decoding="async"></div>
<div class="range__name">MiniBeast<sup>™</sup> · Cordless</div>
</a>
<a href="products.html#cutters" class="range__cell reveal" aria-label="SteelBeast — industrial">
<div class="range__logo"><img src="mqcj0uhh-image.png" alt="SteelBeast" width="600" height="200" loading="lazy" decoding="async"></div>
<div class="range__name">SteelBeast<sup>®</sup> · Industrial</div>
</a>
<a href="products.html#cutters" class="range__cell reveal" aria-label="Turbo — annular cutters">
<div class="range__logo"><img src="mqcj14mi-image.png" alt="Turbo" width="600" height="200" loading="lazy" decoding="async"></div>
<div class="range__name">Turbo<sup>™</sup> · Cutters</div>
</a>
<a href="products.html#pneumatic" class="range__cell reveal" aria-label="AirBeast — pneumatic">
<div class="range__logo"><img src="mqcj189n-image.png" alt="AirBeast" width="600" height="200" loading="lazy" decoding="async"></div>
<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–14mm cutters</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–60mm</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>
<a href="tel:+27187862897" class="btn btn--ghost" style="color:var(--fg); border-color:var(--border);">Call JHB</a>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer__top reveal">
<div class="footer__brand">
<a href="index.html" class="brand">
<img class="brand__mark" src="brand-mark.png" alt="JEI South Africa — Built for Industry" width="208" height="219" decoding="async">
<span class="brand__sub">South Africa</span>
</a>
<p>Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).</p>
</div>
<div>
<h4>Products</h4>
<ul>
<li><a href="products.html#drills">Magnetic drills</a></li>
<li><a href="products.html#cutters">Annular cutters</a></li>
<li><a href="products.html#cordless">Cordless</a></li>
<li><a href="products.html#fabrication">Fabrication</a></li>
<li><a href="products.html#accessories">Accessories</a></li>
</ul>
</div>
<div>
<h4>Company</h4>
<ul>
<li><a href="about.html">About JEI ZA</a></li>
<li><a href="index.html#industries">Industries</a></li>
<li><a href="about.html#uk-partner">JEI UK partner</a></li>
<li><a href="about.html#quality">Quality &amp; warranty</a></li>
</ul>
</div>
<div>
<h4>Contact</h4>
<ul>
<li><a href="contact.html">Request a quote</a></li>
<li><a href="tel:+27828524633">+27 (0)82 852 4633</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 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>