generated from thegrind/laravel-dockerized
117 lines
1.8 KiB
Vue
117 lines
1.8 KiB
Vue
<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>
|