chore: update homepage

soulsam480 · Jan 18, 2021 · b6a5985 · b6a5985
1 parent a93c074
commit b6a5985
Show file tree

Hide file tree

Showing 6 changed files with 203 additions and 46 deletions.
diff --git a/.gitignore b/.gitignore
@@ -25,4 +25,5 @@ deploy.sh
 src/firebase/cred.ts
 src/miscred/prelink.ts
 #Electron-builder output
-/dist_electron
+/dist_electron
+build
diff --git a/src/assets/icon.png b/src/assets/icon.png
diff --git a/src/assets/noter.gif b/src/assets/noter.gif
diff --git a/src/styles/default.scss b/src/styles/default.scss
@@ -3,7 +3,7 @@ $bg-primary: #ffffff;
 $primary: #101629;
 $primary-light: #434449;
 $secondary: #d4d4f5;
-$secondary-light: #e1e1ff;
+$secondary-light: #e1e1fb;
 //todo fonts
 @font-face {
   font-family: 'Merriweather Regular';
@@ -39,14 +39,14 @@ a {
 .n-btn {
   background: $secondary;
   color: $primary;
-  border-radius: 2px;
+  border-radius: 3px;
   border: none;
-  padding: 5px 15px;
+  padding: 7px 15px;
   margin: 5px;
   display: inline-block;
   font-family: inherit;
   cursor: pointer;
-  box-shadow: 0.5px 0.5px 7px 0.1px #3535353d;
+  // box-shadow: 0.5px 0.5px 7px 0.1px #3535353d;
   &:hover {
     color: $primary;
     background-color: $secondary-light;
@@ -76,6 +76,10 @@ a {
     display: block;
     width: 100%;
   }
+  &.sm {
+    padding: 5px 10px;
+    font-size: 11px;
+  }
 }
 
 //todo media queries

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,40 +1,121 @@
 <template>
-  <div class=" text-center">
+  <div class="container  ">
     <br />
     <br />
+    <div
+      class="row d-flex landing justify-content-center align-items-center py-5"
+    >
+      <div class="col-sm-6 text-center">
+        <img class="landing_image" src="../assets/icon.png" alt="" />
+      </div>
+      <div class="col-sm-6 ">
+        <h1>
+          <b>Noter</b>
+          <span class=" version">
+            <a href="https://github.com/soulsam480/noter" target="_blank"
+              ><u>v {{ version }}</u></a
+            >
+          </span>
+        </h1>
+        <h5 class="text-muted">
+          Create notes/boards in multiple blocks in realtime sync with all your
+          devices.
+        </h5>
+        <br />
+        <h6>
+          <button class="n-btn" data-toggle="modal" data-target="#loginModal">
+            Login / Signup
+          </button>
+          to Explore
+        </h6>
+      </div>
+    </div>
     <br />
-    <h1>Welcome to <em>noter (ˈnəʊtə)</em> !</h1>
     <br />
-    <h3 class=" text-info">What's this bro??</h3>
-    <div class="px-lg-5">
-      <h4>
-        <em><u>Noter</u></em> is a free note taking and sharing platform built
-        with Vuejs & Firebase. <br />
-        It lets users take and share notes in realtime and also for free without
-        any limits!! Most of the features are currently in beta.
-      </h4>
-      <br />
-      <h4>🎊 The v0.5.0 release of Noter is live</h4>
-      <br />
-      <h4>
-        🔰 Login or Signup to Explore 🔰<br />
-        <br />
-        Peace ☮✌🏼
-      </h4>
-      <br />
-      <h4>Current v0.5.0</h4>
-      <br />
-      <center>
-        If noter helped you some way consider visiting the codebase and drop us
-        a star @
-        <button class="n-btn">
+
+    <h2 class="text-center ">
+      <b>Features</b>
+    </h2>
+    <br />
+    <div class="row">
+      <div class="col-lg-3">
+        <p class="feat-heading text-center">
+          <u>Fast</u>
+        </p>
+        <p>
+          Noter is built with Vue, and it caches data after first visit. So when
+          you come back it opens faster than ever.
+        </p>
+      </div>
+      <div class="col-lg-3">
+        <p class="feat-heading text-center">
+          <u>Free</u>
+        </p>
+        <p>
+          Noter is built with free services and will be free forever. This won't
+          be monetized ever.
+        </p>
+      </div>
+      <div class="col-lg-3">
+        <p class="feat-heading text-center">
+          <u>Open Source</u>
+        </p>
+        <p>
+          The source code is hosted on github. Everything is
           <a href="https://github.com/soulsam480/noter" target="_blank"
-            >Github
-            <img class="img" src="../assets/github.svg" alt="noter github"
-          /></a>
-        </button>
-      </center>
+            ><u>there</u>
+          </a>
+          if you need it.
+        </p>
+      </div>
+      <div class="col-lg-3">
+        <p class="feat-heading text-center">
+          <u>Realtime</u>
+        </p>
+        <p>
+          Noter uses Firebase Realtime Database, So everything is synced in
+          realtime irrespective of your device.
+        </p>
+      </div>
+    </div>
+    <br />
+    <br />
+    <h2 class="text-center ">
+      <b>In action</b>
+    </h2>
+    <br />
+    <img class="noter-action" src="../assets/noter.gif" alt="noter action" />
+
+    <br /><br />
+    <h2 class="text-center ">
+      <b>News</b>
+    </h2>
+    <br />
+    <div class="row d-flex justify-content-center">
+      <div class="col-md-4">
+        <ul>
+          <li>
+            Download the experimental Desktop app for windows 10
+            <a
+              class="n-btn sm"
+              href="https://github.com/soulsam480/noter/releases/download/v0.6.0.beta/Noter.Setup.0.5.0.exe"
+              >here</a
+            >
+          </li>
+        </ul>
+      </div>
     </div>
+    <br /><br /><br />
+    <br />
+    <footer class="text-center">
+      <p>
+        ©
+        <a href="https://sambitsahoo.com" target="_blank"
+          ><u>Sambit Sahoo</u></a
+        >
+        2021, MIT License
+      </p>
+    </footer>
   </div>
 </template>
 
@@ -43,11 +124,93 @@ import Vue from 'vue';
 
 export default Vue.extend({
   name: 'Home',
+  data() {
+    return {
+      version: '',
+    };
+  },
+  async mounted() {
+    await fetch(
+      ' https://api.github.com/repos/soulsam480/noter/releases/latest',
+      {
+        method: 'get',
+      },
+    )
+      .then((res) => res.json())
+
+      .then((dat) => {
+        console.log(dat);
+        this.version = dat.tag_name;
+      });
+  },
   components: {},
 });
 </script>
 <style lang="scss" scoped>
+a {
+  color: black;
+}
+.version {
+  padding-left: 10px;
+  font-size: 40%;
+  a {
+    color: grey !important;
+  }
+}
+.container {
+  padding-bottom: 100px;
+}
+$main: #127e9a;
+$border: #cccccc;
+.main {
+  color: $main;
+}
+.feat-heading {
+  font-size: 20px;
+  font-weight: bold;
+  color: $main;
+  margin-bottom: 10px;
+  border-bottom: 1px solid $border;
+  padding-bottom: 10px;
+  & + p {
+    line-height: 22px;
+    padding: 0 20px;
+    text-align: center;
+  }
+}
+.landing {
+  @media (max-width: 788px) {
+    text-align: center;
+    .col-sm-6:nth-child(2) {
+      padding-top: 20px;
+    }
+  }
+  .col-sm-6:nth-child(2) {
+    h1 {
+      font-size: 45px;
+      color: $main;
+    }
+  }
+}
+.col-lg-3 {
+  @media (min-width: 992px) {
+    &:not(:last-child) {
+      border-right: 1px solid $border;
+    }
+  }
+}
 .img {
   width: 20px;
+  vertical-align: middle;
+}
+.landing_image {
+  width: 250px;
+}
+.noter-action {
+  width: 800px;
+  max-width: 100%;
+  display: block;
+  text-align: center;
+  margin: auto;
 }
 </style>
diff --git a/vue.config.js b/vue.config.js
@@ -36,24 +36,13 @@ module.exports = {
   pluginOptions: {
     electronBuilder: {
       builderOptions: {
-        // name: 'Noter',
-        // description:
-        //   "Noter is a collaborative note-taking platform built for simplicity and productivity. It's free fast and open source.",
-        // homepage: 'https://noter.sambitsahoo.com',
-        // author: {
-        //   name: 'sambit Sahoo',
-        //   email: '[email protected]',
-        // },
-        // repository: 'https://github.com/soulsam480/noter',
-        // build: {
         appId: 'com.sambitsahoo.noter',
         productName: 'Noter',
         copyright: 'Copyright © 2021 Sambit Sahoo',
         buildVersion: '0.5.0',
         nsis: {
           oneClick: false,
         },
-        // },
       },
     },
   },