added publicPath to routes.js file

thecyrilcril · Jun 18, 2020 · f054469 · f054469
1 parent 0beb76c
commit f054469
Show file tree

Hide file tree

Showing 40 changed files with 242 additions and 65 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -4,10 +4,12 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="description" content="HA Roofing and Construction, a proud Platinum installer, holds a distinguished place among home construction and roofing companies in Austin, Texas."/>
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
+    <title>HA Roofing and Construction</title>
   </head>
-  <body class="md:relative font-serif">
+  <body class="relative font-serif">
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,28 +1,24 @@
 <template>
   <div id="app">
-    <Nav />
+
     <router-view />
   </div>
 </template>
 
 <script>
-import Nav from './components/Nav.vue'
 
 export default {
   name: 'App',
   components: {
-    Nav,
 
   }
 }
 </script>
 
 <style>
 #app {
-  /*font-family: "Roboto", sans-serif;*/
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+
 }
 </style>
diff --git a/src/assets/images/about-bg.jpg b/src/assets/images/about-bg.jpg
diff --git a/src/assets/images/about-bg1.jpg b/src/assets/images/about-bg1.jpg
diff --git a/src/assets/images/contact-bg.jpg b/src/assets/images/contact-bg.jpg
diff --git a/src/assets/images/contact-bg1.jpg b/src/assets/images/contact-bg1.jpg
diff --git a/src/assets/images/old/about-bg.jpg b/src/assets/images/old/about-bg.jpg
diff --git a/src/assets/images/old/about-bg1.jpg b/src/assets/images/old/about-bg1.jpg
diff --git a/src/assets/images/old/contact-bg.jpg b/src/assets/images/old/contact-bg.jpg
diff --git a/src/assets/images/old/contact-bg1.jpg b/src/assets/images/old/contact-bg1.jpg
diff --git a/src/assets/images/old/services-bg.jpg b/src/assets/images/old/services-bg.jpg
diff --git a/src/assets/images/old/services-bg1.jpg b/src/assets/images/old/services-bg1.jpg
diff --git a/src/assets/images/old/slide1.jpg b/src/assets/images/old/slide1.jpg
diff --git a/src/assets/images/old/slide2.jpg b/src/assets/images/old/slide2.jpg
diff --git a/src/assets/images/old/slide3.jpg b/src/assets/images/old/slide3.jpg
diff --git a/src/assets/images/old/slide33.jpg b/src/assets/images/old/slide33.jpg
diff --git a/src/assets/images/old/slide333.jpg b/src/assets/images/old/slide333.jpg
diff --git a/src/assets/images/old/slide4.jpg b/src/assets/images/old/slide4.jpg
diff --git a/src/assets/images/old/slide5.jpg b/src/assets/images/old/slide5.jpg
diff --git a/src/assets/images/services-bg.jpg b/src/assets/images/services-bg.jpg
diff --git a/src/assets/images/services-bg1.jpg b/src/assets/images/services-bg1.jpg
diff --git a/src/assets/images/slide1.jpg b/src/assets/images/slide1.jpg
diff --git a/src/assets/images/slide2.jpg b/src/assets/images/slide2.jpg
diff --git a/src/assets/images/slide3.jpg b/src/assets/images/slide3.jpg
diff --git a/src/assets/images/slide33.jpg b/src/assets/images/slide33.jpg
diff --git a/src/assets/images/slide333.jpg b/src/assets/images/slide333.jpg
diff --git a/src/assets/images/slide4.jpg b/src/assets/images/slide4.jpg
diff --git a/src/assets/images/slide5.jpg b/src/assets/images/slide5.jpg
diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="carousel main-carousel is-hidden -z-10">
+    <div class="carousel main-carousel is-hidden -z-10 w-full fixed top-0">
         <slot></slot>
     </div>
 

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -0,0 +1,24 @@
+<template>
+    <div class="md:px-20 bg-gray-900">
+        <div class="px-6 py-4 text-gray-500 font-sans font-light text-sm tracking-wider">
+            &copy; {{ date.getFullYear() }} HA Roofing and Construction. All Rights Reserved.
+
+        </div>
+    </div>
+</template>
+
+<script>
+  let date = new Date()
+export default {
+
+  name: 'Footer',
+  data () {
+    return {
+        date
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
@@ -1,38 +1,41 @@
 <template>
-    <header class="md:px-20 md:py-8 md:w-full md:absolute md:top-0 font-sans">
-        <nav class="md:flex md:justify-between uppercase">
-            <div class="brand py-8 px-6 flex justify-between md:py-0 md:px-0 md:w-1/5 relative z-10">
+    <header class="md:px-20 md:py-8 w-full fixed top-0 font-sans">
+        <nav class="flex justify-between uppercase">
+            <div class="brand py-8 px-6 w-full flex justify-between md:py-0 md:px-0 md:w-1/5 relative z-10">
                 <div>
-                    <router-link to="/" class="font-bold text-gray-600 tracking-wider" @click.native="toggleNav(false)" exact>
+                    <router-link to="/"
+                    class="md:mx-8 md:font-semibold tracking-wider text-white border-transparent border-b-2 transition-colors duration-200 ease-in-out hover:border-white" @click.native="toggleNav(false)" exact>
                         Tieralfred Roofing
                     </router-link>
                 </div>
-                <div class="menu-trigger md:hidden cursor-pointer py-2" @click="toggleNav">
+                <div class="menu-trigger md:hidden cursor-pointer py-2 text-white" @click="toggleNav">
                     <i class="gg-menu"></i>
                 </div>
             </div>
 
 
-            <div class="navigation md:x-navigation fixed md:static top-0  w-full md:w-auto min-h-screen md:min-h-0 bg-gray-300 md:bg-transparent pt-32 md:pt-0 md:flex md:justify-end"
+            <div class="navigation md:x-navigation fixed md:static top-0 w-full md:w-auto min-h-screen md:min-h-0 bg-red-500 mobile-nav-bg md:bg-transparent pt-32 md:pt-0 md:flex md:justify-end"
             :class="{'open': mobileMenu}"
             >
             <ul class="list-reset md:flex md:flex-1 md:justify-between">
 
                 <li class="text-center py-4 text-3xl md:py-0 md:text-base">
                     <router-link
                     to="/about"
-                    class="md:mx-8 md:font-semibold md:text-gray-600 tracking-wider"
+                    class="md:mx-8 md:font-semibold tracking-wider text-white border-transparent border-b-2 transition-colors duration-200 ease-in-out hover:border-white"
                     @click.native="toggleNav(false)">About</router-link>
                 </li>
 
                 <li class="text-center py-4 text-3xl md:py-0 md:text-base">
-                    <router-link to="/services" class="md:mx-8 md:font-semibold md:text-gray-600 tracking-wider"
-                     @click.native="toggleNav(false)"
-                    >Services</router-link>
+                    <router-link to="/services"
+                      class="md:mx-8 md:font-semibold tracking-wider text-white border-transparent border-b-2 transition-colors duration-200 ease-in-out hover:border-white"
+                      @click.native="toggleNav(false)">
+                        Services
+                    </router-link>
                 </li>
 
                 <li class="text-center py-4 text-3xl md:py-0 md:text-base">
-                    <router-link to="/contact" class="md:mx-8 md:font-semibold md:text-gray-600 tracking-wider"
+                    <router-link to="/contact" class="md:mx-8 md:font-semibold tracking-wider text-white border-transparent border-b-2 transition-colors duration-200 ease-in-out hover:border-white"
                      @click.native="toggleNav(false)"
                     >Contact</router-link>
                 </li>
@@ -70,7 +73,6 @@ export default {
 }
 </script>
 
-<style lang="sass" scoped>
-    router-link
-        font-family: "Roboto", sans-serif
+<style lang="sass">
+
 </style>
diff --git a/src/main.sass b/src/main.sass
@@ -7,7 +7,10 @@
 
 @tailwind utilities
 
-.gg-menu
+.gg-menu,
+.gg-pin,
+.gg-phone,
+.gg-smartphone
     --ggs: 1.1
 
 @responsive
@@ -25,4 +28,5 @@
         transition: none
         pointer-events: all
 
-
+    .mobile-nav-bg
+        background-color: transparentize(#f56565, 0.1)
diff --git a/src/routes.js b/src/routes.js
@@ -7,7 +7,10 @@ import NotFound from './views/NotFound'
 export default {
     mode: 'history',
 
-    linkActiveClass: 'md:text-gray-900',
+    publicPath: '/',
+
+    linkActiveClass: 'md:text-white md:border-t-2 md:border-white',
+
 
     routes: [
         {

diff --git a/src/views/About.vue b/src/views/About.vue
@@ -1,14 +1,56 @@
 <template>
-    <div class="">
-        <h1>About</h1>
+    <div>
+        <Nav />
+        <div class="h-auto relative -z-10">
+          <div class="px-20 bg-cover bg-center about">
+            <div class="px-6 py-48 h-screen">
+
+            </div>
+
+          </div>
+          <div class="md:px-20 bg-gray-300 -mt-64">
+            <div class="px-6 py-12 md:flex text-gray-800">
+              <div class="md:w-1/2">
+                <h1 class="text-4xl md:text-6xl font-semibold">About</h1>
+                <p class="text-base mt-2 md:text-xl leading-7 font-sans">
+                  Our team of professional roofers is committed to build a successful relationship with our clients and agrees that the effort is just as important as knowing how to construct a quality roof.
+
+                </p>
+
+                <p class="mt-4 font-semibold text-base">
+                  Harold Alfred
+
+                </p>
+
+                <blockquote class="text-sm text-gray-600 font-bold">
+                  Founder of HA Roofing & Construction
+                </blockquote>
+
+              </div>
+
+            </div>
+          </div>
+          <Footer />
+        </div>
+
     </div>
 </template>
 
 <script>
+
+import Nav from '../components/Nav.vue'
+import Footer from '../components/Footer.vue'
+
+
 export default {
 
   name: 'About',
 
+  components: {
+    Nav,
+    Footer,
+  },
+
   data () {
     return {
 
@@ -17,5 +59,12 @@ export default {
 }
 </script>
 
-<style lang="css" scoped>
+<style lang="sass" scoped>
+$nav-color: #c53030
+
+header
+  background: $nav-color
+
+.about
+  background-image: url('../assets/images/about-bg1.jpg')
 </style>
diff --git a/src/views/Contact.vue b/src/views/Contact.vue
@@ -1,14 +1,54 @@
 <template>
     <div>
-        <h1>Contact</h1>
+        <Nav />
+        <div class="h-auto relative -z-10">
+          <div class="md:px-20 bg-cover bg-center contact">
+            <div class="px-6 py-48">
+              <h1 class="text-4xl md:text-6xl font-semibold">Contact</h1>
+              <p class="text-xl font-sans">
+                You can always contact us for your roofing projects.
+              </p>
+
+            </div>
+
+          </div>
+          <div class="md:px-20 bg-red-600">
+            <div class="px-6 py-24 md:flex font-sans text-gray-100">
+              <div class="flex items-baseline mr-4">
+                <i class="gg-pin"></i>
+                <p class="ml-4 py-4">1235 S.Hampton Rd. Desoto, Tx 75115</p>
+              </div>
+              <div class="flex items-center md:ml-4">
+                <i class="gg-smartphone"></i>
+                <p class="ml-4">(409) 768-0732</p>
+              </div>
+
+            </div>
+          </div>
+          <Footer />
+        </div>
+
     </div>
 </template>
 
 <script>
+
+import Nav from '../components/Nav.vue'
+import Footer from '../components/Footer.vue'
+import 'css.gg/icons/css/pin.css';
+import 'css.gg/icons/css/phone.css';
+import 'css.gg/icons/css/smartphone.css';
+
+
 export default {
 
   name: 'Contact',
 
+  components: {
+    Nav,
+    Footer,
+  },
+
   data () {
     return {
 
@@ -17,5 +57,12 @@ export default {
 }
 </script>
 
-<style lang="css" scoped>
+<style lang="sass" scoped>
+$nav-color: #c53030
+
+header
+  background: $nav-color
+
+.contact
+  background-image: url('../assets/images/contact-bg.jpg')
 </style>