update: modify manifest.json to reflect new version ID and add entry for version 6 of index.html

- Updated currentVersionId to "418c8c96-8f0f-47cc-9083-1368712ed337".
- Added new entry for version 6 of index.html with adjustments based on user prompt to make the logo in the hero image smaller.
This commit is contained in:
Dave 2026-08-19 12:46:13 +02:00
parent fadecc183c
commit 68435de50f
2 changed files with 595 additions and 2 deletions

View file

@ -0,0 +1,578 @@
<!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.">
<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; 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: 16px; }
.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>
</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.png" 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">
</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:+27115550100" 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/27715550100">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>

View file

@ -1,7 +1,7 @@
{
"schemaVersion": 2,
"fileName": "index.html",
"currentVersionId": "08245450-4814-4aed-bf54-8baf1846b243",
"currentVersionId": "418c8c96-8f0f-47cc-9083-1368712ed337",
"entries": [
{
"id": "036acbb5-6284-4554-9e96-55f510720f9a",
@ -75,7 +75,22 @@
"mime": "text/html; charset=utf-8",
"kind": "html",
"contentPath": "0005-08245450-4814-4aed-bf54-8baf1846b243.html",
"contentDigest": "21b65f971282f9b16dfd026eb257f2fc9f164c9d27207406de5bde8cbbcbf6c6",
"promptSource": "message",
"contentDigest": "21b65f971282f9b16dfd026eb257f2fc9f164c9d27207406de5bde8cbbcbf6c6"
},
{
"id": "418c8c96-8f0f-47cc-9083-1368712ed337",
"fileName": "index.html",
"version": 6,
"label": "Version 6",
"createdAt": 1787127893145,
"source": "ai",
"prompt": "can we make the logo in hero image smaller",
"size": 33955,
"mime": "text/html; charset=utf-8",
"kind": "html",
"contentPath": "0006-418c8c96-8f0f-47cc-9083-1368712ed337.html",
"contentDigest": "6c7e1ba7fac0eccacc9935d8e6fe7f329e028f0520faff2d789b226c5aa6c058",
"promptSource": "message"
}
]