fix: layout

src/lib/components/Technologies.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import Tooltip from '$lib/components/Tooltip.svelte';
+
+	const platforms: Array<{
+		name: string;
+		href: string;
+		image: string;
+	}> = [
+		{
+			name: 'Flutter',
+			href: '/docs/quick-starts/flutter',
+			image: '/images/platforms/dark/flutter.svg'
+		},
+		{
+			name: 'Next',
+			href: '/docs/quick-starts/nextjs',
+			image: '/images/platforms/dark/nextjs.svg'
+		},
+		{
+			name: 'React',
+			href: '/docs/quick-starts/react',
+			image: '/images/platforms/dark/react.svg'
+		},
+		{
+			name: 'Svelte',
+			href: '/docs/quick-starts/sveltekit',
+			image: '/images/platforms/dark/svelte.svg'
+		},
+		{
+			name: 'Nuxt',
+			href: '/docs/quick-starts/nuxt',
+			image: '/images/platforms/dark/nuxt.svg'
+		},
+		{
+			name: 'Vue',
+			href: '/docs/quick-starts/vue',
+			image: '/images/platforms/dark/vue.svg'
+		},
+		{
+			name: 'Angular',
+			href: '/docs/quick-starts/angular',
+			image: '/images/platforms/dark/angular.svg'
+		},
+		{
+			name: 'Apple',
+			href: '/docs/quick-starts/apple',
+			image: '/images/platforms/dark/apple.svg'
+		},
+		{
+			name: 'Android',
+			href: '/docs/quick-starts/android',
+			image: '/images/platforms/dark/android.svg'
+		}
+	];
+</script>
+
+<ul class="u-flex u-flex-wrap u-gap-16 aw-u-margin-block-32-mobile aw-u-margin-block-40-not-mobile">
+	{#each platforms as platform}
+		<Tooltip>
+			<li>
+				<a href={platform.href} class="aw-box-icon">
+					<img src={platform.image} alt="{platform.name} Logo" width="32" height="32" />
+				</a>
+			</li>
+			<svelte:fragment slot="tooltip">{platform.name}</svelte:fragment>
+		</Tooltip>
+	{/each}
+</ul>

src/markdoc/tags/Cards.svelte

@@ -0,0 +1,5 @@
+<div class="u-margin-block-start-24">
+	<ul class="aw-grid-row-2">
+		<slot />
+	</ul>
+</div>

src/markdoc/tags/Cards_Item.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+
+	export let href: string;
+	export let title: string;
+
+	setContext('no-paragraph', true);
+</script>
+
+<li>
+	<a {href} class="aw-card is-normal" style:margin-block-end="0">
+		<h4 class="aw-sub-body-500 aw-u-color-text-primary">
+			{title}
+		</h4>
+		<p class="aw-sub-body-400 u-margin-block-start-4" style:margin-block="0">
+			<slot />
+		</p>
+	</a>
+</li>

src/markdoc/tags/_Module.svelte

@@ -6,6 +6,8 @@
 	export { default as TabsItem } from './TabsItem.svelte';
 	export { default as Icon } from './Icon.svelte';
 	export { default as Icon_Image } from './Icon_Image.svelte';
+	export { default as Cards } from './Cards.svelte';
+	export { default as Cards_Item } from './Cards_Item.svelte';
 	export { default as Only_Light } from './Only_Light.svelte';
 	export { default as Only_Dark } from './Only_Dark.svelte';
 </script>

src/routes/docs/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Spline } from '$lib/components';
 	import { Carousel } from '$lib/components';
+	import Technologies from '$lib/components/Technologies.svelte';
 	import Docs from '$lib/layouts/Docs.svelte';
 	import MainFooter from '../../lib/components/MainFooter.svelte';
 	import Sidebar from './Sidebar.svelte';
@@ -9,45 +10,113 @@
 <Docs variant="default">
 	<Sidebar />
 	<div class="u-position-absolute u-inset-inline-end-0 aw-u-opacity-40-mobile" style="">
-		<svg xmlns="http://www.w3.org/2000/svg" width="395" height="645" viewBox="0 0 395 645" fill="none">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="395"
+			height="645"
+			viewBox="0 0 395 645"
+			fill="none"
+		>
 			<g opacity="0.6">
 				<g opacity="0.3" filter="url(#filter0_f_2588_70942)">
-					<path d="M490.888 119.115C582.97 188.753 601.165 319.853 531.527 411.935C461.89 504.018 330.79 522.213 238.707 452.575C193.573 418.442 360.66 328.3 347.404 265.83C333.616 200.849 118.572 216.378 154.076 169.43C223.714 77.3477 398.805 49.4778 490.888 119.115Z" fill="url(#paint0_radial_2588_70942)"/>
+					<path
+						d="M490.888 119.115C582.97 188.753 601.165 319.853 531.527 411.935C461.89 504.018 330.79 522.213 238.707 452.575C193.573 418.442 360.66 328.3 347.404 265.83C333.616 200.849 118.572 216.378 154.076 169.43C223.714 77.3477 398.805 49.4778 490.888 119.115Z"
+						fill="url(#paint0_radial_2588_70942)"
+					/>
 				</g>
 				<g opacity="0.2" filter="url(#filter1_f_2588_70942)">
-					<ellipse cx="427.577" cy="248.547" rx="119.581" ry="41.5954" transform="rotate(-74.0791 427.577 248.547)" fill="url(#paint1_radial_2588_70942)"/>
+					<ellipse
+						cx="427.577"
+						cy="248.547"
+						rx="119.581"
+						ry="41.5954"
+						transform="rotate(-74.0791 427.577 248.547)"
+						fill="url(#paint1_radial_2588_70942)"
+					/>
 				</g>
 				<g opacity="0.2" filter="url(#filter2_f_2588_70942)">
-					<ellipse cx="413.058" cy="184.027" rx="98.4768" ry="40.0587" transform="rotate(170.022 413.058 184.027)" fill="url(#paint2_radial_2588_70942)"/>
+					<ellipse
+						cx="413.058"
+						cy="184.027"
+						rx="98.4768"
+						ry="40.0587"
+						transform="rotate(170.022 413.058 184.027)"
+						fill="url(#paint2_radial_2588_70942)"
+					/>
 				</g>
 			</g>
 			<defs>
-				<filter id="filter0_f_2588_70942" x="0.97641" y="-69.007" width="722.02" height="713.051" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+				<filter
-					<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+					id="filter0_f_2588_70942"
-					<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+					x="0.97641"
-					<feGaussianBlur stdDeviation="74.5738" result="effect1_foregroundBlur_2588_70942"/>
+					y="-69.007"
+					width="722.02"
+					height="713.051"
+					filterUnits="userSpaceOnUse"
+					color-interpolation-filters="sRGB"
+				>
+					<feFlood flood-opacity="0" result="BackgroundImageFix" />
+					<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+					<feGaussianBlur stdDeviation="74.5738" result="effect1_foregroundBlur_2588_70942" />
 				</filter>
-				<filter id="filter1_f_2588_70942" x="296.3" y="53.4351" width="262.554" height="390.225" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+				<filter
-					<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+					id="filter1_f_2588_70942"
-					<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+					x="296.3"
-					<feGaussianBlur stdDeviation="39.7727" result="effect1_foregroundBlur_2588_70942"/>
+					y="53.4351"
+					width="262.554"
+					height="390.225"
+					filterUnits="userSpaceOnUse"
+					color-interpolation-filters="sRGB"
+				>
+					<feFlood flood-opacity="0" result="BackgroundImageFix" />
+					<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+					<feGaussianBlur stdDeviation="39.7727" result="effect1_foregroundBlur_2588_70942" />
 				</filter>
-				<filter id="filter2_f_2588_70942" x="246.216" y="71.429" width="333.684" height="225.195" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+				<filter
-					<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+					id="filter2_f_2588_70942"
-					<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+					x="246.216"
-					<feGaussianBlur stdDeviation="34.8011" result="effect1_foregroundBlur_2588_70942"/>
+					y="71.429"
+					width="333.684"
+					height="225.195"
+					filterUnits="userSpaceOnUse"
+					color-interpolation-filters="sRGB"
+				>
+					<feFlood flood-opacity="0" result="BackgroundImageFix" />
+					<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+					<feGaussianBlur stdDeviation="34.8011" result="effect1_foregroundBlur_2588_70942" />
 				</filter>
-				<radialGradient id="paint0_radial_2588_70942" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(364.797 285.845) rotate(37.0985) scale(209.04 209.04)">
+				<radialGradient
-					<stop offset="0.0625" stop-color="#FE9567"/>
+					id="paint0_radial_2588_70942"
-					<stop offset="0.421875" stop-color="#FD366E"/>
+					cx="0"
+					cy="0"
+					r="1"
+					gradientUnits="userSpaceOnUse"
+					gradientTransform="translate(364.797 285.845) rotate(37.0985) scale(209.04 209.04)"
+				>
+					<stop offset="0.0625" stop-color="#FE9567" />
+					<stop offset="0.421875" stop-color="#FD366E" />
 				</radialGradient>
-				<radialGradient id="paint1_radial_2588_70942" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(427.577 248.547) rotate(90) scale(41.5954 119.581)">
+				<radialGradient
-					<stop stop-color="#FE9567"/>
+					id="paint1_radial_2588_70942"
-					<stop offset="1" stop-color="#FE9567" stop-opacity="0"/>
+					cx="0"
+					cy="0"
+					r="1"
+					gradientUnits="userSpaceOnUse"
+					gradientTransform="translate(427.577 248.547) rotate(90) scale(41.5954 119.581)"
+				>
+					<stop stop-color="#FE9567" />
+					<stop offset="1" stop-color="#FE9567" stop-opacity="0" />
 				</radialGradient>
-				<radialGradient id="paint2_radial_2588_70942" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(413.058 184.027) rotate(90) scale(40.0587 98.4768)">
+				<radialGradient
-					<stop stop-color="#FE9567"/>
+					id="paint2_radial_2588_70942"
-					<stop offset="1" stop-color="#FD366E"/>
+					cx="0"
+					cy="0"
+					r="1"
+					gradientUnits="userSpaceOnUse"
+					gradientTransform="translate(413.058 184.027) rotate(90) scale(40.0587 98.4768)"
+				>
+					<stop stop-color="#FE9567" />
+					<stop offset="1" stop-color="#FD366E" />
 				</radialGradient>
 			</defs>
 		</svg>
@@ -79,22 +148,51 @@
 	</Spline>
 
 	<main class="aw-main-section u-position-relative">
-
+		<div
-		<div class="u-position-absolute u-inset-inline-start-0 u-inset-block-start-16 aw-u-opacity-40-mobile"
+			class="u-position-absolute u-inset-inline-start-0 u-inset-block-start-16 aw-u-opacity-40-mobile"
-				style="    margin-inline-start: -30px;">
+			style="    margin-inline-start: -30px;"
-			<svg xmlns="http://www.w3.org/2000/svg" width="336" height="708" viewBox="0 0 336 708" fill="none">
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="336"
+				height="708"
+				viewBox="0 0 336 708"
+				fill="none"
+			>
 				<g opacity="0.3" filter="url(#filter0_f_2588_70948)">
-					<ellipse cx="13.6533" cy="353.688" rx="119.415" ry="198.315" transform="rotate(-32.9472 13.6533 353.688)" fill="url(#paint0_radial_2588_70948)"/>
+					<ellipse
+						cx="13.6533"
+						cy="353.688"
+						rx="119.415"
+						ry="198.315"
+						transform="rotate(-32.9472 13.6533 353.688)"
+						fill="url(#paint0_radial_2588_70948)"
+					/>
 				</g>
 				<defs>
-					<filter id="filter0_f_2588_70948" x="-308.325" y="0.242935" width="643.957" height="706.891" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+					<filter
-						<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+						id="filter0_f_2588_70948"
-						<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+						x="-308.325"
-						<feGaussianBlur stdDeviation="87.3766" result="effect1_foregroundBlur_2588_70948"/>
+						y="0.242935"
+						width="643.957"
+						height="706.891"
+						filterUnits="userSpaceOnUse"
+						color-interpolation-filters="sRGB"
+					>
+						<feFlood flood-opacity="0" result="BackgroundImageFix" />
+						<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+						<feGaussianBlur stdDeviation="87.3766" result="effect1_foregroundBlur_2588_70948" />
 					</filter>
-					<radialGradient id="paint0_radial_2588_70948" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.491 356.428) rotate(86.3936) scale(172.104 118.693)">
+					<radialGradient
-						<stop stop-color="#E7F8F7"/>
+						id="paint0_radial_2588_70948"
-						<stop offset="1" stop-color="#85DBD8"/>
+						cx="0"
+						cy="0"
+						r="1"
+						gradientUnits="userSpaceOnUse"
+						gradientTransform="translate(6.491 356.428) rotate(86.3936) scale(172.104 118.693)"
+					>
+						<stop stop-color="#E7F8F7" />
+						<stop offset="1" stop-color="#85DBD8" />
 					</radialGradient>
 				</defs>
 			</svg>
@@ -105,8 +203,14 @@
 				Run on any provider or through Appwrite Cloud
 			</h1>
 			<p class="aw-description u-max-width-600">
-				Start building today by creating an account on <a href="https://cloud.appwrite.io/" rel="noopener noreferrer" target="_blank">Appwrite Cloud</a>
+				Start building today by creating an account on <a
-				or <a href="/docs/advanced/self-hosting" rel="noopener noreferrer" target="_blank">self-host</a>.
+					href="https://cloud.appwrite.io/"
+					rel="noopener noreferrer"
+					target="_blank">Appwrite Cloud</a
+				>
+				or
+				<a href="/docs/advanced/self-hosting" rel="noopener noreferrer" target="_blank">self-host</a
+				>.
 			</p>
 		</section>
 		<section class="aw-hero is-align-start">
@@ -116,170 +220,7 @@
 			<p class="aw-description u-max-width-600">
 				Follow a quick start guide on your web, mobile, and native frameworks.
 			</p>
-			<ul class="u-flex u-flex-wrap u-gap-16 aw-u-margin-block-32-mobile aw-u-margin-block-40-not-mobile">
+			<Technologies />
-				<li>
-					<a href="/docs/quick-starts/flutter" class="aw-box-icon">
-						<img
-							src="/images/platforms/dark/flutter.svg"
-							alt="Flutter logo"
-							class="u-only-dark"
-							width="32"
-							height="32"
-						/>
-						<img
-							src="/images/platforms/flutter.svg"
-							alt="Flutter logo"
-							class="u-only-light"
-							width="32"
-							height="32"
-						/>
-					</a>
-				</li>
-				<li>
-					<a href="/docs/quick-starts/nextjs" class="aw-box-icon">
-						<img
-							src="/images/platforms/dark/nextjs.svg"
-							alt="Next.js logo"
-							class="u-only-dark"
-							width="32"
-							height="32"
-						/>
-						<img
-							src="/images/platforms/nextjs.svg"
-							alt="Next.js logo"
-							class="u-only-light"
-							width="32"
-							height="32"
-						/>
-					</a>
-				</li>
-				<li>
-					<a href="/docs/quick-starts/react" class="aw-box-icon">
-						<img
-							src="/images/platforms/dark/react.svg"
-							alt="React logo"
-							class="u-only-dark"
-							width="32"
-							height="32"
-						/>
-						<img
-							src="/images/platforms/react.svg"
-							alt="React logo"
-							class="u-only-light"
-							width="32"
-							height="32"
-						/>
-					</a>
-				</li>
-				<li>
-					<a href="/docs/quick-starts/sveltekit" class="aw-box-icon">
-						<img
-							src="/images/platforms/dark/svelte.svg"
-							alt="Svelte logo"
-							class="u-only-dark"
-							width="32"
-							height="32"
-						/>
-						<img
-							src="/images/platforms/svelte.svg"
-							alt="Svelte logo"
-							class="u-only-light"
-							width="32"
-							height="32"
-						/>
-					</a>
-				</li>
-				<li>
-					<a href="/docs/quick-starts/nuxt" class="aw-box-icon">
-						<img
-							src="/images/platforms/dark/nuxt.svg"
-							alt="Nuxt logo"
-							class="u-only-dark"
-							width="32"
-							height="32"
-						/>
-						<img
-							src="/images/platforms/nuxt.svg"
-							alt="Nuxt logo"
-							class="u-only-light"
-							width="32"
-							height="32"
-						/>
-					</a>
-				</li>
-				<li>
-					<a href="/docs/quick-starts/vue" class="aw-box-icon">
-						<img
-							src="/images/platforms/dark/vue.svg"
-							alt="Vue logo"
-							class="u-only-dark"
-							width="32"
-							height="32"
-						/>
-						<img
-							src="/images/platforms/vue.svg"
-							alt="Vue logo"
-							class="u-only-light"
-							width="32"
-							height="32"
-						/>
-					</a>
-				</li>
-				<li>
-					<a href="/docs/quick-starts/angular" class="aw-box-icon">
-						<img
-							src="/images/platforms/dark/angular.svg"
-							alt="Angular logo"
-							class="u-only-dark"
-							width="32"
-							height="32"
-						/>
-						<img
-							src="/images/platforms/angular.svg"
-							alt="Angular logo"
-							class="u-only-light"
-							width="32"
-							height="32"
-						/>
-					</a>
-				</li>
-				<li>
-					<a href="/docs/quick-starts/apple" class="aw-box-icon">
-						<img
-							src="/images/platforms/dark/apple.svg"
-							alt="Apple logo"
-							class="u-only-dark"
-							width="32"
-							height="32"
-						/>
-						<img
-							src="/images/platforms/apple.svg"
-							alt="Apple logo"
-							class="u-only-light"
-							width="32"
-							height="32"
-						/>
-					</a>
-				</li>
-				<li>
-					<a href="/docs/quick-starts/android" class="aw-box-icon">
-						<img
-							src="/images/platforms/dark/android.svg"
-							alt="Android logo"
-							class="u-only-dark"
-							width="32"
-							height="32"
-						/>
-						<img
-							src="/images/platforms/android.svg"
-							alt="Android logo"
-							class="u-only-light"
-							width="32"
-							height="32"
-						/>
-					</a>
-				</li>
-			</ul>
 			<button class="aw-button is-secondary" style:align-self="start">
 				<span class="aw-sub-body-500">Explore all technologies</span>
 			</button>
@@ -440,7 +381,7 @@
 			<div class="u-margin-block-start-24">
 				<ul class="aw-grid-row-4 aw-grid-row-4-m-1">
 					<li>
-						<div class="aw-card is-full-color">
+						<a href="#" class="aw-card is-normal">
 							<img
 								src="/images/icons/illustrated/dark/auth.png"
 								alt=""
@@ -459,10 +400,10 @@
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Sign in users with multiple OAuth providers.
 							</p>
-						</div>
+						</a>
 					</li>
 					<li>
-						<div class="aw-card is-full-color">
+						<a href="#" class="aw-card is-normal">
 							<img
 								src="/images/icons/illustrated/dark/databases.png"
 								alt=""
@@ -483,10 +424,10 @@
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Store your application and user data.
 							</p>
-						</div>
+						</a>
 					</li>
 					<li>
-						<div class="aw-card is-full-color">
+						<a href="#" class="aw-card is-normal">
 							<img
 								src="/images/icons/illustrated/dark/functions.png"
 								alt=""
@@ -507,10 +448,10 @@
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Extend and customize your server's functionality.
 							</p>
-						</div>
+						</a>
 					</li>
 					<li>
-						<div class="aw-card is-full-color">
+						<a href="#" class="aw-card is-normal">
 							<img
 								src="/images/icons/illustrated/dark/storage.png"
 								alt=""
@@ -531,10 +472,10 @@
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Store images, videos, documents, and files.
 							</p>
-						</div>
+						</a>
 					</li>
 					<li>
-						<div class="aw-card is-full-color">
+						<a href="#" class="aw-card is-normal">
 							<img
 								src="/images/icons/illustrated/dark/realtime.png"
 								alt=""
@@ -555,7 +496,7 @@
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Respond to server events in realtime.
 							</p>
-						</div>
+						</a>
 					</li>
 				</ul>
 			</div>
@@ -569,90 +510,88 @@
 			<div class="u-margin-block-start-24">
 				<ul class="aw-grid-row-2">
 					<li>
-						<div class="aw-card is-full-color">
+						<a href="#" class="aw-card is-normal">
 							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">SDKs</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Light-weight SDKs for your favorite platforms.
 							</p>
-						</div>
+						</a>
 					</li>
 					<li>
-						<div class="aw-card is-full-color">
+						<a href="#" class="aw-card is-normal">
 							<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">
 								Integrate with HTTP requests without the needing an SDK
 							</p>
-						</div>
+						</a>
 					</li>
 					<li>
-						<div class="aw-card is-full-color">
+						<a href="#" class="aw-card is-normal">
 							<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">
 								Leverage GraphQL through our SDKs or integrate directly with REST endpoints.
 							</p>
-						</div>
+						</a>
 					</li>
 					<li>
-						<div class="aw-card is-full-color">
+						<a href="#" class="aw-card is-normal">
 							<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">
 								Respond to auth, databases, storage, and function events in realtime.
 							</p>
-						</div>
+						</a>
 					</li>
 				</ul>
 			</div>
 		</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">Migrate to Appwrite</h2>
-			<p class="aw-description u-max-width-600">
+			<p class="aw-description u-max-width-600">Own your data with automatic data migrations.</p>
-				Own your data with automatic data migrations. 
-			</p>
 			<div class="u-margin-block-start-24">
 				<ul class="aw-grid-row-4">
 					<li>
-						<div class="aw-card is-full-color">
+						<a href="#" class="aw-card is-normal">
 							<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">
 								Move data from self-hosted to Appwrite Cloud.
 							</p>
-						</div>
+						</a>
 					</li>
 					<li>
-						<div class="aw-card is-full-color">
+						<a href="#" class="aw-card is-normal">
 							<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">
 								Migrate users and data from Firebase to Appwrite.
 							</p>
-						</div>
+						</a>
 					</li>
 					<li>
-						<div class="aw-card is-full-color">
+						<a href="#" class="aw-card is-normal">
 							<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">
 								Migrate users and data from Supabase to Appwrite.
 							</p>
-						</div>
+						</a>
 					</li>
 					<li>
-						<div class="aw-card is-full-color">
+						<a href="" class="aw-card is-normal">
 							<h4 class="aw-sub-body-500 aw-u-color-text-primary u-margin-block-start-8">Nhost</h4>
 							<p class="aw-sub-body-400 u-margin-block-start-4">
 								Migrate users and data from NHost to Appwrite.
 							</p>
-						</div>
+						</a>
 					</li>
 				</ul>
 			</div>

src/routes/docs/references/+layout.svelte

@@ -1,10 +1,18 @@
+<script lang="ts" context="module">
+	export function getReferencesContext() {
+		return getContext<Writable<boolean>>('references-expandable');
+	}
+</script>
+
 <script lang="ts">
 	import { page } from '$app/stores';
 	import Docs from '$lib/layouts/Docs.svelte';
-	import Sidebar, { type NavParent, type NavTree } from '$lib/layouts/Sidebar.svelte';
 	import { preferredPlatform, preferredVersion } from '$lib/utils/references';
+	import { writable, type Writable } from 'svelte/store';
+	import { getContext, setContext } from 'svelte';
+	import Sidebar, { type NavParent, type NavTree } from '$lib/layouts/Sidebar.svelte';
 
-	export let expandable = false;
+	const expandable = setContext('references-expandable', writable(false));
 
 	$: prefix = `/docs/references/${$preferredVersion ?? $page.params?.version ?? 'cloud'}/${
 		$preferredPlatform ?? $page.params?.platform ?? 'client-web'
@@ -69,11 +77,12 @@
 			label: 'Debugging',
 			items: [
 				{
+					icon: 'icon-document-search',
 					label: 'Response codes',
-					href: '/docs/advanced/platform/response-codes',
+					href: '/docs/advanced/platform/response-codes'
 				}
 			]
-		},
+		}
 	] as NavTree;
 
 	const parent: NavParent = {
@@ -82,7 +91,7 @@
 	};
 </script>
 
-<Docs variant={expandable ? 'expanded' : 'two-side-navs'}>
+<Docs variant={$expandable ? 'expanded' : 'two-side-navs'}>
-	<Sidebar {navigation} {expandable} {parent} />
+	<Sidebar {navigation} expandable={$expandable} {parent} />
 	<slot />
 </Docs>

src/routes/docs/references/+page.markdoc

@@ -0,0 +1,17 @@
+---
+layout: article
+title: Title
+description: Description
+---
+
+{% cards %}
+{% cards_item href="#" title="I am a title" %}
+I am a description
+{% /cards_item %}
+{% cards_item href="#" title="I am a title" %}
+I am a description
+{% /cards_item %}
+{% cards_item href="#" title="I am a title" %}
+I am a description
+{% /cards_item %}
+{% /cards %}

src/routes/docs/references/+page.svelte

@@ -1,5 +0,0 @@
-<script>
-	import Layout from './Layout.svelte';
-</script>
-
-<Layout>placeholder</Layout>

src/routes/docs/references/[version]/[platform]/[service]/+layout.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
-	import Layout from '../../../Layout.svelte';
+	import { onMount } from 'svelte';
+	import { getReferencesContext } from '$routes/docs/references/+layout.svelte';
+
+	const expandable = getReferencesContext();
+
+	onMount(() => {
+		expandable.set(true);
+
+		return () => {
+			expandable.set(false);
+		};
+	});
 </script>
 
-<Layout expandable>
+<slot />
-	<slot />
-</Layout>

src/routes/docs/references/[version]/models/[model]/+layout.svelte

@@ -1,7 +0,0 @@
-<script>
-	import Layout from '../../../Layout.svelte';
-</script>
-
-<Layout>
-	<slot />
-</Layout>