Skip to content

Commit 49ab7d0

Browse files
ArmaldioArmaldio
committed
improved testimonials
1 parent c870377 commit 49ab7d0

1 file changed

Lines changed: 165 additions & 44 deletions

File tree

‎src/components/TestimonialSection.vue‎

Lines changed: 165 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,30 @@
11
<template>
22
<section class="testimonials" id="testimonials">
33
<div class="container">
4-
<h2 class="section-title text-center mb-5 fade-in">What Developers Say</h2>
4+
<div class="testimonial-header">
5+
<h2 class="testimonial-title">Testimonial Section</h2>
6+
</div>
57
<div class="testimonial-list">
6-
<div class="testimonial-card fade-in" v-for="testimonial in testimonials" :key="testimonial.author">
7-
<p class="testimonial-quote">“{{ testimonial.quote }}”</p>
8-
<div class="testimonial-author">
9-
<a :href="testimonial.authorLink" target="_blank" rel="noopener" class="testimonial-name">{{ testimonial.author }}</a>
10-
<a :href="testimonial.link" v-if="testimonial.company" target="_blank" rel="noopener" class="testimonial-company">{{ (testimonial.author ? ', ' : '') + testimonial.company }}</a>
11-
<a v-if="testimonial.link" :href="testimonial.link" target="_blank" rel="noopener" class="testimonial-link">🔗</a>
8+
<div class="testimonial-card" v-for="(testimonial, i) in testimonials" :key="testimonial.name">
9+
<div class="testimonial-card-text">{{ testimonial.text }}</div>
10+
<div class="testimonial-card-footer">
11+
<img :src="testimonial.avatar" class="testimonial-avatar" alt="Avatar" />
12+
<div class="testimonial-meta">
13+
<div class="testimonial-name">
14+
<a v-if="testimonial.authorLink" :href="testimonial.authorLink" target="_blank">
15+
{{ testimonial.name }}
16+
<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20" fill="none"><path d="M7.5 12.5L12.5 7.5M12.5 7.5H8.75M12.5 7.5V11.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
17+
</a>
18+
<span v-else>{{ testimonial.name }}</span>
19+
</div>
20+
<div class="testimonial-role" v-if="testimonial.game">
21+
<a v-if="testimonial.gameLink" :href="testimonial.gameLink" target="_blank">
22+
{{ testimonial.game }}
23+
<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20" fill="none"><path d="M7.5 12.5L12.5 7.5M12.5 7.5H8.75M12.5 7.5V11.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
24+
</a>
25+
<span v-else>{{ testimonial.game }}</span>
26+
</div>
27+
</div>
1228
</div>
1329
</div>
1430
</div>
@@ -17,20 +33,42 @@
1733
</template>
1834

1935
<script setup lang="ts">
36+
type Testimonial = {
37+
text: string;
38+
39+
// author
40+
avatar: string;
41+
name: string;
42+
authorLink: string;
43+
44+
// game
45+
game?: string;
46+
gameLink?: string;
47+
}
48+
2049
const testimonials = [
2150
{
22-
quote: `Pipelab has made it super easy to quickly iterate and spread builds of DeadWire to the rest of the team. After setting it up the one click electron export and upload to steam can’t be beaten.`,
23-
author: 'Shotgun Anaconda',
51+
text: `Pipelab has made it super easy to quickly iterate and spread builds of DeadWire to the rest of the team. After setting it up the one click electron export and upload to steam can't be beaten.`,
52+
avatar: 'https://pbs.twimg.com/profile_images/1826348478538121217/03C89MFj_400x400.jpg',
53+
name: 'Shotgun Anaconda',
2454
authorLink: 'https://x.com/shotgunanaconda',
25-
company: 'DeadWire',
26-
link: 'https://store.steampowered.com/app/2995100/DeadWire/'
55+
game: 'DeadWire',
56+
gameLink: 'https://store.steampowered.com/app/2995100/DeadWire/'
2757
},
2858
{
29-
quote: `Pipelab is amazing. If you're a serious game developer, it has everything you need to automate your deploying process into multiple platforms, and it's all seamless.`,
30-
// author: 'Yin',
31-
company: 'Asteristic Game Studio',
32-
link: 'https://asteristic.com/'
33-
}
59+
text: `Pipelab is an exceptional tool for indie developers, offering a rich set of features that streamline game development workflows. It's especially invaluable for games made with Construct 3, providing the most efficient and reliable solution for exporting games to Steam. The level of support is outstanding—responsive, helpful, and genuinely invested in your success.`,
60+
avatar: 'https://pbs.twimg.com/profile_images/1357660425161232390/v5D3MO2F_400x400.png',
61+
name: 'overboy',
62+
authorLink: 'https://x.com/OverboyYT',
63+
game: 'Noobs Are Coming',
64+
gameLink: 'https://store.steampowered.com/app/2225960/Noobs_Are_Coming/'
65+
},
66+
{
67+
text: `Pipelab is amazing. If you're a serious game developer, it has everything you need to automate your deploying process into multiple platforms, and it's all seamless.`,
68+
avatar: 'https://pbs.twimg.com/profile_images/1360251144136765443/AqibScvm_400x400.jpg',
69+
name: 'Asteristic Game Studio',
70+
authorLink: 'https://asteristic.com/',
71+
},
3472
];
3573
</script>
3674

@@ -39,54 +77,132 @@ const testimonials = [
3977
background: #f9f9fb;
4078
padding: 4rem 0 3rem 0;
4179
}
42-
.section-title {
43-
font-size: 2.2rem;
44-
color: var(--text-color);
80+
81+
.testimonials a {
82+
color: inherit;
83+
text-decoration: none;
84+
}
85+
.link-icon {
86+
display: inline-block;
87+
vertical-align: middle;
88+
margin-left: 0;
89+
font-size: 1em;
90+
width: 1em;
91+
height: 1em;
92+
stroke: currentColor;
93+
opacity: 0.7;
94+
transition: opacity 0.15s;
95+
}
96+
.testimonials a:hover .link-icon {
97+
opacity: 1;
98+
}
99+
100+
101+
.testimonial-header {
102+
display: flex;
103+
align-items: flex-end;
104+
justify-content: space-between;
45105
margin-bottom: 2.5rem;
106+
flex-wrap: wrap;
107+
}
108+
.testimonial-tagline {
109+
font-size: 0.95rem;
110+
font-weight: 600;
111+
letter-spacing: 1.2px;
112+
color: #222;
113+
opacity: 0.7;
114+
margin-bottom: 0.5rem;
115+
}
116+
.testimonial-title {
117+
font-size: 2.4rem;
118+
font-weight: 700;
119+
color: #14082d;
120+
margin: 0 0 0.5rem 0;
121+
flex: 1 1 100%;
122+
text-align: center;
123+
}
124+
.testimonial-nav {
125+
display: flex;
126+
gap: 1rem;
127+
margin-left: auto;
128+
}
129+
.arrow-btn {
130+
background: #fff;
131+
border: none;
132+
width: 36px;
133+
height: 36px;
134+
border-radius: 50%;
135+
box-shadow: 0 2px 6px rgba(20,8,45,0.08);
136+
display: flex;
137+
align-items: center;
138+
justify-content: center;
139+
color: #14082d;
140+
font-size: 1.1rem;
141+
cursor: pointer;
142+
transition: background 0.2s;
143+
}
144+
.arrow-btn.active, .arrow-btn:hover {
145+
background: #14082d;
146+
color: #fff;
46147
}
47148
.testimonial-list {
48149
display: flex;
49-
flex-wrap: wrap;
150+
flex-direction: row;
50151
gap: 2rem;
51152
justify-content: center;
52153
}
53154
.testimonial-card {
54155
background: #fff;
55-
border-radius: 12px;
56-
box-shadow: 0 3px 16px rgba(0,0,0,0.07);
57-
padding: 2rem 2.5rem;
58-
max-width: 420px;
156+
border-radius: 18px;
157+
box-shadow: 0 6px 32px rgba(20,8,45,0.07);
158+
padding: 2.2rem 2rem 1.5rem 2rem;
159+
max-width: 350px;
59160
min-width: 260px;
60161
display: flex;
61162
flex-direction: column;
163+
justify-content: space-between;
62164
align-items: flex-start;
63-
margin-bottom: 1.5rem;
165+
transition: box-shadow 0.2s;
166+
margin-bottom: 0;
64167
}
65-
.testimonial-quote {
66-
font-size: 1.1rem;
67-
font-style: italic;
68-
color: #333;
69-
margin-bottom: 1.2rem;
168+
.testimonial-card-title {
169+
font-size: 1.22rem;
170+
font-weight: 700;
171+
color: #14082d;
172+
margin-bottom: 1rem;
70173
}
71-
.testimonial-author {
72-
font-weight: bold;
73-
color: #1f2937;
74-
font-size: 1rem;
174+
.testimonial-card-text {
175+
font-size: 1.01rem;
176+
color: #444;
177+
margin-bottom: 1.7rem;
178+
min-height: 46px;
179+
}
180+
.testimonial-card-footer {
75181
display: flex;
76182
align-items: center;
77-
gap: 0.3rem;
183+
gap: 0.85rem;
78184
}
79-
.testimonial-company {
80-
color: #666;
81-
font-weight: normal;
185+
.testimonial-avatar {
186+
width: 38px;
187+
height: 38px;
188+
border-radius: 50%;
189+
object-fit: cover;
190+
border: 2px solid #f0f0f0;
82191
}
83-
.testimonial-link {
84-
/* margin-left: 0.4rem; */
85-
color: var(--primary-color);
86-
font-size: 0.rem;
87-
text-decoration: none;
192+
.testimonial-meta {
193+
display: flex;
194+
flex-direction: column;
88195
}
89-
@media (max-width: 768px) {
196+
.testimonial-name {
197+
font-weight: 600;
198+
font-size: 1rem;
199+
color: #14082d;
200+
}
201+
.testimonial-role {
202+
font-size: 0.93rem;
203+
color: #14082d;
204+
}
205+
@media (max-width: 900px) {
90206
.testimonial-list {
91207
flex-direction: column;
92208
align-items: center;
@@ -95,5 +211,10 @@ const testimonials = [
95211
max-width: 95vw;
96212
padding: 1.2rem 1rem;
97213
}
214+
.testimonial-header {
215+
flex-direction: column;
216+
align-items: flex-start;
217+
gap: 1rem;
218+
}
98219
}
99220
</style>

0 commit comments

Comments
 (0)