Skip to content

Commit 8f31d92

Browse files
ikushumikushum
committed
add sections to homepage
1 parent e2ef502 commit 8f31d92

19 files changed

Lines changed: 859 additions & 385 deletions

‎packages/docs/components.d.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ declare module 'vue' {
104104
DocRelatedPage: typeof import('./src/components/doc/RelatedPage.vue')['default']
105105
DocRelatedPages: typeof import('./src/components/doc/RelatedPages.vue')['default']
106106
DocReleases: typeof import('./src/components/doc/Releases.vue')['default']
107+
DocStore: typeof import('./src/components/doc/Store.vue')['default']
107108
DocTabs: typeof import('./src/components/doc/Tabs.vue')['default']
108109
DocThemeCard: typeof import('./src/components/doc/ThemeCard.vue')['default']
109110
DocThemeVendor: typeof import('./src/components/doc/ThemeVendor.vue')['default']
@@ -119,18 +120,24 @@ declare module 'vue' {
119120
FeaturesSassApi: typeof import('./src/components/features/SassApi.vue')['default']
120121
GettingStartedWireframeExamples: typeof import('./src/components/getting-started/WireframeExamples.vue')['default']
121122
HomeActionBtns: typeof import('./src/components/home/ActionBtns.vue')['default']
122-
HomeBackgroundGradient: typeof import('./src/components/home/BackgroundGradient.vue')['default']
123123
HomeBgGradient: typeof import('./src/components/home/BgGradient.vue')['default']
124+
HomeBlogs: typeof import('./src/components/home/Blogs.vue')['default']
124125
HomeComponentGallery: typeof import('./src/components/home/ComponentGallery.vue')['default']
126+
HomeDiscord: typeof import('./src/components/home/Discord.vue')['default']
127+
HomeEcosystem: typeof import('./src/components/home/Ecosystem.vue')['default']
125128
HomeEntry: typeof import('./src/components/home/Entry.vue')['default']
126129
HomeEpicmaxSupport: typeof import('./src/components/home/EpicmaxSupport.vue')['default']
127130
HomeFeatures: typeof import('./src/components/home/Features.vue')['default']
128131
HomeFooter: typeof import('./src/components/home/Footer.vue')['default']
129-
HomeGradientBackground: typeof import('./src/components/home/GradientBackground.vue')['default']
130132
HomeLogo: typeof import('./src/components/home/Logo.vue')['default']
133+
HomeMarquee: typeof import('./src/components/home/Marquee.vue')['default']
134+
HomePaidServices: typeof import('./src/components/home/PaidServices.vue')['default']
135+
HomeSnips: typeof import('./src/components/home/Snips.vue')['default']
131136
HomeSpecialSponsor: typeof import('./src/components/home/SpecialSponsor.vue')['default']
132137
HomeSponsors: typeof import('./src/components/home/Sponsors.vue')['default']
133-
HomeStats: typeof import('./src/components/home/Stats.vue')['default']
138+
HomeStore: typeof import('./src/components/home/Store.vue')['default']
139+
HomeTooling: typeof import('./src/components/home/Tooling.vue')['default']
140+
HomeVuetifyOne: typeof import('./src/components/home/VuetifyOne.vue')['default']
134141
IconsChevronDown: typeof import('./src/components/icons/ChevronDown.vue')['default']
135142
IntroductionComparison: typeof import('./src/components/introduction/Comparison.vue')['default']
136143
IntroductionConsultingServices: typeof import('./src/components/introduction/ConsultingServices.vue')['default']

‎packages/docs/src/components/doc/PremiumThemesGallery.vue‎

Lines changed: 0 additions & 90 deletions
This file was deleted.

‎packages/docs/src/components/home/BgGradient.vue‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,36 @@
22
<div class="v-bg position-absolute top-0 right-0 left-0 bottom-0">
33
<div
44
:class="{
5-
[`bg-${props.color}`]: true
5+
[`bg-${props.color || defaultColor}`]: true,
6+
'opacity-20': !props.removeOpacity,
67
}"
78
aria-hidden="true"
8-
class="overflow-hidden opacity-20 w-100 h-100"
9+
class="overflow-hidden w-100 h-100"
910
/>
1011
</div>
1112
</template>
1213

1314
<script setup>
15+
const theme = useTheme()
16+
1417
const props = defineProps({
1518
color: {
1619
type: String,
17-
default: 'primary',
1820
},
21+
removeOpacity: {
22+
type: Boolean,
23+
default: false,
24+
},
25+
})
26+
27+
const defaultColor = computed(() => {
28+
return theme.current.value.dark ? 'grey-darken-3' : 'blue-grey-lighten-3'
1929
})
2030
</script>
2131

2232
<style scoped>
2333
.v-bg {
2434
filter: blur(100px);
25-
opacity: 80%;
2635
pointer-events: none;
2736
}
2837
@@ -33,7 +42,7 @@
3342
0% 0%,
3443
100% 0%,
3544
100% 40%,
36-
0% 70%
45+
0% 40%
3746
)
3847
}
3948
</style>

‎packages/docs/src/components/home/Blogs.vue‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<v-responsive class="py-16">
3+
<v-container class="pt-0">
4+
<div class="mb-10">
5+
<h4 class="text-h4 font-weight-bold mb-5">
6+
Blog Posts
7+
</h4>
8+
9+
<v-responsive class="mx-auto my-5" max-width="700">
10+
<h6 class="text-h6 font-weight-regular text-medium-emphasis">
11+
Stay up to date with the latest news and updates from the Vuetify team.
12+
</h6>
13+
</v-responsive>
14+
</div>
15+
16+
<v-row class="text-left">
17+
<v-col
18+
v-for="(item , i) in items"
19+
:key="i"
20+
class="d-flex"
21+
cols="12"
22+
md="4"
23+
>
24+
<v-card
25+
class="d-flex flex-column pa-4"
26+
rounded="lg"
27+
border
28+
flat
29+
link
30+
>
31+
<p class="text-caption text-medium-emphasis mb-0">{{ item.date }}</p>
32+
33+
<p class="mb-1">{{ item.title }}</p>
34+
35+
<p class="text-medium-emphasis mt-1 mb-1 flex-grow-1">
36+
{{ item.shortDescription }}
37+
</p>
38+
39+
<div class="d-flex align-center ga-2 text-medium-emphasis">
40+
<v-icon size="small">mdi-circle-edit-outline</v-icon>
41+
{{ item.personName }}
42+
</div>
43+
</v-card>
44+
</v-col>
45+
</v-row>
46+
</v-container>
47+
</v-responsive>
48+
</template>
49+
50+
<script setup>
51+
const items = [
52+
{
53+
title: 'Enhance Your Lead Conversion Strategies',
54+
shortDescription: 'Culpa anim laboris consequat excepteur dolor ex adipisicing ea aliquip veniam. Officia duis mollit id labore. Duis labore ex minim anim nulla minim dolore amet...',
55+
date: 'Apr 5, 2023',
56+
personName: 'John Leider',
57+
},
58+
{
59+
title: 'Leveraging SEO to Boost Sales Effectively',
60+
shortDescription: 'Earum molestias dolores autem quam natus. Aut velit fugiat excepturi minus voluptatem rerum voluptas. Ea rerum nemo quaerat...',
61+
date: 'Sep 15, 2023',
62+
personName: 'Heather Leider',
63+
},
64+
{
65+
title: 'Optimizing Customer Engagement',
66+
shortDescription: 'Qui voluptatum molestiae sint et atque facere. Distinctio ipsum voluptatum asperiores fuga consequatur aliquam.',
67+
date: 'Feb 20, 2022',
68+
personName: 'Kael Watts-Deuchar',
69+
},
70+
]
71+
72+
</script>

‎packages/docs/src/components/home/ComponentGallery.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
<template>
22
<v-responsive class="py-16">
33
<v-container class="pt-0">
4-
<HomeBgGradient color="grey" />
4+
<HomeBgGradient />
55

6-
<h4 class="text-md-h4 text-h5 font-weight-bold mb-10">
6+
<h4 class="text-h4 font-weight-bold mb-5">
77
Component Gallery
88
</h4>
99

10-
<div class="d-flex justify-center mb-5">
10+
<v-responsive class="mx-auto mb-5" max-width="700">
11+
<h6 class="text-h6 font-weight-regular text-medium-emphasis">
12+
Vuetify provides a comprehensive collection of components that can be used to build your application.
13+
</h6>
14+
</v-responsive>
15+
16+
<div class="d-flex justify-center mb-10">
1117
<v-chip-group
1218
v-model="selectedComponent"
1319
class="d-flex justify-center"

‎packages/docs/src/components/home/Discord.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<v-responsive :class="theme.current.value.dark ? '' : 'bg-primary'">
3+
<HomeBgGradient color="primary" />
4+
5+
<v-container class="pa-6 text-left">
6+
<v-row justify="center">
7+
<v-col
8+
class="pa-6 pa-md-12 text-center"
9+
cols="12"
10+
>
11+
12+
<h4 class="text-h4 font-weight-bold mb-5">
13+
Join our community of 40k+ developers
14+
</h4>
15+
16+
<p class="text-h6 font-weight-regular mb-6 w-100 w-md-50 mx-auto">
17+
Join us to get help with your Vuetify projects, share your work, and connect with other developers on Discord.
18+
</p>
19+
20+
<v-btn
21+
:color="theme.current.value.dark ? 'primary' : 'background'"
22+
class="mr-4 text-none"
23+
prepend-icon="mdi-discord"
24+
rounded="lg"
25+
size="large"
26+
text="Join Discord"
27+
variant="outlined"
28+
/>
29+
</v-col>
30+
</v-row>
31+
</v-container>
32+
</v-responsive>
33+
</template>
34+
35+
<script setup>
36+
const theme = useTheme()
37+
</script>

‎packages/docs/src/components/home/Ecosystem.vue‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<v-responsive class="py-15">
3+
<v-container>
4+
<HomeBgGradient />
5+
6+
<div class="mb-10">
7+
<h4 class="text-h4 font-weight-bold mb-5">
8+
More than just Components
9+
</h4>
10+
11+
<v-responsive class="mx-auto mb-15" max-width="700">
12+
<h6 class="text-h6 font-weight-regular text-medium-emphasis">
13+
Vuetify is a complete Vue ecosystem that provides you with all of the tools necessary to create beautiful content rich web applications.
14+
</h6>
15+
</v-responsive>
16+
</div>
17+
18+
<HomeMarquee :items="features" class="my-5">
19+
<template #default="{ item }">
20+
<v-img
21+
:src="item.image"
22+
class="px-6"
23+
width="200"
24+
/>
25+
</template>
26+
</HomeMarquee>
27+
</v-container>
28+
</v-responsive>
29+
</template>
30+
31+
<script setup>
32+
const theme = useTheme()
33+
const features = computed(() => [
34+
{
35+
description: 'Vuetify MCP is a tool for managing your Vuetify projects. You can manage your projects and see the status of the project.',
36+
image: `https://cdn.vuetifyjs.com/docs/images/logos/vone-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
37+
},
38+
{
39+
description: 'Vuetify MCP is a tool for managing your Vuetify projects. You can manage your projects and see the status of the project.',
40+
image: `https://cdn.vuetifyjs.com/docs/images/logos/v0-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
41+
},
42+
{
43+
image: `https://cdn.vuetifyjs.com/docs/images/one/logos/vplay-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
44+
description: 'You can use Vuetify Playground to experiment with Vuetify components and see how they work.',
45+
},
46+
{
47+
description: 'Bin is a tool for sharing code snippets. You can save your snippets with a unique URL.',
48+
image: `https://cdn.vuetifyjs.com/docs/images/one/logos/vbin-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
49+
},
50+
{
51+
description: 'Vuetify Link can be used to shorten long URLs. You can save them for later use.',
52+
image: `https://cdn.vuetifyjs.com/docs/images/one/logos/vlink-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
53+
},
54+
{
55+
description: 'Vuetify Studio is a tool for creating Vuetify components. You can create your own components and share them with others.',
56+
image: `https://cdn.vuetifyjs.com/docs/images/one/logos/vstudio-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
57+
},
58+
{
59+
description: 'Vuetify Issues is a tool for reporting issues with Vuetify. You can report issues and see the status of the issue.',
60+
image: `https://cdn.vuetifyjs.com/docs/images/one/logos/vissues-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
61+
},
62+
{
63+
description: 'Vuetify MCP is a tool for managing your Vuetify projects. You can manage your projects and see the status of the project.',
64+
image: `https://cdn.vuetifyjs.com/docs/images/logos/vmcp-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
65+
},
66+
{
67+
description: 'Vuetify MCP is a tool for managing your Vuetify projects. You can manage your projects and see the status of the project.',
68+
image: `https://cdn.vuetifyjs.com/docs/images/logos/vsnips-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
69+
},
70+
{
71+
description: 'Vuetify MCP is a tool for managing your Vuetify projects. You can manage your projects and see the status of the project.',
72+
image: `https://cdn.vuetifyjs.com/docs/images/logos/vloader-logo-${theme.current.value.dark ? 'dark' : 'light'}.png`,
73+
},
74+
])
75+
</script>

0 commit comments

Comments
 (0)