File: /virtual/moonarc/public_html/index.html.bak
<!DOCTYPE html>
<html lang="en-ZA">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Top Cut Engineering – Precision Engineering Solutions in South Africa</title>
<meta name="description" content="Top Cut Engineering provides precision engineering, metal fabrication, and CNC machining services across South Africa. Quality you can trust." />
<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=Inter:opsz,wght@14..32,300;14..32,400;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<style>
/* ── Reset & Base ── */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #c0392b;
--primary-dark: #a93226;
--primary-light: #e74c3c;
--secondary: #2c3e50;
--accent: #f39c12;
--light: #f8f9fa;
--dark: #1a1a2e;
--gray: #6c757d;
--white: #ffffff;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
--radius: 8px;
--transition: 0.3s ease;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
color: var(--dark);
background: var(--white);
line-height: 1.6;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
img {
max-width: 100%;
display: block;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.section-padding {
padding: 80px 0;
}
.section-title {
font-size: 2.4rem;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 12px;
color: var(--dark);
}
.section-title span {
color: var(--primary);
}
.section-subtitle {
font-size: 1.1rem;
color: var(--gray);
max-width: 640px;
margin-bottom: 48px;
}
.text-center {
text-align: center;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 36px;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
border: none;
cursor: pointer;
transition: var(--transition);
background: var(--primary);
color: var(--white);
}
.btn:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(192, 57, 43, 0.35);
}
.btn-outline {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: var(--white);
border-color: var(--primary);
}
.btn-white {
background: var(--white);
color: var(--primary);
}
.btn-white:hover {
background: var(--light);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25);
}
/* ── Top Bar ── */
.topbar {
background: var(--secondary);
color: rgba(255, 255, 255, 0.8);
font-size: 0.85rem;
padding: 8px 0;
border-bottom: 2px solid var(--primary);
}
.topbar .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px 16px;
}
.topbar a {
color: rgba(255, 255, 255, 0.8);
transition: var(--transition);
}
.topbar a:hover {
color: var(--white);
}
.topbar .socials {
display: flex;
gap: 16px;
}
.topbar .socials a {
font-size: 0.95rem;
}
/* ── Navbar ── */
.navbar {
background: var(--white);
padding: 16px 0;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
position: sticky;
top: 0;
z-index: 999;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.logo i {
color: var(--primary);
font-size: 2rem;
}
.logo span {
color: var(--primary);
}
.nav-links {
display: flex;
gap: 32px;
align-items: center;
}
.nav-links a {
font-weight: 500;
font-size: 0.95rem;
color: var(--secondary);
transition: var(--transition);
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--primary);
transition: var(--transition);
}
.nav-links a:hover::after,
.nav-links a.active::after {
width: 100%;
}
.nav-links a:hover {
color: var(--primary);
}
.nav-links .btn-nav {
padding: 10px 28px;
border-radius: 50px;
background: var(--primary);
color: var(--white) !important;
font-weight: 600;
}
.nav-links .btn-nav::after {
display: none;
}
.nav-links .btn-nav:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(192, 57, 43, 0.3);
}
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
background: none;
border: none;
padding: 4px;
}
.hamburger span {
display: block;
width: 28px;
height: 3px;
background: var(--secondary);
border-radius: 4px;
transition: var(--transition);
}
/* ── Hero ── */
.hero {
background: linear-gradient(135deg, #0f0f1f 0%, #1a1a2e 50%, #2c3e50 100%);
color: var(--white);
padding: 100px 0 80px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -30%;
right: -10%;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(192, 57, 43, 0.15) 0%, transparent 70%);
pointer-events: none;
}
.hero .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.hero-content h1 {
font-size: 3.6rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.03em;
margin-bottom: 20px;
}
.hero-content h1 span {
color: var(--accent);
}
.hero-content p {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.75);
max-width: 520px;
margin-bottom: 32px;
line-height: 1.7;
}
.hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.hero-stats {
display: flex;
gap: 48px;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-stats .stat h3 {
font-size: 2.2rem;
font-weight: 800;
color: var(--accent);
}
.hero-stats .stat p {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
margin: 0;
}
.hero-image {
display: flex;
justify-content: center;
align-items: center;
}
.hero-image .img-placeholder {
width: 100%;
max-width: 500px;
aspect-ratio: 4/3;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
text-align: center;
padding: 40px;
backdrop-filter: blur(4px);
}
.hero-image .img-placeholder i {
font-size: 5rem;
color: var(--primary-light);
opacity: 0.7;
}
.hero-image .img-placeholder p {
color: rgba(255, 255, 255, 0.5);
font-size: 0.95rem;
}
/* ── Trust Bar ── */
.trust-bar {
background: var(--light);
padding: 32px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.trust-bar .container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
gap: 24px;
}
.trust-item {
display: flex;
align-items: center;
gap: 12px;
font-weight: 500;
color: var(--secondary);
}
.trust-item i {
color: var(--primary);
font-size: 1.4rem;
}
/* ── About ── */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.about-image .img-placeholder {
background: linear-gradient(145deg, #f0f2f5, #e8eaed);
border-radius: 16px;
aspect-ratio: 4/3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--gray);
}
.about-image .img-placeholder i {
font-size: 4rem;
color: var(--primary-light);
opacity: 0.6;
}
.about-text h2 {
font-size: 2.2rem;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.about-text h2 span {
color: var(--primary);
}
.about-text p {
color: var(--gray);
margin-bottom: 16px;
}
.about-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 24px;
margin-top: 24px;
}
.about-features li {
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
}
.about-features li i {
color: var(--primary);
font-size: 1.1rem;
}
/* ── Services ── */
.services {
background: var(--light);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 30px;
}
.service-card {
background: var(--white);
padding: 36px 28px;
border-radius: 16px;
box-shadow: var(--shadow);
transition: var(--transition);
border-bottom: 4px solid transparent;
}
.service-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
border-bottom-color: var(--primary);
}
.service-card .icon {
width: 64px;
height: 64px;
background: rgba(192, 57, 43, 0.08);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: var(--primary);
margin-bottom: 20px;
}
.service-card h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 10px;
}
.service-card p {
color: var(--gray);
font-size: 0.95rem;
line-height: 1.7;
}
/* ── Projects ── */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.project-card {
background: var(--white);
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}
.project-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}
.project-card .img-placeholder {
height: 200px;
background: linear-gradient(145deg, #e8eaed, #d5d8dd);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--gray);
}
.project-card .img-placeholder i {
color: var(--primary-light);
opacity: 0.4;
}
.project-card .project-body {
padding: 24px;
}
.project-card .project-body h4 {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 6px;
}
.project-card .project-body p {
color: var(--gray);
font-size: 0.9rem;
}
.project-tag {
display: inline-block;
background: rgba(192, 57, 43, 0.08);
color: var(--primary);
font-size: 0.75rem;
font-weight: 600;
padding: 4px 14px;
border-radius: 50px;
margin-top: 10px;
letter-spacing: 0.3px;
}
/* ── Testimonials ── */
.testimonials {
background: var(--secondary);
color: var(--white);
}
.testimonials .section-title {
color: var(--white);
}
.testimonials .section-subtitle {
color: rgba(255, 255, 255, 0.6);
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.testimonial-card {
background: rgba(255, 255, 255, 0.05);
padding: 32px 28px;
border-radius: 16px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.testimonial-card .stars {
color: var(--accent);
margin-bottom: 12px;
letter-spacing: 2px;
}
.testimonial-card blockquote {
font-size: 1rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 16px;
font-style: italic;
}
.testimonial-card .author {
display: flex;
align-items: center;
gap: 14px;
}
.testimonial-card .author .avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: var(--white);
}
.testimonial-card .author .name {
font-weight: 600;
}
.testimonial-card .author .role {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.5);
}
/* ── CTA ── */
.cta {
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
color: var(--white);
text-align: center;
padding: 72px 0;
}
.cta h2 {
font-size: 2.6rem;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 12px;
}
.cta p {
font-size: 1.15rem;
opacity: 0.85;
max-width: 560px;
margin: 0 auto 32px;
}
/* ── Contact ── */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}
.contact-info h3 {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 16px;
}
.contact-info p {
color: var(--gray);
margin-bottom: 24px;
}
.contact-detail {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.contact-detail i {
width: 44px;
height: 44px;
background: rgba(192, 57, 43, 0.08);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 1.1rem;
}
.contact-detail .label {
font-weight: 600;
}
.contact-detail .value {
color: var(--gray);
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 14px 18px;
border: 1.5px solid #e2e8f0;
border-radius: var(--radius);
font-family: inherit;
font-size: 1rem;
transition: var(--transition);
background: var(--white);
margin-bottom: 16px;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.08);
}
.contact-form textarea {
resize: vertical;
min-height: 140px;
}
.contact-form .btn {
width: 100%;
justify-content: center;
}
/* ── Footer ── */
.footer {
background: #0f0f1f;
color: rgba(255, 255, 255, 0.7);
padding: 48px 0 24px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-brand .logo {
color: var(--white);
margin-bottom: 12px;
}
.footer-brand p {
font-size: 0.95rem;
max-width: 320px;
line-height: 1.7;
}
.footer h4 {
color: var(--white);
font-weight: 700;
margin-bottom: 16px;
font-size: 1.05rem;
}
.footer ul li {
margin-bottom: 10px;
}
.footer ul li a {
transition: var(--transition);
}
.footer ul li a:hover {
color: var(--white);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 0.9rem;
}
.footer-bottom .socials {
display: flex;
gap: 16px;
}
.footer-bottom .socials a {
transition: var(--transition);
}
.footer-bottom .socials a:hover {
color: var(--white);
}
/* ── Responsive ── */
@media (max-width: 992px) {
.hero .container {
grid-template-columns: 1fr;
text-align: center;
}
.hero-content p {
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
justify-content: center;
}
.hero-stats {
justify-content: center;
}
.hero-image .img-placeholder {
max-width: 100%;
}
.about-grid {
grid-template-columns: 1fr;
}
.contact-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.section-title {
font-size: 2rem;
}
.hero-content h1 {
font-size: 2.6rem;
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
gap: 16px;
padding: 24px 0;
width: 100%;
background: var(--white);
position: absolute;
top: 100%;
left: 0;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}
.nav-links.open {
display: flex;
}
.hamburger {
display: flex;
}
.topbar .container {
flex-direction: column;
align-items: center;
text-align: center;
}
.hero-content h1 {
font-size: 2.2rem;
}
.hero-stats {
gap: 24px;
flex-wrap: wrap;
}
.hero-stats .stat h3 {
font-size: 1.8rem;
}
.about-features {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.section-padding {
padding: 56px 0;
}
.cta h2 {
font-size: 2rem;
}
.services-grid {
grid-template-columns: 1fr;
}
.testimonial-grid {
grid-template-columns: 1fr;
}
.projects-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.hero-content h1 {
font-size: 1.8rem;
}
.btn {
padding: 12px 24px;
font-size: 0.9rem;
}
.container {
padding: 0 16px;
}
}
</style>
</head>
<body>
<!-- ─── TOP BAR ─── -->
<div class="topbar">
<div class="container">
<div>
<a href="tel:+27101234567"><i class="fas fa-phone-alt" style="margin-right:6px;"></i> +27 10 123 4567</a>
<span style="margin:0 12px;opacity:0.2;">|</span>
<a href="mailto:info@topcuteng.co.za"><i class="fas fa-envelope" style="margin-right:6px;"></i> info@topcuteng.co.za</a>
</div>
<div class="socials">
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<!-- ─── NAVBAR ─── -->
<nav class="navbar" id="navbar">
<div class="container">
<a href="#" class="logo">
<i class="fas fa-cogs"></i>
Top<span>Cut</span>Eng
</a>
<ul class="nav-links" id="navLinks">
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact" class="btn-nav">Get a Quote</a></li>
</ul>
<button class="hamburger" id="hamburger" aria-label="Toggle menu">
<span></span><span></span><span></span>
</button>
</div>
</nav>
<!-- ─── HERO ─── -->
<section class="hero" id="home">
<div class="container">
<div class="hero-content">
<h1>Precision Engineering <br /><span>for South Africa's Future</span></h1>
<p>
Top Cut Engineering delivers world-class CNC machining, metal fabrication,
and industrial maintenance across Gauteng, Cape Town, and beyond.
</p>
<div class="hero-buttons">
<a href="#contact" class="btn"><i class="fas fa-paper-plane"></i> Get a Free Quote</a>
<a href="#services" class="btn btn-outline" style="border-color:rgba(255,255,255,0.3);color:var(--white);">
<i class="fas fa-chevron-right"></i> Our Services
</a>
</div>
<div class="hero-stats">
<div class="stat">
<h3>15+</h3>
<p>Years of Excellence</p>
</div>
<div class="stat">
<h3>280+</h3>
<p>Projects Completed</p>
</div>
<div class="stat">
<h3>98%</h3>
<p>Client Satisfaction</p>
</div>
</div>
</div>
<div class="hero-image">
<div class="img-placeholder">
<i class="fas fa-industry"></i>
<p>Precision Engineering • CNC • Fabrication</p>
<span style="font-size:0.8rem;opacity:0.4;">SABS & ISO compliant</span>
</div>
</div>
</div>
</section>
<!-- ─── TRUST BAR ─── -->
<div class="trust-bar">
<div class="container">
<span class="trust-item"><i class="fas fa-check-circle"></i> SABS Approved</span>
<span class="trust-item"><i class="fas fa-check-circle"></i> ISO 9001:2015</span>
<span class="trust-item"><i class="fas fa-check-circle"></i> 100% SA Owned</span>
<span class="trust-item"><i class="fas fa-check-circle"></i> 24/7 Support</span>
</div>
</div>
<!-- ─── ABOUT ─── -->
<section class="section-padding" id="about">
<div class="container">
<div class="about-grid">
<div class="about-image">
<div class="img-placeholder">
<i class="fas fa-wrench"></i>
<span style="font-weight:600;color:var(--secondary);">Engineering Excellence</span>
<span style="font-size:0.9rem;color:var(--gray);">Built for African conditions</span>
</div>
</div>
<div class="about-text">
<h2>About <span>Top Cut Engineering</span></h2>
<p>
Founded in 2008, Top Cut Engineering has grown into a trusted partner for
mining, construction, and manufacturing industries across South Africa and
the SADC region.
</p>
<p>
We combine state-of-the-art CNC technology with old‑school craftsmanship
to deliver precision components, structural steelwork, and on‑site
maintenance solutions that stand up to the toughest conditions.
</p>
<ul class="about-features">
<li><i class="fas fa-check-circle"></i> CNC Milling & Turning</li>
<li><i class="fas fa-check-circle"></i> Structural Steel Fabrication</li>
<li><i class="fas fa-check-circle"></i> 3D CAD / CAM Design</li>
<li><i class="fas fa-check-circle"></i> On‑Site Installation & Repair</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ─── SERVICES ─── -->
<section class="section-padding services" id="services">
<div class="container">
<div class="text-center">
<h2 class="section-title">Our <span>Services</span></h2>
<p class="section-subtitle mx-auto">
From concept to completion — we offer a full range of engineering services
tailored to your project needs.
</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="icon"><i class="fas fa-cogs"></i></div>
<h3>CNC Machining</h3>
<p>
Precision milling, turning, and grinding for complex components
with tight tolerances up to ±0.005 mm.
</p>
</div>
<div class="service-card">
<div class="icon"><i class="fas fa-bolt"></i></div>
<h3>Metal Fabrication</h3>
<p>
Structural steel, plate work, welding, and custom metal forming
for industrial and commercial projects.
</p>
</div>
<div class="service-card">
<div class="icon"><i class="fas fa-drafting-compass"></i></div>
<h3>CAD / CAM Design</h3>
<p>
In‑house 3D modelling and toolpath programming using SolidWorks,
Mastercam, and Fusion 360.
</p>
</div>
<div class="service-card">
<div class="icon"><i class="fas fa-tools"></i></div>
<h3>Maintenance & Repair</h3>
<p>
On‑site breakdown support, preventive maintenance, and refurbishment
of industrial machinery.
</p>
</div>
<div class="service-card">
<div class="icon"><i class="fas fa-ruler-combined"></i></div>
<h3>Quality Inspection</h3>
<p>
Dimensional inspection, NDT testing, and material certification
to ensure full compliance.
</p>
</div>
<div class="service-card">
<div class="icon"><i class="fas fa-truck"></i></div>
<h3>Logistics & Installation</h3>
<p>
Nationwide delivery, crane hire, and professional on‑site installation
for large‑scale projects.
</p>
</div>
</div>
</div>
</section>
<!-- ─── PROJECTS ─── -->
<section class="section-padding" id="projects">
<div class="container">
<div class="text-center">
<h2 class="section-title">Recent <span>Projects</span></h2>
<p class="section-subtitle mx-auto">
Some of the work we've delivered for clients across South Africa.
</p>
</div>
<div class="projects-grid">
<div class="project-card">
<div class="img-placeholder"><i class="fas fa-oil-can"></i></div>
<div class="project-body">
<h4>Mining Conveyor System</h4>
<p>Custom fabricated steel structure and drive components for a platinum mine in Rustenburg.</p>
<span class="project-tag">Mining</span>
</div>
</div>
<div class="project-card">
<div class="img-placeholder"><i class="fas fa-building"></i></div>
<div class="project-body">
<h4>Structural Steel Frame</h4>
<p>Complete steel superstructure for a new warehouse facility in Cape Town harbour.</p>
<span class="project-tag">Construction</span>
</div>
</div>
<div class="project-card">
<div class="img-placeholder"><i class="fas fa-microchip"></i></div>
<div class="project-body">
<h4>CNC Machined Tooling</h4>
<p>High‑precision injection mould tooling for the automotive supply chain in Port Elizabeth.</p>
<span class="project-tag">Manufacturing</span>
</div>
</div>
</div>
</div>
</section>
<!-- ─── TESTIMONIALS ─── -->
<section class="section-padding testimonials" id="testimonials">
<div class="container">
<div class="text-center">
<h2 class="section-title">What Our <span style="color:var(--accent);">Clients Say</span></h2>
<p class="section-subtitle mx-auto">
Real feedback from the people we work with.
</p>
</div>
<div class="testimonial-grid">
<div class="testimonial-card">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<blockquote>
“Top Cut Engineering delivered our structural steel ahead of schedule
with impeccable quality. Their team went above and beyond.”
</blockquote>
<div class="author">
<div class="avatar">JD</div>
<div>
<div class="name">Johan de Villiers</div>
<div class="role">Project Manager, SteelCon SA</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<blockquote>
“We've been using their CNC machining services for three years now.
Consistency, precision, and reliability — every single time.”
</blockquote>
<div class="author">
<div class="avatar">LN</div>
<div>
<div class="name">Lindiwe Nkosi</div>
<div class="role">Operations Director, Apex Manufacturing</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<blockquote>
“Their on‑site maintenance team saved us from a major production
shutdown. Fast response and expert problem solving.”
</blockquote>
<div class="author">
<div class="avatar">MP</div>
<div>
<div class="name">Michael Petersen</div>
<div class="role">Plant Manager, Cape Aggregates</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ─── CTA ─── -->
<section class="cta">
<div class="container">
<h2>Ready to <span style="color:#f1c40f;">Start</span> Your Project?</h2>
<p>
Get a no‑obligation quote from our team of engineering specialists.
We respond within 24 hours.
</p>
<a href="#contact" class="btn btn-white"><i class="fas fa-paper-plane"></i> Request a Quote</a>
</div>
</section>
<!-- ─── CONTACT ─── -->
<section class="section-padding" id="contact">
<div class="container">
<div class="text-center">
<h2 class="section-title">Get In <span>Touch</span></h2>
<p class="section-subtitle mx-auto">
Have a question or a project in mind? Reach out to our team — we'd love
to hear from you.
</p>
</div>
<div class="contact-grid">
<div class="contact-info">
<h3>Let's Talk</h3>
<p>
Whether you need a single component or a full turnkey solution,
we're here to help.
</p>
<div class="contact-detail">
<i class="fas fa-map-marker-alt"></i>
<div>
<div class="label">Address</div>
<div class="value">Unit 12, Midrand Industrial Park,<br />Midrand, Gauteng, 1682</div>
</div>
</div>
<div class="contact-detail">
<i class="fas fa-phone-alt"></i>
<div>
<div class="label">Phone</div>
<div class="value"><a href="tel:+27101234567">+27 10 123 4567</a></div>
</div>
</div>
<div class="contact-detail">
<i class="fas fa-envelope"></i>
<div>
<div class="label">Email</div>
<div class="value"><a href="mailto:info@topcuteng.co.za">info@topcuteng.co.za</a></div>
</div>
</div>
<div class="contact-detail">
<i class="fas fa-clock"></i>
<div>
<div class="label">Working Hours</div>
<div class="value">Mon – Fri: 07:00 – 17:00 (SAST)</div>
</div>
</div>
</div>
<form class="contact-form" id="contactForm">
<input type="text" placeholder="Full Name *" required />
<input type="email" placeholder="Email Address *" required />
<input type="tel" placeholder="Phone Number" />
<select style="width:100%;padding:14px 18px;border:1.5px solid #e2e8f0;border-radius:var(--radius);font-family:inherit;font-size:1rem;margin-bottom:16px;background:var(--white);">
<option value="">Service Interested In…</option>
<option>CNC Machining</option>
<option>Metal Fabrication</option>
<option>CAD / CAM Design</option>
<option>Maintenance & Repair</option>
<option>Other</option>
</select>
<textarea placeholder="Tell us about your project…" rows="5"></textarea>
<button type="submit" class="btn"><i class="fas fa-paper-plane"></i> Send Message</button>
</form>
</div>
</div>
</section>
<!-- ─── FOOTER ─── -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a href="#" class="logo">
<i class="fas fa-cogs"></i>
Top<span>Cut</span>Eng
</a>
<p>
Precision engineering and fabrication services for the South African
industry. Quality, safety, and innovation — since 2008.
</p>
</div>
<div>
<h4>Quick Links</h4>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div>
<h4>Services</h4>
<ul>
<li><a href="#services">CNC Machining</a></li>
<li><a href="#services">Metal Fabrication</a></li>
<li><a href="#services">CAD / CAM</a></li>
<li><a href="#services">Maintenance</a></li>
<li><a href="#services">Installation</a></li>
</ul>
</div>
<div>
<h4>Connect</h4>
<ul>
<li><a href="tel:+27101234567"><i class="fas fa-phone-alt" style="width:20px;"></i> +27 10 123 4567</a></li>
<li><a href="mailto:info@topcuteng.co.za"><i class="fas fa-envelope" style="width:20px;"></i> info@topcuteng.co.za</a></li>
<li><a href="#"><i class="fab fa-facebook-f" style="width:20px;"></i> Facebook</a></li>
<li><a href="#"><i class="fab fa-linkedin-in" style="width:20px;"></i> LinkedIn</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 Top Cut Engineering (Pty) Ltd. All rights reserved.</span>
<span>Reg. No. 2008/015432/07</span>
<div class="socials">
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</footer>
<!-- ─── SCRIPTS ─── -->
<script>
// Mobile hamburger toggle
const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('navLinks');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
});
// Close nav on link click (mobile)
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('open');
});
});
// Active nav link highlight on scroll
const sections = document.querySelectorAll('section[id]');
const navItems = document.querySelectorAll('.nav-links a:not(.btn-nav)');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(section => {
const top = section.offsetTop - 120;
if (window.pageYOffset >= top) {
current = section.getAttribute('id');
}
});
navItems.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === '#' + current) {
link.classList.add('active');
}
});
});
// Simple contact form handler
const form = document.getElementById('contactForm');
form.addEventListener('submit', (e) => {
e.preventDefault();
alert('Thank you! Your message has been sent. We\'ll get back to you within 24 hours.');
form.reset();
});
</script>
</body>
</html>