[PLAATS-HIER-JE-URL-HERO]
2. Dienst-icoon 1 -> gebruikt automatisch getekende iconen, geen foto nodig
3. Klant-logo 1 t/m 4 -> [PLAATS-HIER-JE-URL-LOGO-1] t/m [PLAATS-HIER-JE-URL-LOGO-4]
5. Testimonial-foto -> [PLAATS-HIER-JE-URL-TESTIMONIAL]
6. Case-afbeelding -> [PLAATS-HIER-JE-URL-CASE]
Zolang je nog geen URL hebt geplakt, tonen deze plekken een nette
lichte placeholder-vlak — je site ziet er dus nooit “kapot” uit.
==========================================================================
–>
.sc-wrap {
–ink: #102028;
–paper: #F5F6F2;
–paper-2: #FFFFFF;
–green: #2F8F6E;
–green-brt: #4FCB9B;
–amber: #E8A33D;
–slate: #4E5C58;
–line: #DBDFD8;
–ink-soft: #22343C;
font-family: ‘Inter’, -apple-system, sans-serif;
color: var(–ink);
background: var(–paper);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.sc-wrap *, .sc-wrap *::before, .sc-wrap *::after { box-sizing: border-box; }
.sc-wrap img { max-width: 100%; display: block; }
.sc-wrap a { color: inherit !important; text-decoration: none !important; }
.sc-wrap h1, .sc-wrap h2, .sc-wrap h3 {
font-family: ‘Space Grotesk’, sans-serif;
font-weight: 600;
line-height: 1.1;
margin: 0;
letter-spacing: -0.01em;
}
.sc-wrap .sc-eyebrow {
font-family: ‘IBM Plex Mono’, monospace;
font-size: 12.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(–green);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}
.sc-wrap .sc-eyebrow::before {
content: “”;
width: 18px; height: 1.5px;
background: var(–green);
display: inline-block;
}
.sc-section { padding: 88px 24px; }
.sc-inner { max-width: 1120px; margin: 0 auto; }
@media (max-width: 640px) { .sc-section { padding: 56px 20px; } }
/* ——– placeholder afbeeldingen ——– */
.sc-ph {
position: relative;
background: repeating-linear-gradient(135deg, #E7EAE3, #E7EAE3 10px, #EEF0EA 10px, #EEF0EA 20px);
border: 1.5px dashed #B7C0B7;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #6B7570;
font-family: ‘IBM Plex Mono’, monospace;
font-size: 12.5px;
padding: 20px;
overflow: hidden;
}
.sc-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
/* ——– header ——– */
.sc-header {
display: flex; align-items: center; justify-content: space-between;
padding: 22px 24px;
max-width: 1120px; margin: 0 auto;
}
.sc-logo { font-family: ‘Space Grotesk’, sans-serif; font-weight: 700; font-size: 19px; }
.sc-logo span { color: var(–green); }
.sc-nav { display: flex; gap: 32px; font-size: 14.5px; font-weight: 500; }
.sc-nav a { opacity: 0.8; transition: opacity .15s; }
.sc-nav a:hover { opacity: 1; }
.sc-btn {
font-weight: 600 !important; font-size: 14.5px !important;
padding: 11px 22px !important; border-radius: 100px !important;
background: var(–ink) !important; color: var(–paper-2) !important;
display: inline-block !important; white-space: nowrap;
transition: transform .15s ease, background .15s ease;
border: none;
}
.sc-btn:hover { background: var(–green) !important; transform: translateY(-1px); color: var(–paper-2) !important; }
.sc-btn-ghost { background: transparent !important; color: var(–ink) !important; border: 1.5px solid var(–line) !important; }
.sc-btn-ghost:hover { background: var(–ink) !important; color: var(–paper-2) !important; }
@media (max-width: 780px) { .sc-nav { display: none; } }
/* ——– hero ——– */
.sc-hero { padding: 40px 24px 100px; }
.sc-hero-grid {
max-width: 1120px; margin: 0 auto;
display: grid; grid-template-columns: 1.05fr 0.95fr;
gap: 56px; align-items: center;
}
@media (max-width: 900px) { .sc-hero-grid { grid-template-columns: 1fr; } }
.sc-hero h1 { font-size: clamp(34px, 5vw, 54px); }
.sc-hero h1 em { font-style: normal; color: var(–green); }
.sc-hero p.sc-lead {
font-size: 17.5px; color: var(–slate); max-width: 46ch;
margin: 22px 0 32px;
}
.sc-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.sc-hero-ph { aspect-ratio: 4/3.1; }
.sc-trustbar {
margin-top: 56px; padding-top: 28px; border-top: 1px solid var(–line);
display: flex; gap: 36px; flex-wrap: wrap;
}
.sc-trust-item { font-family: ‘IBM Plex Mono’, monospace; font-size: 13px; color: var(–slate); }
.sc-trust-item b { font-family: ‘Space Grotesk’, sans-serif; font-size: 22px; color: var(–ink); display: block; }
/* ——– diensten ——– */
.sc-services-head { max-width: 640px; margin-bottom: 48px; }
.sc-services-head h2 { font-size: clamp(26px, 3.4vw, 36px); }
.sc-grid4 {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
@media (max-width: 780px) { .sc-grid4 { grid-template-columns: 1fr; } }
.sc-card {
background: var(–paper-2); border: 1px solid var(–line); border-radius: 18px;
padding: 32px; transition: border-color .15s, transform .15s;
}
.sc-card:hover { border-color: var(–green); transform: translateY(-2px); }
.sc-card-icon {
width: 42px; height: 42px; border-radius: 11px;
background: rgba(47,143,110,0.1); color: var(–green);
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.sc-card h3 { font-size: 19px; margin-bottom: 10px; }
.sc-card p { font-size: 14.5px; color: var(–slate); margin: 0; }
/* ——– aanpak / groeilijn ——– */
.sc-approach { background: var(–ink); color: var(–paper); }
.sc-approach .sc-eyebrow { color: var(–green-brt); }
.sc-approach .sc-eyebrow::before { background: var(–green-brt); }
.sc-approach-head { max-width: 640px; margin-bottom: 60px; }
.sc-approach-head h2 { font-size: clamp(26px, 3.4vw, 36px); color: var(–paper) !important; }
.sc-approach-head p { color: #A8B4AE !important; margin-top: 14px; font-size: 16px; }
.sc-steps {
position: relative;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 900px) { .sc-steps { grid-template-columns: 1fr; gap: 0; } }
.sc-steps svg.sc-line-desktop { display: block; }
@media (max-width: 900px) { .sc-steps svg.sc-line-desktop { display: none; } }
.sc-step {
position: relative; padding-top: 28px;
}
.sc-step .sc-step-num {
font-family: ‘IBM Plex Mono’, monospace; font-size: 13px; color: var(–green-brt);
margin-bottom: 14px; display: block;
}
.sc-step h3 { color: var(–paper) !important; font-size: 18px; margin-bottom: 8px; }
.sc-step p { color: #A8B4AE !important; font-size: 14px; margin: 0; }
@media (max-width: 900px) {
.sc-step { padding: 26px 0 26px 28px; border-left: 1.5px dashed #3A4A45; }
.sc-step:last-child { padding-bottom: 0; }
}
/* ——– resultaten ——– */
.sc-results-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
@media (max-width: 900px) { .sc-results-grid { grid-template-columns: 1fr; gap: 40px; } }
.sc-stat-row { display: flex; gap: 40px; margin-top: 28px; flex-wrap: wrap; }
.sc-stat b {
font-family: ‘Space Grotesk’, sans-serif; font-size: 34px; display: block; color: var(–green);
}
.sc-stat span { font-size: 13px; color: var(–slate); }
.sc-testimonial {
background: var(–paper-2); border: 1px solid var(–line); border-radius: 18px;
padding: 30px; display: flex; gap: 18px; align-items: flex-start;
}
.sc-testimonial .sc-ph { width: 56px; height: 56px; border-radius: 100px; flex-shrink: 0; font-size: 9px; padding: 4px;}
.sc-testimonial blockquote { margin: 0 0 14px; font-size: 15.5px; font-style: normal; color: var(–ink-soft); }
.sc-testimonial cite { font-style: normal; font-size: 13px; color: var(–slate); }
/* ——– klanten logos ——– */
.sc-logos-head { text-align: center; margin-bottom: 40px; }
.sc-logos-head p { font-size: 13.5px; color: var(–slate); font-family: ‘IBM Plex Mono’, monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.sc-logo-row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 640px) { .sc-logo-row { grid-template-columns: repeat(2, 1fr); } }
.sc-logo-slot { height: 74px; font-size: 10px; }
/* ——– case highlight ——– */
.sc-case { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .sc-case { grid-template-columns: 1fr; } }
.sc-case-ph { aspect-ratio: 4/3.3; }
.sc-case h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 16px; }
.sc-case p { color: var(–slate); font-size: 15.5px; }
/* ——– cta ——– */
.sc-cta {
background: var(–green);
color: var(–paper-2);
border-radius: 24px;
padding: 64px 40px;
text-align: center;
max-width: 1120px; margin: 0 auto;
}
.sc-cta h2 { color: var(–paper-2) !important; font-size: clamp(26px, 3.6vw, 38px); margin-bottom: 16px; }
.sc-cta p { color: rgba(255,255,255,0.85) !important; max-width: 46ch; margin: 0 auto 30px; font-size: 16px; }
.sc-cta .sc-btn { background: var(–ink) !important; }
.sc-cta .sc-btn:hover { background: var(–paper-2) !important; color: var(–ink) !important; }
/* ——– footer ——– */
.sc-footer {
padding: 48px 24px 32px; border-top: 1px solid var(–line);
}
.sc-footer-grid {
max-width: 1120px; margin: 0 auto;
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.sc-footer-nav { display: flex; gap: 24px; font-size: 13.5px; color: var(–slate); flex-wrap: wrap; }
.sc-footer small { font-size: 13px; color: var(–slate); }
/* ——– scroll reveal ——– */
/* Standaard altijd zichtbaar: als het JS-script hieronder om wat voor reden
dan ook niet draait (bijv. in sommige preview/editor-omgevingen), blijft
alle inhoud gewoon zichtbaar. De animatie is een “bonus” die er pas
overheen komt zodra .sc-js op de wrapper staat (zie script onderaan). */
.sc-reveal { opacity: 1; transform: none; }
.sc-js .sc-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.sc-js .sc-reveal.sc-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.sc-js .sc-reveal { opacity: 1; transform: none; transition: none; }
}
Hero-afbeelding · 4:3 · vervang [PLAATS-HIER-JE-URL-HERO]
(function(){
var yearEl = document.getElementById(‘sc-year’);
if (yearEl) yearEl.textContent = new Date().getFullYear();
var wrap = document.querySelector(‘.sc-wrap’);
var els = document.querySelectorAll(‘.sc-reveal’);
if (window.matchMedia && window.matchMedia(‘(prefers-reduced-motion: reduce)’).matches) {
return; // .sc-js wordt niet gezet: alles blijft gewoon zichtbaar
}
if (!(‘IntersectionObserver’ in window) || !wrap) {
return; // veiligste optie: geen animatie, wel gegarandeerd zichtbaar
}
// Alleen nu de animatie activeren, met een vangnet: mocht de observer
// om wat voor reden dan ook niet triggeren, forceer dan na 2,5s alsnog
// dat alles zichtbaar wordt.
wrap.classList.add(‘sc-js’);
var io = new IntersectionObserver(function(entries){
entries.forEach(function(entry){
if (entry.isIntersecting) {
entry.target.classList.add(‘sc-visible’);
io.unobserve(entry.target);
}
});
}, { threshold: 0.12 });
els.forEach(function(el){ io.observe(el); });
setTimeout(function(){
els.forEach(function(el){ el.classList.add(‘sc-visible’); });
}, 2500);
})();
StegemanCommerce
Diensten
Aanpak
Resultaten
Contact
Plan een gesprek
Websites · Marketing · SEO · E-commerce
Zet de lijn omhoog.
Stegeman Commerce bouwt websites en webshops die niet alleen goed ogen, maar ook omzet maken — met marketing, SEO en groeistrategie die net zoveel aandacht krijgen als het design.
Wat we doen
Vier disciplines. Eén doel: meer verkopen.
Website & webshops
Een winkel die overtuigt voordat er een woord valt. Snel, overzichtelijk en gebouwd om te verkopen — niet alleen om te bestaan.
Online marketing
Campagnes die kloppen met wie je bent en waar je klant zit. Geen giswerk, wel resultaat dat je terugziet in de cijfers.
SEO
Gevonden worden op het moment dat iemand al wíl kopen. Structuur, snelheid en content die Google én klanten begrijpen.
E-commerce groei
Van eerste bestelling tot vaste klant. Data, testen en optimaliseren tot de cijfers de goede kant op wijzen.
De aanpak
Vier stappen, één opgaande lijn.
Geen los project hier, los project daar — elke stap bouwt voort op de vorige, richting meetbare groei.
01 — Startpunt
Analyse
We brengen je huidige site, markt en cijfers in kaart. Zo weten we waar de winst zit.
02 — Fundament
Bouw
Website of shop die klopt met je merk, snel laadt en makkelijk te bedienen is.
03 — Zichtbaarheid
Bereik
SEO en marketing zodat de juiste mensen je vinden, precies op het juiste moment.
04 — Groei
Optimaliseren
Doorlopend testen, meten en bijsturen — de lijn blijft omhoog wijzen.
Resultaten
Niet alleen mooier. Ook meetbaar beter.
+128%meer omzet na relaunch
-40%lagere laadtijd
3.2×meer organisch verkeer
“Binnen drie maanden zagen we het verschil terug in de bestellingen. Eindelijk een partij die design én cijfers serieus neemt.”— Naam Klant, functie bij Bedrijfsnaam
Vertrouwd door ondernemers zoals
Uitgelicht project
Van standaard sjabloon naar shop die converteert.
Beschrijf hier kort welk probleem de klant had, wat Stegeman Commerce heeft gebouwd, en wat het resultaat was — bijvoorbeeld meer conversie, minder afhaakers in het bestelproces, of een snellere website.
Bekijk meer werkKlaar om die lijn omhoog te zetten?
Plan een vrijblijvend gesprek van 20 minuten. Geen verkooppraatje — wel een eerlijk beeld van wat er nu al beter kan.
Plan een gesprek