1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
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>
|
