Configure Tailiwind, Logo and favicon, Updated README

- Added Tailwind configuration file
- Added custom Fade-in animation to Tailwind configuration file
- Added generic logo placeholder SVG
- Added Favicon.ico

- Update README.md

  - Add placeholder logo image asset.
  - And project documentation on overview of stack.
  - Add Yarn commands to documentation.

[Ticket: FE-02]

.gitignore

@@ -88,3 +88,5 @@ sw.*
 
 # Vim swap files
 *.swp
+.nuxt-storybook
+storybook-static

README.md

@@ -1,6 +1,10 @@
-# beast-of-the-east-campers
+# Web application and templating system
 
-## Build Setup
+<img src="./git-images/logo.svg">
+
+This is a repository for a web application templating system which uses Nuxt, Composition API, Vuex, Storybook, composition API, Typescript, and Jest.
+
+## The Project is built and packaged with Yarn
 
 ```bash
 # install dependencies

components/Logo.vue

@@ -1,21 +1,14 @@
 <template>
-  <svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
-      fill="#00C58E"
-    />
-    <path
-      d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
-      fill="#108775"
-    />
-    <path
-      d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
-      fill="#2F495E"
-    />
-  </svg>
+  <section class="logo">
+    <img src="~/assets/logo.svg" width="250" height="250">
+  </section>
 </template>
 
 <style>
+.logo {
+@apply flex justify-center;
+}
+
 .NuxtLogo {
   animation: 1s appear;
   margin: auto;
@@ -27,3 +20,4 @@
   }
 }
 </style>
+

package.json

@@ -16,13 +16,15 @@
   "devDependencies": {
     "@nuxt/types": "^2.15.3",
     "@nuxt/typescript-build": "^2.1.0",
+    "@nuxtjs/storybook": "^4.0.0",
     "@nuxtjs/tailwindcss": "^4.0.1",
     "@vue/test-utils": "^1.1.3",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^26.6.3",
     "jest": "^26.6.3",
-    "postcss": "^8.2.8",
+    "postcss": "^8.2.9",
     "ts-jest": "^26.5.4",
+    "ts-node": "^9.1.1",
     "vue-jest": "^3.0.4"
   }
-}
+}

pages/index.vue

@@ -1,26 +1,21 @@
 <template>
   <div class="container">
-    <div>
+    <div class="inner">
       <Logo />
       <h1 class="title">
-        beast-of-the-east-campers
+        Landing Zone
       </h1>
+      <p class="subtitle">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      </p>
       <div class="links">
         <a
           href="https://nuxtjs.org/"
           target="_blank"
           rel="noopener noreferrer"
           class="button--green"
         >
-          Documentation
-        </a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="button--grey"
-        >
-          GitHub
+          Contact us
         </a>
       </div>
     </div>
@@ -34,47 +29,23 @@ export default Vue.extend({})
 </script>
 
 <style>
-/* Sample `apply` at-rules with Tailwind CSS
 .container {
-@apply min-h-screen flex justify-center items-center text-center mx-auto;
+@apply flex h-screen animate-fade-in;
 }
-*/
-.container {
-  margin: 0 auto;
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
+
+.inner{
+  @apply m-auto;
 }
 
 .title {
-  font-family:
-    'Quicksand',
-    'Source Sans Pro',
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    sans-serif;
-  display: block;
-  font-weight: 300;
-  font-size: 100px;
-  color: #35495e;
-  letter-spacing: 1px;
+  @apply text-5xl font-serif block text-center font-thin text-gray-400 leading-5;
 }
 
 .subtitle {
-  font-weight: 300;
-  font-size: 42px;
-  color: #526488;
-  word-spacing: 5px;
-  padding-bottom: 15px;
+  @apply font-light text-2xl text-center text-gray-300 w-1/2;
 }
 
 .links {
-  padding-top: 15px;
+  @apply text-center;
 }
 </style>

tailwind.config.js

@@ -0,0 +1,26 @@
+// tailwind.config.js
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {
+      keyframes: {
+        'fade-in': {
+          '0%': {
+            opacity: '0'
+          },
+          '100%': {
+            opacity: '1'
+          },
+        }
+      },
+      animation: {
+        'fade-in': 'fade-in ease 6s'
+      }
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}