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>
1371 lines
42 KiB
HTML
1371 lines
42 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="Het Atlas Academy 12-weken leerpad — gestructureerde volgorde door alle 25 modules van fundament tot groei en funding.">
|
|
<meta name="robots" content="index, follow">
|
|
<title>12-weken leerpad — Atlas Academy</title>
|
|
<style>
|
|
/* ============================
|
|
CSS CUSTOM PROPERTIES (exact from index.html)
|
|
============================ */
|
|
:root {
|
|
--bg: #040810;
|
|
--card: #0a1628;
|
|
--card2: #0d1f3c;
|
|
--border: rgba(59,130,246,.15);
|
|
--arc: #3B82F6;
|
|
--purple: #8B5CF6;
|
|
--cyan: #06B6D4;
|
|
--ok: #22C55E;
|
|
--warn: #F59E0B;
|
|
--pink: #EC4899;
|
|
--amber: #F59E0B;
|
|
--txt: #F1F5F9;
|
|
--muted: #94A3B8;
|
|
--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%; }
|
|
|
|
.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;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 26px;
|
|
border-radius: var(--radius);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
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,.06);
|
|
color: var(--txt);
|
|
border: 1px solid rgba(255,255,255,.12);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
.btn-glass:hover {
|
|
background: rgba(255,255,255,.1);
|
|
border-color: rgba(255,255,255,.2);
|
|
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);
|
|
color: var(--arc);
|
|
}
|
|
|
|
/* ============================
|
|
BACKGROUND ANIMATIONS
|
|
============================ */
|
|
@keyframes mesh {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
@keyframes float1 {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
33% { transform: translate(30px, -20px) scale(1.05); }
|
|
66% { transform: translate(-20px, 15px) scale(.97); }
|
|
}
|
|
@keyframes float2 {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
33% { transform: translate(-25px, 20px) scale(1.03); }
|
|
66% { transform: translate(20px, -15px) scale(.98); }
|
|
}
|
|
@keyframes float3 {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
50% { transform: translate(15px, 25px) scale(1.04); }
|
|
}
|
|
@keyframes fadeSlideUp {
|
|
from { opacity: 0; transform: translateY(28px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes pulseBorder {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,.3); }
|
|
50% { box-shadow: 0 0 0 8px rgba(59,130,246,0); }
|
|
}
|
|
@keyframes borderRotate {
|
|
from { --angle: 0deg; }
|
|
to { --angle: 360deg; }
|
|
}
|
|
@keyframes shimmer {
|
|
from { background-position: -200% center; }
|
|
to { background-position: 200% center; }
|
|
}
|
|
@keyframes progressPulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: .7; }
|
|
}
|
|
|
|
/* ============================
|
|
NAV (glassmorphism — exact from index.html)
|
|
============================ */
|
|
nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 200;
|
|
background: rgba(4,8,16,.85);
|
|
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 {
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
color: var(--txt);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
letter-spacing: -.01em;
|
|
}
|
|
.nav-logo:hover { color: #93C5FD; }
|
|
.nav-logo-icon {
|
|
width: 28px; height: 28px;
|
|
background: linear-gradient(135deg, var(--arc), var(--purple));
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 28px;
|
|
list-style: none;
|
|
}
|
|
.nav-links a {
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: color .15s;
|
|
}
|
|
.nav-links a:hover { color: var(--txt); }
|
|
.nav-links a.active { color: var(--arc); font-weight: 700; }
|
|
.nav-cta { padding: 9px 20px; font-size: 14px; }
|
|
.nav-mobile-toggle {
|
|
display: none;
|
|
background: rgba(255,255,255,.05);
|
|
border: 1px solid rgba(255,255,255,.1);
|
|
color: var(--txt);
|
|
padding: 6px 10px;
|
|
border-radius: 8px;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
}
|
|
.nav-mobile-menu {
|
|
display: none;
|
|
flex-direction: column;
|
|
background: rgba(10,22,40,.98);
|
|
border-bottom: 1px solid rgba(59,130,246,.1);
|
|
padding: 8px 0;
|
|
}
|
|
.nav-mobile-menu a {
|
|
display: block;
|
|
padding: 13px 24px;
|
|
color: var(--txt);
|
|
font-size: 15px;
|
|
border-bottom: 1px solid rgba(255,255,255,.04);
|
|
transition: background .15s;
|
|
}
|
|
.nav-mobile-menu a:hover { background: rgba(59,130,246,.06); }
|
|
.nav-mobile-menu a:last-child { border-bottom: none; }
|
|
@media (max-width: 700px) {
|
|
.nav-links, .nav-cta { display: none; }
|
|
.nav-mobile-toggle { display: block; }
|
|
.nav-mobile-menu.open { display: flex; }
|
|
}
|
|
|
|
/* ============================
|
|
HERO — animated background with orbs
|
|
============================ */
|
|
#hero {
|
|
min-height: 56vh;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(-45deg, #040810, #071428, #1e1b4b, #060f2a, #0c1a3a);
|
|
background-size: 400% 400%;
|
|
animation: mesh 18s ease infinite;
|
|
padding: 80px 0 64px;
|
|
text-align: center;
|
|
}
|
|
.hero-orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
filter: blur(80px);
|
|
opacity: .45;
|
|
}
|
|
.hero-orb-1 {
|
|
width: 700px; height: 700px;
|
|
background: radial-gradient(circle, rgba(59,130,246,.4) 0%, transparent 70%);
|
|
top: -200px; left: -150px;
|
|
animation: float1 20s ease-in-out infinite;
|
|
}
|
|
.hero-orb-2 {
|
|
width: 600px; height: 600px;
|
|
background: radial-gradient(circle, rgba(139,92,246,.35) 0%, transparent 70%);
|
|
bottom: -180px; right: -100px;
|
|
animation: float2 24s ease-in-out infinite;
|
|
}
|
|
.hero-orb-3 {
|
|
width: 400px; height: 400px;
|
|
background: radial-gradient(circle, rgba(6,182,212,.25) 0%, transparent 70%);
|
|
top: 40%; left: 55%;
|
|
animation: float3 16s ease-in-out infinite;
|
|
}
|
|
#hero::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(59,130,246,.04) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(59,130,246,.04) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
pointer-events: none;
|
|
}
|
|
.hero-inner {
|
|
position: relative;
|
|
z-index: 2;
|
|
animation: fadeSlideUp .7s ease both;
|
|
}
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: rgba(59,130,246,.08);
|
|
border: 1px solid rgba(59,130,246,.2);
|
|
color: #93C5FD;
|
|
padding: 7px 18px;
|
|
border-radius: 999px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
letter-spacing: .02em;
|
|
margin-bottom: 28px;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.hero-badge-dot {
|
|
width: 6px; height: 6px;
|
|
background: var(--amber);
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 0 6px var(--amber);
|
|
animation: progressPulse 2s ease-in-out infinite;
|
|
}
|
|
#hero h1 {
|
|
font-size: clamp(32px, 5vw, 56px);
|
|
font-weight: 900;
|
|
line-height: 1.08;
|
|
letter-spacing: -.03em;
|
|
margin-bottom: 18px;
|
|
color: #fff;
|
|
}
|
|
.hero-sub {
|
|
font-size: clamp(15px, 2vw, 18px);
|
|
color: #94A3B8;
|
|
max-width: 480px;
|
|
margin: 0 auto 0;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ============================
|
|
PROGRESS TRACKER (glassmorphism)
|
|
============================ */
|
|
.progress-section {
|
|
position: relative;
|
|
z-index: 10;
|
|
padding: 0 24px;
|
|
}
|
|
.progress-glass {
|
|
max-width: 680px;
|
|
margin: -36px auto 0;
|
|
background: rgba(10,22,40,.85);
|
|
border: 1px solid rgba(59,130,246,.2);
|
|
border-radius: var(--radius-xl);
|
|
padding: 28px 32px;
|
|
backdrop-filter: blur(20px);
|
|
box-shadow: 0 32px 64px rgba(0,0,0,.4), 0 0 40px rgba(59,130,246,.06);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.progress-glass::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--arc), var(--purple), var(--cyan));
|
|
}
|
|
.progress-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
.progress-title {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: .1em;
|
|
color: var(--muted);
|
|
}
|
|
.progress-pct {
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
color: var(--arc);
|
|
}
|
|
.progress-bar-wrap {
|
|
background: rgba(255,255,255,.06);
|
|
border-radius: 999px;
|
|
height: 10px;
|
|
margin-bottom: 14px;
|
|
overflow: hidden;
|
|
}
|
|
.progress-bar-fill {
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
background: linear-gradient(90deg, var(--arc) 0%, var(--ok) 100%);
|
|
transition: width .8s cubic-bezier(.4,0,.2,1);
|
|
width: 0%;
|
|
box-shadow: 0 0 12px rgba(59,130,246,.5);
|
|
}
|
|
.progress-phases {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.progress-phase-dot {
|
|
width: 32px; height: 32px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,.06);
|
|
border: 1.5px solid rgba(255,255,255,.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: var(--muted);
|
|
transition: all .3s;
|
|
}
|
|
.progress-phase-dot.done {
|
|
background: rgba(34,197,94,.15);
|
|
border-color: rgba(34,197,94,.5);
|
|
color: var(--ok);
|
|
box-shadow: 0 0 12px rgba(34,197,94,.2);
|
|
}
|
|
.progress-label {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
margin-top: 12px;
|
|
text-align: center;
|
|
}
|
|
.progress-label strong { color: var(--txt); }
|
|
|
|
/* ============================
|
|
SECTION WRAPPER
|
|
============================ */
|
|
.lp-section {
|
|
padding: 80px 0 96px;
|
|
}
|
|
.section-intro {
|
|
text-align: center;
|
|
margin-bottom: 64px;
|
|
}
|
|
.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(24px, 3.5vw, 36px);
|
|
font-weight: 800;
|
|
line-height: 1.15;
|
|
margin-bottom: 14px;
|
|
letter-spacing: -.02em;
|
|
}
|
|
.section-sub {
|
|
color: var(--muted);
|
|
font-size: 17px;
|
|
max-width: 540px;
|
|
margin: 0 auto;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ============================
|
|
HORIZONTAL SCROLL TIMELINE (desktop)
|
|
============================ */
|
|
.timeline-scroll-wrapper {
|
|
overflow-x: auto;
|
|
padding-bottom: 24px;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(59,130,246,.3) transparent;
|
|
-webkit-overflow-scrolling: touch;
|
|
cursor: grab;
|
|
}
|
|
.timeline-scroll-wrapper:active { cursor: grabbing; }
|
|
.timeline-scroll-wrapper::-webkit-scrollbar { height: 4px; }
|
|
.timeline-scroll-wrapper::-webkit-scrollbar-track { background: transparent; }
|
|
.timeline-scroll-wrapper::-webkit-scrollbar-thumb { background: rgba(59,130,246,.3); border-radius: 4px; }
|
|
|
|
.timeline-track {
|
|
display: flex;
|
|
gap: 0;
|
|
min-width: max-content;
|
|
padding: 24px 0 8px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Connector line between nodes */
|
|
.timeline-connector {
|
|
position: absolute;
|
|
top: 68px;
|
|
left: 60px;
|
|
right: 60px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg,
|
|
var(--arc) 0%,
|
|
var(--purple) 33%,
|
|
var(--cyan) 66%,
|
|
var(--ok) 100%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
.timeline-connector::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
rgba(59,130,246,.4) 20%,
|
|
rgba(139,92,246,.4) 50%,
|
|
rgba(6,182,212,.4) 80%,
|
|
transparent 100%
|
|
);
|
|
filter: blur(6px);
|
|
}
|
|
|
|
/* Each fase column */
|
|
.fase-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 280px;
|
|
flex-shrink: 0;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
/* Phase node (numbered circle) */
|
|
.fase-node {
|
|
width: 52px; height: 52px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
color: #fff;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
z-index: 2;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 0 24px rgba(59,130,246,.5);
|
|
transition: transform .2s, box-shadow .2s;
|
|
}
|
|
.fase-node:hover { transform: scale(1.1); box-shadow: 0 0 40px rgba(59,130,246,.7); }
|
|
.fase-node-1 { background: linear-gradient(135deg, #3B82F6, #6366F1); }
|
|
.fase-node-2 { background: linear-gradient(135deg, #8B5CF6, #A78BFA); }
|
|
.fase-node-3 { background: linear-gradient(135deg, #06B6D4, #3B82F6); }
|
|
.fase-node-4 { background: linear-gradient(135deg, #F59E0B, #EF4444); }
|
|
.fase-node-5 { background: linear-gradient(135deg, #10B981, #06B6D4); }
|
|
.fase-node-6 { background: linear-gradient(135deg, #EC4899, #8B5CF6); }
|
|
.fase-node.done { box-shadow: 0 0 24px rgba(34,197,94,.5); }
|
|
.fase-node.done::after {
|
|
content: '✓';
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, rgba(34,197,94,.9), rgba(16,185,129,.9));
|
|
border-radius: 50%;
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* Fase card (glassmorphism) */
|
|
.fase-card {
|
|
background: rgba(10,22,40,.8);
|
|
border: 1px solid rgba(59,130,246,.12);
|
|
border-radius: var(--radius-xl);
|
|
padding: 24px;
|
|
width: 100%;
|
|
backdrop-filter: blur(16px);
|
|
transition: border-color .2s, transform .2s, box-shadow .2s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.fase-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(59,130,246,.4), transparent);
|
|
}
|
|
.fase-card:hover {
|
|
border-color: rgba(59,130,246,.3);
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 48px rgba(0,0,0,.4), 0 0 30px rgba(59,130,246,.08);
|
|
}
|
|
.fase-card.completed {
|
|
border-color: rgba(34,197,94,.2);
|
|
background: rgba(10,22,40,.8);
|
|
}
|
|
.fase-card.completed::before {
|
|
background: linear-gradient(90deg, transparent, rgba(34,197,94,.5), transparent);
|
|
}
|
|
.fase-card.completed:hover {
|
|
border-color: rgba(34,197,94,.4);
|
|
box-shadow: 0 20px 48px rgba(0,0,0,.4), 0 0 30px rgba(34,197,94,.08);
|
|
}
|
|
|
|
/* Week badge (amber) */
|
|
.fase-week-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: rgba(245,158,11,.1);
|
|
border: 1px solid rgba(245,158,11,.25);
|
|
color: var(--amber);
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: .04em;
|
|
margin-bottom: 14px;
|
|
}
|
|
.fase-card.completed .fase-week-badge {
|
|
background: rgba(34,197,94,.1);
|
|
border-color: rgba(34,197,94,.25);
|
|
color: var(--ok);
|
|
}
|
|
|
|
.fase-title {
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
color: var(--txt);
|
|
margin-bottom: 14px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* Module pills */
|
|
.fase-pills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.fase-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 10px;
|
|
background: rgba(255,255,255,.05);
|
|
border: 1px solid rgba(255,255,255,.08);
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--muted);
|
|
transition: all .2s;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
.fase-pill:hover {
|
|
background: rgba(59,130,246,.1);
|
|
border-color: rgba(59,130,246,.3);
|
|
color: #93C5FD;
|
|
}
|
|
.fase-card.completed .fase-pill {
|
|
background: rgba(34,197,94,.06);
|
|
border-color: rgba(34,197,94,.15);
|
|
color: rgba(34,197,94,.8);
|
|
}
|
|
|
|
.fase-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
padding-top: 14px;
|
|
border-top: 1px solid rgba(255,255,255,.05);
|
|
}
|
|
.fase-time {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
.fase-time svg { flex-shrink: 0; opacity: .6; }
|
|
.fase-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
padding: 3px 9px;
|
|
border-radius: 999px;
|
|
}
|
|
.fase-status.done {
|
|
background: rgba(34,197,94,.12);
|
|
color: var(--ok);
|
|
border: 1px solid rgba(34,197,94,.25);
|
|
}
|
|
.fase-status.in-progress {
|
|
background: rgba(245,158,11,.12);
|
|
color: var(--warn);
|
|
border: 1px solid rgba(245,158,11,.25);
|
|
}
|
|
.fase-status.locked {
|
|
background: rgba(148,163,184,.06);
|
|
color: var(--muted);
|
|
border: 1px solid rgba(148,163,184,.12);
|
|
}
|
|
|
|
/* Mobile: stack vertically */
|
|
@media (max-width: 900px) {
|
|
.timeline-scroll-wrapper { overflow-x: visible; }
|
|
.timeline-track {
|
|
flex-direction: column;
|
|
min-width: auto;
|
|
gap: 24px;
|
|
padding: 0;
|
|
}
|
|
.timeline-connector { display: none; }
|
|
.fase-col {
|
|
width: 100%;
|
|
padding: 0;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
}
|
|
.fase-node {
|
|
margin-bottom: 0;
|
|
flex-shrink: 0;
|
|
margin-top: 4px;
|
|
}
|
|
.fase-card { flex: 1; }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.fase-col { flex-direction: column; }
|
|
.fase-node { margin-bottom: 12px; }
|
|
}
|
|
|
|
/* ============================
|
|
BONUS TRACK
|
|
============================ */
|
|
.bonus-track {
|
|
margin-top: 64px;
|
|
background: linear-gradient(135deg, rgba(139,92,246,.08) 0%, rgba(59,130,246,.06) 100%);
|
|
border: 1px solid rgba(139,92,246,.25);
|
|
border-radius: var(--radius-xl);
|
|
padding: 32px 36px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 24px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.bonus-track::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--purple), var(--arc), var(--cyan));
|
|
}
|
|
.bonus-icon {
|
|
font-size: 40px;
|
|
flex-shrink: 0;
|
|
line-height: 1;
|
|
margin-top: 2px;
|
|
}
|
|
.bonus-label {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: .1em;
|
|
text-transform: uppercase;
|
|
color: var(--purple);
|
|
margin-bottom: 6px;
|
|
}
|
|
.bonus-title {
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
color: var(--txt);
|
|
margin-bottom: 8px;
|
|
}
|
|
.bonus-desc {
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
margin-bottom: 16px;
|
|
line-height: 1.7;
|
|
max-width: 560px;
|
|
}
|
|
.bonus-pills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-bottom: 18px;
|
|
}
|
|
.bonus-pill {
|
|
background: rgba(139,92,246,.12);
|
|
border: 1px solid rgba(139,92,246,.25);
|
|
color: var(--purple);
|
|
padding: 4px 12px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
@media (max-width: 640px) {
|
|
.bonus-track { flex-direction: column; padding: 24px 20px; }
|
|
}
|
|
|
|
/* ============================
|
|
CTA SECTION
|
|
============================ */
|
|
.lp-cta {
|
|
text-align: center;
|
|
padding: 88px 0 96px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(-45deg, #040810, #071428, #1e1b4b, #060f2a);
|
|
background-size: 400% 400%;
|
|
animation: mesh 22s ease infinite;
|
|
}
|
|
.lp-cta .hero-orb-1 { opacity: .25; }
|
|
.lp-cta .hero-orb-2 { opacity: .2; }
|
|
#hero::after, .lp-cta::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(59,130,246,.04) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(59,130,246,.04) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
pointer-events: none;
|
|
}
|
|
.lp-cta-inner {
|
|
position: relative;
|
|
z-index: 2;
|
|
animation: fadeSlideUp .6s ease both;
|
|
}
|
|
.lp-cta h2 {
|
|
font-size: clamp(26px, 4vw, 42px);
|
|
font-weight: 900;
|
|
letter-spacing: -.02em;
|
|
margin-bottom: 16px;
|
|
}
|
|
.lp-cta p {
|
|
color: var(--muted);
|
|
font-size: 18px;
|
|
max-width: 480px;
|
|
margin: 0 auto 36px;
|
|
line-height: 1.7;
|
|
}
|
|
.cta-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 14px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ============================
|
|
SCROLL REVEAL
|
|
============================ */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
transition: opacity .6s ease, transform .6s ease;
|
|
}
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ============================
|
|
FOOTER
|
|
============================ */
|
|
footer {
|
|
background: var(--card);
|
|
border-top: 1px solid rgba(59,130,246,.08);
|
|
padding: 56px 0 32px;
|
|
}
|
|
.footer-inner {
|
|
display: grid;
|
|
grid-template-columns: 1.5fr 1fr 1fr 1fr;
|
|
gap: 40px;
|
|
margin-bottom: 40px;
|
|
}
|
|
.footer-logo {
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--txt);
|
|
margin-bottom: 12px;
|
|
}
|
|
.footer-brand p {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
max-width: 240px;
|
|
line-height: 1.6;
|
|
}
|
|
.footer-col-title {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: .08em;
|
|
color: var(--muted);
|
|
margin-bottom: 16px;
|
|
}
|
|
.footer-links {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.footer-links a {
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
transition: color .15s;
|
|
}
|
|
.footer-links a:hover { color: var(--txt); }
|
|
.footer-bottom {
|
|
border-top: 1px solid rgba(255,255,255,.05);
|
|
padding-top: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
.footer-copy { color: var(--muted); font-size: 13px; }
|
|
.footer-copy a { color: var(--muted); }
|
|
.footer-copy a:hover { color: var(--arc); }
|
|
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
|
|
@media (max-width: 480px) { .footer-inner { grid-template-columns: 1fr; gap: 28px; } .cta-actions { flex-direction: column; align-items: stretch; } }
|
|
.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>
|
|
<script>
|
|
/* ── Atlas Academy auth gate ── */
|
|
(function(){
|
|
var tok=localStorage.getItem('aa_token');
|
|
if(!tok){window.location.replace('/login.html?next='+encodeURIComponent(window.location.pathname));return;}
|
|
try{
|
|
var p=tok.split('.');if(p.length!==3)throw 0;
|
|
var pay=JSON.parse(atob((p[1]+'==').replace(/-/g,'+').replace(/_/g,'/')));
|
|
if(!pay.exp||Date.now()/1000>pay.exp)throw 0;
|
|
window.ATLAS_USER={name:pay.name,email:pay.sub};
|
|
}catch(e){localStorage.removeItem('aa_token');window.location.replace('/login.html?next='+encodeURIComponent(window.location.pathname));}
|
|
})();
|
|
</script>
|
|
|
|
<!-- NAV -->
|
|
<nav>
|
|
<div class="container nav-inner">
|
|
<a href="index.html" class="nav-logo">
|
|
<span class="nav-logo-icon">🎓</span>
|
|
Atlas Academy
|
|
</a>
|
|
<ul class="nav-links">
|
|
<li><a href="cursussen.html">Cursussen</a></li>
|
|
<li><a href="leerpad.html" class="active">Leerpad</a></li>
|
|
<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="/web/login?redirect=%2Fslides">Inloggen</a></li>
|
|
</ul>
|
|
<button class="lang-toggle" onclick="toggleLang()" id="langBtn">EN</button><a class="btn btn-primary nav-cta" href="mailto:info@atlascorporation.nl?subject=Atlas+Academy">Start gratis →</a>
|
|
<button class="nav-mobile-toggle" onclick="toggleMenu()" aria-label="Menu openen">☰</button>
|
|
</div>
|
|
<div class="nav-mobile-menu" id="mobileMenu">
|
|
<a href="cursussen.html">Cursussen</a>
|
|
<a href="leerpad.html">Leerpad</a>
|
|
<a href="coaching.html">Coaching</a>
|
|
<a href="pricing.html">Prijzen</a>
|
|
<a href="shop.html">Shop</a>
|
|
<a href="/web/login?redirect=%2Fslides">Inloggen</a>
|
|
<a href="mailto:info@atlascorporation.nl?subject=Atlas+Academy">Start gratis</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section id="hero">
|
|
<div class="hero-orb hero-orb-1"></div>
|
|
<div class="hero-orb hero-orb-2"></div>
|
|
<div class="hero-orb hero-orb-3"></div>
|
|
<div class="container">
|
|
<div class="hero-inner">
|
|
<div class="hero-badge">
|
|
<span class="hero-badge-dot"></span>
|
|
12 weken · 25 modules · 6 fases
|
|
</div>
|
|
<h1 class="gradient-text">🗺️ Het 12-weken leerpad</h1>
|
|
<p class="hero-sub">Gestructureerde volgorde door alle 25 modules — van fundament tot funding.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PROGRESS TRACKER -->
|
|
<div class="progress-section">
|
|
<div class="progress-glass">
|
|
<div class="progress-header">
|
|
<span class="progress-title">Jouw voortgang</span>
|
|
<span class="progress-pct" id="progressPercent">0%</span>
|
|
</div>
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-bar-fill" id="progressBarFill"></div>
|
|
</div>
|
|
<div class="progress-phases" id="progressDots">
|
|
<div class="progress-phase-dot" data-phase="1">1</div>
|
|
<div class="progress-phase-dot" data-phase="2">2</div>
|
|
<div class="progress-phase-dot" data-phase="3">3</div>
|
|
<div class="progress-phase-dot" data-phase="4">4</div>
|
|
<div class="progress-phase-dot" data-phase="5">5</div>
|
|
<div class="progress-phase-dot" data-phase="6">6</div>
|
|
</div>
|
|
<p class="progress-label">
|
|
<strong id="progressFases">0 van 6</strong> fases afgerond — klik een fase aan om hem te markeren
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TIMELINE -->
|
|
<section class="lp-section">
|
|
<div class="container">
|
|
|
|
<div class="section-intro reveal">
|
|
<span class="section-label">Leerroute</span>
|
|
<h2 class="section-title">Volg de route, of kies jouw instapmoment</h2>
|
|
<p class="section-sub">Elke fase bouwt voort op de vorige. Klaar met een fase? Klik hem aan om je voortgang bij te houden.</p>
|
|
</div>
|
|
|
|
<!-- HORIZONTAL SCROLL WRAPPER -->
|
|
<div class="timeline-scroll-wrapper">
|
|
<div class="timeline-track" id="timeline">
|
|
<div class="timeline-connector"></div>
|
|
|
|
<!-- FASE 1 -->
|
|
<div class="fase-col reveal" id="fase-1" data-fase="1" onclick="toggleFase(1)">
|
|
<div class="fase-node fase-node-1" id="fase-node-1">1</div>
|
|
<div class="fase-card">
|
|
<div class="fase-week-badge">📅 Week 1–2</div>
|
|
<div class="fase-title">💡 Fundament</div>
|
|
<div class="fase-pills">
|
|
<a class="fase-pill" href="cursussen/startup.html" data-module="startup-groei" onclick="markVisited(event,'startup-groei')">Business Model Canvas</a>
|
|
<a class="fase-pill" href="cursussen/startup.html" data-module="startup-groei" onclick="markVisited(event,'startup-groei')">SaaS metrics</a>
|
|
<a class="fase-pill" href="cursussen/startup.html" data-module="startup-groei" onclick="markVisited(event,'startup-groei')">OKRs & KPIs</a>
|
|
</div>
|
|
<div class="fase-footer">
|
|
<div class="fase-time">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
4–6 uur
|
|
</div>
|
|
<div class="fase-status locked" id="fase-1-status">Nog te doen</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FASE 2 -->
|
|
<div class="fase-col reveal" id="fase-2" data-fase="2" onclick="toggleFase(2)">
|
|
<div class="fase-node fase-node-2" id="fase-node-2">2</div>
|
|
<div class="fase-card">
|
|
<div class="fase-week-badge">📅 Week 3–4</div>
|
|
<div class="fase-title">🔐 Tech & AI basis</div>
|
|
<div class="fase-pills">
|
|
<a class="fase-pill" href="leerplatform.html" data-module="it-basis" onclick="markVisited(event,'it-basis')">Docker</a>
|
|
<a class="fase-pill" href="leerplatform.html" data-module="it-basis" onclick="markVisited(event,'it-basis')">SSL/TLS</a>
|
|
<a class="fase-pill" href="cursussen/ai.html" data-module="ai-automatisering" onclick="markVisited(event,'ai-automatisering')">Prompt engineering</a>
|
|
</div>
|
|
<div class="fase-footer">
|
|
<div class="fase-time">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
4–6 uur
|
|
</div>
|
|
<div class="fase-status locked" id="fase-2-status">Nog te doen</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FASE 3 -->
|
|
<div class="fase-col reveal" id="fase-3" data-fase="3" onclick="toggleFase(3)">
|
|
<div class="fase-node fase-node-3" id="fase-node-3">3</div>
|
|
<div class="fase-card">
|
|
<div class="fase-week-badge">📅 Week 5–6</div>
|
|
<div class="fase-title">📣 Sales & Marketing</div>
|
|
<div class="fase-pills">
|
|
<a class="fase-pill" href="leerplatform.html" data-module="sales-marketing" onclick="markVisited(event,'sales-marketing')">Klantgesprek & demo</a>
|
|
<a class="fase-pill" href="leerplatform.html" data-module="sales-marketing" onclick="markVisited(event,'sales-marketing')">Google Ads</a>
|
|
<a class="fase-pill" href="leerplatform.html" data-module="sales-marketing" onclick="markVisited(event,'sales-marketing')">Meta Ads</a>
|
|
<a class="fase-pill" href="leerplatform.html" data-module="sales-marketing" onclick="markVisited(event,'sales-marketing')">CRM pipeline</a>
|
|
</div>
|
|
<div class="fase-footer">
|
|
<div class="fase-time">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
4–6 uur
|
|
</div>
|
|
<div class="fase-status locked" id="fase-3-status">Nog te doen</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FASE 4 -->
|
|
<div class="fase-col reveal" id="fase-4" data-fase="4" onclick="toggleFase(4)">
|
|
<div class="fase-node fase-node-4" id="fase-node-4">4</div>
|
|
<div class="fase-card">
|
|
<div class="fase-week-badge">📅 Week 7–8</div>
|
|
<div class="fase-title">💶 Geld & Juridisch</div>
|
|
<div class="fase-pills">
|
|
<a class="fase-pill" href="leerplatform.html" data-module="business-juridisch" onclick="markVisited(event,'business-juridisch')">Financieel beheer ZZP/BV</a>
|
|
<a class="fase-pill" href="leerplatform.html" data-module="business-juridisch" onclick="markVisited(event,'business-juridisch')">Contracten</a>
|
|
<a class="fase-pill" href="cursussen/startup.html" data-module="startup-groei" onclick="markVisited(event,'startup-groei')">Pricing strategie</a>
|
|
</div>
|
|
<div class="fase-footer">
|
|
<div class="fase-time">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
4–6 uur
|
|
</div>
|
|
<div class="fase-status locked" id="fase-4-status">Nog te doen</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FASE 5 -->
|
|
<div class="fase-col reveal" id="fase-5" data-fase="5" onclick="toggleFase(5)">
|
|
<div class="fase-node fase-node-5" id="fase-node-5">5</div>
|
|
<div class="fase-card">
|
|
<div class="fase-week-badge">📅 Week 9–10</div>
|
|
<div class="fase-title">🤖 AI & Automatisering</div>
|
|
<div class="fase-pills">
|
|
<a class="fase-pill" href="cursussen/ai.html" data-module="ai-automatisering" onclick="markVisited(event,'ai-automatisering')">n8n</a>
|
|
<a class="fase-pill" href="cursussen/ai.html" data-module="ai-automatisering" onclick="markVisited(event,'ai-automatisering')">Ollama</a>
|
|
<a class="fase-pill" href="cursussen/ai.html" data-module="ai-automatisering" onclick="markVisited(event,'ai-automatisering')">RAG</a>
|
|
<a class="fase-pill" href="cursussen/ai.html" data-module="ai-automatisering" onclick="markVisited(event,'ai-automatisering')">AI agents</a>
|
|
<a class="fase-pill" href="cursussen/ai.html" data-module="ai-automatisering" onclick="markVisited(event,'ai-automatisering')">AI & Auto cursus</a>
|
|
</div>
|
|
<div class="fase-footer">
|
|
<div class="fase-time">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
6–8 uur
|
|
</div>
|
|
<div class="fase-status locked" id="fase-5-status">Nog te doen</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FASE 6 -->
|
|
<div class="fase-col reveal" id="fase-6" data-fase="6" onclick="toggleFase(6)">
|
|
<div class="fase-node fase-node-6" id="fase-node-6">6</div>
|
|
<div class="fase-card">
|
|
<div class="fase-week-badge">📅 Week 11–12</div>
|
|
<div class="fase-title">🚀 Groei & Funding</div>
|
|
<div class="fase-pills">
|
|
<a class="fase-pill" href="cursussen/startup.html" data-module="startup-groei" onclick="markVisited(event,'startup-groei')">Product-markt fit</a>
|
|
<a class="fase-pill" href="cursussen/startup.html" data-module="startup-groei" onclick="markVisited(event,'startup-groei')">Funding</a>
|
|
<a class="fase-pill" href="leerplatform.html" data-module="sales-marketing" onclick="markVisited(event,'sales-marketing')">Klantacquisitie</a>
|
|
<a class="fase-pill" href="leerplatform.html" data-module="sales-marketing" onclick="markVisited(event,'sales-marketing')">Onderhandelen</a>
|
|
<a class="fase-pill" href="leerplatform.html" data-module="persoonlijke-ontwikkeling" onclick="markVisited(event,'persoonlijke-ontwikkeling')">Netwerken</a>
|
|
</div>
|
|
<div class="fase-footer">
|
|
<div class="fase-time">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
6–8 uur
|
|
</div>
|
|
<div class="fase-status locked" id="fase-6-status">Nog te doen</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /timeline-track -->
|
|
</div><!-- /timeline-scroll-wrapper -->
|
|
|
|
<!-- BONUS TRACK -->
|
|
<div class="bonus-track reveal">
|
|
<div class="bonus-icon">📚</div>
|
|
<div>
|
|
<div class="bonus-label">Bonus track — parallel</div>
|
|
<div class="bonus-title">BiSL Foundation</div>
|
|
<p class="bonus-desc">Doe dit parallel in week 3–8. Functioneel beheer en IT-procesontwerp voor ondernemers die met leveranciers of IT-systemen werken. Preview van 3 modules gratis beschikbaar.</p>
|
|
<div class="bonus-pills">
|
|
<span class="bonus-pill">97 oefenvragen</span>
|
|
<span class="bonus-pill">17 lessen</span>
|
|
<span class="bonus-pill">Week 3–8</span>
|
|
<span class="bonus-pill">Gratis preview</span>
|
|
</div>
|
|
<a href="cursussen/bisl.html" class="btn btn-outline" style="font-size:14px;padding:9px 20px;">Open BiSL Foundation →</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="lp-cta">
|
|
<div class="hero-orb hero-orb-1" style="opacity:.2;"></div>
|
|
<div class="hero-orb hero-orb-2" style="opacity:.18;"></div>
|
|
<div class="container lp-cta-inner">
|
|
<h2 class="gradient-text">Klaar om te beginnen?</h2>
|
|
<p>Start bij fase 1 of spring in op het punt dat het meest urgent is. Alles is direct toepasbaar.</p>
|
|
<div class="cta-actions">
|
|
<a href="cursussen.html" class="btn btn-primary">▶︎ Start het leerpad</a>
|
|
<a href="pricing.html" class="btn btn-glass">Bekijk pakketten</a>
|
|
</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/bisl.html">BiSL Foundation</a></li>
|
|
<li><a href="leerplatform.html">IT Basis</a></li>
|
|
<li><a href="cursussen/startup.html">Startup & Groei</a></li>
|
|
<li><a href="leerplatform.html">Sales & Marketing</a></li>
|
|
<li><a href="cursussen.html">Alle cursussen →</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<div class="footer-col-title">Platform</div>
|
|
<ul class="footer-links">
|
|
<li><a href="cursussen.html">Cursussen</a></li>
|
|
<li><a href="leerpad.html">Leerpad</a></li>
|
|
<li><a href="coaching.html">Coaching</a></li>
|
|
<li><a href="pricing.html">Prijzen</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<div class="footer-col-title">Contact</div>
|
|
<ul class="footer-links">
|
|
<li><a href="mailto:info@atlascorporation.nl">info@atlascorporation.nl</a></li>
|
|
<li><a href="https://atlascorporation.nl" target="_blank" rel="noopener">atlascorporation.nl</a></li>
|
|
<li><a href="mailto:info@atlascorporation.nl?subject=Atlas+Academy">Aanmelden</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" style="font-size:12px;">KvK · BTW · info@atlascorporation.nl</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// ---- NAV TOGGLE ----
|
|
function toggleMenu() {
|
|
document.getElementById('mobileMenu').classList.toggle('open');
|
|
}
|
|
|
|
// ---- PROGRESS TRACKER ----
|
|
var faseModules = {
|
|
1: ['startup-groei'],
|
|
2: ['it-basis', 'ai-automatisering'],
|
|
3: ['sales-marketing'],
|
|
4: ['business-juridisch', 'startup-groei'],
|
|
5: ['ai-automatisering'],
|
|
6: ['startup-groei', 'sales-marketing', 'persoonlijke-ontwikkeling']
|
|
};
|
|
|
|
function isVisited(slug) {
|
|
return localStorage.getItem('atlas_academy_visited_' + slug) === '1';
|
|
}
|
|
function isFaseComplete(n) {
|
|
var slugs = faseModules[n] || [];
|
|
return slugs.length > 0 && slugs.every(function(s){ return isVisited(s); });
|
|
}
|
|
|
|
// Manual toggle: click a fase to mark all its modules visited/unvisited
|
|
function toggleFase(n) {
|
|
var slugs = faseModules[n] || [];
|
|
var complete = isFaseComplete(n);
|
|
slugs.forEach(function(s) {
|
|
if (complete) {
|
|
localStorage.removeItem('atlas_academy_visited_' + s);
|
|
} else {
|
|
localStorage.setItem('atlas_academy_visited_' + s, '1');
|
|
}
|
|
});
|
|
updateProgress();
|
|
}
|
|
|
|
function markVisited(e, slug) {
|
|
e.stopPropagation();
|
|
localStorage.setItem('atlas_academy_visited_' + slug, '1');
|
|
updateProgress();
|
|
}
|
|
|
|
function updateProgress() {
|
|
var completed = 0;
|
|
for (var i = 1; i <= 6; i++) {
|
|
var col = document.getElementById('fase-' + i);
|
|
var node = document.getElementById('fase-node-' + i);
|
|
var statusEl = document.getElementById('fase-' + i + '-status');
|
|
var dot = document.querySelector('[data-phase="' + i + '"]');
|
|
|
|
if (isFaseComplete(i)) {
|
|
completed++;
|
|
if (col) {
|
|
col.querySelector('.fase-card').classList.add('completed');
|
|
col.querySelector('.fase-week-badge').style.background = 'rgba(34,197,94,.1)';
|
|
col.querySelector('.fase-week-badge').style.borderColor = 'rgba(34,197,94,.25)';
|
|
col.querySelector('.fase-week-badge').style.color = '#22C55E';
|
|
}
|
|
if (node) node.classList.add('done');
|
|
if (statusEl) { statusEl.className = 'fase-status done'; statusEl.textContent = '✓ Afgerond'; }
|
|
if (dot) dot.classList.add('done');
|
|
} else {
|
|
if (col) {
|
|
col.querySelector('.fase-card').classList.remove('completed');
|
|
col.querySelector('.fase-week-badge').removeAttribute('style');
|
|
}
|
|
if (node) node.classList.remove('done');
|
|
if (statusEl) { statusEl.className = 'fase-status locked'; statusEl.textContent = 'Nog te doen'; }
|
|
if (dot) dot.classList.remove('done');
|
|
}
|
|
}
|
|
var pct = Math.round((completed / 6) * 100);
|
|
var fill = document.getElementById('progressBarFill');
|
|
var fasesEl = document.getElementById('progressFases');
|
|
var pctEl = document.getElementById('progressPercent');
|
|
if (fill) fill.style.width = pct + '%';
|
|
if (fasesEl) fasesEl.textContent = completed + ' van 6';
|
|
if (pctEl) pctEl.textContent = pct + '%';
|
|
}
|
|
|
|
// ---- SCROLL REVEAL ----
|
|
function initReveal() {
|
|
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.12 });
|
|
els.forEach(function(el, i) {
|
|
el.style.transitionDelay = (i * 0.06) + 's';
|
|
obs.observe(el);
|
|
});
|
|
}
|
|
|
|
// ---- DRAG SCROLL ----
|
|
var wrapper = document.querySelector('.timeline-scroll-wrapper');
|
|
if (wrapper) {
|
|
var isDown = false, startX, scrollLeft;
|
|
wrapper.addEventListener('mousedown', function(e) {
|
|
isDown = true; startX = e.pageX - wrapper.offsetLeft; scrollLeft = wrapper.scrollLeft;
|
|
});
|
|
window.addEventListener('mouseup', function() { isDown = false; });
|
|
wrapper.addEventListener('mousemove', function(e) {
|
|
if (!isDown) return;
|
|
e.preventDefault();
|
|
var x = e.pageX - wrapper.offsetLeft;
|
|
wrapper.scrollLeft = scrollLeft - (x - startX);
|
|
});
|
|
}
|
|
|
|
updateProgress();
|
|
initReveal();
|
|
</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>
|