Convert to Gutenberg blocks

wpfiles/wp-content/themes/hogelandlinux/assets/css/patterns.css

@@ -0,0 +1,524 @@
+/* ===================================================================
+   Hogeland Linux — block patterns & content styles
+   Consolidated design system: single green palette, alternating
+   white/tint section rhythm, consistent cards, spacing and buttons.
+   =================================================================== */
+
+/* -------------------------------------------------------------------
+   Layout helpers (used by all patterns)
+------------------------------------------------------------------- */
+
+.hl-container {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 1.5rem;
+	box-sizing: border-box;
+}
+
+/* Full-width sections, regardless of surrounding content wrappers. */
+.wp-block-group.hl-section {
+	width: auto;
+	max-width: none;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+/* Loose, non-pattern blocks typed directly in the editor get the
+   content column width and some breathing room. */
+.entry-content > *:not(.hl-section):not([class*="align"]) {
+	max-width: 1200px;
+	margin: 1.5rem auto;
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+}
+
+.entry-content > .alignwide {
+	max-width: 1400px;
+}
+
+.entry-content > .alignfull {
+	width: 100vw;
+	max-width: 100vw;
+	margin-left: calc(50% - 50vw);
+	margin-right: calc(50% - 50vw);
+}
+
+/* Prose inside content. */
+.entry-content a {
+	color: #059669;
+}
+
+.entry-content img {
+	border-radius: 8px;
+	max-width: 100%;
+	height: auto;
+}
+
+/* -------------------------------------------------------------------
+   Section rhythm (consistent alternation)
+   white  -> tint  -> white -> tint -> ... -> dark CTA
+------------------------------------------------------------------- */
+
+.hl-section {
+	padding: 3.5rem 0;
+}
+
+.hl-section--white {
+	background: #fff;
+}
+
+.hl-section--tint {
+	background: #ecfdf5;
+}
+
+.hl-section--brand {
+	background: linear-gradient(135deg, #059669 0%, #047857 100%);
+	color: #fff;
+}
+
+.hl-section-title {
+	text-align: center;
+	color: #047857;
+	margin-bottom: 1rem;
+}
+
+.hl-section-subtitle {
+	text-align: center;
+	color: #6b7280;
+	font-size: 1.1rem;
+	max-width: 640px;
+	margin: 0 auto 2.5rem;
+}
+
+/* -------------------------------------------------------------------
+   Hero (home) and page hero
+------------------------------------------------------------------- */
+
+.hl-hero {
+	background:
+		linear-gradient(135deg, rgba(236, 253, 245, 0.9) 0%, rgba(209, 250, 229, 0.9) 100%),
+		url('../images/TuxAinrom.webp') center / cover no-repeat;
+	min-height: 70vh;
+	display: flex;
+	align-items: center;
+	padding: 4rem 0;
+	text-align: center;
+	box-sizing: border-box;
+}
+
+.hl-hero .hl-hero__title {
+	color: #047857;
+	font-size: clamp(2rem, 5vw, 3rem);
+	margin-bottom: 1rem;
+	text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
+}
+
+.hl-hero .hl-hero__subtitle {
+	font-size: 1.25rem;
+	color: #374151;
+	max-width: 760px;
+	margin: 0 auto 2rem;
+	text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
+}
+
+.hl-hero .wp-block-buttons {
+	margin-top: 0.5rem;
+}
+
+.hl-page-hero {
+	background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
+	padding: 2.25rem 0;
+	text-align: center;
+	box-sizing: border-box;
+}
+
+.hl-page-hero .hl-page-hero__title {
+	color: #047857;
+	margin-bottom: 1rem;
+}
+
+.hl-page-hero .hl-page-hero__subtitle {
+	color: #6b7280;
+	max-width: 640px;
+	margin: 0 auto;
+}
+
+/* -------------------------------------------------------------------
+   Card grids (singular system: responsive auto-fit grid)
+------------------------------------------------------------------- */
+
+.wp-block-columns.hl-card-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+	gap: 2rem;
+	margin: 2.5rem 0 0;
+}
+
+.wp-block-columns.hl-card-grid > .wp-block-column {
+	margin: 0;
+}
+
+.hl-card {
+	background: #fff;
+	border-radius: 12px;
+	padding: 2rem;
+	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+	border: 1px solid transparent;
+	transition: transform 0.3s ease, box-shadow 0.3s ease;
+	display: flex;
+	flex-direction: column;
+	box-sizing: border-box;
+}
+
+.hl-card:hover {
+	transform: translateY(-4px);
+	box-shadow: 0 10px 30px rgba(5, 150, 105, 0.15);
+}
+
+.hl-card h3 {
+	color: #047857;
+	margin: 0 0 0.75rem;
+}
+
+.hl-card p:last-child {
+	margin-bottom: 0;
+}
+
+/* Benefit card: tinted, centered, icon on top. */
+.hl-card--benefit {
+	background: #ecfdf5;
+	border-color: #bbf7d0;
+	text-align: center;
+}
+
+.hl-card--benefit .hl-card-icon {
+	font-size: 2.5rem;
+	line-height: 1;
+	margin: 0 0 0.75rem;
+}
+
+/* Service card: white with green left accent. */
+.hl-card--service {
+	border-left: 4px solid #059669;
+}
+
+/* Steps: fixed 3/2/1 responsive layout. */
+.wp-block-columns.hl-steps-grid {
+	grid-template-columns: repeat(3, 1fr);
+}
+
+@media (max-width: 1024px) {
+	.wp-block-columns.hl-steps-grid {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+@media (max-width: 640px) {
+	.wp-block-columns.hl-steps-grid {
+		grid-template-columns: 1fr;
+	}
+}
+
+/* -------------------------------------------------------------------
+   Distro cards
+------------------------------------------------------------------- */
+
+.hl-distro-card {
+	position: relative;
+	overflow: hidden;
+}
+
+.hl-distro-card::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 4px;
+	background: linear-gradient(90deg, #059669, #10b981);
+}
+
+.hl-distro-head {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	margin: 0 0 1rem;
+}
+
+.hl-distro-head img {
+	width: 48px;
+	height: 48px;
+	object-fit: contain;
+	flex-shrink: 0;
+	margin: 0;
+}
+
+.hl-distro-head h3 {
+	margin: 0;
+	color: #047857;
+}
+
+.hl-distro-tag {
+	background: linear-gradient(135deg, #059669, #10b981);
+	color: #fff;
+	border-radius: 20px;
+	padding: 0.2rem 0.75rem;
+	font-size: 0.8rem;
+	font-weight: 500;
+	width: auto;
+	display: inline-block;
+}
+
+.hl-distro-features {
+	color: #4b5563;
+	font-size: 0.95rem;
+	margin: 0 0 1rem;
+}
+
+.hl-distro-ideal {
+	margin: auto 0 0;
+	background: #f0f9ff;
+	border: 1px solid #bae6fd;
+	border-radius: 8px;
+	padding: 1rem;
+	color: #0c4a6e;
+	font-size: 0.9rem;
+}
+
+.hl-distro-ideal strong {
+	color: #0369a1;
+}
+
+/* -------------------------------------------------------------------
+   Windows 10 EOL section
+------------------------------------------------------------------- */
+
+.wp-block-columns.hl-eol-col {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 3rem;
+	align-items: start;
+	margin-bottom: 3rem;
+}
+
+.wp-block-columns.hl-eol-col > .wp-block-column {
+	margin: 0;
+}
+
+@media (max-width: 768px) {
+	.wp-block-columns.hl-eol-col {
+		grid-template-columns: 1fr;
+		gap: 2rem;
+	}
+}
+
+.hl-eol-image img {
+	border-radius: 12px;
+	max-width: 100%;
+}
+
+.hl-eol-list {
+	list-style: none;
+	margin: 1.5rem 0;
+	padding: 0;
+}
+
+.hl-eol-list li {
+	padding: 0.35rem 0;
+	font-size: 1.1rem;
+}
+
+.hl-highlight {
+	background: #d1fae5;
+	border-left: 4px solid #059669;
+	border-radius: 8px;
+	padding: 1rem 1.25rem;
+	color: #064e3b;
+	font-weight: 500;
+	margin: 0;
+}
+
+/* Stats row */
+.wp-block-columns.hl-stats {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 1.5rem;
+	margin: 0;
+}
+
+.wp-block-columns.hl-stats > .wp-block-column {
+	margin: 0;
+}
+
+@media (max-width: 768px) {
+	.wp-block-columns.hl-stats {
+		grid-template-columns: 1fr;
+	}
+}
+
+.hl-stat {
+	background: #fff;
+	border-radius: 12px;
+	padding: 1.5rem;
+	text-align: center;
+	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+	box-sizing: border-box;
+}
+
+.hl-stat__icon {
+	font-size: 2rem;
+	line-height: 1;
+	margin: 0 0 0.5rem;
+}
+
+.hl-stat__number {
+	font-size: 1.75rem;
+	color: #047857;
+	margin: 0 0 0.25rem;
+}
+
+.hl-stat__label {
+	color: #6b7280;
+	margin: 0;
+}
+
+/* -------------------------------------------------------------------
+   Feature showcases (Linux in actie)
+------------------------------------------------------------------- */
+
+.hl-feature-card {
+	text-align: center;
+}
+
+.hl-feature-card img {
+	border-radius: 12px;
+	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+	margin: 0 0 1.25rem;
+}
+
+.hl-feature-card h3 {
+	color: #047857;
+	margin: 0 0 0.75rem;
+	font-size: 1.3rem;
+}
+
+.hl-feature-card p {
+	color: #6b7280;
+	margin: 0;
+}
+
+/* -------------------------------------------------------------------
+   Call to action (dark green) and buttons
+------------------------------------------------------------------- */
+
+.hl-cta {
+	text-align: center;
+}
+
+.hl-cta h2 {
+	color: #fff;
+	margin: 0 0 1rem;
+}
+
+.hl-cta p {
+	color: #a7f3d0;
+	font-size: 1.1rem;
+	max-width: 720px;
+	margin: 0 auto 2rem;
+}
+
+/* Button block styles */
+.is-style-hl-primary .wp-block-button__link {
+	background: #059669;
+	color: #fff;
+	border: 2px solid transparent;
+	border-radius: 8px;
+	padding: 12px 24px;
+}
+
+.is-style-hl-primary .wp-block-button__link:hover {
+	background: #047857;
+	color: #fff;
+}
+
+.is-style-hl-secondary .wp-block-button__link {
+	background: transparent;
+	color: #059669;
+	border: 2px solid #059669;
+	border-radius: 8px;
+	padding: 12px 24px;
+}
+
+.is-style-hl-secondary .wp-block-button__link:hover {
+	background: #059669;
+	color: #fff;
+}
+
+.is-style-hl-on-dark .wp-block-button__link {
+	background: #fff;
+	color: #047857;
+	border: 2px solid transparent;
+	border-radius: 8px;
+	padding: 12px 24px;
+}
+
+.is-style-hl-on-dark .wp-block-button__link:hover {
+	background: #d1fae5;
+	color: #047857;
+}
+
+/* -------------------------------------------------------------------
+   Disclaimer (collapsible)
+------------------------------------------------------------------- */
+
+details.hl-disclaimer {
+	margin: 1rem 0 0;
+}
+
+details.hl-disclaimer summary {
+	cursor: pointer;
+	color: #047857;
+	font-weight: 600;
+}
+
+details.hl-disclaimer .hl-disclaimer__body {
+	background: #f9fafb;
+	border-left: 4px solid #059669;
+	border-radius: 6px;
+	padding: 1rem 1.25rem;
+	margin-top: 0.75rem;
+}
+
+/* -------------------------------------------------------------------
+   Media & text (Over mij style)
+------------------------------------------------------------------- */
+
+.hl-media-text .wp-block-image {
+	margin: 0;
+}
+
+.hl-media-text figcaption {
+	color: #6b7280;
+	font-size: 0.9rem;
+	margin-top: 0.5rem;
+	text-align: center;
+}
+
+/* -------------------------------------------------------------------
+   Responsive polish
+------------------------------------------------------------------- */
+
+@media (max-width: 768px) {
+	.hl-section {
+		padding: 2.5rem 0;
+	}
+
+	.hl-hero {
+		min-height: 60vh;
+	}
+
+	.hl-card,
+	.hl-stat {
+		padding: 1.25rem;
+	}
+}

wpfiles/wp-content/themes/hogelandlinux/functions.php

@@ -11,7 +11,7 @@ if ( ! defined( 'ABSPATH' ) ) {
 	exit;
 }
 
-define( 'HOGELANDLINUX_VERSION', '1.0.1' );
+define( 'HOGELANDLINUX_VERSION', '1.1.0' );
 define( 'HOGELANDLINUX_URL', get_template_directory_uri() );
 define( 'HOGELANDLINUX_PATH', get_template_directory() );
 
@@ -23,6 +23,8 @@ if ( ! function_exists( 'hogelandlinux_setup' ) ) {
 		add_theme_support( 'title-tag' );
 		add_theme_support( 'post-thumbnails' );
 		add_theme_support( 'customize-selective-refresh-widgets' );
+		add_theme_support( 'editor-styles' );
+		add_editor_style( array( 'assets/css/style.css', 'assets/css/patterns.css' ) );
 		add_theme_support(
 			'html5',
 			array(
@@ -57,6 +59,13 @@ function hogelandlinux_scripts() {
 		HOGELANDLINUX_VERSION
 	);
 
+	wp_enqueue_style(
+		'hogelandlinux-patterns',
+		HOGELANDLINUX_URL . '/assets/css/patterns.css',
+		array( 'hogelandlinux-style' ),
+		HOGELANDLINUX_VERSION
+	);
+
 	wp_enqueue_script(
 		'hogelandlinux-navigation',
 		HOGELANDLINUX_URL . '/assets/js/main.js',
@@ -379,3 +388,36 @@ function hogelandlinux_shortcode_disclaimer( $atts, $content = null ) {
 	return '<details class="disclaimer"><summary>' . esc_html( $atts['summary'] ) . '</summary><div class="disclaimer-body">' . do_shortcode( $content ) . '</div></details>';
 }
 add_shortcode( 'disclaimer', 'hogelandlinux_shortcode_disclaimer' );
+
+/**
+ * Register custom button block styles.
+ */
+function hogelandlinux_register_block_styles() {
+	register_block_style(
+		'core/button',
+		array(
+			'name'  => 'hl-primary',
+			'label' => __( 'Hogeland Primary', 'hogelandlinux' ),
+		)
+	);
+	register_block_style(
+		'core/button',
+		array(
+			'name'  => 'hl-secondary',
+			'label' => __( 'Hogeland Secondary', 'hogelandlinux' ),
+		)
+	);
+	register_block_style(
+		'core/button',
+		array(
+			'name'  => 'hl-on-dark',
+			'label' => __( 'Hogeland On Dark', 'hogelandlinux' ),
+		)
+	);
+}
+add_action( 'init', 'hogelandlinux_register_block_styles' );
+
+/**
+ * Block patterns (Gutenberg).
+ */
+require HOGELANDLINUX_PATH . '/inc/block-patterns.php';

wpfiles/wp-content/themes/hogelandlinux/inc/block-patterns.php

@@ -0,0 +1,836 @@
+<?php
+/**
+ * Hogeland Linux block patterns.
+ *
+ * Registering via PHP (instead of the patterns/ directory) lets us inject the
+ * theme's real asset URLs into image blocks.
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Render one of the theme's design sections for use in patterns.
+ */
+/**
+ * Register all block patterns.
+ */
+function hogelandlinux_register_patterns() {
+	$asset = HOGELANDLINUX_URL . '/assets/images';
+
+	$patterns = array();
+
+	/* ------------------------------------------------------------------
+	   1. Home hero
+	------------------------------------------------------------------ */
+	$patterns['hero-home'] = array(
+		'title'       => __( 'Hero — Home', 'hogelandlinux' ),
+		'description' => __( 'Grote openingssectie voor de homepage met titel, subtitel en actieknoppen.', 'hogelandlinux' ),
+		'categories'  => array( 'hero', 'call-to-action' ),
+		'content'     => <<<HTML
+<!-- wp:group {"className":"hl-section hl-hero"} -->
+<div class="wp-block-group hl-section hl-hero">
+	<!-- wp:group {"className":"hl-container"} -->
+	<div class="wp-block-group hl-container">
+		<!-- wp:heading {"textAlign":"center","level":1,"className":"hl-hero__title"} -->
+		<h1 class="wp-block-heading has-text-align-center hl-hero__title">Geef uw computer een tweede leven</h1>
+		<!-- /wp:heading -->
+		<!-- wp:paragraph {"align":"center","className":"hl-hero__subtitle"} -->
+		<p class="has-text-align-center hl-hero__subtitle">Windows 10-ondersteuning eindigt binnenkort? Ik help u graag overstappen. Ontdek hoe Linux uw hardware nieuw leven kan geven.</p>
+		<!-- /wp:paragraph -->
+		<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
+		<div class="wp-block-buttons">
+			<!-- wp:button {"className":"is-style-hl-primary"} -->
+			<div class="wp-block-button is-style-hl-primary"><a class="wp-block-button__link wp-element-button">&darr; Meer weten</a></div>
+			<!-- /wp:button -->
+			<!-- wp:button {"className":"is-style-hl-secondary"} -->
+			<div class="wp-block-button is-style-hl-secondary"><a class="wp-block-button__link wp-element-button">Gratis advies</a></div>
+			<!-- /wp:button -->
+		</div>
+		<!-- /wp:buttons -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
+HTML,
+	);
+
+	/* ------------------------------------------------------------------
+	   2. Page hero
+	------------------------------------------------------------------ */
+	$patterns['hero-page'] = array(
+		'title'       => __( 'Hero — Pagina', 'hogelandlinux' ),
+		'description' => __( 'Kleine hero bovenaan een pagina met titel en intro.', 'hogelandlinux' ),
+		'categories'  => array( 'hero' ),
+		'content'     => <<<HTML
+<!-- wp:group {"className":"hl-section hl-page-hero"} -->
+<div class="wp-block-group hl-section hl-page-hero">
+	<!-- wp:group {"className":"hl-container"} -->
+	<div class="wp-block-group hl-container">
+		<!-- wp:heading {"textAlign":"center","level":1,"className":"hl-page-hero__title"} -->
+		<h1 class="wp-block-heading has-text-align-center hl-page-hero__title">Pagina-titel</h1>
+		<!-- /wp:heading -->
+		<!-- wp:paragraph {"align":"center","className":"hl-page-hero__subtitle"} -->
+		<p class="has-text-align-center hl-page-hero__subtitle">Korte introductie van deze pagina.</p>
+		<!-- /wp:paragraph -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
+HTML,
+	);
+
+	/* ------------------------------------------------------------------
+	   3. Benefits
+	------------------------------------------------------------------ */
+	$patterns['benefits'] = array(
+		'title'       => __( 'Voordelen van Linux', 'hogelandlinux' ),
+		'description' => __( 'Witte sectie met zes voordelenkaarten.', 'hogelandlinux' ),
+		'categories'  => array( 'cards' ),
+		'content'     => <<<HTML
+<!-- wp:group {"className":"hl-section hl-section--white"} -->
+<div class="wp-block-group hl-section hl-section--white">
+	<!-- wp:group {"className":"hl-container"} -->
+	<div class="wp-block-group hl-container">
+		<!-- wp:heading {"textAlign":"center"} -->
+		<h2 class="wp-block-heading has-text-align-center">Waarom Linux kiezen?</h2>
+		<!-- /wp:heading -->
+		<!-- wp:columns {"className":"hl-card-grid"} -->
+		<div class="wp-block-columns hl-card-grid">
+			<!-- wp:column {"className":"hl-card hl-card--benefit"} -->
+			<div class="wp-block-column hl-card hl-card--benefit">
+				<!-- wp:paragraph {"className":"hl-card-icon"} -->
+				<p class="hl-card-icon">&#128737;&#65039;</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">Veilig en betrouwbaar</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Beschermd tegen virussen en zonder storende, onverwachte updates. U houdt de controle over uw computer.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-card--benefit"} -->
+			<div class="wp-block-column hl-card hl-card--benefit">
+				<!-- wp:paragraph {"className":"hl-card-icon"} -->
+				<p class="hl-card-icon">&#128176;</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">Helemaal gratis</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Geen licenties of abonnementen nodig. Linux en de meeste programma&rsquo;s zijn kosteloos.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-card--benefit"} -->
+			<div class="wp-block-column hl-card hl-card--benefit">
+				<!-- wp:paragraph {"className":"hl-card-icon"} -->
+				<p class="hl-card-icon">&#128260;</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">Geschikt voor oudere computers</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Ook een computer die al jaren meegaat kan met Linux weer soepel draaien.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-card--benefit"} -->
+			<div class="wp-block-column hl-card hl-card--benefit">
+				<!-- wp:paragraph {"className":"hl-card-icon"} -->
+				<p class="hl-card-icon">&#127793;</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">Beter voor het milieu</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Door langer met uw computer te doen voorkomt u elektronisch afval (e-waste). Goed voor uw portemonnee en voor de planeet.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-card--benefit"} -->
+			<div class="wp-block-column hl-card hl-card--benefit">
+				<!-- wp:paragraph {"className":"hl-card-icon"} -->
+				<p class="hl-card-icon">&#128274;</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">Uw privacy blijft van uzelf</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Geen verborgen gegevensverzameling of tracking.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-card--benefit"} -->
+			<div class="wp-block-column hl-card hl-card--benefit">
+				<!-- wp:paragraph {"className":"hl-card-icon"} -->
+				<p class="hl-card-icon">&#9889;</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">Sneller werken</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Linux start vlot op en voelt vaak lichter aan dan andere systemen.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
+HTML,
+	);
+
+	/* ------------------------------------------------------------------
+	   4. Windows 10 EOL (incl. stats)
+	------------------------------------------------------------------ */
+	$patterns['windows-eol'] = array(
+		'title'       => __( 'Windows 10 einde van ondersteuning', 'hogelandlinux' ),
+		'description' => __( 'Sectie over het einde van Windows 10-ondersteuning met afbeelding, lijst, highlight en statistieken.', 'hogelandlinux' ),
+		'categories'  => array( 'featured' ),
+		'content'     => <<<HTML
+<!-- wp:group {"className":"hl-section hl-section--tint"} -->
+<div class="wp-block-group hl-section hl-section--tint">
+	<!-- wp:group {"className":"hl-container"} -->
+	<div class="wp-block-group hl-container">
+		<!-- wp:heading {"textAlign":"center"} -->
+		<h2 class="wp-block-heading has-text-align-center">Windows 10-ondersteuning eindigt</h2>
+		<!-- /wp:heading -->
+		<!-- wp:columns {"className":"hl-eol-col"} -->
+		<div class="wp-block-columns hl-eol-col">
+			<!-- wp:column {"className":"hl-eol-image"} -->
+			<div class="wp-block-column hl-eol-image">
+				<!-- wp:image {"sizeSlug":"full"} -->
+				<figure class="wp-block-image size-full"><img src="$asset/clippy.png" alt="Clippy adviseert om Linux te gebruiken"/></figure>
+				<!-- /wp:image -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column -->
+			<div class="wp-block-column">
+				<!-- wp:paragraph -->
+				<p>Microsoft stopt de ondersteuning voor Windows 10 in <strong>oktober 2025</strong>. Dit betekent:</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:list {"className":"hl-eol-list"} -->
+				<ul class="wp-block-list hl-eol-list"><li>&#10060; Geen beveiligingsupdates meer</li><li>&#10060; Geen technische ondersteuning</li><li>&#10060; Uw computer wordt kwetsbaar voor cyberaanvallen</li><li>&#10060; Mogelijk niet meer compatibel met nieuwe software</li></ul>
+				<!-- /wp:list -->
+				<!-- wp:paragraph {"className":"hl-highlight"} -->
+				<p class="hl-highlight">Maar u hoeft geen nieuwe computer te kopen! Linux biedt een modern, veilig alternatief dat perfect werkt op uw huidige hardware.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+		<!-- wp:columns {"className":"hl-stats"} -->
+		<div class="wp-block-columns hl-stats">
+			<!-- wp:column {"className":"hl-stat"} -->
+			<div class="wp-block-column hl-stat">
+				<!-- wp:paragraph {"className":"hl-stat__icon"} -->
+				<p class="hl-stat__icon">&#128187;</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:heading {"level":3,"className":"hl-stat__number"} -->
+				<h3 class="wp-block-heading hl-stat__number">1+ miljard</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph {"className":"hl-stat__label"} -->
+				<p class="hl-stat__label">Windows 10 computers wereldwijd</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-stat"} -->
+			<div class="wp-block-column hl-stat">
+				<!-- wp:paragraph {"className":"hl-stat__icon"} -->
+				<p class="hl-stat__icon">&#128465;&#65039;</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:heading {"level":3,"className":"hl-stat__number"} -->
+				<h3 class="wp-block-heading hl-stat__number">240 miljoen ton</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph {"className":"hl-stat__label"} -->
+				<p class="hl-stat__label">Potenti&euml;le e-waste zonder migratie</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-stat"} -->
+			<div class="wp-block-column hl-stat">
+				<!-- wp:paragraph {"className":"hl-stat__icon"} -->
+				<p class="hl-stat__icon">&#128274;</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:heading {"level":3,"className":"hl-stat__number"} -->
+				<h3 class="wp-block-heading hl-stat__number">0 updates</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph {"className":"hl-stat__label"} -->
+				<p class="hl-stat__label">Na oktober 2025</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
+HTML,
+	);
+
+	/* ------------------------------------------------------------------
+	   5. Steps (Mijn aanpak)
+	------------------------------------------------------------------ */
+	$patterns['steps'] = array(
+		'title'       => __( 'Mijn aanpak (stappen)', 'hogelandlinux' ),
+		'description' => __( 'Witte sectie met genummerde stappenkaarten.', 'hogelandlinux' ),
+		'categories'  => array( 'cards' ),
+		'content'     => <<<HTML
+<!-- wp:group {"className":"hl-section hl-section--white"} -->
+<div class="wp-block-group hl-section hl-section--white">
+	<!-- wp:group {"className":"hl-container"} -->
+	<div class="wp-block-group hl-container">
+		<!-- wp:heading {"textAlign":"center"} -->
+		<h2 class="wp-block-heading has-text-align-center">Mijn aanpak</h2>
+		<!-- /wp:heading -->
+		<!-- wp:columns {"className":"hl-card-grid hl-steps-grid"} -->
+		<div class="wp-block-columns hl-card-grid hl-steps-grid">
+			<!-- wp:column {"className":"hl-card hl-card--service"} -->
+			<div class="wp-block-column hl-card hl-card--service">
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">1. Kennismaking (gratis)</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Korte intake: wensen, hardware en gebruik. Samen kiezen we een route.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-card--service"} -->
+			<div class="wp-block-column hl-card hl-card--service">
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">2. Proefstart</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Linux live vanaf USB zodat u ziet hoe het werkt op uw pc.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-card--service"} -->
+			<div class="wp-block-column hl-card hl-card--service">
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">3. Installatie</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Veilig, met updates, codecs, printer, Nederlandse taal en basissoftware.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-card--service"} -->
+			<div class="wp-block-column hl-card hl-card--service">
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">4. Migratie</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Bestanden, foto&rsquo;s, documenten en favorieten overzetten.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-card--service"} -->
+			<div class="wp-block-column hl-card hl-card--service">
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">5. Uitleg &amp; nazorg</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Korte training, daarna laagdrempelig bereikbaar voor vragen.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
+HTML,
+	);
+
+	/* ------------------------------------------------------------------
+	   6. Distributions
+	------------------------------------------------------------------ */
+	$patterns['distributions'] = array(
+		'title'       => __( 'Linux-distributies', 'hogelandlinux' ),
+		'description' => __( 'Getinte sectie met zes distributiekaarten.', 'hogelandlinux' ),
+		'categories'  => array( 'cards' ),
+		'content'     => <<<HTML
+<!-- wp:group {"className":"hl-section hl-section--tint"} -->
+<div class="wp-block-group hl-section hl-section--tint">
+	<!-- wp:group {"className":"hl-container"} -->
+	<div class="wp-block-group hl-container">
+		<!-- wp:heading {"textAlign":"center"} -->
+		<h2 class="wp-block-heading has-text-align-center">Welke Linux past bij u?</h2>
+		<!-- /wp:heading -->
+		<!-- wp:paragraph {"align":"center","className":"hl-section-subtitle"} -->
+		<p class="has-text-align-center hl-section-subtitle">Er zijn veel Linux-distributies, elk met hun eigen voordelen. Ik help u graag de perfecte keuze te maken.</p>
+		<!-- /wp:paragraph -->
+		<!-- wp:columns {"className":"hl-card-grid"} -->
+		<div class="wp-block-columns hl-card-grid">
+			<!-- wp:column {"className":"hl-card hl-distro-card"} -->
+			<div class="wp-block-column hl-card hl-distro-card">
+				<!-- wp:group {"className":"hl-distro-head"} -->
+				<div class="wp-block-group hl-distro-head">
+					<!-- wp:image {"sizeSlug":"full","className":"size-full"} -->
+					<figure class="wp-block-image size-full"><img src="$asset/mint.svg" alt="Linux Mint"/></figure>
+					<!-- /wp:image -->
+					<!-- wp:heading {"level":3} -->
+					<h3 class="wp-block-heading">Linux Mint</h3>
+					<!-- /wp:heading -->
+				</div>
+				<!-- /wp:group -->
+				<!-- wp:paragraph {"className":"hl-distro-tag"} -->
+				<p class="hl-distro-tag">Windows-achtig</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:paragraph -->
+				<p>Ziet er vertrouwd uit voor Windows-gebruikers. Stabiel en betrouwbaar.</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:paragraph {"className":"hl-distro-features"} -->
+				<p class="hl-distro-features"><strong>Ideaal voor:</strong> Windows-migratie, ouderen, conservatieve gebruikers.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-distro-card"} -->
+			<div class="wp-block-column hl-card hl-distro-card">
+				<!-- wp:group {"className":"hl-distro-head"} -->
+				<div class="wp-block-group hl-distro-head">
+					<!-- wp:image {"sizeSlug":"full","className":"size-full"} -->
+					<figure class="wp-block-image size-full"><img src="$asset/ubuntu.png" alt="Ubuntu"/></figure>
+					<!-- /wp:image -->
+					<!-- wp:heading {"level":3} -->
+					<h3 class="wp-block-heading">Ubuntu</h3>
+					<!-- /wp:heading -->
+				</div>
+				<!-- /wp:group -->
+				<!-- wp:paragraph {"className":"hl-distro-tag"} -->
+				<p class="hl-distro-tag">Populair</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:paragraph -->
+				<p>Perfect voor beginners die van Windows komen. Gebruiksvriendelijk met veel ondersteuning.</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:paragraph {"className":"hl-distro-features"} -->
+				<p class="hl-distro-features"><strong>Ideaal voor:</strong> beginners, kantoorwerk, algemeen gebruik.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-distro-card"} -->
+			<div class="wp-block-column hl-card hl-distro-card">
+				<!-- wp:group {"className":"hl-distro-head"} -->
+				<div class="wp-block-group hl-distro-head">
+					<!-- wp:image {"sizeSlug":"full","className":"size-full"} -->
+					<figure class="wp-block-image size-full"><img src="$asset/popos.svg" alt="Pop!_OS"/></figure>
+					<!-- /wp:image -->
+					<!-- wp:heading {"level":3} -->
+					<h3 class="wp-block-heading">Pop!_OS</h3>
+					<!-- /wp:heading -->
+				</div>
+				<!-- /wp:group -->
+				<!-- wp:paragraph {"className":"hl-distro-tag"} -->
+				<p class="hl-distro-tag">Gaming</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:paragraph -->
+				<p>Gemaakt door System76. Uitstekend voor gaming en creatief werk.</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:paragraph {"className":"hl-distro-features"} -->
+				<p class="hl-distro-features"><strong>Ideaal voor:</strong> gamers, ontwikkelaars, jongeren.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-distro-card"} -->
+			<div class="wp-block-column hl-card hl-distro-card">
+				<!-- wp:group {"className":"hl-distro-head"} -->
+				<div class="wp-block-group hl-distro-head">
+					<!-- wp:image {"sizeSlug":"full","className":"size-full"} -->
+					<figure class="wp-block-image size-full"><img src="$asset/elementary.png" alt="Elementary OS"/></figure>
+					<!-- /wp:image -->
+					<!-- wp:heading {"level":3} -->
+					<h3 class="wp-block-heading">Elementary OS</h3>
+					<!-- /wp:heading -->
+				</div>
+				<!-- /wp:group -->
+				<!-- wp:paragraph {"className":"hl-distro-tag"} -->
+				<p class="hl-distro-tag">Mooi</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:paragraph -->
+				<p>Prachtig ontwerp ge&iuml;nspireerd door macOS. Eenvoudig en elegant.</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:paragraph {"className":"hl-distro-features"} -->
+				<p class="hl-distro-features"><strong>Ideaal voor:</strong> Mac-gebruikers, designers, stijlbewuste mensen.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-distro-card"} -->
+			<div class="wp-block-column hl-card hl-distro-card">
+				<!-- wp:group {"className":"hl-distro-head"} -->
+				<div class="wp-block-group hl-distro-head">
+					<!-- wp:image {"sizeSlug":"full","className":"size-full"} -->
+					<figure class="wp-block-image size-full"><img src="$asset/fedora.png" alt="Fedora"/></figure>
+					<!-- /wp:image -->
+					<!-- wp:heading {"level":3} -->
+					<h3 class="wp-block-heading">Fedora</h3>
+					<!-- /wp:heading -->
+				</div>
+				<!-- /wp:group -->
+				<!-- wp:paragraph {"className":"hl-distro-tag"} -->
+				<p class="hl-distro-tag">Geavanceerd</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:paragraph -->
+				<p>Nieuwste technologie&euml;n en functies. Voor technische gebruikers.</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:paragraph {"className":"hl-distro-features"} -->
+				<p class="hl-distro-features"><strong>Ideaal voor:</strong> ontwikkelaars, IT-professionals, tech-enthousiastelingen.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-distro-card"} -->
+			<div class="wp-block-column hl-card hl-distro-card">
+				<!-- wp:group {"className":"hl-distro-head"} -->
+				<div class="wp-block-group hl-distro-head">
+					<!-- wp:image {"sizeSlug":"full","className":"size-full"} -->
+					<figure class="wp-block-image size-full"><img src="$asset/garuda.svg" alt="Garuda Linux"/></figure>
+					<!-- /wp:image -->
+					<!-- wp:heading {"level":3} -->
+					<h3 class="wp-block-heading">Garuda Linux</h3>
+					<!-- /wp:heading -->
+				</div>
+				<!-- /wp:group -->
+				<!-- wp:paragraph {"className":"hl-distro-tag"} -->
+				<p class="hl-distro-tag">Prestaties</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:paragraph -->
+				<p>Arch-gebaseerd met extreme prestaties. Prachtig ontwerp en gaming-geoptimaliseerd.</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:paragraph {"className":"hl-distro-features"} -->
+				<p class="hl-distro-features"><strong>Ideaal voor:</strong> powergebruikers, gamers, prestatie-enthousiasten.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
+HTML,
+	);
+
+	/* ------------------------------------------------------------------
+	   7. Services
+	------------------------------------------------------------------ */
+	$patterns['services'] = array(
+		'title'       => __( 'Mijn diensten', 'hogelandlinux' ),
+		'description' => __( 'Witte sectie met vier servicekaarten.', 'hogelandlinux' ),
+		'categories'  => array( 'cards' ),
+		'content'     => <<<HTML
+<!-- wp:group {"className":"hl-section hl-section--white"} -->
+<div class="wp-block-group hl-section hl-section--white">
+	<!-- wp:group {"className":"hl-container"} -->
+	<div class="wp-block-group hl-container">
+		<!-- wp:heading {"textAlign":"center"} -->
+		<h2 class="wp-block-heading has-text-align-center">Mijn diensten</h2>
+		<!-- /wp:heading -->
+		<!-- wp:columns {"className":"hl-card-grid"} -->
+		<div class="wp-block-columns hl-card-grid">
+			<!-- wp:column {"className":"hl-card hl-card--service"} -->
+			<div class="wp-block-column hl-card hl-card--service">
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">Gratis advies</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Ik bekijk uw huidige computer en adviseer over de beste Linux-distributie en aanpak.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-card--service"} -->
+			<div class="wp-block-column hl-card hl-card--service">
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">Installatieservice</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Professionele Linux-installatie met basissoftware, updates en drivers waar nodig.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-card--service"} -->
+			<div class="wp-block-column hl-card hl-card--service">
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">Datamigratie</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Overzetten van bestanden, documenten en foto&rsquo;s van uw oude systeem naar Linux.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-card--service"} -->
+			<div class="wp-block-column hl-card hl-card--service">
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">Training en ondersteuning</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Uitleg en begeleiding zodat u direct prettig aan de slag kunt met Linux.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
+HTML,
+	);
+
+	/* ------------------------------------------------------------------
+	   8. Features (Linux in actie)
+	------------------------------------------------------------------ */
+	$patterns['features'] = array(
+		'title'       => __( 'Linux in actie', 'hogelandlinux' ),
+		'description' => __( 'Getinte sectie met drie showcasekaarten met afbeelding, titel en tekst.', 'hogelandlinux' ),
+		'categories'  => array( 'media', 'cards' ),
+		'content'     => <<<HTML
+<!-- wp:group {"className":"hl-section hl-section--tint"} -->
+<div class="wp-block-group hl-section hl-section--tint">
+	<!-- wp:group {"className":"hl-container"} -->
+	<div class="wp-block-group hl-container">
+		<!-- wp:heading {"textAlign":"center"} -->
+		<h2 class="wp-block-heading has-text-align-center">Linux in actie</h2>
+		<!-- /wp:heading -->
+		<!-- wp:paragraph {"align":"center","className":"hl-section-subtitle"} -->
+		<p class="has-text-align-center hl-section-subtitle">Zie hoe Linux eruitziet en werkt in de praktijk</p>
+		<!-- /wp:paragraph -->
+		<!-- wp:columns {"className":"hl-card-grid"} -->
+		<div class="wp-block-columns hl-card-grid">
+			<!-- wp:column {"className":"hl-card hl-feature-card"} -->
+			<div class="wp-block-column hl-card hl-feature-card">
+				<!-- wp:image {"sizeSlug":"large"} -->
+				<figure class="wp-block-image size-large"><img src="$asset/Zorin-17-desktop.webp" alt="Zorin OS 17 Desktop"/></figure>
+				<!-- /wp:image -->
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">Moderne desktopinterface</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Ziet er vertrouwd uit, werkt snel en stabiel. Ideaal voor dagelijks gebruik.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-feature-card"} -->
+			<div class="wp-block-column hl-card hl-feature-card">
+				<!-- wp:image {"sizeSlug":"large"} -->
+				<figure class="wp-block-image size-large"><img src="$asset/LinuxMintCinnamonSoftwareManager.webp" alt="Linux Mint Softwarebeheer"/></figure>
+				<!-- /wp:image -->
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">Eenvoudig software installeren</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Duizenden gratis programma&rsquo;s met &eacute;&eacute;n klik via Softwarebeheer.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-feature-card"} -->
+			<div class="wp-block-column hl-card hl-feature-card">
+				<!-- wp:image {"sizeSlug":"large"} -->
+				<figure class="wp-block-image size-large"><img src="$asset/GamingBenchmarkLinuxvsWindows.webp" alt="Gamingprestaties Linux versus Windows"/></figure>
+				<!-- /wp:image -->
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">Gamingprestaties</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Prima geschikt voor gaming dankzij moderne drivers en optimalisaties.</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
+HTML,
+	);
+
+	/* ------------------------------------------------------------------
+	   9. Call to action
+	------------------------------------------------------------------ */
+	$patterns['cta'] = array(
+		'title'       => __( 'Call to action', 'hogelandlinux' ),
+		'description' => __( 'Donkergroene sectie met oproep en knop.', 'hogelandlinux' ),
+		'categories'  => array( 'call-to-action' ),
+		'content'     => <<<HTML
+<!-- wp:group {"className":"hl-section hl-section--brand hl-cta"} -->
+<div class="wp-block-group hl-section hl-section--brand hl-cta">
+	<!-- wp:group {"className":"hl-container"} -->
+	<div class="wp-block-group hl-container">
+		<!-- wp:heading {"textAlign":"center"} -->
+		<h2 class="wp-block-heading has-text-align-center">Klaar voor de overstap?</h2>
+		<!-- /wp:heading -->
+		<!-- wp:paragraph {"align":"center"} -->
+		<p class="has-text-align-center">Laat uw computer niet eindigen als e-waste. Geef hem een tweede leven met Linux - ik help u graag.</p>
+		<!-- /wp:paragraph -->
+		<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
+		<div class="wp-block-buttons">
+			<!-- wp:button {"className":"is-style-hl-on-dark"} -->
+			<div class="wp-block-button is-style-hl-on-dark"><a class="wp-block-button__link wp-element-button">Neem contact op</a></div>
+			<!-- /wp:button -->
+		</div>
+		<!-- /wp:buttons -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
+HTML,
+	);
+
+	/* ------------------------------------------------------------------
+	   10. Disclaimer
+	------------------------------------------------------------------ */
+	$patterns['disclaimer'] = array(
+		'title'       => __( 'Back-updisclaimer', 'hogelandlinux' ),
+		'description' => __( 'Inklapbare disclaimer over back-ups.', 'hogelandlinux' ),
+		'categories'  => array( 'text' ),
+		'content'     => <<<HTML
+<!-- wp:group {"className":"hl-section hl-section--white"} -->
+<div class="wp-block-group hl-section hl-section--white">
+	<!-- wp:group {"className":"hl-container"} -->
+	<div class="wp-block-group hl-container">
+		<!-- wp:heading {"textAlign":"center"} -->
+		<h2 class="wp-block-heading has-text-align-center">Belangrijk over back-ups</h2>
+		<!-- /wp:heading -->
+		<!-- wp:html -->
+<details class="hl-disclaimer">
+	<summary>Lees de back-updisclaimer</summary>
+	<div class="hl-disclaimer__body">
+		<p>Ik lever een Linux-installatie- en migratieservice. <strong>Back-ups maken en bewaren is in principe de verantwoordelijkheid van de klant.</strong> Als extra service kan ik, op uw verzoek, data kopi&euml;ren naar door u aangeleverde USB-sticks of een externe schijf.</p>
+		<p>Hoewel ik zorgvuldig werk, kan er bij datakopie of migratie altijd een risico op dataverlies bestaan. <strong>U blijft verantwoordelijk voor uw eigen data</strong>. Ik ben niet aansprakelijk voor verlies of beschadiging van gegevens.</p>
+	</div>
+</details>
+		<!-- /wp:html -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
+HTML,
+	);
+
+	/* ------------------------------------------------------------------
+	   11. Media & text (Over mij)
+	------------------------------------------------------------------ */
+	$patterns['media-text'] = array(
+		'title'       => __( 'Media en tekst', 'hogelandlinux' ),
+		'description' => __( 'Twee kolommen met foto en tekst, geschikt voor de Over mij-pagina.', 'hogelandlinux' ),
+		'categories'  => array( 'media' ),
+		'content'     => <<<HTML
+<!-- wp:group {"className":"hl-section hl-section--white"} -->
+<div class="wp-block-group hl-section hl-section--white">
+	<!-- wp:group {"className":"hl-container"} -->
+	<div class="wp-block-group hl-container">
+		<!-- wp:columns {"className":"hl-media-text"} -->
+		<div class="wp-block-columns hl-media-text">
+			<!-- wp:column {"width":"55%"} -->
+			<div class="wp-block-column" style="flex-basis:55%">
+				<!-- wp:paragraph -->
+				<p>Moi! Ik ben Bdnugget en ik help mensen in Het Hogeland om hun computers duurzaam, veilig en prettig te blijven gebruiken met Linux.</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:paragraph -->
+				<p>Linux gebruik ik al ruim 20 jaar - eerst uit nieuwsgierigheid, later uit overtuiging: het is veilig, snel, privacyvriendelijk en geeft je de regie over je eigen computer.</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:buttons -->
+				<div class="wp-block-buttons">
+					<!-- wp:button {"className":"is-style-hl-primary"} -->
+					<div class="wp-block-button is-style-hl-primary"><a class="wp-block-button__link wp-element-button">Neem contact op</a></div>
+					<!-- /wp:button -->
+				</div>
+				<!-- /wp:buttons -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"width":"45%"} -->
+			<div class="wp-block-column" style="flex-basis:45%">
+				<!-- wp:image {"sizeSlug":"large"} -->
+				<figure class="wp-block-image size-large"><img src="$asset/DutchOpen2024.jpg" alt="Foto bij grasbaanraces"/><figcaption class="wp-element-caption">Dutch Open 2024</figcaption></figure>
+				<!-- /wp:image -->
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
+HTML,
+	);
+
+	/* ------------------------------------------------------------------
+	   12. Contact info
+	------------------------------------------------------------------ */
+	$patterns['contact-info'] = array(
+		'title'       => __( 'Contactgegevens', 'hogelandlinux' ),
+		'description' => __( 'Witte sectie met contactgegevens en openingstijden.', 'hogelandlinux' ),
+		'categories'  => array( 'contact' ),
+		'content'     => <<<HTML
+<!-- wp:group {"className":"hl-section hl-section--white"} -->
+<div class="wp-block-group hl-section hl-section--white">
+	<!-- wp:group {"className":"hl-container"} -->
+	<div class="wp-block-group hl-container">
+		<!-- wp:columns {"className":"hl-card-grid"} -->
+		<div class="wp-block-columns hl-card-grid">
+			<!-- wp:column {"className":"hl-card hl-card--service"} -->
+			<div class="wp-block-column hl-card hl-card--service">
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">Adres</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Geen bezoekadres: ik doe uitsluitend huisbezoeken.</p>
+				<!-- /wp:paragraph -->
+				<!-- wp:paragraph -->
+				<p>Voorstraat 123<br>9967 AA Eenrum</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-card--service"} -->
+			<div class="wp-block-column hl-card hl-card--service">
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">Contact</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>E-mail: <a href="mailto:info@chemistry.software">info@chemistry.software</a></p>
+				<!-- /wp:paragraph -->
+				<!-- wp:paragraph -->
+				<p>KvK: 91927935</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<!-- wp:column {"className":"hl-card hl-card--service"} -->
+			<div class="wp-block-column hl-card hl-card--service">
+				<!-- wp:heading {"level":3} -->
+				<h3 class="wp-block-heading">Openingstijden</h3>
+				<!-- /wp:heading -->
+				<!-- wp:paragraph -->
+				<p>Maandag: 09:00 - 14:00 (op afspraak)<br>Dinsdag: 09:00 - 17:00 (op afspraak)<br>Woensdag: 09:00 - 14:00 (op afspraak)<br>Donderdag: 09:00 - 14:00 (op afspraak)<br>Vrijdag: gesloten</p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
+HTML,
+	);
+
+	foreach ( $patterns as $slug => $pattern ) {
+		register_block_pattern(
+			'hogelandlinux/' . $slug,
+			array(
+				'title'         => $pattern['title'],
+				'description'   => $pattern['description'],
+				'categories'    => $pattern['categories'],
+				'viewportWidth' => 1280,
+				'content'       => $pattern['content'],
+			)
+		);
+	}
+}
+add_action( 'init', 'hogelandlinux_register_patterns' );

wpfiles/wp-content/themes/hogelandlinux/page.php

@@ -1,10 +1,11 @@
 <?php
 /**
- * Universal page template: renders the editor content.
+ * Universal page template: renders the editor content full-width
+ * so block patterns control their own sections and backgrounds.
  *
- * Page hero is shown if the page has a title and there is no [hero] shortcode
- * already in the content. Any [hero] shortcode placed at the top of the editor
- * replaces this automatic hero.
+ * An automatic page hero (title + excerpt) is shown only when the content
+ * does not already include a hero ([hero] shortcode or a block pattern with
+ * the hl-hero / hl-page-hero class).
  */
 get_header();
 ?>
@@ -15,31 +16,29 @@ get_header();
 		the_post();
 
 		$content = get_the_content();
-		if ( false !== strpos( $content, '[hero' ) ) {
-			// Hero handled inside the content via shortcode.
-		} else {
+
+		$has_hero_pattern = ( false !== strpos( $content, 'hl-hero' ) )
+			|| ( false !== strpos( $content, 'hl-page-hero' ) );
+
+		if ( ! has_shortcode( $content, 'hero' ) && ! $has_hero_pattern ) {
 			?>
-			<section class="page-hero">
-				<div class="container">
-					<h1><?php the_title(); ?></h1>
+			<section class="hl-page-hero">
+				<div class="hl-container">
+					<h1 class="hl-page-hero__title"><?php the_title(); ?></h1>
 					<?php if ( has_excerpt() ) : ?>
-						<p><?php echo esc_html( get_the_excerpt() ); ?></p>
+						<p class="hl-page-hero__subtitle"><?php echo esc_html( get_the_excerpt() ); ?></p>
 					<?php endif; ?>
 				</div>
 			</section>
 			<?php
 		}
-		?>
 
-		<section class="section">
-			<div class="container">
-				<div class="entry-content">
-					<?php the_content(); ?>
-				</div>
-			</div>
-		</section>
-	<?php endwhile; ?>
+		echo '<div class="entry-content">';
+		the_content();
+		echo '</div>';
+	endwhile;
+	?>
 </main>
 
 <?php
-get_footer();
+get_footer();

wpfiles/wp-content/themes/hogelandlinux/theme.json

@@ -0,0 +1,49 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/theme.json",
+	"version": 3,
+	"settings": {
+		"layout": {
+			"contentSize": "1200px",
+			"wideSize": "1400px",
+			"allowEditing": true
+		},
+		"color": {
+			"defaultPalette": true,
+			"palette": [
+				{
+					"slug": "hl-green",
+					"name": "Hogeland groen",
+					"color": "#059669"
+				},
+				{
+					"slug": "hl-green-dark",
+					"name": "Hogeland donkergroen",
+					"color": "#047857"
+				},
+				{
+					"slug": "hl-green-light",
+					"name": "Hogeland lichtgroen",
+					"color": "#ecfdf5"
+				},
+				{
+					"slug": "hl-green-tint",
+					"name": "Hogeland tint",
+					"color": "#d1fae5"
+				},
+				{
+					"slug": "hl-ink",
+					"name": "Tekst donker",
+					"color": "#1f2937"
+				},
+				{
+					"slug": "hl-gray",
+					"name": "Tekst grijs",
+					"color": "#6b7280"
+				}
+			]
+		},
+		"typography": {
+			"fluid": true
+		}
+	}
+}