diff --git a/packages/vuetifyjs.com/assets/app.js b/packages/vuetifyjs.com/assets/app.js
index 382aca4f596..0f830e35f0b 100755
--- a/packages/vuetifyjs.com/assets/app.js
+++ b/packages/vuetifyjs.com/assets/app.js
@@ -5,7 +5,7 @@ import Vuetify from 'vuetify'
// Bootstrap
import { createStore } from 'store/index'
import { createRouter } from 'router/index'
-import { createLanguage } from 'i18n/index'
+import { createI18n } from 'i18n/index'
import { sync } from 'vuex-router-sync'
// Application
@@ -24,7 +24,7 @@ export function createApp (ssrContext) {
// create store and router instances
const store = createStore()
const router = createRouter()
- const language = createLanguage()
+ const i18n = createI18n()
// sync the router with the vuex store.
// this registers `store.state.route`
@@ -37,7 +37,7 @@ export function createApp (ssrContext) {
router,
store,
ssrContext,
- language,
+ i18n,
render: h => h(App)
})
diff --git a/packages/vuetifyjs.com/assets/stylus/main.styl b/packages/vuetifyjs.com/assets/stylus/main.styl
index 95383839f60..67f0748526e 100755
--- a/packages/vuetifyjs.com/assets/stylus/main.styl
+++ b/packages/vuetifyjs.com/assets/stylus/main.styl
@@ -5,7 +5,7 @@
@import '../../node_modules/vuetify/src/stylus/settings/_colors'
$theme = {
- primary: #0862C4
+ primary: #0862c4
secondary: #5CBBF6
accent: #1697F6
info: $blue.base
diff --git a/packages/vuetifyjs.com/components/AppDrawer.vue b/packages/vuetifyjs.com/components/AppDrawer.vue
index c812ef7eb65..84249543778 100755
--- a/packages/vuetifyjs.com/components/AppDrawer.vue
+++ b/packages/vuetifyjs.com/components/AppDrawer.vue
@@ -1,28 +1,44 @@
+
+
+
v-navigation-drawer(
app
+ permanent
+ clipped
+ v-if="$route.fullPath !== '/'"
v-model="appDrawer"
:disable-route-watcher="!routeWatcher"
)
- div.pa-5.text-xs-center
- v-avatar(size="68" tile).mb-5
- img(src="/static/v.png" alt="Logo")
- img(
+ div.text-xs-center
+ div.diamondSponsorLabel Diamond Sponsor
+ img.diamondSponsor(
src="https://vuetifyjs.com/static/doc-images/backers/lmax-exchange.png"
alt="Sponsor"
- width="80%"
)
v-container(fluid)
- v-select(
- :items="['pre-release 0.16.0']"
- value="pre-release 0.16.0"
- solo
- ).mb-4
v-select(
autocomplete
solo
append-icon="search"
- ).mb-5
+ ).mb-4
v-list(dense)
template(v-for="item in items")
v-list-group(v-if="item.items" v-bind:group="item.group" no-action)
diff --git a/packages/vuetifyjs.com/components/AppToolbar.vue b/packages/vuetifyjs.com/components/AppToolbar.vue
index c88f1a99ae9..1f381e5640f 100755
--- a/packages/vuetifyjs.com/components/AppToolbar.vue
+++ b/packages/vuetifyjs.com/components/AppToolbar.vue
@@ -1,8 +1,45 @@
+
+
+
+
v-toolbar(
app
+ clipped
ref="toolbar"
- ).accent
+ dark
+ class="primary"
+ )
+ img(
+ src="/static/v-alt.svg"
+ height="38px"
+ )
+ Vuetify
+
+
+ v-btn(flat)
+ span.hidden-md-and-up Docs
+ span.hidden-sm-and-down Documentation
+ v-btn(flat) Blog
+ v-btn(flat).hidden-sm-and-down Vueticasts
+ v-btn(flat).hidden-sm-and-down Shop
+ v-btn(flat).hidden-sm-and-down Donate
+
diff --git a/packages/vuetifyjs.com/i18n/en.json b/packages/vuetifyjs.com/i18n/en.json
index 9e26dfeeb6e..c369de311de 100755
--- a/packages/vuetifyjs.com/i18n/en.json
+++ b/packages/vuetifyjs.com/i18n/en.json
@@ -1 +1,54 @@
-{}
\ No newline at end of file
+{
+ "home": {
+ "announcementBanner": "Aww yisss, this is an exciting announcement! Or maybe its an advertisement!",
+ "heading1": "Supercharge your development with",
+ "heading1cont": "Vuetify Material Component Framework",
+ "getStarted": "Get Started",
+ "features": [
+ {
+ "img": "/static/doc-images/feature1.svg",
+ "title": "Ready-Made Project Scaffolding",
+ "text": "Vuetify comes ready to go with 5 pre-made vue-cli templates. From simple html to full-blown SSR you are ready to go in minutes."
+ },
+ {
+ "img": "/static/doc-images/feature2.svg",
+ "title": "Semantic Material Components",
+ "text": "Be prepared for an armada of specialized components at your disposal. With over 80 in total, there is a solution for any application."
+ },
+ {
+ "img": "/static/doc-images/feature3.svg",
+ "title": "Vibrant Community",
+ "text": "When you run into a roadblock, you need assistance right away. Vuetify offers chat support in our growing community on Discord server."
+ }
+ ],
+ "checkFeaturesTitle": "All the Tools You Need",
+ "checkFeaturesTitleCtd": "To Build Incredible User Interfaces",
+ "checkFeatures": [
+ "Semantic Helper Components",
+ "SSR and PWA Support",
+ "8 Vue-CLI Templates",
+ "Community Chat Support"
+ ],
+ "checkFeaturesCtd": [
+ "80+ Material Design Components",
+ "Transition System Component",
+ "Blazing Fast",
+ "A La Carte Components"
+ ],
+ "letterFromAuthor": [
+ "Hey there,",
+ "I know choosing a UI framework can be a daunting task -- there are so many options to choose from and every one of them claims that they are the best. So you have to decide for yourself: what are the metrics for success?",
+ "This was me almost a year ago. There were plenty of UI toolkits to choose from, but none of them had everything that I needed, and that is why I started working on Vuetify.",
+ "I am extremely humbled that you have considered using Vuetify as your next UI Framework. A lot of care has went into crafting the perfect setup for taking any idea from conception to production. I look forward to you joining the Vuetify community and am excited to see what incredible interfaces you create!"
+ ],
+ "authorOfVuetify": "Author of Vuetify",
+ "support": {
+ "hasVuetifyHelped": "Has Vuetify helped you create an amazing application?",
+ "showYourSupport": "Show your support for Vuetify by",
+ "becomingAPatron": "becoming a patron"
+ },
+ "becomeSponsor": "Become a Sponsor",
+ "proudlySponsoredBy": "Proudly sponsored by",
+ "callout": "Supercharge your development with the power of Vue and Material Design"
+ }
+}
diff --git a/packages/vuetifyjs.com/i18n/index.js b/packages/vuetifyjs.com/i18n/index.js
index 0cc54f5943b..821aabecdd0 100755
--- a/packages/vuetifyjs.com/i18n/index.js
+++ b/packages/vuetifyjs.com/i18n/index.js
@@ -1,8 +1,14 @@
import Vue from 'vue'
import VueI18n from 'vue-i18n'
+import en from'./en.json'
Vue.use(VueI18n)
-export function createLanguage () {
- return {}
-}
\ No newline at end of file
+export function createI18n () {
+ return new VueI18n({
+ locale: 'en-US',
+ messages: {
+ 'en-US': en
+ }
+ })
+}
diff --git a/packages/vuetifyjs.com/pages/HomeView.vue b/packages/vuetifyjs.com/pages/HomeView.vue
index f938a0897a9..7e4cd65a610 100755
--- a/packages/vuetifyjs.com/pages/HomeView.vue
+++ b/packages/vuetifyjs.com/pages/HomeView.vue
@@ -1,36 +1,359 @@
+
+
+
div#home
+ #announcementBanner
+ p {{ $t('home.announcementBanner')}}
v-parallax(
jumbotron
- height="60vh"
).primary
v-layout(align-center justify-center)
v-flex.text-xs-center
+ img(src="/static/v-alt.svg" alt="Logo")
+ h1.mt-4.mb-5
+ span {{ $t("home.heading1")}}
+ | {{ $t("home.heading1cont")}}
v-btn(
- large
secondary
to="/getting-started/quick-start"
- ).px-3 Get Started
+ ).px-3 {{ $t("home.getStarted")}}
+ p version 0.16.0
+
section#features
v-container
- v-card(height="200px")
- v-layout(align-center)
- v-flex(
- xs12 sm6 md4 lg3
- v-for="(feature, i) in features"
- :key="i"
- )
- section#sponsors-and-backers
+ v-layout(row wrap)
+ v-flex(
+ xs12 sm12 md4 lg4
+ v-for="(feature, i) in features"
+ :key="i"
+ )
+
+ img(:src="feature.img")
+ h3 {{feature.title}}
+ p {{feature.text}}
+
+ section#checkFeatures
+ v-container
+ h2.text-xs-center
+ span All the Tools You Need
+ | To Build Incredible User Interfaces
+ v-layout(row wrap)
+ v-flex.xs12.md5.offset-md1.lg4.offset-lg2.xl3.offset-xl3
+ ul
+ li(v-for="(feature, i) in checkFeatures" :key="i") {{feature}}
+ v-flex.xs12.md5.lg4.xl3
+ ul
+ li(v-for="(feature, i) in checkFeaturesCtd" :key="i") {{feature}}
+
+ section#letterFromAuthor
+ v-container
+ v-layout
+ v-flex.xs9.xl8.offset-xl1
+ v-card
+ p(v-for="(p, i) in letterFromAuthor" :key="i") {{p}}
+ v-flex.xs3.xl2.text-xs-center
+ v-avatar
+ img(src="/static/doc-images/john.jpg")
+ p.john John Leider
+ p.authorOfVuetify {{ $t("home.authorOfVuetify")}}
v-container
- v-card(height="200px")
section#support
v-container
- v-card(height="200px")
+ v-layout(row wrap)
+ v-flex(xs6 offset-xs3 md3 offset-md0 offset-xl1).text-xs-center
+ a(
+ href="https://www.patreon.com/vuetify"
+ target="_blank" rel="noopener"
+ )
+ img(src="/static/doc-images/patreon_logo.png" width="75%")
+ v-flex(xs12 md9 xl7).mb-5
+ p {{ $t("home.support.hasVuetifyHelped")}}
+ p {{ $t("home.support.showYourSupport")}} {{ $t("home.support.becomingAPatron")}}.
+ section#sponsors-and-backers.my-5
+ v-container
+ v-card
+ h2.text-xs-center.text-md-left {{ $t("home.proudlySponsoredBy")}}
+ v-layout(row wrap)
+ v-flex(xs12 sm6 md4 lg3 v-for="(sponsor, i) in sponsors" :key="i").text-xs-center
+ a(:href="sponsor.href" target="_blank" :title="sponsor.title" rel="noopener")
+ img(:src="sponsor.src" :height="sponsor.height" ).sponsor
+ v-flex(xs12 sm6 md4 lg3).text-xs-center
+ v-btn(to="/vuetify/sponsors-and-backers" large).white.primary--text {{ $t("home.becomeSponsor")}}
+ v-icon(right).primary--text fa-arrow-circle-right
+
section#callout
v-container
- v-layout(row wrap)
- v-flex(xs12)
- img(alt="Logo")
+ v-container
+ v-layout(row wrap)
+ v-flex(xs12 md8 lg10)
+ img(src="/static/v-alt.svg" height="50px")
+ h2.mt-4.mb-5 {{ $t("home.callout")}}
home-footer
@@ -39,13 +362,47 @@
export default {
name: 'home-view',
+ data(){
+ return {
+ sponsors: [
+ {
+ title: 'BrowserStack',
+ href: 'https://www.browserstack.com/',
+ src: '/static/doc-images/browser-stack.svg',
+ height: '50px'
+ },
+ {
+ title: 'Cloudflare',
+ href: 'https://www.cloudflare.com/',
+ src: '/static/doc-images/cloudflare.svg'
+ },
+ {
+ title: 'LMAX Exchange',
+ href: 'https://careers.lmax.com/?utm_source=vuetify&utm_medium=logo-link&utm_campaign=lmax-careers',
+ src: '/static/doc-images/backers/lmax-exchange.png',
+ height: '45px'
+ }
+ ]
+ }
+ },
components: {
HomeFooter
},
- data: () => ({
- features: []
- })
+ computed: {
+ features(){
+ return this.$t('home.features')
+ },
+ checkFeatures(){
+ return this.$t('home.checkFeatures')
+ },
+ checkFeaturesCtd(){
+ return this.$t('home.checkFeaturesCtd')
+ },
+ letterFromAuthor(){
+ return this.$t('home.letterFromAuthor')
+ }
+ }
}
diff --git a/packages/vuetifyjs.com/pages/PlaygroundView.vue b/packages/vuetifyjs.com/pages/PlaygroundView.vue
new file mode 100755
index 00000000000..5df292b5b58
--- /dev/null
+++ b/packages/vuetifyjs.com/pages/PlaygroundView.vue
@@ -0,0 +1,55 @@
+
+
+
+
+ .componentDoc
+ v-container
+ section#definition
+ h1 Buttons
+ p The v-btn component replaces the standard html button with a material design theme and a multitude of options. Any color helper class can be used to alter the background or text color.
+
+ section#usage
+ h2 Usage
+ p inline component examples rendered here without container
+
+ section#api
+ h2 Component API
+ p API table component here
+
+ section#examples
+ h2 Examples
+ p Variant deep-dive examples here
+
+
+
diff --git a/packages/vuetifyjs.com/pages/QuickStartView.vue b/packages/vuetifyjs.com/pages/QuickStartView.vue
index ce69d826232..efbc0741e27 100755
--- a/packages/vuetifyjs.com/pages/QuickStartView.vue
+++ b/packages/vuetifyjs.com/pages/QuickStartView.vue
@@ -1,3 +1,3 @@
-
-
\ No newline at end of file
+
+
diff --git a/packages/vuetifyjs.com/router/index.js b/packages/vuetifyjs.com/router/index.js
index bf6c0c56684..57291b92470 100755
--- a/packages/vuetifyjs.com/router/index.js
+++ b/packages/vuetifyjs.com/router/index.js
@@ -25,6 +25,7 @@ export function createRouter () {
route('/', 'Home'),
// Getting Started
route('/getting-started/quick-start', 'QuickStart'),
+ route('/playground', 'Playground'),
// Global redirect for 404
{ path: '*', redirect: '/' }
]
diff --git a/packages/vuetifyjs.com/static/doc-images/backers/cocoatechlogo.png b/packages/vuetifyjs.com/static/doc-images/backers/cocoatechlogo.png
new file mode 100644
index 00000000000..1d05fb873d5
Binary files /dev/null and b/packages/vuetifyjs.com/static/doc-images/backers/cocoatechlogo.png differ
diff --git a/packages/vuetifyjs.com/static/doc-images/backers/deister-logo-light.png b/packages/vuetifyjs.com/static/doc-images/backers/deister-logo-light.png
new file mode 100644
index 00000000000..f0729ff8091
Binary files /dev/null and b/packages/vuetifyjs.com/static/doc-images/backers/deister-logo-light.png differ
diff --git a/packages/vuetifyjs.com/static/doc-images/backers/deister-software.png b/packages/vuetifyjs.com/static/doc-images/backers/deister-software.png
new file mode 100644
index 00000000000..7835353e02f
Binary files /dev/null and b/packages/vuetifyjs.com/static/doc-images/backers/deister-software.png differ
diff --git a/packages/vuetifyjs.com/static/doc-images/backers/lmax-exchange.png b/packages/vuetifyjs.com/static/doc-images/backers/lmax-exchange.png
new file mode 100644
index 00000000000..00a89dc4b16
Binary files /dev/null and b/packages/vuetifyjs.com/static/doc-images/backers/lmax-exchange.png differ
diff --git a/packages/vuetifyjs.com/static/doc-images/browser-stack.png b/packages/vuetifyjs.com/static/doc-images/browser-stack.png
new file mode 100644
index 00000000000..66cc8be24bb
Binary files /dev/null and b/packages/vuetifyjs.com/static/doc-images/browser-stack.png differ
diff --git a/packages/vuetifyjs.com/static/doc-images/browser-stack.svg b/packages/vuetifyjs.com/static/doc-images/browser-stack.svg
new file mode 100755
index 00000000000..f73b8b2931f
--- /dev/null
+++ b/packages/vuetifyjs.com/static/doc-images/browser-stack.svg
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
+
+]>
+
diff --git a/packages/vuetifyjs.com/static/doc-images/cloudflare.svg b/packages/vuetifyjs.com/static/doc-images/cloudflare.svg
new file mode 100755
index 00000000000..ae5ca0aa9f2
--- /dev/null
+++ b/packages/vuetifyjs.com/static/doc-images/cloudflare.svg
@@ -0,0 +1,26 @@
+
+
\ No newline at end of file
diff --git a/packages/vuetifyjs.com/static/doc-images/feature1.svg b/packages/vuetifyjs.com/static/doc-images/feature1.svg
new file mode 100644
index 00000000000..2da1adfb53d
--- /dev/null
+++ b/packages/vuetifyjs.com/static/doc-images/feature1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/vuetifyjs.com/static/doc-images/feature2.svg b/packages/vuetifyjs.com/static/doc-images/feature2.svg
new file mode 100644
index 00000000000..c3a25aabc1a
--- /dev/null
+++ b/packages/vuetifyjs.com/static/doc-images/feature2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/vuetifyjs.com/static/doc-images/feature3.svg b/packages/vuetifyjs.com/static/doc-images/feature3.svg
new file mode 100644
index 00000000000..c99c63f02e2
--- /dev/null
+++ b/packages/vuetifyjs.com/static/doc-images/feature3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/vuetifyjs.com/static/doc-images/featured.png b/packages/vuetifyjs.com/static/doc-images/featured.png
new file mode 100755
index 00000000000..1db8d8d8903
Binary files /dev/null and b/packages/vuetifyjs.com/static/doc-images/featured.png differ
diff --git a/packages/vuetifyjs.com/static/doc-images/john.jpg b/packages/vuetifyjs.com/static/doc-images/john.jpg
new file mode 100644
index 00000000000..f6b498a5028
Binary files /dev/null and b/packages/vuetifyjs.com/static/doc-images/john.jpg differ
diff --git a/packages/vuetifyjs.com/static/doc-images/logo.svg b/packages/vuetifyjs.com/static/doc-images/logo.svg
new file mode 100644
index 00000000000..5d72831b5be
--- /dev/null
+++ b/packages/vuetifyjs.com/static/doc-images/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/vuetifyjs.com/static/doc-images/nature.jpg b/packages/vuetifyjs.com/static/doc-images/nature.jpg
new file mode 100644
index 00000000000..8411a895ec7
Binary files /dev/null and b/packages/vuetifyjs.com/static/doc-images/nature.jpg differ
diff --git a/packages/vuetifyjs.com/static/doc-images/patreon_logo.png b/packages/vuetifyjs.com/static/doc-images/patreon_logo.png
new file mode 100644
index 00000000000..48dc9e95266
Binary files /dev/null and b/packages/vuetifyjs.com/static/doc-images/patreon_logo.png differ
diff --git a/packages/vuetifyjs.com/static/doc-images/paypal.png b/packages/vuetifyjs.com/static/doc-images/paypal.png
new file mode 100755
index 00000000000..d78fd6bdcc5
Binary files /dev/null and b/packages/vuetifyjs.com/static/doc-images/paypal.png differ
diff --git a/packages/vuetifyjs.com/static/doc-images/slant-footer.svg b/packages/vuetifyjs.com/static/doc-images/slant-footer.svg
new file mode 100644
index 00000000000..f976c83e95d
--- /dev/null
+++ b/packages/vuetifyjs.com/static/doc-images/slant-footer.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/vuetifyjs.com/static/doc-images/slant-header.svg b/packages/vuetifyjs.com/static/doc-images/slant-header.svg
new file mode 100644
index 00000000000..542ac31b347
--- /dev/null
+++ b/packages/vuetifyjs.com/static/doc-images/slant-header.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/vuetifyjs.com/static/v-alt.svg b/packages/vuetifyjs.com/static/v-alt.svg
new file mode 100644
index 00000000000..3c20264da74
--- /dev/null
+++ b/packages/vuetifyjs.com/static/v-alt.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/vuetifyjs.com/static/v.svg b/packages/vuetifyjs.com/static/v.svg
new file mode 100644
index 00000000000..7a027fd2f0f
--- /dev/null
+++ b/packages/vuetifyjs.com/static/v.svg
@@ -0,0 +1 @@
+
\ No newline at end of file