Repository: fdnd-agency/biebinbloei.nl
Pull request #417: cardSlides v2  (launch ready)
Author: login: Nazneen05x
Created: 2025-03-25T09:27:02Z | Merged: 2025-03-25T18:58:53Z

# Description

De cards zijn responsief.
Button focus state geïmplementeerd.
View transition geïmplementeerd.



## Type of change

Please delete options that are not relevant.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] This change requires a documentation update

# How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

- [ ] User test
- [ ] Accessibility test
- [ ] Performance test
- [x] Responsive Design test

# Checklist:

- [x] My code follows the style guidelines of this project
- [x] The code is accessible
- [ ] The code is performant
- [x] The code is responsive
- [ ] I have written meaningful commit messages
- [ ] I have performed a self-review of my code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation (README and/or Wiki)






Diff:
diff --git a/src/lib/atoms/buttons/button.svelte b/src/lib/atoms/buttons/button.svelte
index bd91d016..bb1f285b 100644
--- a/src/lib/atoms/buttons/button.svelte
+++ b/src/lib/atoms/buttons/button.svelte
@@ -2,17 +2,21 @@
 	export let href, buttonText, buttonClass, svgFill;
 </script>
 
-<a {href} class={buttonClass}>
-	{buttonText}
-	<span>
-		<svg class={svgFill} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 47">
-			<path
-				d="M40.492 18.788 8.942 1.034C4.944-1.218 0 1.673 0 6.262v34.704c0 4.537 4.842 7.433 8.84 5.285l31.549-16.948c4.167-2.239 4.225-8.195.103-10.515Z"
-				fill={svgFill}
-			/>
-		</svg>
-	</span>
-</a>
+<div class="button-wrapper">
+	<img src="/assets/blije Harry.svg" alt="" />
+
+	<a {href} class={buttonClass}>
+		{buttonText}
+		<span>
+			<svg class={svgFill} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 47">
+				<path
+					d="M40.492 18.788 8.942 1.034C4.944-1.218 0 1.673 0 6.262v34.704c0 4.537 4.842 7.433 8.84 5.285l31.549-16.948c4.167-2.239 4.225-8.195.103-10.515Z"
+					fill={svgFill}
+				/>
+			</svg>
+		</span>
+	</a>
+</div>
 
 <style>
 	/* button style */
@@ -31,6 +35,39 @@
 		font-size: 1em;
 		transition: ease-in 0.1s;
 		margin-top: 1em;
+		z-index: 2;
+	}
+
+	a:focus-visible {
+		background: var(--main-color-orange);
+		color: var(--text-color-black);
+	}
+
+	.button-wrapper {
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		align-items: center;
+	}
+
+	img {
+		position: absolute;
+		top: -18px;
+		left: 50%;
+		width: 3rem;
+		height: 3rem;
+		transform: translateX(-50%) translateY(8%);
+		opacity: 0;
+		z-index: 1;
+		transition: all 0.5s cubic-bezier(0.75, -0.5, 0, 1.75);
+	}
+
+	/* Animatie bij focus via Tab */
+	@media (prefers-reduced-motion: no-preference) {
+		.button-wrapper:has(a:focus-visible) img {
+			opacity: 1;
+			transform: translateX(-50%) translateY(-30%);
+		}
 	}
 
 	/* button variants */
@@ -85,4 +122,16 @@
 	.svg-brown {
 		--svg-fill: var(--main-color-brown);
 	}
+
+	@container slidecards (min-width: 64rem) {
+		a {
+			width: 14em;
+		}
+	}
+
+	@container slidecards (min-width: 100rem) {
+		a {
+			width: 14em;
+		}
+	}
 </style>
diff --git a/src/lib/atoms/content/cardslides-content.svelte b/src/lib/atoms/content/cardslides-content.svelte
index d785dabb..aea8825a 100644
--- a/src/lib/atoms/content/cardslides-content.svelte
+++ b/src/lib/atoms/content/cardslides-content.svelte
@@ -2,7 +2,7 @@
 	export let titleColor, paragraphColor, titleCard, paragraphCard, paragraphCard2;
 </script>
 
-<article>
+<div>
 	{#if titleCard}
 		<h2 class={titleColor}>{titleCard}</h2>
 	{/if}
@@ -14,9 +14,10 @@
 	{#if paragraphCard2}
 		<p class={paragraphColor}>{paragraphCard2}</p>
 	{/if}
-</article>
+</div>
 
 <style>
+	/* Mobile styling */
 	h2 {
 		line-height: 95%;
 		margin-bottom: 0.5em;
@@ -30,7 +31,6 @@
 	}
 
 	/* titleColor & paragraphColor variants */
-
 	.title-green,
 	.paragraph-green {
 		color: var(--main-color-green);
@@ -65,6 +65,7 @@
 		}
 
 		p {
+			margin-left: 3em;
 			max-width: 40ch;
 		}
 	}
@@ -81,4 +82,12 @@
 			margin: 0em 7em 0 4em;
 		}
 	}
+
+	/* Large desktop styling */
+	@container slidecards (min-width: 100em) {
+		p {
+			font-size: 1.3em;
+			margin: 0em 7em 0 2.1em;
+		}
+	}
 </style>
diff --git a/src/lib/atoms/content/cardslides-leaf.svelte b/src/lib/atoms/content/cardslides-leaf.svelte
index c536c72f..67113230 100644
--- a/src/lib/atoms/content/cardslides-leaf.svelte
+++ b/src/lib/atoms/content/cardslides-leaf.svelte
@@ -2,9 +2,17 @@
 	export let svgFill;
 </script>
 
-<article class={svgFill}></article>
+<!-- This file is a color custom property file for the leaf icons on the cards. I have assigned a class
+to the leaf icon so that I can give it different colors. In Hygraph, I have assigned the correct
+color to the leaf icon for each matching card. -->
+<div class={svgFill}></div>
 
 <style>
+	/* I have two colors for the leaf icons: orange and green. 
+	The geveltuin card only needs the green leaf icon. 
+	I have given each card a matching class name for the correct icon. 
+	In Hygraph, I have specified which icon belongs to which card. 
+	You can see this in Hygraph under content cardslides. */
 	.card-stekjes-svgFill::before,
 	.card-zaden-svgFill::before,
 	.card-groenebieb-svgFill::before {
@@ -42,4 +50,15 @@
 			transform: rotate(202deg);
 		}
 	}
+
+	@container slidecards (min-width: 100rem) {
+		.card-stekjes-svgFill::before,
+		.card-zaden-svgFill::before,
+		.card-gevel-svgFill::before,
+		.card-groenebieb-svgFill::before {
+			top: -3rem;
+			height: 30rem;
+			width: 30rem;
+		}
+	}
 </style>
diff --git a/src/lib/organisms/slide-cards.svelte b/src/lib/organisms/slide-cards.svelte
index 492700bc..fc68f2bd 100644
--- a/src/lib/organisms/slide-cards.svelte
+++ b/src/lib/organisms/slide-cards.svelte
@@ -7,33 +7,36 @@
 	{#if data?.cardSlides?.length}
 		{#each data.cardSlides as cardSlide}
 			<article class={cardSlide.cardStyles.backgroundColor}>
-				<header>
-					<CardslidesLeaf svgFill={cardSlide.leafStyles.svgFill} />
-					<Dot svgFill={cardSlide.svgStyles.svgFill} />
+				<div class="card-content">
+					<header>
+						<!-- Header of the card -->
+						<CardslidesLeaf svgFill={cardSlide.leafStyles.svgFill} />
+						<Dot svgFill={cardSlide.svgStyles.svgFill} />
+						<CardslidesContent
+							titleCard={cardSlide.titleCard}
+							titleColor={cardSlide.cardStyles.titleColor}
+						/>
+					</header>
+
 					<CardslidesContent
-						titleCard={cardSlide.titleCard}
-						titleColor={cardSlide.cardStyles.titleColor}
+						paragraphCard={cardSlide.paragraphCard}
+						paragraphCard2={cardSlide.paragraphCard2}
+						paragraphColor={cardSlide.cardStyles.paragraphColor}
 					/>
-				</header>
+
+					<div class="btn-container">
+						<Button
+							href={cardSlide.buttonStyles.href}
+							buttonText={cardSlide.buttonStyles.buttonText}
+							buttonClass={cardSlide.buttonStyles.buttonClass}
+							svgFill={cardSlide.buttonStyles.svgFill}
+						/>
+					</div>
+				</div>
 
 				<picture>
 					<img width="100" height="100" loading="lazy" src={cardSlide.imageCard.url} alt="" />
 				</picture>
-
-				<CardslidesContent
-					paragraphCard={cardSlide.paragraphCard}
-					paragraphCard2={cardSlide.paragraphCard2}
-					paragraphColor={cardSlide.cardStyles.paragraphColor}
-				/>
-
-				<div class="btn-container">
-					<Button
-						href={cardSlide.buttonStyles.href}
-						buttonText={cardSlide.buttonStyles.buttonText}
-						buttonClass={cardSlide.buttonStyles.buttonClass}
-						svgFill={cardSlide.buttonStyles.svgFill}
-					/>
-				</div>
 			</article>
 		{/each}
 	{:else}
@@ -42,45 +45,41 @@
 </section>
 
 <style>
+	/* Mobile styling */
 	.card-container {
 		container-type: inline-size;
 		container-name: slidecards;
 	}
 
 	article {
-		align-items: center;
-		position: relative;
-		padding: 2rem 1rem;
+		gap: 1rem;
+		z-index: 1;
 		bottom: 3rem;
+		display: flex;
 		margin: 0 auto;
-		z-index: 1;
 		overflow: hidden;
+		position: relative;
+		padding: 2rem 1rem;
+		align-items: center;
+		flex-direction: column-reverse;
 		border-radius: var(--border-bigCard);
 	}
 
-	img,
 	picture {
 		width: 100%;
 		height: 100%;
-		object-fit: cover;
-		border-radius: var(--border-bigCard);
-	}
-
-	/* backgroundColor variants */
-	.bg-green {
-		background-color: var(--card-color-green);
-	}
-
-	.bg-beige {
-		background-color: var(--main-color-beige);
-	}
-
-	.bg-brown {
-		background-color: var(--card-color-brown);
+		min-height: 300px;
+		position: relative;
 	}
 
-	.bg-orange {
-		background-color: var(--card-color-orange);
+	img {
+		top: 0;
+		right: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		position: absolute;
+		border-radius: var(--border-bigCard);
 	}
 
 	.error-message {
@@ -98,10 +97,6 @@
 			align-items: flex-start;
 		}
 
-		img {
-			height: 50vw;
-		}
-
 		.btn-container {
 			width: 14rem;
 			margin: 0rem 7rem 0 1rem;
@@ -131,7 +126,7 @@
 
 		.btn-container {
 			width: 14em;
-			margin: 0rem 7em 0 0;
+			margin: 0rem 7em 0 2rem;
 		}
 	}
 
@@ -143,10 +138,11 @@
 		}
 
 		article {
-			padding: 2rem 1rem;
 			width: 95vw;
 			display: grid;
-			grid-template-columns: 2fr 2fr;
+			align-items: start;
+			padding: 2rem 1rem;
+			grid-template-columns: 1fr 1fr;
 		}
 
 		article::before {
@@ -169,7 +165,34 @@
 
 		.btn-container {
 			width: 14rem;
-			margin: 0rem 7rem 0 4rem;
+			padding-top: 1rem;
+			margin: 0rem 7rem 0 4.5rem;
+		}
+		
+		/* scroll-driven-animations styling */
+		@media (prefers-reduced-motion: no-preference) {
+			@supports (animation-timeline: view()) {
+				article {
+					animation-timeline: view(inline);
+					animation: fancy-in;
+					animation-timeline: view();
+				}
+
+				article:first-of-type {
+					animation: none !important;
+				}
+
+				@keyframes fancy-in {
+					0% {
+						transform: translatey(25vw);
+					}
+
+					20% {
+						opacity: 1;
+						transform: none;
+					}
+				}
+			}
 		}
 	}
 
@@ -178,5 +201,38 @@
 			display: flex;
 			align-items: baseline;
 		}
+
+		article {
+			max-width: 1600px;
+		}
+
+		.btn-container {
+			width: 14rem;
+			padding-top: 1rem;
+			margin: 0rem 7rem 0 3rem;
+		}
+	}
+
+	/* Background custom Properties styling  */
+	/* backgroundColor variants */
+	.bg-green {
+		background-color: var(--card-color-green);
+	}
+
+	.bg-beige {
+		background-color: var(--main-color-beige);
+	}
+
+	.bg-brown {
+		background-color: var(--card-color-brown);
+	}
+
+	.bg-orange {
+		background-color: var(--card-color-orange);
+	}
+
+	.error-message {
+		font-size: 1.5rem;
+		color: var(--main-color-red);
 	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b946c288..997aa7bd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,52 @@
 <script>
 	export let data;
 	import { Menu, Footer } from '$lib/index.js';
+
+	import { onNavigate } from '$app/navigation';
+
+	onNavigate((navigation) => {
+		if (!document.startViewTransition) return;
+
+		return new Promise((resolve) => {
+			document.startViewTransition(async () => {
+				resolve();
+				await navigation.complete;
+			});
+		});
+	});
 </script>
 
 
 <Menu/>
 <slot />
 <Footer {data} />
+
+<style>
+	@keyframes strong-slide-in {
+		0% {
+			transform: translateY(40px);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes strong-slide-out {
+		0% {
+			transform: translateY(0);
+		}
+		100% {
+			transform: translateY(-20px);
+		}
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		:root::view-transition-old(root) {
+			animation: 600ms cubic-bezier(0.4, 0, 0.2, 1) both strong-slide-out;
+		}
+
+		:root::view-transition-new(root) {
+			animation: 600ms cubic-bezier(0.4, 0, 0.2, 1) 100ms both strong-slide-in;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/static/assets/blije Harry.svg b/static/assets/blije Harry.svg
new file mode 100644
index 00000000..43229e91
--- /dev/null
+++ b/static/assets/blije Harry.svg	
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Laag_1" data-name="Laag 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 530.68 594.47">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke-width: 13px;
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4 {
+        stroke-miterlimit: 10;
+      }
+
+      .cls-1, .cls-5 {
+        fill: #ae5447;
+      }
+
+      .cls-1, .cls-3, .cls-4 {
+        stroke: #010101;
+      }
+
+      .cls-6 {
+        fill: #010101;
+      }
+
+      .cls-2 {
+        stroke: #c17052;
+        stroke-width: 2.06px;
+      }
+
+      .cls-2, .cls-7 {
+        fill: #c17052;
+      }
+
+      .cls-8 {
+        fill: #db9363;
+      }
+
+      .cls-9 {
+        fill: #fffefe;
+      }
+
+      .cls-3 {
+        fill: #75a833;
+      }
+
+      .cls-3, .cls-4 {
+        stroke-width: 10px;
+      }
+
+      .cls-4 {
+        fill: #a9cb59;
+      }
+    </style>
+  </defs>
+  <g>
+    <path class="cls-5" d="M109.09,325.64s-.1.03-.12.04c0,0,0,0,0,0-13.72,3.79-23.98,6.11-26.18,6.63-28.24,6.68-49.38,17.72-49.38,17.72-17.81,9.3-21.92,15.54-23.28,17.8-5.78,9.6-8.43,24.37-2.74,28.76,5.75,4.42,14.3-6.14,42.45-17.8,18.04-7.48,44.99-15.76,53.81-28.12,2.78-3.89,4.26-8.19,4.26-8.19,1.99-6.46,1.68-12.78,1.18-16.84Z"/>
+    <path class="cls-6" d="M107.97,321.57c-9.26,2.79-18.75,4.8-28.14,7.11-12.36,3.03-24.44,7.13-36.17,12.05-12.81,5.38-28.07,11.87-36.26,23.56-5.03,7.18-8.23,17.42-7.22,26.19.81,7,5.74,12.76,13.16,10.96,7.18-1.74,13.86-6.94,20.29-10.36,11.59-6.16,23.76-10.72,35.93-15.54,11.31-4.48,23.31-9.11,32.63-17.16,9.53-8.23,12.47-20.61,11.1-32.74-.6-5.34-9.05-5.4-8.44,0,1.11,9.85-.49,19.54-8.2,26.39-7.43,6.6-17.44,10.58-26.54,14.25-9.78,3.95-19.73,7.47-29.33,11.86-8.36,3.82-16.22,8.48-24.32,12.8-1.72.92-3.88,2.33-5.89,2.47-.08,0-.36.02-.49-.1-1.13-1.02-1.42-2.53-1.59-4-.78-7.03,2.47-16.31,6.76-21.46,7.86-9.45,21.05-15.01,32.24-19.65,20.38-8.46,41.71-12.18,62.71-18.49,5.19-1.56,2.98-9.71-2.24-8.14Z"/>
+  </g>
+  <g>
+    <path class="cls-5" d="M336.41,506.45c16.67,4.55,36.75,13.08,37.59,30.34.37,7.48-3.12,15.85,1.19,21.97,7.85,11.14,31.02.69,36.54,13.15-3.51,10.58-17.07,13.12-28.19,13.89-10.84.75-21.68,1.5-32.53,2.25-6.75.47-14.28.68-19.38-3.76-4.91-4.27-5.88-11.77-4.09-18.03,1.79-6.26,5.86-11.57,9.83-16.72-6.74-12.12-13.49-24.24-20.23-36.36"/>
+    <path class="cls-6" d="M334.81,512.23c9.44,2.62,19.79,5.93,27.08,12.81,3.22,3.04,5.64,6.78,6.08,11.28.57,5.72-1.41,11.38-.79,17.12,1.15,10.67,9.55,15.71,19.39,16.87,5.53.65,17-1.34,19.98,4.63l-.6-4.62c-2.53,6.68-11.77,8.3-17.94,9.08-10.33,1.3-20.87,1.54-31.25,2.26-6.75.47-19.71,3.3-23.21-4.74-3.77-8.66,4.14-18.01,9.01-24.35,1.28-1.67.95-4.36,0-6.06-6.74-12.12-13.49-24.24-20.23-36.36-3.76-6.75-14.12-.7-10.36,6.06,6.74,12.12,13.49,24.24,20.23,36.36v-6.06c-6.12,7.95-12.22,16.89-11.4,27.43.74,9.51,6.72,17.31,16.19,19.47,10.58,2.41,22.49.05,33.16-.68,9.74-.67,20.06-.6,29.47-3.54,7.47-2.33,15.96-7.44,17.9-15.68,1.78-7.59-8.06-12.73-14.03-13.8-6.6-1.18-14.36.26-20.61-2.35-3.33-1.39-3.93-4.16-3.83-7.57.15-5.07,1.35-9.98.76-15.07-2.39-20.36-24.58-29.28-41.79-34.05-7.45-2.07-10.63,9.51-3.19,11.57h0Z"/>
+  </g>
+  <g>
+    <path class="cls-5" d="M421.36,325.64s.1.03.12.04c0,0,0,0,0,0,13.72,3.79,23.98,6.11,26.18,6.63,28.24,6.68,49.38,17.72,49.38,17.72,17.81,9.3,21.92,15.54,23.28,17.8,5.78,9.6,8.43,24.37,2.74,28.76-5.75,4.42-14.3-6.14-42.45-17.8-18.04-7.48-44.99-15.76-53.81-28.12-2.78-3.89-4.26-8.19-4.26-8.19-1.99-6.46-1.68-12.78-1.18-16.84Z"/>
+    <path class="cls-6" d="M420.24,329.71c18.89,5.68,38.18,9,56.67,16.09,12.38,4.75,26.12,10.43,35.89,19.6,4.38,4.11,6.91,9.63,8.36,15.71.77,3.23,2.01,9.11-.51,11.99-.52.6-1.39.3-3.18-.4-7.07-2.77-13.56-7.52-20.33-10.95-9.68-4.9-19.75-8.79-29.84-12.72-10.61-4.12-21.89-8.23-31.12-15.07-9.35-6.92-11.85-17.15-10.6-28.33.61-5.39-7.84-5.35-8.44,0-1.23,10.97.94,22.15,8.67,30.43,7.3,7.81,17.94,12.36,27.59,16.43,11.67,4.92,23.7,8.95,35.13,14.41,8.58,4.1,16.57,9.61,25.3,13.35,5.48,2.35,11.36,2.09,14.63-3.64,5.11-8.97.48-22.9-4.49-30.92-6.86-11.06-20.35-17.52-31.87-22.67s-23.76-9.59-36.11-12.95c-11.11-3.02-22.46-5.18-33.5-8.5-5.21-1.57-7.44,6.58-2.24,8.14Z"/>
+  </g>
+  <g>
+    <path class="cls-5" d="M180.29,504.2c-16.67,4.55-36.75,13.08-37.59,30.34-.37,7.48,3.12,15.85-1.19,21.97-7.85,11.14-31.02.69-36.54,13.15,3.51,10.58,17.07,13.12,28.19,13.89,10.84.75,21.68,1.5,32.53,2.25,6.75.47,14.28.68,19.38-3.76,4.91-4.27,5.88-11.77,4.09-18.03-1.79-6.26-5.86-11.57-9.83-16.72,6.74-12.12,13.49-24.24,20.23-36.36"/>
+    <path class="cls-6" d="M178.7,498.42c-15.51,4.3-34.36,11.44-40.39,27.9-1.5,4.1-1.81,8.47-1.45,12.8.33,3.93,2.32,10.37-.2,13.95-3.25,4.62-12.82,3.36-17.61,3.71-6.85.5-14.29,1.95-18.3,8.16-4.97,7.68,3.5,16.15,10.1,19.5,8.38,4.26,17.9,4.82,27.1,5.45,11.36.78,23,2.41,34.38,2.13,10.74-.26,20.72-5.4,23.08-16.65,2.5-11.9-3.96-22.08-10.91-31.1v6.06c6.74-12.12,13.49-24.24,20.23-36.36,3.76-6.75-6.6-12.81-10.36-6.06-6.74,12.12-13.49,24.24-20.23,36.36-.95,1.7-1.28,4.39,0,6.06,4.85,6.3,12.39,15.16,9.19,23.78s-16.35,5.79-23.39,5.31c-10.21-.7-20.55-1.01-30.72-2.2-6.3-.74-15.89-2.3-18.48-9.14l-.6,4.62c2.99-5.98,14.45-3.97,19.98-4.63,9.85-1.17,18.21-6.18,19.39-16.87.62-5.6-1.23-11.08-.82-16.65.34-4.69,2.75-8.57,6.11-11.74,7.28-6.88,17.64-10.19,27.08-12.81,7.43-2.06,4.28-13.64-3.19-11.57h0Z"/>
+  </g>
+  <rect class="cls-3" x="250.61" y="76.38" width="35.29" height="76.1"/>
+  <path class="cls-1" d="M86.9,151.33s-.04.03-.04.03c-2.1,1.75-2.51,4.6-2.66,5.77-2.16,16.71,0,24.17,0,30.46,0,4.68,3.79,8.47,8.47,8.47h6.47c4.81,0,8.62,3.93,8.46,8.74-.46,13.82-1.09,32.74-1.85,55-6.39,186.57-7.83,198.57,2.14,215.21,50.84,84.82,271.93,79.59,315.79,0,7-12.7,6.95-22.7,4.79-107.12-.84-32.82-2.13-82.01-3.86-142.83-.19-4.98-.39-9.96-.58-14.94-.19-4.8,3.66-8.8,8.46-8.8h24.44c.52,0,.93-.44.89-.96-.23-13.3-.46-26.61-.69-39.91-.07-4.02-3.26-7.29-7.28-7.44-50.12-1.95-358.81-5.07-362.95-1.68Z"/>
+  <g>
+    <g>
+      <g>
+        <path class="cls-7" d="M265.41,286.41c2.6-23.54,13.79-46.91,33.62-61.06,19.84-14.15,48.8-17.3,69.59-4.46,18.53,11.44,27.76,32.88,30.98,53.75,4.46,28.85-.57,58.63-11.79,85.74-11.22,27.11-28.47,51.68-48.42,73.72"/>
+        <path class="cls-7" d="M268.49,286.41c2.51-22.35,13.32-45.01,32.1-58.39,18.02-12.85,43.73-16.61,63.53-6.15,20.4,10.78,29.91,33.93,32.84,55.86,3.64,27.3-1.31,55.18-11.6,80.56-9.86,24.31-24.73,46.47-41.73,66.34-2.11,2.46-4.25,4.89-6.42,7.29-1.12,1.24-1.22,3.14,0,4.36,1.13,1.13,3.24,1.24,4.36,0,18.4-20.35,34.73-42.9,46.13-67.95,11.87-26.08,18.45-54.96,16.16-83.69-1.93-24.17-10.21-49.89-30.81-64.51-20-14.2-47.84-13-68.83-1.64s-35.75,34.85-40.49,58.73c-.6,3.04-1.06,6.11-1.4,9.2-.19,1.66,1.55,3.08,3.08,3.08,1.82,0,2.9-1.42,3.08-3.08h0Z"/>
+      </g>
+      <g>
+        <path class="cls-7" d="M262.48,286.41c-2.6-23.54-13.79-46.91-33.62-61.06-19.84-14.15-48.8-17.3-69.59-4.46-18.53,11.44-27.76,32.88-30.98,53.75-5.66,36.65,4.08,66.2,11.79,85.74,13.14,33.27,32.83,57.66,49.29,74"/>
+        <path class="cls-7" d="M265.57,286.41c-2.93-26.08-15.81-51.9-38.61-66.02s-52.31-15.22-73.33.63c-21.98,16.57-29.36,45.51-30.06,71.79s5.61,49.63,15.28,72.65c10.24,24.36,25.01,46.59,43.15,65.78,1.71,1.8,3.44,3.58,5.2,5.33,2.82,2.8,7.18-1.56,4.36-4.36-17.1-16.99-31.4-36.43-42.06-58.13-10.42-21.19-17.99-44.61-19.51-68.19-.88-13.72.02-27.76,3.47-41.1,2.97-11.49,7.97-22.72,15.92-31.56s18.71-14.73,30.72-16.66c11.55-1.86,24.15-.02,34.99,4.59,23.18,9.87,37.85,32.57,42.91,56.56.62,2.93,1.1,5.86,1.41,8.69.19,1.66,1.28,3.08,3.08,3.08,1.52,0,3.27-1.42,3.08-3.08h0Z"/>
+      </g>
+      <g>
+        <path class="cls-7" d="M189.38,434.39c13.03,10.14,27.51,22.74,42.19,38.16,14.68,15.42,26.45,30.39,35.78,43.75-.04-4.35,1.23-8.51,3.19-12.44,2.39-4.81,5.53-9.08,7.3-11.17,4.86-5.73,28.36-28.55,61.54-58.58"/>
+        <path class="cls-7" d="M187.2,436.57c23.72,18.47,45.28,39.69,64.01,63.21,4.68,5.88,9.17,11.92,13.48,18.08,1.68,2.41,5.75,1.68,5.75-1.56,0-4.62,1.62-8.91,3.83-12.91,1.77-3.19,3.85-6.33,5.95-8.76s4.56-4.87,6.91-7.23c9.74-9.76,19.79-19.21,29.88-28.6,8.13-7.56,16.31-15.06,24.54-22.51,1.24-1.12,1.14-3.23,0-4.36-1.23-1.23-3.12-1.12-4.36,0-13.67,12.37-27.22,24.87-40.55,37.6-6.97,6.66-14.19,13.25-20.57,20.49-6.27,7.12-11.8,16.56-11.81,26.28l5.75-1.56c-8.26-11.81-17.19-23.17-26.73-33.97-10.52-11.91-21.8-23.16-33.73-33.66-5.85-5.15-11.85-10.11-18-14.9-1.31-1.02-3.08-1.28-4.36,0-1.07,1.07-1.32,3.33,0,4.36h0Z"/>
+      </g>
+    </g>
+    <path class="cls-2" d="M336.32,434.11h-140.89c-3.76-1.67-9.21-4.59-14.58-9.57-5.97-5.54-9.34-11.29-11.16-15.06v-98.48c0-13.6,11.53-24.63,25.74-24.63h140.89c14.22,0,25.74,11.03,25.74,24.63v98.48c-4.27,5.3-9.56,11.07-16.08,16.83-3.29,2.91-6.53,5.5-9.66,7.8Z"/>
+  </g>
+  <path class="cls-8" d="M148.15,505.22c19.95,10.55,58.65,27.61,110.13,29.1,59.03,1.71,103.4-17.96,123.79-28.62-35.14,11.29-90.71,23.77-157.73,16.31-29.42-3.28-55.03-9.73-76.19-16.79Z"/>
+  <path class="cls-8" d="M453.2,197.88c-3.07.06-6.23.07-9.48,0-7.56-.16-14.69-.68-21.33-1.45-65.03-2.36-131.9-3.68-200.51-3.76-42.06-.05-83.44.37-124.13,1.2-3.18.03-6.37.05-9.55.08v-39.4h364.35c.22,14.44.44,28.89.66,43.33Z"/>
+  <path class="cls-4" d="M274.76,91.88S289.59-11.27,177.71,7.22c-111.88,18.48,84.79,107.21,84.79,107.21l12.25-22.54Z"/>
+  <path class="cls-3" d="M259.31,103.37s-16-79.74,81.35-79.74-75.73,102.28-75.73,102.28l-5.62-22.54Z"/>
+  <path class="cls-3" d="M285.01,147.7h-25.51c-11.72-13.25-9.61-31.28,0-38.39,6.57-4.87,16.72-4.67,25.51,0v38.39Z"/>
+  <path class="cls-8" d="M406.71,571.81c-1.44-.52-4.04-1.41-7.37-2.18-28.84-6.72-49.72,9.57-57.37,1.92-1.96-1.96-3.86-6.3-.46-17.47-3.96,2.93-6.31,6.07-7.64,8.18-1.92,3.06-6.47,10.32-3.59,16.73,1.14,2.54,3.01,3.97,3.8,4.56,5.12,3.84,11.75,2.9,15.44,2.44,23.36-2.91,22.57,1.64,35.37-2.45,5.16-1.65,13.19-4.91,21.82-11.73Z"/>
+  <path class="cls-8" d="M109.47,569.49c1.44-.52,4.04-1.41,7.37-2.18,28.84-6.72,49.72,9.57,57.37,1.92,1.96-1.96,3.86-6.3.46-17.47,3.96,2.93,6.31,6.07,7.64,8.18,1.92,3.06,6.47,10.32,3.59,16.73-1.14,2.54-3.01,3.97-3.8,4.56-5.12,3.84-11.75,2.9-15.44,2.44-23.36-2.91-22.57,1.64-35.37-2.45-5.16-1.65-13.19-4.91-21.82-11.73Z"/>
+  <path class="cls-6" d="M314.03,265.56c-18.08,13.56-18.08,45.29,0,58.86,11.68,8.77,29.35,8.77,41.04,0,18.08-13.56,18.08-45.29,0-58.86-11.68-8.77-29.35-8.77-41.04,0Z"/>
+  <path class="cls-6" d="M323.81,406.44c-13.65,30.43-103.75,30.43-117.4,0-2.9-6.47-2.06-13.66,0-20.15h117.4c2.06,6.48,2.9,13.68,0,20.15Z"/>
+  <ellipse class="cls-9" cx="344.53" cy="297.31" rx="16.27" ry="13.02"/>
+  <path class="cls-6" d="M170.36,265.56c-18.08,13.56-18.08,45.29,0,58.86,11.68,8.77,29.35,8.77,41.04,0,18.08-13.56,18.08-45.29,0-58.86-11.68-8.77-29.35-8.77-41.04,0Z"/>
+  <ellipse class="cls-9" cx="200.86" cy="297.31" rx="16.27" ry="13.02"/>
+</svg>
\ No newline at end of file


Reviews:
user: login: sourcery-ai[bot]
body: Hoi @Nazneen05x - Ik heb je wijzigingen bekeken - hier is wat feedback:

**Algemene opmerkingen**:
- Overweeg om meer beschrijvende klassennamen te gebruiken om de leesbaarheid en onderhoudbaarheid te verbeteren.
- Wees consistent met de eenheden die in je CSS worden gebruikt (bijv. rem, em, px, vw) om een uniforme uitstraling te behouden.

<details>
<summary>Dit is waar ik naar heb gekeken tijdens de review</summary>

- 🟢 **Algemene problemen**: ziet er allemaal goed uit
- 🟢 **Beveiliging**: ziet er allemaal goed uit
- 🟢 **Testen**: ziet er allemaal goed uit
- 🟢 **Complexiteit**: ziet er allemaal goed uit
- 🟢 **Documentatie**: ziet er allemaal goed uit
</details>

***

<details>
<summary>Sourcery is gratis voor open source - als je onze reviews leuk vindt, overweeg dan om ze te delen ✨</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20got%20an%20instant%20code%20review%20from%20%40SourceryAI%2C%20and%20it%20was%20brilliant%21%20It%27s%20free%20for%20open%20source%20and%20has%20a%20free%20trial%20for%20private%20code.%20Check%20it%20out%20https%3A//sourcery.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20got%20an%20instant%20code%20review%20from%20%40SourceryAI%2C%20and%20it%20was%20brilliant%21%20It%27s%20free%20for%20open%20source%20and%20has%20a%20free%20trial%20for%20private%20code.%20Check%20it%20out%20https%3A//sourcery.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https://sourcery.ai)
- [Facebook](https://www.facebook.com/sharer/sharer.php?u=https://sourcery.ai)

</details>

<sub>
Hep me nuttiger te zijn! Klik op 👍 of 👎 op elke opmerking en ik zal de feedback gebruiken om je reviews te verbeteren.
</sub>

<details>
<summary>Original comment in English</summary>

Hey @Nazneen05x - I've reviewed your changes - here's some feedback:

**Overall Comments**:
- Consider using more descriptive class names to improve readability and maintainability.
- Be consistent with the units used in your CSS (e.g., rem, em, px, vw) to maintain a uniform look and feel.

<details>
<summary>Here's what I looked at during the review</summary>

- 🟢 **General issues**: all looks good
- 🟢 **Security**: all looks good
- 🟢 **Testing**: all looks good
- 🟢 **Complexity**: all looks good
- 🟢 **Documentation**: all looks good
</details>

***

<details>
<summary>Sourcery is free for open source - if you like our reviews please consider sharing them ✨</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20got%20an%20instant%20code%20review%20from%20%40SourceryAI%2C%20and%20it%20was%20brilliant%21%20It%27s%20free%20for%20open%20source%20and%20has%20a%20free%20trial%20for%20private%20code.%20Check%20it%20out%20https%3A//sourcery.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20got%20an%20instant%20code%20review%20from%20%40SourceryAI%2C%20and%20it%20was%20brilliant%21%20It%27s%20free%20for%20open%20source%20and%20has%20a%20free%20trial%20for%20private%20code.%20Check%20it%20out%20https%3A//sourcery.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https://sourcery.ai)
- [Facebook](https://www.facebook.com/sharer/sharer.php?u=https://sourcery.ai)

</details>

<sub>
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
</sub>

</details>
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-25T09:27:35Z
user: login: Robin1224
body: I noticed a couple small things, but nothing major. Nice job :)
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-25T14:24:23Z
user: login: Nazneen05x
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-25T16:39:06Z
user: login: Nazneen05x
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-25T18:17:20Z

Review comments:
diff_hunk: @@ -2,17 +2,23 @@
 	export let href, buttonText, buttonClass, svgFill;
 </script>
 
-<a {href} class={buttonClass}>
-	{buttonText}
-	<span>
-		<svg class={svgFill} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 47">
-			<path
-				d="M40.492 18.788 8.942 1.034C4.944-1.218 0 1.673 0 6.262v34.704c0 4.537 4.842 7.433 8.84 5.285l31.549-16.948c4.167-2.239 4.225-8.195.103-10.515Z"
-				fill={svgFill}
-			/>
-		</svg>
-	</span>
-</a>
+<div class="button-wrapper">
+	<div class="harry">
+		<img src="/assets/blije Harry.svg" alt="Harry" />
+	</div>
path: src/lib/atoms/buttons/button.svelte
user: login: Robin1224
body: Is there a reason for this div? Wouldn't it be better to apply styles to the image directly?
created_at: 2025-03-25T14:00:30Z
author_association: NONE
path: src/lib/atoms/content/cardslides-leaf.svelte
user: login: Robin1224
body: You should consider adding some comments to this file. I simply cannot tell what is happening in this code, and I can imagine a future maintainer might not be able to either.
created_at: 2025-03-25T14:07:41Z
author_association: NONE
diff_hunk: @@ -42,45 +45,41 @@
 </section>
 
 <style>
+	/* Mobile styling */
 	.card-container {
 		container-type: inline-size;
 		container-name: slidecards;
 	}
 
 	article {
-		align-items: center;
-		position: relative;
-		padding: 2rem 1rem;
+		gap: 1rem;
+		z-index: 1;
 		bottom: 3rem;
+		display: flex;
 		margin: 0 auto;
-		z-index: 1;
 		overflow: hidden;
+		position: relative;
+		padding: 2rem 1rem;
+		align-items: center;
+		flex-direction: column-reverse;
path: src/lib/organisms/slide-cards.svelte
user: login: Robin1224
body: Is there a reason you're using `column-reverse` rather than simply reversing the order of the elements in your code? 

When the visual order is different from the order that elements appear in the DOM, it can lead to unintended behaviours, for example when navigating using a keyboard. 

Consider just using `flex-direction: column` and changing the order of your elements in the DOM instead.
created_at: 2025-03-25T14:18:40Z
author_association: NONE
diff_hunk: @@ -178,5 +201,39 @@
 			display: flex;
 			align-items: baseline;
 		}
+
+		article {
+			font-size: 19px;
path: src/lib/organisms/slide-cards.svelte
user: login: Robin1224
body: Consider just using REM instead. When using pixels, the text will (usually)  stay the same size when users try to enlarge the page, even though text specifically is oftentimes exactly what they are hoping to make bigger.
created_at: 2025-03-25T14:20:59Z
author_association: NONE
diff_hunk: @@ -2,17 +2,23 @@
 	export let href, buttonText, buttonClass, svgFill;
 </script>
 
-<a {href} class={buttonClass}>
-	{buttonText}
-	<span>
-		<svg class={svgFill} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 47">
-			<path
-				d="M40.492 18.788 8.942 1.034C4.944-1.218 0 1.673 0 6.262v34.704c0 4.537 4.842 7.433 8.84 5.285l31.549-16.948c4.167-2.239 4.225-8.195.103-10.515Z"
-				fill={svgFill}
-			/>
-		</svg>
-	</span>
-</a>
+<div class="button-wrapper">
+	<div class="harry">
+		<img src="/assets/blije Harry.svg" alt="Harry" />
+	</div>
path: src/lib/atoms/buttons/button.svelte
user: login: Nazneen05x
body: Thank you, I have reviewed the code again and removed the div, and moved the styling to the img.









created_at: 2025-03-25T16:39:06Z
author_association: COLLABORATOR
diff_hunk: @@ -42,45 +45,41 @@
 </section>
 
 <style>
+	/* Mobile styling */
 	.card-container {
 		container-type: inline-size;
 		container-name: slidecards;
 	}
 
 	article {
-		align-items: center;
-		position: relative;
-		padding: 2rem 1rem;
+		gap: 1rem;
+		z-index: 1;
 		bottom: 3rem;
+		display: flex;
 		margin: 0 auto;
-		z-index: 1;
 		overflow: hidden;
+		position: relative;
+		padding: 2rem 1rem;
+		align-items: center;
+		flex-direction: column-reverse;
path: src/lib/organisms/slide-cards.svelte
user: login: Nazneen05x
body: I used column-reverse because I wanted the image to be in a different position on mobile than on desktop. The image is purely decorative, so it is not read by the screen reader and does not affect navigation when someone uses the keyboard.

But thank you! You've given me something to think about. 😊
created_at: 2025-03-25T18:17:20Z
author_association: COLLABORATOR

PR comments:
user: login: sourcery-ai[bot]
created_at: 2025-03-25T09:27:11Z
body: <!-- Generated by sourcery-ai[bot]: start review_guide -->

## Reviewershandleiding door Sourcery

Deze pull request introduceert een vernieuwde card slides component met verbeterde structuur, responsieve styling, scroll-gedreven animaties en een focusanimatie voor de knop. Het implementeert ook een view transition voor vloeiendere paginanavigatie.

### Wijzigingen op bestandsniveau

| Wijziging | Details | Bestanden |
| ------ | ------- | ----- |
| Herstructureerde de card layout en voegde een button wrapper toe met focusanimatie. | <ul><li>Verplaatste card content naar een speciale div voor een betere structuur.</li><li>Herschikte elementen binnen de card voor een verbeterde visuele hiërarchie.</li><li>Voegde een button wrapper toe met een 'Harry'-afbeelding die verschijnt bij focus voor een verbeterde gebruikerservaring.</li><li>Implementeerde focus-visible styling voor de knop.</li></ul> | `src/lib/organisms/slide-cards.svelte`<br/>`src/lib/atoms/buttons/button.svelte` |
| Implementeerde responsieve styling en scroll-gedreven animaties voor card slides. | <ul><li>Voegde container queries toe voor responsieve styling op basis van de 'slidecards' container.</li><li>Implementeerde scroll-gedreven animaties voor de card slides, met een fallback voor gebruikers met verminderde bewegingsvoorkeuren.</li><li>Paste stijlen aan voor verschillende schermformaten, waaronder mobiel, tablet en desktop.</li><li>Wijzigde de button margin voor grotere schermen.</li></ul> | `src/lib/organisms/slide-cards.svelte`<br/>`src/lib/atoms/content/cardslides-content.svelte`<br/>`src/lib/atoms/content/cardslides-leaf.svelte` |
| Voegde view transition toe voor vloeiendere paginanavigatie. | <ul><li>Implementeerde een view transition voor vloeiendere paginanavigatie met behulp van de 'onNavigate'-functie van '$app/navigation'.</li><li>Voegde CSS-animaties toe voor de view transition om een schuifeffect te creëren.</li></ul> | `src/routes/+layout.svelte` |

---

<details>
<summary>Tips en commando's</summary>

#### Interactie met Sourcery

- **Activeer een nieuwe review:** Plaats de opmerking `@sourcery-ai review` bij de pull request.
- **Vervolg discussies:** Antwoord direct op de reviewopmerkingen van Sourcery.
- **Genereer een GitHub issue vanuit een reviewopmerking:** Vraag Sourcery om een issue te maken van een reviewopmerking door erop te antwoorden. Je kunt ook antwoorden op een reviewopmerking met `@sourcery-ai issue` om er een issue van te maken.
- **Genereer een pull request titel:** Schrijf `@sourcery-ai` ergens in de pull request titel om op elk moment een titel te genereren. Je kunt ook `@sourcery-ai title` als commentaar op de pull request plaatsen om de titel op elk moment (opnieuw) te genereren.
- **Genereer een pull request samenvatting:** Schrijf `@sourcery-ai summary` ergens in de pull request body om op elk moment een PR-samenvatting te genereren, precies waar je hem wilt hebben. Je kunt ook `@sourcery-ai summary` als commentaar op de pull request plaatsen om de samenvatting op elk moment (opnieuw) te genereren.
- **Genereer een reviewershandleiding:** Plaats de opmerking `@sourcery-ai guide` bij de pull request om de reviewershandleiding op elk moment (opnieuw) te genereren.
- **Los alle Sourcery-opmerkingen op:** Plaats de opmerking `@sourcery-ai resolve` bij de pull request om alle Sourcery-opmerkingen op te lossen. Handig als je alle opmerkingen al hebt behandeld en ze niet meer wilt zien.
- **Negeer alle Sourcery-reviews:** Plaats de opmerking `@sourcery-ai dismiss` bij de pull request om alle bestaande Sourcery-reviews te negeren. Vooral handig als je opnieuw wilt beginnen met een nieuwe review - vergeet niet om `@sourcery-ai review` als commentaar te plaatsen om een nieuwe review te activeren!
- **Genereer een plan van aanpak voor een issue:** Plaats de opmerking `@sourcery-ai plan` bij een issue om er een plan van aanpak voor te genereren.

#### Je ervaring aanpassen

Ga naar je [dashboard](https://app.sourcery.ai) om:
- Reviewfuncties in of uit te schakelen, zoals de door Sourcery gegenereerde pull request samenvatting, de reviewershandleiding en andere.
- De reviewtaal te wijzigen.
- Aangepaste reviewinstructies toe te voegen, te verwijderen of te bewerken.
- Andere reviewinstellingen aan te passen.

#### Hulp krijgen

- [Neem contact op met ons supportteam](mailto:support@sourcery.ai) voor vragen of feedback.
- Bezoek onze [documentatie](https://docs.sourcery.ai) voor gedetailleerde handleidingen en informatie.
- Blijf in contact met het Sourcery-team door ons te volgen op [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) of [GitHub](https://github.com/sourcery-ai).

</details>

<details>
<summary>Original review guide in English</summary>

## Reviewer's Guide by Sourcery

This pull request introduces a revamped card slides component with improved structure, responsive styling, scroll-driven animations, and a focus animation for the button. It also implements a view transition for smoother page navigation.

### File-Level Changes

| Change | Details | Files |
| ------ | ------- | ----- |
| Restructured the card layout and added a button wrapper with focus animation. | <ul><li>Moved card content into a dedicated div for better structure.</li><li>Reordered elements within the card for improved visual hierarchy.</li><li>Added a button wrapper with a 'Harry' image that appears on focus for enhanced user experience.</li><li>Implemented focus-visible styling for the button.</li></ul> | `src/lib/organisms/slide-cards.svelte`<br/>`src/lib/atoms/buttons/button.svelte` |
| Implemented responsive styling and scroll-driven animations for card slides. | <ul><li>Added container queries for responsive styling based on the 'slidecards' container.</li><li>Implemented scroll-driven animations for the card slides, with a fallback for users with reduced motion preferences.</li><li>Adjusted styles for different screen sizes, including mobile, tablet, and desktop.</li><li>Modified the button margin for larger screens.</li></ul> | `src/lib/organisms/slide-cards.svelte`<br/>`src/lib/atoms/content/cardslides-content.svelte`<br/>`src/lib/atoms/content/cardslides-leaf.svelte` |
| Added view transition for smoother page navigation. | <ul><li>Implemented a view transition for smoother page navigation using the 'onNavigate' function from '$app/navigation'.</li><li>Added CSS animations for the view transition to create a sliding effect.</li></ul> | `src/routes/+layout.svelte` |

---

<details>
<summary>Tips and commands</summary>

#### Interacting with Sourcery

- **Trigger a new review:** Comment `@sourcery-ai review` on the pull request.
- **Continue discussions:** Reply directly to Sourcery's review comments.
- **Generate a GitHub issue from a review comment:** Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with `@sourcery-ai issue` to create an issue from it.
- **Generate a pull request title:** Write `@sourcery-ai` anywhere in the pull
  request title to generate a title at any time. You can also comment
  `@sourcery-ai title` on the pull request to (re-)generate the title at any time.
- **Generate a pull request summary:** Write `@sourcery-ai summary` anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment `@sourcery-ai summary` on the pull request to
  (re-)generate the summary at any time.
- **Generate reviewer's guide:** Comment `@sourcery-ai guide` on the pull
  request to (re-)generate the reviewer's guide at any time.
- **Resolve all Sourcery comments:** Comment `@sourcery-ai resolve` on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
- **Dismiss all Sourcery reviews:** Comment `@sourcery-ai dismiss` on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  `@sourcery-ai review` to trigger a new review!
- **Generate a plan of action for an issue:** Comment `@sourcery-ai plan` on
  an issue to generate a plan of action for it.

#### Customizing Your Experience

Access your [dashboard](https://app.sourcery.ai) to:
- Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
- Change the review language.
- Add, remove or edit custom review instructions.
- Adjust other review settings.

#### Getting Help

- [Contact our support team](mailto:support@sourcery.ai) for questions or feedback.
- Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information.
- Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).

</details>

</details>

<!-- Generated by sourcery-ai[bot]: end review_guide -->
author_association: NONE
user: login: netlify[bot]
created_at: 2025-03-25T09:27:26Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *biebinbloei-agency* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | d4d8fe0a317a0a28c0d945063b1fc2d08f58f22c |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/biebinbloei-agency/deploys/67e2fbc2bd20a70008eab52a |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-417--biebinbloei-agency.netlify.app](https://deploy-preview-417--biebinbloei-agency.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTQxNy0tYmllYmluYmxvZWktYWdlbmN5Lm5ldGxpZnkuYXBwIn0.a6wkxz83ZBgMgNZeKx_cwQbpPg7Uf4x_oxI2mNg8oiU)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [biebinbloei-agency Preview](https://deploy-preview-417--biebinbloei-agency.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/biebinbloei-agency/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: netlify[bot]
created_at: 2025-03-25T09:27:27Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *biebinbloei-dev* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | d4d8fe0a317a0a28c0d945063b1fc2d08f58f22c |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/biebinbloei-dev/deploys/67e2fbc2689e3c000885ae00 |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-417--biebinbloei-dev.netlify.app](https://deploy-preview-417--biebinbloei-dev.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTQxNy0tYmllYmluYmxvZWktZGV2Lm5ldGxpZnkuYXBwIn0.K0LG_Gt5A6aT6ZzCRM8xDo9NS72TTYiiKvOCnUH7FSE)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [biebinbloei-dev Preview](https://deploy-preview-417--biebinbloei-dev.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/biebinbloei-dev/configuration/notifications#deploy-webhooks)._
author_association: NONE