Massive refactor courtesy of ~5 dollars of tokens. What has my life come to.HEADreleasemain

1 files changed, 188 insertions, 0 deletions

diff --git a/src/routes/approach/+page.svelte b/src/routes/approach/+page.svelte
new file mode 100644
index 0000000..a103139
--- /dev/null
+++ b/src/routes/approach/+page.svelte
@@ -0,0 +1,188 @@
+<script>
+	import { slide } from 'svelte/transition';
+	import { approachImage } from '$lib/data/images';
+
+	const approaches = [
+		{
+			title: 'Solution Focused Therapy',
+			description:
+				"You are the expert of your own story. While we'll draw on the past for insight and understanding, our primary focus will be on the present and future. We'll work together to create new perspectives, explore possibilities, and develop concrete plans that help you move forward with confidence."
+		},
+		{
+			title: 'Cognitive Behavioral Therapy',
+			description:
+				"CBT helps you identify and modify unhelpful patterns in your thoughts, emotions, and behaviors. Together, we'll examine whether these patterns accurately reflect reality, and when they don't, we'll develop strategies to challenge and change them."
+		},
+		{
+			title: 'Narrative Therapy',
+			description:
+				'Sometimes we become so entangled with our struggles that we define ourselves by them, as "an anxious person" or "a depressed person." Narrative therapy helps you separate your identity from your challenges. You\'ll learn to see your difficulties as something you\'re dealing with, not something that defines who you are. This distance creates space for you to discover your true self and recognize your full potential.'
+		},
+		{
+			title: 'Emotion Focused Therapy',
+			description:
+				"Working as a team, we'll identify the emotional blocks that prevent vulnerability in your relationship. You'll learn to express emotions in ways that foster connection rather than create distance. Our goal is to help you build greater trust and a more secure bond with your partner."
+		},
+		{
+			title: 'Gottman Method',
+			description:
+				"Research by Dr. John Gottman demonstrates how negativity affects the brain and creates distance between partners. We'll help you develop the skills to maintain a positive connection, even during challenging times. Couples therapy works best when both partners participate, allowing each person to share their perspective, history, and goals."
+		},
+		{
+			title: 'Family Systems Theory',
+			description:
+				'While families can be a source of profound joy, they can also be the origin of many psychological challenges. When one family member struggles with anxiety, addiction, abuse, faith transitions, depression, or health issues, it impacts the entire family system. Through effective mediation, we can help navigate even the most difficult situations, fostering respect and working toward resolution.'
+		},
+		{
+			title: 'PPP - Positive Parenting Program',
+			description:
+				"This evidence-based program helps families address and prevent behavioral and emotional challenges in children and teens through a holistic approach that considers family, school, and community contexts. Rather than dictating how to parent, we'll provide you with practical tools and strategies to manage difficult behaviors, establish clear boundaries, encourage positive actions, and practice self-care—so you can parent with confidence and feel good about your approach."
+		}
+	];
+
+	let openIndex = -1;
+
+	function toggle(index) {
+		openIndex = openIndex === index ? -1 : index;
+	}
+</script>
+
+<div class="approach">
+	<h1 class="text-center">Our Approach.</h1>
+
+	<section class="card approach__intro">
+		<div class="approach__hero">
+			<img
+				class="shadow rounded"
+				src={approachImage}
+				alt="boats in water"
+				loading="lazy"
+				decoding="async"
+			/>
+		</div>
+		<p>
+			We tailor each therapeutic journey to meet your unique needs, personality, and circumstances.
+			Below are some of the approaches we commonly integrate into our practice:
+		</p>
+	</section>
+
+	<ul class="approach__list">
+		{#each approaches as approach, i (approach.title)}
+			<li class="approach__item">
+				<button
+					class="approach__trigger"
+					type="button"
+					aria-expanded={openIndex === i}
+					on:click={() => toggle(i)}
+				>
+					<span class="approach__title">{approach.title}</span>
+					<span class="approach__icon" aria-hidden="true">
+						<i class={'bi ' + (openIndex === i ? 'bi-dash' : 'bi-plus')}></i>
+					</span>
+				</button>
+				{#if openIndex === i}
+					<div class="approach__content" transition:slide={{ duration: 200 }}>
+						<p>{approach.description}</p>
+					</div>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+</div>
+
+<style>
+	.approach {
+		display: grid;
+		gap: var(--space-5);
+	}
+
+	.approach__intro {
+		display: grid;
+		gap: var(--space-4);
+		text-align: center;
+	}
+
+	.approach__intro p {
+		max-width: 65ch;
+		margin-inline: auto;
+	}
+
+	.approach__hero img {
+		max-width: min(100%, 420px);
+		height: auto;
+	}
+
+	.approach__list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: grid;
+		gap: var(--space-3);
+	}
+
+	.approach__item {
+		background: var(--color-surface);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-sm);
+		overflow: hidden;
+	}
+
+	.approach__trigger {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-3);
+		padding: var(--space-4);
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		font: inherit;
+		text-align: left;
+		transition: background 150ms ease;
+	}
+
+	.approach__trigger:hover {
+		background: rgba(0, 0, 0, 0.02);
+	}
+
+	.approach__icon {
+		transition: transform 150ms ease;
+	}
+
+	.approach__trigger[aria-expanded='true'] .approach__icon {
+		transform: rotate(180deg);
+	}
+
+	.approach__title {
+		font-family: var(--font-serif);
+		font-size: 1.25rem;
+		font-weight: 600;
+	}
+
+	.approach__icon {
+		flex-shrink: 0;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border-radius: 999px;
+		background: color-mix(in srgb, var(--color-accent) 12%, transparent);
+		color: var(--color-accent-strong);
+	}
+
+	.approach__icon i {
+		font-size: 1.1rem;
+	}
+
+	.approach__content {
+		padding: 0 var(--space-4) var(--space-4);
+	}
+
+	.approach__content p {
+		margin: 0;
+		color: var(--color-muted);
+		line-height: 1.6;
+	}
+</style>