Skip to content

Commit 00340c2

Browse files
ArmaldioArmaldio
committed
improve website
1 parent e27ef26 commit 00340c2

10 files changed

Lines changed: 413 additions & 63 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
},
3232
"devDependencies": {
3333
"@iconify-json/line-md": "^1.2.11",
34+
"@iconify-json/mdi": "^1.2.3",
3435
"@iconify-json/simple-icons": "^1.2.60",
3536
"@iconify/vue": "^5.0.0",
3637
"@playwright/test": "^1.57.0",

‎pnpm-lock.yaml‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/testimonials/asteristic_game_studio.jpg‎

10.1 KB
Loading

‎public/testimonials/overboy.png‎

57.1 KB
Loading

‎public/testimonials/shotgun_anaconda.jpg‎

18.2 KB
Loading

‎src/components/PlatformBadge.vue‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<template>
2+
<router-link
3+
:to="to"
4+
class="platform-badge"
5+
:class="[size, { 'with-icon': hasIcon }]">
6+
<span v-if="hasIcon" class="badge-icon">
7+
<slot name="icon"></slot>
8+
</span>
9+
<span class="badge-text">
10+
<slot>{{ text }}</slot>
11+
</span>
12+
</router-link>
13+
</template>
14+
15+
<script lang="ts" setup>
16+
import { computed } from 'vue';
17+
18+
const props = defineProps({
19+
to: {
20+
type: Object,
21+
required: true
22+
},
23+
text: {
24+
type: String,
25+
default: ''
26+
},
27+
size: {
28+
type: String,
29+
default: 'medium',
30+
validator: (value: string) => ['small', 'medium', 'large'].includes(value)
31+
}
32+
});
33+
34+
const hasIcon = computed(() => !!props.text);
35+
</script>
36+
37+
<style lang="scss" scoped>
38+
.platform-badge {
39+
display: inline-flex;
40+
align-items: center;
41+
justify-content: center;
42+
background-color: var(--surface-ground);
43+
color: var(--text-color);
44+
border-radius: 20px;
45+
padding: 6px 12px;
46+
text-decoration: none;
47+
font-weight: 500;
48+
transition: all 0.2s ease;
49+
border: 1px solid var(--surface-border);
50+
margin: 0 4px;
51+
position: relative;
52+
53+
&::before {
54+
content: "";
55+
position: absolute;
56+
top: 0;
57+
left: 0;
58+
width: 2px;
59+
height: 100%;
60+
background: var(--primary-color);
61+
opacity: 0.15;
62+
transition: all 0.2s ease;
63+
}
64+
65+
&:hover {
66+
background-color: var(--surface-hover);
67+
border-color: var(--primary-color);
68+
border-width: 1.5px;
69+
70+
&::before {
71+
opacity: 0.3;
72+
width: 3px;
73+
}
74+
}
75+
76+
&.small {
77+
padding: 4px 8px;
78+
font-size: 0.8rem;
79+
}
80+
81+
&.medium {
82+
padding: 6px 12px;
83+
font-size: 0.9rem;
84+
}
85+
86+
&.large {
87+
padding: 8px 16px;
88+
font-size: 1rem;
89+
}
90+
91+
&.with-icon {
92+
padding-left: 8px;
93+
}
94+
}
95+
96+
.badge-icon {
97+
margin-right: 6px;
98+
display: flex;
99+
align-items: center;
100+
justify-content: center;
101+
}
102+
103+
.badge-icon :deep(svg) {
104+
width: 1em;
105+
height: 1em;
106+
color: var(--text-color);
107+
transition: color 0.2s ease;
108+
}
109+
110+
.platform-badge:hover .badge-icon :deep(svg) {
111+
color: var(--primary-color);
112+
}
113+
114+
.badge-text {
115+
white-space: nowrap;
116+
position: relative;
117+
z-index: 1;
118+
}
119+
</style>

‎src/components/TestimonialSection.vue‎

Lines changed: 3 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -33,43 +33,7 @@
3333
</template>
3434

3535
<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-
49-
const testimonials = [
50-
{
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',
54-
authorLink: 'https://x.com/shotgunanaconda',
55-
game: 'DeadWire',
56-
gameLink: 'https://store.steampowered.com/app/2995100/DeadWire/'
57-
},
58-
{
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-
},
72-
];
36+
import { testimonials } from '@/data/testimonials';
7337
</script>
7438

7539
<style scoped>
@@ -98,7 +62,7 @@ const testimonials = [
9862
}
9963
10064
101-
.testimonial-header {
65+
testimonial-header {
10266
display: flex;
10367
align-items: flex-end;
10468
justify-content: space-between;
@@ -217,4 +181,4 @@ const testimonials = [
217181
gap: 1rem;
218182
}
219183
}
220-
</style>
184+
</style>

‎src/data/testimonials.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
export interface Testimonial {
2+
text: string;
3+
4+
// author
5+
avatar: string;
6+
name: string;
7+
authorLink: string;
8+
9+
// game
10+
game?: string;
11+
gameLink?: string;
12+
}
13+
14+
export const testimonials: Testimonial[] = [
15+
{
16+
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.`,
17+
avatar: '/testimonials/shotgun_anaconda.jpg',
18+
name: 'Shotgun Anaconda',
19+
authorLink: 'https://x.com/shotgunanaconda',
20+
game: 'DeadWire',
21+
gameLink: 'https://store.steampowered.com/app/2995100/DeadWire/'
22+
},
23+
{
24+
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.`,
25+
avatar: '/testimonials/overboy.png',
26+
name: 'overboy',
27+
authorLink: 'https://x.com/OverboyYT',
28+
game: 'Noobs Are Coming',
29+
gameLink: 'https://store.steampowered.com/app/2225960/Noobs_Are_Coming/'
30+
},
31+
{
32+
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.`,
33+
avatar: '/testimonials/asteristic_game_studio.jpg',
34+
name: 'Asteristic Game Studio',
35+
authorLink: 'https://asteristic.com/'
36+
}
37+
];

0 commit comments

Comments
 (0)