Divide landing page into components

frontend/components/organisms/FeatureCard.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-card>
+    <v-img
+      :src="imageSrc"
+      height="200px"
+    />
+    <v-card-title primary-title class="layout justify-center">
+      <div class="headline text-xs-center font-weight-bold mb-2">
+        {{ title }}
+      </div>
+    </v-card-title>
+    <v-card-text class="subtitle-1 layout justify-center">
+      {{ text }}
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+      required: true
+    },
+    text: {
+      type: String,
+      default: '',
+      required: true
+    },
+    imageSrc: {
+      type: String,
+      default: '',
+      required: true
+    }
+  }
+}
+</script>

frontend/components/organisms/FeatureCards.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-container>
+    <v-layout
+      column
+      wrap
+      class="my-5"
+      align-center
+    >
+      <v-flex xs12 sm4 class="my-3">
+        <div class="text-xs-center">
+          <h2 class="headline">
+            The best features
+          </h2>
+        </div>
+      </v-flex>
+      <v-flex xs12>
+        <v-container grid-list-xl>
+          <v-layout wrap align-center>
+            <v-flex
+              v-for="(item, index) in featureCards"
+              :key="index"
+              xs12
+              md4
+            >
+              <feature-card
+                :image-src="item.imageSrc"
+                :title="item.title"
+                :text="item.text"
+              />
+            </v-flex>
+          </v-layout>
+        </v-container>
+      </v-flex>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+import FeatureCard from '@/components/organisms/FeatureCard'
+
+export default {
+  components: {
+    FeatureCard
+  },
+
+  data() {
+    return {
+      featureCards: [
+        {
+          imageSrc: '/images/feature3.png',
+          title: 'Team Collaboration',
+          text: 'Annotation with your team mates.'
+        },
+        {
+          imageSrc: '/images/feature2.png',
+          title: 'Any Language',
+          text: 'Annotation with any language.'
+        },
+        {
+          imageSrc: '/images/feature1.png',
+          title: 'Open Source',
+          text: 'Annotation with free and customizable.'
+        }
+      ]
+    }
+  }
+}
+</script>

frontend/components/organisms/TheBottomBanner.vue

@@ -0,0 +1,48 @@
+<template>
+  <section>
+    <v-parallax
+      src="/images/vbanner.jpg"
+      height="400"
+      dark
+    >
+      <v-container>
+        <v-layout
+          wrap
+          align-center
+          justify-center
+          class="white--text"
+        >
+          <v-flex
+            xs12
+            md7
+          >
+            <v-img
+              src="http://doccano.herokuapp.com/static/images/named_entity_recognition.6fb82064e7aa.png"
+              max-height="380"
+              contain
+              class="ma-5"
+            />
+          </v-flex>
+          <v-flex
+            xs12
+            md5
+          >
+            <h1 class="mb-2 display-1 text-xs-center">
+              Realize your ideas quickly
+            </h1>
+            <div class="mt-4">
+              <v-btn
+                class="blue lighten-2"
+                dark
+                large
+                href="/demo"
+              >
+                Try demo
+              </v-btn>
+            </div>
+          </v-flex>
+        </v-layout>
+      </v-container>
+    </v-parallax>
+  </section>
+</template>

frontend/components/organisms/TheFooter.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-footer
+    color="primary lighten-1"
+    padless
+  >
+    <v-layout
+      justify-center
+      wrap
+    >
+      <v-flex
+        black
+        lighten-2
+        py-4
+        text-center
+        white--text
+        xs12
+      >
+        &copy; {{ new Date().getFullYear() }} doccano
+      </v-flex>
+    </v-layout>
+  </v-footer>
+</template>

frontend/components/organisms/TheHeader.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-app-bar
+    app
+    color=""
+  >
+    <nuxt-link to="/" style="line-height:0;">
+      <img src="~/assets/icon.png" height="48">
+    </nuxt-link>
+    <v-toolbar-title class="align-center ml-2">
+      doccano
+    </v-toolbar-title>
+    <div class="flex-grow-1" />
+    <v-btn
+      outlined
+      href="auth"
+    >
+      Sign in
+    </v-btn>
+  </v-app-bar>
+</template>
+
+<style scoped>
+.top{
+  text-decoration: none;
+}
+</style>

frontend/components/organisms/TheTopBanner.vue

@@ -0,0 +1,46 @@
+<template>
+  <section>
+    <v-parallax
+      src="/images/vbanner.jpg"
+      height="400"
+      dark
+    >
+      <v-layout
+        wrap
+        align-center
+        justify-center
+        class="white--text"
+      >
+        <v-flex text-right class="mr-5">
+          <img src="~/assets/icon.png" alt="doccano" height="200">
+        </v-flex>
+        <v-flex>
+          <h1 class="mb-2 display-1 text-xs-center">
+            Text Annotation for Human
+          </h1>
+          <div class="mt-4">
+            <v-btn
+              large
+              outlined
+              color="white"
+              href="https://github.com/chakki-works/doccano"
+            >
+              <v-icon left>
+                mdi-github-circle
+              </v-icon>
+              GitHub
+            </v-btn>
+            <v-btn
+              class="blue lighten-2 ml-5"
+              dark
+              large
+              href="/auth"
+            >
+              Get Started
+            </v-btn>
+          </div>
+        </v-flex>
+      </v-layout>
+    </v-parallax>
+  </section>
+</template>

frontend/layouts/default.vue

@@ -1,53 +1,19 @@
 <template>
   <v-app>
-    <v-app-bar
-      app
-      color=""
-    >
-      <nuxt-link to="/" style="line-height:0;">
-        <img src="~/assets/icon.png" height="48">
-      </nuxt-link>
-      <v-toolbar-title class="align-center ml-2">
-        doccano
-      </v-toolbar-title>
-      <div class="flex-grow-1" />
-      <v-btn
-        outlined
-        href="auth"
-      >
-        Sign in
-      </v-btn>
-    </v-app-bar>
+    <the-header />
     <nuxt />
-    <v-footer
-      color="primary lighten-1"
-      padless
-    >
-      <v-layout
-        justify-center
-        wrap
-      >
-        <v-flex
-          black
-          lighten-2
-          py-4
-          text-center
-          white--text
-          xs12
-        >
-          &copy; {{ new Date().getFullYear() }} doccano
-        </v-flex>
-      </v-layout>
-    </v-footer>
+    <the-footer />
   </v-app>
 </template>
 
 <script>
-export default {}
-</script>
+import TheFooter from '@/components/organisms/TheFooter'
+import TheHeader from '@/components/organisms/TheHeader'
 
-<style scoped>
-.top{
-  text-decoration: none;
+export default {
+  components: {
+    TheFooter,
+    TheHeader
+  }
 }
-</style>
+</script>

frontend/pages/index.vue

@@ -1,172 +1,21 @@
 <template>
   <v-content>
-    <section>
-      <v-parallax
-        src="/images/vbanner.jpg"
-        height="400"
-        dark
-      >
-        <v-layout
-          wrap
-          align-center
-          justify-center
-          class="white--text"
-        >
-          <v-flex text-right class="mr-5">
-            <img src="~/assets/icon.png" alt="doccano" height="200">
-          </v-flex>
-          <v-flex>
-            <h1 class="mb-2 display-1 text-xs-center">
-              Text Annotation for Human
-            </h1>
-            <div class="mt-4">
-              <v-btn
-                large
-                outlined
-                color="white"
-                href="https://github.com/chakki-works/doccano"
-              >
-                <v-icon left>
-                  mdi-github-circle
-                </v-icon>
-                GitHub
-              </v-btn>
-              <v-btn
-                class="blue lighten-2 ml-5"
-                dark
-                large
-                href="/auth"
-              >
-                Get Started
-              </v-btn>
-            </div>
-          </v-flex>
-        </v-layout>
-      </v-parallax>
-    </section>
-    <v-container>
-      <v-layout
-        column
-        wrap
-        class="my-5"
-        align-center
-      >
-        <v-flex xs12 sm4 class="my-3">
-          <div class="text-xs-center">
-            <h2 class="headline">
-              The best features
-            </h2>
-          </div>
-        </v-flex>
-        <v-flex xs12>
-          <v-container grid-list-xl>
-            <v-layout wrap align-center>
-              <v-flex xs12 md4>
-                <v-card>
-                  <v-img
-                    src="/images/feature3.png"
-                    height="200px"
-                  />
-                  <v-card-title primary-title class="layout justify-center">
-                    <div class="headline text-xs-center font-weight-bold mb-2">
-                      Team Collaboration
-                    </div>
-                  </v-card-title>
-                  <v-card-text class="subtitle-1 layout justify-center">
-                    Annotation with your team mates.
-                  </v-card-text>
-                </v-card>
-              </v-flex>
-              <v-flex xs12 md4>
-                <v-card>
-                  <v-img
-                    src="/images/feature2.png"
-                    height="200px"
-                  />
-                  <v-card-title primary-title class="layout justify-center">
-                    <div class="headline text-xs-center font-weight-bold mb-2">
-                      Any Language
-                    </div>
-                  </v-card-title>
-                  <v-card-text class="subtitle-1 layout justify-center">
-                    Annotation with any language.
-                  </v-card-text>
-                </v-card>
-              </v-flex>
-              <v-flex xs12 md4>
-                <v-card>
-                  <v-img
-                    src="/images/feature1.png"
-                    height="200px"
-                  />
-                  <v-card-title primary-title class="layout justify-center">
-                    <div class="headline text-xs-center font-weight-bold mb-2">
-                      Open Source
-                    </div>
-                  </v-card-title>
-                  <v-card-text class="subtitle-1 layout justify-center">
-                    Annotation with free and customizable.
-                  </v-card-text>
-                </v-card>
-              </v-flex>
-            </v-layout>
-          </v-container>
-        </v-flex>
-      </v-layout>
-    </v-container>
-
-    <section>
-      <v-parallax
-        src="/images/vbanner.jpg"
-        height="400"
-        dark
-      >
-        <v-container>
-          <v-layout
-            wrap
-            align-center
-            justify-center
-            class="white--text"
-          >
-            <v-flex
-              xs12
-              md7
-            >
-              <v-img
-                src="http://doccano.herokuapp.com/static/images/named_entity_recognition.6fb82064e7aa.png"
-                max-height="380"
-                contain
-                class="ma-5"
-              />
-            </v-flex>
-            <v-flex
-              xs12
-              md5
-            >
-              <h1 class="mb-2 display-1 text-xs-center">
-                Realize your ideas quickly
-              </h1>
-              <div class="mt-4">
-                <v-btn
-                  class="blue lighten-2"
-                  dark
-                  large
-                  href="/demo"
-                >
-                  Try demo
-                </v-btn>
-              </div>
-            </v-flex>
-          </v-layout>
-        </v-container>
-      </v-parallax>
-    </section>
+    <the-top-banner />
+    <feature-cards />
+    <the-bottom-banner />
   </v-content>
 </template>
 
 <script>
+import FeatureCards from '@/components/organisms/FeatureCards'
+import TheTopBanner from '@/components/organisms/TheTopBanner'
+import TheBottomBanner from '@/components/organisms/TheBottomBanner'
+
 export default {
   components: {
+    FeatureCards,
+    TheTopBanner,
+    TheBottomBanner
   }
 }
 </script>