FAQ.vue — Hostinger Reach – AI-Powered Email Marketing for WordPress 1.0.5

hostinger-reach / frontend / vue / components / FAQ.vue

hostinger-reach / frontend / vue / components Last commit date

Modals 10 months ago skeletons 10 months ago ActionButton.vue 10 months ago ActionButtonsSection.vue 10 months ago Banner.vue 10 months ago FAQ.vue 10 months ago FormItem.vue 10 months ago FormsSection.vue 10 months ago Hero.vue 10 months ago PluginEntriesTable.vue 10 months ago PluginEntry.vue 10 months ago PluginExpansion.vue 10 months ago Toggle.vue 10 months ago UsageCard.vue 10 months ago UsageCardsRow.vue 10 months ago UsageCardsSection.vue 10 months ago

FAQ.vue

233 lines

1	<script setup lang="ts">
2	import { ref } from 'vue';
3
4	import { faqData } from '@/data/faq';
5	import { translate } from '@/utils/translate';
6
7	const expandedFAQ = ref<string \| null>(null);
8
9	const toggleFAQ = (id: string) => {
10	expandedFAQ.value = expandedFAQ.value === id ? null : id;
11	};
12	</script>
13
14	<template>
15	<section class="faq" role="region" aria-labelledby="faq-heading">
16	<div class="faq__container">
17	<div class="faq__list">
18	<HCard border-radius="20px" padding="16px 28px">
19	<template #header>
20	<HText id="faq-heading" as="h2" variant="heading-2">{{ translate('hostinger_reach_faq_title') }}</HText>
21	</template>
22	<div
23	v-for="faq in faqData"
24	:key="faq.id"
25	class="faq__item h-mb-8"
26	:class="{
27	'faq__item--expanded': expandedFAQ === faq.id
28	}"
29	>
30	<button
31	:id="`faq-question-${faq.id}`"
32	class="faq__question"
33	:aria-expanded="expandedFAQ === faq.id"
34	:aria-controls="`faq-answer-${faq.id}`"
35	@click="toggleFAQ(faq.id)"
36	>
37	<span class="faq__question-text">{{ faq.question }}</span>
38	<HIcon
39	:name="expandedFAQ === faq.id ? 'ic-chevron-up-24' : 'ic-chevron-down-24'"
40	size="24"
41	class="faq__icon"
42	aria-hidden="true"
43	/>
44	</button>
45	<div
46	v-show="expandedFAQ === faq.id"
47	:id="`faq-answer-${faq.id}`"
48	class="faq__answer"
49	:aria-labelledby="`faq-question-${faq.id}`"
50	role="region"
51	>
52	<div v-html="faq.answer" />
53	</div>
54	</div>
55	</HCard>
56	</div>
57	</div>
58	</section>
59	</template>
60
61	<style scoped lang="scss">
62	.faq {
63	@media (max-width: 768px) {
64	padding: 32px 16px;
65	}
66
67	@media (max-width: 480px) {
68	padding: 24px 12px;
69	}
70
71	&__container {
72	max-width: 780px;
73	margin: 0 auto;
74
75	@media (max-width: 1024px) {
76	max-width: 90%;
77	}
78
79	@media (max-width: 768px) {
80	max-width: 100%;
81	}
82	}
83
84	&__list {
85	display: flex;
86	flex-direction: column;
87	gap: 8px;
88
89	@media (max-width: 480px) {
90	gap: 6px;
91	}
92	}
93
94	&__item {
95	background: var(--neutral--0);
96	border-radius: 16px;
97	border: 1px solid var(--neutral--200);
98	overflow: hidden;
99	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
100
101	@media (max-width: 768px) {
102	border-radius: 12px;
103	}
104
105	@media (max-width: 480px) {
106	border-radius: 8px;
107	}
108
109	&--expanded {
110	border-color: var(--neutral--200);
111	box-shadow: 0 4px 12px rgba(103, 58, 183, 0.1);
112
113	@media (max-width: 768px) {
114	box-shadow: 0 2px 8px rgba(103, 58, 183, 0.1);
115	}
116
117	@media (max-width: 480px) {
118	box-shadow: 0 1px 6px rgba(103, 58, 183, 0.1);
119	}
120	}
121	}
122
123	&__question {
124	width: 100%;
125	display: flex;
126	align-items: center;
127	justify-content: space-between;
128	padding: 24px;
129	background: none;
130	border: none;
131	text-align: left;
132	cursor: pointer;
133	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
134	border-bottom: 1px solid var(--neutral--200);
135
136	@media (max-width: 768px) {
137	padding: 16px 20px;
138	}
139
140	@media (max-width: 480px) {
141	padding: 12px 16px;
142	}
143	}
144
145	&__question-text {
146	font-size: 16px;
147	font-weight: 600;
148	color: var(--neutral--600);
149	line-height: 1.4;
150	flex: 1;
151	margin-right: 16px;
152
153	@media (max-width: 768px) {
154	font-size: 15px;
155	margin-right: 12px;
156	}
157
158	@media (max-width: 480px) {
159	font-size: 14px;
160	margin-right: 10px;
161	}
162	}
163
164	&__icon {
165	color: var(--neutral--400);
166	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
167	flex-shrink: 0;
168
169	@media (max-width: 480px) {
170	width: 20px;
171	height: 20px;
172	}
173
174	.faq__item--expanded & {
175	color: var(--neutral--200);
176	}
177	}
178
179	&__answer {
180	padding: 24px;
181	animation: fadeIn 0.3s ease-in-out;
182
183	@media (max-width: 768px) {
184	padding: 0 20px 20px;
185	}
186
187	@media (max-width: 480px) {
188	padding: 0 16px 16px;
189	}
190
191	p {
192	font-size: 15px;
193	line-height: 1.6;
194	color: var(--neutral--500);
195	margin: 0;
196
197	@media (max-width: 768px) {
198	font-size: 14px;
199	}
200
201	@media (max-width: 480px) {
202	font-size: 13px;
203	}
204	}
205	}
206	}
207
208	:deep(.h-card__header) {
209	border-bottom: none;
210	padding-top: 24px;
211	padding-bottom: 0px;
212
213	@media (max-width: 768px) {
214	padding-top: 20px;
215	}
216
217	@media (max-width: 480px) {
218	padding-top: 16px;
219	}
220	}
221
222	@keyframes fadeIn {
223	from {
224	opacity: 0;
225	transform: translateY(-10px);
226	}
227	to {
228	opacity: 1;
229	transform: translateY(0);
230	}
231	}
232	</style>
233