1st commit

theleadio · Sep 30, 2020 · e69ce7e · e69ce7e
commit e69ce7e
Show file tree

Hide file tree

Showing 32 changed files with 12,259 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,95 @@
+# Created by .ignore support plugin (hsz.mobi)
+# modified by Dr. Lau Cher Han - https://www.thelead.io to fit our template
+
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp
+
+# lead specific settings
+settings.js
diff --git a/README.md b/README.md
@@ -0,0 +1,22 @@
+# nuxt-template
+
+> Kickstart template for NuxtJS website
+
+## Build Setup
+
+```bash
+# install dependencies
+$ npm install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm run start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
diff --git a/assets/README.md b/assets/README.md
@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -0,0 +1,5 @@
+/* purgecss start ignore */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+/* purgecss end ignore */
+@import 'tailwindcss/utilities';
diff --git a/components/Logo.vue b/components/Logo.vue
@@ -0,0 +1,40 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 327.45 418.21" >
+    <defs>
+      <style>.cls-1{fill:#212120;}.cls-2{fill:#3d3d3d;}.cls-3{fill:#a1bace;}.cls-4{fill:#fbe33b;}</style>
+    </defs>
+    <title>lead_logo-latest</title>
+    <!-- <g id="Layer_3" data-name="Layer 3">
+      <path class="cls-1" d="M52.71,428.71V362.93H66.66v54.26H90.6v11.52Z" transform="translate(-7.41 -10.5)"/>
+      <path class="cls-1" d="M148.2,428.71H110.32V362.93H148.2v11.43H124.27V388.8h22.27v11.43H124.27v17H148.2Z" transform="translate(-7.41 -10.5)"/>
+      <path class="cls-1" d="M207.74,428.71l-4.5-15.66H180.57L176,428.71H161.94l21.37-66h17.06l21.46,66ZM200,401.35,195.78,387c-.18-.53-.45-1.42-.81-2.65s-.75-2.59-1.15-4.07-.79-3-1.15-4.48-.61-2.77-.76-3.82q-.18,1-.48,2.34c-.19.9-.41,1.85-.67,2.85s-.52,2-.79,3l-.76,2.88c-.24.9-.46,1.69-.66,2.38l-.42,1.53-4.19,14.4Z" transform="translate(-7.41 -10.5)"/>
+      <path class="cls-1" d="M289.29,395.19a42.71,42.71,0,0,1-2.28,14.6,26.41,26.41,0,0,1-17.09,16.8,44.11,44.11,0,0,1-14.2,2.12H238.4V362.93h19.26A38.88,38.88,0,0,1,270.73,365a26.85,26.85,0,0,1,10,6.14,27.12,27.12,0,0,1,6.37,10.1A40.26,40.26,0,0,1,289.29,395.19Zm-14.13.36a36,36,0,0,0-1.1-9.47,18.1,18.1,0,0,0-3.2-6.59,12.68,12.68,0,0,0-5.13-3.87,18,18,0,0,0-7-1.26h-6.43v42.83h5.13q8.82,0,13.25-5.4T275.16,395.55Z" transform="translate(-7.41 -10.5)"/>
+    </g> -->
+    <g id="Layer_4" data-name="Layer 4">
+      <circle class="cls-2" cx="163.73" cy="163.73" r="163.73"/>
+      <path class="cls-3" d="M121.89,209a9.57,9.57,0,0,0,9.55,9.55h89.09c5.25,0,11.6-3.77,14.11-8.39L239.4,200c2.19-4.78-.31-8.68-5.57-8.68H131.44a9.57,9.57,0,0,0-9.55,9.55Z" transform="translate(-7.41 -10.5)"/>
+      <path class="cls-4" d="M100.55,256.68A8.57,8.57,0,0,1,92,248.11V95.56a8.57,8.57,0,0,1,17.14,0V248.11A8.57,8.57,0,0,1,100.55,256.68Z" transform="translate(-7.41 -10.5)"/>
+      <path class="cls-4" d="M100.55,261.46A13.37,13.37,0,0,1,87.2,248.11V95.56a13.35,13.35,0,0,1,26.69,0V248.11A13.36,13.36,0,0,1,100.55,261.46Zm0-169.69a3.8,3.8,0,0,0-3.8,3.79V248.11a3.8,3.8,0,1,0,7.59,0V95.56A3.79,3.79,0,0,0,100.55,91.77Z" transform="translate(-7.41 -10.5)"/>
+      <path class="cls-4" d="M207.74,256.68H100.55a8.57,8.57,0,1,1,0-17.14H207.74a8.57,8.57,0,0,1,0,17.14Z" transform="translate(-7.41 -10.5)"/>
+      <path class="cls-4" d="M207.74,261.46H100.55a13.35,13.35,0,1,1,0-26.69H207.74a13.35,13.35,0,1,1,0,26.69ZM100.55,244.32a3.8,3.8,0,1,0,0,7.59H207.74a3.8,3.8,0,1,0,0-7.59Z" transform="translate(-7.41 -10.5)"/>
+      <path class="cls-3" d="M121.89,121a9.57,9.57,0,0,0,9.55,9.55H238.38c5.25,0,8.15-4.07,6.45-9l-3.69-9.5a15.91,15.91,0,0,0-13.39-8.75H131.44a9.57,9.57,0,0,0-9.55,9.55Z" transform="translate(-7.41 -10.5)"/>
+      <path class="cls-3" d="M149.3,146.29H131.44a9.94,9.94,0,0,0-9.92,9.91V165a9.05,9.05,0,0,0,9,9H149.3a7.94,7.94,0,0,0,7.93-7.94V154.22A7.93,7.93,0,0,0,149.3,146.29Z" transform="translate(-7.41 -10.5)"/>
+      <path class="cls-3" d="M245.64,146.29H177.08a7.93,7.93,0,0,0-7.94,7.93v11.91a7.94,7.94,0,0,0,7.94,7.94h67.56a9.89,9.89,0,0,0,10-9.29l.47-8.57A9.77,9.77,0,0,0,245.64,146.29Z" transform="translate(-7.41 -10.5)"/>
+    </g>
+  </svg>
+</template>
+<style>
+.NuxtLogo {
+  animation: 1s appear;
+  margin: auto;
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/components/README.md b/components/README.md
@@ -0,0 +1,7 @@
+# COMPONENTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+The components directory contains your Vue.js Components.
+
+_Nuxt.js doesn't supercharge these components._
diff --git a/components/items/Footer.vue b/components/items/Footer.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="px-16 w-full font-poppins py-6">
+        <div class="flex justify-between items-center">
+            <div class="text-xs">
+                Brought to you by <a href="https://thelead.com" target="_blank">LEAD</a>
+            </div>
+            <div class="text-xs">
+                Developed by Edmund Hee
+            </div>
+            <div class="text-xs">
+                Reference from <a href="https://airbnb.com" target="_blank">Airbnb.com</a>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/components/items/LocationHeader.vue b/components/items/LocationHeader.vue
@@ -0,0 +1,14 @@
+<template>
+    <Content>
+        <template v-slot:content>
+            <div class="flex flex-col">
+                <div class="py-6 text-xl md:text-3xl tracking-tight font-light">
+                    <slot name="name"></slot>
+                </div>
+                <div class="text-md md:text-lg tracking-tight font-light underline">
+                    <slot name="location"></slot>
+                </div>
+            </div>
+        </template>
+    </Content>
+</template>
diff --git a/components/items/SearchInput.vue b/components/items/SearchInput.vue
@@ -0,0 +1,31 @@
+<template>
+    <div :class="{
+            'rounded-full':true,
+            'h-full':true,
+            'py-3':true,
+            'px-4':true,
+            'relative':true,
+            'bg-white':true,
+            'w-96': searchFocus,
+            'w-40': !searchFocus,
+            'transition-all':true,
+            'duration-500':true,
+            'ease-in-out':true,
+            'border':true,
+            'border-gray-300': true
+        }">
+        <input class="w-full font-sans font-poppins bg-transparent focus:outline-none active:outline-none text-gray-600 text-sm tracking-wide pr-8" placeholder="Search area" @focus="searchFocus = true" @blur="searchFocus=false"/>
+        <div class="absolute top-0 right-0 p-2">
+            <button class="transition-all duration-300 ease-in-out bg-red-500 rounded-full px-2 py-1 hover:bg-red-600 focus:outline-none active:outline-none" type="button"><i class="text-white text-sm fas fa-search"></i></button>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data: function(){
+        return {
+            searchFocus:false
+        }
+    }
+}
+</script>
diff --git a/components/items/UnitBookingForm.vue b/components/items/UnitBookingForm.vue
@@ -0,0 +1,73 @@
+<template>
+    <div class="px-2">
+        <div id="trigger"></div>
+        <div id="bookingForm" class="border border-gray-400 rounded-lg shadow-2xl px-6 py-4">
+            <div class="flex flex-col">
+                <div class="text-xl py-6">
+                    RM180 <span class="text-sm font-light">/ night</span>
+                </div>
+                <div class="grid grid-rows-2 rounded-lg border border-gray-600 my-4">
+                    <div class="grid grid-cols-2">
+                        <div class="flex flex-col py-2 px-3 border-r border-gray-600">
+                            <div class="text-xs font-semibold tracking-wide">CHECK-IN</div>
+                            <div class="py-1 font-light">10/16/2020</div>
+                        </div>
+                        <div class="flex flex-col py-2 px-3">
+                            <div class="text-xs font-semibold tracking-wide">CHECK-OUT</div>
+                            <div class="py-1 font-light">17/16/2020</div>
+                        </div>
+                    </div>
+                    <div class="flex items-center justify-between border-t border-gray-600">
+                        <div class="flex flex-col py-2 px-3">
+                            <div class="text-xs font-medium">GUESTS</div>
+                            <div class="font-light">2 guests</div>
+                        </div>
+                        <div class="py-2 px-3">
+                            <i class="fas fa-caret-down text-2xl"></i>
+                        </div>
+                    </div>
+                </div>
+                <div id="cancellationPolicies" class="flex flex-col my-4">
+                    <div class="text-xs font-medium">CANCELLATION POLICIES</div>
+                    <div class="grid grid-rows-2 rounded-lg border border-gray-600">
+                        <div class="flex items-center justify-between border-b border-gray-600">
+                            <div class="flex flex-col py-2 px-3">
+                                <div class="py-1 font-light">
+                                    Non-refundable · RM1,080 total
+                                </div>
+                                <div class="text-xs text-gray-700">
+                                    Cancel before 3:00 PM on Oct 16 and only get a refund of the cleaning fee.
+                                </div>
+                            </div>
+                            <div class="px-4">
+                                <input type="radio" class="form-radio h-6 w-6 text-gray-600"/>
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <div class="flex flex-col py-2 px-3">
+                                <div class="py-1 font-light">
+                                    Refundable · RM1,090 total
+                                </div>
+                                <div class="text-xs text-gray-700">
+                                    Free cancellation until Oct 11. After that, cancel before 3:00 PM on Oct 16 and get a 50% refund, minus the first night and service fee.
+                                </div>
+                            </div>
+                            <div class="px-4">
+                                <input type="radio" class="form-radio h-6 w-6 text-gray-600"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <button type="button" class="transition-all duration-500 ease-in-out text-white bg-red-600 py-3 px-4 rounded-lg hover:bg-red-700">Reserve</button>
+
+                <div class="border-b border-gray-400 py-4 text-center font-light text-sm">
+                    You won't be charged yet
+                </div>
+                <div class="flex items-center justify-between pt-6 pb-4">
+                    <div class="text-lg font-medium">Total</div>
+                    <div class="text-lg font-medium">RM1,080</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/components/items/UnitInfo.vue b/components/items/UnitInfo.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="flex flex-col pt-6 w-full border-b border-gray-400">
+        <div class="flex items-center px-2 w-4/5 py-3">
+            <i class="fas fa-home text-gray-700 text-3xl"></i>
+            <div class="flex flex-col ml-4">
+                <div class="text-lg text-gray-800">Entire home</div>
+                <div class="text-sm text-gray-600 font-thin">You'll have the apartment to yourself</div>
+            </div>
+        </div>
+        <div class="flex items-center px-2 w-4/5 py-3">
+            <i class="fas fa-star text-gray-700 text-3xl"></i>
+            <div class="flex flex-col ml-4">
+                <div class="text-lg text-gray-800">Experience host</div>
+                <div class="text-sm text-gray-600 font-thin">Wallace has 151 reviews for the places</div>
+            </div>
+        </div>
+        <div class="flex items-center px-2 w-4/5 py-3">
+            <i class="fas fa-file-alt text-gray-700 text-3xl"></i>
+            <div class="flex flex-col ml-6">
+                <div class="text-lg text-gray-700">Cancellation policy</div>
+                <div class="text-sm text-gray-600 font-thin">Non-refundable at this price. You can pay extra during checkout to make this reservation refundable until Oct 11</div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/components/items/UnitName.vue b/components/items/UnitName.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="flex items-center justify-between py-6 border-b border-gray-400">
+        <div class="flex flex-col">
+            <div class="text-md md:text-xl tracking-tight font-light">
+                <slot name="name"></slot>
+            </div>
+            <div class="text-sm md:text-md tracking-tight font-light">
+                <slot name="description"></slot>
+            </div>
+        </div>
+        <UserImage />
+    </div>
+</template>