Skip to content

Commit 66ee3e8

Browse files
srcdevsrcdev
committed
ServicesSection updated to use existing components
1 parent 7bb852e commit 66ee3e8

1 file changed

Lines changed: 82 additions & 160 deletions

File tree

‎app/components/03.organisms/services/services-section/ServicesSection.vue‎

Lines changed: 82 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -65,174 +65,64 @@
6565
:style-class-passthrough="['mb-20']"
6666
/>
6767

68+
<IndicatorList :item-count="serviceData.idealFor.length">
69+
<template v-for="(_, index) in serviceData.idealFor" :key="index" #[`indicator-${index}`]>
70+
<Icon name="mdi:checkbox-marked-circle-outline" />
71+
</template>
72+
<template v-for="(item, index) in serviceData.idealFor" #[`item-${index}`]>
73+
{{ item }}
74+
</template>
75+
</IndicatorList>
76+
77+
<HeroHeading
78+
tag="h2"
79+
axis="horizontal"
80+
font-size="smaller"
81+
:text-content="[{ text: 'Aftercare &amp; Maintenance', styleClass: 'normal' }]"
82+
:style-class-passthrough="['mb-20']"
83+
/>
84+
6885
<div class="mb-12">
69-
<ul class="space-y-3">
70-
<li class="flex items-start gap-3">
71-
<Icon name="mdi:checkbox-marked-circle-outline" class="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
72-
<span class="text-muted-foreground font-light">
73-
Those wanting noticeable, defined brightness throughout
74-
</span>
75-
</li>
76-
<li class="flex items-start gap-3">
77-
<Icon name="mdi:checkbox-marked-circle-outline" class="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
78-
<span class="text-muted-foreground font-light">Blending and disguising early grey hairs</span>
79-
</li>
80-
<li class="flex items-start gap-3">
81-
<Icon name="mdi:checkbox-marked-circle-outline" class="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
82-
<span class="text-muted-foreground font-light">Adding dramatic contrast against a darker base</span>
83-
</li>
84-
<li class="flex items-start gap-3">
85-
<Icon name="mdi:checkbox-marked-circle-outline" class="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
86-
<span class="text-muted-foreground font-light">
87-
Clients who prefer a more structured, polished finish than balayage
88-
</span>
89-
</li>
90-
</ul>
91-
</div>
92-
<div class="mb-12">
93-
<h2 class="font-display text-2xl mb-4">Aftercare &amp; Maintenance</h2>
9486
<p class="text-muted-foreground font-light leading-relaxed">
9587
Highlights have a more defined regrowth line than balayage, so most clients return every 8–12 weeks for a root
9688
touch-up or refresh. A T-section or face-frame option can stretch this further if you're looking for lower
9789
maintenance. Purple shampoo once a week will keep blonde highlights cool and bright.
9890
</p>
9991
</div>
100-
<div class="mb-12">
101-
<h2 class="font-display text-2xl mb-6">Frequently Asked Questions</h2>
102-
<div class="w-full" data-orientation="vertical">
103-
<div data-state="closed" data-orientation="vertical" class="border-b border-border/30">
104-
<h3 data-orientation="vertical" data-state="closed" class="flex">
105-
<button
106-
id="radix-:r0:"
107-
type="button"
108-
aria-controls="radix-:r1:"
109-
aria-expanded="false"
110-
data-state="closed"
111-
data-orientation="vertical"
112-
class="flex flex-1 items-center justify-between py-4 font-medium transition-all [&amp;[data-state=open]&gt;svg]:rotate-180 text-left font-display text-base hover:no-underline hover:text-primary"
113-
data-radix-collection-item=""
114-
>
115-
What's the difference between a full head and half head?
116-
<svg
117-
xmlns="http://www.w3.org/2000/svg"
118-
width="24"
119-
height="24"
120-
viewBox="0 0 24 24"
121-
fill="none"
122-
stroke="currentColor"
123-
stroke-width="2"
124-
stroke-linecap="round"
125-
stroke-linejoin="round"
126-
class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"
127-
>
128-
<path d="m6 9 6 6 6-6" />
129-
</svg>
130-
</button>
131-
</h3>
132-
<div
133-
id="radix-:r1:"
134-
data-state="closed"
135-
hidden=""
136-
role="region"
137-
aria-labelledby="radix-:r0:"
138-
data-orientation="vertical"
139-
class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
140-
style="
141-
--radix-accordion-content-height: var(--radix-collapsible-content-height);
142-
--radix-accordion-content-width: var(--radix-collapsible-content-width);
143-
"
144-
></div>
145-
</div>
146-
<div data-state="closed" data-orientation="vertical" class="border-b border-border/30">
147-
<h3 data-orientation="vertical" data-state="closed" class="flex">
148-
<button
149-
id="radix-:r2:"
150-
type="button"
151-
aria-controls="radix-:r3:"
152-
aria-expanded="false"
153-
data-state="closed"
154-
data-orientation="vertical"
155-
class="flex flex-1 items-center justify-between py-4 font-medium transition-all [&amp;[data-state=open]&gt;svg]:rotate-180 text-left font-display text-base hover:no-underline hover:text-primary"
156-
data-radix-collection-item=""
157-
>
158-
What is a T-section?
159-
<svg
160-
xmlns="http://www.w3.org/2000/svg"
161-
width="24"
162-
height="24"
163-
viewBox="0 0 24 24"
164-
fill="none"
165-
stroke="currentColor"
166-
stroke-width="2"
167-
stroke-linecap="round"
168-
stroke-linejoin="round"
169-
class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"
170-
>
171-
<path d="m6 9 6 6 6-6" />
172-
</svg>
173-
</button>
174-
</h3>
175-
<div
176-
id="radix-:r3:"
177-
data-state="closed"
178-
hidden=""
179-
role="region"
180-
aria-labelledby="radix-:r2:"
181-
data-orientation="vertical"
182-
class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
183-
style="
184-
--radix-accordion-content-height: var(--radix-collapsible-content-height);
185-
--radix-accordion-content-width: var(--radix-collapsible-content-width);
186-
"
187-
></div>
188-
</div>
189-
<div data-state="closed" data-orientation="vertical" class="border-b border-border/30">
190-
<h3 data-orientation="vertical" data-state="closed" class="flex">
191-
<button
192-
id="radix-:r4:"
193-
type="button"
194-
aria-controls="radix-:r5:"
195-
aria-expanded="false"
196-
data-state="closed"
197-
data-orientation="vertical"
198-
class="flex flex-1 items-center justify-between py-4 font-medium transition-all [&amp;[data-state=open]&gt;svg]:rotate-180 text-left font-display text-base hover:no-underline hover:text-primary"
199-
data-radix-collection-item=""
200-
>
201-
Can highlights go wrong?
202-
<svg
203-
xmlns="http://www.w3.org/2000/svg"
204-
width="24"
205-
height="24"
206-
viewBox="0 0 24 24"
207-
fill="none"
208-
stroke="currentColor"
209-
stroke-width="2"
210-
stroke-linecap="round"
211-
stroke-linejoin="round"
212-
class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"
213-
>
214-
<path d="m6 9 6 6 6-6" />
215-
</svg>
216-
</button>
217-
</h3>
218-
<div
219-
id="radix-:r5:"
220-
data-state="closed"
221-
hidden=""
222-
role="region"
223-
aria-labelledby="radix-:r4:"
224-
data-orientation="vertical"
225-
class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
226-
style="
227-
--radix-accordion-content-height: var(--radix-collapsible-content-height);
228-
--radix-accordion-content-width: var(--radix-collapsible-content-width);
229-
"
230-
></div>
231-
</div>
232-
</div>
233-
</div>
92+
93+
<HeroHeading
94+
tag="h2"
95+
axis="horizontal"
96+
font-size="smaller"
97+
:text-content="[{ text: 'Frequently Asked Questions', styleClass: 'normal' }]"
98+
:style-class-passthrough="['mb-20']"
99+
/>
100+
101+
<AccordianCore
102+
id="faq"
103+
:item-count="serviceData.faqs.length"
104+
:name="`faq-${useId()}`"
105+
:style-class-passthrough="['services-faq']"
106+
>
107+
<template v-for="(faq, key) in serviceData.faqs" :key="`summary-${key}`" #[`accordian-${key}-summary`]>
108+
{{ faq.question }}
109+
</template>
110+
<template v-for="(_, key) in serviceData.faqs" :key="`icon-${key}`" #[`accordian-${key}-icon`]>
111+
<Icon name="mdi:chevron-down" />
112+
</template>
113+
<template v-for="(faq, key) in serviceData.faqs" :key="`content-${key}`" #[`accordian-${key}-content`]>
114+
<p>{{ faq.answer }}</p>
115+
</template>
116+
</AccordianCore>
117+
234118
<div class="glass-card p-8 text-center">
235-
<h3 class="font-display text-xl mb-3">Ready to book your highlights appointment?</h3>
119+
<HeroHeading
120+
tag="h2"
121+
axis="horizontal"
122+
font-size="smaller"
123+
:text-content="[{ text: 'Ready to book your highlights appointment?', styleClass: 'normal' }]"
124+
:style-class-passthrough="['mb-20']"
125+
/>
236126
<p class="text-muted-foreground font-light text-sm mb-6">Mobile service across Bath — I come to you.</p>
237127
<a
238128
href="/#contact"
@@ -323,5 +213,37 @@ watch(
323213
}
324214
}
325215
}
216+
217+
.glass-card {
218+
background: rgba(255, 255, 255, 0.6);
219+
border-radius: 1rem;
220+
backdrop-filter: blur(10px);
221+
}
222+
223+
.services-faq {
224+
margin-block-end: 24px;
225+
226+
&.display-accordian {
227+
max-width: none;
228+
/* margin: 0; */
229+
230+
.accordian-item.expanding-panel {
231+
border-block-end: 1px solid currentColor;
232+
opacity: 0.7;
233+
234+
&:first-child {
235+
border-block-start: 1px solid currentColor;
236+
}
237+
238+
.expanding-panel-details .expanding-panel-summary {
239+
padding-block: 1.2rem;
240+
}
241+
242+
.expanding-panel-content .inner {
243+
/* padding-block-end: 1.2rem; */
244+
}
245+
}
246+
}
247+
}
326248
}
327249
</style>

0 commit comments

Comments
 (0)