youztech/ceybegeleiding
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Ubuntu
2026-03-01 13:23:47 +00:00
commit 6021e6ea75
7 changed files with 2226 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1438
css/style.css Normal file
View File

File diff suppressed because it is too large Load Diff

12
favicon.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<defs>
<linearGradient id="g" x1="0" y1="0" x2="36" y2="36">
<stop stop-color="#2d5f8a"/>
<stop offset="1" stop-color="#4ecdc4"/>
</linearGradient>
</defs>
<circle cx="18" cy="18" r="18" fill="url(#g)"/>
<path d="M12 18c0-3.3 2.7-6 6-6s6 2.7 6 6" stroke="#fff" stroke-width="2.5" stroke-linecap="round" fill="none"/>
<path d="M15 22c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="#fff" stroke-width="2.5" stroke-linecap="round" fill="none"/>
<circle cx="18" cy="13" r="2" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 574 B

BIN
images/about-session.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
images/about-team.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
images/hero-youth.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

664
index.html Normal file
View File

@@ -0,0 +1,664 @@
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="CEY Begeleiding biedt professionele begeleiding en ondersteuning voor jongeren op het gebied van GGZ, persoonlijke ontwikkeling en zelfstandigheid.">
<meta name="robots" content="index, follow">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="CEY Begeleiding – Professionele jeugdbegeleiding &amp; GGZ ondersteuning">
<meta property="og:description" content="CEY Begeleiding biedt professionele begeleiding en ondersteuning voor jongeren op het gebied van GGZ, persoonlijke ontwikkeling en zelfstandigheid.">
<meta property="og:url" content="https://ceybegeleiding.nl/">
<meta property="og:site_name" content="CEY Begeleiding">
<meta property="og:locale" content="nl_NL">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="canonical" href="https://ceybegeleiding.nl/">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
<title>CEY Begeleiding – Professionele jeugdbegeleiding &amp; GGZ ondersteuning</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ============ HEADER ============ -->
<header class="header" id="header">
<div class="container header__inner">
<a href="/" class="header__logo">
<span class="logo-icon">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="18" cy="18" r="18" fill="url(#logo-grad)"/>
<path d="M12 18c0-3.3 2.7-6 6-6s6 2.7 6 6" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
<path d="M15 22c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="18" cy="13" r="2" fill="#fff"/>
<defs>
<linearGradient id="logo-grad" x1="0" y1="0" x2="36" y2="36">
<stop stop-color="#2d5f8a"/>
<stop offset="1" stop-color="#4ecdc4"/>
</linearGradient>
</defs>
</svg>
</span>
<span class="logo-text">CEY <span>Begeleiding</span></span>
</a>
<button class="nav-toggle" id="navToggle" aria-label="Menu openen" aria-expanded="false">
<span></span><span></span><span></span>
</button>
<nav class="nav" id="mainNav">
<ul class="nav__list">
<li><a href="#over-ons" class="nav__link">Over ons</a></li>
<li><a href="#diensten" class="nav__link">Diensten</a></li>
<li><a href="#doelgroep" class="nav__link">Voor wie</a></li>
<li><a href="#aanpak" class="nav__link">Werkwijze</a></li>
<li><a href="#ervaringen" class="nav__link">Ervaringen</a></li>
<li><a href="#contact" class="nav__link nav__link--cta">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<!-- ============ HERO ============ -->
<section class="hero">
<div class="hero__bg-shapes">
<div class="hero__shape hero__shape--1"></div>
<div class="hero__shape hero__shape--2"></div>
<div class="hero__shape hero__shape--3"></div>
</div>
<div class="container hero__inner">
<div class="hero__content" data-animate="fade-up">
<p class="hero__label">Begeleiding voor jongeren &amp; jongvolwassenen</p>
<h1 class="hero__title">Samen bouwen aan<br><span class="text-gradient">een sterke toekomst</span></h1>
<p class="hero__text">
CEY Begeleiding biedt professionele GGZ-ondersteuning en begeleiding op maat
voor jongeren. Wij helpen bij het ontwikkelen van zelfstandigheid, veerkracht
en persoonlijke groei.
</p>
<div class="hero__actions">
<a href="#contact" class="btn btn--primary">
<span>Neem contact op</span>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M4 10h12m0 0l-4-4m4 4l-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
<a href="#diensten" class="btn btn--ghost">Bekijk onze diensten</a>
</div>
<div class="hero__stats">
<div class="hero__stat">
<span class="hero__stat-number">100+</span>
<span class="hero__stat-label">Jongeren geholpen</span>
</div>
<div class="hero__stat">
<span class="hero__stat-number">5+</span>
<span class="hero__stat-label">Jaar ervaring</span>
</div>
<div class="hero__stat">
<span class="hero__stat-number">98%</span>
<span class="hero__stat-label">Tevredenheid</span>
</div>
</div>
</div>
<div class="hero__visual" data-animate="fade-left">
<div class="hero__image-wrapper">
<!-- Vervang dit pad door een echte foto van een begeleider met jongere -->
<img src="images/hero-youth.jpg" alt="Begeleider in gesprek met een jongere" loading="eager"
onerror="this.style.display='none'; this.parentElement.classList.add('hero__image-placeholder');">
<div class="hero__image-accent"></div>
</div>
<div class="hero__floating-card hero__floating-card--1" data-animate="fade-up">
<div class="floating-icon floating-icon--green">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M9 12l2 2 4-4" stroke="#10b981" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="10" stroke="#10b981" stroke-width="2"/></svg>
</div>
<div>
<strong>Persoonlijk plan</strong>
<small>Op maat voor elke jongere</small>
</div>
</div>
<div class="hero__floating-card hero__floating-card--2" data-animate="fade-up">
<div class="floating-icon floating-icon--blue">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" stroke="#3b82f6" stroke-width="2"/><path d="M8 14s1.5 2 4 2 4-2 4-2" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/><circle cx="9" cy="10" r="1" fill="#3b82f6"/><circle cx="15" cy="10" r="1" fill="#3b82f6"/></svg>
</div>
<div>
<strong>Veilige omgeving</strong>
<small>Vertrouwen &amp; respect</small>
</div>
</div>
</div>
</div>
</section>
<!-- ============ OVER ONS ============ -->
<section class="section" id="over-ons">
<div class="container">
<div class="about">
<div class="about__visual" data-animate="fade-right">
<div class="about__image-grid">
<div class="about__image about__image--main">
<!-- Vervang met foto van het team of begeleider -->
<img src="images/about-team.jpg" alt="Het team van CEY Begeleiding" loading="lazy"
onerror="this.style.display='none'; this.parentElement.classList.add('about__image-placeholder');">
</div>
<div class="about__image about__image--secondary">
<!-- Vervang met foto van groepssessie -->
<img src="images/about-session.jpg" alt="Groepssessie met jongeren" loading="lazy"
onerror="this.style.display='none'; this.parentElement.classList.add('about__image-placeholder');">
</div>
<div class="about__experience-badge">
<span class="badge-number">5+</span>
<span class="badge-text">Jaar<br>ervaring</span>
</div>
</div>
</div>
<div class="about__content" data-animate="fade-up">
<p class="section-label">Over CEY Begeleiding</p>
<h2 class="section-heading">Wij geloven in de kracht van <span class="text-gradient">elke jongere</span></h2>
<p class="about__text">
CEY Begeleiding is gespecialiseerd in het begeleiden van jongeren en jongvolwassenen
met psychische en sociale uitdagingen. Wij bieden professionele GGZ-ondersteuning
vanuit betrokkenheid, respect en vertrouwen.
</p>
<p class="about__text">
Ons team van ervaren begeleiders werkt vanuit de overtuiging dat iedere jongere
de mogelijkheid verdient om te groeien, ongeacht de obstakels op het pad. We kijken
niet naar beperkingen, maar naar mogelijkheden.
</p>
<div class="about__values">
<div class="value-item">
<div class="value-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.501 5.501 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div>
<strong>Persoonlijke aandacht</strong>
<p>Maatwerk voor elke jongere</p>
</div>
</div>
<div class="value-item">
<div class="value-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div>
<strong>Samenwerking</strong>
<p>Met jongere, gezin en netwerk</p>
</div>
</div>
<div class="value-item">
<div class="value-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M22 11.08V12a10 10 0 11-5.93-9.14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 4L12 14.01l-3-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div>
<strong>Resultaatgericht</strong>
<p>Focus op groei en zelfstandigheid</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ DIENSTEN ============ -->
<section class="section section--alt" id="diensten">
<div class="container">
<div class="section-header" data-animate="fade-up">
<p class="section-label section-label--center">Wat wij bieden</p>
<h2 class="section-heading section-heading--center">Onze <span class="text-gradient">diensten</span></h2>
<p class="section-subtitle">
Professionele begeleiding en ondersteuning afgestemd op de unieke behoeften van elke jongere.
</p>
</div>
<div class="services">
<div class="service-card" data-animate="fade-up">
<div class="service-card__icon service-card__icon--blue">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M16 4a6 6 0 100 12 6 6 0 000-12zM8 28v-2a6 6 0 016-6h4a6 6 0 016 6v2" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h3 class="service-card__title">Individuele begeleiding</h3>
<p class="service-card__text">
Een-op-een ondersteuning voor jongeren bij psychische klachten, gedragsproblemen
of het werken aan persoonlijke doelen. Afgestemd op jouw tempo en behoeften.
</p>
<ul class="service-card__tags">
<li>GGZ</li>
<li>Maatwerk</li>
<li>1-op-1</li>
</ul>
</div>
<div class="service-card" data-animate="fade-up">
<div class="service-card__icon service-card__icon--teal">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<circle cx="10" cy="8" r="4" stroke="currentColor" stroke-width="2.5"/>
<circle cx="22" cy="8" r="4" stroke="currentColor" stroke-width="2.5"/>
<path d="M4 28v-2a6 6 0 016-6M22 20a6 6 0 016 6v2" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="16" cy="14" r="4" stroke="currentColor" stroke-width="2.5"/>
<path d="M10 28v-2a6 6 0 016-6 6 6 0 016 6v2" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
</svg>
</div>
<h3 class="service-card__title">Groepsbegeleiding</h3>
<p class="service-card__text">
Samen leren en groeien in een veilige groepsomgeving. Door ervaringen te delen
en van elkaar te leren, versterken jongeren hun sociale vaardigheden.
</p>
<ul class="service-card__tags">
<li>Sociaal</li>
<li>Groei</li>
<li>Verbinding</li>
</ul>
</div>
<div class="service-card" data-animate="fade-up">
<div class="service-card__icon service-card__icon--purple">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M16 4v6M16 22v6M6 16h6M20 16h6" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="16" cy="16" r="4" stroke="currentColor" stroke-width="2.5"/>
<circle cx="16" cy="16" r="11" stroke="currentColor" stroke-width="2.5"/>
</svg>
</div>
<h3 class="service-card__title">Ambulante GGZ begeleiding</h3>
<p class="service-card__text">
Professionele ondersteuning bij psychische problematiek in de eigen leefomgeving.
We begeleiden jongeren bij angst, depressie, trauma en gedragsproblemen.
</p>
<ul class="service-card__tags">
<li>GGZ</li>
<li>Thuissituatie</li>
<li>Professioneel</li>
</ul>
</div>
<div class="service-card" data-animate="fade-up">
<div class="service-card__icon service-card__icon--orange">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M16 6l2.5 5 5.5.8-4 3.9.9 5.3-4.9-2.6-4.9 2.6.9-5.3-4-3.9 5.5-.8L16 6z" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 26h16" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
</svg>
</div>
<h3 class="service-card__title">Coaching &amp; ontwikkeling</h3>
<p class="service-card__text">
Gericht werken aan persoonlijke groei, zelfvertrouwen en het ontdekken van
talenten. We coachen jongeren richting een zelfstandige toekomst.
</p>
<ul class="service-card__tags">
<li>Coaching</li>
<li>Talenten</li>
<li>Toekomst</li>
</ul>
</div>
<div class="service-card" data-animate="fade-up">
<div class="service-card__icon service-card__icon--green">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M12 28V18a4 4 0 014-4 4 4 0 014 4v10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 28h24M8 28V14l8-10 8 10v14" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h3 class="service-card__title">Dagbesteding</h3>
<p class="service-card__text">
Zinvolle en gestructureerde dagactiviteiten die bijdragen aan een stabiel
dagritme, sociale contacten en het ontwikkelen van praktische vaardigheden.
</p>
<ul class="service-card__tags">
<li>Structuur</li>
<li>Activiteiten</li>
<li>Dagritme</li>
</ul>
</div>
<div class="service-card" data-animate="fade-up">
<div class="service-card__icon service-card__icon--rose">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M7 16a9 9 0 0118 0" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<path d="M11 16a5 5 0 0110 0" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="16" cy="16" r="1.5" fill="currentColor"/>
<path d="M16 18v8M12 26h8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
</svg>
</div>
<h3 class="service-card__title">Gezinsbegeleiding</h3>
<p class="service-card__text">
Ondersteuning voor het hele gezin. We helpen bij het verbeteren van communicatie,
het omgaan met moeilijk gedrag en het versterken van de gezinsband.
</p>
<ul class="service-card__tags">
<li>Gezin</li>
<li>Communicatie</li>
<li>Samen</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ============ DOELGROEP ============ -->
<section class="section" id="doelgroep">
<div class="container">
<div class="section-header" data-animate="fade-up">
<p class="section-label section-label--center">Voor wie</p>
<h2 class="section-heading section-heading--center">Voor wie is <span class="text-gradient">onze begeleiding?</span></h2>
<p class="section-subtitle">
Wij begeleiden jongeren en jongvolwassenen die ondersteuning nodig hebben bij
uiteenlopende uitdagingen.
</p>
</div>
<div class="audience">
<div class="audience-card" data-animate="fade-up">
<div class="audience-card__icon">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M14 3C8.5 3 4 7.5 4 13s4.5 10 10 10 10-4.5 10-10S19.5 3 14 3z" stroke="#2d5f8a" stroke-width="2"/><path d="M9 17s1.5-2 5-2 5 2 5 2" stroke="#2d5f8a" stroke-width="2" stroke-linecap="round"/><path d="M10 12v-1M18 12v-1" stroke="#2d5f8a" stroke-width="2.5" stroke-linecap="round"/></svg>
</div>
<h3>Psychische klachten</h3>
<p>Jongeren met angst, depressie, trauma of andere psychische problemen die begeleiding nodig hebben.</p>
</div>
<div class="audience-card" data-animate="fade-up">
<div class="audience-card__icon">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M20 7l-8 8-4-4" stroke="#2d5f8a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><rect x="3" y="3" width="22" height="22" rx="4" stroke="#2d5f8a" stroke-width="2"/></svg>
</div>
<h3>Gedragsproblemen</h3>
<p>Ondersteuning bij moeilijk gedrag, impulsiviteit, agressie of moeite met het volgen van regels.</p>
</div>
<div class="audience-card" data-animate="fade-up">
<div class="audience-card__icon">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M14 4v10l6 4" stroke="#2d5f8a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14" cy="14" r="11" stroke="#2d5f8a" stroke-width="2"/></svg>
</div>
<h3>Structuur &amp; dagritme</h3>
<p>Jongeren die moeite hebben met het opbouwen van een gestructureerd en stabiel dagritme.</p>
</div>
<div class="audience-card" data-animate="fade-up">
<div class="audience-card__icon">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M14 3v4M24 14h-4M14 25v-4M4 14h4" stroke="#2d5f8a" stroke-width="2.5" stroke-linecap="round"/><path d="M21 7l-3 3M10 18l-3 3M21 21l-3-3M10 10L7 7" stroke="#2d5f8a" stroke-width="2.5" stroke-linecap="round"/></svg>
</div>
<h3>Zelfstandigheid</h3>
<p>Jongvolwassenen die hulp nodig hebben bij het leren zelfstandig wonen, leven en functioneren.</p>
</div>
<div class="audience-card" data-animate="fade-up">
<div class="audience-card__icon">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M14 4c-3 0-6 2-6 6 0 5 6 12 6 12s6-7 6-12c0-4-3-6-6-6z" stroke="#2d5f8a" stroke-width="2"/><circle cx="14" cy="10" r="2" stroke="#2d5f8a" stroke-width="2"/></svg>
</div>
<h3>Sociaal isolement</h3>
<p>Jongeren die moeite hebben met sociale contacten en dreigen buiten de maatschappij te vallen.</p>
</div>
<div class="audience-card" data-animate="fade-up">
<div class="audience-card__icon">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M19 14a5 5 0 01-10 0V8a5 5 0 0110 0v6z" stroke="#2d5f8a" stroke-width="2"/><path d="M14 19v4M10 23h8" stroke="#2d5f8a" stroke-width="2.5" stroke-linecap="round"/></svg>
</div>
<h3>Schooluitval</h3>
<p>Begeleiding voor jongeren die zijn uitgevallen of dreigen uit te vallen op school of werk.</p>
</div>
</div>
</div>
</section>
<!-- ============ AANPAK / WERKWIJZE ============ -->
<section class="section section--alt" id="aanpak">
<div class="container">
<div class="section-header" data-animate="fade-up">
<p class="section-label section-label--center">Onze werkwijze</p>
<h2 class="section-heading section-heading--center">Hoe wij <span class="text-gradient">te werk gaan</span></h2>
<p class="section-subtitle">
Ons begeleidingsproces is helder, persoonlijk en gericht op duurzame resultaten.
</p>
</div>
<div class="process">
<div class="process-step" data-animate="fade-up">
<div class="process-step__number">01</div>
<div class="process-step__content">
<h3>Kennismaking &amp; intake</h3>
<p>
We starten met een vrijblijvend kennismakingsgesprek. We luisteren naar jouw verhaal,
wensen en doelen. Samen kijken we welke vorm van begeleiding het beste past.
</p>
</div>
</div>
<div class="process-step" data-animate="fade-up">
<div class="process-step__number">02</div>
<div class="process-step__content">
<h3>Persoonlijk plan</h3>
<p>
Op basis van de intake stellen we een begeleidingsplan op maat op. Hierin staan
concrete doelen, afspraken en de aanpak die we samen volgen.
</p>
</div>
</div>
<div class="process-step" data-animate="fade-up">
<div class="process-step__number">03</div>
<div class="process-step__content">
<h3>Actieve begeleiding</h3>
<p>
De begeleiding start! Met vaste contactmomenten, evaluaties en bijsturing waar nodig.
We werken stap voor stap aan jouw doelen.
</p>
</div>
</div>
<div class="process-step" data-animate="fade-up">
<div class="process-step__number">04</div>
<div class="process-step__content">
<h3>Evaluatie &amp; nazorg</h3>
<p>
We evalueren samen de voortgang en passen het plan aan waar nodig. Bij afronding
zorgen we voor goede overdracht en nazorg.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============ ERVARINGEN ============ -->
<section class="section" id="ervaringen">
<div class="container">
<div class="section-header" data-animate="fade-up">
<p class="section-label section-label--center">Ervaringen</p>
<h2 class="section-heading section-heading--center">Wat anderen <span class="text-gradient">zeggen</span></h2>
<p class="section-subtitle">
Lees wat jongeren en hun families over onze begeleiding vertellen.
</p>
</div>
<div class="testimonials">
<div class="testimonial-card" data-animate="fade-up">
<div class="testimonial-card__stars">
<svg width="20" height="20" viewBox="0 0 20 20" fill="#f59e0b"><path d="M10 1l2.5 5.5L18 7.5l-4 4 1 5.5L10 14.5 5 17l1-5.5-4-4 5.5-1L10 1z"/></svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="#f59e0b"><path d="M10 1l2.5 5.5L18 7.5l-4 4 1 5.5L10 14.5 5 17l1-5.5-4-4 5.5-1L10 1z"/></svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="#f59e0b"><path d="M10 1l2.5 5.5L18 7.5l-4 4 1 5.5L10 14.5 5 17l1-5.5-4-4 5.5-1L10 1z"/></svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="#f59e0b"><path d="M10 1l2.5 5.5L18 7.5l-4 4 1 5.5L10 14.5 5 17l1-5.5-4-4 5.5-1L10 1z"/></svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="#f59e0b"><path d="M10 1l2.5 5.5L18 7.5l-4 4 1 5.5L10 14.5 5 17l1-5.5-4-4 5.5-1L10 1z"/></svg>
</div>
<blockquote class="testimonial-card__quote">
&ldquo;Dankzij CEY Begeleiding heb ik geleerd om weer vertrouwen te hebben in mezelf.
Mijn begeleider begreep me en gaf me de ruimte om op mijn eigen tempo te groeien.&rdquo;
</blockquote>
<div class="testimonial-card__author">
<div class="testimonial-card__avatar">J</div>
<div>
<strong>Jongere, 19 jaar</strong>
<span>Individuele begeleiding</span>
</div>
</div>
</div>
<div class="testimonial-card" data-animate="fade-up">
<div class="testimonial-card__stars">
<svg width="20" height="20" viewBox="0 0 20 20" fill="#f59e0b"><path d="M10 1l2.5 5.5L18 7.5l-4 4 1 5.5L10 14.5 5 17l1-5.5-4-4 5.5-1L10 1z"/></svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="#f59e0b"><path d="M10 1l2.5 5.5L18 7.5l-4 4 1 5.5L10 14.5 5 17l1-5.5-4-4 5.5-1L10 1z"/></svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="#f59e0b"><path d="M10 1l2.5 5.5L18 7.5l-4 4 1 5.5L10 14.5 5 17l1-5.5-4-4 5.5-1L10 1z"/></svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="#f59e0b"><path d="M10 1l2.5 5.5L18 7.5l-4 4 1 5.5L10 14.5 5 17l1-5.5-4-4 5.5-1L10 1z"/></svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="#f59e0b"><path d="M10 1l2.5 5.5L18 7.5l-4 4 1 5.5L10 14.5 5 17l1-5.5-4-4 5.5-1L10 1z"/></svg>
</div>
<blockquote class="testimonial-card__quote">
&ldquo;Als ouder maakte ik me grote zorgen over mijn zoon. Het team van CEY heeft niet
alleen hem geholpen, maar ons hele gezin. De begeleiding is professioneel en warm.&rdquo;
</blockquote>
<div class="testimonial-card__author">
<div class="testimonial-card__avatar">M</div>
<div>
<strong>Moeder van client</strong>
<span>Gezinsbegeleiding</span>
</div>
</div>
</div>
<div class="testimonial-card" data-animate="fade-up">
<div class="testimonial-card__stars">
<svg width="20" height="20" viewBox="0 0 20 20" fill="#f59e0b"><path d="M10 1l2.5 5.5L18 7.5l-4 4 1 5.5L10 14.5 5 17l1-5.5-4-4 5.5-1L10 1z"/></svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="#f59e0b"><path d="M10 1l2.5 5.5L18 7.5l-4 4 1 5.5L10 14.5 5 17l1-5.5-4-4 5.5-1L10 1z"/></svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="#f59e0b"><path d="M10 1l2.5 5.5L18 7.5l-4 4 1 5.5L10 14.5 5 17l1-5.5-4-4 5.5-1L10 1z"/></svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="#f59e0b"><path d="M10 1l2.5 5.5L18 7.5l-4 4 1 5.5L10 14.5 5 17l1-5.5-4-4 5.5-1L10 1z"/></svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="#f59e0b"><path d="M10 1l2.5 5.5L18 7.5l-4 4 1 5.5L10 14.5 5 17l1-5.5-4-4 5.5-1L10 1z"/></svg>
</div>
<blockquote class="testimonial-card__quote">
&ldquo;De groepsbegeleiding was precies wat ik nodig had. Ik voelde me eindelijk begrepen
door leeftijdsgenoten. Het heeft me geholpen om weer naar school te gaan.&rdquo;
</blockquote>
<div class="testimonial-card__author">
<div class="testimonial-card__avatar">S</div>
<div>
<strong>Jongere, 17 jaar</strong>
<span>Groepsbegeleiding</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ CTA / CONTACT ============ -->
<section class="section section--cta" id="contact">
<div class="container">
<div class="cta">
<div class="cta__content" data-animate="fade-up">
<p class="section-label section-label--light">Neem contact op</p>
<h2 class="cta__title">Hulp nodig? Wij staan voor je klaar.</h2>
<p class="cta__text">
Heb je vragen over onze begeleiding of wil je een vrijblijvend kennismakingsgesprek?
Neem gerust contact met ons op. Samen kijken we naar de mogelijkheden.
</p>
<div class="cta__contact-methods">
<a href="mailto:info@ceybegeleiding.nl" class="cta__method">
<div class="cta__method-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="2" y="4" width="20" height="16" rx="3" stroke="currentColor" stroke-width="2"/><path d="M2 7l10 7 10-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div>
<strong>E-mail</strong>
<span>info@ceybegeleiding.nl</span>
</div>
</a>
<a href="tel:+31000000000" class="cta__method">
<div class="cta__method-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.362 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.574 2.81.7A2 2 0 0122 16.92z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div>
<strong>Telefoon</strong>
<span>+31 (0)00 000 0000</span>
</div>
</a>
<div class="cta__method">
<div class="cta__method-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2"/></svg>
</div>
<div>
<strong>Locatie</strong>
<span>Nederland</span>
</div>
</div>
</div>
<div class="cta__buttons">
<a href="mailto:info@ceybegeleiding.nl" class="btn btn--white">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2" y="3" width="16" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M2 5l8 5.5L18 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
<span>Stuur een e-mail</span>
</a>
<a href="tel:+31000000000" class="btn btn--outline-light">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M18 14v2.5a1.5 1.5 0 01-1.64 1.5A14.85 14.85 0 012.5 3.64 1.5 1.5 0 014 2h2.5a1.5 1.5 0 011.5 1.29c.095.72.272 1.427.525 2.11a1.5 1.5 0 01-.338 1.583L7.1 8.07a12 12 0 004.83 4.83l1.087-.957a1.5 1.5 0 011.583-.338c.683.253 1.39.43 2.11.525A1.5 1.5 0 0118 14z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
<span>Bel ons</span>
</a>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- ============ FOOTER ============ -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<a href="/" class="footer__logo">
<span class="logo-icon">
<svg width="32" height="32" viewBox="0 0 36 36" fill="none">
<circle cx="18" cy="18" r="18" fill="url(#logo-grad-footer)"/>
<path d="M12 18c0-3.3 2.7-6 6-6s6 2.7 6 6" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
<path d="M15 22c0-1.7 1.3-3 3-3s3 1.3 3 3" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="18" cy="13" r="2" fill="#fff"/>
<defs>
<linearGradient id="logo-grad-footer" x1="0" y1="0" x2="36" y2="36">
<stop stop-color="#2d5f8a"/>
<stop offset="1" stop-color="#4ecdc4"/>
</linearGradient>
</defs>
</svg>
</span>
<span class="logo-text logo-text--light">CEY <span>Begeleiding</span></span>
</a>
<p class="footer__desc">
Professionele begeleiding en GGZ-ondersteuning voor jongeren
en jongvolwassenen. Samen bouwen aan een sterke toekomst.
</p>
</div>
<div class="footer__nav">
<h4>Navigatie</h4>
<ul>
<li><a href="#over-ons">Over ons</a></li>
<li><a href="#diensten">Diensten</a></li>
<li><a href="#doelgroep">Voor wie</a></li>
<li><a href="#aanpak">Werkwijze</a></li>
<li><a href="#ervaringen">Ervaringen</a></li>
</ul>
</div>
<div class="footer__nav">
<h4>Diensten</h4>
<ul>
<li><a href="#diensten">Individuele begeleiding</a></li>
<li><a href="#diensten">Groepsbegeleiding</a></li>
<li><a href="#diensten">GGZ begeleiding</a></li>
<li><a href="#diensten">Coaching</a></li>
<li><a href="#diensten">Dagbesteding</a></li>
</ul>
</div>
<div class="footer__contact">
<h4>Contact</h4>
<ul>
<li>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><rect x="2" y="4" width="20" height="16" rx="3" stroke="currentColor" stroke-width="2"/><path d="M2 7l10 7 10-7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<a href="mailto:info@ceybegeleiding.nl">info@ceybegeleiding.nl</a>
</li>
<li>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.362 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.574 2.81.7A2 2 0 0122 16.92z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<a href="tel:+31000000000">+31 (0)00 000 0000</a>
</li>
<li>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2"/></svg>
<span>Nederland</span>
</li>
</ul>
</div>
</div>
<div class="footer__bottom">
<p>&copy; 2026 CEY Begeleiding. Alle rechten voorbehouden.</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>

112
js/main.js Normal file
View File

@@ -0,0 +1,112 @@
/* ============================================
CEY Begeleiding – JavaScript
============================================ */
// Mobile Navigation Toggle
const navToggle = document.getElementById('navToggle');
const mainNav = document.getElementById('mainNav');
if (navToggle && mainNav) {
navToggle.addEventListener('click', () => {
const isOpen = navToggle.classList.toggle('active');
mainNav.classList.toggle('active');
navToggle.setAttribute('aria-expanded', String(isOpen));
});
// Close nav on link click
mainNav.querySelectorAll('.nav__link').forEach(link => {
link.addEventListener('click', () => {
navToggle.classList.remove('active');
mainNav.classList.remove('active');
navToggle.setAttribute('aria-expanded', 'false');
});
});
}
// Header scroll effect
const header = document.getElementById('header');
if (header) {
let lastScroll = 0;
window.addEventListener('scroll', () => {
const currentScroll = window.scrollY;
header.classList.toggle('header--scrolled', currentScroll > 20);
lastScroll = currentScroll;
}, { passive: true });
}
// Scroll animations (Intersection Observer)
const animateElements = document.querySelectorAll('[data-animate]');
if (animateElements.length > 0) {
const observerOptions = {
root: null,
rootMargin: '0px 0px -60px 0px',
threshold: 0.15
};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
// Stagger animation for siblings
const parent = entry.target.parentElement;
const siblings = parent ? parent.querySelectorAll('[data-animate]') : [];
let delay = 0;
if (siblings.length > 1) {
const siblingIndex = Array.from(siblings).indexOf(entry.target);
delay = siblingIndex * 100;
}
setTimeout(() => {
entry.target.classList.add('is-visible');
}, delay);
observer.unobserve(entry.target);
}
});
}, observerOptions);
animateElements.forEach(el => observer.observe(el));
}
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const target = document.querySelector(targetId);
if (target) {
e.preventDefault();
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Active nav link highlighting
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav__link');
if (sections.length > 0 && navLinks.length > 0) {
const sectionObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const id = entry.target.getAttribute('id');
navLinks.forEach(link => {
link.classList.toggle('nav__link--active',
link.getAttribute('href') === `#${id}`
);
});
}
});
}, {
rootMargin: '-20% 0px -70% 0px',
threshold: 0
});
sections.forEach(section => sectionObserver.observe(section));
}