Atlas Developer
b1fed1989a
- mollie_enroll.py rewritten: Mollie Customer → sequenceType=first payment → Subscription API → recurring webhook → Odoo enrollment / removal - SQLite subscriber + payments tracking (/opt/atlas/academy/subscriptions.db) - Plans: Starter €20/mo, Pro €49/mo with per-plan Odoo channel enrollment - Courses 1-5,7-10 set to invite-only; course 6 (IT-Basis) free sample - index.html: subscription CTAs, removed coming-soon waitlist language - pricing.html: CTAs → /betalen?plan= (live Mollie), Free → /web/signup - betaald.html: subscription success messaging with login CTA - Mollie live key active, Odoo provider ID=11 enabled
964 lines
31 KiB
HTML
964 lines
31 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="Atlas Academy prijzen — Starter €20/maand, Pro €49/maand. Geen verborgen kosten, maandelijks opzegbaar.">
|
|
<meta name="robots" content="index, follow">
|
|
<title>Prijzen — 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); }
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--muted);
|
|
border: 1px solid rgba(255,255,255,.08);
|
|
}
|
|
.btn-ghost:hover { background: rgba(255,255,255,.05); color: var(--txt); border-color: rgba(255,255,255,.15); }
|
|
|
|
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: 540px; line-height: 1.7; }
|
|
|
|
/* ============================
|
|
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 shimmer { from { background-position: -200% center; } to { background-position: 200% center; } }
|
|
@keyframes borderGlow {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,.4), 0 0 40px rgba(59,130,246,.15); }
|
|
50% { box-shadow: 0 0 0 4px rgba(59,130,246,.1), 0 0 80px rgba(59,130,246,.25); }
|
|
}
|
|
@keyframes gradientBorder {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
/* ============================
|
|
NAV (exact glassmorphism 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
|
|
============================ */
|
|
#hero {
|
|
min-height: 50vh;
|
|
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 72px;
|
|
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 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;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ============================
|
|
PRICING GRID
|
|
============================ */
|
|
#pricing {
|
|
background: var(--bg);
|
|
padding: 40px 0 96px;
|
|
}
|
|
|
|
.pricing-grid {
|
|
display: grid;
|
|
grid-template-columns: 280px 1fr 280px;
|
|
gap: 24px;
|
|
align-items: start;
|
|
margin-bottom: 48px;
|
|
}
|
|
@media (max-width: 900px) {
|
|
.pricing-grid {
|
|
grid-template-columns: 1fr;
|
|
max-width: 520px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
/* Reorder: Starter first on mobile */
|
|
.pricing-card--featured { order: -1; }
|
|
}
|
|
|
|
/* Base card (Free + Pro — slightly muted) */
|
|
.pricing-card {
|
|
background: rgba(10,22,40,.7);
|
|
border: 1px solid rgba(255,255,255,.07);
|
|
border-radius: var(--radius-xl);
|
|
padding: 32px 26px 28px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
transition: border-color .2s, transform .2s;
|
|
backdrop-filter: blur(12px);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.pricing-card:hover {
|
|
border-color: rgba(255,255,255,.14);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* FREE card — slightly smaller, muted accent */
|
|
.pricing-card--free {
|
|
opacity: .88;
|
|
}
|
|
.pricing-card--free::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, rgba(34,197,94,.5), rgba(16,185,129,.3));
|
|
}
|
|
|
|
/* STARTER card — PROMINENT: gradient border animation, larger */
|
|
.pricing-card--featured {
|
|
border: none;
|
|
background: linear-gradient(var(--card2), var(--card2)) padding-box,
|
|
linear-gradient(135deg, var(--arc), var(--purple), var(--cyan), var(--arc)) border-box;
|
|
background-size: 100% 100%, 300% 300%;
|
|
animation: gradientBorder 4s ease infinite;
|
|
border-radius: var(--radius-xl);
|
|
border: 2px solid transparent;
|
|
position: relative;
|
|
padding: 40px 30px 36px;
|
|
box-shadow: 0 0 60px rgba(59,130,246,.18), 0 32px 64px rgba(0,0,0,.5);
|
|
animation: borderGlow 3s ease-in-out infinite;
|
|
}
|
|
/* Re-apply gradient border via pseudo */
|
|
.pricing-card--featured::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: var(--radius-xl);
|
|
padding: 2px;
|
|
background: linear-gradient(135deg, var(--arc), var(--purple), var(--cyan), var(--arc));
|
|
background-size: 300% 300%;
|
|
animation: gradientBorder 4s ease infinite;
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: destination-out;
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* PRO card — gold/amber accent */
|
|
.pricing-card--pro {
|
|
border-color: rgba(245,158,11,.15);
|
|
}
|
|
.pricing-card--pro:hover { border-color: rgba(245,158,11,.3); }
|
|
.pricing-card--pro::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--warn), #f97316, var(--warn));
|
|
background-size: 200%;
|
|
animation: shimmer 3s linear infinite;
|
|
}
|
|
|
|
/* "Meest gekozen" badge */
|
|
.most-chosen {
|
|
position: absolute;
|
|
top: -16px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: linear-gradient(135deg, var(--arc), var(--purple));
|
|
color: #fff;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
padding: 5px 20px;
|
|
border-radius: 999px;
|
|
white-space: nowrap;
|
|
box-shadow: 0 4px 20px rgba(59,130,246,.4);
|
|
z-index: 3;
|
|
}
|
|
|
|
.pricing-tier {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
margin-bottom: 14px;
|
|
}
|
|
.pricing-card--featured .pricing-tier { color: var(--arc); }
|
|
.pricing-card--pro .pricing-tier { color: var(--warn); }
|
|
|
|
.pricing-price {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.pricing-amount {
|
|
font-size: 44px;
|
|
font-weight: 900;
|
|
color: var(--txt);
|
|
line-height: 1;
|
|
}
|
|
.pricing-card--featured .pricing-amount {
|
|
background: linear-gradient(135deg, #fff 0%, #93c5fd 50%, #c4b5fd 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
font-size: 52px;
|
|
}
|
|
.pricing-card--pro .pricing-amount {
|
|
background: linear-gradient(135deg, var(--warn), #f97316);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.pricing-per { font-size: 15px; color: var(--muted); }
|
|
|
|
.pricing-tagline {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
margin-bottom: 22px;
|
|
line-height: 1.55;
|
|
}
|
|
.pricing-card--featured .pricing-tagline { font-size: 14px; color: #94A3B8; }
|
|
|
|
/* Plan bullets (short feature summary) */
|
|
.plan-bullets {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-bottom: 22px;
|
|
padding-bottom: 22px;
|
|
border-bottom: 1px solid rgba(255,255,255,.06);
|
|
}
|
|
.plan-bullets li {
|
|
font-size: 14px;
|
|
color: var(--txt);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 9px;
|
|
line-height: 1.5;
|
|
}
|
|
.plan-bullets li::before {
|
|
content: '→';
|
|
color: var(--arc);
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
.pricing-card--pro .plan-bullets li::before { color: var(--warn); }
|
|
.pricing-card--free .plan-bullets li::before { color: var(--ok); }
|
|
|
|
/* Feature checklist */
|
|
.feature-list {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-bottom: 28px;
|
|
flex: 1;
|
|
}
|
|
.feature-list li {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
line-height: 1.45;
|
|
}
|
|
.ico {
|
|
flex-shrink: 0;
|
|
font-size: 13px;
|
|
font-weight: 900;
|
|
margin-top: 1px;
|
|
width: 16px;
|
|
text-align: center;
|
|
}
|
|
.ico--yes { color: var(--ok); }
|
|
.ico--no { color: rgba(148,163,184,.3); }
|
|
|
|
/* Highlighted features on starter */
|
|
.pricing-card--featured .feature-list li {
|
|
font-size: 14px;
|
|
color: #94A3B8;
|
|
}
|
|
.pricing-card--featured .ico--yes { color: var(--ok); }
|
|
|
|
/* CTA buttons */
|
|
.pricing-cta {
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: auto;
|
|
padding: 13px 24px;
|
|
border-radius: var(--radius);
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
transition: all .2s;
|
|
text-decoration: none;
|
|
}
|
|
.pricing-cta--ghost {
|
|
background: transparent;
|
|
color: var(--muted);
|
|
border: 1px solid rgba(255,255,255,.08);
|
|
}
|
|
.pricing-cta--ghost:hover { background: rgba(255,255,255,.05); color: var(--txt); border-color: rgba(255,255,255,.15); }
|
|
.pricing-cta--primary {
|
|
background: linear-gradient(135deg, var(--arc), var(--purple));
|
|
color: #fff;
|
|
box-shadow: 0 0 30px rgba(59,130,246,.4);
|
|
padding: 15px 28px;
|
|
font-size: 16px;
|
|
}
|
|
.pricing-cta--primary:hover { box-shadow: 0 0 56px rgba(59,130,246,.6); transform: translateY(-2px); color: #fff; }
|
|
.pricing-cta--amber {
|
|
background: transparent;
|
|
color: var(--warn);
|
|
border: 1.5px solid rgba(245,158,11,.4);
|
|
}
|
|
.pricing-cta--amber:hover { background: rgba(245,158,11,.08); border-color: var(--warn); box-shadow: 0 0 20px rgba(245,158,11,.2); transform: translateY(-2px); color: var(--warn); }
|
|
|
|
/* ============================
|
|
PAYMENT NOTE
|
|
============================ */
|
|
.payment-note {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
padding: 20px 0 0;
|
|
line-height: 1.7;
|
|
border-top: 1px solid rgba(255,255,255,.05);
|
|
margin-top: 4px;
|
|
}
|
|
.payment-note strong { color: var(--txt); }
|
|
|
|
/* ============================
|
|
FAQ
|
|
============================ */
|
|
#faq {
|
|
background: rgba(10,22,40,.5);
|
|
padding: 88px 0;
|
|
}
|
|
.faq-header { margin-bottom: 40px; }
|
|
.faq-list {
|
|
max-width: 800px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid rgba(59,130,246,.1);
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
background: rgba(10,22,40,.6);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
.faq-item { border-bottom: 1px solid rgba(255,255,255,.05); }
|
|
.faq-item:last-child { border-bottom: none; }
|
|
.faq-q {
|
|
width: 100%;
|
|
background: none;
|
|
border: none;
|
|
color: var(--txt);
|
|
font-family: var(--font);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
padding: 22px 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: background .15s, color .15s;
|
|
}
|
|
.faq-q:hover { background: rgba(59,130,246,.04); }
|
|
.faq-icon { font-size: 20px; color: var(--arc); flex-shrink: 0; transition: transform .2s; font-weight: 300; line-height: 1; }
|
|
.faq-a {
|
|
display: none;
|
|
padding: 0 28px 22px;
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
line-height: 1.75;
|
|
}
|
|
.faq-item.open .faq-a { display: block; }
|
|
.faq-item.open .faq-icon { transform: rotate(45deg); }
|
|
.faq-item.open .faq-q { color: var(--arc); }
|
|
|
|
/* ============================
|
|
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: 720px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
|
|
@media (max-width: 480px) { .footer-inner { grid-template-columns: 1fr; gap: 28px; } }
|
|
.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>
|
|
<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">Leerpad</a></li>
|
|
<li><a href="coaching.html">Coaching</a></li>
|
|
<li><a href="pricing.html" class="active">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>
|
|
<button class="lang-toggle" onclick="toggleLang()" id="langBtn">EN</button><a class="btn btn-primary nav-cta" href="/web/signup?redirect=%2Fslides">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="over.html">Over</a>
|
|
<a href="/web/login?redirect=%2Fslides">Inloggen</a>
|
|
<a href="/web/signup?redirect=%2Fslides">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">Prijzen</div>
|
|
<h1 class="gradient-text">Transparante prijzen.<br>Geen verborgen kosten.</h1>
|
|
<p class="hero-sub">Kies het plan dat past bij jouw fase. Maandelijks opzegbaar — geen jaarcontract vereist.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PRICING TABLE -->
|
|
<section id="pricing">
|
|
<div class="container">
|
|
|
|
<div class="pricing-grid reveal">
|
|
|
|
<!-- ===== FREE ===== -->
|
|
<div class="pricing-card pricing-card--free">
|
|
<div class="pricing-tier">Free</div>
|
|
<div class="pricing-price">
|
|
<span class="pricing-amount" style="font-size:40px;">Gratis</span>
|
|
</div>
|
|
<p class="pricing-tagline">Begin zonder risico. Kijk of de aanpak bij je past.</p>
|
|
|
|
<ul class="plan-bullets">
|
|
<li>3 modules gratis</li>
|
|
<li>BiSL Foundation preview (lessen 1–3)</li>
|
|
<li>Geen credit card nodig</li>
|
|
</ul>
|
|
|
|
<ul class="feature-list">
|
|
<li><span class="ico ico--yes">✓</span> BiSL les 1–3</li>
|
|
<li><span class="ico ico--yes">✓</span> Cursuscatalogus</li>
|
|
<li><span class="ico ico--yes">✓</span> Leerpad inzien</li>
|
|
<li><span class="ico ico--no">✕</span> Groepscoaching</li>
|
|
<li><span class="ico ico--no">✕</span> Alle modules</li>
|
|
<li><span class="ico ico--no">✕</span> 1-op-1 sessie</li>
|
|
</ul>
|
|
|
|
<a href="/web/signup?redirect=%2Fslides" class="pricing-cta pricing-cta--ghost">
|
|
Start gratis
|
|
</a>
|
|
</div>
|
|
|
|
<!-- ===== STARTER (FEATURED — center, prominent) ===== -->
|
|
<div class="pricing-card pricing-card--featured">
|
|
<span class="most-chosen">⭐ Meest gekozen</span>
|
|
<div class="pricing-tier">Starter</div>
|
|
<div class="pricing-price">
|
|
<span class="pricing-amount">€20</span>
|
|
<span class="pricing-per">/ maand</span>
|
|
</div>
|
|
<p class="pricing-tagline">Alles wat je nodig hebt om serieus te bouwen en te groeien.</p>
|
|
|
|
<ul class="plan-bullets">
|
|
<li>Alle 25 modules</li>
|
|
<li>8 complete cursussen</li>
|
|
<li>BiSL examentrainer (97 vragen)</li>
|
|
<li>Groepscoaching 1×/maand — Zoom 45 min, opname</li>
|
|
<li>12-weken leerpad</li>
|
|
<li>Community toegang</li>
|
|
</ul>
|
|
|
|
<ul class="feature-list">
|
|
<li><span class="ico ico--yes">✓</span> Alles uit Free</li>
|
|
<li><span class="ico ico--yes">✓</span> Alle modules</li>
|
|
<li><span class="ico ico--yes">✓</span> BiSL examentrainer</li>
|
|
<li><span class="ico ico--yes">✓</span> Groepscoaching</li>
|
|
<li><span class="ico ico--yes">✓</span> 12-weken leerpad</li>
|
|
<li><span class="ico ico--no">✕</span> 1-op-1 sessie</li>
|
|
<li><span class="ico ico--no">✕</span> Persoonlijk traject</li>
|
|
</ul>
|
|
|
|
<a href="/betalen?plan=starter" class="pricing-cta pricing-cta--primary">
|
|
Word Starter →
|
|
</a>
|
|
</div>
|
|
|
|
<!-- ===== PRO (amber/gold accent) ===== -->
|
|
<div class="pricing-card pricing-card--pro">
|
|
<div class="pricing-tier">Pro</div>
|
|
<div class="pricing-price">
|
|
<span class="pricing-amount">€49</span>
|
|
<span class="pricing-per">/ maand</span>
|
|
</div>
|
|
<p class="pricing-tagline">Voor ondernemers die sneller willen groeien met persoonlijke begeleiding.</p>
|
|
|
|
<ul class="plan-bullets">
|
|
<li>Alles uit Starter</li>
|
|
<li>1-op-1 sessie 30 min/maand (met Chaib)</li>
|
|
<li>Persoonlijk leertraject</li>
|
|
<li>Prioriteit e-mail support</li>
|
|
<li>Early access nieuwe cursussen</li>
|
|
</ul>
|
|
|
|
<ul class="feature-list">
|
|
<li><span class="ico ico--yes">✓</span> Alles uit Starter</li>
|
|
<li><span class="ico ico--yes">✓</span> 1-op-1 sessie</li>
|
|
<li><span class="ico ico--yes">✓</span> Persoonlijk traject</li>
|
|
<li><span class="ico ico--yes">✓</span> Prioriteit support</li>
|
|
<li><span class="ico ico--yes">✓</span> Early access nieuwe cursussen</li>
|
|
</ul>
|
|
|
|
<a href="/betalen?plan=pro" class="pricing-cta pricing-cta--amber">
|
|
Word Pro →
|
|
</a>
|
|
</div>
|
|
|
|
</div><!-- /pricing-grid -->
|
|
|
|
<!-- PAYMENT NOTE -->
|
|
<div class="payment-note reveal">
|
|
<strong>Alle betalingen via factuur of automatische incasso.</strong>
|
|
Maandelijks opzegbaar — geen verborgen kosten, geen jaarcontract vereist.
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section id="faq">
|
|
<div class="container">
|
|
<div class="faq-header reveal">
|
|
<span class="section-label">Veelgestelde vragen</span>
|
|
<h2 class="section-title">Alles over onze prijzen</h2>
|
|
</div>
|
|
<div class="faq-list reveal">
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-q" onclick="toggleFaq(this)">
|
|
<span>Krijg ik korting als ik jaarlijks betaal?</span>
|
|
<span class="faq-icon">+</span>
|
|
</button>
|
|
<div class="faq-a">
|
|
Ja. Bij jaarlijkse betaling ontvang je twee maanden gratis — effectief betaal je voor 10 maanden in plaats van 12. Vraag het jaarplan aan via <a href="mailto:info@atlascorporation.nl?subject=Atlas+Academy+Jaarplan">info@atlascorporation.nl</a> en wij sturen je een offerte.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-q" onclick="toggleFaq(this)">
|
|
<span>Kan ik mijn geld terug krijgen als het niets voor mij is?</span>
|
|
<span class="faq-icon">+</span>
|
|
</button>
|
|
<div class="faq-a">
|
|
We hanteren geen automatische restitutie, maar denken altijd mee. Als je binnen de eerste 14 dagen aangeeft dat de inhoud niet aansluit bij je verwachting, nemen we het op. Stuur een mail naar <a href="mailto:info@atlascorporation.nl?subject=Atlas+Academy+Terugbetaling">info@atlascorporation.nl</a> met een korte toelichting.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-q" onclick="toggleFaq(this)">
|
|
<span>Is er een groepskorting voor teams of organisaties?</span>
|
|
<span class="faq-icon">+</span>
|
|
</button>
|
|
<div class="faq-a">
|
|
Ja. Vanaf 3 medewerkers bieden we een maatwerkprijs. Denk aan een gezamenlijk leerpad, groepscoaching op maat en één centrale facturering. Neem contact op via <a href="mailto:info@atlascorporation.nl?subject=Atlas+Academy+Groepskorting">info@atlascorporation.nl</a> voor een offerte op maat.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-q" onclick="toggleFaq(this)">
|
|
<span>Geldt er een studentenkorting?</span>
|
|
<span class="faq-icon">+</span>
|
|
</button>
|
|
<div class="faq-a">
|
|
Studenten en BBZ-deelnemers komen in aanmerking voor een gereduceerd tarief. Stuur een bewijs van inschrijving of een BBZ-toekenning mee in je mail en we regelen een aangepast abonnement. We geloven dat prijs geen drempel mag zijn voor praktische kennis.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-q" onclick="toggleFaq(this)">
|
|
<span>Hoe zeg ik mijn abonnement op?</span>
|
|
<span class="faq-icon">+</span>
|
|
</button>
|
|
<div class="faq-a">
|
|
Stuur een e-mail naar <a href="mailto:info@atlascorporation.nl?subject=Atlas+Academy+Opzeggen">info@atlascorporation.nl</a> vóór de volgende factuurdatum. Geen formulieren, geen gedoe. Je behoudt toegang tot het einde van de lopende betaalperiode.
|
|
</div>
|
|
</div>
|
|
|
|
</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="/web/signup?redirect=%2Fslides">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>
|
|
function toggleMenu() {
|
|
document.getElementById('mobileMenu').classList.toggle('open');
|
|
}
|
|
function toggleFaq(btn) {
|
|
var item = btn.closest('.faq-item');
|
|
var isOpen = item.classList.contains('open');
|
|
document.querySelectorAll('.faq-item.open').forEach(function(el) { el.classList.remove('open'); });
|
|
if (!isOpen) item.classList.add('open');
|
|
}
|
|
|
|
// 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.1 });
|
|
els.forEach(function(el, i) {
|
|
el.style.transitionDelay = (i * 0.08) + 's';
|
|
obs.observe(el);
|
|
});
|
|
})();
|
|
</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>
|