-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
/
VPHomeSponsors.vue
116 lines (98 loc) · 1.82 KB
/
VPHomeSponsors.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<script setup lang="ts">
import VPButton from './VPButton.vue'
import VPSponsors from './VPSponsors.vue'
export interface Sponsors {
tier: string
size?: 'medium' | 'big'
items: Sponsor[]
}
export interface Sponsor {
name: string
img: string
url: string
}
interface Props {
message?: string
actionText?: string
actionLink?: string
data: Sponsors[]
}
withDefaults(defineProps<Props>(), {
actionText: 'Become a sponsor'
})
</script>
<template>
<section class="VPHomeSponsors">
<div class="container">
<div class="header">
<div class="love">
<span class="vpi-heart icon" />
</div>
<h2 v-if="message" class="message">{{ message }}</h2>
</div>
<div class="sponsors">
<VPSponsors :data="data" />
</div>
<div v-if="actionLink" class="action">
<VPButton theme="sponsor" :text="actionText" :href="actionLink" />
</div>
</div>
</section>
</template>
<style scoped>
.VPHomeSponsors {
border-top: 1px solid var(--vp-c-gutter);
padding-top: 88px !important;
}
.VPHomeSponsors {
margin: 96px 0;
}
@media (min-width: 768px) {
.VPHomeSponsors {
margin: 128px 0;
}
}
.VPHomeSponsors {
padding: 0 24px;
}
@media (min-width: 768px) {
.VPHomeSponsors {
padding: 0 48px;
}
}
@media (min-width: 960px) {
.VPHomeSponsors {
padding: 0 64px;
}
}
.container {
margin: 0 auto;
max-width: 1152px;
}
.love {
margin: 0 auto;
width: fit-content;
font-size: 28px;
color: var(--vp-c-text-3);
}
.icon {
display: inline-block;
}
.message {
margin: 0 auto;
padding-top: 10px;
max-width: 320px;
text-align: center;
line-height: 24px;
font-size: 16px;
font-weight: 500;
color: var(--vp-c-text-2);
}
.sponsors {
padding-top: 32px;
}
.action {
padding-top: 40px;
text-align: center;
}
</style>