oefenhub_leerling_02_frontpage_geen_docent_v7_5.html
Korte beschrijving
Deze mockup toont de leerlingfrontpage wanneer er nog geen docentrelatie of oefentoegang beschikbaar is.
In plaats van reguliere oefeningen en statistieken krijgt de leerling uitleg dat er nog niets te doen is en dat een docent toegang moet geven. De overige introductieblokken leggen alvast uit wat OefenHub straks op deze pagina zal tonen.
Gerelateerde documentatie
- Bekijk de schermdocumentatie voor meer functionele context.
Bestand
Broncode
/mockups_html/leerling/oefenhub_leerling_02_frontpage_geen_docent_v7_5.html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OefenHub - Frontpage Leerling</title>
<link href="./oefenhub_shared_logo.css" rel="stylesheet">
<style>
:root {
--blue-1: #8fd0ff;
--blue-2: #5bb3ff;
--blue-3: #1f82e9;
--blue-4: #0d5db8;
--text: #114f95;
--muted: #5f7ea5;
--line: rgba(17,79,149,.12);
--orange-1: #ffbb4d;
--orange-2: #ff9620;
--orange-3: #f87400;
--green-1: #8adf67;
--green-2: #57ba3c;
--yellow-1: #ffd04e;
--yellow-2: #f6aa07;
--shadow: 0 12px 28px rgba(35, 100, 177, 0.12);
--shadow-soft: 0 8px 18px rgba(35, 100, 177, 0.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: var(--text);
background:
radial-gradient(circle at 8% 14%, rgba(255,255,255,.68) 0 12%, transparent 13%),
radial-gradient(circle at 18% 10%, rgba(255,255,255,.45) 0 9%, transparent 10%),
radial-gradient(circle at 86% 17%, rgba(255,255,255,.58) 0 11%, transparent 12%),
linear-gradient(180deg, #7ec2f8 0%, #bfe2fd 15%, #edf7ff 34%, #f7fbff 100%);
min-height: 100vh;
}
.wrap {
width: min(1220px, calc(100% - 30px));
margin: 0 auto;
}
.hub-page {
padding: 22px 0 28px;
}
.breadcrumb-bar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 0 0 14px;
font-size: 13px;
font-weight: 800;
color: #5f7ea5;
}
.breadcrumb-bar a {
color: #2364a7;
text-decoration: none;
}
.breadcrumb-bar a:hover {
text-decoration: underline;
}
.breadcrumb-sep {
opacity: .7;
}
.header {
padding: 10px 0 12px;
background: linear-gradient(180deg, rgba(100,171,238,.92), rgba(120,192,248,.85));
border-bottom: 1px solid rgba(255,255,255,.38);
box-shadow: 0 8px 20px rgba(28, 100, 177, .08);
position: relative;
z-index: 5;
}
.header-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 16px;
}
.brand {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 250px;
}
.brand img {
display: block;
height: 46px;
width: auto;
}
.welcome-text {
font-size: 12px;
color: rgba(17,79,149,.82);
font-weight: 700;
margin-top: -10px;
margin-left: 53px;
}
.nav-pills {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: nowrap;
white-space: nowrap;
}
.pill {
border: 0;
border-radius: 14px;
padding: 10px 16px;
color: #fff;
font-size: 14px;
font-weight: 900;
box-shadow: var(--shadow-soft);
line-height: 1;
cursor: pointer;
flex: 0 0 auto;
}
.pill.orange { background: linear-gradient(180deg, #ffbb4d, #ff7f12); }
.pill.blue { background: linear-gradient(180deg, #2f88ea, #176acc); }
.pill.yellow { background: linear-gradient(180deg, #ffd04d, #f4ab08); }
.pill.green { background: linear-gradient(180deg, #8adf67, #58ba3d); }
.header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
min-width: 120px;
}
.mail-btn, .profile-chip {
border: 0;
box-shadow: var(--shadow-soft);
cursor: pointer;
}
.mail-btn {
position: relative;
width: 40px;
height: 40px;
border-radius: 999px;
background: linear-gradient(180deg, #ffffff, #eef6ff);
color: var(--blue-4);
font-size: 17px;
}
.badge {
position: absolute;
right: -2px;
bottom: -2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #e23838;
color: #fff;
font-size: 11px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
.profile-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 999px;
background: linear-gradient(180deg, #ffffff, #edf6ff);
padding: 0;
}
.avatar {
width: 28px;
height: 28px;
border-radius: 999px;
display: grid;
place-items: center;
color: #fff;
font-size: 13px;
font-weight: 900;
background: linear-gradient(180deg, #ffb247, #ff8120);
}
main { display: block; }
.hero {
display: grid;
grid-template-columns: 1fr .62fr;
gap: 22px;
align-items: stretch;
background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.94));
border-radius: 34px;
box-shadow: var(--shadow);
padding: 15px 15px;
}
.hero-tag {
display: inline-block;
padding: 5px 10px;
border-radius: 999px;
background: rgba(75,151,225,.10);
border: 1px solid rgba(75,151,225,.12);
color: var(--blue-4);
font-size: 11px;
font-weight: 500;
margin-bottom: 14px;
}
.hero h1 {
margin: 0 0 12px;
font-size: 20px;
line-height: 1.05;
color: #0d5db8;
}
.hero p {
margin: 0;
font-size: 13px;
line-height: 1.4;
color: #18599e;
max-width: 620px;
font-weight: 500;
}
.hero-actions {
margin-top: 22px;
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
min-height: 35px;
padding: 0 22px;
font-size: 13px;
font-weight: 900;
text-decoration: none;
box-shadow: var(--shadow-soft);
cursor: pointer;
}
.btn-primary {
color: #fff;
background: linear-gradient(180deg, var(--orange-1), var(--orange-3));
}
.btn-secondary {
color: var(--blue-4);
background: linear-gradient(180deg, #ffffff, #edf6ff);
border: 1px solid rgba(57,132,206,.14);
}
.quick-card {
background: linear-gradient(180deg, rgba(68,146,225,.98), rgba(40,116,200,.98));
color: #fff;
border-radius: 26px;
box-shadow: var(--shadow-soft);
padding: 9px 15px;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.quick-card .small {
font-size: 13px;
font-weight: 700;
opacity: .88;
margin-bottom: 6px;
}
.quick-card h2 {
margin: 0 0 8px;
font-size: 20px;
line-height: 1.1;
}
.quick-card p {
margin: 0 0 14px;
font-size: 15px;
line-height: 1.45;
color: rgba(255,255,255,.92);
font-weight: 600;
}
.quick-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.metric {
border-radius: 18px;
background: rgba(255,255,255,.14);
padding: 9px 15px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.metric .label {
font-size: 12px;
opacity: .86;
margin-bottom: 6px;
font-weight: 700;
}
.metric .value {
font-size: 20px;
font-weight: 900;
line-height: 1;
}
.content-row {
margin-top: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.panel {
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
border: 1px solid rgba(170,204,238,.62);
border-radius: 24px;
box-shadow: var(--shadow);
padding: 16px 20px 18px;
}
.panel-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.panel-title h3 {
margin: 0;
font-size: 20px;
color: #0d5db8;
}
.panel-title a {
color: var(--muted);
text-decoration: none;
font-weight: 700;
font-size: 13px;
}
.popular-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.popular-card {
display: block;
background: linear-gradient(180deg, #ffffff, #fafdff);
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-soft);
border: 1px solid rgba(170,204,238,.42);
text-decoration: none;
color: inherit;
}
.popular-top {
height: 35px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
color: #fff;
font-size: 20px;
}
.popular-top-inner {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
text-align: center;
}
.popular-top h4 {
font-size: 16px;
text-align: center;
margin: 0;
color: #fff;
font-weight: 800;
line-height: 1;
}
.popular-top.blue { background: linear-gradient(135deg, #79c2fb, #3997ee 65%, #2286e6); }
.popular-top.orange { background: linear-gradient(135deg, #ffd15b, #ffab22 60%, #ff8b15); }
.popular-top.green { background: linear-gradient(135deg, #9be67d, #68c84d 65%, #55b73d); }
.popular-body {
text-align: center;
padding: 4px 14px 16px;
}
.popular-body p {
margin: 0;
font-size: 13px;
color: var(--muted);
font-weight: 700;
line-height: 1.45;
}
.recent-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.recent-item {
display: block;
padding: 9px 15px;
border-radius: 14px;
background: linear-gradient(180deg, #ffffff, #f7fbff);
border: 1px solid rgba(170,204,238,.38);
box-shadow: var(--shadow-soft);
text-decoration: none;
color: inherit;
}
.recent-title {
font-size: 14px;
font-weight: 900;
color: #18518f;
margin-bottom: 4px;
}
.recent-meta {
font-size: 11px;
color: var(--muted);
font-weight: 700;
}
.stats-shell {
margin-top: 20px;
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
border: 1px solid rgba(170,204,238,.62);
border-radius: 24px;
box-shadow: var(--shadow);
padding: 16px 24px 18px;
}
.stats-title {
text-align: center;
margin-bottom: 12px;
font-size: 20px;
font-weight: 900;
color: #0d5db8;
}
.stats-grid {
display: grid;
grid-template-columns: 1.02fr .99fr .99fr;
gap: 18px;
align-items: start;
}
.stats-col {
background: rgba(255,255,255,.72);
border-radius: 20px;
border: 1px solid rgba(170,204,238,.42);
padding: 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
min-height: 100%;
}
.stats-col + .stats-col {
position: relative;
}
.stats-col + .stats-col::before {
content: "";
position: absolute;
left: -10px;
top: 12px;
bottom: 12px;
width: 1px;
background: rgba(17,79,149,.08);
}
.small-title {
margin: 0 0 12px;
color: #0d5db8;
font-size: 18px;
font-weight: 900;
text-align: center;
}
.summary-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.summary-card {
padding: 10px 12px;
border-radius: 16px;
background: linear-gradient(180deg, #ffffff, #f2f8ff);
border: 1px solid rgba(170,204,238,.36);
box-shadow: var(--shadow-soft);
min-height: 72px;
}
.summary-label {
font-size: 12px;
color: var(--muted);
font-weight: 800;
margin-bottom: 6px;
}
.summary-value {
font-size: 21px;
color: #0d5db8;
font-weight: 900;
line-height: 1;
margin-bottom: 4px;
}
.summary-sub {
font-size: 12px;
color: #7390af;
font-weight: 700;
}
.divider {
height: 1px;
background: var(--line);
margin: 12px 0;
}
.cat-row, .sub-row {
margin-bottom: 10px;
}
.cat-row:last-child, .sub-row:last-child {
margin-bottom: 0;
}
.cat-head, .sub-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: baseline;
margin-bottom: 4px;
}
.cat-name, .group-name {
color: #18518f;
font-weight: 900;
}
.cat-name {
font-size: 15px;
}
.cat-total, .sub-total {
font-size: 13px;
color: var(--muted);
font-weight: 500;
white-space: nowrap;
}
.group-name {
font-size: 16px;
margin: 0 0 8px;
}
.sub-name {
font-size: 14px;
font-weight: 600;
color: #18518f;
}
.bar {
height: 10px;
background: linear-gradient(180deg, #e7f1fd, #dbeafb);
border-radius: 999px;
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(40,100,170,.08);
}
.bar > span {
display: block;
height: 100%;
border-radius: 999px;
}
.fill-blue { background: linear-gradient(90deg, #8fd0ff, #2f94ed 65%, #1b75d7); }
.fill-orange { background: linear-gradient(90deg, #ffd15a, #ffae25 60%, #ff8b18); }
.fill-green { background: linear-gradient(90deg, #98e579, #67c64a 60%, #57b63f); }
.fill-yellow { background: linear-gradient(90deg, #ffe06f, #f7ba1b 60%, #eea400); }
.category-group {
margin-bottom: 14px;
}
.category-group:last-child { margin-bottom: 0; }
.footer-space { height: 10px; }
.pill:hover {
filter: brightness(1.06);
transform: translateY(-1px);
}
.mail-btn:hover, .profile-chip:hover {
background: linear-gradient(180deg, #ffffff, #e4f1ff);
transform: translateY(-1px);
}
.btn-primary:hover {
background: linear-gradient(180deg, #ffc35a, #ff8617);
transform: translateY(-1px);
}
.btn-secondary:hover {
background: linear-gradient(180deg, #ffffff, #e3f1ff);
transform: translateY(-1px);
}
.popular-card:hover, .recent-item:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(35, 100, 177, 0.14);
}
.panel-title a:hover {
color: var(--blue-4);
text-decoration: underline;
}
.pill, .mail-btn, .profile-chip, .btn, .popular-card, .recent-item, .panel-title a {
transition: all .18s ease;
}
.site-footer {
margin-top: 22px;
padding: 24px 0 22px;
background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(235,246,255,.92));
border-top: 1px solid rgba(170,204,238,.62);
box-shadow: 0 -10px 24px rgba(35,100,177,.06);
border-radius: 26px 26px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr;
gap: 36px;
align-items: start;
}
.footer-col h4 {
margin: 0 0 12px;
font-size: 15px;
color: #0d5db8;
font-weight: 900;
padding-bottom: 8px;
border-bottom: 1px solid rgba(17,79,149,.14);
}
.footer-col p {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--muted);
font-weight: 600;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-links a {
color: #18518f;
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition: color .18s ease;
}
.footer-links a:hover {
color: var(--blue-4);
text-decoration: underline;
}
.footer-bottom {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(17,79,149,.10);
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
flex-wrap: wrap;
font-size: 12px;
color: var(--muted);
font-weight: 600;
}
@media (max-width: 1120px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.header-row {
grid-template-columns: 1fr;
justify-items: center;
gap: 12px;
}
.brand {
align-items: center;
min-width: 0;
}
.header-actions {
min-width: 0;
}
.hero {
grid-template-columns: 1fr;
}
.content-row {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: 1fr;
}
.stats-col + .stats-col::before {
display: none;
}
}
.hub-page .wrap > section {
margin: 0 0 18px;
}
.hub-page .wrap > section:last-child {
margin-bottom: 0;
}
.info-block {
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
border: 1px solid rgba(170,204,238,.62);
border-radius: 24px;
box-shadow: var(--shadow);
padding: 18px 22px;
position: relative;
overflow: hidden;
}
.info-block::after {
content: "";
position: absolute;
inset: auto -30px -40px auto;
width: 170px;
height: 170px;
border-radius: 50%;
background: rgba(143,208,255,.18);
}
.info-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--blue-4);
background: rgba(143,208,255,.26);
border-radius: 999px;
padding: 8px 12px;
margin-bottom: 14px;
position: relative;
z-index: 1;
}
.info-block h2 {
margin: 0 0 8px;
font-size: 20px;
line-height: 1.15;
color: #0d5db8;
position: relative;
z-index: 1;
}
.info-block p {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.55;
max-width: 760px;
position: relative;
z-index: 1;
}
.info-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 18px;
position: relative;
z-index: 1;
}
.compact-block {
padding: 18px 22px;
}
.compact-block h2 {
font-size: 20px;
margin-bottom: 8px;
line-height: 1.1;
}
.compact-block p {
font-size: 14px;
line-height: 1.45;
max-width: none;
flex: 1;
min-width: 280px;
}
.compact-actions {
margin-top: 14px;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.compact-actions .ghost-btn {
min-height: 42px;
white-space: nowrap;
flex-shrink: 0;
}
.compact-intro {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.compact-copy {
flex: 1;
min-width: 0;
}
.compact-intro .ghost-btn {
min-height: 42px;
white-space: nowrap;
flex-shrink: 0;
}
.ghost-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
border-radius: 999px;
border: 1px solid rgba(17,79,149,.14);
background: rgba(255,255,255,.82);
color: var(--text);
font-weight: 800;
padding: 0 18px;
box-shadow: var(--shadow-soft);
text-decoration: none;
}
.warning-block {
background: linear-gradient(180deg, rgba(255,242,242,.98), rgba(255,232,232,.96));
border: 1px solid rgba(220,76,76,.30);
box-shadow: 0 16px 30px rgba(180, 55, 55, .12);
}
.warning-block::after {
background: rgba(255,107,107,.10);
}
.warning-block .info-label {
color: #a63a3a;
background: rgba(255,107,107,.16);
}
.warning-block h2 {
color: #8d2f2f;
}
.warning-block p {
color: #9c5050;
}
.tip-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 18px;
position: relative;
z-index: 1;
}
.tip-card {
background: rgba(247,251,255,.9);
border: 1px solid rgba(170,204,238,.42);
border-radius: 18px;
padding: 14px;
box-shadow: var(--shadow-soft);
}
.tip-card h4 {
margin: 0 0 6px;
font-size: 15px;
color: #18518f;
}
.tip-card p {
font-size: 13px;
line-height: 1.5;
}
.explain-grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 18px;
margin-top: 24px;
}
.mini-panel {
background: linear-gradient(180deg, #ffffff, #f7fbff);
border: 1px solid rgba(170,204,238,.42);
border-radius: 20px;
padding: 16px;
box-shadow: var(--shadow-soft);
}
.mini-panel h3 {
margin: 0 0 8px;
font-size: 16px;
line-height: 1.1;
}
.mini-panel p,
.mini-panel li {
color: var(--muted);
font-size: 14px;
line-height: 1.55;
}
.mini-panel ul {
margin: 12px 0 0;
padding-left: 20px;
}
@media (max-width: 900px) {
.popular-grid {
grid-template-columns: 1fr;
}
.tip-grid,
.explain-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.summary-cards {
grid-template-columns: 1fr 1fr;
}
.hero p {
font-size: 15px;
}
.brand img {
height: 42px;
}
}
@media (max-width: 560px) {
.summary-cards {
grid-template-columns: 1fr;
}
.quick-metrics {
grid-template-columns: 1fr;
}
.info-block {
padding: 22px 20px;
border-radius: 24px;
}
.info-block h2 {
font-size: 20px;
}
.tip-grid {
grid-template-columns: 1fr;
}
}
.warning-block {
padding: 16px 22px;
}
.warning-block h2 {
margin-bottom: 8px;
}
.warning-block p {
margin: 0;
}
.warning-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
}
.warning-layout .ghost-btn {
min-height: 40px;
white-space: nowrap;
}
@media (max-width: 860px) {
.warning-layout {
grid-template-columns: 1fr;
align-items: start;
}
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="header-row">
<div class="brand">
<div class="brand-logo" aria-label="OefenHub logo" role="img"></div>
<div class="welcome-text">Welkom terug, Emma</div>
</div>
<div class="nav-pills">
<button class="pill orange">🔢 Rekenen</button>
<button class="pill blue">📖 Taal</button>
<button class="pill blue">🇬🇧 Engels</button>
<button class="pill yellow">✏️ Spelling</button>
<button class="pill green">🌍 Topografie</button>
</div>
<div class="header-actions">
<button class="mail-btn" aria-label="Berichten">✉️<span class="badge">3</span></button>
<button class="profile-chip" aria-label="Profiel"><span class="avatar">E</span></button>
</div>
</div>
</div>
</header>
<main class="hub-page">
<div class="wrap">
<section class="info-block warning-block compact-block">
<h2>Je hebt nog geen toegang tot oefeningen</h2>
<div class="warning-layout">
<p>Op dit moment zijn er nog geen oefeningen aan jouw account gekoppeld. Om die reden valt er voor jou op dit moment nog niets te doen. Vraag je docent om je toegang te geven.</p>
<a href="#" class="ghost-btn">Stuur een bericht</a>
</div>
</section>
<section class="info-block">
<h2>Welkom in OefenHub</h2>
<p>In dit introductieblok krijgt de leerling kort uitgelegd wat OefenHub is, hoe oefenen werkt en waar je kunt beginnen. Het blok voelt vriendelijk en laagdrempelig, zodat een eerste bezoek niet te druk of technisch aanvoelt.</p>
<div class="tip-grid">
<div class="tip-card">
<h4>1. Kies een vak</h4>
<p>Selecteer een categorie zoals rekenen, taal of spelling en start meteen met oefenen.</p>
</div>
<div class="tip-card">
<h4>2. Werk stap voor stap</h4>
<p>Je hoeft niet alles tegelijk te doen. OefenHub helpt je verder vanaf je laatste activiteit.</p>
</div>
<div class="tip-card">
<h4>3. Zie je groei</h4>
<p>Na het oefenen verschijnen je resultaten en voortgang in de statistieken op deze pagina.</p>
</div>
</div>
</section>
<section class="info-block">
<h2>Klaar voor je eerste oefening?</h2>
<p>Dit motivatieblok activeert de leerling op het juiste moment: bij de eerste login of als er deze week nog niet is geoefend. De tekst is positief, kort en uitnodigend, met één duidelijke actie om direct te beginnen.</p>
</section>
<section class="content-row">
<div class="info-block">
<h2>Nog niets om hier te tonen</h2>
<p>Als een leerling nog niet recent heeft geoefend, is een lege lijst niet erg behulpzaam. Daarom laat deze variant kort zien wat hier later verschijnt zodra er oefeningen zijn gemaakt.</p>
</div>
<div class="mini-panel">
<h3>Wat komt hier straks te staan?</h3>
<ul>
<li>De laatst geopende oefening</li>
<li>Wanneer je voor het laatst hebt geoefend</li>
<li>Snelle links om verder te gaan waar je gebleven was</li>
</ul>
</div>
</section>
<section class="info-block">
<h2>Hier ga je straks jouw voortgang zien</h2>
<p>Bij een eerste login zijn er nog geen cijfers of grafieken om te tonen. In plaats daarvan legt dit blok uit welke inzichten hier later zichtbaar worden, zoals totaal gemaakte oefeningen, favoriete categorieën en groei over tijd.</p>
<div class="explain-grid">
<div class="mini-panel">
<h3>Wat je hier later kunt volgen</h3>
<ul>
<li>Hoeveel oefeningen je al hebt gemaakt</li>
<li>In welke vakken je het meest oefent</li>
<li>Welke onderdelen extra aandacht nodig hebben</li>
</ul>
</div>
<div class="mini-panel">
<h3>Waarom dit helpt</h3>
<p>Door je voortgang zichtbaar te maken, zie je sneller waar je sterker in wordt en waar je nog kunt groeien. Zo blijft oefenen motiverend en duidelijk.</p>
</div>
</div>
</section>
</div>
</main>
<footer class="site-footer">
<div class="wrap">
<div class="footer-grid">
<div class="footer-col">
<h4>OefenHub</h4>
<p>OefenHub helpt kinderen spelenderwijs schoolvakken oefenen, herhalen en beter begrijpen. Alles overzichtelijk op één plek.</p>
</div>
<div class="footer-col">
<h4>Handige Links</h4>
<div class="footer-links">
<a href="#">Over OefenHub</a>
<a href="#">Contact</a>
<a href="#">Privacybeleid</a>
</div>
</div>
<div class="footer-col">
<h4>Snel naar</h4>
<div class="footer-links">
<a href="#">Profiel</a>
<a href="#">Berichten</a>
<a href="#">Meld een probleem</a>
</div>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 OefenHub</span>
</div>
</div>
</footer>
</body>
</html>