feat: add landing page

this is a partially working commit

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>

docker-compose.yml

@@ -2,11 +2,13 @@
 version: "3.8"
 
 services:
-  cowin:
-    image: codingcoffee/cowin
-    environment:
-      - DIST_CODE=395
-      - TELEGRAM_BOT_TOKEN=ADD_TELEGRAM_BOT_TOKEN_HERE
-      - TELEGRAM_CHAT_ID=ADD_YOUR_TELEGRAM_ID_HERE
-      - SLEEP_TIME_SEC=60
+  frontend:
+    image: node:15.14.0-alpine3.12
+    restart: unless-stopped
+    volumes:
+      - ./frontend:/code
+    working_dir: /code
+    entrypoint: sh entrypoint.sh
+    ports:
+      - 8080:8080
 

frontend/entrypoint.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+
+echo "Install dependencies"
+npm i
+
+echo "Starting server"
+npm run serve
+

frontend/package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.6.5",

frontend/src/App.vue

@@ -1,16 +1,13 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
     <router-view />
   </div>
 </template>
 
 <style lang="scss">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

frontend/src/views/Home.vue

@@ -1,7 +1,17 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
+    <div></div>
+    <div>
+      <img alt="Vue logo" src="../assets/images/undraw_medicine_b1ol.svg" />
+    </div>
+    <div class="details">
+      <h1>CoWIN Monitor</h1>
+      <h2>An app to monitor and notify you on vaccine availability</h2>
+      <br />
+      <el-button type="primary">Explore Now</el-button>
+      <div></div>
+    </div>
+    <div></div>
   </div>
 </template>
 
@@ -16,3 +26,19 @@ import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
 })
 export default class Home extends Vue {}
 </script>
+
+<style>
+.home {
+  height: 70%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background-color: #ffeed6;
+}
+h1 {
+  font-size: 100px;
+}
+p {
+  font-size: 30px;
+}
+</style>