diff --git a/src/lib/components/Carousel.svelte b/src/lib/components/Carousel.svelte
new file mode 100644
index 0000000000..653e9e7d1f
--- /dev/null
+++ b/src/lib/components/Carousel.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+	let carousel: HTMLElement;
+
+	export let gap = 32;
+	let scroll = 0;
+	let touchStart = 0;
+	let touchEnd = 0;
+
+	function calculateScrollAmount(prev = false) {
+		const direction = prev ? -1 : 1;
+		const carouselSize = carousel?.clientWidth;
+		const childSize = (carousel.childNodes[0] as HTMLUListElement)?.clientWidth + gap;
+
+		scroll = scroll || carouselSize;
+
+		const numberOfItems = Math.floor(carouselSize / childSize);
+		const overflow = scroll % childSize;
+		const amount = numberOfItems * childSize - overflow * direction;
+		scroll += amount * direction;
+		return amount * direction;
+	}
+
+	function next() {
+		carousel.scrollBy({
+			left: calculateScrollAmount(),
+			behavior: 'smooth'
+		});
+	}
+	function prev() {
+		carousel.scrollBy({
+			left: calculateScrollAmount(true),
+			behavior: 'smooth'
+		});
+	}
+
+	function handleTouchStart(e: TouchEvent) {
+		touchStart = e.touches[0].clientX;
+	}
+	function handleTouchMove(e: TouchEvent) {
+		touchEnd = e.touches[0].clientX;
+	}
+
+	function handleTouchEnd() {
+		if (touchEnd > touchStart) {
+			prev();
+		} else {
+			next();
+		}
+	}
+</script>
+
+<div class="u-flex u-main-space-between u-flex-wrap">
+	<slot name="header" />
+	<div class="u-flex u-gap-12 u-cross-end u-margin-block-start-8">
+		<button class="aw-icon-button" aria-label="Move carousel backward" on:click={() => prev()}>
+			<span class="icon-arrow-left" aria-hidden="true" />
+		</button>
+		<button class="aw-icon-button" aria-label="Move carousel forward" on:click={() => next()}>
+			<span class="icon-arrow-right" aria-hidden="true" />
+		</button>
+	</div>
+</div>
+<ul
+	class="aw-grid-articles aw-u-gap-32 u-margin-block-start-32 carousel"
+	bind:this={carousel}
+	on:touchstart={handleTouchStart}
+	on:touchmove={handleTouchMove}
+	on:touchend={handleTouchEnd}
+>
+	<slot />
+</ul>
+
+<style lang="scss">
+	.carousel {
+		grid-auto-flow: column;
+		grid-auto-columns: minmax(17.5rem, 1fr);
+		overflow-x: hidden;
+	}
+</style>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 462f608a15..86191183b0 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -8,3 +8,4 @@ export { default as Newsletter } from './Newsletter.svelte';
 export { default as Tooltip } from './Tooltip.svelte';
 export { default as Spline } from './Spline.svelte';
 export { default as Article } from './Article.svelte';
+export { default as Carousel } from './Carousel.svelte';
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
index 9ba4ce1d53..83aa7a8813 100644
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Carousel } from '$lib/components';
 	import { Spline } from '$lib/components';
 	import Docs from '$lib/layouts/Docs.svelte';
 	import MainFooter from '../../lib/components/MainFooter.svelte';
@@ -63,13 +64,17 @@
 
 	<main class="aw-main-section u-position-relative">
 		<section class="aw-hero is-align-start">
-			<h1 class="aw-display aw-u-color-text-primary u-max-width-600">Run on any provider or through Appwrite Cloud</h1>
+			<h1 class="aw-display aw-u-color-text-primary u-max-width-600">
+				Run on any provider or through Appwrite Cloud
+			</h1>
 			<p class="aw-description u-max-width-600">
 				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ultrices lacus.
 			</p>
 		</section>
 		<section class="aw-hero is-align-start">
-			<h2 class="aw-title aw-u-color-text-primary u-max-width-600">Get started quickly with your preferred technology</h2>
+			<h2 class="aw-title aw-u-color-text-primary u-max-width-600">
+				Get started quickly with your preferred technology
+			</h2>
 			<p class="aw-description u-max-width-600">
 				Start building with your preferred web, mobile, and native frameworks by following a quick
 				start guide.
@@ -216,146 +221,506 @@
 				<span class="aw-sub-body-500">Explore all technologies</span>
 			</button>
 		</section>
-		<section class="aw-hero is-align-start is-no-max-width">
-			<h2 class="aw-title aw-u-color-text-primary u-max-width-600">Show me some code</h2>
-			<p class="aw-description u-max-width-600">
-				Talk is cheap, where's the code? If you'd rather see some examples, we've got you covered.
-				Clone a template to get started.
-			</p>
-			<div class="aw-articles">
-				<ul class="aw-articles-list">
+		<section class=" is-align-start">
+			<Carousel>
+				<svelte:fragment slot="header">
+					<div>
+						<h2 class="aw-title aw-u-color-text-primary u-max-width-600">Show me some code</h2>
+						<p class="aw-description u-max-width-600">
+							Talk is cheap, where's the code? If you'd rather see some examples, we've got you
+							covered. Clone a template to get started.
+						</p>
+					</div>
+				</svelte:fragment>
+				<svelte:fragment>
 					<li>
 						<a
+							class="aw-grid-articles-item is-full-color"
 							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
 							target="_blank"
 							rel="noopener noreferrer"
 						>
-							<article class="aw-articles-item">
+							<div class="aw-grid-articles-item-image">
 								<img
-									class="aw-articles-item-image"
+									class="aw-u-media-ratio-16-9"
 									src="https://pink.appwrite.io/articles/announcement.png"
 									alt=""
 									loading="lazy"
 								/>
-								<div class="aw-articles-item-content">
-									<header class="aw-articles-item-header">
-										<h3 class="aw-sub-body-500">React sign up template</h3>
-									</header>
-									<p
-										class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
-									>
-										Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-									</p>
-								</div>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
 							</article>
 						</a>
 					</li>
 					<li>
 						<a
+							class="aw-grid-articles-item is-full-color"
 							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
 							target="_blank"
 							rel="noopener noreferrer"
 						>
-							<article class="aw-articles-item">
+							<div class="aw-grid-articles-item-image">
 								<img
-									class="aw-articles-item-image"
-									src="https://pink.appwrite.io/articles/announcement.png"
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/146"
 									alt=""
 									loading="lazy"
 								/>
-								<div class="aw-articles-item-content">
-									<header class="aw-articles-item-header">
-										<h3 class="aw-sub-body-500">React sign up template</h3>
-									</header>
-									<p
-										class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
-									>
-										Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-									</p>
-								</div>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
 							</article>
 						</a>
 					</li>
 					<li>
 						<a
+							class="aw-grid-articles-item is-full-color"
 							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
 							target="_blank"
 							rel="noopener noreferrer"
 						>
-							<article class="aw-articles-item">
+							<div class="aw-grid-articles-item-image">
 								<img
-									class="aw-articles-item-image"
-									src="https://pink.appwrite.io/articles/announcement.png"
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/261/147"
 									alt=""
 									loading="lazy"
 								/>
-								<div class="aw-articles-item-content">
-									<header class="aw-articles-item-header">
-										<h3 class="aw-sub-body-500">React sign up template</h3>
-									</header>
-									<p
-										class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
-									>
-										Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-									</p>
-								</div>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
 							</article>
 						</a>
 					</li>
 					<li>
 						<a
+							class="aw-grid-articles-item is-full-color"
 							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
 							target="_blank"
 							rel="noopener noreferrer"
 						>
-							<article class="aw-articles-item">
+							<div class="aw-grid-articles-item-image">
 								<img
-									class="aw-articles-item-image"
-									src="https://pink.appwrite.io/articles/announcement.png"
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/148"
 									alt=""
 									loading="lazy"
 								/>
-								<div class="aw-articles-item-content">
-									<header class="aw-articles-item-header">
-										<h3 class="aw-sub-body-500">React sign up template</h3>
-									</header>
-									<p
-										class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
-									>
-										Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-									</p>
-								</div>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
 							</article>
 						</a>
 					</li>
 					<li>
 						<a
+							class="aw-grid-articles-item is-full-color"
 							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
 							target="_blank"
 							rel="noopener noreferrer"
 						>
-							<article class="aw-articles-item">
+							<div class="aw-grid-articles-item-image">
 								<img
-									class="aw-articles-item-image"
-									src="https://pink.appwrite.io/articles/announcement.png"
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
 									alt=""
 									loading="lazy"
 								/>
-								<div class="aw-articles-item-content">
-									<header class="aw-articles-item-header">
-										<h3 class="aw-sub-body-500">React sign up template</h3>
-									</header>
-									<p
-										class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
-									>
-										Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-									</p>
-								</div>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
 							</article>
 						</a>
 					</li>
-				</ul>
-			</div>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+					<li>
+						<a
+							class="aw-grid-articles-item is-full-color"
+							href="https://medium.com/appwrite-io/announcing-pink-design-30652e2a2be3"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<div class="aw-grid-articles-item-image">
+								<img
+									class="aw-u-media-ratio-16-9"
+									src="https://unsplash.it/262/147"
+									alt=""
+									loading="lazy"
+								/>
+							</div>
+							<article class="aw-grid-articles-item-content">
+								<header class="aw-articles-item-header">
+									<h3 class="aw-sub-body-500 aw-u-color-text-primary">React sign up template</h3>
+								</header>
+								<p
+									class="aw-articles-item-paragraph aw-sub-body-500 u-trim-2 u-margin-block-start-4"
+								>
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+								</p>
+							</article>
+						</a>
+					</li>
+				</svelte:fragment>
+			</Carousel>
 		</section>
 		<section class="aw-hero is-align-start is-no-max-width">
 			<h2 class="aw-title aw-u-color-text-primary u-max-width-600">Show me some code</h2>
@@ -377,7 +742,9 @@
 					<li>
 						<div class="aw-card is-full-color">
 							<img src="/images/icons/illustrated/dark/databases.png" alt="" />
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Databases</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Databases
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Store your application and users' data.
 							</p>
@@ -386,7 +753,9 @@
 					<li>
 						<div class="aw-card is-full-color">
 							<img src="/images/icons/illustrated/dark/functions.png" alt="" />
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Functions</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Functions
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Extend and customize your server's functionality.
 							</p>
@@ -395,7 +764,9 @@
 					<li>
 						<div class="aw-card is-full-color">
 							<img src="/images/icons/illustrated/dark/storage.png" alt="" />
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Storage</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Storage
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Store images, videos, documents, and files.
 							</p>
@@ -404,7 +775,9 @@
 					<li>
 						<div class="aw-card is-full-color">
 							<img src="/images/icons/illustrated/dark/realtime.png" alt="" />
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Realtime</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Realtime
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Listen to any events on the server-side in realtime.
 							</p>
@@ -412,8 +785,9 @@
 					</li>
 					<li>
 						<div class="aw-card is-full-color u-opacity-20">
-							<img src="/images/icons/illustrated/dark/messaging.png" alt="" />
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Messaging</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Messaging
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Sign in users with multiple OAuth providers.
 							</p>
@@ -440,7 +814,9 @@
 					</li>
 					<li>
 						<div class="aw-card is-full-color">
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">REST API</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								REST API
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Lorem ipsum dolor sit amet consectetur. Elit id et diam lectus egestas habitasse.
 							</p>
@@ -448,7 +824,9 @@
 					</li>
 					<li>
 						<div class="aw-card is-full-color">
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">GraphQL</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								GraphQL
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Lorem ipsum dolor sit amet consectetur. Elit id et diam lectus egestas habitasse.
 							</p>
@@ -456,7 +834,9 @@
 					</li>
 					<li>
 						<div class="aw-card is-full-color">
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Realtime</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Realtime
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Lorem ipsum dolor sit amet consectetur. Elit id et diam lectus egestas habitasse.
 							</p>
@@ -474,7 +854,9 @@
 				<ul class="aw-grid-row-4">
 					<li>
 						<div class="aw-card is-full-color">
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Self hosted</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Self hosted
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Lorem ipsum dolor sit amet consectetur.
 							</p>
@@ -482,7 +864,9 @@
 					</li>
 					<li>
 						<div class="aw-card is-full-color">
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Firebase</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Firebase
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Lorem ipsum dolor sit amet consectetur.
 							</p>
@@ -490,7 +874,9 @@
 					</li>
 					<li>
 						<div class="aw-card is-full-color">
-							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Supabase</h4>
+							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">
+								Supabase
+							</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Lorem ipsum dolor sit amet consectetur.
 							</p>