Massive refactor courtesy of 5 dollars of AI tokens

1 files changed, 266 insertions, 0 deletions

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..71b9920
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,266 @@
+<script>
+	import { resolveRoute } from '$app/paths';
+	import { carouselImages } from '$lib/data/images';
+	import { onMount } from 'svelte';
+
+	const images = [
+		{ src: carouselImages[0], alt: 'Glass office door with the Misty Mountains Therapy logo' },
+		{ src: carouselImages[1], alt: 'Entry hall with a bench for waiting patients' },
+		{ src: carouselImages[2], alt: 'Office room with a rustic lamp and comfortable couch' },
+		{ src: carouselImages[3], alt: 'Welcoming therapy office interior' },
+		{ src: carouselImages[4], alt: 'Misty mountain landscape' }
+	];
+
+	let currentIndex = 0;
+	let intervalId;
+
+	function nextSlide() {
+		currentIndex = (currentIndex + 1) % images.length;
+	}
+
+	function prevSlide() {
+		currentIndex = (currentIndex - 1 + images.length) % images.length;
+	}
+
+	function goToSlide(index) {
+		currentIndex = index;
+	}
+
+	onMount(() => {
+		intervalId = setInterval(nextSlide, 5000);
+		return () => clearInterval(intervalId);
+	});
+
+	function pauseAutoplay() {
+		clearInterval(intervalId);
+	}
+
+	function resumeAutoplay() {
+		clearInterval(intervalId);
+		intervalId = setInterval(nextSlide, 5000);
+	}
+</script>
+
+<section class="hero">
+	<div
+		class="carousel"
+		role="region"
+		aria-label="Office photos"
+		aria-roledescription="carousel"
+		on:mouseenter={pauseAutoplay}
+		on:mouseleave={resumeAutoplay}
+		on:focusin={pauseAutoplay}
+		on:focusout={resumeAutoplay}
+	>
+		<div class="carousel__track" style="transform: translateX(-{currentIndex * 100}%)">
+			{#each images as image, i (image.src)}
+				<div
+					class="carousel__slide"
+					role="group"
+					aria-roledescription="slide"
+					aria-label="{i + 1} of {images.length}"
+					aria-hidden={i !== currentIndex}
+				>
+					<img
+						class="carousel__image"
+						src={image.src}
+						alt={image.alt}
+						loading={i === 0 ? 'eager' : 'lazy'}
+						decoding="async"
+					/>
+				</div>
+			{/each}
+		</div>
+
+		<button
+			class="carousel__btn carousel__btn--prev"
+			type="button"
+			aria-label="Previous slide"
+			on:click={prevSlide}
+		>
+			<i class="bi bi-chevron-left" aria-hidden="true"></i>
+		</button>
+		<button
+			class="carousel__btn carousel__btn--next"
+			type="button"
+			aria-label="Next slide"
+			on:click={nextSlide}
+		>
+			<i class="bi bi-chevron-right" aria-hidden="true"></i>
+		</button>
+
+		<div class="carousel__dots" role="tablist" aria-label="Slide controls">
+			{#each images as _, i (i)}
+				<button
+					class="carousel__dot"
+					class:carousel__dot--active={i === currentIndex}
+					type="button"
+					role="tab"
+					aria-selected={i === currentIndex}
+					aria-label="Go to slide {i + 1}"
+					on:click={() => goToSlide(i)}
+				></button>
+			{/each}
+		</div>
+	</div>
+
+	<div class="hero__content">
+		<h1>Helping you conquer Mount Doom.</h1>
+		<a href={resolveRoute('/contact')} class="button button--primary">
+			Free 15 Minute Consultation
+		</a>
+	</div>
+</section>
+
+<section class="card home-intro">
+	<blockquote>
+		"Darkness must pass, a new day will come, and when the sun shines, it will shine out the clearer."
+		<footer>Samwise Gamgee</footer>
+	</blockquote>
+
+	<p>
+		Misty Mountains Therapy is a privately owned, high quality, specialty therapy clinic,
+		founded in January 2020 by Jefferson Hunt. We are dedicated to providing comprehensive
+		therapy evaluation and treatment services to children and adults for a wide variety of
+		disorders in the most efficient and effective manner possible in the Rexburg area. We
+		believe that therapy should be fun, engaging, and most importantly, useful to our clients.
+	</p>
+	<p>
+		We are currently accepting new clients and offer a variety of services to <strong>help you live the
+		life you desire</strong>. To find the right fit for you, schedule a <a href={resolveRoute('/contact')}
+			>free 15-minute consultation</a
+		>.
+	</p>
+
+	<aside class="notice notice--warn" aria-label="Crisis information">
+		<p style="margin: 0">
+			We do not have a crisis line. If you or someone you know is in danger please call 911, visit your
+			nearest emergency room, call the National Suicide Prevention Lifeline for free crisis counseling at
+			<a href="tel:18002738255">(800)273-TALK</a> (8255), or text HELLO to 741-741.
+		</p>
+	</aside>
+</section>
+
+<style>
+	.hero {
+		display: grid;
+		gap: var(--space-5);
+		margin-bottom: var(--space-5);
+	}
+
+	@media (min-width: 768px) {
+		.hero {
+			grid-template-columns: 1.4fr 1fr;
+			align-items: center;
+		}
+	}
+
+	/* Carousel */
+	.carousel {
+		position: relative;
+		border-radius: var(--radius-sm);
+		overflow: hidden;
+		box-shadow: var(--shadow-sm);
+	}
+
+	.carousel__track {
+		display: flex;
+		transition: transform 400ms ease;
+	}
+
+	.carousel__slide {
+		flex: 0 0 100%;
+		min-width: 0;
+	}
+
+	.carousel__image {
+		display: block;
+		width: 100%;
+		height: auto;
+		aspect-ratio: 4 / 3;
+		object-fit: cover;
+	}
+
+	.carousel__btn {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		background: rgba(255, 255, 255, 0.85);
+		border: none;
+		border-radius: 50%;
+		width: 2.5rem;
+		height: 2.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		opacity: 0;
+		transition: opacity 150ms ease, background 150ms ease;
+		font-size: 1.1rem;
+		color: var(--color-ink);
+	}
+
+	.carousel:hover .carousel__btn,
+	.carousel:focus-within .carousel__btn {
+		opacity: 1;
+	}
+
+	.carousel__btn:hover {
+		background: white;
+	}
+
+	.carousel__btn--prev {
+		left: var(--space-3);
+	}
+
+	.carousel__btn--next {
+		right: var(--space-3);
+	}
+
+	.carousel__dots {
+		position: absolute;
+		bottom: var(--space-3);
+		left: 50%;
+		transform: translateX(-50%);
+		display: flex;
+		gap: var(--space-2);
+	}
+
+	.carousel__dot {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 50%;
+		border: none;
+		background: rgba(255, 255, 255, 0.5);
+		cursor: pointer;
+		padding: 0;
+		transition: background 150ms ease, transform 150ms ease;
+	}
+
+	.carousel__dot:hover {
+		background: rgba(255, 255, 255, 0.8);
+	}
+
+	.carousel__dot--active {
+		background: white;
+		transform: scale(1.25);
+	}
+
+	/* Hero content */
+	.hero__content {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: var(--space-4);
+	}
+
+	.hero__content h1 {
+		margin: 0;
+	}
+
+	/* Intro card - removed max-width for wider feel */
+	.home-intro .notice {
+		margin-top: var(--space-5);
+		margin-bottom: 0;
+	}
+</style>