commit 6021e6ea75bfc8c989a944ae57c2e083864e0683 Author: Ubuntu Date: Sun Mar 1 13:23:47 2026 +0000 Initial commit diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..1416812 --- /dev/null +++ b/css/style.css @@ -0,0 +1,1438 @@ +/* ============================================ + CEY Begeleiding – Modern Professional Design + ============================================ */ + +/* ---------- CSS Custom Properties ---------- */ +:root { + /* Colors */ + --primary: #1e3a5f; + --primary-light: #2d5f8a; + --primary-lighter: #3a7cbd; + --primary-dark: #132842; + + --accent: #4ecdc4; + --accent-light: #7eddd6; + --accent-dark: #3db5ad; + + --teal: #0d9488; + --blue: #3b82f6; + --purple: #8b5cf6; + --orange: #f59e0b; + --rose: #f43f5e; + --green: #10b981; + + --bg: #ffffff; + --bg-alt: #f0f5fa; + --bg-warm: #f8fafc; + + --text: #1e293b; + --text-secondary: #64748b; + --text-light: #94a3b8; + + --white: #ffffff; + --border: #e2e8f0; + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); + --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08); + --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1); + --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12); + + /* Typography */ + --font-body: 'Inter', system-ui, -apple-system, sans-serif; + --font-heading: 'Playfair Display', Georgia, serif; + + /* Spacing */ + --section-py: clamp(4rem, 8vw, 7rem); + --container-max: 1200px; + --radius: 12px; + --radius-lg: 20px; + --radius-xl: 28px; + + /* Transitions */ + --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* ---------- Reset & Base ---------- */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; + font-size: 16px; + scroll-padding-top: 80px; +} + +body { + font-family: var(--font-body); + color: var(--text); + background: var(--bg); + line-height: 1.7; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +a { + color: inherit; + text-decoration: none; + transition: color var(--transition); +} + +ul { + list-style: none; +} + +.container { + max-width: var(--container-max); + margin: 0 auto; + padding: 0 1.5rem; +} + +/* ---------- Utility ---------- */ +.text-gradient { + background: linear-gradient(135deg, var(--primary-light), var(--accent)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.section-label { + display: inline-block; + font-size: 0.875rem; + font-weight: 600; + color: var(--accent-dark); + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 0.75rem; +} + +.section-label--center { + display: block; + text-align: center; +} + +.section-label--light { + color: var(--accent-light); +} + +.section-heading { + font-family: var(--font-heading); + font-size: clamp(1.75rem, 4vw, 2.75rem); + font-weight: 700; + color: var(--primary-dark); + line-height: 1.25; + margin-bottom: 1rem; +} + +.section-heading--center { + text-align: center; +} + +.section-subtitle { + text-align: center; + color: var(--text-secondary); + max-width: 620px; + margin: 0 auto 3.5rem; + font-size: 1.1rem; + line-height: 1.7; +} + +.section-header { + margin-bottom: 1rem; +} + +/* ---------- Buttons ---------- */ +.btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.875rem 2rem; + border-radius: 50px; + font-weight: 600; + font-size: 0.95rem; + transition: all var(--transition); + cursor: pointer; + border: none; + text-decoration: none; + line-height: 1.4; +} + +.btn--primary { + background: linear-gradient(135deg, var(--accent), var(--accent-dark)); + color: var(--white); + box-shadow: 0 4px 16px rgba(78, 205, 196, 0.35); +} + +.btn--primary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(78, 205, 196, 0.45); +} + +.btn--ghost { + background: transparent; + color: var(--white); + border: 2px solid rgba(255, 255, 255, 0.3); + backdrop-filter: blur(4px); +} + +.btn--ghost:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.5); +} + +.btn--white { + background: var(--white); + color: var(--primary); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); +} + +.btn--white:hover { + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); +} + +.btn--outline-light { + background: transparent; + color: var(--white); + border: 2px solid rgba(255, 255, 255, 0.4); +} + +.btn--outline-light:hover { + background: rgba(255, 255, 255, 0.1); + border-color: var(--white); +} + +/* ---------- Animations ---------- */ +[data-animate] { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); +} + +[data-animate="fade-left"] { + transform: translateX(40px); +} + +[data-animate="fade-right"] { + transform: translateX(-40px); +} + +[data-animate].is-visible { + opacity: 1; + transform: translate(0, 0); +} + +/* ========================================== + HEADER + ========================================== */ +.header { + position: sticky; + top: 0; + z-index: 1000; + background: rgba(255, 255, 255, 0.92); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid var(--border); + transition: box-shadow var(--transition); +} + +.header--scrolled { + box-shadow: var(--shadow-sm); +} + +.header__inner { + display: flex; + justify-content: space-between; + align-items: center; + height: 72px; +} + +.header__logo { + display: flex; + align-items: center; + gap: 0.75rem; + text-decoration: none; +} + +.logo-icon svg { + display: block; +} + +.logo-text { + font-size: 1.25rem; + font-weight: 700; + color: var(--primary); +} + +.logo-text span { + font-weight: 500; + color: var(--text-secondary); +} + +.logo-text--light { + color: var(--white); +} + +.logo-text--light span { + color: rgba(255, 255, 255, 0.7); +} + +.nav__list { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.nav__link { + display: block; + padding: 0.5rem 1rem; + font-size: 0.9rem; + font-weight: 500; + color: var(--text-secondary); + border-radius: 8px; + transition: all var(--transition); +} + +.nav__link:hover { + color: var(--primary); + background: var(--bg-alt); +} + +.nav__link--cta { + background: linear-gradient(135deg, var(--accent), var(--accent-dark)); + color: var(--white) !important; + padding: 0.5rem 1.5rem; + border-radius: 50px; + margin-left: 0.5rem; +} + +.nav__link--cta:hover { + background: linear-gradient(135deg, var(--accent-dark), var(--teal)); + transform: translateY(-1px); +} + +.nav__link--active { + color: var(--primary); + background: var(--bg-alt); +} + +/* Mobile nav toggle */ +.nav-toggle { + display: none; + background: none; + border: none; + cursor: pointer; + padding: 0.5rem; + z-index: 1001; +} + +.nav-toggle span { + display: block; + width: 24px; + height: 2px; + background: var(--text); + margin: 6px 0; + transition: var(--transition); + border-radius: 2px; +} + +.nav-toggle.active span:nth-child(1) { + transform: rotate(45deg) translate(5px, 6px); +} + +.nav-toggle.active span:nth-child(2) { + opacity: 0; +} + +.nav-toggle.active span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -6px); +} + +/* ========================================== + HERO + ========================================== */ +.hero { + position: relative; + background: linear-gradient(145deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%); + color: var(--white); + padding: clamp(4rem, 8vw, 7rem) 0; + overflow: hidden; + min-height: 85vh; + display: flex; + align-items: center; +} + +.hero__bg-shapes { + position: absolute; + inset: 0; + overflow: hidden; + pointer-events: none; +} + +.hero__shape { + position: absolute; + border-radius: 50%; + opacity: 0.08; +} + +.hero__shape--1 { + width: 600px; + height: 600px; + background: var(--accent); + top: -200px; + right: -100px; + animation: float 20s ease-in-out infinite; +} + +.hero__shape--2 { + width: 400px; + height: 400px; + background: var(--blue); + bottom: -100px; + left: -100px; + animation: float 15s ease-in-out infinite reverse; +} + +.hero__shape--3 { + width: 200px; + height: 200px; + background: var(--accent); + top: 50%; + left: 40%; + animation: float 12s ease-in-out infinite; +} + +@keyframes float { + 0%, 100% { transform: translate(0, 0) scale(1); } + 33% { transform: translate(30px, -30px) scale(1.05); } + 66% { transform: translate(-20px, 20px) scale(0.95); } +} + +.hero__inner { + display: grid; + grid-template-columns: 1.1fr 0.9fr; + gap: 4rem; + align-items: center; + position: relative; + z-index: 1; +} + +.hero__label { + display: inline-block; + font-size: 0.9rem; + font-weight: 600; + color: var(--accent); + text-transform: uppercase; + letter-spacing: 0.08em; + margin-bottom: 1.25rem; + padding: 0.4rem 1rem; + background: rgba(78, 205, 196, 0.12); + border-radius: 50px; + border: 1px solid rgba(78, 205, 196, 0.2); +} + +.hero__title { + font-family: var(--font-heading); + font-size: clamp(2.25rem, 5vw, 3.75rem); + font-weight: 700; + line-height: 1.15; + margin-bottom: 1.5rem; + color: var(--white); +} + +.hero__title .text-gradient { + background: linear-gradient(135deg, var(--accent), var(--accent-light)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero__text { + font-size: 1.1rem; + line-height: 1.8; + color: rgba(255, 255, 255, 0.8); + max-width: 540px; + margin-bottom: 2rem; +} + +.hero__actions { + display: flex; + gap: 1rem; + flex-wrap: wrap; + margin-bottom: 3rem; +} + +.hero__stats { + display: flex; + gap: 2.5rem; + padding-top: 2rem; + border-top: 1px solid rgba(255, 255, 255, 0.12); +} + +.hero__stat { + display: flex; + flex-direction: column; +} + +.hero__stat-number { + font-size: 1.75rem; + font-weight: 700; + color: var(--accent); + line-height: 1.2; +} + +.hero__stat-label { + font-size: 0.85rem; + color: rgba(255, 255, 255, 0.6); + margin-top: 0.25rem; +} + +/* Hero visual / image */ +.hero__visual { + position: relative; +} + +.hero__image-wrapper { + position: relative; + border-radius: var(--radius-xl); + overflow: hidden; + box-shadow: var(--shadow-xl); + aspect-ratio: 4/5; + max-height: 520px; +} + +.hero__image-wrapper img { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* Placeholder when image fails to load */ +.hero__image-placeholder { + background: linear-gradient(145deg, rgba(78, 205, 196, 0.2), rgba(59, 130, 246, 0.2)); + display: flex; + align-items: center; + justify-content: center; +} + +.hero__image-placeholder::after { + content: ''; + width: 80px; + height: 80px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='1.5'%3E%3Cpath d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E"); + background-size: contain; + background-repeat: no-repeat; +} + +.hero__image-accent { + position: absolute; + inset: 0; + background: linear-gradient(180deg, transparent 50%, rgba(30, 58, 95, 0.3) 100%); + pointer-events: none; +} + +/* Floating cards */ +.hero__floating-card { + position: absolute; + display: flex; + align-items: center; + gap: 0.75rem; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(8px); + padding: 0.875rem 1.25rem; + border-radius: var(--radius); + box-shadow: var(--shadow-lg); + color: var(--text); + z-index: 2; + max-width: 220px; +} + +.hero__floating-card strong { + display: block; + font-size: 0.85rem; + line-height: 1.3; +} + +.hero__floating-card small { + display: block; + font-size: 0.75rem; + color: var(--text-secondary); +} + +.hero__floating-card--1 { + bottom: 2rem; + left: -2rem; + animation: floatCard 6s ease-in-out infinite; +} + +.hero__floating-card--2 { + top: 2rem; + right: -1.5rem; + animation: floatCard 5s ease-in-out infinite reverse; +} + +.floating-icon { + width: 40px; + height: 40px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.floating-icon--green { + background: #ecfdf5; +} + +.floating-icon--blue { + background: #eff6ff; +} + +@keyframes floatCard { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} + +/* ========================================== + SECTIONS + ========================================== */ +.section { + padding: var(--section-py) 0; +} + +.section--alt { + background: var(--bg-alt); +} + +/* ========================================== + ABOUT + ========================================== */ +.about { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 5rem; + align-items: center; +} + +.about__image-grid { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 1rem; + position: relative; +} + +.about__image { + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-md); +} + +.about__image--main { + grid-row: 1 / 3; + aspect-ratio: 3/4; +} + +.about__image--secondary { + grid-row: 1 / 2; + aspect-ratio: 4/3; +} + +.about__image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* Placeholder when image fails */ +.about__image-placeholder { + background: linear-gradient(145deg, var(--bg-alt), #dbeafe); + display: flex; + align-items: center; + justify-content: center; +} + +.about__image-placeholder::after { + content: ''; + width: 48px; + height: 48px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E"); + background-size: contain; + background-repeat: no-repeat; +} + +.about__experience-badge { + position: absolute; + bottom: 1rem; + right: 0; + background: linear-gradient(135deg, var(--accent), var(--accent-dark)); + color: var(--white); + padding: 1.25rem; + border-radius: var(--radius-lg); + text-align: center; + box-shadow: var(--shadow-lg); + z-index: 2; +} + +.badge-number { + display: block; + font-size: 2rem; + font-weight: 700; + line-height: 1; +} + +.badge-text { + display: block; + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-top: 0.25rem; + line-height: 1.3; +} + +.about__text { + color: var(--text-secondary); + font-size: 1.05rem; + margin-bottom: 1rem; + line-height: 1.8; +} + +.about__values { + margin-top: 2rem; + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.value-item { + display: flex; + align-items: flex-start; + gap: 1rem; +} + +.value-icon { + width: 44px; + height: 44px; + border-radius: 12px; + background: var(--bg-alt); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + color: var(--primary-light); +} + +.value-item strong { + display: block; + font-size: 0.95rem; + color: var(--text); + margin-bottom: 0.15rem; +} + +.value-item p { + font-size: 0.875rem; + color: var(--text-secondary); + margin: 0; +} + +/* ========================================== + SERVICES + ========================================== */ +.services { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; +} + +.service-card { + background: var(--white); + border-radius: var(--radius-lg); + padding: 2rem; + box-shadow: var(--shadow-sm); + border: 1px solid var(--border); + transition: all var(--transition); + position: relative; + overflow: hidden; +} + +.service-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: var(--accent); + transform: scaleX(0); + transform-origin: left; + transition: transform var(--transition); +} + +.service-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); + border-color: transparent; +} + +.service-card:hover::before { + transform: scaleX(1); +} + +.service-card__icon { + width: 56px; + height: 56px; + border-radius: 14px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.25rem; +} + +.service-card__icon--blue { + background: #eff6ff; + color: var(--blue); +} + +.service-card__icon--teal { + background: #f0fdfa; + color: var(--teal); +} + +.service-card__icon--purple { + background: #f5f3ff; + color: var(--purple); +} + +.service-card__icon--orange { + background: #fffbeb; + color: var(--orange); +} + +.service-card__icon--green { + background: #ecfdf5; + color: var(--green); +} + +.service-card__icon--rose { + background: #fff1f2; + color: var(--rose); +} + +.service-card__title { + font-family: var(--font-heading); + font-size: 1.2rem; + font-weight: 700; + color: var(--primary-dark); + margin-bottom: 0.75rem; +} + +.service-card__text { + color: var(--text-secondary); + font-size: 0.925rem; + line-height: 1.7; + margin-bottom: 1.25rem; +} + +.service-card__tags { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.service-card__tags li { + font-size: 0.75rem; + font-weight: 600; + padding: 0.3rem 0.75rem; + background: var(--bg-alt); + color: var(--primary-light); + border-radius: 50px; + letter-spacing: 0.02em; +} + +/* ========================================== + AUDIENCE / DOELGROEP + ========================================== */ +.audience { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; +} + +.audience-card { + background: var(--white); + border-radius: var(--radius-lg); + padding: 2rem; + border: 1px solid var(--border); + transition: all var(--transition); +} + +.audience-card:hover { + border-color: var(--accent); + box-shadow: var(--shadow-md); + transform: translateY(-2px); +} + +.audience-card__icon { + width: 48px; + height: 48px; + border-radius: 12px; + background: var(--bg-alt); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.25rem; +} + +.audience-card h3 { + font-size: 1.05rem; + font-weight: 700; + color: var(--primary-dark); + margin-bottom: 0.5rem; +} + +.audience-card p { + font-size: 0.9rem; + color: var(--text-secondary); + line-height: 1.6; +} + +/* ========================================== + PROCESS / WERKWIJZE + ========================================== */ +.process { + max-width: 700px; + margin: 0 auto; + position: relative; +} + +.process::before { + content: ''; + position: absolute; + left: 35px; + top: 0; + bottom: 0; + width: 2px; + background: linear-gradient(180deg, var(--accent), var(--primary-light)); + border-radius: 2px; +} + +.process-step { + display: flex; + gap: 2rem; + padding: 2rem 0; + position: relative; +} + +.process-step__number { + width: 72px; + height: 72px; + min-width: 72px; + border-radius: 50%; + background: var(--white); + border: 3px solid var(--accent); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + font-weight: 700; + color: var(--primary); + position: relative; + z-index: 1; + box-shadow: 0 0 0 6px var(--bg-alt); +} + +.process-step__content h3 { + font-family: var(--font-heading); + font-size: 1.2rem; + font-weight: 700; + color: var(--primary-dark); + margin-bottom: 0.5rem; + padding-top: 0.25rem; +} + +.process-step__content p { + color: var(--text-secondary); + font-size: 0.95rem; + line-height: 1.7; +} + +/* ========================================== + TESTIMONIALS / ERVARINGEN + ========================================== */ +.testimonials { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; +} + +.testimonial-card { + background: var(--white); + border-radius: var(--radius-lg); + padding: 2rem; + box-shadow: var(--shadow-sm); + border: 1px solid var(--border); + transition: all var(--transition); + display: flex; + flex-direction: column; +} + +.testimonial-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-3px); +} + +.testimonial-card__stars { + display: flex; + gap: 0.2rem; + margin-bottom: 1.25rem; +} + +.testimonial-card__quote { + font-size: 1rem; + line-height: 1.75; + color: var(--text-secondary); + font-style: italic; + margin-bottom: 1.5rem; + flex-grow: 1; +} + +.testimonial-card__author { + display: flex; + align-items: center; + gap: 0.75rem; + padding-top: 1.25rem; + border-top: 1px solid var(--border); +} + +.testimonial-card__avatar { + width: 42px; + height: 42px; + border-radius: 50%; + background: linear-gradient(135deg, var(--primary-light), var(--accent)); + color: var(--white); + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 1rem; + flex-shrink: 0; +} + +.testimonial-card__author strong { + display: block; + font-size: 0.9rem; + color: var(--text); +} + +.testimonial-card__author span { + display: block; + font-size: 0.8rem; + color: var(--text-light); +} + +/* ========================================== + CTA / CONTACT + ========================================== */ +.section--cta { + background: linear-gradient(145deg, var(--primary) 0%, var(--primary-dark) 100%); + color: var(--white); + padding: var(--section-py) 0; + position: relative; + overflow: hidden; +} + +.section--cta::before { + content: ''; + position: absolute; + width: 500px; + height: 500px; + border-radius: 50%; + background: rgba(78, 205, 196, 0.08); + top: -200px; + right: -100px; +} + +.section--cta::after { + content: ''; + position: absolute; + width: 300px; + height: 300px; + border-radius: 50%; + background: rgba(59, 130, 246, 0.06); + bottom: -100px; + left: -50px; +} + +.cta { + position: relative; + z-index: 1; +} + +.cta__content { + max-width: 700px; + margin: 0 auto; + text-align: center; +} + +.cta__title { + font-family: var(--font-heading); + font-size: clamp(1.75rem, 4vw, 2.5rem); + font-weight: 700; + margin-bottom: 1rem; + line-height: 1.25; +} + +.cta__text { + font-size: 1.1rem; + line-height: 1.8; + color: rgba(255, 255, 255, 0.8); + margin-bottom: 2.5rem; +} + +.cta__contact-methods { + display: flex; + justify-content: center; + gap: 1.5rem; + margin-bottom: 2.5rem; + flex-wrap: wrap; +} + +.cta__method { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 1rem 1.5rem; + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: var(--radius); + color: var(--white); + transition: all var(--transition); + text-decoration: none; +} + +.cta__method:hover { + background: rgba(255, 255, 255, 0.14); + border-color: rgba(255, 255, 255, 0.25); +} + +.cta__method-icon { + width: 44px; + height: 44px; + border-radius: 12px; + background: rgba(255, 255, 255, 0.1); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.cta__method strong { + display: block; + font-size: 0.85rem; + font-weight: 600; +} + +.cta__method span { + display: block; + font-size: 0.85rem; + color: rgba(255, 255, 255, 0.7); +} + +.cta__buttons { + display: flex; + justify-content: center; + gap: 1rem; + flex-wrap: wrap; +} + +/* ========================================== + FOOTER + ========================================== */ +.footer { + background: var(--primary-dark); + color: rgba(255, 255, 255, 0.75); + padding: 4rem 0 1.5rem; +} + +.footer__grid { + display: grid; + grid-template-columns: 1.5fr 1fr 1fr 1.2fr; + gap: 3rem; + margin-bottom: 3rem; +} + +.footer__logo { + display: flex; + align-items: center; + gap: 0.75rem; + text-decoration: none; + margin-bottom: 1rem; +} + +.footer__desc { + font-size: 0.9rem; + line-height: 1.7; + color: rgba(255, 255, 255, 0.6); +} + +.footer__nav h4, +.footer__contact h4 { + color: var(--white); + font-size: 0.95rem; + font-weight: 600; + margin-bottom: 1rem; +} + +.footer__nav ul { + display: flex; + flex-direction: column; + gap: 0.6rem; +} + +.footer__nav a { + font-size: 0.875rem; + color: rgba(255, 255, 255, 0.55); + transition: all var(--transition); +} + +.footer__nav a:hover { + color: var(--accent); + padding-left: 4px; +} + +.footer__contact ul { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.footer__contact li { + display: flex; + align-items: center; + gap: 0.75rem; + font-size: 0.875rem; + color: rgba(255, 255, 255, 0.55); +} + +.footer__contact a { + color: rgba(255, 255, 255, 0.55); + transition: color var(--transition); +} + +.footer__contact a:hover { + color: var(--accent); +} + +.footer__bottom { + border-top: 1px solid rgba(255, 255, 255, 0.1); + padding-top: 1.5rem; + text-align: center; + font-size: 0.825rem; + color: rgba(255, 255, 255, 0.4); +} + +/* ========================================== + RESPONSIVE + ========================================== */ +@media (max-width: 1024px) { + .hero__inner { + grid-template-columns: 1fr; + gap: 3rem; + } + + .hero { + min-height: auto; + } + + .hero__visual { + max-width: 400px; + margin: 0 auto; + } + + .hero__floating-card--1 { + left: 0; + } + + .hero__floating-card--2 { + right: 0; + } + + .about { + grid-template-columns: 1fr; + gap: 3rem; + } + + .services { + grid-template-columns: repeat(2, 1fr); + } + + .audience { + grid-template-columns: repeat(2, 1fr); + } + + .testimonials { + grid-template-columns: repeat(2, 1fr); + } + + .footer__grid { + grid-template-columns: 1fr 1fr; + gap: 2rem; + } +} + +@media (max-width: 768px) { + .nav-toggle { + display: block; + } + + .nav { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--white); + border-bottom: 1px solid var(--border); + box-shadow: var(--shadow-md); + padding: 1rem 1.5rem 1.5rem; + } + + .nav.active { + display: block; + } + + .nav__list { + flex-direction: column; + gap: 0.25rem; + } + + .nav__link { + padding: 0.75rem 1rem; + width: 100%; + } + + .nav__link--cta { + text-align: center; + margin-left: 0; + margin-top: 0.5rem; + } + + .hero { + text-align: center; + padding-top: 3rem; + padding-bottom: 3rem; + } + + .hero__label { + font-size: 0.8rem; + } + + .hero__text { + margin-left: auto; + margin-right: auto; + } + + .hero__actions { + justify-content: center; + } + + .hero__stats { + justify-content: center; + gap: 2rem; + } + + .hero__floating-card { + display: none; + } + + .hero__image-wrapper { + max-height: 350px; + } + + .about__image-grid { + max-width: 400px; + margin: 0 auto; + } + + .services { + grid-template-columns: 1fr; + } + + .audience { + grid-template-columns: 1fr; + } + + .testimonials { + grid-template-columns: 1fr; + } + + .process::before { + left: 23px; + } + + .process-step { + gap: 1.25rem; + } + + .process-step__number { + width: 48px; + height: 48px; + min-width: 48px; + font-size: 1rem; + box-shadow: 0 0 0 4px var(--bg-alt); + } + + .cta__contact-methods { + flex-direction: column; + align-items: center; + } + + .cta__method { + width: 100%; + max-width: 320px; + } + + .footer__grid { + grid-template-columns: 1fr; + gap: 2rem; + } + + .section-subtitle { + margin-bottom: 2.5rem; + } +} + +@media (max-width: 480px) { + :root { + --section-py: 3.5rem; + } + + .hero__stats { + flex-wrap: wrap; + gap: 1.25rem; + } + + .hero__stat { + min-width: 80px; + } + + .cta__buttons { + flex-direction: column; + align-items: center; + } + + .btn { + width: 100%; + justify-content: center; + max-width: 300px; + } +} diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..3ffb8f8 --- /dev/null +++ b/favicon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/images/about-session.jpg b/images/about-session.jpg new file mode 100644 index 0000000..6c26cdb Binary files /dev/null and b/images/about-session.jpg differ diff --git a/images/about-team.jpg b/images/about-team.jpg new file mode 100644 index 0000000..7030751 Binary files /dev/null and b/images/about-team.jpg differ diff --git a/images/hero-youth.jpg b/images/hero-youth.jpg new file mode 100644 index 0000000..413cd0f Binary files /dev/null and b/images/hero-youth.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..ac43261 --- /dev/null +++ b/index.html @@ -0,0 +1,664 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + CEY Begeleiding – Professionele jeugdbegeleiding & GGZ ondersteuning + + + + + + + +
+ + +
+
+
+
+
+
+
+
+

Begeleiding voor jongeren & jongvolwassenen

+

Samen bouwen aan
een sterke toekomst

+

+ CEY Begeleiding biedt professionele GGZ-ondersteuning en begeleiding op maat + voor jongeren. Wij helpen bij het ontwikkelen van zelfstandigheid, veerkracht + en persoonlijke groei. +

+
+ + Neem contact op + + + Bekijk onze diensten +
+
+
+ 100+ + Jongeren geholpen +
+
+ 5+ + Jaar ervaring +
+
+ 98% + Tevredenheid +
+
+
+
+
+ + Begeleider in gesprek met een jongere +
+
+
+
+ +
+
+ Persoonlijk plan + Op maat voor elke jongere +
+
+
+
+ +
+
+ Veilige omgeving + Vertrouwen & respect +
+
+
+
+
+ + +
+
+
+
+
+
+ + Het team van CEY Begeleiding +
+
+ + Groepssessie met jongeren +
+
+ 5+ + Jaar
ervaring +
+
+
+
+

Over CEY Begeleiding

+

Wij geloven in de kracht van elke jongere

+

+ 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. +

+

+ 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. +

+
+
+
+ +
+
+ Persoonlijke aandacht +

Maatwerk voor elke jongere

+
+
+
+
+ +
+
+ Samenwerking +

Met jongere, gezin en netwerk

+
+
+
+
+ +
+
+ Resultaatgericht +

Focus op groei en zelfstandigheid

+
+
+
+
+
+
+
+ + +
+
+
+

Wat wij bieden

+

Onze diensten

+

+ Professionele begeleiding en ondersteuning afgestemd op de unieke behoeften van elke jongere. +

+
+
+
+
+ + + +
+

Individuele begeleiding

+

+ Een-op-een ondersteuning voor jongeren bij psychische klachten, gedragsproblemen + of het werken aan persoonlijke doelen. Afgestemd op jouw tempo en behoeften. +

+
    +
  • GGZ
    • +
  • Maatwerk
    • +
  • 1-op-1
    • +
+
+ +
+
+ + + + + + + +
+

Groepsbegeleiding

+

+ Samen leren en groeien in een veilige groepsomgeving. Door ervaringen te delen + en van elkaar te leren, versterken jongeren hun sociale vaardigheden. +

+
    +
  • Sociaal
    • +
  • Groei
    • +
  • Verbinding
    • +
+
+ +
+
+ + + + + +
+

Ambulante GGZ begeleiding

+

+ Professionele ondersteuning bij psychische problematiek in de eigen leefomgeving. + We begeleiden jongeren bij angst, depressie, trauma en gedragsproblemen. +

+
    +
  • GGZ
    • +
  • Thuissituatie
    • +
  • Professioneel
    • +
+
+ +
+
+ + + + +
+

Coaching & ontwikkeling

+

+ Gericht werken aan persoonlijke groei, zelfvertrouwen en het ontdekken van + talenten. We coachen jongeren richting een zelfstandige toekomst. +

+
    +
  • Coaching
    • +
  • Talenten
    • +
  • Toekomst
    • +
+
+ +
+
+ + + + +
+

Dagbesteding

+

+ Zinvolle en gestructureerde dagactiviteiten die bijdragen aan een stabiel + dagritme, sociale contacten en het ontwikkelen van praktische vaardigheden. +

+
    +
  • Structuur
    • +
  • Activiteiten
    • +
  • Dagritme
    • +
+
+ +
+
+ + + + + + +
+

Gezinsbegeleiding

+

+ Ondersteuning voor het hele gezin. We helpen bij het verbeteren van communicatie, + het omgaan met moeilijk gedrag en het versterken van de gezinsband. +

+
    +
  • Gezin
    • +
  • Communicatie
    • +
  • Samen
    • +
+
+
+
+
+ + +
+
+
+

Voor wie

+

Voor wie is onze begeleiding?

+

+ Wij begeleiden jongeren en jongvolwassenen die ondersteuning nodig hebben bij + uiteenlopende uitdagingen. +

+
+
+
+
+ +
+

Psychische klachten

+

Jongeren met angst, depressie, trauma of andere psychische problemen die begeleiding nodig hebben.

+
+
+
+ +
+

Gedragsproblemen

+

Ondersteuning bij moeilijk gedrag, impulsiviteit, agressie of moeite met het volgen van regels.

+
+
+
+ +
+

Structuur & dagritme

+

Jongeren die moeite hebben met het opbouwen van een gestructureerd en stabiel dagritme.

+
+
+
+ +
+

Zelfstandigheid

+

Jongvolwassenen die hulp nodig hebben bij het leren zelfstandig wonen, leven en functioneren.

+
+
+
+ +
+

Sociaal isolement

+

Jongeren die moeite hebben met sociale contacten en dreigen buiten de maatschappij te vallen.

+
+
+
+ +
+

Schooluitval

+

Begeleiding voor jongeren die zijn uitgevallen of dreigen uit te vallen op school of werk.

+
+
+
+
+ + +
+
+
+

Onze werkwijze

+

Hoe wij te werk gaan

+

+ Ons begeleidingsproces is helder, persoonlijk en gericht op duurzame resultaten. +

+
+
+
+
01
+
+

Kennismaking & intake

+

+ We starten met een vrijblijvend kennismakingsgesprek. We luisteren naar jouw verhaal, + wensen en doelen. Samen kijken we welke vorm van begeleiding het beste past. +

+
+
+
+
02
+
+

Persoonlijk plan

+

+ Op basis van de intake stellen we een begeleidingsplan op maat op. Hierin staan + concrete doelen, afspraken en de aanpak die we samen volgen. +

+
+
+
+
03
+
+

Actieve begeleiding

+

+ De begeleiding start! Met vaste contactmomenten, evaluaties en bijsturing waar nodig. + We werken stap voor stap aan jouw doelen. +

+
+
+
+
04
+
+

Evaluatie & nazorg

+

+ We evalueren samen de voortgang en passen het plan aan waar nodig. Bij afronding + zorgen we voor goede overdracht en nazorg. +

+
+
+
+
+
+ + +
+
+
+

Ervaringen

+

Wat anderen zeggen

+

+ Lees wat jongeren en hun families over onze begeleiding vertellen. +

+
+
+
+
+ + + + + +
+
+ “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.” +
+
+
J
+
+ Jongere, 19 jaar + Individuele begeleiding +
+
+
+ +
+
+ + + + + +
+
+ “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.” +
+
+
M
+
+ Moeder van client + Gezinsbegeleiding +
+
+
+ +
+
+ + + + + +
+
+ “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.” +
+
+
S
+
+ Jongere, 17 jaar + Groepsbegeleiding +
+
+
+
+
+
+ + +
+
+
+
+

Neem contact op

+

Hulp nodig? Wij staan voor je klaar.

+

+ Heb je vragen over onze begeleiding of wil je een vrijblijvend kennismakingsgesprek? + Neem gerust contact met ons op. Samen kijken we naar de mogelijkheden. +

+
+ +
+ +
+
+ E-mail + info@ceybegeleiding.nl +
+ + +
+ +
+
+ Telefoon + +31 (0)00 000 0000 +
+ +
+
+ +
+
+ Locatie + Nederland +
+
+
+
+ + + Stuur een e-mail + + + + Bel ons + +
+
+
+
+
+ +
+ + + + + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..6c0ccae --- /dev/null +++ b/js/main.js @@ -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)); +}