diff --git a/src/lib/layouts/DocsArticle.svelte b/src/lib/layouts/DocsArticle.svelte
index 2545782681..9a7ab6063d 100644
--- a/src/lib/layouts/DocsArticle.svelte
+++ b/src/lib/layouts/DocsArticle.svelte
@@ -110,9 +110,13 @@
 					<h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5>
 				</div>
 				<ol class="aw-references-menu-list">
-					{#each toc as parent}
-						<li class="aw-references-menu-item">
-							<a href={parent.href} class="aw-references-menu-link" class:is-selected={parent.selected}>
+					{#each toc as parent (parent.href)}
+						<li class="aw-references-menu-item" class:article-scroll-indicator={parent.selected}>
+							<a
+								href={parent.href}
+								class="aw-references-menu-link"
+								class:is-selected={parent.selected}
+							>
 								{#if parent?.step}
 									<span class="aw-numeric-badge">{parent.step}</span>
 								{/if}
@@ -144,3 +148,18 @@
 		</aside>
 	</article>
 </main>
+
+<style lang="scss">
+	.article-scroll-indicator {
+		position: relative;
+		&::before {
+			position: absolute;
+			content: '';
+			top: 0;
+			left: -1.5rem;
+			height: 100%;
+			width: 2px;
+			background-color: hsl(var(--p-references-menu-link-color-text));
+		}
+	}
+</style>
diff --git a/src/lib/layouts/DocsTutorial.svelte b/src/lib/layouts/DocsTutorial.svelte
index 0d8dcea311..b40a677051 100644
--- a/src/lib/layouts/DocsTutorial.svelte
+++ b/src/lib/layouts/DocsTutorial.svelte
@@ -125,7 +125,11 @@
 				<ol class="aw-references-menu-list">
 					{#each tutorials as tutorial}
 						<li class="aw-references-menu-item">
-							<a href={tutorial.href} class="aw-references-menu-link">
+							<a
+								href={tutorial.href}
+								class="aw-references-menu-link"
+								class:tutorial-scroll-indicator={currentStep === tutorial.step}
+							>
 								<span class="aw-numeric-badge">{tutorial.step}</span>
 								<span class="aw-caption-400">{tutorial.title}</span>
 							</a>
@@ -175,3 +179,18 @@
 		</aside>
 	</article>
 </main>
+
+<style lang="scss">
+	.tutorial-scroll-indicator {
+		position: relative;
+		&::before {
+			position: absolute;
+			content: '';
+			top: 0;
+			left: -1.5rem;
+			height: 100%;
+			width: 2px;
+			background-color: hsl(var(--p-references-menu-link-color-text));
+		}
+	}
+</style>
diff --git a/src/routes/docs/tutorials/example-2/+page.svelte b/src/routes/docs/tutorials/example-2/+page.svelte
deleted file mode 100644
index 62083f4ca1..0000000000
--- a/src/routes/docs/tutorials/example-2/+page.svelte
+++ /dev/null
@@ -1,310 +0,0 @@
-<script>
-	import { Docs } from '$lib/layouts';
-	import Sidebar from '$routes/docs/Sidebar.svelte';
-	import MainFooter from '../../../../lib/components/MainFooter.svelte';
-</script>
-
-<main class="u-contents">
-	<article class="aw-article u-contents">
-		<header class="aw-article-header">
-			<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
-				<button
-					class="
-                            aw-button is-text aw-is-only-mobile
-                            aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12"
-					aria-label="previous page"
-				>
-					<span class="icon-cheveron-left" aria-hidden="true" />
-				</button>
-				<ul class="aw-metadata aw-caption-400">
-					<li>[level-of-difficulty]</li>
-					<li>[time-to-read] min</li>
-				</ul>
-				<div class="u-position-relative u-flex u-cross-center">
-					<button
-						class="
-                            aw-button is-text is-only-icon aw-u-cross-center aw-u-size-40
-                            u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
-						aria-label="previous page"
-					>
-						<span
-							class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary aw-is-not-mobile"
-							aria-hidden="true"
-						/>
-					</button>
-					<h1 class="aw-title">Header</h1>
-				</div>
-			</div>
-			<div class="aw-article-header-end" />
-		</header>
-		<div class="aw-article-content">
-			<section class="aw-article-content-section">
-				<header class="aw-article-content-header">
-					<div class="u-flex u-gap-16">
-						<span class="aw-numeric-badge aw-u-margin-block-start-2">2</span>
-						<h1 class="aw-label aw-u-color-text-primary">Prerequisites</h1>
-					</div>
-				</header>
-				<p>
-					Lorem ipsum dolor sit amet consectetur. Ullamcorper tincidunt ut egestas mauris rhoncus
-					arcu. Habitant est leo maecenas et. Tempus elementum eget rutrum eget semper. Vulputate
-					quis odio velit fames tristique sit magna nec ut.
-				</p>
-			</section>
-			<section class="aw-article-content-section">
-				<header class="aw-article-content-header">
-					<h2 class="aw-main-body-500 aw-u-color-text-primary">Title</h2>
-				</header>
-				<p>
-					Lorem ipsum dolor sit amet consectetur. Cursus gravida nisl dictum et sit. Eu gravida vel
-					velit ac tempor eu a ullamcorper.
-				</p>
-				<div class="aw-media">
-					<img
-						class=""
-						src="https://pink.appwrite.io/articles/announcement.png"
-						alt=""
-						loading="lazy"
-					/>
-				</div>
-			</section>
-			<section class="aw-article-content-section">
-				<header class="aw-article-content-header">
-					<h2 class="aw-main-body-500 aw-u-color-text-primary">Title</h2>
-				</header>
-				<ul class="aw-list">
-					<li>Lorem ipsum dolor sit amet consectetur.</li>
-					<li>Lorem ipsum dolor sit amet consectetur. Cras laoreet dolor ultrices ligula.</li>
-					<li>Quam pretium blandit egestas nec diam lacus volutpat a lorem. Porta augue proin.</li>
-				</ul>
-			</section>
-
-			<section class="aw-article-content-section">
-				<header class="aw-article-content-header">
-					<h2 class="aw-main-body-500 aw-u-color-text-primary">Featured products</h2>
-				</header>
-				<p>
-					Lorem ipsum dolor sit amet consectetur. Ullamcorper tincidunt ut egestas mauris rhoncus
-					arcu. Habitant est leo maecenas et. Tempus elementum eget rutrum eget semper. Vulputate
-					quis odio velit fames tristique sit magna nec ut.
-				</p>
-				<section class="aw-code-snippet theme-dark" aria-label="code-snippet panel">
-					<header class="aw-code-snippet-header">
-						<div class="aw-code-snippet-header-start">
-							<div class="u-flex u-gap-16">
-								<div class="aw-tag">
-									<span class="text">Default</span>
-								</div>
-							</div>
-						</div>
-						<div class="aw-code-snippet-header-end">
-							<ul class="buttons-list u-flex u-gap-8">
-								<li class="buttons-list-item u-flex u-cross-child-scenter">
-									<div class="aw-select">
-										<select>
-											<option>Web SDK</option>
-											<option>Android SDK</option>
-										</select>
-										<span class="icon-cheveron-down" aria-hidden="true" />
-									</div>
-								</li>
-								<li class="buttons-list-item aw-u-padding-inline-start-20">
-									<button class="aw-icon-button" aria-label="copy code from code-snippet">
-										<span class="icon-duplicate" aria-hidden="true" />
-									</button>
-								</li>
-							</ul>
-						</div>
-					</header>
-					<div class="aw-code-snippet-content">CONTENT</div>
-				</section>
-			</section>
-
-			<section class="aw-article-content-section">
-				<header class="aw-article-content-header">
-					<h2 class="aw-main-body-500">Featured products</h2>
-				</header>
-				<p>
-					Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas ut.
-					Dictum tortor arcu feugiat metus pellentesque posuere.
-				</p>
-				<section class="aw-code-snippet theme-dark" aria-label="code-snippet panel">
-					<header class="aw-code-snippet-header">
-						<div class="aw-code-snippet-header-start">
-							<div class="u-flex u-gap-16">
-								<div class="aw-tag">
-									<span class="text">Default</span>
-								</div>
-							</div>
-						</div>
-						<div class="aw-code-snippet-header-end">
-							<ul class="buttons-list u-flex u-gap-8">
-								<li class="buttons-list-item u-flex u-cross-child-scenter">
-									<div class="aw-select">
-										<select>
-											<option>Web SDK</option>
-											<option>Android SDK</option>
-										</select>
-										<span class="icon-cheveron-down" aria-hidden="true" />
-									</div>
-								</li>
-								<li class="buttons-list-item aw-u-padding-inline-start-20">
-									<button class="aw-icon-button" aria-label="copy code from code-snippet">
-										<span class="icon-duplicate" aria-hidden="true" />
-									</button>
-								</li>
-							</ul>
-						</div>
-					</header>
-					<div class="aw-code-snippet-content">CONTENT</div>
-				</section>
-				<p>
-					Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas ut.
-					Dictum tortor arcu feugiat metus pellentesque posuere.
-				</p>
-				<section class="aw-code-snippet theme-dark" aria-label="code-snippet panel">
-					<header class="aw-code-snippet-header">
-						<div class="aw-code-snippet-header-start">
-							<div class="u-flex u-gap-16">
-								<div class="aw-tag">
-									<span class="text">Default</span>
-								</div>
-							</div>
-						</div>
-						<div class="aw-code-snippet-header-end">
-							<ul class="buttons-list u-flex u-gap-8">
-								<li class="buttons-list-item u-flex u-cross-child-scenter">
-									<div class="aw-select">
-										<select>
-											<option>Web SDK</option>
-											<option>Android SDK</option>
-										</select>
-										<span class="icon-cheveron-down" aria-hidden="true" />
-									</div>
-								</li>
-								<li class="buttons-list-item aw-u-padding-inline-start-20">
-									<button class="aw-icon-button" aria-label="copy code from code-snippet">
-										<span class="icon-duplicate" aria-hidden="true" />
-									</button>
-								</li>
-							</ul>
-						</div>
-					</header>
-					<div class="aw-code-snippet-content">CONTENT</div>
-				</section>
-			</section>
-
-			<div class="u-flex u-main-space-between">
-				<button class="aw-button is-text">
-					<span class="icon-cheveron-left" aria-hidden="true" />
-					<span class="aw-sub-body-500"
-						>Step 1<span class="aw-is-not-mobile">: Setting up the environment</span></span
-					>
-				</button>
-				<button class="aw-button is-secondary">
-					<span class="aw-sub-body-500"
-						>Step 3<span class="aw-is-not-mobile">: Creating a login page</span></span
-					>
-					<span class="icon-cheveron-right" aria-hidden="true" />
-				</button>
-			</div>
-
-			<section class="aw-content-footer">
-				<header class="aw-content-footer-header u-cross-center">
-					<div class="aw-content-footer-header-start u-cross-center">
-						<h5 class="aw-main-body-500 aw-u-color-text-primary">Was this page helpful?</h5>
-						<div class="u-flex u-gap-8">
-							<input
-								class="aw-radio-button is-like"
-								type="radio"
-								aria-label="Helpful"
-								name="happy"
-							/>
-							<input
-								class="aw-radio-button is-dislike"
-								type="radio"
-								aria-label="UnHelpful"
-								name="happy"
-							/>
-						</div>
-					</div>
-					<div class="aw-content-footer-header-end">
-						<ul class="aw-metadata aw-caption-400">
-							<li>Last updated: July 16, 2023</li>
-							<li>
-								<button class="aw-u-color-text-accent-click">
-									<span>Update on GitHub</span>
-								</button>
-							</li>
-						</ul>
-					</div>
-				</header>
-				<div class="aw-card is-transparent" style="--card-padding:1rem">
-					<label for="message">
-						<span class="aw-caption-400 aw-u-color-text-primary">What did you like?</span>
-						<span class="aw-caption-400">(optional)</span>
-					</label>
-					<textarea
-						class="aw-input-text u-margin-block-start-8"
-						id="message"
-						placeholder="Write your message"
-					/>
-					<div class="u-flex u-gap-8 u-main-end u-margin-block-start-16">
-						<button class="aw-button is-text">
-							<span class="">Cancel</span>
-						</button>
-						<button class="aw-button">
-							<span class="">Submit</span>
-						</button>
-					</div>
-				</div>
-			</section>
-		</div>
-		<aside class="aw-references-menu aw-u-padding-inline-start-24">
-			<div class="aw-references-menu-content">
-				<div class="u-flex u-main-space-between u-cross-center u-gap-16">
-					<h5 class="aw-references-menu-title aw-eyebrow">Tutorial Steps</h5>
-				</div>
-				<ol class="aw-references-menu-list">
-					<li class="aw-references-menu-item">
-						<a href="#" class="aw-references-menu-link">
-							<span class="aw-numeric-badge">1</span>
-							<span class="aw-caption-400">Title</span>
-						</a>
-					</li>
-					<li class="aw-references-menu-item">
-						<a href="#" class="aw-references-menu-link is-selected">
-							<span class="aw-numeric-badge">2</span>
-							<span class="aw-caption-400">Title</span>
-						</a>
-						<ol class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32">
-							<li class="aw-references-menu-item">
-								<a href="#" class="aw-references-menu-link is-selected">
-									<span class="aw-caption-400">Subtitle</span>
-								</a>
-							</li>
-							<li class="aw-references-menu-item">
-								<a href="#" class="aw-references-menu-link is-selected">
-									<span class="aw-caption-400">Subtitle</span>
-								</a>
-							</li>
-						</ol>
-					</li>
-					<li class="aw-references-menu-item">
-						<a href="#" class="aw-references-menu-link">
-							<span class="aw-numeric-badge">3</span>
-							<span class="aw-caption-400">Title</span>
-						</a>
-					</li>
-				</ol>
-				<div class="u-sep-block-start u-padding-block-start-20">
-					<a class="aw-button is-text u-main-start aw-u-padding-inline-0" href="#">
-						<span class="icon-arrow-up" aria-hidden="true" />
-						<span class="aw-sub-body-500">Back to top</span>
-					</a>
-				</div>
-			</div>
-		</aside>
-	</article>
-</main>
-<MainFooter variant="docs" />
diff --git a/src/routes/docs/tutorials/example/+page.svelte b/src/routes/docs/tutorials/example/+page.svelte
deleted file mode 100644
index d20fee90b8..0000000000
--- a/src/routes/docs/tutorials/example/+page.svelte
+++ /dev/null
@@ -1,507 +0,0 @@
-<script>
-	import { Docs } from '$lib/layouts';
-	import Sidebar from '$routes/docs/Sidebar.svelte';
-	import MainFooter from '$lib/components/MainFooter.svelte';
-</script>
-
-<main class="u-contents">
-	<article class="aw-article u-contents">
-		<header class="aw-article-header">
-			<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
-				<button
-					class="
-                            aw-button is-text aw-is-only-mobile
-                            aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12"
-					aria-label="previous page"
-				>
-					<span class="icon-cheveron-left" aria-hidden="true" />
-				</button>
-				<ul class="aw-metadata aw-caption-400">
-					<li>[level-of-difficulty]</li>
-					<li>[time-to-read] min</li>
-				</ul>
-				<div class="u-position-relative u-flex u-cross-center">
-					<button
-						class="
-                            aw-button is-text is-icon aw-u-cross-center aw-u-size-40
-                            u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
-						aria-label="previous page"
-					>
-						<span
-							class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary aw-is-not-mobile"
-							aria-hidden="true"
-						/>
-					</button>
-					<h1 class="aw-title">Header</h1>
-				</div>
-			</div>
-			<div class="aw-article-header-end" />
-		</header>
-		<div class="aw-article-content">
-			<section class="aw-article-content-section">
-				<section class="aw-article-content-sub-section">
-					<header class="aw-article-content-header">
-						<h2 class="aw-main-body-500">Prerequisites</h2>
-					</header>
-					<ul class="aw-list">
-						<li>Lorem ipsum dolor sit amet consectetur.</li>
-						<li>Lorem ipsum dolor sit amet consectetur. Cras laoreet dolor ultrices ligula.</li>
-						<li>
-							Quam pretium blandit egestas nec diam lacus volutpat a lorem. Porta augue proin.
-						</li>
-					</ul>
-					<div class="aw-media">
-						<img
-							class=""
-							src="https://pink.appwrite.io/articles/announcement.png"
-							alt=""
-							loading="lazy"
-						/>
-					</div>
-				</section>
-				<section class="aw-article-content-sub-section">
-					<header class="aw-article-content-header">
-						<h2 class="aw-main-body-500">Featured products</h2>
-						<ul class="u-flex u-flex-wrap u-gap-8">
-							<li><div class="aw-tag">product</div></li>
-							<li><div class="aw-tag">product</div></li>
-							<li><div class="aw-tag">product</div></li>
-						</ul>
-					</header>
-					<p>
-						Lorem ipsum dolor sit amet consectetur. Ullamcorper tincidunt ut egestas mauris rhoncus
-						arcu. Habitant est leo maecenas et. Tempus elementum eget rutrum eget semper. Vulputate
-						quis odio velit fames tristique sit magna nec ut.
-					</p>
-				</section>
-			</section>
-
-			<section class="aw-article-content-section is-with-line">
-				<section class="aw-article-content-sub-section">
-					<header class="aw-article-content-header">
-						<span class="aw-numeric-badge">1</span>
-						<h2 class="aw-main-body-500">Featured products</h2>
-					</header>
-					<p>
-						Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas
-						ut. Dictum tortor arcu feugiat metus pellentesque posuere.
-					</p>
-					<section class="aw-code-snippet theme-dark" aria-label="code-snippet panel">
-						<header class="aw-code-snippet-header">
-							<div class="aw-code-snippet-header-start">
-								<div class="u-flex u-gap-16">
-									<div class="aw-tag">
-										<span class="text">Default</span>
-									</div>
-								</div>
-							</div>
-							<div class="aw-code-snippet-header-end">
-								<ul class="buttons-list u-flex u-gap-8">
-									<li class="buttons-list-item u-flex u-cross-child-scenter">
-										<div class="aw-select">
-											<select>
-												<option>Web SDK</option>
-												<option>Android SDK</option>
-											</select>
-											<span class="icon-cheveron-down" aria-hidden="true" />
-										</div>
-									</li>
-									<li class="buttons-list-item aw-u-padding-inline-start-20">
-										<button class="aw-icon-button" aria-label="copy code from code-snippet">
-											<span class="icon-duplicate" aria-hidden="true" />
-										</button>
-									</li>
-								</ul>
-							</div>
-						</header>
-						<div class="aw-code-snippet-content">CONTENT</div>
-					</section>
-				</section>
-			</section>
-
-			<section class="aw-article-content-section is-with-line">
-				<section class="aw-article-content-sub-section">
-					<header class="aw-article-content-header">
-						<span class="aw-numeric-badge">2</span>
-						<h2 class="aw-main-body-500">Featured products</h2>
-					</header>
-					<p>
-						Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas
-						ut. Dictum tortor arcu feugiat metus pellentesque posuere.
-					</p>
-					<section class="aw-code-snippet theme-dark" aria-label="code-snippet panel">
-						<header class="aw-code-snippet-header">
-							<div class="aw-code-snippet-header-start">
-								<div class="u-flex u-gap-16">
-									<div class="aw-tag">
-										<span class="text">Default</span>
-									</div>
-								</div>
-							</div>
-							<div class="aw-code-snippet-header-end">
-								<ul class="buttons-list u-flex u-gap-8">
-									<li class="buttons-list-item u-flex u-cross-child-scenter">
-										<div class="aw-select">
-											<select>
-												<option>Web SDK</option>
-												<option>Android SDK</option>
-											</select>
-											<span class="icon-cheveron-down" aria-hidden="true" />
-										</div>
-									</li>
-									<li class="buttons-list-item aw-u-padding-inline-start-20">
-										<button class="aw-icon-button" aria-label="copy code from code-snippet">
-											<span class="icon-duplicate" aria-hidden="true" />
-										</button>
-									</li>
-								</ul>
-							</div>
-						</header>
-						<div class="aw-code-snippet-content">CONTENT</div>
-					</section>
-				</section>
-				<section class="aw-article-content-sub-section">
-					<h2 class="aw-sub-body-500 aw-u-color-text-primary">Sub title</h2>
-					<p>
-						Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas
-						ut. Dictum tortor arcu feugiat metus pellentesque posuere.
-					</p>
-				</section>
-				<section class="aw-article-content-sub-section">
-					<h2 class="aw-sub-body-500 aw-u-color-text-primary">Sub title</h2>
-					<p>
-						Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas
-						ut. Dictum tortor arcu feugiat metus pellentesque posuere.
-					</p>
-					<section class="aw-code-snippet theme-dark" aria-label="code-snippet panel">
-						<header class="aw-code-snippet-header">
-							<div class="aw-code-snippet-header-start">
-								<div class="u-flex u-gap-16">
-									<div class="aw-tag">
-										<span class="text">Default</span>
-									</div>
-								</div>
-							</div>
-							<div class="aw-code-snippet-header-end">
-								<ul class="buttons-list u-flex u-gap-8">
-									<li class="buttons-list-item u-flex u-cross-child-scenter">
-										<div class="aw-select">
-											<select>
-												<option>Web SDK</option>
-												<option>Android SDK</option>
-											</select>
-											<span class="icon-cheveron-down" aria-hidden="true" />
-										</div>
-									</li>
-									<li class="buttons-list-item aw-u-padding-inline-start-20">
-										<button class="aw-icon-button" aria-label="copy code from code-snippet">
-											<span class="icon-duplicate" aria-hidden="true" />
-										</button>
-									</li>
-								</ul>
-							</div>
-						</header>
-						<div class="aw-code-snippet-content">CONTENT</div>
-					</section>
-				</section>
-			</section>
-
-			<section class="aw-article-content-section">
-				<section class="aw-article-content-sub-section">
-					<header class="aw-article-content-header">
-						<span class="aw-numeric-badge">3</span>
-						<h2 class="aw-main-body-500">Featured products</h2>
-					</header>
-					<p>
-						Lorem ipsum dolor sit amet consectetur. Id nisi quam nisl iaculis semper nibh egestas
-						ut. Dictum tortor arcu feugiat metus pellentesque posuere.
-					</p>
-					<section class="aw-code-snippet theme-dark" aria-label="code-snippet panel">
-						<header class="aw-code-snippet-header">
-							<div class="aw-code-snippet-header-start">
-								<div class="u-flex u-gap-16">
-									<div class="aw-tag">
-										<span class="text">Default</span>
-									</div>
-								</div>
-							</div>
-							<div class="aw-code-snippet-header-end">
-								<ul class="buttons-list u-flex u-gap-8">
-									<li class="buttons-list-item u-flex u-cross-child-scenter">
-										<div class="aw-select">
-											<select>
-												<option>Web SDK</option>
-												<option>Android SDK</option>
-											</select>
-											<span class="icon-cheveron-down" aria-hidden="true" />
-										</div>
-									</li>
-									<li class="buttons-list-item aw-u-padding-inline-start-20">
-										<button class="aw-icon-button" aria-label="copy code from code-snippet">
-											<span class="icon-duplicate" aria-hidden="true" />
-										</button>
-									</li>
-								</ul>
-							</div>
-						</header>
-						<div class="aw-code-snippet-content">CONTENT</div>
-					</section>
-				</section>
-			</section>
-
-			<section class="aw-article-content-section">
-				<section class="aw-article-content-sub-section">
-					<blockquote class="aw-blockquote">
-						<p class="aw-description">
-							“Lorem ipsum dolor sit amet consectetur. Diam fermentum tellus ante purus nullam eget
-							sit id ac. Purus viverra ultrices fusce posuere sed enim duis aliquam sit. Vitae fames
-							potenti donec ultricies in. Quis sed iaculis consectetur cras feugiat nibh gravida
-							tincidunt volutpat. Eleifend vel blandit cras tempor sed nam quis aliquet. Facilisi
-							tempor amet id integer gravida duis. Aliquet nulla tellus risus tortor neque
-							vestibulum arcu.”
-						</p>
-						<footer class="aw-blockquote-footer">
-							<div class="aw-sub-body-400 aw-u-color-text-primary" role="">[quoted name]</div>
-							<div class="aw-caption-400">[role - optional]</div>
-						</footer>
-					</blockquote>
-				</section>
-				<section class="aw-article-content-sub-section">
-					<div class="aw-inline-info">
-						<span class="icon-info" aria-hidden="true" />
-						<h5 class="aw-sub-body-500 aw-u-color-text-primary">
-							Lorem ipsum dolor sit amet consectetur
-						</h5>
-						<p class="aw-paragraph-md">
-							Lorem ipsum dolor sit amet consectetur. Sed volutpat nec pharetra nisl dis. Donec
-							accumsan in orci volutpat augue sed sit sollicitudin. Nunc nec nunc nisl faucibus
-							cursus diam tellus aliquet. Ac blandit et varius egestas.
-						</p>
-					</div>
-				</section>
-				<section class="aw-article-content-sub-section">
-					<ul class="aw-pink-dots">
-						<li>aaa</li>
-						<li>bbb</li>
-						<li>
-							ccc
-							<ul class="aw-pink-dots">
-								<li>aaa</li>
-								<li>bbb</li>
-								<li>
-									ccc
-									<ul class="aw-pink-dots">
-										<li>aaa</li>
-										<li>bbb</li>
-										<li>ccc</li>
-									</ul>
-								</li>
-							</ul>
-						</li>
-					</ul>
-					<ul class="aw-numeric-list">
-						<li>aaa</li>
-						<li>bbb</li>
-						<li>
-							ccc
-							<ul class="aw-numeric-list">
-								<li>aaa</li>
-								<li>bbb</li>
-								<li>
-									ccc
-									<ul class="aw-numeric-list">
-										<li>aaa</li>
-										<li>bbb</li>
-										<li>
-											ccc
-										</li>
-									</ul>
-								</li>
-							</ul>
-						</li>
-					</ul>
-				</section>
-				<section class="aw-article-content-sub-section">
-					<div class="aw-card is-normal">
-						<nav class="tabs u-flex u-gap-16">
-							<ul class="tabs-list">
-								<li class="tabs-item">
-									<button class="tabs-button is-selected">item</button>
-								</li>
-								<li class="tabs-item">
-									<button class="tabs-button">item</button>
-								</li>
-								<li class="tabs-item">
-									<button class="tabs-button">item</button>
-								</li>
-								<li class="tabs-item">
-									<button class="tabs-button">item</button>
-								</li>
-							</ul>
-							<button class="aw-button is-text u-margin-inline-start-auto" aria-label="More options">
-								<span class="icon-dots-horizontal" aria-hidden="true"></span>
-							</button>
-						</nav>
-						<div class="aw-u-sep-block-start u-padding-block-start-16">
-
-							<section class="aw-code-snippet theme-dark" aria-label="code-snippet panel">
-								<header class="aw-code-snippet-header">
-									<div class="aw-code-snippet-header-start">
-										<div class="u-flex u-gap-16">
-											<div class="aw-tag">
-												<span class="text">Default</span>
-											</div>
-										</div>
-									</div>
-									<div class="aw-code-snippet-header-end">
-										<ul class="buttons-list u-flex u-gap-8">
-											<li class="buttons-list-item u-flex u-cross-child-scenter">
-												<div class="aw-select">
-													<select>
-														<option>Web SDK</option>
-														<option>Android SDK</option>
-													</select>
-													<span class="icon-cheveron-down" aria-hidden="true" />
-												</div>
-											</li>
-											<li class="buttons-list-item aw-u-padding-inline-start-20">
-												<button class="aw-icon-button" aria-label="copy code from code-snippet">
-													<span class="icon-duplicate" aria-hidden="true" />
-												</button>
-											</li>
-										</ul>
-									</div>
-								</header>
-								<div class="aw-code-snippet-content">CONTENT</div>
-							</section>
-							<div class="aw-article-content-spacing-logic u-margin-block-start-32">
-								<h4 class="aw-sub-body-500 aw-u-color-text-primary">
-									Lorem ipsum dolor sit
-								</h4>
-								<p class="aw-sub-body-400">
-									Lorem act <code class="aw-inline-code">inline-code</code> consectetur. Feugiat ac aliquam nunc nunc habitant.
-								</p>
-								<p class="aw-paragraph-md">
-									Lorem ipsum dolor sit amet consectetur. Sagittis dui nullam  <code class="aw-inline-code">inline-code</code>  Augue quis massa mattis hendrerit in. Maecenas odio vulputate nulla id ultricies lobortis sit. Quis elit sed leo ultrices sapien etiam praesent fermentum. Sit erat duis ac feugiat augue ultrices dolor. Facilisis bibendum bibendum cras sodales id.
-								</p>
-							</div>
-
-						</div>
-					</div>
-				</section>
-			</section>
-
-			<section class="aw-content-footer">
-				<header class="aw-content-footer-header">
-					<div class="aw-content-footer-header-start">
-						<h5 class="aw-main-body-500 aw-u-color-text-primary">Was this page helpful?</h5>
-						<div class="u-flex u-gap-8">
-							<button
-								class="aw-radio-button is-like"
-								type="radio"
-								aria-label="Helpful Selected"
-								name="happy"
-							>
-								<span class="icon-thumb-up" aria-hidden="true"></span>
-							</button>
-							<button
-								class="aw-radio-button is-dislike is-selected"
-								type="radio"
-								aria-label="UnHelpful"
-								name="happy"
-							>
-								<span class="icon-thumb-dowm" aria-hidden="true"></span>
-							</button>
-						</div>
-					</div>
-					<div class="aw-content-footer-header-end">
-						<ul class="aw-metadata aw-caption-400">
-							<li>Last updated: July 16, 2023</li>
-							<li>
-								<button class="aw-u-color-text-accent-click">
-									<span>Update on GitHub</span>
-								</button>
-							</li>
-						</ul>
-					</div>
-				</header>
-				<div class="aw-card is-normal">
-					<label for="message">
-						<span class="aw-u-color-text-primary">What did you like?</span>
-						<span class="">(optional)</span>
-					</label>
-					<textarea
-						class="aw-input-text u-margin-block-start-8"
-						id="message"
-						placeholder="Write your message"
-					/>
-					<div class="u-flex u-main-end u-margin-block-start-16">
-						<button class="aw-button is-text">
-							<span class="">Cancel</span>
-						</button>
-						<button class="aw-button">
-							<span class="">Submit</span>
-						</button>
-					</div>
-				</div>
-			</section>
-		</div>
-		<aside class="aw-references-menu aw-u-padding-inline-start-24">
-			<div class="aw-references-menu-content">
-				<div class="u-flex u-main-space-between u-cross-center u-gap-16">
-					<h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5>
-				</div>
-				<ol class="aw-references-menu-list">
-					<li class="aw-references-menu-item">
-						<a href="#" class="aw-references-menu-link is-selected">
-							<span class="aw-caption-400">Prerequisites</span>
-						</a>
-					</li>
-					<li class="aw-references-menu-item">
-						<a href="#" class="aw-references-menu-link">
-							<span class="aw-caption-400">Featured products</span>
-						</a>
-					</li>
-					<li class="aw-references-menu-item">
-						<a href="#" class="aw-references-menu-link">
-							<span class="aw-numeric-badge">1</span>
-							<span class="aw-caption-400">Title</span>
-						</a>
-					</li>
-					<li class="aw-references-menu-item">
-						<a href="#" class="aw-references-menu-link">
-							<span class="aw-numeric-badge">2</span>
-							<span class="aw-caption-400">Title</span>
-						</a>
-						<ol class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32">
-							<li class="aw-references-menu-item">
-								<a href="#" class="aw-references-menu-link">
-									<span class="aw-caption-400">Subtitle</span>
-								</a>
-							</li>
-							<li class="aw-references-menu-item">
-								<a href="#" class="aw-references-menu-link">
-									<span class="aw-caption-400">Subtitle</span>
-								</a>
-							</li>
-						</ol>
-					</li>
-					<li class="aw-references-menu-item">
-						<a href="#" class="aw-references-menu-link">
-							<span class="aw-numeric-badge">3</span>
-							<span class="aw-caption-400">Title</span>
-						</a>
-					</li>
-				</ol>
-				<div class="u-sep-block-start u-padding-block-start-20">
-					<a class="aw-button is-text u-main-start aw-u-padding-inline-0" href="#">
-						<span class="icon-arrow-up" aria-hidden="true" />
-						<span class="aw-sub-body-500">Back to top</span>
-					</a>
-				</div>
-			</div>
-		</aside>
-	</article>
-</main>
-
-<MainFooter variant="docs" />