diff options
Diffstat (limited to 'src/routes/+page.svelte')
| -rw-r--r-- | src/routes/+page.svelte | 265 |
1 files changed, 265 insertions, 0 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte new file mode 100644 index 0000000..4c0265f --- /dev/null +++ b/src/routes/+page.svelte @@ -0,0 +1,265 @@ +<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> + + <h2>Welcome to Misty Mountains Therapy</h2> + + <p> + Founded in 2020 by Jefferson Hunt, we are dedicated to providing high quality therapy services to children and adults throughout the Rexburg area. Our approach combines professional expertise and genuine care to help clients navigate life's challenges. + </p> + + <h3>We're Here to Help</h3> + <p> + We are currently accepting new clients. Whether you're seeking support for yourself or a loved one, we offer personalized treatment tailored to your unique needs and goals. + </p> + + <p> + <strong>Ready to take the first step?</strong> Schedule a <a href={resolveRoute('/contact')}>free 15-minute consultation</a> to see if we're the right fit for you. + </p> + + <aside class="notice notice--warn" aria-label="Crisis information"> + <p style="margin: 0"> + <strong>Crisis Support:</strong> 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 at <a href="tel:18002738255">(800) 273-TALK</a>, 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> |