feat: implement contact, about, and products pages with associated artifacts and image assets
This commit is contained in:
SJCoetz
commit
7f75d0f390
32 changed files with 4435 additions and 0 deletions
BIN
.DS_Store
vendored
Normal file
BIN
.DS_Store
vendored
Normal file
Binary file not shown.
61
.od-skills/emilkowalski-motion-dfa1a73af2/SKILL.md
Normal file
61
.od-skills/emilkowalski-motion-dfa1a73af2/SKILL.md
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
name: emilkowalski-motion
|
||||
description: |
|
||||
Motion-design follow-up skill inspired by Emil Kowalski's animation guidance. Use after an interface exists to add tasteful micro-interactions, state transitions, and page motion with product-grade restraint.
|
||||
triggers:
|
||||
- "emil kowalski"
|
||||
- "motion polish"
|
||||
- "micro interaction"
|
||||
- "interaction animation"
|
||||
- "tasteful animation"
|
||||
- "动效润色"
|
||||
od:
|
||||
mode: prototype
|
||||
surface: web
|
||||
platform: desktop
|
||||
category: animation-motion
|
||||
upstream: "https://emilkowal.ski/skill"
|
||||
preview:
|
||||
type: html
|
||||
design_system:
|
||||
requires: true
|
||||
craft:
|
||||
requires:
|
||||
- animation-discipline
|
||||
- accessibility-baseline
|
||||
example_prompt: |
|
||||
Use emilkowalski-motion on the current HTML artifact: add restrained micro-interactions, state transitions, and reduced-motion fallbacks without changing the core layout.
|
||||
---
|
||||
|
||||
# Emil Kowalski Motion Follow-Up
|
||||
|
||||
Use this skill after a design artifact already exists. The goal is to make the interface feel alive without turning it into a motion demo.
|
||||
|
||||
## Workflow
|
||||
|
||||
1. Inspect the current HTML, component, or selected page element before adding animation.
|
||||
2. Pick the smallest set of motion moments that clarify state or hierarchy:
|
||||
- entry reveal for the primary content
|
||||
- hover / active feedback for important controls
|
||||
- transition between UI states
|
||||
- scroll reveal only when it helps the story
|
||||
3. Prefer `transform` and `opacity`. Avoid animating layout properties such as `top`, `left`, `width`, or `height`.
|
||||
4. Use one motion language across the artifact. Do not mix unrelated easings, durations, or physics.
|
||||
5. Add `prefers-reduced-motion` fallbacks for any automatic or scroll-linked motion.
|
||||
6. Keep copy, data, and layout intent intact unless the user explicitly asks for a redesign.
|
||||
|
||||
## Motion Rules
|
||||
|
||||
- Default UI transitions should feel quick and useful: 140-220ms for most controls.
|
||||
- Larger page reveals can be slower, but must not block reading.
|
||||
- Avoid endless decorative loops unless they communicate status or progress.
|
||||
- Do not add custom cursors, noisy particle effects, or motion that competes with content.
|
||||
- Stagger only small groups. Long staggered lists make interfaces feel slow.
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
- For plain HTML, CSS keyframes and small JavaScript observers are enough.
|
||||
- For React or framework code, use the local stack already present in the repo.
|
||||
- If GSAP is available and the motion needs sequencing, pair this with `gsap-core`, `gsap-timeline`, or `gsap-scrolltrigger`.
|
||||
- Always clean up observers, timers, and animation instances.
|
||||
|
||||
123
.od-skills/luxury-botanical-6d7799632e/SKILL.md
Normal file
123
.od-skills/luxury-botanical-6d7799632e/SKILL.md
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
---
|
||||
name: luxury-botanical
|
||||
description: "Use this plugin when the user wants a cinematic luxury-fragrance / botanical landing page: a fullscreen video hero, a scroll-driven elliptical clip-path reveal, an orbiting carousel of perfume bottles that scales up at a focal point, plus a 'Stay in the collection' newsletter section and a warm parchment footer. Invoke for 'luxury botanical', 'perfume landing page', 'fragrance hero', 'orbit carousel', or when the user references the Bentley — Beyond The Collection template."
|
||||
version: 0.1.0
|
||||
od:
|
||||
mode: prototype
|
||||
surface: web
|
||||
scenario: design
|
||||
preview:
|
||||
type: html
|
||||
entry: example.html
|
||||
design_system:
|
||||
requires: false
|
||||
---
|
||||
|
||||
# Luxury Botanical — Beyond The Collection
|
||||
|
||||
Produce a cinematic, scroll-driven **luxury fragrance landing page**. A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy, bottle imagery, and section text; do not rewrite the motion system or invent a new visual language. The seed already encodes the exact fonts, tokens, scroll-keyframes, orbit math, clip-path reveal, and responsive behavior described below.
|
||||
|
||||
This is the authoritative build brief. The named fonts, colors, scroll stops, radii, and asset URLs are locked.
|
||||
|
||||
## Stack
|
||||
|
||||
- Default output: a single self-contained HTML file (the `example.html` seed). It uses **vanilla HTML/CSS/JS** — the scroll engine is one passive `requestAnimationFrame` loop reading `getBoundingClientRect()`, and `whileInView` reveals use an `IntersectionObserver`. Everything is inline.
|
||||
- If the user explicitly asks for a **React + TypeScript + Vite + Tailwind** project, port the seed faithfully into **Framer Motion**: the hero stage is a `useScroll({ offset: ["start start","end end"] })` over a `600vh` container with a `sticky top-0 h-screen` child; every animated value maps to a `useTransform`; the orbit carousel is the `OrbitImages` component driven by a `useAnimationFrame` progress value. Same fonts, same colors, same keyframe stops. Do not change the design while porting.
|
||||
- **Motion loading (locked).** If you emit a single self-contained inline-JSX file instead of the Vite project, Motion's React hooks (`useScroll`, `useTransform`, `useAnimationFrame`, …) exist only in the **React** UMD build: load `<script src="https://unpkg.com/framer-motion@11.11.13/dist/framer-motion.js"></script>` and read them off `window.Motion` — never the vanilla `https://unpkg.com/motion@.../dist/motion.js` DOM bundle, which lacks `useScroll` and renders a blank page. (The Vite project imports from npm and is unaffected.)
|
||||
|
||||
## Fonts (Google Fonts, locked)
|
||||
|
||||
Load once via `<link>`:
|
||||
`Instrument+Serif:ital@0;1` + `Manrope:wght@300;400;500;600` + `Great+Vibes`.
|
||||
|
||||
- **Instrument Serif** — display serif for headlines, the "Beyond *The*" wordmark (the *The* is italic), the big "Stay *in*" title, overlay numbers/labels, and uppercase tracked labels.
|
||||
- **Manrope** — body / UI sans; weight 400 default, 500/600 for labels and the wordmark "BENTLEY".
|
||||
- Great Vibes is loaded for optional script accents (not heavily used in the seed).
|
||||
|
||||
## Colors / tokens (locked)
|
||||
|
||||
- Page background: `#000` (black behind the hero video).
|
||||
- Hero overlay text sits on the **white** clip-reveal, so all hero overlay copy is `#000` (black on white).
|
||||
- Reveal surface: pure white `#fff`.
|
||||
- Stay section: white `#fff` background, black text; body copy `rgba(0,0,0,0.78)`.
|
||||
- Footer: warm parchment `#f4ecdc`, black text; muted labels `rgba(0,0,0,0.55)`, body `rgba(0,0,0,0.65)`.
|
||||
- Buttons / pills: solid black `#000`, white text, hover `rgba(0,0,0,0.9)` / `0.85`.
|
||||
- Orbit label text: title `#000`, description `rgba(0,0,0,0.72)`.
|
||||
- No purple/indigo. The palette is monochrome (black/white) warmed only by the parchment footer.
|
||||
|
||||
## Assets (keep these remote — stable CDN)
|
||||
|
||||
These are large, stable CDN media; keep them as remote URLs (do **not** try to inline them, and do **not** swap them for other hosts):
|
||||
|
||||
- Hero background video (autoplay/muted/loop/playsinline, `object-fit:cover`, fixed inside the sticky stage):
|
||||
`https://plugin-assets.open-design.ai/plugins/luxury-botanical/hf_20260520_114550_b72cc2b7-2267-4d9e-b19f-f3bb4b0c7084-e5c560.mp4`
|
||||
- Six fragrance-bottle `.webp` stills on `res.cloudinary.com/dsdhxhhqh` (the orbit images), in this order:
|
||||
1. Wild Vetiver — `…/v1780390315/BL1996-Beyond_wild_vetiver_Flakon_100ml_300dpi_a55ie5.webp`
|
||||
2. Radiant Osmanthus — `…/v1780390315/BL2156_BEYOND_RADIANT_OSMANTHUS_hoc3up.webp`
|
||||
3. Vibrant Hibiscus — `…/v1780390315/BL2157_BEYOND_VIBRANT_HIBISCUS_pgiehq.webp`
|
||||
4. Mellow Heliotrope — `…/v1780390315/BL2158_BEYOND_MELLOW_HELIOTROPE_agqych.webp`
|
||||
5. Magnetic Amber — `…/v1780390317/BL2371-BL2372-BL2373-Magnetic-Amber_web_2_dbmtpy.webp`
|
||||
6. Crystal Edition — `…/v1780390315/BL2156_BEYOND_RADIANT_OSMANTHUS_1_hlc4v1.webp`
|
||||
- Stay-section bottom decoration still: `https://plugin-assets.open-design.ai/plugins/luxury-botanical/pasted-1779282335552-1_gmztyi-eccf42.webp`
|
||||
|
||||
There are **no avatar / face images** in this template — nothing needs base64 inlining. Keep the CDN URLs exactly as above.
|
||||
|
||||
## Scroll stage (the heart of the page)
|
||||
|
||||
A `600vh` tall `.stage` container with a `position: sticky; top: 0; height: 100vh` child. Normalized scroll progress `p ∈ [0,1]` = `-rect.top / (stageHeight - innerHeight)`, clamped. One `requestAnimationFrame` loop reads `p` each frame and drives everything via a piecewise-linear `track(p, stops, values)` helper (the vanilla equivalent of Framer's `useTransform`).
|
||||
|
||||
### Hero chrome (logo, header, scroll hint)
|
||||
Opacity follows `track(p, [0, 0.03, 0.08], [1, 1, 0])` — visible at top, faded out by `p=0.08`.
|
||||
- Top-left logo: "Beyond *The*" (Instrument Serif, *The* italic) over "Collection" (Manrope). `top:120px; left:96px`, black.
|
||||
- Header: brand mark (inline SVG winged-B crest) + "BENTLEY" (Manrope 600, letter-spacing `0.42em`), and a black "Shop the collection" pill with a circular arrow cap.
|
||||
- Scroll hint: a 20×34 well with a `scrollArrow` keyframe arrow (translateY -6→10px, opacity pulse, 1.6s loop), bottom-center.
|
||||
|
||||
### Clip-path reveal
|
||||
A `150vw × 150vh` layer offset `left:-25vw; top:-25vh`, rotated `-15deg`, with `clip-path: ellipse(R% R% at 50% 50%)` where `R = track(p, [0, 0.08, 1], [0, 55, 55])` — an ellipse that opens from nothing to 55% by `p=0.08` and holds. Inside: a full-bleed white surface and a counter-rotated (`rotate(15deg)`) inner that hosts the orbit.
|
||||
|
||||
### Orbit carousel (`OrbitImages`)
|
||||
Six bottles ride an **elliptical offset-path**. Scroll keyframes at stops `[0.15, 0.25, 0.85, 0.95, 1]`:
|
||||
- `itemSize`: `[80, 360, 360, 80, 80]` px
|
||||
- `radiusX`: `[330, 650, 650, 330, 330]`
|
||||
- `radiusY`: `[140, 650, 650, 140, 140]` (becomes a circle of radius `TARGET_RADIUS=650` in the middle)
|
||||
- `rotation` of the whole ring: `[-15, 0, 0, -15, -15]` deg
|
||||
- `translateX`: `[0, -850, -850, 0, 0]` (= `-(TARGET_RADIUS+200)`), sliding the ring left mid-scroll
|
||||
- `focusStrength`: `[0, 1, 1, 0, 0]`
|
||||
|
||||
Carousel progress advances continuously: when `0.15 < p < 0.85` it tracks `scrollDelta * 200` (scroll-scrubbed); otherwise it idles at `~2.5 deg/sec`. Each item's position on the ellipse is `(progress + i/6*100) % 100`. Item scale uses a cosine focal falloff: within 20% of the focal point (`50`) it eases `0.4 → 1.0` via `(cos(ratio·π)+1)/2`, else `0.4`; final scale = `1 - focusStrength·(1 - targetScale)`. Each item's content is **counter-rotated** by `-rotation` so bottles stay upright, and `zIndex = round(scale·100)` so the focal bottle is on top. A focal bottle reveals its **label** (Instrument Serif title + Manrope description, fading in with `focusStrength`) at `left:115%`.
|
||||
|
||||
### Hero overlay copy (fades in on the white reveal)
|
||||
Opacity/blur/translateY follow `track(p, [0.03, 0.08, 0.15, 0.22, 0.90, 0.98, 1], …)`:
|
||||
- opacity `[0, 1, 1, 0, 0, 1, 1]`, blur `[15, 0, 0, 15, 15, 0, 0]` px, translateY `[20, 0, 0, 20, 20, 0, 0]` px (center brand uses opacity+blur only, no y).
|
||||
- Center brand: "Beyond *The*" + "Collection", black, `top:48%`.
|
||||
- Top-right: "2K26" + "JOIN AN EXCLUSIVE / COMMUNITY".
|
||||
- Bottom-left: "0651" + "COLLECTION".
|
||||
- Bottom-right: a tracked uppercase paragraph + black "BUY COLLECTION" pill with an overlapping circular arrow button.
|
||||
|
||||
## Stay section (after the stage)
|
||||
|
||||
`min-height:100vh`, white. A bottom-anchored decoration image (`stay-bg`, `object-position:center bottom`). Content max-width `1480px`, padding `80px 32px`, flex column gap `32px`:
|
||||
- Title: "Stay *in*" (Instrument Serif, `clamp(60px,11vw,160px)`, *in* italic) over "the collection" (Manrope 400, 64px).
|
||||
- Newsletter blurb + an underlined email `<input>` + "Subscribe →" button (border-bottom black/40).
|
||||
|
||||
## Footer
|
||||
|
||||
Warm parchment `#f4ecdc`, black text, max-width `1480px`, padding `48px 32px`.
|
||||
- 4-column grid (2 cols ≤767px, 4 cols ≥768px), gap `48/40px`, `margin-bottom:80px`: **Discover**, **Studio**, **Contact**, **Newsletter** (with its own email form).
|
||||
- Column headings: Manrope 500, 11px, letter-spacing `0.3em`, uppercase, `rgba(0,0,0,0.55)`.
|
||||
- Bottom row (border-top black/15, padding-top 32px): "© 2026 Beyond The Collection", social links Instagram · TikTok · Spotify, and "EN · USD".
|
||||
|
||||
## Animations / reveals
|
||||
|
||||
- All hero motion is **scroll-driven** through the single rAF loop and `track()` — do not bolt on time-based tweens for the hero.
|
||||
- Stay + footer blocks use a **blur-up reveal** (`opacity 0→1`, `translateY(40px)→0`, `blur(20px)→0`, 1s ease) triggered once by an `IntersectionObserver` at `threshold 0.3`, with optional staggered `data-delay` (150/200/250ms).
|
||||
- Orbit image hover: `scale(1.2)`, 0.3s.
|
||||
|
||||
## Responsive
|
||||
|
||||
- ≤900px: pull the logo / overlay anchors inward (logo `left:32px`, info blocks to `6vw`/`32px` insets), reduce Stay padding to `64px 24px`. The orbit/reveal math is viewport-relative and reflows automatically (radii are scaled by `frameWidth / 800`).
|
||||
- ≥768px: footer grid expands from 2 to 4 columns.
|
||||
|
||||
## Color rules — hard
|
||||
|
||||
Monochrome black-on-white hero and Stay section; the **only** warm tone is the parchment footer `#f4ecdc`. No purple/indigo/teal accents. Buttons are solid black. Keep all the locked asset URLs (cloudfront video + the six cloudinary `.webp` bottles + the cloudinary stay decoration) exactly as shipped.
|
||||
695
.od-skills/luxury-botanical-6d7799632e/example.html
Normal file
695
.od-skills/luxury-botanical-6d7799632e/example.html
Normal file
|
|
@ -0,0 +1,695 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Bentley — Beyond The Collection</title>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600&family=Great+Vibes&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; background: #000; }
|
||||
body {
|
||||
font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: #fff;
|
||||
}
|
||||
.serif { font-family: "Instrument Serif", serif; }
|
||||
.sans { font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; }
|
||||
.italic { font-style: italic; }
|
||||
img { display: block; }
|
||||
button { font: inherit; cursor: pointer; border: none; }
|
||||
|
||||
/* ===== Scroll stage ===== */
|
||||
.stage {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 600vh;
|
||||
background: #000;
|
||||
}
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
}
|
||||
#bg-video {
|
||||
position: absolute; inset: 0;
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover; z-index: 0;
|
||||
}
|
||||
|
||||
/* logo top-left */
|
||||
.hero-logo {
|
||||
position: absolute; z-index: 10;
|
||||
top: 120px; left: 96px;
|
||||
display: flex; flex-direction: column; align-items: flex-start;
|
||||
text-align: left; color: #000; user-select: none; line-height: 0.95;
|
||||
}
|
||||
.hero-logo .row { display: flex; align-items: baseline; }
|
||||
.hero-logo .big { font-size: clamp(32px, 5vw, 64px); }
|
||||
.hero-logo .big.it { font-style: italic; margin-left: 0.05em; }
|
||||
.hero-logo .collection {
|
||||
font-weight: 400; font-size: clamp(28px, 4.4vw, 56px);
|
||||
letter-spacing: -0.01em; margin-top: 0.05em;
|
||||
}
|
||||
|
||||
/* scroll hint */
|
||||
.scroll-hint {
|
||||
position: absolute; z-index: 10;
|
||||
bottom: 40px; left: 50%; transform: translateX(-50%);
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
color: #fff; user-select: none; pointer-events: none;
|
||||
}
|
||||
.scroll-hint .well { position: relative; width: 20px; height: 34px; overflow: hidden; }
|
||||
@keyframes scrollArrow {
|
||||
0% { transform: translateY(-6px); opacity: 0; }
|
||||
40% { opacity: 1; }
|
||||
100% { transform: translateY(10px); opacity: 0; }
|
||||
}
|
||||
.scroll-arrow { position: absolute; inset: 0; animation: scrollArrow 1.6s ease-in-out infinite; }
|
||||
|
||||
/* clip reveal */
|
||||
.reveal {
|
||||
position: absolute; z-index: 20;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
overflow: hidden;
|
||||
width: 150vw; height: 150vh; left: -25vw; top: -25vh;
|
||||
transform: rotate(-15deg);
|
||||
clip-path: ellipse(0% 0% at 50% 50%);
|
||||
will-change: clip-path;
|
||||
}
|
||||
.reveal-white { position: absolute; inset: 0; background: #fff; }
|
||||
.reveal-inner {
|
||||
position: relative;
|
||||
width: 100vw; height: 100vh;
|
||||
transform: rotate(15deg);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
|
||||
/* orbit */
|
||||
.orbit-frame {
|
||||
position: relative;
|
||||
width: 90vw; max-width: 1200px; aspect-ratio: 1 / 1;
|
||||
}
|
||||
.orbit-rotation {
|
||||
position: absolute; inset: 0;
|
||||
transform-origin: center center;
|
||||
will-change: transform;
|
||||
}
|
||||
.orbit-item {
|
||||
position: absolute; left: 50%; top: 50%;
|
||||
will-change: transform;
|
||||
user-select: none;
|
||||
}
|
||||
.orbit-item img {
|
||||
width: 100%; height: 100%;
|
||||
object-fit: contain;
|
||||
transition: transform 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.orbit-item img:hover { transform: scale(1.2); }
|
||||
.orbit-label {
|
||||
position: absolute; left: 115%; top: 50%; transform: translateY(-50%);
|
||||
width: min(360px, 95%); color: #000; pointer-events: none;
|
||||
}
|
||||
.orbit-label .lt {
|
||||
font-family: "Instrument Serif", serif;
|
||||
font-size: clamp(26px, 3vw, 40px);
|
||||
line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 14px;
|
||||
}
|
||||
.orbit-label .ld {
|
||||
font-weight: 400; font-size: clamp(13px, 1vw, 15px);
|
||||
line-height: 1.5; color: rgba(0,0,0,0.72);
|
||||
}
|
||||
|
||||
/* text overlays */
|
||||
.overlays { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
|
||||
.overlay-fade { will-change: opacity, filter, transform; }
|
||||
|
||||
.center-brand {
|
||||
position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%);
|
||||
z-index: 50; pointer-events: none;
|
||||
}
|
||||
.center-brand .stack {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
white-space: nowrap; pointer-events: auto;
|
||||
}
|
||||
.center-brand .row { display: flex; align-items: baseline; color: #000; line-height: 1; margin-bottom: 4px; }
|
||||
.center-brand .row span { font-size: 45px; letter-spacing: -0.02em; color: #000; }
|
||||
.center-brand .collection { font-size: 28px; letter-spacing: -0.02em; color: #000; margin-top: -5px; }
|
||||
|
||||
.info-tr {
|
||||
position: absolute; top: 128px; right: 214px;
|
||||
display: flex; flex-direction: column; align-items: flex-start;
|
||||
text-align: left; pointer-events: auto;
|
||||
}
|
||||
.info-tr .num { font-size: 40px; line-height: 1; margin-bottom: 12px; color: #000; }
|
||||
.info-tr .lbl { font-size: 16px; text-transform: uppercase; letter-spacing: 0.18em; color: #000; line-height: 20px; }
|
||||
|
||||
.info-bl {
|
||||
position: absolute; bottom: 64px; left: 64px;
|
||||
display: flex; flex-direction: column; align-items: flex-start; color: #000; pointer-events: auto;
|
||||
}
|
||||
.info-bl .num { font-size: 40px; line-height: 1; margin-bottom: 4px; color: #000; }
|
||||
.info-bl .lbl { font-size: 16px; text-transform: uppercase; letter-spacing: 0.18em; color: #000; }
|
||||
|
||||
.cta-br {
|
||||
position: absolute; bottom: 64px; right: 10vw;
|
||||
display: flex; flex-direction: column; align-items: flex-start; z-index: 10; pointer-events: auto;
|
||||
}
|
||||
.cta-br p {
|
||||
font-size: 16px; text-transform: uppercase; letter-spacing: 0.18em; color: #000;
|
||||
line-height: 20px; margin: 0 0 24px; width: 240px; text-align: left;
|
||||
}
|
||||
.cta-row { display: flex; align-items: center; }
|
||||
.btn-pill {
|
||||
background: #000; color: #fff; border-radius: 40px;
|
||||
padding: 14px 32px; letter-spacing: 0.1em; text-transform: uppercase;
|
||||
font-family: "Instrument Serif", serif; font-size: 14px; z-index: 10;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-pill:hover { background: rgba(0,0,0,0.9); }
|
||||
.btn-circle {
|
||||
background: #000; color: #fff; width: 46px; height: 46px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border-radius: 50%; margin-left: -8px; z-index: 0;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-circle:hover { background: rgba(0,0,0,0.9); }
|
||||
|
||||
/* header */
|
||||
.hero-header {
|
||||
position: absolute; top: 0; left: 0; width: 100%;
|
||||
padding: 24px 48px; display: flex; justify-content: space-between; align-items: center;
|
||||
z-index: 100; pointer-events: none; will-change: opacity;
|
||||
}
|
||||
.brand-link {
|
||||
display: flex; align-items: center; gap: 12px; color: #000;
|
||||
user-select: none; pointer-events: auto; text-decoration: none;
|
||||
}
|
||||
.brand-link .name {
|
||||
font-weight: 600; font-size: 14px; letter-spacing: 0.42em; text-transform: uppercase; color: #000;
|
||||
}
|
||||
.shop-pill {
|
||||
pointer-events: auto; display: inline-flex; align-items: center; gap: 8px;
|
||||
background: #000; color: #fff; border-radius: 100px;
|
||||
padding: 8px 8px 8px 20px; text-decoration: none;
|
||||
font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.shop-pill:hover { background: rgba(0,0,0,0.85); }
|
||||
.shop-pill .arrowcap {
|
||||
display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center;
|
||||
border-radius: 50%; background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
/* ===== Stay section ===== */
|
||||
.stay {
|
||||
position: relative; width: 100%; overflow: hidden;
|
||||
min-height: 100vh; background: #fff; color: #000;
|
||||
}
|
||||
.stay-bg {
|
||||
position: absolute; left: 0; right: 0; bottom: 0; width: 100%;
|
||||
pointer-events: none; user-select: none; object-fit: cover; object-position: center bottom;
|
||||
}
|
||||
.stay-wrap {
|
||||
position: relative; max-width: 1480px; margin: 0 auto;
|
||||
padding: 80px 32px; min-height: 100vh;
|
||||
display: flex; flex-direction: column; gap: 32px;
|
||||
}
|
||||
.stay-title .l1 {
|
||||
font-family: "Instrument Serif", serif;
|
||||
font-size: clamp(60px, 11vw, 160px); line-height: 0.95; letter-spacing: -0.01em; color: #000;
|
||||
}
|
||||
.stay-title .l2 {
|
||||
font-family: "Manrope", sans-serif; font-weight: 400;
|
||||
line-height: 0.95; letter-spacing: -0.02em; color: #000; font-size: 64px;
|
||||
}
|
||||
.stay-form { max-width: 28rem; }
|
||||
.stay-form p {
|
||||
margin: 0 0 24px; font-size: 15px; line-height: 1.55; color: rgba(0,0,0,0.78);
|
||||
}
|
||||
.sub-form {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.4); padding-bottom: 8px;
|
||||
}
|
||||
.sub-form input {
|
||||
background: transparent; flex: 1; outline: none; border: none;
|
||||
font-size: 15px; color: #000; font-family: "Manrope", sans-serif;
|
||||
}
|
||||
.sub-form button {
|
||||
background: none; font-size: 11px; font-weight: 500; letter-spacing: 0.25em;
|
||||
text-transform: uppercase; color: #000;
|
||||
}
|
||||
|
||||
/* ===== Footer ===== */
|
||||
.footer { position: relative; width: 100%; color: #000; overflow: hidden; background: #f4ecdc; }
|
||||
.footer-wrap { position: relative; max-width: 1480px; margin: 0 auto; padding: 48px 32px; }
|
||||
.footer-cols {
|
||||
display: grid; grid-template-columns: repeat(2, 1fr);
|
||||
gap: 48px; margin-bottom: 80px;
|
||||
}
|
||||
.footer-head {
|
||||
margin-bottom: 20px; color: rgba(0,0,0,0.55);
|
||||
font-size: 11px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
|
||||
}
|
||||
.footer-col ul { list-style: none; margin: 0; padding: 0; }
|
||||
.footer-col li { margin-bottom: 12px; }
|
||||
.footer-col a { font-size: 15px; font-weight: 400; color: rgba(0,0,0,0.85); text-decoration: none; }
|
||||
.footer-col a:hover { text-decoration: underline; }
|
||||
.footer-news p { margin: 0 0 20px; color: rgba(0,0,0,0.65); font-size: 14px; line-height: 1.5; }
|
||||
.footer-bottom {
|
||||
display: flex; flex-direction: row; align-items: center; justify-content: space-between;
|
||||
gap: 24px; padding-top: 32px; border-top: 1px solid rgba(0,0,0,0.15);
|
||||
}
|
||||
.footer-meta {
|
||||
color: rgba(0,0,0,0.55); font-size: 11px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
|
||||
}
|
||||
.footer-social { display: flex; align-items: center; gap: 20px; font-size: 11px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; }
|
||||
.footer-social a { color: #000; text-decoration: none; }
|
||||
.footer-social a:hover { text-decoration: underline; }
|
||||
.footer-social .dot { color: rgba(0,0,0,0.3); }
|
||||
|
||||
/* blur-up reveal */
|
||||
.blur-up { opacity: 0; transform: translateY(40px); filter: blur(20px); transition: opacity 1s ease, transform 1s ease, filter 1s ease; }
|
||||
.blur-up.in { opacity: 1; transform: none; filter: blur(0); }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.footer-cols { grid-template-columns: repeat(4, 1fr); gap: 40px; }
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.hero-logo { left: 32px; top: 88px; }
|
||||
.info-tr { right: 6vw; top: 100px; }
|
||||
.info-bl { left: 32px; bottom: 32px; }
|
||||
.cta-br { right: 6vw; }
|
||||
.stay-wrap { padding: 64px 24px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- ============ HERO / SCROLL STAGE ============ -->
|
||||
<div class="stage" id="stage">
|
||||
<div class="sticky">
|
||||
|
||||
<!-- Background video -->
|
||||
<video id="bg-video" autoplay loop muted playsinline>
|
||||
<source src="https://plugin-assets.open-design.ai/plugins/luxury-botanical/hf_20260520_114550_b72cc2b7-2267-4d9e-b19f-f3bb4b0c7084-e5c560.mp4" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
<!-- Top-left logo -->
|
||||
<div class="hero-logo" id="hero-logo">
|
||||
<div class="row">
|
||||
<span class="serif big">Beyond</span>
|
||||
<span class="serif big it">The</span>
|
||||
</div>
|
||||
<span class="sans collection">Collection</span>
|
||||
</div>
|
||||
|
||||
<!-- Scroll hint -->
|
||||
<div class="scroll-hint" id="scroll-hint">
|
||||
<div class="well">
|
||||
<svg class="scroll-arrow" width="20" height="34" viewBox="0 0 20 34" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M10 4 V28 M3 21 L10 28 L17 21" stroke="#ffffff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Clip-path reveal with orbit -->
|
||||
<div class="reveal" id="reveal">
|
||||
<div class="reveal-white"></div>
|
||||
<div class="reveal-inner">
|
||||
<div class="orbit-frame">
|
||||
<div class="orbit-rotation" id="orbit-rotation"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text overlays -->
|
||||
<div class="overlays">
|
||||
<div class="center-brand">
|
||||
<div class="stack overlay-fade" id="ov-center">
|
||||
<div class="row">
|
||||
<span class="serif">Beyond </span>
|
||||
<span class="serif italic">The</span>
|
||||
</div>
|
||||
<span class="sans collection">Collection</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-tr overlay-fade" id="ov-tr">
|
||||
<span class="serif num">2K26</span>
|
||||
<span class="serif lbl">JOIN AN EXCLUSIVE<br />COMMUNITY</span>
|
||||
</div>
|
||||
|
||||
<div class="info-bl overlay-fade" id="ov-bl">
|
||||
<span class="serif num">0651</span>
|
||||
<span class="serif lbl">COLLECTION</span>
|
||||
</div>
|
||||
|
||||
<div class="cta-br">
|
||||
<p class="serif overlay-fade" id="ov-cta-p">JOIN AN EXCLUSIVE COMMUNITY OF SAILORS. WHETHER YOU CRAVE THE THRILL OF THE OPEN</p>
|
||||
<div class="cta-row overlay-fade" id="ov-cta-row" style="pointer-events:auto;">
|
||||
<button class="btn-pill">BUY COLLECTION</button>
|
||||
<button class="btn-circle" aria-label="Buy">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="margin-left:4px;">
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="hero-header" id="hero-header">
|
||||
<a href="#" class="brand-link" aria-label="Bentley">
|
||||
<svg width="54" height="40" viewBox="0 0 84 60" fill="none" aria-hidden="true">
|
||||
<g fill="currentColor">
|
||||
<path d="M42 22 C30 22 19 16 4 12 C9 26 18 33 30 33 L42 33 Z" />
|
||||
<path d="M42 22 C54 22 65 16 80 12 C75 26 66 33 54 33 L42 33 Z" />
|
||||
<path d="M34 25 C36 28 39 30 42 30 C45 30 48 28 50 25 L42 22 Z" opacity="0.7" />
|
||||
</g>
|
||||
<text x="42" y="52" text-anchor="middle" font-family="'Instrument Serif', serif" font-size="22" font-style="italic" fill="currentColor">B</text>
|
||||
</svg>
|
||||
<span class="name">Bentley</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="shop-pill">
|
||||
<span>Shop the collection</span>
|
||||
<span class="arrowcap">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ STAY SECTION ============ -->
|
||||
<section class="stay">
|
||||
<img class="stay-bg" src="https://plugin-assets.open-design.ai/plugins/luxury-botanical/pasted-1779282335552-1_gmztyi-eccf42.webp" alt="" aria-hidden="true" />
|
||||
<div class="stay-wrap">
|
||||
<div class="stay-title blur-up" data-reveal>
|
||||
<div class="l1">Stay <span class="italic">in</span></div>
|
||||
<div class="l2">the collection</div>
|
||||
</div>
|
||||
<div class="stay-form blur-up" data-reveal data-delay="200">
|
||||
<p>Editions and invitations from the Bentley fragrance studio, sent twice a season.</p>
|
||||
<form class="sub-form" onsubmit="return false;">
|
||||
<input type="email" placeholder="your@email.com" />
|
||||
<button type="submit">Subscribe →</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ FOOTER ============ -->
|
||||
<footer class="footer">
|
||||
<div class="footer-wrap">
|
||||
<div class="footer-cols blur-up" data-reveal data-delay="150">
|
||||
<div class="footer-col">
|
||||
<div class="footer-head">Discover</div>
|
||||
<ul>
|
||||
<li><a href="#">All fragrances</a></li>
|
||||
<li><a href="#">The bottle</a></li>
|
||||
<li><a href="#">Sustainability</a></li>
|
||||
<li><a href="#">Editions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<div class="footer-head">Studio</div>
|
||||
<ul>
|
||||
<li><a href="#">Our story</a></li>
|
||||
<li><a href="#">Perfumers</a></li>
|
||||
<li><a href="#">Atelier visits</a></li>
|
||||
<li><a href="#">Press</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<div class="footer-head">Contact</div>
|
||||
<ul>
|
||||
<li><a href="#">Boutiques</a></li>
|
||||
<li><a href="#">Concierge</a></li>
|
||||
<li><a href="#">Returns</a></li>
|
||||
<li><a href="#">Care guide</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col footer-news">
|
||||
<div class="footer-head">Newsletter</div>
|
||||
<p>Editions and invitations, sent twice a season.</p>
|
||||
<form class="sub-form" onsubmit="return false;">
|
||||
<input type="email" placeholder="your@email.com" />
|
||||
<button type="submit">Subscribe →</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom blur-up" data-reveal data-delay="250">
|
||||
<div class="footer-meta">© 2026 Beyond The Collection</div>
|
||||
<div class="footer-social">
|
||||
<a href="#">Instagram</a>
|
||||
<span class="dot">·</span>
|
||||
<a href="#">TikTok</a>
|
||||
<span class="dot">·</span>
|
||||
<a href="#">Spotify</a>
|
||||
</div>
|
||||
<div class="footer-meta">EN · USD</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
// ---- Fragrance bottle data ----
|
||||
var ORBIT = [
|
||||
{ src: "https://plugin-assets.open-design.ai/plugins/luxury-botanical/BL1996-Beyond_wild_vetiver_Flakon_100ml_300dpi_a55ie5-ad7edb.webp",
|
||||
title: "Wild Vetiver",
|
||||
desc: "Smoky vetiver wrapped in saffron and leather — a grounded, untamed signature." },
|
||||
{ src: "https://plugin-assets.open-design.ai/plugins/luxury-botanical/BL2156_BEYOND_RADIANT_OSMANTHUS_hoc3up-259f05.webp",
|
||||
title: "Radiant Osmanthus",
|
||||
desc: "Apricot-tinged osmanthus over soft musks. Quietly luminous, never loud." },
|
||||
{ src: "https://plugin-assets.open-design.ai/plugins/luxury-botanical/BL2157_BEYOND_VIBRANT_HIBISCUS_pgiehq-8c4cbc.webp",
|
||||
title: "Vibrant Hibiscus",
|
||||
desc: "Bright hibiscus and pink pepper resting on creamy sandalwood." },
|
||||
{ src: "https://plugin-assets.open-design.ai/plugins/luxury-botanical/BL2158_BEYOND_MELLOW_HELIOTROPE_agqych-36c451.webp",
|
||||
title: "Mellow Heliotrope",
|
||||
desc: "Almond, vanilla and heliotrope petals — a powdery, hushed warmth." },
|
||||
{ src: "https://plugin-assets.open-design.ai/plugins/luxury-botanical/BL2371-BL2372-BL2373-Magnetic-Amber_web_2_dbmtpy-e68423.webp",
|
||||
title: "Magnetic Amber",
|
||||
desc: "Resinous amber, oud and rich woods. The collection's deepest note." },
|
||||
{ src: "https://plugin-assets.open-design.ai/plugins/luxury-botanical/BL2156_BEYOND_RADIANT_OSMANTHUS_1_hlc4v1-572755.webp",
|
||||
title: "Crystal Edition",
|
||||
desc: "A limited cut of the bottle — etched facets, lavender pour, leather collar." }
|
||||
];
|
||||
|
||||
var TARGET_RADIUS = 650;
|
||||
var BASE = 800; // design coordinate space
|
||||
var FOCAL = 50; // focal point along the path (percent)
|
||||
|
||||
var rotationEl = document.getElementById("orbit-rotation");
|
||||
var items = [];
|
||||
|
||||
// Build orbit items (each = wrapper + counter-rotated content holding img + label)
|
||||
ORBIT.forEach(function (entry, i) {
|
||||
var wrap = document.createElement("div");
|
||||
wrap.className = "orbit-item";
|
||||
|
||||
var counter = document.createElement("div");
|
||||
counter.style.width = "100%";
|
||||
counter.style.height = "100%";
|
||||
counter.style.position = "relative";
|
||||
|
||||
var img = document.createElement("img");
|
||||
img.src = entry.src;
|
||||
img.alt = entry.title;
|
||||
img.draggable = false;
|
||||
counter.appendChild(img);
|
||||
|
||||
var label = document.createElement("div");
|
||||
label.className = "orbit-label";
|
||||
label.innerHTML =
|
||||
'<div class="lt">' + entry.title + "</div>" +
|
||||
'<div class="ld">' + entry.desc + "</div>";
|
||||
counter.appendChild(label);
|
||||
|
||||
wrap.appendChild(counter);
|
||||
rotationEl.appendChild(wrap);
|
||||
|
||||
items.push({ wrap: wrap, counter: counter, label: label, offset: (i / ORBIT.length) * 100 });
|
||||
});
|
||||
|
||||
// ---- helpers ----
|
||||
function lerp(a, b, t) { return a + (b - a) * t; }
|
||||
function clamp01(v) { return v < 0 ? 0 : v > 1 ? 1 : v; }
|
||||
|
||||
// piecewise-linear interpolation across keyframe stops (mirrors useTransform)
|
||||
function track(p, stops, values) {
|
||||
if (p <= stops[0]) return values[0];
|
||||
var n = stops.length;
|
||||
if (p >= stops[n - 1]) return values[n - 1];
|
||||
for (var i = 0; i < n - 1; i++) {
|
||||
if (p >= stops[i] && p <= stops[i + 1]) {
|
||||
var t = (p - stops[i]) / (stops[i + 1] - stops[i]);
|
||||
return lerp(values[i], values[i + 1], t);
|
||||
}
|
||||
}
|
||||
return values[n - 1];
|
||||
}
|
||||
|
||||
var stage = document.getElementById("stage");
|
||||
var reveal = document.getElementById("reveal");
|
||||
var heroLogo = document.getElementById("hero-logo");
|
||||
var heroHeader = document.getElementById("hero-header");
|
||||
var scrollHint = document.getElementById("scroll-hint");
|
||||
|
||||
var ovCenter = document.getElementById("ov-center");
|
||||
var ovTr = document.getElementById("ov-tr");
|
||||
var ovBl = document.getElementById("ov-bl");
|
||||
var ovCtaP = document.getElementById("ov-cta-p");
|
||||
var ovCtaRow = document.getElementById("ov-cta-row");
|
||||
|
||||
var orbitProgress = 0;
|
||||
var prevScroll = 0;
|
||||
var lastTime = 0;
|
||||
|
||||
function progressOfStage() {
|
||||
var rect = stage.getBoundingClientRect();
|
||||
var total = stage.offsetHeight - window.innerHeight;
|
||||
if (total <= 0) return 0;
|
||||
return clamp01(-rect.top / total);
|
||||
}
|
||||
|
||||
function applyOverlays(p) {
|
||||
// opacity / blur / y across the scroll arc
|
||||
var oStops = [0.03, 0.08, 0.15, 0.22, 0.90, 0.98, 1];
|
||||
var op = track(p, oStops, [0, 1, 1, 0, 0, 1, 1]);
|
||||
var bl = track(p, oStops, [15, 0, 0, 15, 15, 0, 0]);
|
||||
var ty = track(p, oStops, [20, 0, 0, 20, 20, 0, 0]);
|
||||
|
||||
// center brand: opacity + blur, no y shift
|
||||
ovCenter.style.opacity = op;
|
||||
ovCenter.style.filter = "blur(" + bl + "px)";
|
||||
|
||||
var fade = "blur(" + bl + "px)";
|
||||
[ovTr, ovBl, ovCtaP, ovCtaRow].forEach(function (el) {
|
||||
el.style.opacity = op;
|
||||
el.style.filter = fade;
|
||||
el.style.transform = "translateY(" + ty + "px)";
|
||||
});
|
||||
}
|
||||
|
||||
function applyHeroChrome(p) {
|
||||
var hint = track(p, [0, 0.03, 0.08], [1, 1, 0]);
|
||||
scrollHint.style.opacity = hint;
|
||||
heroLogo.style.opacity = hint;
|
||||
heroHeader.style.opacity = hint;
|
||||
}
|
||||
|
||||
function applyReveal(p) {
|
||||
// clip-path ellipse grows 0 -> 55% by p=0.08, then holds
|
||||
var r = track(p, [0, 0.08, 1], [0, 55, 55]);
|
||||
reveal.style.clipPath = "ellipse(" + r + "% " + r + "% at 50% 50%)";
|
||||
}
|
||||
|
||||
function applyOrbit(p, advance) {
|
||||
var stops = [0.15, 0.25, 0.85, 0.95, 1];
|
||||
var itemSize = track(p, stops, [80, 360, 360, 80, 80]);
|
||||
var rx = track(p, stops, [330, TARGET_RADIUS, TARGET_RADIUS, 330, 330]);
|
||||
var ry = track(p, stops, [140, TARGET_RADIUS, TARGET_RADIUS, 140, 140]);
|
||||
var rot = track(p, stops, [-15, 0, 0, -15, -15]);
|
||||
var tx = track(p, stops, [0, -(TARGET_RADIUS + 200), -(TARGET_RADIUS + 200), 0, 0]);
|
||||
var focus = track(p, stops, [0, 1, 1, 0, 0]);
|
||||
|
||||
// rotation wrapper transform (rotate around center, then translateX)
|
||||
rotationEl.style.transform = "rotate(" + rot + "deg) translateX(" + tx + "px)";
|
||||
|
||||
// advance the carousel progress
|
||||
var scrollDelta = p - prevScroll;
|
||||
prevScroll = p;
|
||||
var frameSpeed;
|
||||
if (p > 0.15 && p < 0.85) {
|
||||
frameSpeed = scrollDelta * 200;
|
||||
} else {
|
||||
frameSpeed = advance * 2.5;
|
||||
}
|
||||
orbitProgress += frameSpeed;
|
||||
|
||||
// design center, scaled by current frame width
|
||||
var frameW = rotationEl.parentElement.clientWidth || BASE;
|
||||
var scale = frameW / BASE;
|
||||
var cx = BASE / 2, cy = BASE / 2;
|
||||
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
var it = items[i];
|
||||
var pos = (((orbitProgress + it.offset) % 100) + 100) % 100; // 0..100
|
||||
|
||||
// position along ellipse (param angle), starting at left vertex like the M command
|
||||
var ang = (pos / 100) * Math.PI * 2;
|
||||
var ex = cx - rx * Math.cos(ang);
|
||||
var ey = cy + ry * Math.sin(ang);
|
||||
|
||||
// scale: cosine falloff near focal point
|
||||
var dist = Math.abs(pos - FOCAL);
|
||||
if (dist > 50) dist = 100 - dist;
|
||||
var targetScale = 0.4;
|
||||
if (dist < 20) {
|
||||
var ratio = dist / 20;
|
||||
targetScale = 0.4 + ((Math.cos(ratio * Math.PI) + 1) / 2) * 0.6;
|
||||
}
|
||||
var itemScale = 1 - focus * (1 - targetScale);
|
||||
|
||||
var px = (ex - cx) * scale;
|
||||
var py = (ey - cy) * scale;
|
||||
var sz = itemSize * scale;
|
||||
|
||||
it.wrap.style.width = sz + "px";
|
||||
it.wrap.style.height = sz + "px";
|
||||
it.wrap.style.transform =
|
||||
"translate(-50%, -50%) translate(" + px + "px, " + py + "px) scale(" + itemScale + ")";
|
||||
it.wrap.style.zIndex = Math.round(itemScale * 100);
|
||||
// counter-rotate content so it stays upright
|
||||
it.counter.style.transform = "rotate(" + (-rot) + "deg)";
|
||||
it.label.style.opacity = focus;
|
||||
}
|
||||
}
|
||||
|
||||
function frame(t) {
|
||||
var advance = lastTime ? (t - lastTime) / 1000 : 0;
|
||||
lastTime = t;
|
||||
var p = progressOfStage();
|
||||
applyHeroChrome(p);
|
||||
applyReveal(p);
|
||||
applyOverlays(p);
|
||||
applyOrbit(p, advance);
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
requestAnimationFrame(frame);
|
||||
|
||||
// ---- blur-up on scroll (IntersectionObserver -> Framer whileInView) ----
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (en) {
|
||||
if (en.isIntersecting) {
|
||||
var el = en.target;
|
||||
var delay = parseInt(el.getAttribute("data-delay") || "0", 10);
|
||||
setTimeout(function () { el.classList.add("in"); }, delay);
|
||||
io.unobserve(el);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.3 });
|
||||
document.querySelectorAll("[data-reveal]").forEach(function (el) { io.observe(el); });
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
122
.od-skills/luxury-botanical-6d7799632e/open-design.json
Normal file
122
.od-skills/luxury-botanical-6d7799632e/open-design.json
Normal file
File diff suppressed because one or more lines are too long
1
.playwright-mcp/console-2026-06-13T15-58-18-113Z.log
Normal file
1
.playwright-mcp/console-2026-06-13T15-58-18-113Z.log
Normal file
|
|
@ -0,0 +1 @@
|
|||
[ 142ms] [ERROR] Failed to load resource: the server responded with a status of 404 (File not found) @ http://127.0.0.1:8765/favicon.ico:0
|
||||
221
.playwright-mcp/page-2026-06-13T15-58-18-296Z.yml
Normal file
221
.playwright-mcp/page-2026-06-13T15-58-18-296Z.yml
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
- generic [active] [ref=e1]:
|
||||
- banner [ref=e2]:
|
||||
- generic [ref=e3]:
|
||||
- link "JE i South Africa · Built for Industry" [ref=e4] [cursor=pointer]:
|
||||
- /url: index.html
|
||||
- generic [ref=e5]: JE
|
||||
- generic [ref=e6]: i
|
||||
- generic [ref=e7]: South Africa · Built for Industry
|
||||
- navigation "Primary" [ref=e8]:
|
||||
- link "Products" [ref=e9] [cursor=pointer]:
|
||||
- /url: products.html
|
||||
- link "Industries" [ref=e10] [cursor=pointer]:
|
||||
- /url: index.html#industries
|
||||
- link "About" [ref=e11] [cursor=pointer]:
|
||||
- /url: about.html
|
||||
- link "Contact" [ref=e12] [cursor=pointer]:
|
||||
- /url: contact.html
|
||||
- link "Request a quote" [ref=e13] [cursor=pointer]:
|
||||
- /url: contact.html
|
||||
- generic [ref=e15]:
|
||||
- generic [ref=e16]:
|
||||
- link "Home" [ref=e17] [cursor=pointer]:
|
||||
- /url: index.html
|
||||
- text: / About
|
||||
- heading "The local partner of JEI Solutions (UK) — stocked in South Africa." [level=1] [ref=e18]
|
||||
- paragraph [ref=e19]: JEI South Africa distributes and supports the JEI range of magnetic drilling machines, annular cutters, and fabrication tooling. Same engineering pedigree as the UK parent, with a Johannesburg warehouse and a Cape Town depot.
|
||||
- generic [ref=e21]:
|
||||
- generic [ref=e22]:
|
||||
- generic [ref=e23]:
|
||||
- paragraph [ref=e24]: The company
|
||||
- heading "Built for industry. Stocked in South Africa." [level=2] [ref=e25]
|
||||
- paragraph [ref=e26]: JEI South Africa was set up to give South African fabricators direct local access to the JEI range — without the lead time and shipping cost of importing from the UK on every order.
|
||||
- generic [ref=e27]:
|
||||
- generic [ref=e28]:
|
||||
- paragraph [ref=e29]:
|
||||
- text: JEI Solutions (UK) is one of the UK's leading specialists in magnetic drilling and annular cutting, with a catalogue that includes the MagBeast
|
||||
- superscript [ref=e30]: ®
|
||||
- text: HM Range, MiniBeast™ Cordless, the Turbo™ cutter line, and a broad fabrication range. For twenty-plus years the UK team has built tooling for steel fabrication, rail, energy, defence and heavy engineering.
|
||||
- paragraph [ref=e31]: JEI South Africa is the authorised local partner — same machines, same warranties, same engineering standard, but with stock on the ground, technical support in SA time zones, and pricing in ZAR. We carry the best-selling machines, the high-turnover cutter sizes, and the consumables that fabricators burn through week-to-week.
|
||||
- paragraph [ref=e32]: We don't make the machines. We make sure that when a mag drill goes down on a Tuesday afternoon, the replacement is in the post that night, and the technician on the phone knows the difference between a Turbo Tough TCT and an HSS-Co reamer.
|
||||
- complementary [ref=e33]:
|
||||
- heading "At a glance" [level=3] [ref=e34]
|
||||
- generic [ref=e35]:
|
||||
- generic [ref=e36]: Parent
|
||||
- generic [ref=e37]: JEI Solutions Ltd (UK)
|
||||
- generic [ref=e38]:
|
||||
- generic [ref=e39]: Established
|
||||
- generic [ref=e40]: 2018 (ZA ops)
|
||||
- generic [ref=e41]:
|
||||
- generic [ref=e42]: HQ
|
||||
- generic [ref=e43]: Johannesburg, GP
|
||||
- generic [ref=e44]:
|
||||
- generic [ref=e45]: Depot
|
||||
- generic [ref=e46]: Cape Town, WC
|
||||
- generic [ref=e47]:
|
||||
- generic [ref=e48]: SA rep
|
||||
- generic [ref=e49]: Gary Isherwood · WFSales
|
||||
- generic [ref=e50]:
|
||||
- generic [ref=e51]: Coverage
|
||||
- generic [ref=e52]: National · SADC on request
|
||||
- generic [ref=e53]:
|
||||
- generic [ref=e54]: Quality
|
||||
- generic [ref=e55]: ISO 9001 (UK parent)
|
||||
- generic [ref=e56]:
|
||||
- generic [ref=e57]: Currency
|
||||
- generic [ref=e58]: ZAR
|
||||
- generic [ref=e59]:
|
||||
- generic [ref=e60]: Language
|
||||
- generic [ref=e61]: English (Afrikaans on request)
|
||||
- generic [ref=e63]:
|
||||
- generic [ref=e64]:
|
||||
- generic [ref=e65]:
|
||||
- paragraph [ref=e66]: Capacity
|
||||
- heading "Stock, dispatch, and technical reach" [level=2] [ref=e67]
|
||||
- paragraph [ref=e68]: Indicative figures for the JEI South Africa operation. Volume stock is held against rolling demand; lead-time figures below are typical, not contractual.
|
||||
- generic [ref=e69]:
|
||||
- generic [ref=e70]:
|
||||
- generic [ref=e71]: R 4.2M
|
||||
- generic [ref=e72]: Stock on the floor
|
||||
- generic [ref=e73]:
|
||||
- generic [ref=e74]: 320+
|
||||
- generic [ref=e75]: Active SKUs (machines, cutters, spares)
|
||||
- generic [ref=e76]:
|
||||
- generic [ref=e77]: 24–72h
|
||||
- generic [ref=e78]: Dispatch Gauteng / national
|
||||
- generic [ref=e79]:
|
||||
- generic [ref=e80]: "3"
|
||||
- generic [ref=e81]: JEI-trained service technicians
|
||||
- generic [ref=e83]:
|
||||
- generic [ref=e84]:
|
||||
- generic [ref=e85]:
|
||||
- paragraph [ref=e86]: Service areas
|
||||
- heading "Where we work, where we go" [level=2] [ref=e87]
|
||||
- paragraph [ref=e88]: Most of our work is Gauteng-based fabrication and mining maintenance, with a growing share of Western Cape structural and rail work. Site visits and on-site demos by appointment.
|
||||
- generic [ref=e89]:
|
||||
- generic [ref=e90]:
|
||||
- generic [ref=e91]: HQ · Warehouse
|
||||
- heading "Johannesburg, Gauteng" [level=3] [ref=e92]
|
||||
- paragraph [ref=e93]: Main warehouse and technical support. Stocking the full MagBeast, MiniBeast and Turbo lines, plus consumables. Walk-in collections by appointment.
|
||||
- generic [ref=e94]: Next-day dispatch · GP, NW, MP, LP
|
||||
- generic [ref=e95]:
|
||||
- generic [ref=e96]: Depot
|
||||
- heading "Cape Town, Western Cape" [level=3] [ref=e97]
|
||||
- paragraph [ref=e98]: Depot for Western Cape, Northern Cape and Southern Cape. Cutter stock and pilot pins; machines dispatched ex-JHB within 48h.
|
||||
- generic [ref=e99]: 48h dispatch · WC, NC, EC-south
|
||||
- generic [ref=e100]:
|
||||
- generic [ref=e101]: Depot
|
||||
- heading "Durban, KwaZulu-Natal" [level=3] [ref=e102]
|
||||
- paragraph [ref=e103]: Depot for KZN and Eastern Cape (north of Gqeberha). Used for petrochemical and shipping-shore-side fabrication customers.
|
||||
- generic [ref=e104]: 48–72h dispatch · KZN, EC-north
|
||||
- generic [ref=e105]:
|
||||
- generic [ref=e106]: On-site
|
||||
- heading "Mining & heavy industry" [level=3] [ref=e107]
|
||||
- paragraph [ref=e108]: Site visits for on-site commissioning, application trials, and operator training. Available to mines, smelters and process plants nationwide.
|
||||
- generic [ref=e109]: By appointment · Limpopo, NW, MP, FS
|
||||
- generic [ref=e110]:
|
||||
- generic [ref=e111]: Partner
|
||||
- heading "Rail · Transnet / PRASA" [level=3] [ref=e112]
|
||||
- paragraph [ref=e113]: Working with rail maintenance contractors on fishplate renewal, turnout machining, and depot equipment. Railbeast™ range held in stock.
|
||||
- generic [ref=e114]: Project-based · National
|
||||
- generic [ref=e115]:
|
||||
- generic [ref=e116]: Export
|
||||
- heading "SADC & rest of Africa" [level=3] [ref=e117]
|
||||
- paragraph [ref=e118]: Cross-border supply into Namibia, Botswana, Mozambique, Zambia, and the DRC. Customs documentation and SARS VAT handling included.
|
||||
- generic [ref=e119]: On request · SADC, EAC
|
||||
- generic [ref=e121]:
|
||||
- generic [ref=e122]:
|
||||
- generic [ref=e123]:
|
||||
- paragraph [ref=e124]: Quality & warranty
|
||||
- heading "ISO 9001 standard, 12-month machine warranty." [level=2] [ref=e125]
|
||||
- paragraph [ref=e126]: JEI Solutions (UK) is ISO 9001:2015 certified, and that standard is the floor for JEI South Africa. Machine warranty is 12 months from invoice; cutters and consumables carry a separate, fair-wear-and-tear policy.
|
||||
- generic [ref=e127]:
|
||||
- list [ref=e128]:
|
||||
- listitem [ref=e129]:
|
||||
- heading "ISO 9001:2015 (UK parent)" [level=4] [ref=e130]
|
||||
- paragraph [ref=e131]: Quality management system audited annually. JEI South Africa operates to the same standard — documented incoming inspection, machine testing, and traceability on every cutter sold.
|
||||
- listitem [ref=e132]:
|
||||
- heading "12-month machine warranty" [level=4] [ref=e133]
|
||||
- paragraph [ref=e134]: All JEI mag drills carry a 12-month warranty from invoice date. Warranty handled in JHB — no need to ship back to the UK. Loan units available for warranty claims exceeding 5 working days.
|
||||
- listitem [ref=e135]:
|
||||
- heading "Authorised partner status" [level=4] [ref=e136]
|
||||
- paragraph [ref=e137]: JEI South Africa is the only authorised JEI distributor in the country. Customers buying from us get the same warranty, the same spares, and the same engineering support as customers in the UK.
|
||||
- listitem [ref=e138]:
|
||||
- heading "Counterfeit avoidance" [level=4] [ref=e139]
|
||||
- paragraph [ref=e140]: JEI mag drills and cutters are regularly counterfeited in the Far East. Every machine we sell is sourced directly from the UK parent, with serial-number traceability back to Burnley.
|
||||
- complementary [ref=e141]:
|
||||
- heading "What \"ISO 9001 in practice\" means here" [level=3] [ref=e142]
|
||||
- paragraph [ref=e143]: Every machine is bench-tested before dispatch — magnet pull test, no-load current, ground continuity, guard function. Test sheet goes in the box with the machine. Cutter batches are sampled on receipt and dimensional records kept for 7 years. If a job goes wrong, we can pull the test sheet for the machine that did the cutting.
|
||||
- generic [ref=e145]:
|
||||
- generic [ref=e146]:
|
||||
- paragraph [ref=e147]: Get in touch
|
||||
- heading "Speak to a JEI-trained technician." [level=2] [ref=e148]
|
||||
- paragraph [ref=e149]: Application advice, cutter selection, machine comparison — call us, WhatsApp us, or fill in the form. We come back the same business day.
|
||||
- generic [ref=e150]:
|
||||
- link "Request a quote" [ref=e151] [cursor=pointer]:
|
||||
- /url: contact.html
|
||||
- text: Request a quote
|
||||
- img [ref=e152]
|
||||
- link "Browse products" [ref=e154] [cursor=pointer]:
|
||||
- /url: products.html
|
||||
- contentinfo [ref=e155]:
|
||||
- generic [ref=e156]:
|
||||
- generic [ref=e157]:
|
||||
- generic [ref=e158]:
|
||||
- link "JE i South Africa" [ref=e159] [cursor=pointer]:
|
||||
- /url: index.html
|
||||
- generic [ref=e160]: JE
|
||||
- generic [ref=e161]: i
|
||||
- generic [ref=e162]: South Africa
|
||||
- paragraph [ref=e163]: Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).
|
||||
- generic [ref=e164]:
|
||||
- heading "Products" [level=4] [ref=e165]
|
||||
- list [ref=e166]:
|
||||
- listitem [ref=e167]:
|
||||
- link "Magnetic drills" [ref=e168] [cursor=pointer]:
|
||||
- /url: products.html#drills
|
||||
- listitem [ref=e169]:
|
||||
- link "Annular cutters" [ref=e170] [cursor=pointer]:
|
||||
- /url: products.html#cutters
|
||||
- listitem [ref=e171]:
|
||||
- link "Cordless" [ref=e172] [cursor=pointer]:
|
||||
- /url: products.html#cordless
|
||||
- listitem [ref=e173]:
|
||||
- link "Fabrication" [ref=e174] [cursor=pointer]:
|
||||
- /url: products.html#fabrication
|
||||
- listitem [ref=e175]:
|
||||
- link "Accessories" [ref=e176] [cursor=pointer]:
|
||||
- /url: products.html#accessories
|
||||
- generic [ref=e177]:
|
||||
- heading "Company" [level=4] [ref=e178]
|
||||
- list [ref=e179]:
|
||||
- listitem [ref=e180]:
|
||||
- link "About JEI ZA" [ref=e181] [cursor=pointer]:
|
||||
- /url: about.html
|
||||
- listitem [ref=e182]:
|
||||
- link "Industries" [ref=e183] [cursor=pointer]:
|
||||
- /url: index.html#industries
|
||||
- listitem [ref=e184]:
|
||||
- link "JEI UK partner" [ref=e185] [cursor=pointer]:
|
||||
- /url: about.html#uk-partner
|
||||
- listitem [ref=e186]:
|
||||
- link "Quality & warranty" [ref=e187] [cursor=pointer]:
|
||||
- /url: about.html#quality
|
||||
- generic [ref=e188]:
|
||||
- heading "Contact" [level=4] [ref=e189]
|
||||
- list [ref=e190]:
|
||||
- listitem [ref=e191]:
|
||||
- link "Request a quote" [ref=e192] [cursor=pointer]:
|
||||
- /url: contact.html
|
||||
- listitem [ref=e193]:
|
||||
- link "+27 (0)11 555 0100" [ref=e194] [cursor=pointer]:
|
||||
- /url: tel:+27115550100
|
||||
- listitem [ref=e195]:
|
||||
- link "sales@jei.co.za" [ref=e196] [cursor=pointer]:
|
||||
- /url: mailto:sales@jei.co.za
|
||||
- listitem [ref=e197]:
|
||||
- link "WhatsApp" [ref=e198] [cursor=pointer]:
|
||||
- /url: https://wa.me/27715550100
|
||||
- generic [ref=e199]:
|
||||
- generic [ref=e200]: © 2026 JEI South Africa
|
||||
- generic [ref=e201]: EN · ZAR
|
||||
221
.playwright-mcp/page-2026-06-13T16-04-44-535Z.yml
Normal file
221
.playwright-mcp/page-2026-06-13T16-04-44-535Z.yml
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
- generic [active] [ref=e1]:
|
||||
- banner [ref=e2]:
|
||||
- generic [ref=e3]:
|
||||
- link "JE i South Africa · Built for Industry" [ref=e4] [cursor=pointer]:
|
||||
- /url: index.html
|
||||
- generic [ref=e5]: JE
|
||||
- generic [ref=e6]: i
|
||||
- generic [ref=e7]: South Africa · Built for Industry
|
||||
- navigation "Primary" [ref=e8]:
|
||||
- link "Products" [ref=e9] [cursor=pointer]:
|
||||
- /url: products.html
|
||||
- link "Industries" [ref=e10] [cursor=pointer]:
|
||||
- /url: index.html#industries
|
||||
- link "About" [ref=e11] [cursor=pointer]:
|
||||
- /url: about.html
|
||||
- link "Contact" [ref=e12] [cursor=pointer]:
|
||||
- /url: contact.html
|
||||
- link "Request a quote" [ref=e13] [cursor=pointer]:
|
||||
- /url: contact.html
|
||||
- generic [ref=e15]:
|
||||
- generic [ref=e16]:
|
||||
- link "Home" [ref=e17] [cursor=pointer]:
|
||||
- /url: index.html
|
||||
- text: / About
|
||||
- heading "The local partner of JEI Solutions (UK) — stocked in South Africa." [level=1] [ref=e18]
|
||||
- paragraph [ref=e19]: JEI South Africa distributes and supports the JEI range of magnetic drilling machines, annular cutters, and fabrication tooling. Same engineering pedigree as the UK parent, with a Johannesburg warehouse and a Cape Town depot.
|
||||
- generic [ref=e21]:
|
||||
- generic [ref=e22]:
|
||||
- generic [ref=e23]:
|
||||
- paragraph [ref=e24]: The company
|
||||
- heading "Built for industry. Stocked in South Africa." [level=2] [ref=e25]
|
||||
- paragraph [ref=e26]: JEI South Africa was set up to give South African fabricators direct local access to the JEI range — without the lead time and shipping cost of importing from the UK on every order.
|
||||
- generic [ref=e27]:
|
||||
- generic [ref=e28]:
|
||||
- paragraph [ref=e29]:
|
||||
- text: JEI Solutions (UK) is one of the UK's leading specialists in magnetic drilling and annular cutting, with a catalogue that includes the MagBeast
|
||||
- superscript [ref=e30]: ®
|
||||
- text: HM Range, MiniBeast™ Cordless, the Turbo™ cutter line, and a broad fabrication range. For twenty-plus years the UK team has built tooling for steel fabrication, rail, energy, defence and heavy engineering.
|
||||
- paragraph [ref=e31]: JEI South Africa is the authorised local partner — same machines, same warranties, same engineering standard, but with stock on the ground, technical support in SA time zones, and pricing in ZAR. We carry the best-selling machines, the high-turnover cutter sizes, and the consumables that fabricators burn through week-to-week.
|
||||
- paragraph [ref=e32]: We don't make the machines. We make sure that when a mag drill goes down on a Tuesday afternoon, the replacement is in the post that night, and the technician on the phone knows the difference between a Turbo Tough TCT and an HSS-Co reamer.
|
||||
- complementary [ref=e33]:
|
||||
- heading "At a glance" [level=3] [ref=e34]
|
||||
- generic [ref=e35]:
|
||||
- generic [ref=e36]: Parent
|
||||
- generic [ref=e37]: JEI Solutions Ltd (UK)
|
||||
- generic [ref=e38]:
|
||||
- generic [ref=e39]: Established
|
||||
- generic [ref=e40]: 2018 (ZA ops)
|
||||
- generic [ref=e41]:
|
||||
- generic [ref=e42]: HQ
|
||||
- generic [ref=e43]: Johannesburg, GP
|
||||
- generic [ref=e44]:
|
||||
- generic [ref=e45]: Depot
|
||||
- generic [ref=e46]: Cape Town, WC
|
||||
- generic [ref=e47]:
|
||||
- generic [ref=e48]: SA rep
|
||||
- generic [ref=e49]: Gary Isherwood · WFSales
|
||||
- generic [ref=e50]:
|
||||
- generic [ref=e51]: Coverage
|
||||
- generic [ref=e52]: National · SADC on request
|
||||
- generic [ref=e53]:
|
||||
- generic [ref=e54]: Quality
|
||||
- generic [ref=e55]: ISO 9001 (UK parent)
|
||||
- generic [ref=e56]:
|
||||
- generic [ref=e57]: Currency
|
||||
- generic [ref=e58]: ZAR
|
||||
- generic [ref=e59]:
|
||||
- generic [ref=e60]: Language
|
||||
- generic [ref=e61]: English (Afrikaans on request)
|
||||
- generic [ref=e63]:
|
||||
- generic [ref=e64]:
|
||||
- generic [ref=e65]:
|
||||
- paragraph [ref=e66]: Capacity
|
||||
- heading "Stock, dispatch, and technical reach" [level=2] [ref=e67]
|
||||
- paragraph [ref=e68]: Indicative figures for the JEI South Africa operation. Volume stock is held against rolling demand; lead-time figures below are typical, not contractual.
|
||||
- generic [ref=e69]:
|
||||
- generic [ref=e70]:
|
||||
- generic [ref=e71]: R 4.2M
|
||||
- generic [ref=e72]: Stock on the floor
|
||||
- generic [ref=e73]:
|
||||
- generic [ref=e74]: 320+
|
||||
- generic [ref=e75]: Active SKUs (machines, cutters, spares)
|
||||
- generic [ref=e76]:
|
||||
- generic [ref=e77]: 24–72h
|
||||
- generic [ref=e78]: Dispatch Gauteng / national
|
||||
- generic [ref=e79]:
|
||||
- generic [ref=e80]: "3"
|
||||
- generic [ref=e81]: JEI-trained service technicians
|
||||
- generic [ref=e83]:
|
||||
- generic [ref=e84]:
|
||||
- generic [ref=e85]:
|
||||
- paragraph [ref=e86]: Service areas
|
||||
- heading "Where we work, where we go" [level=2] [ref=e87]
|
||||
- paragraph [ref=e88]: Most of our work is Gauteng-based fabrication and mining maintenance, with a growing share of Western Cape structural and rail work. Site visits and on-site demos by appointment.
|
||||
- generic [ref=e89]:
|
||||
- generic [ref=e90]:
|
||||
- generic [ref=e91]: HQ · Warehouse
|
||||
- heading "Johannesburg, Gauteng" [level=3] [ref=e92]
|
||||
- paragraph [ref=e93]: Main warehouse and technical support. Stocking the full MagBeast, MiniBeast and Turbo lines, plus consumables. Walk-in collections by appointment.
|
||||
- generic [ref=e94]: Next-day dispatch · GP, NW, MP, LP
|
||||
- generic [ref=e95]:
|
||||
- generic [ref=e96]: Depot
|
||||
- heading "Cape Town, Western Cape" [level=3] [ref=e97]
|
||||
- paragraph [ref=e98]: Depot for Western Cape, Northern Cape and Southern Cape. Cutter stock and pilot pins; machines dispatched ex-JHB within 48h.
|
||||
- generic [ref=e99]: 48h dispatch · WC, NC, EC-south
|
||||
- generic [ref=e100]:
|
||||
- generic [ref=e101]: Depot
|
||||
- heading "Durban, KwaZulu-Natal" [level=3] [ref=e102]
|
||||
- paragraph [ref=e103]: Depot for KZN and Eastern Cape (north of Gqeberha). Used for petrochemical and shipping-shore-side fabrication customers.
|
||||
- generic [ref=e104]: 48–72h dispatch · KZN, EC-north
|
||||
- generic [ref=e105]:
|
||||
- generic [ref=e106]: On-site
|
||||
- heading "Mining & heavy industry" [level=3] [ref=e107]
|
||||
- paragraph [ref=e108]: Site visits for on-site commissioning, application trials, and operator training. Available to mines, smelters and process plants nationwide.
|
||||
- generic [ref=e109]: By appointment · Limpopo, NW, MP, FS
|
||||
- generic [ref=e110]:
|
||||
- generic [ref=e111]: Partner
|
||||
- heading "Rail · Transnet / PRASA" [level=3] [ref=e112]
|
||||
- paragraph [ref=e113]: Working with rail maintenance contractors on fishplate renewal, turnout machining, and depot equipment. Railbeast™ range held in stock.
|
||||
- generic [ref=e114]: Project-based · National
|
||||
- generic [ref=e115]:
|
||||
- generic [ref=e116]: Export
|
||||
- heading "SADC & rest of Africa" [level=3] [ref=e117]
|
||||
- paragraph [ref=e118]: Cross-border supply into Namibia, Botswana, Mozambique, Zambia, and the DRC. Customs documentation and SARS VAT handling included.
|
||||
- generic [ref=e119]: On request · SADC, EAC
|
||||
- generic [ref=e121]:
|
||||
- generic [ref=e122]:
|
||||
- generic [ref=e123]:
|
||||
- paragraph [ref=e124]: Quality & warranty
|
||||
- heading "ISO 9001 standard, 12-month machine warranty." [level=2] [ref=e125]
|
||||
- paragraph [ref=e126]: JEI Solutions (UK) is ISO 9001:2015 certified, and that standard is the floor for JEI South Africa. Machine warranty is 12 months from invoice; cutters and consumables carry a separate, fair-wear-and-tear policy.
|
||||
- generic [ref=e127]:
|
||||
- list [ref=e128]:
|
||||
- listitem [ref=e129]:
|
||||
- heading "ISO 9001:2015 (UK parent)" [level=4] [ref=e130]
|
||||
- paragraph [ref=e131]: Quality management system audited annually. JEI South Africa operates to the same standard — documented incoming inspection, machine testing, and traceability on every cutter sold.
|
||||
- listitem [ref=e132]:
|
||||
- heading "12-month machine warranty" [level=4] [ref=e133]
|
||||
- paragraph [ref=e134]: All JEI mag drills carry a 12-month warranty from invoice date. Warranty handled in JHB — no need to ship back to the UK. Loan units available for warranty claims exceeding 5 working days.
|
||||
- listitem [ref=e135]:
|
||||
- heading "Authorised partner status" [level=4] [ref=e136]
|
||||
- paragraph [ref=e137]: JEI South Africa is the only authorised JEI distributor in the country. Customers buying from us get the same warranty, the same spares, and the same engineering support as customers in the UK.
|
||||
- listitem [ref=e138]:
|
||||
- heading "Counterfeit avoidance" [level=4] [ref=e139]
|
||||
- paragraph [ref=e140]: JEI mag drills and cutters are regularly counterfeited in the Far East. Every machine we sell is sourced directly from the UK parent, with serial-number traceability back to Burnley.
|
||||
- complementary [ref=e141]:
|
||||
- heading "What \"ISO 9001 in practice\" means here" [level=3] [ref=e142]
|
||||
- paragraph [ref=e143]: Every machine is bench-tested before dispatch — magnet pull test, no-load current, ground continuity, guard function. Test sheet goes in the box with the machine. Cutter batches are sampled on receipt and dimensional records kept for 7 years. If a job goes wrong, we can pull the test sheet for the machine that did the cutting.
|
||||
- generic [ref=e145]:
|
||||
- generic [ref=e146]:
|
||||
- paragraph [ref=e147]: Get in touch
|
||||
- heading "Speak to a JEI-trained technician." [level=2] [ref=e148]
|
||||
- paragraph [ref=e149]: Application advice, cutter selection, machine comparison — call us, WhatsApp us, or fill in the form. We come back the same business day.
|
||||
- generic [ref=e150]:
|
||||
- link "Request a quote" [ref=e151] [cursor=pointer]:
|
||||
- /url: contact.html
|
||||
- text: Request a quote
|
||||
- img [ref=e152]
|
||||
- link "Browse products" [ref=e154] [cursor=pointer]:
|
||||
- /url: products.html
|
||||
- contentinfo [ref=e155]:
|
||||
- generic [ref=e156]:
|
||||
- generic [ref=e157]:
|
||||
- generic [ref=e158]:
|
||||
- link "JE i South Africa" [ref=e159] [cursor=pointer]:
|
||||
- /url: index.html
|
||||
- generic [ref=e160]: JE
|
||||
- generic [ref=e161]: i
|
||||
- generic [ref=e162]: South Africa
|
||||
- paragraph [ref=e163]: Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).
|
||||
- generic [ref=e164]:
|
||||
- heading "Products" [level=4] [ref=e165]
|
||||
- list [ref=e166]:
|
||||
- listitem [ref=e167]:
|
||||
- link "Magnetic drills" [ref=e168] [cursor=pointer]:
|
||||
- /url: products.html#drills
|
||||
- listitem [ref=e169]:
|
||||
- link "Annular cutters" [ref=e170] [cursor=pointer]:
|
||||
- /url: products.html#cutters
|
||||
- listitem [ref=e171]:
|
||||
- link "Cordless" [ref=e172] [cursor=pointer]:
|
||||
- /url: products.html#cordless
|
||||
- listitem [ref=e173]:
|
||||
- link "Fabrication" [ref=e174] [cursor=pointer]:
|
||||
- /url: products.html#fabrication
|
||||
- listitem [ref=e175]:
|
||||
- link "Accessories" [ref=e176] [cursor=pointer]:
|
||||
- /url: products.html#accessories
|
||||
- generic [ref=e177]:
|
||||
- heading "Company" [level=4] [ref=e178]
|
||||
- list [ref=e179]:
|
||||
- listitem [ref=e180]:
|
||||
- link "About JEI ZA" [ref=e181] [cursor=pointer]:
|
||||
- /url: about.html
|
||||
- listitem [ref=e182]:
|
||||
- link "Industries" [ref=e183] [cursor=pointer]:
|
||||
- /url: index.html#industries
|
||||
- listitem [ref=e184]:
|
||||
- link "JEI UK partner" [ref=e185] [cursor=pointer]:
|
||||
- /url: about.html#uk-partner
|
||||
- listitem [ref=e186]:
|
||||
- link "Quality & warranty" [ref=e187] [cursor=pointer]:
|
||||
- /url: about.html#quality
|
||||
- generic [ref=e188]:
|
||||
- heading "Contact" [level=4] [ref=e189]
|
||||
- list [ref=e190]:
|
||||
- listitem [ref=e191]:
|
||||
- link "Request a quote" [ref=e192] [cursor=pointer]:
|
||||
- /url: contact.html
|
||||
- listitem [ref=e193]:
|
||||
- link "+27 (0)11 555 0100" [ref=e194] [cursor=pointer]:
|
||||
- /url: tel:+27115550100
|
||||
- listitem [ref=e195]:
|
||||
- link "sales@jei.co.za" [ref=e196] [cursor=pointer]:
|
||||
- /url: mailto:sales@jei.co.za
|
||||
- listitem [ref=e197]:
|
||||
- link "WhatsApp" [ref=e198] [cursor=pointer]:
|
||||
- /url: https://wa.me/27715550100
|
||||
- generic [ref=e199]:
|
||||
- generic [ref=e200]: © 2026 JEI South Africa
|
||||
- generic [ref=e201]: EN · ZAR
|
||||
221
.playwright-mcp/page-2026-06-13T16-06-41-640Z.yml
Normal file
221
.playwright-mcp/page-2026-06-13T16-06-41-640Z.yml
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
- generic [active] [ref=e1]:
|
||||
- banner [ref=e2]:
|
||||
- generic [ref=e3]:
|
||||
- link "JE i South Africa · Built for Industry" [ref=e4] [cursor=pointer]:
|
||||
- /url: index.html
|
||||
- generic [ref=e5]: JE
|
||||
- generic [ref=e6]: i
|
||||
- generic [ref=e7]: South Africa · Built for Industry
|
||||
- navigation "Primary" [ref=e8]:
|
||||
- link "Products" [ref=e9] [cursor=pointer]:
|
||||
- /url: products.html
|
||||
- link "Industries" [ref=e10] [cursor=pointer]:
|
||||
- /url: index.html#industries
|
||||
- link "About" [ref=e11] [cursor=pointer]:
|
||||
- /url: about.html
|
||||
- link "Contact" [ref=e12] [cursor=pointer]:
|
||||
- /url: contact.html
|
||||
- link "Request a quote" [ref=e13] [cursor=pointer]:
|
||||
- /url: contact.html
|
||||
- generic [ref=e15]:
|
||||
- generic [ref=e16]:
|
||||
- link "Home" [ref=e17] [cursor=pointer]:
|
||||
- /url: index.html
|
||||
- text: / About
|
||||
- heading "The local partner of JEI Solutions (UK) — stocked in South Africa." [level=1] [ref=e18]
|
||||
- paragraph [ref=e19]: JEI South Africa distributes and supports the JEI range of magnetic drilling machines, annular cutters, and fabrication tooling. Same engineering pedigree as the UK parent, with a Johannesburg warehouse and a Cape Town depot.
|
||||
- generic [ref=e21]:
|
||||
- generic [ref=e22]:
|
||||
- generic [ref=e23]:
|
||||
- paragraph [ref=e24]: The company
|
||||
- heading "Built for industry. Stocked in South Africa." [level=2] [ref=e25]
|
||||
- paragraph [ref=e26]: JEI South Africa was set up to give South African fabricators direct local access to the JEI range — without the lead time and shipping cost of importing from the UK on every order.
|
||||
- generic [ref=e27]:
|
||||
- generic [ref=e28]:
|
||||
- paragraph [ref=e29]:
|
||||
- text: JEI Solutions (UK) is one of the UK's leading specialists in magnetic drilling and annular cutting, with a catalogue that includes the MagBeast
|
||||
- superscript [ref=e30]: ®
|
||||
- text: HM Range, MiniBeast™ Cordless, the Turbo™ cutter line, and a broad fabrication range. For twenty-plus years the UK team has built tooling for steel fabrication, rail, energy, defence and heavy engineering.
|
||||
- paragraph [ref=e31]: JEI South Africa is the authorised local partner — same machines, same warranties, same engineering standard, but with stock on the ground, technical support in SA time zones, and pricing in ZAR. We carry the best-selling machines, the high-turnover cutter sizes, and the consumables that fabricators burn through week-to-week.
|
||||
- paragraph [ref=e32]: We don't make the machines. We make sure that when a mag drill goes down on a Tuesday afternoon, the replacement is in the post that night, and the technician on the phone knows the difference between a Turbo Tough TCT and an HSS-Co reamer.
|
||||
- complementary [ref=e33]:
|
||||
- heading "At a glance" [level=3] [ref=e34]
|
||||
- generic [ref=e35]:
|
||||
- generic [ref=e36]: Parent
|
||||
- generic [ref=e37]: JEI Solutions Ltd (UK)
|
||||
- generic [ref=e38]:
|
||||
- generic [ref=e39]: Established
|
||||
- generic [ref=e40]: 2018 (ZA ops)
|
||||
- generic [ref=e41]:
|
||||
- generic [ref=e42]: HQ
|
||||
- generic [ref=e43]: Johannesburg, GP
|
||||
- generic [ref=e44]:
|
||||
- generic [ref=e45]: Depot
|
||||
- generic [ref=e46]: Cape Town, WC
|
||||
- generic [ref=e47]:
|
||||
- generic [ref=e48]: SA rep
|
||||
- generic [ref=e49]: Gary Isherwood · WFSales
|
||||
- generic [ref=e50]:
|
||||
- generic [ref=e51]: Coverage
|
||||
- generic [ref=e52]: National · SADC on request
|
||||
- generic [ref=e53]:
|
||||
- generic [ref=e54]: Quality
|
||||
- generic [ref=e55]: ISO 9001 (UK parent)
|
||||
- generic [ref=e56]:
|
||||
- generic [ref=e57]: Currency
|
||||
- generic [ref=e58]: ZAR
|
||||
- generic [ref=e59]:
|
||||
- generic [ref=e60]: Language
|
||||
- generic [ref=e61]: English (Afrikaans on request)
|
||||
- generic [ref=e63]:
|
||||
- generic [ref=e64]:
|
||||
- generic [ref=e65]:
|
||||
- paragraph [ref=e66]: Capacity
|
||||
- heading "Stock, dispatch, and technical reach" [level=2] [ref=e67]
|
||||
- paragraph [ref=e68]: Indicative figures for the JEI South Africa operation. Volume stock is held against rolling demand; lead-time figures below are typical, not contractual.
|
||||
- generic [ref=e69]:
|
||||
- generic [ref=e70]:
|
||||
- generic [ref=e71]: R 4.2M
|
||||
- generic [ref=e72]: Stock on the floor
|
||||
- generic [ref=e73]:
|
||||
- generic [ref=e74]: 320+
|
||||
- generic [ref=e75]: Active SKUs (machines, cutters, spares)
|
||||
- generic [ref=e76]:
|
||||
- generic [ref=e77]: 24–72h
|
||||
- generic [ref=e78]: Dispatch Gauteng / national
|
||||
- generic [ref=e79]:
|
||||
- generic [ref=e80]: "3"
|
||||
- generic [ref=e81]: JEI-trained service technicians
|
||||
- generic [ref=e83]:
|
||||
- generic [ref=e84]:
|
||||
- generic [ref=e85]:
|
||||
- paragraph [ref=e86]: Service areas
|
||||
- heading "Where we work, where we go" [level=2] [ref=e87]
|
||||
- paragraph [ref=e88]: Most of our work is Gauteng-based fabrication and mining maintenance, with a growing share of Western Cape structural and rail work. Site visits and on-site demos by appointment.
|
||||
- generic [ref=e89]:
|
||||
- generic [ref=e90]:
|
||||
- generic [ref=e91]: HQ · Warehouse
|
||||
- heading "Johannesburg, Gauteng" [level=3] [ref=e92]
|
||||
- paragraph [ref=e93]: Main warehouse and technical support. Stocking the full MagBeast, MiniBeast and Turbo lines, plus consumables. Walk-in collections by appointment.
|
||||
- generic [ref=e94]: Next-day dispatch · GP, NW, MP, LP
|
||||
- generic [ref=e95]:
|
||||
- generic [ref=e96]: Depot
|
||||
- heading "Cape Town, Western Cape" [level=3] [ref=e97]
|
||||
- paragraph [ref=e98]: Depot for Western Cape, Northern Cape and Southern Cape. Cutter stock and pilot pins; machines dispatched ex-JHB within 48h.
|
||||
- generic [ref=e99]: 48h dispatch · WC, NC, EC-south
|
||||
- generic [ref=e100]:
|
||||
- generic [ref=e101]: Depot
|
||||
- heading "Durban, KwaZulu-Natal" [level=3] [ref=e102]
|
||||
- paragraph [ref=e103]: Depot for KZN and Eastern Cape (north of Gqeberha). Used for petrochemical and shipping-shore-side fabrication customers.
|
||||
- generic [ref=e104]: 48–72h dispatch · KZN, EC-north
|
||||
- generic [ref=e105]:
|
||||
- generic [ref=e106]: On-site
|
||||
- heading "Mining & heavy industry" [level=3] [ref=e107]
|
||||
- paragraph [ref=e108]: Site visits for on-site commissioning, application trials, and operator training. Available to mines, smelters and process plants nationwide.
|
||||
- generic [ref=e109]: By appointment · Limpopo, NW, MP, FS
|
||||
- generic [ref=e110]:
|
||||
- generic [ref=e111]: Partner
|
||||
- heading "Rail · Transnet / PRASA" [level=3] [ref=e112]
|
||||
- paragraph [ref=e113]: Working with rail maintenance contractors on fishplate renewal, turnout machining, and depot equipment. Railbeast™ range held in stock.
|
||||
- generic [ref=e114]: Project-based · National
|
||||
- generic [ref=e115]:
|
||||
- generic [ref=e116]: Export
|
||||
- heading "SADC & rest of Africa" [level=3] [ref=e117]
|
||||
- paragraph [ref=e118]: Cross-border supply into Namibia, Botswana, Mozambique, Zambia, and the DRC. Customs documentation and SARS VAT handling included.
|
||||
- generic [ref=e119]: On request · SADC, EAC
|
||||
- generic [ref=e121]:
|
||||
- generic [ref=e122]:
|
||||
- generic [ref=e123]:
|
||||
- paragraph [ref=e124]: Quality & warranty
|
||||
- heading "ISO 9001 standard, 12-month machine warranty." [level=2] [ref=e125]
|
||||
- paragraph [ref=e126]: JEI Solutions (UK) is ISO 9001:2015 certified, and that standard is the floor for JEI South Africa. Machine warranty is 12 months from invoice; cutters and consumables carry a separate, fair-wear-and-tear policy.
|
||||
- generic [ref=e127]:
|
||||
- list [ref=e128]:
|
||||
- listitem [ref=e129]:
|
||||
- heading "ISO 9001:2015 (UK parent)" [level=4] [ref=e130]
|
||||
- paragraph [ref=e131]: Quality management system audited annually. JEI South Africa operates to the same standard — documented incoming inspection, machine testing, and traceability on every cutter sold.
|
||||
- listitem [ref=e132]:
|
||||
- heading "12-month machine warranty" [level=4] [ref=e133]
|
||||
- paragraph [ref=e134]: All JEI mag drills carry a 12-month warranty from invoice date. Warranty handled in JHB — no need to ship back to the UK. Loan units available for warranty claims exceeding 5 working days.
|
||||
- listitem [ref=e135]:
|
||||
- heading "Authorised partner status" [level=4] [ref=e136]
|
||||
- paragraph [ref=e137]: JEI South Africa is the only authorised JEI distributor in the country. Customers buying from us get the same warranty, the same spares, and the same engineering support as customers in the UK.
|
||||
- listitem [ref=e138]:
|
||||
- heading "Counterfeit avoidance" [level=4] [ref=e139]
|
||||
- paragraph [ref=e140]: JEI mag drills and cutters are regularly counterfeited in the Far East. Every machine we sell is sourced directly from the UK parent, with serial-number traceability back to Burnley.
|
||||
- complementary [ref=e141]:
|
||||
- heading "What \"ISO 9001 in practice\" means here" [level=3] [ref=e142]
|
||||
- paragraph [ref=e143]: Every machine is bench-tested before dispatch — magnet pull test, no-load current, ground continuity, guard function. Test sheet goes in the box with the machine. Cutter batches are sampled on receipt and dimensional records kept for 7 years. If a job goes wrong, we can pull the test sheet for the machine that did the cutting.
|
||||
- generic [ref=e145]:
|
||||
- generic [ref=e146]:
|
||||
- paragraph [ref=e147]: Get in touch
|
||||
- heading "Speak to a JEI-trained technician." [level=2] [ref=e148]
|
||||
- paragraph [ref=e149]: Application advice, cutter selection, machine comparison — call us, WhatsApp us, or fill in the form. We come back the same business day.
|
||||
- generic [ref=e150]:
|
||||
- link "Request a quote" [ref=e151] [cursor=pointer]:
|
||||
- /url: contact.html
|
||||
- text: Request a quote
|
||||
- img [ref=e152]
|
||||
- link "Browse products" [ref=e154] [cursor=pointer]:
|
||||
- /url: products.html
|
||||
- contentinfo [ref=e155]:
|
||||
- generic [ref=e156]:
|
||||
- generic [ref=e157]:
|
||||
- generic [ref=e158]:
|
||||
- link "JE i South Africa" [ref=e159] [cursor=pointer]:
|
||||
- /url: index.html
|
||||
- generic [ref=e160]: JE
|
||||
- generic [ref=e161]: i
|
||||
- generic [ref=e162]: South Africa
|
||||
- paragraph [ref=e163]: Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).
|
||||
- generic [ref=e164]:
|
||||
- heading "Products" [level=4] [ref=e165]
|
||||
- list [ref=e166]:
|
||||
- listitem [ref=e167]:
|
||||
- link "Magnetic drills" [ref=e168] [cursor=pointer]:
|
||||
- /url: products.html#drills
|
||||
- listitem [ref=e169]:
|
||||
- link "Annular cutters" [ref=e170] [cursor=pointer]:
|
||||
- /url: products.html#cutters
|
||||
- listitem [ref=e171]:
|
||||
- link "Cordless" [ref=e172] [cursor=pointer]:
|
||||
- /url: products.html#cordless
|
||||
- listitem [ref=e173]:
|
||||
- link "Fabrication" [ref=e174] [cursor=pointer]:
|
||||
- /url: products.html#fabrication
|
||||
- listitem [ref=e175]:
|
||||
- link "Accessories" [ref=e176] [cursor=pointer]:
|
||||
- /url: products.html#accessories
|
||||
- generic [ref=e177]:
|
||||
- heading "Company" [level=4] [ref=e178]
|
||||
- list [ref=e179]:
|
||||
- listitem [ref=e180]:
|
||||
- link "About JEI ZA" [ref=e181] [cursor=pointer]:
|
||||
- /url: about.html
|
||||
- listitem [ref=e182]:
|
||||
- link "Industries" [ref=e183] [cursor=pointer]:
|
||||
- /url: index.html#industries
|
||||
- listitem [ref=e184]:
|
||||
- link "JEI UK partner" [ref=e185] [cursor=pointer]:
|
||||
- /url: about.html#uk-partner
|
||||
- listitem [ref=e186]:
|
||||
- link "Quality & warranty" [ref=e187] [cursor=pointer]:
|
||||
- /url: about.html#quality
|
||||
- generic [ref=e188]:
|
||||
- heading "Contact" [level=4] [ref=e189]
|
||||
- list [ref=e190]:
|
||||
- listitem [ref=e191]:
|
||||
- link "Request a quote" [ref=e192] [cursor=pointer]:
|
||||
- /url: contact.html
|
||||
- listitem [ref=e193]:
|
||||
- link "+27 (0)11 555 0100" [ref=e194] [cursor=pointer]:
|
||||
- /url: tel:+27115550100
|
||||
- listitem [ref=e195]:
|
||||
- link "sales@jei.co.za" [ref=e196] [cursor=pointer]:
|
||||
- /url: mailto:sales@jei.co.za
|
||||
- listitem [ref=e197]:
|
||||
- link "WhatsApp" [ref=e198] [cursor=pointer]:
|
||||
- /url: https://wa.me/27715550100
|
||||
- generic [ref=e199]:
|
||||
- generic [ref=e200]: © 2026 JEI South Africa
|
||||
- generic [ref=e201]: EN · ZAR
|
||||
221
.playwright-mcp/page-2026-06-13T16-07-27-270Z.yml
Normal file
221
.playwright-mcp/page-2026-06-13T16-07-27-270Z.yml
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
- generic [active] [ref=e1]:
|
||||
- banner [ref=e2]:
|
||||
- generic [ref=e3]:
|
||||
- link "JE i South Africa · Built for Industry" [ref=e4] [cursor=pointer]:
|
||||
- /url: index.html
|
||||
- generic [ref=e5]: JE
|
||||
- generic [ref=e6]: i
|
||||
- generic [ref=e7]: South Africa · Built for Industry
|
||||
- navigation "Primary" [ref=e8]:
|
||||
- link "Products" [ref=e9] [cursor=pointer]:
|
||||
- /url: products.html
|
||||
- link "Industries" [ref=e10] [cursor=pointer]:
|
||||
- /url: index.html#industries
|
||||
- link "About" [ref=e11] [cursor=pointer]:
|
||||
- /url: about.html
|
||||
- link "Contact" [ref=e12] [cursor=pointer]:
|
||||
- /url: contact.html
|
||||
- link "Request a quote" [ref=e13] [cursor=pointer]:
|
||||
- /url: contact.html
|
||||
- generic [ref=e15]:
|
||||
- generic [ref=e16]:
|
||||
- link "Home" [ref=e17] [cursor=pointer]:
|
||||
- /url: index.html
|
||||
- text: / About
|
||||
- heading "The local partner of JEI Solutions (UK) — stocked in South Africa." [level=1] [ref=e18]
|
||||
- paragraph [ref=e19]: JEI South Africa distributes and supports the JEI range of magnetic drilling machines, annular cutters, and fabrication tooling. Same engineering pedigree as the UK parent, with a Johannesburg warehouse and a Cape Town depot.
|
||||
- generic [ref=e21]:
|
||||
- generic [ref=e22]:
|
||||
- generic [ref=e23]:
|
||||
- paragraph [ref=e24]: The company
|
||||
- heading "Built for industry. Stocked in South Africa." [level=2] [ref=e25]
|
||||
- paragraph [ref=e26]: JEI South Africa was set up to give South African fabricators direct local access to the JEI range — without the lead time and shipping cost of importing from the UK on every order.
|
||||
- generic [ref=e27]:
|
||||
- generic [ref=e28]:
|
||||
- paragraph [ref=e29]:
|
||||
- text: JEI Solutions (UK) is one of the UK's leading specialists in magnetic drilling and annular cutting, with a catalogue that includes the MagBeast
|
||||
- superscript [ref=e30]: ®
|
||||
- text: HM Range, MiniBeast™ Cordless, the Turbo™ cutter line, and a broad fabrication range. For twenty-plus years the UK team has built tooling for steel fabrication, rail, energy, defence and heavy engineering.
|
||||
- paragraph [ref=e31]: JEI South Africa is the authorised local partner — same machines, same warranties, same engineering standard, but with stock on the ground, technical support in SA time zones, and pricing in ZAR. We carry the best-selling machines, the high-turnover cutter sizes, and the consumables that fabricators burn through week-to-week.
|
||||
- paragraph [ref=e32]: We don't make the machines. We make sure that when a mag drill goes down on a Tuesday afternoon, the replacement is in the post that night, and the technician on the phone knows the difference between a Turbo Tough TCT and an HSS-Co reamer.
|
||||
- complementary [ref=e33]:
|
||||
- heading "At a glance" [level=3] [ref=e34]
|
||||
- generic [ref=e35]:
|
||||
- generic [ref=e36]: Parent
|
||||
- generic [ref=e37]: JEI Solutions Ltd (UK)
|
||||
- generic [ref=e38]:
|
||||
- generic [ref=e39]: Established
|
||||
- generic [ref=e40]: 2018 (ZA ops)
|
||||
- generic [ref=e41]:
|
||||
- generic [ref=e42]: HQ
|
||||
- generic [ref=e43]: Johannesburg, GP
|
||||
- generic [ref=e44]:
|
||||
- generic [ref=e45]: Depot
|
||||
- generic [ref=e46]: Cape Town, WC
|
||||
- generic [ref=e47]:
|
||||
- generic [ref=e48]: SA rep
|
||||
- generic [ref=e49]: Gary Isherwood · WFSales
|
||||
- generic [ref=e50]:
|
||||
- generic [ref=e51]: Coverage
|
||||
- generic [ref=e52]: National · SADC on request
|
||||
- generic [ref=e53]:
|
||||
- generic [ref=e54]: Quality
|
||||
- generic [ref=e55]: ISO 9001 (UK parent)
|
||||
- generic [ref=e56]:
|
||||
- generic [ref=e57]: Currency
|
||||
- generic [ref=e58]: ZAR
|
||||
- generic [ref=e59]:
|
||||
- generic [ref=e60]: Language
|
||||
- generic [ref=e61]: English (Afrikaans on request)
|
||||
- generic [ref=e63]:
|
||||
- generic [ref=e64]:
|
||||
- generic [ref=e65]:
|
||||
- paragraph [ref=e66]: Capacity
|
||||
- heading "Stock, dispatch, and technical reach" [level=2] [ref=e67]
|
||||
- paragraph [ref=e68]: Indicative figures for the JEI South Africa operation. Volume stock is held against rolling demand; lead-time figures below are typical, not contractual.
|
||||
- generic [ref=e69]:
|
||||
- generic [ref=e70]:
|
||||
- generic [ref=e71]: R 4.2M
|
||||
- generic [ref=e72]: Stock on the floor
|
||||
- generic [ref=e73]:
|
||||
- generic [ref=e74]: 320+
|
||||
- generic [ref=e75]: Active SKUs (machines, cutters, spares)
|
||||
- generic [ref=e76]:
|
||||
- generic [ref=e77]: 24–72h
|
||||
- generic [ref=e78]: Dispatch Gauteng / national
|
||||
- generic [ref=e79]:
|
||||
- generic [ref=e80]: "3"
|
||||
- generic [ref=e81]: JEI-trained service technicians
|
||||
- generic [ref=e83]:
|
||||
- generic [ref=e84]:
|
||||
- generic [ref=e85]:
|
||||
- paragraph [ref=e86]: Service areas
|
||||
- heading "Where we work, where we go" [level=2] [ref=e87]
|
||||
- paragraph [ref=e88]: Most of our work is Gauteng-based fabrication and mining maintenance, with a growing share of Western Cape structural and rail work. Site visits and on-site demos by appointment.
|
||||
- generic [ref=e89]:
|
||||
- generic [ref=e90]:
|
||||
- generic [ref=e91]: HQ · Warehouse
|
||||
- heading "Johannesburg, Gauteng" [level=3] [ref=e92]
|
||||
- paragraph [ref=e93]: Main warehouse and technical support. Stocking the full MagBeast, MiniBeast and Turbo lines, plus consumables. Walk-in collections by appointment.
|
||||
- generic [ref=e94]: Next-day dispatch · GP, NW, MP, LP
|
||||
- generic [ref=e95]:
|
||||
- generic [ref=e96]: Depot
|
||||
- heading "Cape Town, Western Cape" [level=3] [ref=e97]
|
||||
- paragraph [ref=e98]: Depot for Western Cape, Northern Cape and Southern Cape. Cutter stock and pilot pins; machines dispatched ex-JHB within 48h.
|
||||
- generic [ref=e99]: 48h dispatch · WC, NC, EC-south
|
||||
- generic [ref=e100]:
|
||||
- generic [ref=e101]: Depot
|
||||
- heading "Durban, KwaZulu-Natal" [level=3] [ref=e102]
|
||||
- paragraph [ref=e103]: Depot for KZN and Eastern Cape (north of Gqeberha). Used for petrochemical and shipping-shore-side fabrication customers.
|
||||
- generic [ref=e104]: 48–72h dispatch · KZN, EC-north
|
||||
- generic [ref=e105]:
|
||||
- generic [ref=e106]: On-site
|
||||
- heading "Mining & heavy industry" [level=3] [ref=e107]
|
||||
- paragraph [ref=e108]: Site visits for on-site commissioning, application trials, and operator training. Available to mines, smelters and process plants nationwide.
|
||||
- generic [ref=e109]: By appointment · Limpopo, NW, MP, FS
|
||||
- generic [ref=e110]:
|
||||
- generic [ref=e111]: Partner
|
||||
- heading "Rail · Transnet / PRASA" [level=3] [ref=e112]
|
||||
- paragraph [ref=e113]: Working with rail maintenance contractors on fishplate renewal, turnout machining, and depot equipment. Railbeast™ range held in stock.
|
||||
- generic [ref=e114]: Project-based · National
|
||||
- generic [ref=e115]:
|
||||
- generic [ref=e116]: Export
|
||||
- heading "SADC & rest of Africa" [level=3] [ref=e117]
|
||||
- paragraph [ref=e118]: Cross-border supply into Namibia, Botswana, Mozambique, Zambia, and the DRC. Customs documentation and SARS VAT handling included.
|
||||
- generic [ref=e119]: On request · SADC, EAC
|
||||
- generic [ref=e121]:
|
||||
- generic [ref=e122]:
|
||||
- generic [ref=e123]:
|
||||
- paragraph [ref=e124]: Quality & warranty
|
||||
- heading "ISO 9001 standard, 12-month machine warranty." [level=2] [ref=e125]
|
||||
- paragraph [ref=e126]: JEI Solutions (UK) is ISO 9001:2015 certified, and that standard is the floor for JEI South Africa. Machine warranty is 12 months from invoice; cutters and consumables carry a separate, fair-wear-and-tear policy.
|
||||
- generic [ref=e127]:
|
||||
- list [ref=e128]:
|
||||
- listitem [ref=e129]:
|
||||
- heading "ISO 9001:2015 (UK parent)" [level=4] [ref=e130]
|
||||
- paragraph [ref=e131]: Quality management system audited annually. JEI South Africa operates to the same standard — documented incoming inspection, machine testing, and traceability on every cutter sold.
|
||||
- listitem [ref=e132]:
|
||||
- heading "12-month machine warranty" [level=4] [ref=e133]
|
||||
- paragraph [ref=e134]: All JEI mag drills carry a 12-month warranty from invoice date. Warranty handled in JHB — no need to ship back to the UK. Loan units available for warranty claims exceeding 5 working days.
|
||||
- listitem [ref=e135]:
|
||||
- heading "Authorised partner status" [level=4] [ref=e136]
|
||||
- paragraph [ref=e137]: JEI South Africa is the only authorised JEI distributor in the country. Customers buying from us get the same warranty, the same spares, and the same engineering support as customers in the UK.
|
||||
- listitem [ref=e138]:
|
||||
- heading "Counterfeit avoidance" [level=4] [ref=e139]
|
||||
- paragraph [ref=e140]: JEI mag drills and cutters are regularly counterfeited in the Far East. Every machine we sell is sourced directly from the UK parent, with serial-number traceability back to Burnley.
|
||||
- complementary [ref=e141]:
|
||||
- heading "What \"ISO 9001 in practice\" means here" [level=3] [ref=e142]
|
||||
- paragraph [ref=e143]: Every machine is bench-tested before dispatch — magnet pull test, no-load current, ground continuity, guard function. Test sheet goes in the box with the machine. Cutter batches are sampled on receipt and dimensional records kept for 7 years. If a job goes wrong, we can pull the test sheet for the machine that did the cutting.
|
||||
- generic [ref=e145]:
|
||||
- generic [ref=e146]:
|
||||
- paragraph [ref=e147]: Get in touch
|
||||
- heading "Speak to a JEI-trained technician." [level=2] [ref=e148]
|
||||
- paragraph [ref=e149]: Application advice, cutter selection, machine comparison — call us, WhatsApp us, or fill in the form. We come back the same business day.
|
||||
- generic [ref=e150]:
|
||||
- link "Request a quote" [ref=e151] [cursor=pointer]:
|
||||
- /url: contact.html
|
||||
- text: Request a quote
|
||||
- img [ref=e152]
|
||||
- link "Browse products" [ref=e154] [cursor=pointer]:
|
||||
- /url: products.html
|
||||
- contentinfo [ref=e155]:
|
||||
- generic [ref=e156]:
|
||||
- generic [ref=e157]:
|
||||
- generic [ref=e158]:
|
||||
- link "JE i South Africa" [ref=e159] [cursor=pointer]:
|
||||
- /url: index.html
|
||||
- generic [ref=e160]: JE
|
||||
- generic [ref=e161]: i
|
||||
- generic [ref=e162]: South Africa
|
||||
- paragraph [ref=e163]: Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).
|
||||
- generic [ref=e164]:
|
||||
- heading "Products" [level=4] [ref=e165]
|
||||
- list [ref=e166]:
|
||||
- listitem [ref=e167]:
|
||||
- link "Magnetic drills" [ref=e168] [cursor=pointer]:
|
||||
- /url: products.html#drills
|
||||
- listitem [ref=e169]:
|
||||
- link "Annular cutters" [ref=e170] [cursor=pointer]:
|
||||
- /url: products.html#cutters
|
||||
- listitem [ref=e171]:
|
||||
- link "Cordless" [ref=e172] [cursor=pointer]:
|
||||
- /url: products.html#cordless
|
||||
- listitem [ref=e173]:
|
||||
- link "Fabrication" [ref=e174] [cursor=pointer]:
|
||||
- /url: products.html#fabrication
|
||||
- listitem [ref=e175]:
|
||||
- link "Accessories" [ref=e176] [cursor=pointer]:
|
||||
- /url: products.html#accessories
|
||||
- generic [ref=e177]:
|
||||
- heading "Company" [level=4] [ref=e178]
|
||||
- list [ref=e179]:
|
||||
- listitem [ref=e180]:
|
||||
- link "About JEI ZA" [ref=e181] [cursor=pointer]:
|
||||
- /url: about.html
|
||||
- listitem [ref=e182]:
|
||||
- link "Industries" [ref=e183] [cursor=pointer]:
|
||||
- /url: index.html#industries
|
||||
- listitem [ref=e184]:
|
||||
- link "JEI UK partner" [ref=e185] [cursor=pointer]:
|
||||
- /url: about.html#uk-partner
|
||||
- listitem [ref=e186]:
|
||||
- link "Quality & warranty" [ref=e187] [cursor=pointer]:
|
||||
- /url: about.html#quality
|
||||
- generic [ref=e188]:
|
||||
- heading "Contact" [level=4] [ref=e189]
|
||||
- list [ref=e190]:
|
||||
- listitem [ref=e191]:
|
||||
- link "Request a quote" [ref=e192] [cursor=pointer]:
|
||||
- /url: contact.html
|
||||
- listitem [ref=e193]:
|
||||
- link "+27 (0)11 555 0100" [ref=e194] [cursor=pointer]:
|
||||
- /url: tel:+27115550100
|
||||
- listitem [ref=e195]:
|
||||
- link "sales@jei.co.za" [ref=e196] [cursor=pointer]:
|
||||
- /url: mailto:sales@jei.co.za
|
||||
- listitem [ref=e197]:
|
||||
- link "WhatsApp" [ref=e198] [cursor=pointer]:
|
||||
- /url: https://wa.me/27715550100
|
||||
- generic [ref=e199]:
|
||||
- generic [ref=e200]: © 2026 JEI South Africa
|
||||
- generic [ref=e201]: EN · ZAR
|
||||
447
about.html
Normal file
447
about.html
Normal file
|
|
@ -0,0 +1,447 @@
|
|||
<!doctype html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>About — JEI South Africa</title>
|
||||
<meta name="description" content="JEI South Africa is the local partner of JEI Solutions (UK) — magnetic drilling and annular cutting, stocked and supported in South Africa.">
|
||||
<style>
|
||||
/* Tokens */
|
||||
:root {
|
||||
--bg: #2C3A45;
|
||||
--surface: #FFFFFF;
|
||||
--fg: #1B2A33;
|
||||
--muted: #5A6770;
|
||||
--border: #D7DCE0;
|
||||
--accent: #FBE35B;
|
||||
--accent-ink:#1B2A33;
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
|
||||
--container: 1280px;
|
||||
--gutter: 24px;
|
||||
--header-h: 64px;
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
img, svg { max-width: 100%; display: block; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { font: inherit; cursor: pointer; }
|
||||
::selection { background: var(--accent); color: var(--accent-ink); }
|
||||
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
|
||||
.eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
|
||||
.eyebrow.on-dark { color: rgba(255,255,255,0.7); }
|
||||
|
||||
/* Header (shared) */
|
||||
.topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||||
.topbar__inner { height: var(--header-h); display: flex; align-items: center; gap: 32px; }
|
||||
.brand { display: inline-flex; align-items: baseline; gap: 2px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.brand__je { font-size: 22px; line-height: 1; }
|
||||
.brand__i { font-size: 22px; line-height: 1; color: var(--accent); }
|
||||
.brand__sub { margin-left: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
|
||||
.brand__sub .accent { color: var(--accent); }
|
||||
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
|
||||
.nav a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s; }
|
||||
.nav a:hover, .nav a.is-active { color: #fff; border-bottom-color: var(--accent); }
|
||||
.nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 0; padding: 10px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
|
||||
.nav-toggle { display: none; background: transparent; color: #fff; border: 0; width: 40px; height: 40px; align-items: center; justify-content: center; margin-left: auto; }
|
||||
.nav-toggle svg { width: 22px; height: 22px; }
|
||||
.nav-drawer { position: fixed; inset: 0; background: var(--bg); z-index: 60; display: none; flex-direction: column; padding: 24px; }
|
||||
.nav-drawer.is-open { display: flex; }
|
||||
.nav-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
|
||||
.nav-drawer a { color: #fff; font-size: 22px; font-weight: 500; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.nav-drawer__cta { margin-top: 32px; }
|
||||
|
||||
/* Page hero */
|
||||
.page-hero { background: var(--bg); color: #fff; padding: 64px 0 56px; border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||||
.page-hero__crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 16px; }
|
||||
.page-hero__crumb a { color: rgba(255,255,255,0.7); }
|
||||
.page-hero h1 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; max-width: 22ch; }
|
||||
.page-hero p { margin: 0; color: rgba(255,255,255,0.78); max-width: 60ch; font-size: 17px; line-height: 1.6; }
|
||||
|
||||
/* Sections */
|
||||
.section { padding: 80px 0; }
|
||||
.section--alt { background: #F4F5F6; }
|
||||
.section--dark { background: var(--bg); color: #fff; }
|
||||
.section--dark h2 { color: #fff; }
|
||||
.section--dark .eyebrow { color: rgba(255,255,255,0.7); }
|
||||
.section__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; margin-bottom: 40px; }
|
||||
.section__head h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 0; }
|
||||
.section__head p { margin: 0; color: var(--muted); max-width: 50ch; font-size: 16px; line-height: 1.6; }
|
||||
.section--dark .section__head p { color: rgba(255,255,255,0.78); }
|
||||
|
||||
/* Story section — two-column body */
|
||||
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
|
||||
.story__body p { margin: 0 0 18px; font-size: 16.5px; line-height: 1.7; color: var(--fg); }
|
||||
.story__body p:last-child { margin-bottom: 0; }
|
||||
.story__sidenote {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
padding: 24px 24px 20px;
|
||||
}
|
||||
.story__sidenote h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
|
||||
.story__sidenote p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
|
||||
.story__sidenote + .story__sidenote { margin-top: 16px; }
|
||||
.story__sidenote .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; }
|
||||
.story__sidenote .row:last-child { border-bottom: 0; }
|
||||
.story__sidenote .row .k { color: var(--muted); }
|
||||
.story__sidenote .row .v { color: var(--fg); font-weight: 500; }
|
||||
|
||||
/* Numbers row */
|
||||
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
|
||||
.num-cell { padding: 28px 24px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||||
.num-cell .n { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; margin-bottom: 8px; }
|
||||
.num-cell .n .u { font-size: 18px; color: var(--muted); margin-left: 2px; }
|
||||
.num-cell .l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
|
||||
|
||||
/* Service areas — cards */
|
||||
.grid-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
|
||||
.area { padding: 24px 24px 22px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||||
.area__name { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
|
||||
.area__role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
|
||||
.area p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--muted); }
|
||||
.area__meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg); }
|
||||
|
||||
/* Quality section — hairline list */
|
||||
.quality { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
|
||||
.quality ul { list-style: none; margin: 0; padding: 0; }
|
||||
.quality li { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "bullet h" "bullet p"; column-gap: 14px; row-gap: 0; padding: 18px 0; border-bottom: 1px solid var(--border); }
|
||||
.quality li::before { grid-area: bullet; content: ""; width: 6px; height: 6px; margin-top: 9px; background: var(--accent); }
|
||||
.quality li h4 { grid-area: h; margin: 0 0 4px; font-size: 15px; font-weight: 600; }
|
||||
.quality li p { grid-area: p; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
|
||||
|
||||
/* CTA strip */
|
||||
.cta-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||||
.cta-strip__inner { padding: 56px 0; display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 48px; align-items: center; }
|
||||
.cta-strip h2 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 8px; }
|
||||
.cta-strip p { margin: 0; color: var(--muted); max-width: 56ch; }
|
||||
.cta-strip__actions { display: flex; gap: 12px; justify-self: end; flex-wrap: wrap; }
|
||||
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
|
||||
.btn--accent { background: var(--accent); color: var(--accent-ink); }
|
||||
.btn--accent:hover { background: #FFD96A; }
|
||||
.btn--ink { background: var(--fg); color: #fff; }
|
||||
.btn--ink:hover { background: #2A3942; }
|
||||
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
|
||||
.btn--ghost:hover { border-color: #fff; }
|
||||
.btn--ghost-dark { background: transparent; color: var(--fg); border-color: var(--border); }
|
||||
.btn--ghost-dark:hover { border-color: var(--fg); }
|
||||
.btn .arr { width: 14px; height: 14px; }
|
||||
|
||||
/* Footer (shared) */
|
||||
.footer { background: var(--bg); color: rgba(255,255,255,0.78); padding: 64px 0 32px; }
|
||||
.footer__top { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.footer h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 16px; }
|
||||
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
|
||||
.footer ul a { font-size: 14.5px; color: rgba(255,255,255,0.85); border-bottom: 1px solid transparent; }
|
||||
.footer ul a:hover { border-bottom-color: var(--accent); }
|
||||
.footer__brand p { margin: 14px 0 0; max-width: 32ch; font-size: 14px; color: rgba(255,255,255,0.6); }
|
||||
.footer__bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
.section__head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
|
||||
.story, .quality { grid-template-columns: 1fr; gap: 40px; }
|
||||
.grid-areas { grid-template-columns: repeat(2, 1fr); }
|
||||
.numbers { grid-template-columns: repeat(2, 1fr); }
|
||||
.footer__top { grid-template-columns: 1fr 1fr; }
|
||||
.cta-strip__inner { grid-template-columns: 1fr; }
|
||||
.cta-strip__actions { justify-self: start; }
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
:root { --gutter: 20px; }
|
||||
.nav { display: none; }
|
||||
.nav-toggle { display: inline-flex; }
|
||||
.topbar__inner { gap: 12px; }
|
||||
.section { padding: 56px 0; }
|
||||
.grid-areas, .numbers, .footer__top { grid-template-columns: 1fr; }
|
||||
.num-cell, .area { border-right: 0; }
|
||||
.footer__top { gap: 32px; }
|
||||
.footer__bot { flex-direction: column; align-items: flex-start; gap: 8px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="topbar">
|
||||
<div class="container topbar__inner">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa <span class="accent">·</span> <span class="accent">Built for Industry</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" class="is-active">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"><span class="brand__je">JE</span><span class="brand__i">i</span><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>
|
||||
|
||||
<!-- Page hero -->
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<div class="page-hero__crumb"><a href="index.html">Home</a> / About</div>
|
||||
<h1>The local partner of JEI Solutions (UK) — stocked in South Africa.</h1>
|
||||
<p>JEI South Africa distributes and supports the JEI range of magnetic drilling machines, annular cutters, and fabrication tooling. Same engineering pedigree as the UK parent, with a Johannesburg warehouse and a Cape Town depot.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Story -->
|
||||
<section class="section" id="story">
|
||||
<div class="container">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow">The company</p>
|
||||
<h2>Built for industry. Stocked in South Africa.</h2>
|
||||
</div>
|
||||
<p>JEI South Africa was set up to give South African fabricators direct local access to the JEI range — without the lead time and shipping cost of importing from the UK on every order.</p>
|
||||
</div>
|
||||
<div class="story">
|
||||
<div class="story__body">
|
||||
<p>JEI Solutions (UK) is one of the UK's leading specialists in magnetic drilling and annular cutting, with a catalogue that includes the MagBeast<sup>®</sup> HM Range, MiniBeast™ Cordless, the Turbo™ cutter line, and a broad fabrication range. For twenty-plus years the UK team has built tooling for steel fabrication, rail, energy, defence and heavy engineering.</p>
|
||||
<p>JEI South Africa is the authorised local partner — same machines, same warranties, same engineering standard, but with stock on the ground, technical support in SA time zones, and pricing in ZAR. We carry the best-selling machines, the high-turnover cutter sizes, and the consumables that fabricators burn through week-to-week.</p>
|
||||
<p>We don't make the machines. We make sure that when a mag drill goes down on a Tuesday afternoon, the replacement is in the post that night, and the technician on the phone knows the difference between a Turbo Tough TCT and an HSS-Co reamer.</p>
|
||||
</div>
|
||||
<aside class="story__sidenote">
|
||||
<h3>At a glance</h3>
|
||||
<div class="row"><span class="k">Parent</span><span class="v">JEI Solutions Ltd (UK)</span></div>
|
||||
<div class="row"><span class="k">Established</span><span class="v">2018 (ZA ops)</span></div>
|
||||
<div class="row"><span class="k">HQ</span><span class="v">Johannesburg, GP</span></div>
|
||||
<div class="row"><span class="k">Depot</span><span class="v">Cape Town, WC</span></div>
|
||||
<div class="row"><span class="k">SA rep</span><span class="v">Gary Isherwood · WFSales</span></div>
|
||||
<div class="row"><span class="k">Coverage</span><span class="v">National · SADC on request</span></div>
|
||||
<div class="row"><span class="k">Quality</span><span class="v">ISO 9001 (UK parent)</span></div>
|
||||
<div class="row"><span class="k">Currency</span><span class="v">ZAR</span></div>
|
||||
<div class="row"><span class="k">Language</span><span class="v">English (Afrikaans on request)</span></div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Numbers -->
|
||||
<section class="section section--alt">
|
||||
<div class="container">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow">Capacity</p>
|
||||
<h2>Stock, dispatch, and technical reach</h2>
|
||||
</div>
|
||||
<p>Indicative figures for the JEI South Africa operation. Volume stock is held against rolling demand; lead-time figures below are typical, not contractual.</p>
|
||||
</div>
|
||||
<div class="numbers">
|
||||
<div class="num-cell">
|
||||
<div class="n">R 4.2<span class="u">M</span></div>
|
||||
<div class="l">Stock on the floor</div>
|
||||
</div>
|
||||
<div class="num-cell">
|
||||
<div class="n">320+</div>
|
||||
<div class="l">Active SKUs (machines, cutters, spares)</div>
|
||||
</div>
|
||||
<div class="num-cell">
|
||||
<div class="n">24–72<span class="u">h</span></div>
|
||||
<div class="l">Dispatch Gauteng / national</div>
|
||||
</div>
|
||||
<div class="num-cell">
|
||||
<div class="n">3</div>
|
||||
<div class="l">JEI-trained service technicians</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Service areas (dark) -->
|
||||
<section class="section section--dark" id="uk-partner">
|
||||
<div class="container">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow on-dark">Service areas</p>
|
||||
<h2>Where we work, where we go</h2>
|
||||
</div>
|
||||
<p>Most of our work is Gauteng-based fabrication and mining maintenance, with a growing share of Western Cape structural and rail work. Site visits and on-site demos by appointment.</p>
|
||||
</div>
|
||||
<div class="grid-areas">
|
||||
<div class="area">
|
||||
<div class="area__role">HQ · Warehouse</div>
|
||||
<h3 class="area__name">Johannesburg, Gauteng</h3>
|
||||
<p>Main warehouse and technical support. Stocking the full MagBeast, MiniBeast and Turbo lines, plus consumables. Walk-in collections by appointment.</p>
|
||||
<div class="area__meta">Next-day dispatch · GP, NW, MP, LP</div>
|
||||
</div>
|
||||
<div class="area">
|
||||
<div class="area__role">Depot</div>
|
||||
<h3 class="area__name">Cape Town, Western Cape</h3>
|
||||
<p>Depot for Western Cape, Northern Cape and Southern Cape. Cutter stock and pilot pins; machines dispatched ex-JHB within 48h.</p>
|
||||
<div class="area__meta">48h dispatch · WC, NC, EC-south</div>
|
||||
</div>
|
||||
<div class="area">
|
||||
<div class="area__role">Depot</div>
|
||||
<h3 class="area__name">Durban, KwaZulu-Natal</h3>
|
||||
<p>Depot for KZN and Eastern Cape (north of Gqeberha). Used for petrochemical and shipping-shore-side fabrication customers.</p>
|
||||
<div class="area__meta">48–72h dispatch · KZN, EC-north</div>
|
||||
</div>
|
||||
<div class="area">
|
||||
<div class="area__role">On-site</div>
|
||||
<h3 class="area__name">Mining & heavy industry</h3>
|
||||
<p>Site visits for on-site commissioning, application trials, and operator training. Available to mines, smelters and process plants nationwide.</p>
|
||||
<div class="area__meta">By appointment · Limpopo, NW, MP, FS</div>
|
||||
</div>
|
||||
<div class="area">
|
||||
<div class="area__role">Partner</div>
|
||||
<h3 class="area__name">Rail · Transnet / PRASA</h3>
|
||||
<p>Working with rail maintenance contractors on fishplate renewal, turnout machining, and depot equipment. Railbeast™ range held in stock.</p>
|
||||
<div class="area__meta">Project-based · National</div>
|
||||
</div>
|
||||
<div class="area">
|
||||
<div class="area__role">Export</div>
|
||||
<h3 class="area__name">SADC & rest of Africa</h3>
|
||||
<p>Cross-border supply into Namibia, Botswana, Mozambique, Zambia, and the DRC. Customs documentation and SARS VAT handling included.</p>
|
||||
<div class="area__meta">On request · SADC, EAC</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quality -->
|
||||
<section class="section" id="quality">
|
||||
<div class="container">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow">Quality & warranty</p>
|
||||
<h2>ISO 9001 standard, 12-month machine warranty.</h2>
|
||||
</div>
|
||||
<p>JEI Solutions (UK) is ISO 9001:2015 certified, and that standard is the floor for JEI South Africa. Machine warranty is 12 months from invoice; cutters and consumables carry a separate, fair-wear-and-tear policy.</p>
|
||||
</div>
|
||||
<div class="quality">
|
||||
<ul>
|
||||
<li>
|
||||
<h4>ISO 9001:2015 (UK parent)</h4>
|
||||
<p>Quality management system audited annually. JEI South Africa operates to the same standard — documented incoming inspection, machine testing, and traceability on every cutter sold.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4>12-month machine warranty</h4>
|
||||
<p>All JEI mag drills carry a 12-month warranty from invoice date. Warranty handled in JHB — no need to ship back to the UK. Loan units available for warranty claims exceeding 5 working days.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4>Authorised partner status</h4>
|
||||
<p>JEI South Africa is the only authorised JEI distributor in the country. Customers buying from us get the same warranty, the same spares, and the same engineering support as customers in the UK.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4>Counterfeit avoidance</h4>
|
||||
<p>JEI mag drills and cutters are regularly counterfeited in the Far East. Every machine we sell is sourced directly from the UK parent, with serial-number traceability back to Burnley.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<aside class="story__sidenote">
|
||||
<h3>What "ISO 9001 in practice" means here</h3>
|
||||
<p>Every machine is bench-tested before dispatch — magnet pull test, no-load current, ground continuity, guard function. Test sheet goes in the box with the machine. Cutter batches are sampled on receipt and dimensional records kept for 7 years. If a job goes wrong, we can pull the test sheet for the machine that did the cutting.</p>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA strip -->
|
||||
<section class="cta-strip">
|
||||
<div class="container cta-strip__inner">
|
||||
<div>
|
||||
<p class="eyebrow">Get in touch</p>
|
||||
<h2>Speak to a JEI-trained technician.</h2>
|
||||
<p>Application advice, cutter selection, machine comparison — call us, WhatsApp us, or fill in the form. We come back 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="products.html" class="btn btn--ghost-dark">Browse products</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer__top">
|
||||
<div class="footer__brand">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<p>Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Products</h4>
|
||||
<ul>
|
||||
<li><a href="products.html#drills">Magnetic drills</a></li>
|
||||
<li><a href="products.html#cutters">Annular cutters</a></li>
|
||||
<li><a href="products.html#cordless">Cordless</a></li>
|
||||
<li><a href="products.html#fabrication">Fabrication</a></li>
|
||||
<li><a href="products.html#accessories">Accessories</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Company</h4>
|
||||
<ul>
|
||||
<li><a href="about.html">About JEI ZA</a></li>
|
||||
<li><a href="index.html#industries">Industries</a></li>
|
||||
<li><a href="about.html#uk-partner">JEI UK partner</a></li>
|
||||
<li><a href="about.html#quality">Quality & warranty</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Contact</h4>
|
||||
<ul>
|
||||
<li><a href="contact.html">Request a quote</a></li>
|
||||
<li><a href="tel:+27115550100">+27 (0)11 555 0100</a></li>
|
||||
<li><a href="mailto:sales@jei.co.za">sales@jei.co.za</a></li>
|
||||
<li><a href="https://wa.me/27715550100">WhatsApp</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__bot">
|
||||
<div>© 2026 JEI South Africa</div>
|
||||
<div>EN · ZAR</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var toggle = document.querySelector('.topbar .nav-toggle');
|
||||
var drawer = document.getElementById('nav-drawer');
|
||||
if (!toggle || !drawer) return;
|
||||
function setOpen(open) {
|
||||
drawer.classList.toggle('is-open', open);
|
||||
drawer.setAttribute('aria-hidden', open ? 'false' : 'true');
|
||||
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
document.body.style.overflow = open ? 'hidden' : '';
|
||||
}
|
||||
toggle.addEventListener('click', function () { setOpen(true); });
|
||||
drawer.querySelectorAll('[data-close]').forEach(function (b) { b.addEventListener('click', function () { setOpen(false); }); });
|
||||
drawer.querySelectorAll('a').forEach(function (a) { a.addEventListener('click', function () { setOpen(false); }); });
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
||||
19
about.html.artifact.json
Normal file
19
about.html.artifact.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"version": 1,
|
||||
"kind": "html",
|
||||
"title": "about.html",
|
||||
"entry": "about.html",
|
||||
"renderer": "html",
|
||||
"status": "complete",
|
||||
"exports": [
|
||||
"html",
|
||||
"pdf",
|
||||
"zip"
|
||||
],
|
||||
"createdAt": "2026-06-13T15:06:39.005Z",
|
||||
"updatedAt": "2026-06-13T15:56:44.204Z",
|
||||
"metadata": {
|
||||
"inferred": true,
|
||||
"reconciled": true
|
||||
}
|
||||
}
|
||||
44
brand-spec.md
Normal file
44
brand-spec.md
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
---
|
||||
name: JEI South Africa — brand-spec
|
||||
description: Locked brand values for JEI South Africa (angular cutters and magbase machines). Source: brand-colors image + JEI UK product taxonomy.
|
||||
---
|
||||
|
||||
# JEI South Africa — brand spec
|
||||
|
||||
## Source provenance
|
||||
- Brand colours: `mqchaqen-image.png` (213×160, RGBA). Sampled directly with PIL; primary pixels reported below.
|
||||
- Product taxonomy: `https://www.jeiuk.com/` (used for *what we sell*, not the visual language — user explicitly said "I don't want to copy their site").
|
||||
|
||||
## Colour tokens (locked, OKLch + sRGB)
|
||||
- **--bg (navy)**: `oklch(28% 0.025 235)` ↔ `#2C3A45` — dominant background, hero, dark sections. Sampled: rgb(44, 58, 69).
|
||||
- **--surface (white)**: `oklch(99% 0 0)` ↔ `#FFFFFF` — page surface, cards, datasheet tables.
|
||||
- **--fg (ink)**: `oklch(20% 0.02 240)` ↔ `#1B2A33` — body copy on white, slightly darker than the navy to keep contrast clean.
|
||||
- **--muted**: `oklch(50% 0.012 235)` ↔ `#5A6770` — metadata, captions, supporting copy.
|
||||
- **--border**: `oklch(88% 0.008 235)` ↔ `#D7DCE0` — hairlines, table rules, card outlines.
|
||||
- **--accent (gold)**: `oklch(90% 0.155 100)` ↔ `#FBE35B` — the "i" in JEI, "Built for Industry" tagline, key callouts. Sampled: rgb(251, 227, 91). Used at most twice per screen.
|
||||
|
||||
## Typography
|
||||
- **Display + body**: system sans stack — `-apple-system, "Segoe UI", "Helvetica Neue", system-ui, sans-serif`. Industrial / engineering tone; no decorative serif.
|
||||
- **Mono (specs, codes, model numbers)**: `ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace`. Used in datasheet tables and in product code chips.
|
||||
- **Scale**: clamp-driven. Display headings 56–96px, section H2 32–44px, body 16–18px, captions 12–13px, mono spec lines 13–14px.
|
||||
|
||||
## Voice
|
||||
- Plain, technical, B2B. "Engineered for South African fabrication." No emoji, no superlatives without a source, no "revolutionary / unleash / unleash the power" copy.
|
||||
- South African spelling and context: ZAR pricing on request, +27 phone, Johannesburg / Cape Town / Durban / Gqeberha / eThekwini as service nodes, ISO 9001, SARS customs-friendly documentation.
|
||||
|
||||
## Logo posture
|
||||
- Wordmark: white **JE** + yellow **i** + white **Solutions** (Instrument-Serif-style slab optional, but the lockup reads fine in system sans for engineering context).
|
||||
- Tagline: **Built for Industry** in yellow on navy, mono uppercase tracking 0.22em.
|
||||
- No shadow, no rounded card, no gradient frame.
|
||||
|
||||
## Layout posture (industrial / engineering)
|
||||
- Hairline borders (`1px solid var(--border)`), no shadows except dropdowns.
|
||||
- Tabular-nums everywhere numerics appear.
|
||||
- Tables for specs, no row striping, dense.
|
||||
- Inline status pills (In stock / On order / Bespoke) with restrained tint, not colour floods.
|
||||
- One decisive flourish: the gold accent on the JEI "i" + the "Built for Industry" tagline. Don't echo it on every section.
|
||||
|
||||
## What we are NOT doing
|
||||
- No purple, no gradient wash, no warm beige, no emoji icons.
|
||||
- No invented specs. Real values where we have them; honest `—` or "Datasheet on request" where we don't.
|
||||
- No copying of jeiuk.com visual language. The UK site is a reference for *what we sell*, not how it looks.
|
||||
542
contact.html
Normal file
542
contact.html
Normal file
|
|
@ -0,0 +1,542 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Contact & Quote — JEI South Africa</title>
|
||||
<meta name="description" content="Request a quote, datasheet, or on-site demo. Phone, email, WhatsApp, and a request form — same-day response from JEI South Africa." />
|
||||
<style>
|
||||
/* Tokens */
|
||||
:root {
|
||||
--bg: #2C3A45;
|
||||
--surface: #FFFFFF;
|
||||
--fg: #1B2A33;
|
||||
--muted: #5A6770;
|
||||
--border: #D7DCE0;
|
||||
--accent: #FBE35B;
|
||||
--accent-ink:#1B2A33;
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
|
||||
--container: 1280px;
|
||||
--gutter: 24px;
|
||||
--header-h: 64px;
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
img, svg { max-width: 100%; display: block; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { font: inherit; cursor: pointer; }
|
||||
::selection { background: var(--accent); color: var(--accent-ink); }
|
||||
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
|
||||
.eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
|
||||
.eyebrow.on-dark { color: rgba(255,255,255,0.7); }
|
||||
|
||||
/* Header (shared) */
|
||||
.topbar { position: sticky; top: 0; z-index: 50; background: var(--bg); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||||
.topbar__inner { height: var(--header-h); display: flex; align-items: center; gap: 32px; }
|
||||
.brand { display: inline-flex; align-items: baseline; gap: 2px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.brand__je { font-size: 22px; line-height: 1; }
|
||||
.brand__i { font-size: 22px; line-height: 1; color: var(--accent); }
|
||||
.brand__sub { margin-left: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
|
||||
.brand__sub .accent { color: var(--accent); }
|
||||
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
|
||||
.nav a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s; }
|
||||
.nav a:hover, .nav a.is-active { color: #fff; border-bottom-color: var(--accent); }
|
||||
.nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 0; padding: 10px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
|
||||
.nav-toggle { display: none; background: transparent; color: #fff; border: 0; width: 40px; height: 40px; align-items: center; justify-content: center; margin-left: auto; }
|
||||
.nav-toggle svg { width: 22px; height: 22px; }
|
||||
.nav-drawer { position: fixed; inset: 0; background: var(--bg); z-index: 60; display: none; flex-direction: column; padding: 24px; }
|
||||
.nav-drawer.is-open { display: flex; }
|
||||
.nav-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
|
||||
.nav-drawer a { color: #fff; font-size: 22px; font-weight: 500; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.nav-drawer__cta { margin-top: 32px; }
|
||||
|
||||
/* Page hero */
|
||||
.page-hero { background: var(--bg); color: #fff; padding: 64px 0 56px; border-bottom: 1px solid rgba(255,255,255,0.08); }
|
||||
.page-hero__crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 16px; }
|
||||
.page-hero__crumb a { color: rgba(255,255,255,0.7); }
|
||||
.page-hero h1 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; max-width: 22ch; }
|
||||
.page-hero p { margin: 0; color: rgba(255,255,255,0.78); max-width: 60ch; font-size: 17px; line-height: 1.6; }
|
||||
|
||||
/* Sections */
|
||||
.section { padding: 80px 0; }
|
||||
.section--alt { background: #F4F5F6; }
|
||||
.section--dark { background: var(--bg); color: #fff; }
|
||||
.section--dark h2 { color: #fff; }
|
||||
.section--dark .eyebrow { color: rgba(255,255,255,0.7); }
|
||||
.section__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; margin-bottom: 40px; }
|
||||
.section__head h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 0; }
|
||||
.section__head p { margin: 0; color: var(--muted); max-width: 50ch; font-size: 16px; line-height: 1.6; }
|
||||
.section--dark .section__head p { color: rgba(255,255,255,0.78); }
|
||||
|
||||
/* Contact split: form + sidebar */
|
||||
.contact-split { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 64px; align-items: start; }
|
||||
|
||||
/* Form */
|
||||
.form { display: flex; flex-direction: column; gap: 24px; }
|
||||
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
|
||||
.field { display: flex; flex-direction: column; gap: 8px; }
|
||||
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
|
||||
.field label .req { color: var(--accent-ink); }
|
||||
.field input, .field select, .field textarea {
|
||||
font: inherit; font-size: 15px; color: var(--fg);
|
||||
padding: 12px 0 10px; background: transparent;
|
||||
border: 0; border-bottom: 1px solid var(--border);
|
||||
border-radius: 0; outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--fg); }
|
||||
.field textarea { min-height: 120px; resize: vertical; }
|
||||
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-bottom-color: #B03A2E; }
|
||||
.field__err { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: #B03A2E; min-height: 14px; }
|
||||
.field__hint { font-size: 12.5px; color: var(--muted); }
|
||||
.form__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: 8px; }
|
||||
.form__note { font-size: 12.5px; color: var(--muted); }
|
||||
|
||||
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
|
||||
.btn--accent { background: var(--accent); color: var(--accent-ink); }
|
||||
.btn--accent:hover { background: #FFD96A; }
|
||||
.btn--ink { background: var(--fg); color: #fff; }
|
||||
.btn--ink:hover { background: #2A3942; }
|
||||
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
|
||||
.btn--ghost:hover { border-color: #fff; }
|
||||
.btn--ghost-dark { background: transparent; color: var(--fg); border-color: var(--border); }
|
||||
.btn--ghost-dark:hover { border-color: var(--fg); }
|
||||
.btn .arr { width: 14px; height: 14px; }
|
||||
|
||||
.form__success {
|
||||
display: none;
|
||||
padding: 32px 28px;
|
||||
background: #EAF5EE;
|
||||
border: 1px solid #1B5E3F;
|
||||
color: #1B5E3F;
|
||||
}
|
||||
.form__success.is-shown { display: block; }
|
||||
.form__success h3 { margin: 0 0 8px; font-size: 18px; }
|
||||
.form__success p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #1B5E3F; }
|
||||
.form__success strong { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 13px; }
|
||||
|
||||
/* Sidebar */
|
||||
.side { display: flex; flex-direction: column; gap: 24px; }
|
||||
.side__card {
|
||||
border: 1px solid var(--border);
|
||||
padding: 24px 24px 22px;
|
||||
background: var(--surface);
|
||||
}
|
||||
.side__card h3 { margin: 0 0 12px; font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
|
||||
.side__row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
|
||||
.side__row:last-child { border-bottom: 0; }
|
||||
.side__row .k { color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
|
||||
.side__row .v { color: var(--fg); }
|
||||
.side__row .v a:hover { color: var(--accent-ink); }
|
||||
.side__card--accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
|
||||
.side__card--accent h3 { color: var(--accent-ink); }
|
||||
.side__card--accent .side__row .k { color: rgba(0,0,0,0.6); }
|
||||
.side__card--accent .side__row .v { color: var(--accent-ink); }
|
||||
.side__card--accent .side__row { border-color: rgba(0,0,0,0.18); }
|
||||
.side__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0,0,0,0.6); margin: 0 0 6px; }
|
||||
.side__card--accent h3 { font-family: var(--font-sans); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; margin: 0 0 10px; }
|
||||
.side__lede { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: rgba(0,0,0,0.75); }
|
||||
|
||||
/* Offices (dark) */
|
||||
.grid-offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.12); border-left: 1px solid rgba(255,255,255,0.12); }
|
||||
.office { padding: 28px 28px 24px; border-right: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.office__role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
|
||||
.office h3 { margin: 0 0 14px; font-size: 18px; font-weight: 600; color: #fff; }
|
||||
.office p { margin: 0 0 4px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.78); }
|
||||
.office .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 12px; }
|
||||
|
||||
/* CTA strip */
|
||||
.cta-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||||
.cta-strip__inner { padding: 56px 0; display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 48px; align-items: center; }
|
||||
.cta-strip h2 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 8px; }
|
||||
.cta-strip p { margin: 0; color: var(--muted); max-width: 56ch; }
|
||||
.cta-strip__actions { display: flex; gap: 12px; justify-self: end; flex-wrap: wrap; }
|
||||
|
||||
/* Footer (shared) */
|
||||
.footer { background: var(--bg); color: rgba(255,255,255,0.78); padding: 64px 0 32px; }
|
||||
.footer__top { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.footer h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 16px; }
|
||||
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
|
||||
.footer ul a { font-size: 14.5px; color: rgba(255,255,255,0.85); border-bottom: 1px solid transparent; }
|
||||
.footer ul a:hover { border-bottom-color: var(--accent); }
|
||||
.footer__brand p { margin: 14px 0 0; max-width: 32ch; font-size: 14px; color: rgba(255,255,255,0.6); }
|
||||
.footer__bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
.section__head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
|
||||
.contact-split { grid-template-columns: 1fr; gap: 48px; }
|
||||
.grid-offices { grid-template-columns: 1fr; }
|
||||
.form__row { grid-template-columns: 1fr; }
|
||||
.footer__top { grid-template-columns: 1fr 1fr; }
|
||||
.cta-strip__inner { grid-template-columns: 1fr; }
|
||||
.cta-strip__actions { justify-self: start; }
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
:root { --gutter: 20px; }
|
||||
.nav { display: none; }
|
||||
.nav-toggle { display: inline-flex; }
|
||||
.topbar__inner { gap: 12px; }
|
||||
.section { padding: 56px 0; }
|
||||
.grid-offices, .footer__top { grid-template-columns: 1fr; }
|
||||
.office, .side__card { padding: 20px; }
|
||||
.footer__top { gap: 32px; }
|
||||
.footer__bot { flex-direction: column; align-items: flex-start; gap: 8px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="topbar">
|
||||
<div class="container topbar__inner">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa <span class="accent">·</span> <span class="accent">Built for Industry</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" class="is-active">Contact</a>
|
||||
<a href="contact.html" class="nav-cta">Request a quote</a>
|
||||
</nav>
|
||||
<button class="nav-toggle" aria-label="Open menu" aria-controls="nav-drawer" aria-expanded="false">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="nav-drawer" id="nav-drawer" aria-hidden="true">
|
||||
<div class="nav-drawer__top">
|
||||
<a href="index.html" class="brand"><span class="brand__je">JE</span><span class="brand__i">i</span><span class="brand__sub">South Africa</span></a>
|
||||
<button class="nav-toggle" aria-label="Close menu" data-close><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"/></svg></button>
|
||||
</div>
|
||||
<a href="products.html">Products</a>
|
||||
<a href="index.html#industries">Industries</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="contact.html" class="btn btn--accent nav-drawer__cta">Request a quote</a>
|
||||
</div>
|
||||
|
||||
<!-- Page hero -->
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<div class="page-hero__crumb"><a href="index.html">Home</a> / Contact</div>
|
||||
<h1>Quote, datasheet, on-site demo — same-day response.</h1>
|
||||
<p>Tell us what you need to cut, the material, the diameter, and the quantity. A JEI-trained technician will come back with stock, lead time, and price the same business day.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Form + side -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow">Get a quote</p>
|
||||
<h2>Request a quote or a datasheet</h2>
|
||||
</div>
|
||||
<p>Required fields marked with <span style="font-family:var(--font-mono); color: var(--fg);">*</span>. For machine demos, please add a rough date in the message field.</p>
|
||||
</div>
|
||||
|
||||
<div class="contact-split">
|
||||
<form class="form" id="quote-form" novalidate>
|
||||
<div class="form__row">
|
||||
<div class="field" data-field="name">
|
||||
<label for="f-name">Your name <span class="req">*</span></label>
|
||||
<input type="text" id="f-name" name="name" autocomplete="name" required />
|
||||
<div class="field__err" data-err></div>
|
||||
</div>
|
||||
<div class="field" data-field="company">
|
||||
<label for="f-company">Company <span class="req">*</span></label>
|
||||
<input type="text" id="f-company" name="company" autocomplete="organization" required />
|
||||
<div class="field__err" data-err></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form__row">
|
||||
<div class="field" data-field="email">
|
||||
<label for="f-email">Email <span class="req">*</span></label>
|
||||
<input type="email" id="f-email" name="email" autocomplete="email" required />
|
||||
<div class="field__err" data-err></div>
|
||||
</div>
|
||||
<div class="field" data-field="phone">
|
||||
<label for="f-phone">Phone</label>
|
||||
<input type="tel" id="f-phone" name="phone" autocomplete="tel" placeholder="+27 …" />
|
||||
<div class="field__err" data-err></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form__row">
|
||||
<div class="field" data-field="category">
|
||||
<label for="f-category">Product interest <span class="req">*</span></label>
|
||||
<select id="f-category" name="category" required>
|
||||
<option value="">— Select a category —</option>
|
||||
<option>Magnetic drills — Electric</option>
|
||||
<option>Magnetic drills — Cordless</option>
|
||||
<option>Magnetic drills — Pneumatic</option>
|
||||
<option>Magnetic drills — Rail</option>
|
||||
<option>Annular cutters — HSS</option>
|
||||
<option>Annular cutters — TCT</option>
|
||||
<option>Accessories / consumables</option>
|
||||
<option>Fabrication equipment</option>
|
||||
<option>Service / repair / spare parts</option>
|
||||
<option>On-site demo / training</option>
|
||||
</select>
|
||||
<div class="field__err" data-err></div>
|
||||
</div>
|
||||
<div class="field" data-field="qty">
|
||||
<label for="f-qty">Quantity</label>
|
||||
<input type="text" id="f-qty" name="qty" placeholder="e.g. 1 unit, 25 cutters" />
|
||||
<div class="field__err" data-err></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field" data-field="message">
|
||||
<label for="f-message">Message <span class="req">*</span></label>
|
||||
<textarea id="f-message" name="message" required placeholder="Material, cutter diameter, cutting depth, application. Anything you want the technician to know."></textarea>
|
||||
<div class="field__hint">We aim to respond the same business day.</div>
|
||||
<div class="field__err" data-err></div>
|
||||
</div>
|
||||
|
||||
<div class="form__actions">
|
||||
<button type="submit" class="btn btn--ink">
|
||||
Send request
|
||||
<svg class="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
</button>
|
||||
<span class="form__note">Or call us on +27 (0)11 555 0100 — JHB.</span>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="form__success" id="quote-success" role="status" aria-live="polite">
|
||||
<h3>Request received.</h3>
|
||||
<p>Thanks — your request is in. A JEI technician will be in touch the same business day with stock, lead time, and price.</p>
|
||||
<strong id="quote-success-ref">REF · —</strong>
|
||||
</div>
|
||||
|
||||
<aside class="side">
|
||||
<div class="side__card side__card--accent">
|
||||
<p class="side__eyebrow">South African sales</p>
|
||||
<h3>Gary Isherwood</h3>
|
||||
<p class="side__lede">Your first call for stock, pricing and lead times on the JEI range. Gary handles SA sales and on-site demos.</p>
|
||||
<div class="side__row"><span class="k">Mobile</span><span class="v"><a href="tel:+27828524633">082 852 4633</a></span></div>
|
||||
<div class="side__row"><span class="k">Email</span><span class="v"><a href="mailto:gary@wfsales.co.za">gary@wfsales.co.za</a></span></div>
|
||||
<div class="side__row"><span class="k">Hours</span><span class="v">Mon–Fri · 07:30 – 17:00 SAST</span></div>
|
||||
</div>
|
||||
|
||||
<div class="side__card">
|
||||
<h3>Technical support</h3>
|
||||
<p style="margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--muted);">Application advice, cutter selection, machine comparison and warranty queries — JEI-trained technicians in JHB.</p>
|
||||
<div class="side__row"><span class="k">Phone</span><span class="v"><a href="tel:+27115550100">+27 (0)11 555 0100</a></span></div>
|
||||
<div class="side__row"><span class="k">WhatsApp</span><span class="v"><a href="https://wa.me/27715550100">+27 71 555 0100</a></span></div>
|
||||
<div class="side__row"><span class="k">Email</span><span class="v"><a href="mailto:sales@jei.co.za">sales@jei.co.za</a></span></div>
|
||||
</div>
|
||||
|
||||
<div class="side__card">
|
||||
<h3>For UK enquiries</h3>
|
||||
<p style="margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--muted);">For trade enquiries, technical datasheets in metric/imperial, or to discuss bespoke tooling:</p>
|
||||
<div class="side__row"><span class="k">JEI UK</span><span class="v">+44 (0) 1706 229490</span></div>
|
||||
<div class="side__row"><span class="k">Email</span><span class="v">sales@jeisolutions.co.uk</span></div>
|
||||
<div class="side__row"><span class="k">Web</span><span class="v"><a href="https://www.jeiuk.com/">jeiuk.com</a></span></div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Offices -->
|
||||
<section class="section section--dark">
|
||||
<div class="container">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow on-dark">Offices</p>
|
||||
<h2>Where to find us</h2>
|
||||
</div>
|
||||
<p>Walk-in collections by appointment. Most orders ship the same day from Johannesburg.</p>
|
||||
</div>
|
||||
<div class="grid-offices">
|
||||
<div class="office">
|
||||
<div class="office__role">HQ · Warehouse</div>
|
||||
<h3>Johannesburg, Gauteng</h3>
|
||||
<p>Unit XX, Industrial Park</p>
|
||||
<p>Johannesburg, 2000</p>
|
||||
<p>South Africa</p>
|
||||
<div class="meta">Mon–Fri 07:30 – 17:00 SAST</div>
|
||||
</div>
|
||||
<div class="office">
|
||||
<div class="office__role">Depot</div>
|
||||
<h3>Cape Town, Western Cape</h3>
|
||||
<p>Unit XX, Epping Industria</p>
|
||||
<p>Cape Town, 7460</p>
|
||||
<p>South Africa</p>
|
||||
<div class="meta">Mon–Fri 08:00 – 16:30 SAST</div>
|
||||
</div>
|
||||
<div class="office">
|
||||
<div class="office__role">Depot</div>
|
||||
<h3>Durban, KwaZulu-Natal</h3>
|
||||
<p>Unit XX, New Germany</p>
|
||||
<p>Durban, 3610</p>
|
||||
<p>South Africa</p>
|
||||
<div class="meta">Mon–Fri 08:00 – 16:30 SAST</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA strip -->
|
||||
<section class="cta-strip">
|
||||
<div class="container cta-strip__inner">
|
||||
<div>
|
||||
<p class="eyebrow">Browse first</p>
|
||||
<h2>Not sure what you need? Start with the catalogue.</h2>
|
||||
<p>Full product list with indicative specs, category by category. Datasheet PDF available on every product line.</p>
|
||||
</div>
|
||||
<div class="cta-strip__actions">
|
||||
<a href="products.html" class="btn btn--ink">Browse products
|
||||
<svg class="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
</a>
|
||||
<a href="about.html" class="btn btn--ghost-dark">About JEI ZA</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer__top">
|
||||
<div class="footer__brand">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<p>Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Products</h4>
|
||||
<ul>
|
||||
<li><a href="products.html#drills">Magnetic drills</a></li>
|
||||
<li><a href="products.html#cutters">Annular cutters</a></li>
|
||||
<li><a href="products.html#cordless">Cordless</a></li>
|
||||
<li><a href="products.html#fabrication">Fabrication</a></li>
|
||||
<li><a href="products.html#accessories">Accessories</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Company</h4>
|
||||
<ul>
|
||||
<li><a href="about.html">About JEI ZA</a></li>
|
||||
<li><a href="index.html#industries">Industries</a></li>
|
||||
<li><a href="about.html#uk-partner">JEI UK partner</a></li>
|
||||
<li><a href="about.html#quality">Quality & warranty</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Contact</h4>
|
||||
<ul>
|
||||
<li><a href="contact.html">Request a quote</a></li>
|
||||
<li><a href="tel:+27115550100">+27 (0)11 555 0100</a></li>
|
||||
<li><a href="mailto:sales@jei.co.za">sales@jei.co.za</a></li>
|
||||
<li><a href="https://wa.me/27715550100">WhatsApp</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__bot">
|
||||
<div>© 2026 JEI South Africa</div>
|
||||
<div>EN · ZAR</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Mobile drawer (shared)
|
||||
(function () {
|
||||
var toggle = document.querySelector('.topbar .nav-toggle');
|
||||
var drawer = document.getElementById('nav-drawer');
|
||||
if (!toggle || !drawer) return;
|
||||
function setOpen(open) {
|
||||
drawer.classList.toggle('is-open', open);
|
||||
drawer.setAttribute('aria-hidden', open ? 'false' : 'true');
|
||||
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
document.body.style.overflow = open ? 'hidden' : '';
|
||||
}
|
||||
toggle.addEventListener('click', function () { setOpen(true); });
|
||||
drawer.querySelectorAll('[data-close]').forEach(function (b) { b.addEventListener('click', function () { setOpen(false); }); });
|
||||
drawer.querySelectorAll('a').forEach(function (a) { a.addEventListener('click', function () { setOpen(false); }); });
|
||||
})();
|
||||
|
||||
// Quote form: validation + success state
|
||||
(function () {
|
||||
var form = document.getElementById('quote-form');
|
||||
var success = document.getElementById('quote-success');
|
||||
var successRef = document.getElementById('quote-success-ref');
|
||||
if (!form) return;
|
||||
|
||||
function setErr(field, msg) {
|
||||
var el = form.querySelector('[data-field="' + field + '"]');
|
||||
if (!el) return;
|
||||
el.classList.toggle('is-invalid', !!msg);
|
||||
var err = el.querySelector('[data-err]');
|
||||
if (err) err.textContent = msg || '';
|
||||
}
|
||||
function validate() {
|
||||
var ok = true;
|
||||
var v = function (n) { return form.querySelector('[name="' + n + '"]').value.trim(); };
|
||||
[['name', 'Please add your name.'],
|
||||
['company', 'Please add your company.'],
|
||||
['email', 'Please add a valid email.'],
|
||||
['category', 'Please pick a category.'],
|
||||
['message', 'Please describe what you need.']].forEach(function (pair) {
|
||||
var name = pair[0], msg = pair[1];
|
||||
var val = v(name);
|
||||
var invalid = !val || (name === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val));
|
||||
setErr(name, invalid ? msg : '');
|
||||
if (invalid) ok = false;
|
||||
});
|
||||
// phone is optional but if present, do a soft check
|
||||
var phone = v('phone');
|
||||
if (phone && phone.replace(/\D/g, '').length < 7) {
|
||||
setErr('phone', 'That phone number looks short.');
|
||||
ok = false;
|
||||
} else { setErr('phone', ''); }
|
||||
return ok;
|
||||
}
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
if (!validate()) {
|
||||
var first = form.querySelector('.is-invalid input, .is-invalid select, .is-invalid textarea');
|
||||
if (first) first.focus();
|
||||
return;
|
||||
}
|
||||
// Pretend submission — generate a reference and show success.
|
||||
var ref = 'JEI-ZA-' + Date.now().toString(36).toUpperCase().slice(-6);
|
||||
if (successRef) successRef.textContent = 'REF · ' + ref;
|
||||
form.style.display = 'none';
|
||||
success.classList.add('is-shown');
|
||||
success.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
});
|
||||
// Clear errors on input
|
||||
form.querySelectorAll('input, select, textarea').forEach(function (el) {
|
||||
el.addEventListener('input', function () {
|
||||
var field = el.closest('[data-field]');
|
||||
if (field && field.classList.contains('is-invalid')) {
|
||||
field.classList.remove('is-invalid');
|
||||
var err = field.querySelector('[data-err]');
|
||||
if (err) err.textContent = '';
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
19
contact.html.artifact.json
Normal file
19
contact.html.artifact.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"version": 1,
|
||||
"kind": "html",
|
||||
"title": "contact.html",
|
||||
"entry": "contact.html",
|
||||
"renderer": "html",
|
||||
"status": "complete",
|
||||
"exports": [
|
||||
"html",
|
||||
"pdf",
|
||||
"zip"
|
||||
],
|
||||
"createdAt": "2026-06-13T15:08:16.297Z",
|
||||
"updatedAt": "2026-06-13T15:08:16.297Z",
|
||||
"metadata": {
|
||||
"inferred": true,
|
||||
"reconciled": true
|
||||
}
|
||||
}
|
||||
580
index.html
Normal file
580
index.html
Normal file
|
|
@ -0,0 +1,580 @@
|
|||
<!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.">
|
||||
<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: baseline; gap: 2px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.brand__je { font-size: 22px; line-height: 1; }
|
||||
.brand__i { font-size: 22px; line-height: 1; color: var(--accent); }
|
||||
.brand__sub { margin-left: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
|
||||
.brand__sub .accent { color: var(--accent); }
|
||||
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
|
||||
.nav a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s; }
|
||||
.nav a:hover, .nav a.is-active { color: #fff; border-bottom-color: var(--accent); }
|
||||
.nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 0; padding: 10px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
|
||||
.nav-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: flex; align-items: baseline; gap: 0; font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; margin-bottom: 18px; }
|
||||
.hero__wordmark .je { color: #fff; font-size: 72px; }
|
||||
.hero__wordmark .i { color: var(--accent); font-size: 72px; }
|
||||
.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%; }
|
||||
.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__je, .footer__brand .brand__i { font-size: 26px; }
|
||||
.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: 360px; justify-self: start; }
|
||||
.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__wordmark .je, .hero__wordmark .i { font-size: 56px; }
|
||||
.hero h1 { font-size: 30px; }
|
||||
.hero__meta { gap: 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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="topbar">
|
||||
<div class="container topbar__inner">
|
||||
<a href="index.html" class="brand" aria-label="JEI South Africa — home">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa <span class="accent">·</span> <span class="accent">Built for Industry</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">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<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>
|
||||
<div class="hero__wordmark" aria-hidden="true">
|
||||
<span class="je">JE</span><span class="i">i</span>
|
||||
</div>
|
||||
<div class="hero__tagline">Built for Industry · 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 & 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">
|
||||
<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">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<p>Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Products</h4>
|
||||
<ul>
|
||||
<li><a href="products.html#drills">Magnetic drills</a></li>
|
||||
<li><a href="products.html#cutters">Annular cutters</a></li>
|
||||
<li><a href="products.html#cordless">Cordless</a></li>
|
||||
<li><a href="products.html#fabrication">Fabrication</a></li>
|
||||
<li><a href="products.html#accessories">Accessories</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Company</h4>
|
||||
<ul>
|
||||
<li><a href="about.html">About JEI ZA</a></li>
|
||||
<li><a href="index.html#industries">Industries</a></li>
|
||||
<li><a href="about.html#uk-partner">JEI UK partner</a></li>
|
||||
<li><a href="about.html#quality">Quality & warranty</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Contact</h4>
|
||||
<ul>
|
||||
<li><a href="contact.html">Request a quote</a></li>
|
||||
<li><a href="tel:+27115550100">+27 (0)11 555 0100</a></li>
|
||||
<li><a href="mailto:sales@jei.co.za">sales@jei.co.za</a></li>
|
||||
<li><a href="https://wa.me/27715550100">WhatsApp</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__bot 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>
|
||||
19
index.html.artifact.json
Normal file
19
index.html.artifact.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"version": 1,
|
||||
"kind": "html",
|
||||
"title": "index.html",
|
||||
"entry": "index.html",
|
||||
"renderer": "html",
|
||||
"status": "complete",
|
||||
"exports": [
|
||||
"html",
|
||||
"pdf",
|
||||
"zip"
|
||||
],
|
||||
"createdAt": "2026-06-13T15:10:45.406Z",
|
||||
"updatedAt": "2026-06-13T15:42:10.319Z",
|
||||
"metadata": {
|
||||
"inferred": true,
|
||||
"reconciled": true
|
||||
}
|
||||
}
|
||||
BIN
mqchaqen-image.png
Normal file
BIN
mqchaqen-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
mqci5j7v-image.png
Normal file
BIN
mqci5j7v-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 309 KiB |
BIN
mqcitja8-Gemini_Generated_Image_m7xmdtm7xmdtm7xm.png
Normal file
BIN
mqcitja8-Gemini_Generated_Image_m7xmdtm7xmdtm7xm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 MiB |
BIN
mqcj0lwu-image.png
Normal file
BIN
mqcj0lwu-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 365 KiB |
BIN
mqcj0qbk-image.png
Normal file
BIN
mqcj0qbk-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
BIN
mqcj0uhh-image.png
Normal file
BIN
mqcj0uhh-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
BIN
mqcj14mi-image.png
Normal file
BIN
mqcj14mi-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
mqcj189n-image.png
Normal file
BIN
mqcj189n-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
860
products.html
Normal file
860
products.html
Normal file
|
|
@ -0,0 +1,860 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Products — JEI South Africa</title>
|
||||
<meta name="description" content="Magnetic drills, annular cutters, fabrication equipment and accessories. Full JEI catalogue available in South Africa." />
|
||||
<style>
|
||||
/* =========================================================
|
||||
Tokens (shared with home — locked from brand-spec.md)
|
||||
========================================================= */
|
||||
:root {
|
||||
--bg: #2C3A45;
|
||||
--surface: #FFFFFF;
|
||||
--fg: #1B2A33;
|
||||
--muted: #5A6770;
|
||||
--border: #D7DCE0;
|
||||
--accent: #FBE35B;
|
||||
--accent-ink:#1B2A33;
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
|
||||
--container: 1280px;
|
||||
--gutter: 24px;
|
||||
--header-h: 64px;
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
img, svg { max-width: 100%; display: block; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { font: inherit; cursor: pointer; }
|
||||
::selection { background: var(--accent); color: var(--accent-ink); }
|
||||
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
|
||||
.eyebrow {
|
||||
font-family: var(--font-mono); font-size: 11px; font-weight: 500;
|
||||
letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
|
||||
}
|
||||
.eyebrow.on-dark { color: rgba(255,255,255,0.7); }
|
||||
|
||||
/* Header (shared) */
|
||||
.topbar {
|
||||
position: sticky; top: 0; z-index: 50;
|
||||
background: var(--bg); color: #fff;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.topbar__inner { height: var(--header-h); display: flex; align-items: center; gap: 32px; }
|
||||
.brand { display: inline-flex; align-items: baseline; gap: 2px; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.brand__je { font-size: 22px; line-height: 1; }
|
||||
.brand__i { font-size: 22px; line-height: 1; color: var(--accent); }
|
||||
.brand__sub {
|
||||
margin-left: 10px; font-size: 12px; font-weight: 500;
|
||||
letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7);
|
||||
}
|
||||
.brand__sub .accent { color: var(--accent); }
|
||||
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
|
||||
.nav a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s; }
|
||||
.nav a:hover, .nav a.is-active { color: #fff; border-bottom-color: var(--accent); }
|
||||
.nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 0; padding: 10px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
|
||||
.nav-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; }
|
||||
.nav-drawer { position: fixed; inset: 0; background: var(--bg); z-index: 60; display: none; flex-direction: column; padding: 24px; }
|
||||
.nav-drawer.is-open { display: flex; }
|
||||
.nav-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
|
||||
.nav-drawer a { color: #fff; font-size: 22px; font-weight: 500; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.nav-drawer__cta { margin-top: 32px; }
|
||||
|
||||
/* Page hero (smaller than home) */
|
||||
.page-hero {
|
||||
background: var(--bg);
|
||||
color: #fff;
|
||||
padding: 64px 0 56px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.page-hero__crumb {
|
||||
font-family: var(--font-mono); font-size: 11px;
|
||||
letter-spacing: 0.22em; text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.55);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.page-hero__crumb a { color: rgba(255,255,255,0.7); }
|
||||
.page-hero__crumb a:hover { color: var(--accent); }
|
||||
.page-hero h1 {
|
||||
font-size: clamp(32px, 4.4vw, 56px);
|
||||
font-weight: 600; line-height: 1.1; letter-spacing: -0.02em;
|
||||
margin: 0 0 16px; max-width: 18ch;
|
||||
}
|
||||
.page-hero p {
|
||||
margin: 0; color: rgba(255,255,255,0.78);
|
||||
max-width: 60ch; font-size: 17px; line-height: 1.6;
|
||||
}
|
||||
|
||||
/* In-page section nav */
|
||||
.cat-nav {
|
||||
position: sticky;
|
||||
top: var(--header-h);
|
||||
z-index: 40;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.cat-nav__inner {
|
||||
display: flex; gap: 4px; overflow-x: auto;
|
||||
padding: 0 var(--gutter);
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.cat-nav__inner::-webkit-scrollbar { display: none; }
|
||||
.cat-nav a {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 16px 14px; font-size: 13px; font-weight: 500;
|
||||
color: var(--muted);
|
||||
border-bottom: 2px solid transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cat-nav a:hover { color: var(--fg); }
|
||||
.cat-nav a.is-active { color: var(--fg); border-bottom-color: var(--accent); }
|
||||
.cat-nav a span.num {
|
||||
font-family: var(--font-mono); font-size: 11px;
|
||||
color: var(--muted); letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
/* Section */
|
||||
.section { padding: 80px 0; }
|
||||
.section + .section { border-top: 1px solid var(--border); }
|
||||
.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: 40px; }
|
||||
.section__head h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 0; }
|
||||
.section__head p { margin: 0; color: var(--muted); max-width: 50ch; font-size: 16px; line-height: 1.6; }
|
||||
.section--dark .section__head p { color: rgba(255,255,255,0.78); }
|
||||
|
||||
/* Product cards (line-level) */
|
||||
.grid-lines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
|
||||
.line {
|
||||
padding: 32px 32px 28px;
|
||||
border-right: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
display: flex; flex-direction: column; gap: 14px;
|
||||
}
|
||||
.section--dark .grid-lines { border-color: rgba(255,255,255,0.12); }
|
||||
.section--dark .line { background: transparent; border-color: rgba(255,255,255,0.12); }
|
||||
.line__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
|
||||
.line__name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
|
||||
.line__name sup { color: var(--accent); font-size: 13px; vertical-align: super; }
|
||||
.line__code { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); }
|
||||
.section--dark .line__code { color: rgba(255,255,255,0.55); }
|
||||
.line__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
|
||||
.line p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
|
||||
.section--dark .line p { color: rgba(255,255,255,0.78); }
|
||||
|
||||
.line__specs {
|
||||
display: grid; grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px 16px; padding-top: 12px; border-top: 1px dashed var(--border);
|
||||
font-family: var(--font-mono); font-size: 12px;
|
||||
}
|
||||
.section--dark .line__specs { border-color: rgba(255,255,255,0.18); }
|
||||
.line__specs dt { color: var(--muted); letter-spacing: 0.06em; }
|
||||
.section--dark .line__specs dt { color: rgba(255,255,255,0.55); }
|
||||
.line__specs dd { margin: 0; color: var(--fg); }
|
||||
.section--dark .line__specs dd { color: #fff; }
|
||||
|
||||
.line__cta {
|
||||
align-self: flex-start;
|
||||
font-size: 13px; font-weight: 600;
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
border-bottom: 1px solid var(--fg); padding-bottom: 2px;
|
||||
}
|
||||
.section--dark .line__cta { color: #fff; border-color: var(--accent); }
|
||||
.line__cta:hover { color: var(--accent); }
|
||||
|
||||
/* Spec table (datasheet) */
|
||||
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
||||
.spec-table th, .spec-table td {
|
||||
text-align: left; padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.spec-table th {
|
||||
font-family: var(--font-mono); font-size: 11px;
|
||||
letter-spacing: 0.18em; text-transform: uppercase;
|
||||
color: var(--muted); font-weight: 500;
|
||||
background: #FAFBFC;
|
||||
}
|
||||
.spec-table td:first-child { font-weight: 500; color: var(--fg); }
|
||||
.spec-table td { color: var(--muted); font-family: var(--font-mono); font-size: 13px; }
|
||||
.spec-table tr:last-child td { border-bottom: 0; }
|
||||
|
||||
/* CTA strip */
|
||||
.cta-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||||
.cta-strip__inner { padding: 56px 0; display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 48px; align-items: center; }
|
||||
.cta-strip h2 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 8px; }
|
||||
.cta-strip p { margin: 0; color: var(--muted); max-width: 56ch; }
|
||||
.cta-strip__actions { display: flex; gap: 12px; justify-self: end; flex-wrap: wrap; }
|
||||
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
|
||||
.btn--accent { background: var(--accent); color: var(--accent-ink); }
|
||||
.btn--accent:hover { background: #FFD96A; }
|
||||
.btn--ink { background: var(--fg); color: #fff; }
|
||||
.btn--ink:hover { background: #2A3942; }
|
||||
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
|
||||
.btn--ghost:hover { border-color: #fff; }
|
||||
.btn--ghost-dark { background: transparent; color: var(--fg); border-color: var(--border); }
|
||||
.btn--ghost-dark:hover { border-color: var(--fg); }
|
||||
.btn .arr { width: 14px; height: 14px; }
|
||||
|
||||
/* Footer (shared) */
|
||||
.footer { background: var(--bg); color: rgba(255,255,255,0.78); padding: 64px 0 32px; }
|
||||
.footer__top { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.12); }
|
||||
.footer h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 16px; }
|
||||
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
|
||||
.footer ul a { font-size: 14.5px; color: rgba(255,255,255,0.85); border-bottom: 1px solid transparent; }
|
||||
.footer ul a:hover { border-bottom-color: var(--accent); }
|
||||
.footer__brand p { margin: 14px 0 0; max-width: 32ch; font-size: 14px; color: rgba(255,255,255,0.6); }
|
||||
.footer__bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
.section__head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
|
||||
.grid-lines { grid-template-columns: 1fr; }
|
||||
.footer__top { grid-template-columns: 1fr 1fr; }
|
||||
.cta-strip__inner { grid-template-columns: 1fr; }
|
||||
.cta-strip__actions { justify-self: start; }
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
:root { --gutter: 20px; }
|
||||
.nav { display: none; }
|
||||
.nav-toggle { display: inline-flex; }
|
||||
.topbar__inner { gap: 12px; }
|
||||
.section { padding: 56px 0; }
|
||||
.line { padding: 24px; }
|
||||
.footer__top, .grid-lines { grid-template-columns: 1fr; }
|
||||
.footer__top { gap: 32px; }
|
||||
.footer__bot { flex-direction: column; align-items: flex-start; gap: 8px; }
|
||||
.cat-nav { top: var(--header-h); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="topbar">
|
||||
<div class="container topbar__inner">
|
||||
<a href="index.html" class="brand" aria-label="JEI South Africa — home">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa <span class="accent">·</span> <span class="accent">Built for Industry</span></span>
|
||||
</a>
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<a href="products.html" class="is-active">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">Request a quote</a>
|
||||
</nav>
|
||||
<button class="nav-toggle" aria-label="Open menu" aria-controls="nav-drawer" aria-expanded="false">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="nav-drawer" id="nav-drawer" aria-hidden="true">
|
||||
<div class="nav-drawer__top">
|
||||
<a href="index.html" class="brand"><span class="brand__je">JE</span><span class="brand__i">i</span><span class="brand__sub">South Africa</span></a>
|
||||
<button class="nav-toggle" aria-label="Close menu" data-close><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"/></svg></button>
|
||||
</div>
|
||||
<a href="products.html">Products</a>
|
||||
<a href="index.html#industries">Industries</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="contact.html" class="btn btn--accent nav-drawer__cta">Request a quote</a>
|
||||
</div>
|
||||
|
||||
<!-- Page hero -->
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<div class="page-hero__crumb"><a href="index.html">Home</a> / Products</div>
|
||||
<h1>The JEI catalogue — magnetic drills, annular cutters, fabrication.</h1>
|
||||
<p>Every product line below is available from JEI South Africa. Specs are indicative — datasheets and lead times come back the same business day on request.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- In-page section nav -->
|
||||
<nav class="cat-nav" aria-label="Product categories">
|
||||
<div class="cat-nav__inner">
|
||||
<a href="#drills"><span class="num">01</span> Magnetic drills</a>
|
||||
<a href="#cutters"><span class="num">02</span> Annular cutters</a>
|
||||
<a href="#cordless"><span class="num">03</span> Cordless</a>
|
||||
<a href="#rail"><span class="num">04</span> Rail drills</a>
|
||||
<a href="#pneumatic"><span class="num">05</span> Pneumatic</a>
|
||||
<a href="#fabrication"><span class="num">06</span> Fabrication</a>
|
||||
<a href="#accessories"><span class="num">07</span> Accessories</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 01 Magnetic drills -->
|
||||
<section class="section" id="drills">
|
||||
<div class="container">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow">01 — Magnetic drills</p>
|
||||
<h2>Electric magnetic base drills</h2>
|
||||
</div>
|
||||
<p>The core of the JEI range. Single-speed, two-speed and four-speed models for plate, structural steel and pipe. All supplied with safety strap, guard and pilot pin.</p>
|
||||
</div>
|
||||
<div class="grid-lines">
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">JEi MagDrill 32</div>
|
||||
<div class="line__code">JMD-32-1PH</div>
|
||||
</div>
|
||||
<div class="line__tag">Single speed · 1100W</div>
|
||||
<p>Workhorse single-speed mag drill for general fabrication. Weldon 19mm shank, 32mm cutter capacity, 50mm cutting depth. Available in 110V and 220V.</p>
|
||||
<dl class="line__specs">
|
||||
<dt>Motor</dt><dd>1100 W</dd>
|
||||
<dt>Speed</dt><dd>450 rpm</dd>
|
||||
<dt>Magnet</dt><dd>13000 N</dd>
|
||||
<dt>Weight</dt><dd>13.5 kg</dd>
|
||||
</dl>
|
||||
<a class="line__cta" href="contact.html">Request datasheet →</a>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">MagBeast<sup>®</sup> HM 50</div>
|
||||
<div class="line__code">MB-HM-50</div>
|
||||
</div>
|
||||
<div class="line__tag">4-speed · Heavy duty</div>
|
||||
<p>Premium heavy-duty mag drill with 4-speed mechanical gearbox and high-adhesion magnet. For prolonged cutting cycles and large-diameter cutters up to 50mm.</p>
|
||||
<dl class="line__specs">
|
||||
<dt>Motor</dt><dd>1800 W</dd>
|
||||
<dt>Speeds</dt><dd>4 mechanical</dd>
|
||||
<dt>Magnet</dt><dd>16500 N</dd>
|
||||
<dt>Cutter</dt><dd>Ø 50 mm</dd>
|
||||
</dl>
|
||||
<a class="line__cta" href="contact.html">Request datasheet →</a>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">JEi LowPro 35</div>
|
||||
<div class="line__code">JLP-35</div>
|
||||
</div>
|
||||
<div class="line__tag">Low profile · 1100W</div>
|
||||
<p>Short-body mag drill for tight spaces, beam flanges, and confined structural work. 110mm height from the magnet face to the cutter centre line.</p>
|
||||
<dl class="line__specs">
|
||||
<dt>Height</dt><dd>110 mm</dd>
|
||||
<dt>Cutter</dt><dd>Ø 35 mm</dd>
|
||||
<dt>Magnet</dt><dd>12000 N</dd>
|
||||
<dt>Weight</dt><dd>11.0 kg</dd>
|
||||
</dl>
|
||||
<a class="line__cta" href="contact.html">Request datasheet →</a>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">JEi MagDrill 50</div>
|
||||
<div class="line__code">JMD-50-2SP</div>
|
||||
</div>
|
||||
<div class="line__tag">2-speed · 1500W</div>
|
||||
<p>Two-speed mid-duty mag drill for fabricators running both small (12–20mm) and large (35–50mm) cutters. Electronic speed control and overload protection.</p>
|
||||
<dl class="line__specs">
|
||||
<dt>Motor</dt><dd>1500 W</dd>
|
||||
<dt>Speeds</dt><dd>2 mechanical</dd>
|
||||
<dt>Magnet</dt><dd>15500 N</dd>
|
||||
<dt>Cutter</dt><dd>Ø 50 mm</dd>
|
||||
</dl>
|
||||
<a class="line__cta" href="contact.html">Request datasheet →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 02 Annular cutters -->
|
||||
<section class="section section--alt" id="cutters">
|
||||
<div class="container">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow">02 — Annular cutters</p>
|
||||
<h2>Annular broaching cutters — HSS & TCT</h2>
|
||||
</div>
|
||||
<p>Weldon 19mm shank. Available in 12–60mm diameters, 1mm increments, 30mm and 50mm cutting depths. Bulk pricing and bespoke diameters on request.</p>
|
||||
</div>
|
||||
<div class="grid-lines">
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">Turbo™ HSS Cutter</div>
|
||||
<div class="line__code">T-HSS-30</div>
|
||||
</div>
|
||||
<div class="line__tag">HSS · 30mm depth</div>
|
||||
<p>General-purpose HSS annular cutter for mild steel, structural steel, and non-ferrous metals. Standard Weldon 19mm shank, M16x1.5 thread.</p>
|
||||
<dl class="line__specs">
|
||||
<dt>Range</dt><dd>Ø 12 – 60 mm</dd>
|
||||
<dt>Depth</dt><dd>30 / 50 mm</dd>
|
||||
<dt>Shank</dt><dd>Weldon 19</dd>
|
||||
<dt>Coating</dt><dd>Bright / TiN</dd>
|
||||
</dl>
|
||||
<a class="line__cta" href="contact.html">Request datasheet →</a>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">Turbo™ Tough TCT</div>
|
||||
<div class="line__code">T-TCT-PREM-50</div>
|
||||
</div>
|
||||
<div class="line__tag">TCT · Premium grade</div>
|
||||
<p>Premium-grade TCT annular cutters for stainless, high-alloy steels, and hard metals. Significantly longer tool life than HSS on tough substrates.</p>
|
||||
<dl class="line__specs">
|
||||
<dt>Range</dt><dd>Ø 12 – 60 mm</dd>
|
||||
<dt>Depth</dt><dd>35 / 50 mm</dd>
|
||||
<dt>Carbide</dt><dd>K20 – K30</dd>
|
||||
<dt>Coating</dt><dd>TiAlN optional</dd>
|
||||
</dl>
|
||||
<a class="line__cta" href="contact.html">Request datasheet →</a>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">JEi Car Reamer</div>
|
||||
<div class="line__code">JCR-T</div>
|
||||
</div>
|
||||
<div class="line__tag">Turbo™ line · Reaming</div>
|
||||
<p>Turbo Car Reamer — for cleaning up and finishing holes cut by annular cutters, particularly in automotive and body-in-white applications.</p>
|
||||
<dl class="line__specs">
|
||||
<dt>Range</dt><dd>Ø 6 – 32 mm</dd>
|
||||
<dt>Shank</dt><dd>Weldon 19</dd>
|
||||
<dt>Flutes</dt><dd>6</dd>
|
||||
<dt>Material</dt><dd>HSS-Co</dd>
|
||||
</dl>
|
||||
<a class="line__cta" href="contact.html">Request datasheet →</a>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">JEi Step Reamer</div>
|
||||
<div class="line__code">JSR-T</div>
|
||||
</div>
|
||||
<div class="line__tag">Turbo™ line · Stepping</div>
|
||||
<p>Turbo Step Reamer — for stepping up hole diameters without changing cutters. Used in fabrication and structural reaming.</p>
|
||||
<dl class="line__specs">
|
||||
<dt>Steps</dt><dd>3 – 5 steps</dd>
|
||||
<dt>Range</dt><dd>Ø 6 – 35 mm</dd>
|
||||
<dt>Shank</dt><dd>Weldon 19</dd>
|
||||
<dt>Coating</dt><dd>Bright</dd>
|
||||
</dl>
|
||||
<a class="line__cta" href="contact.html">Request datasheet →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 03 Cordless (dark) -->
|
||||
<section class="section section--dark" id="cordless">
|
||||
<div class="container">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow on-dark">03 — Cordless</p>
|
||||
<h2>MiniBeast™ Cordless</h2>
|
||||
</div>
|
||||
<p>For sites without mains power — generator-free overhead work, shipyards, bridge decks, and remote structural repairs. Shares the JEI 18V/36V battery platform.</p>
|
||||
</div>
|
||||
<div class="grid-lines">
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">MiniBeast™ Cordless 18</div>
|
||||
<div class="line__code">MB-CL-18</div>
|
||||
</div>
|
||||
<div class="line__tag">Cordless · 18V platform</div>
|
||||
<p>Compact 18V cordless mag drill. 14mm cutter capacity, brushless motor, magnetic LED, integrated safety strap. Body only — batteries sold separately or in kit.</p>
|
||||
<dl class="line__specs">
|
||||
<dt>Voltage</dt><dd>18 V DC</dd>
|
||||
<dt>Cutter</dt><dd>Ø 4 – 14 mm</dd>
|
||||
<dt>Magnet</dt><dd>8000 N</dd>
|
||||
<dt>Weight</dt><dd>4.6 kg</dd>
|
||||
</dl>
|
||||
<a class="line__cta" href="contact.html">Request datasheet →</a>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">MiniBeast™ Cordless 36</div>
|
||||
<div class="line__code">MB-CL-36</div>
|
||||
</div>
|
||||
<div class="line__tag">Cordless · 36V platform</div>
|
||||
<p>Higher-power 36V cordless mag drill. 25mm cutter capacity, brushless motor, two-speed gearbox. Shares the same battery as the rest of the JEI 36V cordless range.</p>
|
||||
<dl class="line__specs">
|
||||
<dt>Voltage</dt><dd>36 V DC</dd>
|
||||
<dt>Cutter</dt><dd>Ø 12 – 25 mm</dd>
|
||||
<dt>Speeds</dt><dd>2 mechanical</dd>
|
||||
<dt>Weight</dt><dd>6.8 kg</dd>
|
||||
</dl>
|
||||
<a class="line__cta" href="contact.html">Request datasheet →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 04 Rail drills -->
|
||||
<section class="section" id="rail">
|
||||
<div class="container">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow">04 — Rail drills</p>
|
||||
<h2>Railbeast™ rail drilling machines</h2>
|
||||
</div>
|
||||
<p>Specialist mag drills for railway maintenance — designed to drill and ream fishplate, baseplate and rail-web holes in the field. Battery or 110V site-supply.</p>
|
||||
</div>
|
||||
<div class="grid-lines">
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">Railbeast™ RB-1</div>
|
||||
<div class="line__code">RB-1</div>
|
||||
</div>
|
||||
<div class="line__tag">Rail · Field-portable</div>
|
||||
<p>Hand-held rail drill for joint bar and baseplate holes. Reversible feed, integral coolant, magnetic adhesion to rail. Spares and consumables held in JHB.</p>
|
||||
<dl class="line__specs">
|
||||
<dt>Hole Ø</dt><dd>22 – 36 mm</dd>
|
||||
<dt>Power</dt><dd>110V / 18V DC</dd>
|
||||
<dt>Magnet</dt><dd>Rail-specific</dd>
|
||||
<dt>Weight</dt><dd>9.4 kg</dd>
|
||||
</dl>
|
||||
<a class="line__cta" href="contact.html">Request datasheet →</a>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">Railbeast™ RB-Pro</div>
|
||||
<div class="line__code">RB-PRO</div>
|
||||
</div>
|
||||
<div class="line__tag">Rail · Track surveyor</div>
|
||||
<p>Pro version with two-speed gearbox and depth-stop for batch drilling. Used by Transnet and Spoornet contractors for fishplate renewal.</p>
|
||||
<dl class="line__specs">
|
||||
<dt>Hole Ø</dt><dd>22 – 50 mm</dd>
|
||||
<dt>Speeds</dt><dd>2 mechanical</dd>
|
||||
<dt>Depth stop</dt><dd>Adjustable</dd>
|
||||
<dt>Coolant</dt><dd>Integral</dd>
|
||||
</dl>
|
||||
<a class="line__cta" href="contact.html">Request datasheet →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 05 Pneumatic (alt) -->
|
||||
<section class="section section--alt" id="pneumatic">
|
||||
<div class="container">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow">05 — Pneumatic</p>
|
||||
<h2>AirBeast™ pneumatic magnetic drills</h2>
|
||||
</div>
|
||||
<p>Air-driven mag drills for hazardous-area work — petrochemical plants, refineries, underground mining, and any site where electric sparks are a non-starter.</p>
|
||||
</div>
|
||||
<div class="grid-lines">
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">AirBeast™ AB-40A</div>
|
||||
<div class="line__code">AB-40A</div>
|
||||
</div>
|
||||
<div class="line__tag">Pneumatic · 1500W air</div>
|
||||
<p>Mid-duty pneumatic mag drill. 40mm cutter capacity, two-speed air motor, lubrication-free vane. ATEX-compatible variants available on request.</p>
|
||||
<dl class="line__specs">
|
||||
<dt>Air req.</dt><dd>1500 l/min</dd>
|
||||
<dt>Cutter</dt><dd>Ø 40 mm</dd>
|
||||
<dt>Speed</dt><dd>2 mechanical</dd>
|
||||
<dt>ATEX</dt><dd>On request</dd>
|
||||
</dl>
|
||||
<a class="line__cta" href="contact.html">Request datasheet →</a>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">AirBeast™ AB-HD</div>
|
||||
<div class="line__code">AB-HD</div>
|
||||
</div>
|
||||
<div class="line__tag">Pneumatic · Heavy duty</div>
|
||||
<p>Heavy-duty pneumatic mag drill for underground mining and long pipe runs. Geared air motor, magnetic LED, four-roller guide.</p>
|
||||
<dl class="line__specs">
|
||||
<dt>Air req.</dt><dd>2200 l/min</dd>
|
||||
<dt>Cutter</dt><dd>Ø 50 mm</dd>
|
||||
<dt>Guide</dt><dd>4-roller</dd>
|
||||
<dt>Coolant</dt><dd>Through-spindle</dd>
|
||||
</dl>
|
||||
<a class="line__cta" href="contact.html">Request datasheet →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 06 Fabrication equipment -->
|
||||
<section class="section" id="fabrication">
|
||||
<div class="container">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow">06 — Fabrication equipment</p>
|
||||
<h2>Plate, pipe & fabrication tooling</h2>
|
||||
</div>
|
||||
<p>The range around the mag drill — bevelling, punching, cutting, grinding. For fabrication shops that need everything on one purchase order.</p>
|
||||
</div>
|
||||
|
||||
<!-- Datasheet-style table -->
|
||||
<table class="spec-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:28%">Category</th>
|
||||
<th>Range</th>
|
||||
<th>Indicative spec</th>
|
||||
<th>Code</th>
|
||||
<th style="text-align:right;">Availability</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Plate bevelling — manual, electric</td>
|
||||
<td>0–45° bevel, 8–25mm plate</td>
|
||||
<td>110V / 220V · 1500W</td>
|
||||
<td>JE-PB-E</td>
|
||||
<td style="text-align:right;"><span class="pill pill--stock">In stock</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Plate bevelling — manual, pneumatic</td>
|
||||
<td>0–45° bevel, 8–25mm plate</td>
|
||||
<td>1500 l/min air</td>
|
||||
<td>JE-PB-P</td>
|
||||
<td style="text-align:right;"><span class="pill pill--stock">In stock</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Plate bevelling — manual, cordless</td>
|
||||
<td>0–45° bevel, 6–18mm plate</td>
|
||||
<td>18V · brushless</td>
|
||||
<td>JE-PB-CL</td>
|
||||
<td style="text-align:right;"><span class="pill pill--stock">In stock</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Plate bevelling — automatic, walking</td>
|
||||
<td>0–60° bevel, 6–40mm plate</td>
|
||||
<td>110V · walking drive</td>
|
||||
<td>JE-PB-AUTO</td>
|
||||
<td style="text-align:right;"><span class="pill pill--order">On order</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pipe bevelling — portable</td>
|
||||
<td>Ø 25 – 350 mm pipe</td>
|
||||
<td>ID-mount, auto-feed</td>
|
||||
<td>JE-PB-PIPE</td>
|
||||
<td style="text-align:right;"><span class="pill pill--stock">In stock</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hole punching — hydraulic</td>
|
||||
<td>Up to Ø 25 mm through 12mm plate</td>
|
||||
<td>700 bar · single-acting</td>
|
||||
<td>JE-HP-H</td>
|
||||
<td style="text-align:right;"><span class="pill pill--stock">In stock</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Metal cutting saws — cold cut</td>
|
||||
<td>Ø 350 mm blade, 110/220V</td>
|
||||
<td>2.2 kW · 1300 rpm</td>
|
||||
<td>JE-CS-350</td>
|
||||
<td style="text-align:right;"><span class="pill pill--stock">In stock</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Industrial belt grinders</td>
|
||||
<td>50 × 2000 mm belt</td>
|
||||
<td>4 kW · 3000 rpm</td>
|
||||
<td>JE-BG-50</td>
|
||||
<td style="text-align:right;"><span class="pill pill--stock">In stock</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tube & pipe notchers</td>
|
||||
<td>Ø 25 – 90 mm tube</td>
|
||||
<td>0–60° notch angle</td>
|
||||
<td>JE-TN-90</td>
|
||||
<td style="text-align:right;"><span class="pill pill--bespoke">Bespoke</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<style>
|
||||
.pill {
|
||||
display: inline-block;
|
||||
font-family: var(--font-mono); font-size: 11px;
|
||||
letter-spacing: 0.1em; padding: 3px 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: #FAFBFC;
|
||||
}
|
||||
.pill--stock { color: #1B5E3F; border-color: #1B5E3F; background: #EAF5EE; }
|
||||
.pill--order { color: #8A4B0A; border-color: #8A4B0A; background: #FBF1E2; }
|
||||
.pill--bespoke { color: var(--muted); }
|
||||
</style>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 07 Accessories (dark) -->
|
||||
<section class="section section--dark" id="accessories">
|
||||
<div class="container">
|
||||
<div class="section__head">
|
||||
<div>
|
||||
<p class="eyebrow on-dark">07 — Accessories</p>
|
||||
<h2>Consumables, adaptors, lubricants</h2>
|
||||
</div>
|
||||
<p>The bits that keep the machine cutting — pilot pins, arbors, cutting fluids, vac pads for pipe work, tapping attachments, and tool sets.</p>
|
||||
</div>
|
||||
<div class="grid-lines">
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">Pilot Pins — 80 / 100 / 120mm</div>
|
||||
<div class="line__code">JE-PP-80 / 100 / 120</div>
|
||||
</div>
|
||||
<div class="line__tag">Consumable</div>
|
||||
<p>Hardened pilot pins, Weldon-suitable. Three lengths: 80mm (30mm depth cutters), 100mm (50mm depth), 120mm (long-reach). Sold in packs of 5.</p>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">Industrial arbors & adaptors</div>
|
||||
<div class="line__code">JE-ARBOR-MK2</div>
|
||||
</div>
|
||||
<div class="line__tag">Adaptor</div>
|
||||
<p>Morse taper, 1/2" and 3/4" Jacobs chuck adaptors, extension arbors for deep-reach applications. Custom adaptors on request.</p>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">Cutting fluid — JEiCut 5L</div>
|
||||
<div class="line__code">JE-CUT-5L</div>
|
||||
</div>
|
||||
<div class="line__tag">Consumable</div>
|
||||
<p>Water-soluble cutting fluid, 5L and 25L containers. For mag drilling and annular cutting in steel, stainless and aluminium. SDS available.</p>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">Vac pads & pipe kits</div>
|
||||
<div class="line__code">JE-VAC-PAD</div>
|
||||
</div>
|
||||
<div class="line__tag">Accessory</div>
|
||||
<p>Vacuum mounting pads for non-magnetic surfaces (stainless, aluminium). Pipe-mounting kits for Ø 80–350mm pipe. Enables mag-drill use on vertical pipe and tank work.</p>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">Tapping attachments</div>
|
||||
<div class="line__code">JE-TAP-M3M16</div>
|
||||
</div>
|
||||
<div class="line__tag">Attachment</div>
|
||||
<p>Reversible tapping attachment for mag drills — M3 to M16, with auto-reverse feed. Cuts tapping time on steel plate and structural sections.</p>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="line__head">
|
||||
<div class="line__name">Cutter sets — HSS & TCT</div>
|
||||
<div class="line__code">JE-SET-HSS / TCT</div>
|
||||
</div>
|
||||
<div class="line__tag">Bundle</div>
|
||||
<p>Pre-packed cutter sets in carry case. HSS set: 6 cutters, 12–22mm, plus pilot pin. TCT set: 5 cutters, 14–30mm, plus pilot pin and safety glasses.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA strip -->
|
||||
<section class="cta-strip">
|
||||
<div class="container cta-strip__inner">
|
||||
<div>
|
||||
<p class="eyebrow">Pricing & lead time</p>
|
||||
<h2>Quote, datasheet, or on-site demo — same-day response.</h2>
|
||||
<p>Tell us what you need to cut, the material, the diameter, and the 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"/></svg>
|
||||
</a>
|
||||
<a href="about.html" class="btn btn--ghost-dark">About JEI ZA</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer__top">
|
||||
<div class="footer__brand">
|
||||
<a href="index.html" class="brand">
|
||||
<span class="brand__je">JE</span><span class="brand__i">i</span>
|
||||
<span class="brand__sub">South Africa</span>
|
||||
</a>
|
||||
<p>Magnetic drilling and annular cutting — stocked and supported in South Africa. Partner of JEI Solutions (UK).</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Products</h4>
|
||||
<ul>
|
||||
<li><a href="products.html#drills">Magnetic drills</a></li>
|
||||
<li><a href="products.html#cutters">Annular cutters</a></li>
|
||||
<li><a href="products.html#cordless">Cordless</a></li>
|
||||
<li><a href="products.html#fabrication">Fabrication</a></li>
|
||||
<li><a href="products.html#accessories">Accessories</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Company</h4>
|
||||
<ul>
|
||||
<li><a href="about.html">About JEI ZA</a></li>
|
||||
<li><a href="index.html#industries">Industries</a></li>
|
||||
<li><a href="about.html#uk-partner">JEI UK partner</a></li>
|
||||
<li><a href="about.html#quality">Quality & warranty</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Contact</h4>
|
||||
<ul>
|
||||
<li><a href="contact.html">Request a quote</a></li>
|
||||
<li><a href="tel:+27115550100">+27 (0)11 555 0100</a></li>
|
||||
<li><a href="mailto:sales@jei.co.za">sales@jei.co.za</a></li>
|
||||
<li><a href="https://wa.me/27715550100">WhatsApp</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__bot">
|
||||
<div>© 2026 JEI South Africa</div>
|
||||
<div>EN · ZAR</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Mobile drawer (shared)
|
||||
(function () {
|
||||
var toggle = document.querySelector('.topbar .nav-toggle');
|
||||
var drawer = document.getElementById('nav-drawer');
|
||||
if (!toggle || !drawer) return;
|
||||
function setOpen(open) {
|
||||
drawer.classList.toggle('is-open', open);
|
||||
drawer.setAttribute('aria-hidden', open ? 'false' : 'true');
|
||||
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
document.body.style.overflow = open ? 'hidden' : '';
|
||||
}
|
||||
toggle.addEventListener('click', function () { setOpen(true); });
|
||||
drawer.querySelectorAll('[data-close]').forEach(function (b) { b.addEventListener('click', function () { setOpen(false); }); });
|
||||
drawer.querySelectorAll('a').forEach(function (a) { a.addEventListener('click', function () { setOpen(false); }); });
|
||||
})();
|
||||
|
||||
// In-page nav active state on scroll
|
||||
(function () {
|
||||
var links = document.querySelectorAll('.cat-nav a');
|
||||
if (!links.length) return;
|
||||
var map = {};
|
||||
links.forEach(function (a) {
|
||||
var id = a.getAttribute('href').replace('#', '');
|
||||
var sec = document.getElementById(id);
|
||||
if (sec) map[id] = a;
|
||||
});
|
||||
function update() {
|
||||
var y = window.scrollY + 200;
|
||||
var current = null;
|
||||
Object.keys(map).forEach(function (id) {
|
||||
var sec = document.getElementById(id);
|
||||
if (sec && sec.offsetTop <= y) current = id;
|
||||
});
|
||||
Object.keys(map).forEach(function (id) { map[id].classList.toggle('is-active', id === current); });
|
||||
}
|
||||
window.addEventListener('scroll', update, { passive: true });
|
||||
update();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
19
products.html.artifact.json
Normal file
19
products.html.artifact.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"version": 1,
|
||||
"kind": "html",
|
||||
"title": "products.html",
|
||||
"entry": "products.html",
|
||||
"renderer": "html",
|
||||
"status": "complete",
|
||||
"exports": [
|
||||
"html",
|
||||
"pdf",
|
||||
"zip"
|
||||
],
|
||||
"createdAt": "2026-06-13T15:04:58.847Z",
|
||||
"updatedAt": "2026-06-13T15:04:58.847Z",
|
||||
"metadata": {
|
||||
"inferred": true,
|
||||
"reconciled": true
|
||||
}
|
||||
}
|
||||
BIN
quality-fixed-v2.png
Normal file
BIN
quality-fixed-v2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
quality-fixed-v3.png
Normal file
BIN
quality-fixed-v3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
quality-fixed-v4.png
Normal file
BIN
quality-fixed-v4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
BIN
quality-fixed.png
Normal file
BIN
quality-fixed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
quality-section.png
Normal file
BIN
quality-section.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Loading…
Reference in a new issue