Tutorial

<main>
	<!-- Header section -->
	<!-- <header class="header-section">
		<h2 class="header-title">Your Header Title</h2>
	</header> -->

	<!-- Content section -->
	<section class="content-container" id="content-container">
		<div class="main-content">
			<h2 class="header-title">
				<span>{{ userGuide.title }}</span>
			</h2>

			@for (step of userGuide.steps; track step.id) {
				<div class="option-item mb-3" [id]="step.id">
					<div class="img-container">
						<img [src]="'assets/user/images/' + step.image" [alt]="step.title" />
					</div>
					<h3 class="option-text">{{ step.title }}</h3>
				</div>
			}
		</div>
	</section>

	<!-- Footer section -->
	<footer class="footer-section">
		<div class="footer-btn-next">
			<button class="btn btn-danger footer-btn" (click)="onFooterBtnClick()">{{ userGuide.footer }}</button>
		</div>
		<div class="footer-text-section">
			<h5 class="footer-text">Fumer tue</h5>
		</div>
	</footer>
</main>