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: 'Cognitive Behavioral Therapy',
description:
'CBT focuses on modifying dysfunctional behaviors, thoughts, and emotions. In session, we will identify these harmful processes and determine if they are an accurate depiction of reality. If they are not, we will help you use strategies to challenge and overcome them.'
},
{
title: 'Solution Focused Therapy',
description:
"We believe the client is the expert of their own story. If you are coming to see us, it's possible that you're overwhelmed with your present situation. We will use the past to provide understanding and reflection, but we will mostly focus on the present and future. We will empower you to create new perspective, possibilities, and plans to actualize your new story."
},
{
title: 'Narrative Therapy',
description:
'Sometimes we become our problems. We start to identify as "a depressed person" or "an anxious person". We can help you learn to see your issues as something you have, but not something that defines you. We will teach you to put some distance between yourself and your issues and empower you to live your life so that you can work on finding out who you really are and what you are capable of.'
},
{
title: 'Emotion Focused Therapy',
description:
'We will work together as a team to find blocked vulnerabilities in your relationship. We will teach you to express your emotions to help you connect rather than disconnect. The goal is to create more trust and a secure bond with your partner.'
},
{
title: 'Gottman Method',
description:
"Gottman's research has shown that negativity impacts the brain and can draw couples apart. We will help you take the steps necessary to maintain a positive orientation towards one another during difficult circumstances. Therapy is most effective when both partners are present so that each person can share their history, story, and goals."
},
{
title: 'Family Systems Theory',
description:
'It is true that profound joy can come from living in a family, but conversely many psychological issues stem from dysfunctional relationships with one another. For example, when one person is struggling with anxiety, pornography addiction, any form of abuse, faith crisis, depression, or health issues it affects the whole family unit. Effective mediation can help in the toughest situations and facilitate respect and resolution.'
},
{
title: 'PPP - Positive Parenting Program',
description:
'We use this method to teach families how to treat and prevent behavioral and emotional problems in children and teens. We use a holistic approach and address concerns in the family, school, and community. We will not tell you how to parent, rather we will give you tools and ideas to manage misbehavior, set rules, encourage behavior you like, and take care of yourself so you can feel good and be confident in your parenting skills.'
}
];
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 meet each client where they are at and customize their therapeutic journey to best fit
their personality and issues. Some of the approaches we use most are listed below:
</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>
|
