Skip to content

Commit 2e35ea8

Browse files
author
root
committed
fix(landing): resolve card links, mock transcript translations, and hero line breaks
1 parent a06263b commit 2e35ea8

6 files changed

Lines changed: 325 additions & 61 deletions

File tree

‎components/landing/LandingCards.vue‎

Lines changed: 39 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
11
<template>
22
<div class="landing-cards">
3-
<component
4-
:is="item.to ? 'NuxtLink' : 'div'"
5-
v-for="item in items"
6-
:key="item.title"
7-
:to="item.to"
8-
class="landing-card"
9-
:class="{ 'landing-card--link': item.to }"
10-
>
11-
<v-icon v-if="item.icon" class="landing-card__icon" size="32">
12-
{{ item.icon }}
13-
</v-icon>
14-
<h3 class="landing-card__title">{{ item.title }}</h3>
15-
<p class="landing-card__text">{{ item.text }}</p>
16-
<span v-if="item.to" class="landing-card__more">
17-
{{ item.linkText }} <v-icon size="16">mdi-arrow-right</v-icon>
18-
</span>
19-
</component>
3+
<template v-for="item in items" :key="item.title">
4+
<NuxtLink
5+
v-if="item.to"
6+
:to="item.to"
7+
class="landing-card landing-card--link"
8+
>
9+
<v-icon v-if="item.icon" class="landing-card__icon" size="32">
10+
{{ item.icon }}
11+
</v-icon>
12+
<h3 class="landing-card__title">{{ item.title }}</h3>
13+
<p class="landing-card__text">{{ item.text }}</p>
14+
<span class="landing-card__more">
15+
{{ item.linkText || "Open" }}
16+
<v-icon size="16">mdi-arrow-right</v-icon>
17+
</span>
18+
</NuxtLink>
19+
20+
<div v-else class="landing-card">
21+
<v-icon v-if="item.icon" class="landing-card__icon" size="32">
22+
{{ item.icon }}
23+
</v-icon>
24+
<h3 class="landing-card__title">{{ item.title }}</h3>
25+
<p class="landing-card__text">{{ item.text }}</p>
26+
<span v-if="item.linkText" class="landing-card__status">
27+
{{ item.linkText }}
28+
</span>
29+
</div>
30+
</template>
2031
</div>
2132
</template>
2233

@@ -49,12 +60,13 @@ export default {
4960
display: flex;
5061
flex-direction: column;
5162
}
52-
5363
.landing-card--link {
54-
transition: transform 0.25s ease;
64+
cursor: pointer;
65+
transition: transform 0.25s ease, box-shadow 0.25s ease;
5566
5667
&:hover {
5768
transform: translateY(-4px);
69+
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.09);
5870
}
5971
}
6072
@@ -86,4 +98,12 @@ export default {
8698
align-items: center;
8799
gap: 0.3em;
88100
}
101+
102+
.landing-card__status {
103+
margin-top: auto;
104+
padding-top: 1rem;
105+
font-size: 0.85rem;
106+
font-weight: 600;
107+
color: var(--landing-card-muted, rgba(29, 29, 31, 0.45));
108+
}
89109
</style>

‎components/landing/LandingDocMock.vue‎

Lines changed: 247 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@
33
<div class="doc-mock__sheet doc-mock__sheet--back"></div>
44
<div class="doc-mock__sheet">
55
<div class="doc-mock__header">
6-
<span class="doc-mock__kicker">Chat Transcript</span>
7-
<span class="doc-mock__meta">WhatsApp export · 2 participants</span>
8-
<span class="doc-mock__meta"
9-
>Aug 26, 2019 – Feb 16, 2021 · 537 messages</span
10-
>
6+
<span class="doc-mock__kicker">{{ content.kicker }}</span>
7+
<span class="doc-mock__meta">{{ content.metaParticipants }}</span>
8+
<span class="doc-mock__meta">{{ content.metaDateRange }}</span>
119
</div>
12-
<div class="doc-mock__divider">Jan 14, 2021</div>
13-
<div v-for="row in rows" :key="row.time + row.text" class="doc-mock__row">
10+
<div class="doc-mock__divider">{{ content.dividerDate }}</div>
11+
<div
12+
v-for="row in content.rows"
13+
:key="row.time + row.text"
14+
class="doc-mock__row"
15+
>
1416
<span class="doc-mock__time">{{ row.time }}</span>
1517
<span class="doc-mock__body">
1618
<span class="doc-mock__name">{{ row.name }}</span>
@@ -19,7 +21,7 @@
1921
</div>
2022
<div class="doc-mock__footer">
2123
<span>whatsanalyze.com</span>
22-
<span>Page 3 of 24</span>
24+
<span>{{ content.pageText }}</span>
2325
</div>
2426
</div>
2527
</div>
@@ -28,37 +30,248 @@
2830
<script>
2931
export default {
3032
name: "LandingDocMock",
31-
data() {
32-
return {
33-
rows: [
34-
{
35-
time: "09:14",
36-
name: "Alex",
37-
text: "Did you get my messages yesterday?",
33+
computed: {
34+
content() {
35+
const locale = this.$i18n?.locale || "en";
36+
const translations = {
37+
de: {
38+
kicker: "Chat-Protokoll",
39+
metaParticipants: "WhatsApp-Export · 2 Teilnehmer",
40+
metaDateRange: "26. Aug. 2019 – 16. Feb. 2021 · 537 Nachrichten",
41+
dividerDate: "14. Jan. 2021",
42+
pageText: "Seite 3 von 24",
43+
rows: [
44+
{
45+
time: "09:14",
46+
name: "Alex",
47+
text: "Hast du meine Nachrichten von gestern bekommen?",
48+
},
49+
{
50+
time: "09:16",
51+
name: "Sam",
52+
text: "Ja, alle. Ich habe alles aufgehoben.",
53+
},
54+
{
55+
time: "09:17",
56+
name: "Alex",
57+
text: "Gut. Die brauchen wir vielleicht noch.",
58+
},
59+
{
60+
time: "12:02",
61+
name: "Sam",
62+
text: "Ich habe heute früh den ganzen Chat exportiert.",
63+
},
64+
{
65+
time: "12:05",
66+
name: "Alex",
67+
text: "Jede Nachricht, mit Datum und Uhrzeit.",
68+
},
69+
{
70+
time: "12:06",
71+
name: "Sam",
72+
text: "Genau. Schwarz auf weiß.",
73+
},
74+
],
3875
},
39-
{
40-
time: "09:16",
41-
name: "Sam",
42-
text: "Yes, all of them. I kept everything.",
76+
es: {
77+
kicker: "Transcripción del chat",
78+
metaParticipants: "Exportación de WhatsApp · 2 participantes",
79+
metaDateRange: "26 ago 2019 – 16 feb 2021 · 537 mensajes",
80+
dividerDate: "14 ene 2021",
81+
pageText: "Página 3 de 24",
82+
rows: [
83+
{
84+
time: "09:14",
85+
name: "Alex",
86+
text: "¿Recibiste mis mensajes de ayer?",
87+
},
88+
{
89+
time: "09:16",
90+
name: "Sam",
91+
text: "Sí, todos. Lo guardé todo.",
92+
},
93+
{
94+
time: "09:17",
95+
name: "Alex",
96+
text: "Bien. Quizás los necesitemos más tarde.",
97+
},
98+
{
99+
time: "12:02",
100+
name: "Sam",
101+
text: "Exporté todo el chat esta mañana.",
102+
},
103+
{
104+
time: "12:05",
105+
name: "Alex",
106+
text: "Cada mensaje, con fecha y hora.",
107+
},
108+
{
109+
time: "12:06",
110+
name: "Sam",
111+
text: "Exacto. En blanco y negro.",
112+
},
113+
],
43114
},
44-
{
45-
time: "09:17",
46-
name: "Alex",
47-
text: "Good. We might need them later.",
115+
fr: {
116+
kicker: "Transcription du chat",
117+
metaParticipants: "Export WhatsApp · 2 participants",
118+
metaDateRange: "26 août 2019 – 16 févr. 2021 · 537 messages",
119+
dividerDate: "14 janv. 2021",
120+
pageText: "Page 3 sur 24",
121+
rows: [
122+
{
123+
time: "09:14",
124+
name: "Alex",
125+
text: "Tu as reçu mes messages d'hier ?",
126+
},
127+
{
128+
time: "09:16",
129+
name: "Sam",
130+
text: "Oui, tous. J'ai tout gardé.",
131+
},
132+
{
133+
time: "09:17",
134+
name: "Alex",
135+
text: "Bien. On en aura peut-être besoin plus tard.",
136+
},
137+
{
138+
time: "12:02",
139+
name: "Sam",
140+
text: "J'ai exporté tout le chat ce matin.",
141+
},
142+
{
143+
time: "12:05",
144+
name: "Alex",
145+
text: "Chaque message, avec date et heure.",
146+
},
147+
{
148+
time: "12:06",
149+
name: "Sam",
150+
text: "Exactement. Noir sur blanc.",
151+
},
152+
],
48153
},
49-
{
50-
time: "12:02",
51-
name: "Sam",
52-
text: "I exported the whole chat this morning.",
154+
pt: {
155+
kicker: "Transcrição da conversa",
156+
metaParticipants: "Exportação do WhatsApp · 2 participantes",
157+
metaDateRange:
158+
"26 de ago. de 2019 – 16 de fev. de 2021 · 537 mensagens",
159+
dividerDate: "14 de jan. de 2021",
160+
pageText: "Página 3 de 24",
161+
rows: [
162+
{
163+
time: "09:14",
164+
name: "Alex",
165+
text: "Você recebeu minhas mensagens de ontem?",
166+
},
167+
{
168+
time: "09:16",
169+
name: "Sam",
170+
text: "Sim, todas. Guardei tudo.",
171+
},
172+
{
173+
time: "09:17",
174+
name: "Alex",
175+
text: "Ótimo. Podemos precisar delas mais tarde.",
176+
},
177+
{
178+
time: "12:02",
179+
name: "Sam",
180+
text: "Exporteirei toda a conversa hoje cedo.",
181+
},
182+
{
183+
time: "12:05",
184+
name: "Alex",
185+
text: "Cada mensagem, com data e hora.",
186+
},
187+
{
188+
time: "12:06",
189+
name: "Sam",
190+
text: "Exato. Preto no branco.",
191+
},
192+
],
53193
},
54-
{
55-
time: "12:05",
56-
name: "Alex",
57-
text: "Every message, with date and time.",
194+
it: {
195+
kicker: "Trascrizione della chat",
196+
metaParticipants: "Esportazione WhatsApp · 2 partecipanti",
197+
metaDateRange: "26 ago 2019 – 16 feb 2021 · 537 messaggi",
198+
dividerDate: "14 gen 2021",
199+
pageText: "Pagina 3 di 24",
200+
rows: [
201+
{
202+
time: "09:14",
203+
name: "Alex",
204+
text: "Hai ricevuto i miei messaggi di ieri?",
205+
},
206+
{
207+
time: "09:16",
208+
name: "Sam",
209+
text: "Sì, tutti. Ho tenuto tutto.",
210+
},
211+
{
212+
time: "09:17",
213+
name: "Alex",
214+
text: "Bene. Potrebbero servirci più tardi.",
215+
},
216+
{
217+
time: "12:02",
218+
name: "Sam",
219+
text: "Ho esportato tutta la chat stamattina.",
220+
},
221+
{
222+
time: "12:05",
223+
name: "Alex",
224+
text: "Ogni messaggio, con data e ora.",
225+
},
226+
{
227+
time: "12:06",
228+
name: "Sam",
229+
text: "Esatto. Nero su bianco.",
230+
},
231+
],
58232
},
59-
{ time: "12:06", name: "Sam", text: "Exactly. In black and white." },
60-
],
61-
};
233+
en: {
234+
kicker: "Chat Transcript",
235+
metaParticipants: "WhatsApp export · 2 participants",
236+
metaDateRange: "Aug 26, 2019 – Feb 16, 2021 · 537 messages",
237+
dividerDate: "Jan 14, 2021",
238+
pageText: "Page 3 of 24",
239+
rows: [
240+
{
241+
time: "09:14",
242+
name: "Alex",
243+
text: "Did you get my messages yesterday?",
244+
},
245+
{
246+
time: "09:16",
247+
name: "Sam",
248+
text: "Yes, all of them. I kept everything.",
249+
},
250+
{
251+
time: "09:17",
252+
name: "Alex",
253+
text: "Good. We might need them later.",
254+
},
255+
{
256+
time: "12:02",
257+
name: "Sam",
258+
text: "I exported the whole chat this morning.",
259+
},
260+
{
261+
time: "12:05",
262+
name: "Alex",
263+
text: "Every message, with date and time.",
264+
},
265+
{
266+
time: "12:06",
267+
name: "Sam",
268+
text: "Exactly. In black and white.",
269+
},
270+
],
271+
},
272+
};
273+
return translations[locale] || translations.en;
274+
},
62275
},
63276
};
64277
</script>

0 commit comments

Comments
 (0)