Atlas Developer
03829a38b2
9-course Dutch e-learning platform fused onto atlasacademy.nl via Caddy reverse proxy. Odoo 19 Community as course engine (website_slides), static HTML for marketing front. Single Odoo account system. - static/: 8 marketing pages (index, pricing, coaching, leerpad, over, shop, bisl, esf) - backend/odoo_relay.py: lead relay Flask service (POST /academy-lead → Odoo CRM) - caddy/academy.caddyfile: full Caddy config with Odoo proxy + auth rewrites - docs/: ARCHITECTURE, USERFLOW, COURSES, DEPLOYMENT, SECURITY, ODOO Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
997 lines
36 KiB
HTML
997 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Coaching met Chaib Aarab — Founder Atlas Corporation. Leer van iemand die het nu bouwt: AtlasPOS, automatisering, klanten, servers, sales.">
|
|
<meta name="robots" content="index, follow">
|
|
<title>Coaching — Atlas Academy</title>
|
|
<style>
|
|
:root {
|
|
--bg: #080C18;
|
|
--card: #0B1220;
|
|
--card2: #0d1f3c;
|
|
--border: rgba(55,65,81,.5);
|
|
--arc: #3B82F6;
|
|
--purple: #8B5CF6;
|
|
--cyan: #06B6D4;
|
|
--ok: #22C55E;
|
|
--warn: #F59E0B;
|
|
--pink: #EC4899;
|
|
--txt: #E2E8F0;
|
|
--muted: #6B7280;
|
|
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--radius: 10px;
|
|
--radius-lg: 16px;
|
|
--radius-xl: 24px;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--txt);
|
|
font-family: var(--font);
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow-x: hidden;
|
|
}
|
|
a { color: var(--arc); text-decoration: none; }
|
|
a:hover { color: #93C5FD; }
|
|
img { max-width: 100%; display: block; }
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1140px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #fff 0%, #93c5fd 50%, #c4b5fd 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 14px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: .06em;
|
|
text-transform: uppercase;
|
|
}
|
|
.badge--blue { background: rgba(59,130,246,.15); color: var(--arc); border: 1px solid rgba(59,130,246,.3); }
|
|
.badge--amber { background: rgba(245,158,11,.12); color: var(--warn); border: 1px solid rgba(245,158,11,.25); }
|
|
.badge--green { background: rgba(34,197,94,.12); color: var(--ok); border: 1px solid rgba(34,197,94,.25); }
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 13px 28px;
|
|
border-radius: var(--radius);
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: all .2s;
|
|
border: none;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--arc), var(--purple));
|
|
color: #fff;
|
|
box-shadow: 0 0 30px rgba(59,130,246,.35);
|
|
}
|
|
.btn-primary:hover { box-shadow: 0 0 50px rgba(59,130,246,.6); transform: translateY(-2px); color: #fff; }
|
|
.btn-glass {
|
|
background: rgba(255,255,255,.07);
|
|
color: var(--txt);
|
|
border: 1px solid rgba(255,255,255,.12);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
.btn-glass:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); color: var(--txt); }
|
|
.btn-outline {
|
|
background: transparent;
|
|
color: var(--arc);
|
|
border: 1.5px solid rgba(59,130,246,.4);
|
|
}
|
|
.btn-outline:hover { border-color: var(--arc); box-shadow: 0 0 20px rgba(59,130,246,.2); transform: translateY(-2px); }
|
|
.btn-sm { padding: 9px 18px; font-size: 14px; }
|
|
|
|
section { padding: 88px 0; }
|
|
.section-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
color: var(--arc);
|
|
margin-bottom: 12px;
|
|
}
|
|
.section-label::before { content: ''; display: block; width: 16px; height: 1px; background: var(--arc); }
|
|
.section-title {
|
|
font-size: clamp(26px, 4vw, 40px);
|
|
font-weight: 800;
|
|
line-height: 1.15;
|
|
margin-bottom: 14px;
|
|
letter-spacing: -.02em;
|
|
}
|
|
.section-sub { color: var(--muted); font-size: 17px; max-width: 560px; line-height: 1.7; }
|
|
|
|
/* ---- REVEAL ---- */
|
|
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
|
|
.reveal.visible { opacity: 1; transform: translateY(0); }
|
|
|
|
/* ============================
|
|
NAV
|
|
============================ */
|
|
nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 200;
|
|
background: rgba(8,12,24,.88);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(59,130,246,.08);
|
|
}
|
|
.nav-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 64px;
|
|
gap: 16px;
|
|
}
|
|
.nav-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
color: var(--txt);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
letter-spacing: -.01em;
|
|
text-decoration: none;
|
|
}
|
|
.nav-logo:hover { color: #93C5FD; }
|
|
.nav-logo img { height: 28px; width: auto; filter: brightness(0) invert(1); }
|
|
.nav-links {
|
|
display: flex;
|
|
list-style: none;
|
|
gap: 4px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.nav-links a {
|
|
padding: 6px 14px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #CBD5E1;
|
|
transition: all .15s;
|
|
text-decoration: none;
|
|
}
|
|
.nav-links a:hover, .nav-links a.active { color: var(--txt); background: rgba(255,255,255,.07); }
|
|
.nav-cta-area { display: flex; align-items: center; gap: 10px; }
|
|
.nav-hamburger { display: none; background: none; border: none; color: var(--txt); font-size: 22px; cursor: pointer; padding: 4px 8px; }
|
|
|
|
#mobile-menu {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(8,12,24,.97);
|
|
z-index: 999;
|
|
padding: 80px 24px 40px;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
#mobile-menu.open { display: flex; }
|
|
#mobile-menu a {
|
|
display: block;
|
|
padding: 18px 0;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
border-bottom: 1px solid rgba(255,255,255,.08);
|
|
text-decoration: none;
|
|
}
|
|
#mobile-menu .mob-close {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: none;
|
|
border: none;
|
|
color: #fff;
|
|
font-size: 28px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-links { display: none; }
|
|
.nav-cta-area .btn { display: none; }
|
|
.nav-hamburger { display: block; }
|
|
}
|
|
|
|
/* ============================
|
|
HERO — SPLIT
|
|
============================ */
|
|
#hero {
|
|
padding: 0;
|
|
min-height: 92vh;
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
.hero-split {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
min-height: 92vh;
|
|
}
|
|
.hero-photo-side {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-right: 3px solid var(--arc);
|
|
}
|
|
.hero-photo-side img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: right center;
|
|
display: block;
|
|
}
|
|
.hero-photo-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to right, transparent 60%, rgba(8,12,24,.3));
|
|
pointer-events: none;
|
|
}
|
|
.hero-text-side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 64px 56px;
|
|
gap: 0;
|
|
}
|
|
.hero-badge-wrap { margin-bottom: 20px; }
|
|
.hero-h1 {
|
|
font-size: clamp(32px, 4.5vw, 56px);
|
|
font-weight: 900;
|
|
line-height: 1.08;
|
|
letter-spacing: -.03em;
|
|
margin-bottom: 20px;
|
|
}
|
|
.hero-sub {
|
|
font-size: 18px;
|
|
color: #94A3B8;
|
|
line-height: 1.7;
|
|
max-width: 460px;
|
|
margin-bottom: 36px;
|
|
}
|
|
.hero-cta-row {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 14px;
|
|
margin-bottom: 28px;
|
|
}
|
|
.hero-contact-line {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px 14px;
|
|
}
|
|
.hero-contact-line a { color: var(--muted); transition: color .15s; }
|
|
.hero-contact-line a:hover { color: var(--arc); }
|
|
.hero-dot { color: rgba(255,255,255,.25); }
|
|
|
|
@media (max-width: 900px) {
|
|
.hero-split { grid-template-columns: 1fr; }
|
|
.hero-photo-side { height: 55vw; min-height: 300px; border-right: none; border-bottom: 3px solid var(--arc); }
|
|
.hero-text-side { padding: 40px 24px; }
|
|
#hero { min-height: auto; }
|
|
}
|
|
|
|
/* ============================
|
|
CHAIB PROFIEL CARD
|
|
============================ */
|
|
#profiel { padding: 80px 0; }
|
|
.profiel-card {
|
|
position: relative;
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
border: 1px solid var(--border);
|
|
}
|
|
.profiel-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: url('assets/chaib-banner.png') center/cover no-repeat;
|
|
filter: brightness(.18) saturate(.7);
|
|
}
|
|
.profiel-bg-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(135deg, rgba(8,12,24,.85) 50%, rgba(59,130,246,.08) 100%);
|
|
}
|
|
.profiel-inner {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 48px;
|
|
padding: 56px;
|
|
align-items: center;
|
|
}
|
|
.profiel-left {}
|
|
.profiel-avatar-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.profiel-avatar {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
object-position: right top;
|
|
border: 3px solid var(--arc);
|
|
flex-shrink: 0;
|
|
}
|
|
.profiel-name { font-size: 24px; font-weight: 800; color: var(--txt); }
|
|
.profiel-title { font-size: 14px; color: var(--muted); margin-top: 2px; }
|
|
.profiel-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-bottom: 22px;
|
|
}
|
|
.profiel-tag {
|
|
background: rgba(59,130,246,.1);
|
|
border: 1px solid rgba(59,130,246,.2);
|
|
color: #93C5FD;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 4px 10px;
|
|
border-radius: 6px;
|
|
}
|
|
.profiel-bio { color: #CBD5E1; font-size: 15px; line-height: 1.75; margin-bottom: 24px; }
|
|
.profiel-right {}
|
|
.profiel-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
margin-bottom: 28px;
|
|
}
|
|
.profiel-stat-card {
|
|
background: rgba(11,18,32,.7);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 18px 20px;
|
|
}
|
|
.profiel-stat-num { font-size: 22px; font-weight: 800; color: var(--arc); }
|
|
.profiel-stat-lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }
|
|
.profiel-quote {
|
|
background: rgba(11,18,32,.7);
|
|
backdrop-filter: blur(20px);
|
|
border-left: 3px solid var(--arc);
|
|
border-radius: 0 var(--radius) var(--radius) 0;
|
|
padding: 20px 22px;
|
|
color: #CBD5E1;
|
|
font-size: 15px;
|
|
font-style: italic;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.profiel-inner { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
|
|
}
|
|
|
|
/* ============================
|
|
WAT IK AANBIED
|
|
============================ */
|
|
#aanbod { padding: 80px 0; background: linear-gradient(180deg, rgba(59,130,246,.04) 0%, transparent 100%); }
|
|
.aanbod-header { text-align: center; margin-bottom: 56px; }
|
|
.aanbod-header .section-label { justify-content: center; }
|
|
.aanbod-header .section-label::before { display: none; }
|
|
.aanbod-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
}
|
|
.aanbod-card {
|
|
background: rgba(11,18,32,.7);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 36px 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: transform .2s, box-shadow .2s;
|
|
}
|
|
.aanbod-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
|
|
.aanbod-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 2px;
|
|
}
|
|
.aanbod-card--starter::before { background: linear-gradient(90deg, var(--arc), var(--cyan)); }
|
|
.aanbod-card--pro::before { background: linear-gradient(90deg, var(--warn), #f97316); }
|
|
.aanbod-card--custom::before { background: linear-gradient(90deg, var(--purple), var(--pink)); }
|
|
.aanbod-icon { font-size: 36px; margin-bottom: 16px; }
|
|
.aanbod-tier { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
|
|
.aanbod-name { font-size: 20px; font-weight: 800; color: var(--txt); margin-bottom: 4px; }
|
|
.aanbod-meta { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
|
|
.aanbod-price { font-size: 32px; font-weight: 900; color: var(--txt); margin-bottom: 4px; }
|
|
.aanbod-price span { font-size: 14px; font-weight: 500; color: var(--muted); }
|
|
.aanbod-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
|
|
.aanbod-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex: 1; }
|
|
.aanbod-features li { display: flex; gap: 10px; font-size: 14px; color: #CBD5E1; }
|
|
.aanbod-check--blue { color: var(--arc); font-weight: 700; flex-shrink: 0; }
|
|
.aanbod-check--amber { color: var(--warn); font-weight: 700; flex-shrink: 0; }
|
|
.aanbod-check--purple { color: var(--purple); font-weight: 700; flex-shrink: 0; }
|
|
|
|
@media (max-width: 900px) {
|
|
.aanbod-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ============================
|
|
VOOR WIE
|
|
============================ */
|
|
#voor-wie { padding: 80px 0; }
|
|
.voor-wie-header { margin-bottom: 48px; }
|
|
.persona-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
}
|
|
.persona-card {
|
|
background: rgba(11,18,32,.7);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 32px 28px;
|
|
transition: transform .2s, border-color .2s;
|
|
}
|
|
.persona-card:hover { transform: translateY(-3px); border-color: rgba(59,130,246,.3); }
|
|
.persona-icon { font-size: 40px; margin-bottom: 16px; }
|
|
.persona-title { font-size: 17px; font-weight: 700; color: var(--txt); margin-bottom: 10px; line-height: 1.3; }
|
|
.persona-desc { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }
|
|
.persona-tag {
|
|
display: inline-block;
|
|
background: rgba(59,130,246,.1);
|
|
border: 1px solid rgba(59,130,246,.2);
|
|
color: #93C5FD;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 3px 9px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.persona-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ============================
|
|
AANMELDEN FORM
|
|
============================ */
|
|
#aanmelden { padding: 80px 0; background: linear-gradient(180deg, transparent, rgba(59,130,246,.04)); }
|
|
.form-card {
|
|
background: rgba(11,18,32,.7);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-xl);
|
|
padding: 56px;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
.form-header { text-align: center; margin-bottom: 40px; }
|
|
.form-group { margin-bottom: 20px; }
|
|
.form-label {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #94A3B8;
|
|
margin-bottom: 6px;
|
|
letter-spacing: .02em;
|
|
}
|
|
.form-input {
|
|
width: 100%;
|
|
background: rgba(255,255,255,.05);
|
|
border: 1px solid rgba(255,255,255,.12);
|
|
border-radius: var(--radius);
|
|
padding: 12px 16px;
|
|
color: var(--txt);
|
|
font-size: 15px;
|
|
font-family: var(--font);
|
|
transition: border-color .15s, box-shadow .15s;
|
|
outline: none;
|
|
}
|
|
.form-input:focus { border-color: var(--arc); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
|
|
.form-input::placeholder { color: var(--muted); }
|
|
select.form-input option { background: #0B1220; }
|
|
textarea.form-input { resize: vertical; min-height: 110px; }
|
|
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
|
.form-submit { width: 100%; padding: 14px; font-size: 16px; margin-top: 8px; justify-content: center; }
|
|
.form-note { text-align: center; font-size: 13px; color: var(--muted); margin-top: 14px; }
|
|
.form-success {
|
|
display: none;
|
|
text-align: center;
|
|
padding: 24px;
|
|
background: rgba(34,197,94,.08);
|
|
border: 1px solid rgba(34,197,94,.2);
|
|
border-radius: var(--radius);
|
|
color: var(--ok);
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.form-card { padding: 32px 20px; }
|
|
.form-row { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ============================
|
|
FOOTER
|
|
============================ */
|
|
footer {
|
|
background: rgba(4,8,16,.9);
|
|
border-top: 1px solid rgba(255,255,255,.05);
|
|
padding: 60px 0 32px;
|
|
}
|
|
.footer-inner {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr 1fr;
|
|
gap: 40px;
|
|
margin-bottom: 40px;
|
|
}
|
|
.footer-brand p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-top: 10px; max-width: 260px; }
|
|
.footer-logo { font-size: 16px; font-weight: 800; color: var(--txt); }
|
|
.footer-col-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748B; margin-bottom: 12px; }
|
|
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
|
|
.footer-links a { font-size: 14px; color: var(--muted); transition: color .15s; }
|
|
.footer-links a:hover { color: var(--arc); }
|
|
.footer-bottom { border-top: 1px solid rgba(255,255,255,.05); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
|
|
.footer-copy { font-size: 13px; color: #475569; }
|
|
.footer-copy a { color: #64748B; }
|
|
.footer-copy a:hover { color: var(--arc); }
|
|
|
|
@media (max-width: 900px) {
|
|
.footer-inner { grid-template-columns: 1fr 1fr; }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.footer-inner { grid-template-columns: 1fr; }
|
|
.footer-bottom { flex-direction: column; text-align: center; }
|
|
}
|
|
.lang-toggle{background:transparent;border:1px solid rgba(59,130,246,.5);color:#9CA3AF;padding:5px 12px;border-radius:20px;cursor:pointer;font-size:12px;font-weight:600;transition:all .2s;margin-right:8px;}</style>
|
|
|
|
<!-- GA4 -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JBWZWZMKBC"></script>
|
|
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-JBWZWZMKBC');</script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ============================
|
|
NAV
|
|
============================ -->
|
|
<nav id="nav" role="navigation" aria-label="Hoofdnavigatie">
|
|
<div class="container">
|
|
<div class="nav-inner">
|
|
<a href="index.html" class="nav-logo">
|
|
<img src="assets/logo.png" alt="Atlas Academy logo" width="28" height="28">
|
|
<span>Atlas Academy</span>
|
|
</a>
|
|
<ul class="nav-links">
|
|
<li><a href="cursussen.html">Cursussen</a></li>
|
|
<li><a href="leerpad.html">Leerpad</a></li>
|
|
<li><a href="coaching.html" class="active">Coaching</a></li>
|
|
<li><a href="pricing.html">Prijzen</a></li>
|
|
<li><a href="shop.html">Shop</a></li>
|
|
<li><a href="over.html">Over</a></li>
|
|
<li><a href="/web/login?redirect=%2Fslides">Inloggen</a></li>
|
|
</ul>
|
|
<div class="nav-cta-area">
|
|
<a href="mailto:info@atlascorporation.nl?subject=Atlas+Academy" class="btn btn-primary btn-sm">Start gratis →</a>
|
|
<button class="nav-hamburger" onclick="toggleMobileMenu()" aria-label="Menu">☰</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="mobile-menu">
|
|
<button class="mob-close" onclick="toggleMobileMenu()">×</button>
|
|
<a href="cursussen.html" onclick="toggleMobileMenu()">Cursussen</a>
|
|
<a href="leerpad.html" onclick="toggleMobileMenu()">Leerpad</a>
|
|
<a href="coaching.html" onclick="toggleMobileMenu()">Coaching</a>
|
|
<a href="pricing.html" onclick="toggleMobileMenu()">Prijzen</a>
|
|
<a href="shop.html" onclick="toggleMobileMenu()">Shop</a>
|
|
<a href="over.html" onclick="toggleMobileMenu()">Over</a>
|
|
<a href="/web/login?redirect=%2Fslides" onclick="toggleMobileMenu()">Inloggen</a>
|
|
<a href="mailto:info@atlascorporation.nl?subject=Atlas+Academy" class="btn btn-primary" style="margin-top:32px;justify-content:center;">Start gratis →</a>
|
|
</div>
|
|
|
|
<!-- ============================
|
|
HERO — SPLIT LAYOUT
|
|
============================ -->
|
|
<section id="hero" aria-label="Coaching hero">
|
|
<div class="hero-split">
|
|
|
|
<!-- LEFT: Photo -->
|
|
<div class="hero-photo-side">
|
|
<img src="assets/chaib.png" alt="Chaib Aarab — Founder Atlas Corporation, ERP POS CRM">
|
|
<div class="hero-photo-overlay"></div>
|
|
</div>
|
|
|
|
<!-- RIGHT: Text -->
|
|
<div class="hero-text-side">
|
|
<div class="hero-badge-wrap">
|
|
<span class="badge badge--blue">Coaching</span>
|
|
</div>
|
|
<h1 class="hero-h1">
|
|
<span class="gradient-text">Leer van iemand<br>die het nu doet</span>
|
|
</h1>
|
|
<p class="hero-sub">
|
|
Geen consultant met een theorie. Een ondernemer die dagelijks bouwt — AtlasPOS, automatisering, klanten, servers, sales. Coaching die aansluit op jouw realiteit.
|
|
</p>
|
|
<div class="hero-cta-row">
|
|
<a href="mailto:info@atlascorporation.nl?subject=Coaching aanvraag" class="btn btn-primary">Vraag een sessie aan →</a>
|
|
<a href="#aanbod" class="btn btn-glass">Zie de formats</a>
|
|
</div>
|
|
<div class="hero-contact-line">
|
|
<span>Tilburg</span>
|
|
<span class="hero-dot">·</span>
|
|
<span>Chaib Aarab</span>
|
|
<span class="hero-dot">·</span>
|
|
<a href="mailto:chaib@atlascorporation.nl">chaib@atlascorporation.nl</a>
|
|
<span class="hero-dot">·</span>
|
|
<a href="tel:+31639259220">06 39 25 92 20</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================
|
|
CHAIB PROFIEL CARD
|
|
============================ -->
|
|
<section id="profiel">
|
|
<div class="container">
|
|
<div class="profiel-card reveal">
|
|
<div class="profiel-bg"></div>
|
|
<div class="profiel-bg-overlay"></div>
|
|
<div class="profiel-inner">
|
|
|
|
<div class="profiel-left">
|
|
<span class="section-label">De coach</span>
|
|
<div class="profiel-avatar-row">
|
|
<img src="assets/chaib.png" alt="Chaib Aarab" class="profiel-avatar">
|
|
<div>
|
|
<div class="profiel-name">Bouchaib (Chaib) Aarab</div>
|
|
<div class="profiel-title">Founder & IT Consultant — Atlas Corporation · Tilburg</div>
|
|
</div>
|
|
</div>
|
|
<div class="profiel-tags">
|
|
<span class="profiel-tag">8+ jaar ervaring</span>
|
|
<span class="profiel-tag">Efficy CRM consultant</span>
|
|
<span class="profiel-tag">AtlasPOS founder</span>
|
|
<span class="profiel-tag">Avans Hogeschool</span>
|
|
<span class="profiel-tag">Scalda ICT</span>
|
|
<span class="profiel-tag">Tilburg</span>
|
|
<span class="profiel-tag">AI & automatisering</span>
|
|
<span class="profiel-tag">Odoo / ERP</span>
|
|
</div>
|
|
<p class="profiel-bio">
|
|
Ik begon als applicatieontwikkelaar, deed CRM-implementaties bij Efficy in ’s-Hertogenbosch, en bouw nu vanuit Tilburg <strong>AtlasPOS</strong> — een live SaaS-product. Naast het product draai ik de volledige IT-stack zelf: servers, automatisering, klantgesprekken, sales. Wat ik je leer, pas ik deze week nog toe.
|
|
</p>
|
|
<a href="https://www.linkedin.com/in/baarab/" target="_blank" rel="noopener" class="btn btn-outline">
|
|
Volg op LinkedIn →
|
|
</a>
|
|
</div>
|
|
|
|
<div class="profiel-right">
|
|
<div class="profiel-stats-grid">
|
|
<div class="profiel-stat-card">
|
|
<div class="profiel-stat-num">2023</div>
|
|
<div class="profiel-stat-lbl">Atlas Corporation opgericht</div>
|
|
</div>
|
|
<div class="profiel-stat-card">
|
|
<div class="profiel-stat-num">SaaS</div>
|
|
<div class="profiel-stat-lbl">AtlasPOS live in productie</div>
|
|
</div>
|
|
<div class="profiel-stat-card">
|
|
<div class="profiel-stat-num">CRM</div>
|
|
<div class="profiel-stat-lbl">Efficy implementaties</div>
|
|
</div>
|
|
<div class="profiel-stat-card">
|
|
<div class="profiel-stat-num">8+</div>
|
|
<div class="profiel-stat-lbl">Jaar IT-ervaring</div>
|
|
</div>
|
|
</div>
|
|
<div class="profiel-quote">
|
|
“De meeste ondernemers leren van mensen die het beschrijven. Ik leer je van iemand die het bouwt — live, met echte klanten, echte servers en echte fouten.”
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================
|
|
WAT IK AANBIED
|
|
============================ -->
|
|
<section id="aanbod">
|
|
<div class="container">
|
|
<div class="aanbod-header reveal">
|
|
<span class="section-label">Formats</span>
|
|
<h2 class="section-title">Wat ik aanbied</h2>
|
|
<p class="section-sub">Drie formats, één coach. Kies wat past bij jouw fase.</p>
|
|
</div>
|
|
|
|
<div class="aanbod-grid">
|
|
|
|
<!-- Groepscoaching -->
|
|
<div class="aanbod-card aanbod-card--starter reveal">
|
|
<div class="aanbod-icon">👥</div>
|
|
<div class="aanbod-tier">Starter</div>
|
|
<div class="aanbod-name">Groepscoaching</div>
|
|
<div class="aanbod-meta">1× per maand · Zoom · 45 minuten</div>
|
|
<div class="aanbod-price">€20 <span>/ maand</span></div>
|
|
<hr class="aanbod-divider">
|
|
<ul class="aanbod-features">
|
|
<li><span class="aanbod-check--blue">✓</span> Vaste agenda: 10 min theorie → 25 min cases → 10 min Q&A</li>
|
|
<li><span class="aanbod-check--blue">✓</span> Opname beschikbaar na de sessie</li>
|
|
<li><span class="aanbod-check--blue">✓</span> Toegang tot Academy community</li>
|
|
<li><span class="aanbod-check--blue">✓</span> Leer van ondernemers in vergelijkbare fase</li>
|
|
</ul>
|
|
<a href="mailto:info@atlascorporation.nl?subject=Groepscoaching aanmelding" class="btn btn-primary">Word Starter-lid →</a>
|
|
</div>
|
|
|
|
<!-- 1-op-1 -->
|
|
<div class="aanbod-card aanbod-card--pro reveal">
|
|
<div class="aanbod-icon">🎯</div>
|
|
<div class="aanbod-tier">Pro</div>
|
|
<div class="aanbod-name">1-op-1 Sessie</div>
|
|
<div class="aanbod-meta">30 min · maandelijks · jouw situatie centraal</div>
|
|
<div class="aanbod-price">€49 <span>/ maand</span></div>
|
|
<hr class="aanbod-divider">
|
|
<ul class="aanbod-features">
|
|
<li><span class="aanbod-check--amber">✓</span> Intake formulier vooraf — coach volledig voorbereid</li>
|
|
<li><span class="aanbod-check--amber">✓</span> Persoonlijk leerplan op basis van jouw fase</li>
|
|
<li><span class="aanbod-check--amber">✓</span> Directe feedback op jouw project of probleem</li>
|
|
<li><span class="aanbod-check--amber">✓</span> Toegang tot Chaibs netwerk waar relevant</li>
|
|
</ul>
|
|
<a href="mailto:info@atlascorporation.nl?subject=1-op-1 Coaching aanmelding" class="btn btn-primary" style="background:linear-gradient(135deg,var(--warn),#f97316);box-shadow:0 0 30px rgba(245,158,11,.35);">Word Pro-lid →</a>
|
|
</div>
|
|
|
|
<!-- Persoonlijk traject -->
|
|
<div class="aanbod-card aanbod-card--custom reveal">
|
|
<div class="aanbod-icon">🌟</div>
|
|
<div class="aanbod-tier">Pro — Custom</div>
|
|
<div class="aanbod-name">Persoonlijk traject</div>
|
|
<div class="aanbod-meta">Op maat · duur en intensiteit in overleg</div>
|
|
<div class="aanbod-price"><span style="font-size:15px;color:var(--txt);font-weight:700;">Op aanvraag</span></div>
|
|
<hr class="aanbod-divider">
|
|
<ul class="aanbod-features">
|
|
<li><span class="aanbod-check--purple">✓</span> Diepgaand intake gesprek om jouw situatie te begrijpen</li>
|
|
<li><span class="aanbod-check--purple">✓</span> Maatwerk sessies: wekelijks, bi-weekly of ad hoc</li>
|
|
<li><span class="aanbod-check--purple">✓</span> Inclusief praktijkopdrachten en review</li>
|
|
<li><span class="aanbod-check--purple">✓</span> Directe bereikbaarheid via WhatsApp/mail</li>
|
|
</ul>
|
|
<a href="mailto:info@atlascorporation.nl?subject=Persoonlijk traject aanvraag" class="btn btn-primary" style="background:linear-gradient(135deg,var(--purple),var(--pink));box-shadow:0 0 30px rgba(139,92,246,.35);">Vraag traject aan →</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================
|
|
VOOR WIE
|
|
============================ -->
|
|
<section id="voor-wie">
|
|
<div class="container">
|
|
<div class="voor-wie-header reveal">
|
|
<span class="section-label">Doelgroep</span>
|
|
<h2 class="section-title">Voor wie is dit?</h2>
|
|
<p class="section-sub">Coaching is niet voor iedereen. Dit zijn de drie profielen waar ik het meeste impact heb.</p>
|
|
</div>
|
|
|
|
<div class="persona-grid">
|
|
|
|
<div class="persona-card reveal">
|
|
<div class="persona-icon">🚀</div>
|
|
<div class="persona-title">Startende ondernemer die wil leren hoe je een product lanceert</div>
|
|
<p class="persona-desc">
|
|
Je hebt een idee of early-stage product maar weet niet hoe je van nul naar betalende klanten gaat. Ik leer je de weg die ik zelf ben gegaan met AtlasPOS: validatie, pricing, eerste sales, technische opzet.
|
|
</p>
|
|
<span class="persona-tag">Product launchen</span>
|
|
</div>
|
|
|
|
<div class="persona-card reveal">
|
|
<div class="persona-icon">⚙️</div>
|
|
<div class="persona-title">ZZP-er die IT-processen wil automatiseren</div>
|
|
<p class="persona-desc">
|
|
Je werkt solo maar verliest tijd aan repetitieve taken. Ik help je n8n, Odoo of andere tools inzetten zodat je meer kunt doen met minder manueel werk — zonder interne IT-afdeling.
|
|
</p>
|
|
<span class="persona-tag">AI & automatisering</span>
|
|
</div>
|
|
|
|
<div class="persona-card reveal">
|
|
<div class="persona-icon">📈</div>
|
|
<div class="persona-title">MKB die CRM/ERP wil implementeren zonder dure consultants</div>
|
|
<p class="persona-desc">
|
|
Je bedrijf groeit maar de processen houden het tempo niet bij. Ik begeleid je bij het kiezen en inrichten van CRM of ERP — vanuit praktijkervaring bij Efficy en eigen Odoo-implementaties.
|
|
</p>
|
|
<span class="persona-tag">CRM / ERP</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================
|
|
AANMELDEN FORM
|
|
============================ -->
|
|
<section id="aanmelden">
|
|
<div class="container">
|
|
<div class="form-card reveal">
|
|
<div class="form-header">
|
|
<span class="section-label" style="justify-content:center;margin-bottom:12px;">
|
|
<span style="display:block;width:16px;height:1px;background:var(--arc);"></span>
|
|
Aanmelden
|
|
</span>
|
|
<h2 class="section-title">Vraag een sessie aan</h2>
|
|
<p class="section-sub" style="margin:0 auto;text-align:center;">
|
|
Vul je gegevens in en Chaib neemt binnen 24 uur contact op.
|
|
</p>
|
|
</div>
|
|
|
|
<div id="formSuccess" class="form-success">
|
|
✓ Aanmelding ontvangen. Je hoort binnen 24 uur van Chaib.
|
|
</div>
|
|
|
|
<form id="coachingForm" onsubmit="submitLead(event)">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label" for="fname">Naam *</label>
|
|
<input type="text" id="fname" name="naam" class="form-input" placeholder="Jouw naam" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="femail">E-mail *</label>
|
|
<input type="email" id="femail" name="email" class="form-input" placeholder="jij@bedrijf.nl" required>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label" for="fphone">Telefoon</label>
|
|
<input type="tel" id="fphone" name="telefoon" class="form-input" placeholder="06 xx xx xx xx">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="fformat">Format *</label>
|
|
<select id="fformat" name="format" class="form-input" required>
|
|
<option value="">Kies een format...</option>
|
|
<option value="groep">Groepscoaching — €20/mo (Starter)</option>
|
|
<option value="1op1">1-op-1 Sessie — €49/mo (Pro)</option>
|
|
<option value="traject">Persoonlijk traject (op aanvraag)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="fvraag">Waar wil je mee geholpen worden? *</label>
|
|
<textarea id="fvraag" name="vraag" class="form-input" placeholder="Beschrijf kort je situatie, je bedrijf en waar je nu tegenaan loopt." required></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary form-submit">Verstuur aanmelding →</button>
|
|
<p class="form-note">Geen spam. Enkel een persoonlijke reactie van Chaib binnen 24 uur.</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================
|
|
FOOTER
|
|
============================ -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-inner">
|
|
<div class="footer-brand">
|
|
<span class="footer-logo">🎓 Atlas Academy</span>
|
|
<p>Praktische kennis voor ondernemers die bouwen. Onderdeel van Atlas Corporation.</p>
|
|
</div>
|
|
<div>
|
|
<div class="footer-col-title">Cursussen</div>
|
|
<ul class="footer-links">
|
|
<li><a href="cursussen.html">Alle cursussen</a></li>
|
|
<li><a href="bisl.html">BiSL Foundation</a></li>
|
|
<li><a href="leerpad.html">Leerpad</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<div class="footer-col-title">Platform</div>
|
|
<ul class="footer-links">
|
|
<li><a href="coaching.html">Coaching</a></li>
|
|
<li><a href="pricing.html">Prijzen</a></li>
|
|
<li><a href="shop.html">Shop</a></li>
|
|
<li><a href="over.html">Over</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<div class="footer-col-title">Contact</div>
|
|
<ul class="footer-links">
|
|
<li><a href="mailto:chaib@atlascorporation.nl">chaib@atlascorporation.nl</a></li>
|
|
<li><a href="tel:+31639259220">06 39 25 92 20</a></li>
|
|
<li><a href="https://www.linkedin.com/in/baarab/" target="_blank" rel="noopener">LinkedIn</a></li>
|
|
<li><a href="https://atlascorporation.nl" target="_blank" rel="noopener">atlascorporation.nl</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p class="footer-copy">© 2026 Atlas Academy · onderdeel van <a href="https://atlascorporation.nl" target="_blank" rel="noopener">Atlas Corporation</a></p>
|
|
<p class="footer-copy">KvK · BTW · <a href="mailto:info@atlascorporation.nl">info@atlascorporation.nl</a></p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
function toggleMobileMenu() {
|
|
var m = document.getElementById('mobile-menu');
|
|
m.classList.toggle('open');
|
|
}
|
|
|
|
function submitLead(e) {
|
|
e.preventDefault();
|
|
var form = document.getElementById('coachingForm');
|
|
var data = new FormData(form);
|
|
var body = [];
|
|
data.forEach(function(v, k) { body.push(encodeURIComponent(k) + '=' + encodeURIComponent(v)); });
|
|
|
|
fetch('academy-lead', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: body.join('&') + '&source=coaching'
|
|
}).then(function(r) {
|
|
form.style.display = 'none';
|
|
document.getElementById('formSuccess').style.display = 'block';
|
|
}).catch(function() {
|
|
// fallback: open mailto
|
|
var naam = data.get('naam') || '';
|
|
var email = data.get('email') || '';
|
|
var fmt = data.get('format') || '';
|
|
var vraag = data.get('vraag') || '';
|
|
window.location.href = 'mailto:info@atlascorporation.nl?subject=Coaching aanvraag - ' + encodeURIComponent(naam)
|
|
+ '&body=' + encodeURIComponent('Naam: ' + naam + '\nE-mail: ' + email + '\nFormat: ' + fmt + '\n\n' + vraag);
|
|
});
|
|
}
|
|
|
|
// Scroll reveal
|
|
(function() {
|
|
var els = document.querySelectorAll('.reveal');
|
|
var obs = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(e) {
|
|
if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }
|
|
});
|
|
}, { threshold: 0.08 });
|
|
els.forEach(function(el, i) {
|
|
el.style.transitionDelay = (i * 0.04) + 's';
|
|
obs.observe(el);
|
|
});
|
|
})();
|
|
|
|
// Nav active scroll
|
|
window.addEventListener('scroll', function() {
|
|
var nav = document.getElementById('nav');
|
|
if (window.scrollY > 20) { nav.style.background = 'rgba(8,12,24,.95)'; }
|
|
else { nav.style.background = 'rgba(8,12,24,.88)'; }
|
|
});
|
|
</script>
|
|
<script>function toggleLang(){var isNL=document.documentElement.lang!=="en";var lang=isNL?"en":"nl";document.documentElement.lang=lang;document.getElementById("langBtn").textContent=isNL?"NL":"EN";document.querySelectorAll("[data-nl]").forEach(function(el){var v=el.getAttribute("data-"+lang);if(v)el.innerHTML=v;});localStorage.setItem("aa_lang",lang);}(function(){if(localStorage.getItem("aa_lang")==="en")toggleLang();})();</script></body>
|
|
</html>
|