/
githubmirror
/
vuetify
Обзор
Документация
Войти
/
githubmirror
/
vuetify
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
packages/docs/src/components/one/Hero.vue
61 строка
2 KB
J-Sek
feat: migrate to MD3 typography (#22557)
28 янв 2026, 21:50
Не верифицирован
28 янв 2026, 21:50
311daf4
Код
Авторство
О чём код?
<template> <v-container class="one-hero mx-auto text-center pa-md-12 pa-6 pb-7" fluid> <v-responsive class="mx-auto" max-width="700"> <v-img :src="logoSrc" :width="$vuetify.display.mdAndUp ? 500 : 300" alt="Vuetify One Logo" class="mb-8 mx-auto" /> <h1 class="text-headline-large text-md-display-large font-weight-bold mb-4"> Power the Future of Vuetify </h1> <p class="text-body-large text-md-title-large text-medium-emphasis mb-8"> Your subscription directly funds Vuetify development. Get premium tools, an ad-free experience, and early access to what's next—while keeping the framework free for everyone. </p> <div class="d-flex ga-4 justify-center flex-wrap"> <v-btn :loading="one.isLoading" class="text-none" color="primary" rounded="lg" size="x-large" text="Subscribe Now" @click="one.subscribe('year', 'solo')" /> <v-btn class="text-none" color="primary" rounded="lg" size="x-large" text="See What's Included" to="#features" variant="outlined" /> </div> </v-responsive> </v-container> </template> <script setup lang="ts"> const one = useOneStore() const theme = useTheme() const logoSrc = computed(() => { return `https://cdn.vuetifyjs.com/docs/images/one/logos/vone-logo-${theme.current.value.dark ? 'dark' : 'light'}.png` }) </script> <style scoped> .one-hero { background: linear-gradient( 180deg, rgba(var(--v-theme-primary), 0.38) 0%, rgba(var(--v-theme-background), 1) 100% ); } </style>