diff options
Diffstat (limited to 'src/routes/+page.svelte')
| -rw-r--r-- | src/routes/+page.svelte | 266 |
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> |