<style>
.welcome{
    background-color: #f00;
    float: left;
    padding: 10px
}
.welcome h2{
    font-size: 2em;
}
.welcome p{
    font-size: 1em;
}
.project{
    float: left;
    padding: 10px;
    height: 100%;
    background: greenyellow;
}
</style>
<template>
    <div >
        <v-flex xs12 sm8 md8 fill-height class="welcome">
            <h2>Welcome</h2>
            <p>Welcome to Envoy platform. Create a project to get started</p>
        </v-flex>
        <v-flex xs12 sm4 md4 class="project">
            <v-form>
                <v-text-field v-model="name" name="name" label="Name"></v-text-field>
                <p style="color: red">{{passwordError}}</p>
                <v-btn block @click="createProject">Create</v-btn>
            </v-form>
        </v-flex>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export default class WelcomePage extends Vue {
    public name = '';

    createProject() {
        console.log('Creating: ' + this.name);
    }
}
</script>