Merge branch 'top_view/suggest' into 'master'

Top view/suggest See merge request !21

Merge branch 'top_view/suggest' into 'master'
Top view/suggest See merge request !21
e1a5c262 · Mai Hoang Thai Ha · 9f9afa19 · eabd44f2 · e1a5c262 · e1a5c262
Commit e1a5c262 authored Dec 15, 2021 by Mai Hoang Thai Ha
110 changed files
--- a/Gemfile
+++ b/Gemfile
@@ -65,6 +65,8 @@ gem 'nokogiri', '~> 1.11', '>= 1.11.7'
 gem 'httparty', '~> 0.18.1'
 gem 'active_storage_validations', '~> 0.9.5'
 gem 'devise', '~> 4.8'
-gem 'jquery-rails', '~> 4.4'
 gem 'rsolr', '~> 2.3'
 gem 'rsolr-ext', '~> 1.0', '>= 1.0.3'
+gem 'font-awesome-rails', '~> 4.7', '>= 4.7.0.7'
+gem 'bootstrap', '~> 4.4.1'
+gem 'jquery-rails', '~> 4.4'
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -82,24 +82,31 @@ GEM
    addressable (2.8.0)
      public_suffix (>= 2.0.2, < 5.0)
    ast (2.4.2)
+    autoprefixer-rails (10.3.3.0)
+      execjs (~> 2)
    bcrypt (3.1.16)
    bindex (0.8.1)
    bootsnap (1.9.1)
      msgpack (~> 1.0)
+    bootstrap (4.4.1)
+      autoprefixer-rails (>= 9.1.0)
+      popper_js (>= 1.14.3, < 2)
+      sassc-rails (>= 2.0.0)
    builder (3.2.4)
    bullet (6.1.5)
      activesupport (>= 3.0.0)
      uniform_notifier (~> 1.11)
    byebug (11.1.3)
-    capybara (3.35.3)
+    capybara (3.36.0)
      addressable
+      matrix
      mini_mime (>= 0.1.3)
      nokogiri (~> 1.8)
      rack (>= 1.6.0)
      rack-test (>= 0.6.3)
      regexp_parser (>= 1.5, < 3.0)
      xpath (~> 3.2)
-    childprocess (3.0.0)
+    childprocess (4.1.0)
    coderay (1.1.3)
    concurrent-ruby (1.1.9)
    crass (1.0.6)
@@ -110,6 +117,7 @@ GEM
      responders
      warden (~> 1.2.3)
    erubi (1.10.0)
+    execjs (2.8.1)
    faraday (1.8.0)
      faraday-em_http (~> 1.0)
      faraday-em_synchrony (~> 1.0)
@@ -130,12 +138,14 @@ GEM
    faraday-patron (1.0.0)
    faraday-rack (1.0.0)
    ffi (1.15.4)
+    font-awesome-rails (4.7.0.7)
+      railties (>= 3.2, < 7)
    globalid (0.5.2)
      activesupport (>= 5.0)
    httparty (0.18.1)
      mime-types (~> 3.0)
      multi_xml (>= 0.5.2)
-    i18n (1.8.10)
+    i18n (1.8.11)
      concurrent-ruby (~> 1.0)
    jbuilder (2.11.2)
      activesupport (>= 5.0.0)
@@ -152,11 +162,12 @@ GEM
    mail (2.7.1)
      mini_mime (>= 0.1.1)
    marcel (1.0.2)
+    matrix (0.4.2)
    method_source (1.0.0)
    mime-types (3.3.1)
      mime-types-data (~> 3.2015)
    mime-types-data (3.2021.0901)
-    mini_mime (1.1.1)
+    mini_mime (1.1.2)
    minitest (5.14.4)
    msgpack (1.4.2)
    multi_xml (0.6.0)
@@ -169,15 +180,16 @@ GEM
    parallel (1.21.0)
    parser (3.0.2.0)
      ast (~> 2.4.1)
+    popper_js (1.16.0)
    pry (0.14.1)
      coderay (~> 1.1)
      method_source (~> 1.0)
    pry-rails (0.3.9)
      pry (>= 0.10.4)
    public_suffix (4.0.6)
-    puma (5.5.0)
+    puma (5.5.2)
      nio4r (~> 2.0)
-    racc (1.5.2)
+    racc (1.6.0)
    rack (2.2.3)
    rack-mini-profiler (2.3.3)
      rack (>= 1.2.0)
@@ -226,7 +238,7 @@ GEM
      faraday (>= 0.9.0)
    rsolr-ext (1.0.3)
      rsolr (>= 1.0.2)
-    rubocop (1.22.0)
+    rubocop (1.22.3)
      parallel (~> 1.10)
      parser (>= 3.0.0.0)
      rainbow (>= 2.2.2, < 4.0)
@@ -235,9 +247,9 @@ GEM
      rubocop-ast (>= 1.12.0, < 2.0)
      ruby-progressbar (~> 1.7)
      unicode-display_width (>= 1.4.0, < 3.0)
-    rubocop-ast (1.12.0)
+    rubocop-ast (1.13.0)
      parser (>= 3.0.1.1)
-    rubocop-rails (2.12.2)
+    rubocop-rails (2.12.4)
      activesupport (>= 4.2.0)
      rack (>= 1.1)
      rubocop (>= 1.7.0, < 2.0)
@@ -254,8 +266,9 @@ GEM
      sprockets (> 3.0)
      sprockets-rails
      tilt
-    selenium-webdriver (3.142.7)
+    selenium-webdriver (4.0.3)
-      childprocess (>= 0.5, < 4.0)
+      childprocess (>= 0.5, < 5.0)
+      rexml (~> 3.2, >= 3.2.5)
      rubyzip (>= 1.2.2)
    semantic_range (3.0.0)
    slim (4.1.0)
@@ -290,10 +303,10 @@ GEM
      activemodel (>= 6.0.0)
      bindex (>= 0.4.0)
      railties (>= 6.0.0)
-    webdrivers (4.6.1)
+    webdrivers (5.0.0)
      nokogiri (~> 1.6)
      rubyzip (>= 1.3.0)
-      selenium-webdriver (>= 3.0, < 4.0)
+      selenium-webdriver (~> 4.0)
    webpacker (5.4.3)
      activesupport (>= 5.2)
      rack-proxy (>= 0.6.1)
@@ -304,7 +317,7 @@ GEM
    websocket-extensions (0.1.5)
    xpath (3.2.0)
      nokogiri (~> 1.8)
-    zeitwerk (2.4.2)
+    zeitwerk (2.5.1)
 PLATFORMS
  x86_64-linux
@@ -312,10 +325,12 @@ PLATFORMS
 DEPENDENCIES
  active_storage_validations (~> 0.9.5)
  bootsnap (>= 1.4.4)
+  bootstrap (~> 4.4.1)
  bullet (~> 6.1, >= 6.1.4)
  byebug
  capybara (>= 3.26)
  devise (~> 4.8)
+  font-awesome-rails (~> 4.7, >= 4.7.0.7)
  httparty (~> 0.18.1)
  jbuilder (~> 2.7)
  jquery-rails (~> 4.4)

--- a/app/assets/images/avt.png
+++ b/app/assets/images/avt.png
--- a/app/assets/images/banner-1.jpg
+++ b/app/assets/images/banner-1.jpg
--- a/app/assets/images/banner-2.jpg
+++ b/app/assets/images/banner-2.jpg
--- a/app/assets/images/banner-3.jpg
+++ b/app/assets/images/banner-3.jpg
--- a/app/assets/images/banner-4.jpg
+++ b/app/assets/images/banner-4.jpg
--- a/app/assets/images/banner-5.jpg
+++ b/app/assets/images/banner-5.jpg
--- a/app/assets/images/company-logo.jpg
+++ b/app/assets/images/company-logo.jpg
--- a/app/assets/images/logo-sample.png
+++ b/app/assets/images/logo-sample.png
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
- * vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
+@import "bootstrap";
+@import "font-awesome";
+@import "./scss/style.scss";
+.ribbon {
+  text-align: center;
+  ul {
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    .item {
+      display: block;
+      float: left;
+      width: 30%;
+      height: 100%;
+      background: #f3f5fa;
+      text-align: center;
+      padding: 8px;
+      position: relative;
+      font-size: 16px;
+      font-weight: 700;
+      text-decoration: none;
+      color: #808080;
+      .circle {
+        display: inline-flex;
+        -ms-flex-line-pack: center;
+        align-content: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        width: 1.6em;
+        height: 1.6em;
+        padding: 0.25em 0;
+        margin-right: 10px;
+        line-height: 1em;
+        font-size: 1em;
+        color: #808080;
+        background-color: #e0e0e0;
+        border-radius: 50%;
+      }
+      &:after {
+        content: "";
+        border-top: 21px solid transparent;
+        border-bottom: 21px solid transparent;
+        border-left: 21px solid #f3f5fa;
+        position: absolute;
+        right: -21px;
+        top: 0;
+        z-index: 1;
+      }
+      &:last-child::after {
+        display: none;
+      }
+      &:first-child::before {
+        content: "";
+        border-top: 21px solid transparent;
+        border-bottom: 21px solid transparent;
+        border-left: 21px solid #fff;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+    }
+    .active {
+      background: #0d6efd;
+      color: #fff;
+      .circle {
+        color: #0d6efd;
+        background-color: #fff;
+      }
+      &::after {
+        border-left-color: #0d6efd;
+        color: #fff;
+      }
+    }
+  }
+}
+.btn-height {
+  height: 50px;
+}
+.invalid {
+  .form-msg {
+    color: #f33a58;
+  }
+  input {
+    border-color: #f33a58;
+  }
+}
+.logout {
+  border: none;
+  padding: 0;
+  background-color: white;
+  outline: none;
+}
+.flash {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1000;
+  background-color: white;
+}
+.hide {
+  display: none;
+}
+.alert-notice {
+  color: #155724;
+  background-color: #d4edda;
+  border-color: #c3e6cb;
+}
\ No newline at end of file
--- a/app/assets/stylesheets/favorite_industries.scss
+++ b/app/assets/stylesheets/favorite_industries.scss
+// Place all the styles related to the Favorite_industries controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/
--- a/app/assets/stylesheets/scss/_about.scss
+++ b/app/assets/stylesheets/scss/_about.scss
+/* About Content */
+.about-content {
+    & .title {
+        margin-bottom: 20px;
+    }
+    & p {
+        margin-bottom: 20px;
+    }
+    & ul {
+        padding-left: 15px;
+    }
+}
+/* About Image */
+.about-image {
+    height: 100%;
+    & img {
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_accordion.scss
+++ b/app/assets/stylesheets/scss/_accordion.scss
+/*----
+/*  02.1 Accordion Elements CSS
+/*----------------------------------------*/
+.accordion {
+    & .card {
+        & .card-header {
+            background-color: transparent;
+            & .btn {
+                padding: 0;
+                color: $heading-color;
+                &:hover {
+                    text-decoration: none;
+                    color: $primary;
+                }
+            }
+        }
+        & .card-body {
+        }
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_app.scss
+++ b/app/assets/stylesheets/scss/_app.scss
+/* App Content */
+.app-content {
+    margin-bottom: 30px;
+    & .title {
+        margin-bottom: 15px;
+    }
+    & .lead {
+        max-width: 490px;
+        margin-bottom: 30px;
+    }
+    @media #{$tablet-device} {
+        & .title {
+            font-size: 32px;
+        }
+    }
+}
+/* App Image */
+.app-image {
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_blockquote.scss
+++ b/app/assets/stylesheets/scss/_blockquote.scss
+/*----
+/*  02.2 Blockquote Elements CSS
+/*----------------------------------------*/
+.blockquote {
+    margin-top: 20px;
+    padding: 20px 30px;
+    border: 1px solid #EDEDED;
+    & p {
+        font-family: $special-font;
+        font-style: italic;
+        color: $heading-color;
+    }
+}
+.blockquote-footer {
+    font-size: 14px;
+    margin-top: 5px;
+    color: $primary;
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_blog.scss
+++ b/app/assets/stylesheets/scss/_blog.scss
+/* Blog Wrapper */
+.blog-wrap {
+    margin-bottom: -30px;
+    & > [class*="col"] {
+        margin-bottom: 30px;
+    }
+}
+/* Blog */
+.blog {
+    & .media {
+        margin-bottom: 25px;
+        & a {
+            display: block;
+            width: 100%;
+        }
+        & img {
+            width: 100%;
+        }
+    }
+    & .content {
+        & .title {
+            font-size: 19px;
+            margin-bottom: 15px;
+            & a {
+            }
+        }
+        & .meta {
+            font-size: 13px;
+            display: flex;
+            flex-wrap: wrap;
+            margin-bottom: 10px;
+            padding: 0;
+            list-style: none;
+            & li {
+                margin-top: 0;
+                margin-right: 10px;
+                &:last-child {
+                    margin-right: 0;
+                }
+                &:not(:last-child)::after {
+                    margin-left: 10px;
+                    content: "-";
+                }
+                & a {
+                }
+            }
+        }
+        & .desc {
+            margin-bottom: 20px;
+            & p {
+            }
+        }
+        & .read-more {
+            font-weight: 600;
+            color: $heading-color;
+            & i {
+                margin-left: 5px;
+            }
+            &:hover {
+                color: $primary;
+            }
+        }
+        & .blog-tags {
+            display: flex;
+            flex-wrap: wrap;
+            & ul {
+                display: flex;
+                flex-wrap: wrap;
+                margin: 0;
+                padding-left: 0;
+                list-style: none;
+                & li {
+                    margin-top: 0;
+                    margin-right: 5px;
+                    &::after {
+                        content: ",";
+                    }
+                    &:first-child {
+                        margin-right: 10px;
+                        &::after {
+                            display: none;
+                        }
+                    }
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                    & a {
+                    }
+                }
+            }
+        }
+        & .blog-share {
+            display: flex;
+            flex-wrap: wrap;
+            & ul {
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
+                margin: 0;
+                padding-left: 0;
+                list-style: none;
+                & li {
+                    margin-top: 0;
+                    margin-right: 5px;
+                    &:first-child {
+                        margin-right: 10px;
+                    }
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                    & a {
+                        width: 30px;
+                        height: 30px;
+                        text-align: center;
+                        border-radius: 50%;
+                        background-color: rgba($black, 0.075);
+                        & i {
+                            line-height: 32px;
+                        }
+                        &:hover {
+                            color: $white;
+                            background-color: $primary;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    // Blog Single
+    &.blog-single {
+        & .content {
+            & .title {
+                font-size: 23px;
+            }
+            & .desc {
+                margin-bottom: 30px;
+            }
+        }
+    }
+}
+/* Blog Navigation */
+.blog-navigation {
+    padding: 20px 0;
+    list-style: none;
+    border-top: 1px solid #EDEDED;
+    border-bottom: 1px solid #EDEDED;
+    & li {
+        margin: 0;
+        & a {
+            position: relative;
+            &:hover {
+                color: $primary;
+                &::before {
+                    color: $primary;
+                }
+            }
+            &::before {
+                font-family: $fontawesome;
+                font-size: 30px;
+                line-height: 24px;
+                position: absolute;
+                top: 0;
+                color: $body-light;
+            }
+            &.prev-blog {
+                margin-left: -15px;
+                padding-left: 30px;
+                text-align: left;
+                &::before {
+                    left: 0;
+                    content: "\f104";
+                }
+            }
+            &.next-blog {
+                margin-right: -15px;
+                padding-right: 30px;
+                text-align: right;
+                &::before {
+                    right: 0;
+                    content: "\f105";
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_button.scss
+++ b/app/assets/stylesheets/scss/_button.scss
+/*----
+/*  02.3 Button Elements CSS
+/*----------------------------------------*/
+.btn {
+    line-height: 24px;
+    padding: 10px 30px;
+    border-radius: 0;
+}
+.btn-lg {
+    padding: 20px 35px;
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_comment.scss
+++ b/app/assets/stylesheets/scss/_comment.scss
+/* Comment List */
+.comment-list {
+    margin: 0;
+    padding-left: 0;
+    list-style: none;
+    & > li {
+        margin: 0;
+        &:last-child {
+            & .comment {
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}
+/* Child Comment */
+.child-comment {
+    margin: 0;
+    padding-left: 40px;
+    list-style: none;
+    & > li {
+        margin: 0;
+    }
+    @media #{$extra-small-mobile} {
+        padding-left: 0;
+    }
+}
+/* Comment */
+.comment {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 30px;
+    & .image {
+        width: 80px;
+        & img {
+        }
+    }
+    & .content {
+        max-width: calc(100% - 80px);
+        padding-left: 30px;
+        & .head {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            margin-bottom: 5px;
+            & .name {
+                font-size: 16px;
+                margin-right: 10px;
+                margin-bottom: 0;
+            }
+            & .date {
+                line-height: 1;
+                display: block;
+                color: $body-light;
+                &::before {
+                    margin-right: 10px;
+                    content: "-";
+                }
+            }
+        }
+        & p {
+            margin-bottom: 5px;
+        }
+        & .reply {
+            line-height: 1;
+            text-transform: capitalize;
+            color: $primary;
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+    @media #{$extra-small-mobile} {
+        & .content {
+            max-width: 100%;
+            padding-top: 15px;
+            padding-left: 0;
+        }
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_common.scss
+++ b/app/assets/stylesheets/scss/_common.scss
--- a/app/assets/stylesheets/scss/_company.scss
+++ b/app/assets/stylesheets/scss/_company.scss
+/* Company Slider */
+.company-slider {
+}
+/* Feature Company */
+.feature-company {
+    display: block;
+    text-align: center;
+    & .company-logo {
+        display: inline-block;
+        margin-bottom: 10px;
+    }
+    & .title {
+        font-size: 19px;
+        transition: all 0.3s ease 0s;
+    }
+    & .open-job {
+        display: block;
+        color: $body-color;
+    }
+    &:hover {
+        & .title {
+            color: $primary;
+        }
+    }
+}
+/* Company List Wrapper */
+.company-list-wrap {
+    margin-bottom: -30px;
+    & > div,
+    & > [class*="col"] {
+        margin-bottom: 30px;
+    }
+}
+/* Company List */
+.company-list {
+    display: block;
+    padding: 30px;
+    text-align: center;
+    border: 1px solid #EDEDED;
+    & .company-logo {
+        display: inline-block;
+        margin-bottom: 10px;
+    }
+    & .title {
+        font-size: 19px;
+        transition: all 0.3s ease 0s;
+    }
+    & .open-job {
+        display: block;
+        margin-bottom: 6px;
+        color: $body-color;
+    }
+    & .location {
+        font-size: 13px;
+        color: $body-color;
+        & i {
+            margin-right: 10px;
+        }
+    }
+    &:hover {
+        z-index: 9;
+        border-color: transparent;
+        box-shadow: 0 0 30px rgba($black, 0.15);
+        & .title {
+            color: $primary;
+        }
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_contact.scss
+++ b/app/assets/stylesheets/scss/_contact.scss
+/* Contact Map */
+.contact-map {
+    padding-bottom: 40%;
+    @media #{$extra-small-mobile} {
+        padding-bottom: 60%;
+    }
+}
+/* Google Map */
+.google-map {
+    background-color: #EDEDED;
+}
+/* Contact Information */
+.contact-information {
+    & ul {
+        padding-left: 0;
+        list-style: none;
+        & li {
+            & + li {
+                margin-bottom: 10px;
+            }
+            & i {
+                margin-right: 15px;
+            }
+        }
+    }
+}
+/* Contact Social */
+.contact-social {
+    display: flex;
+    flex-wrap: 0;
+    margin: -5px;
+    & a {
+        width: 36px;
+        height: 36px;
+        margin: 5px;
+        text-align: center;
+        border-radius: 50%;
+        background-color: rgba($black, 0.075);
+        & i {
+            line-height: 36px;
+        }
+        &:hover {
+            color: $white;
+            background-color: $primary;
+        }
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_faq.scss
+++ b/app/assets/stylesheets/scss/_faq.scss
+/* Faq Card */
+.faq-card {
+    margin-bottom: 30px;
+    border: none;
+    &:last-child {
+        margin-bottom: 0;
+    }
+    & .card-header {
+        padding: 0;
+        border: none;
+        background-color: transparent;
+    }
+    & .card-body {
+        padding: 0 0 0 28px;
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_footer.scss
+++ b/app/assets/stylesheets/scss/_footer.scss
+/* Footer Top Section */
+.footer-top-section {
+    padding: 80px 0;
+    background-color: #333333;
+}
+/* Footer Widget Wrapper */
+.footer-widget-wrap {
+    margin-bottom: -30px;
+}
+/* Footer Widget */
+.footer-widget {
+    margin-bottom: 30px;
+    color: lighten($body-color, 25);
+    & .title {
+        font-size: 19px;
+        line-height: 1;
+        margin-bottom: 20px;
+        color: $white;
+    }
+}
+/* Footer About */
+.footer-widget-about {
+    & img {
+        margin-bottom: 20px;
+    }
+    & p {
+        max-width: 250px;
+        &:not(:last-child) {
+            margin-bottom: 20px;
+        }
+    }
+}
+/* Footer Social */
+.footer-socail {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -5px -5px;
+    padding-left: 0;
+    list-style: none;
+    & li {
+        margin: 0 5px 5px;
+        & a {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 36px;
+            color: $white;
+            border-radius: 50%;
+            background-color: rgba($white, 0.1);
+            &:hover {
+                background-color: $primary;
+            }
+            & i {
+            }
+        }
+    }
+}
+/* Footer Link */
+.footer-widget-link {
+    & ul {
+        margin: 0;
+        padding-left: 0;
+        list-style: none;
+        & li {
+            & + li {
+                margin-top: 6px;
+            }
+            & a {
+            }
+        }
+    }
+}
+/* Footer Newsletter */
+.footer-widget-newsletter {
+    & p {
+        margin-bottom: 20px;
+    }
+    & form {
+        position: relative;
+        & input {
+            font-size: 13px;
+            padding-right: 44px;
+            color: $white;
+            border: none;
+            background-color: rgba($white, 0.1);
+        }
+        & button {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 44px;
+            padding: 10px;
+            color: $white;
+            border: none;
+            &:hover {
+                color: $white;
+                background-color: $primary;
+            }
+        }
+    }
+}
+/* Footer Bottom Section */
+.footer-bottom-section {
+    padding: 20px 0;
+    background-color: $black;
+}
+/* Footer Copyright */
+.footer-copyright {
+    color: lighten($body-color, 25);
+    & a {
+        color: $primary;
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_form.scss
+++ b/app/assets/stylesheets/scss/_form.scss
+/*----
+/*  02.4 Form Elements CSS
+/*----------------------------------------*/
+label {
+    font-size: 13px;
+    line-height: 1.25;
+    display: block;
+    margin-bottom: 10px;
+}
+input[type="text"],
+input[type="search"],
+input[type="email"],
+input[type="password"],
+textarea,
+.form-control {
+    line-height: 24px;
+    display: block;
+    width: 100%;
+    padding: 10px 20px;
+    color: $body-color;
+    border: 1px solid #EDEDED;
+    border-radius: 0;
+    background-color: $white;
+}
+select {
+    line-height: 24px;
+    display: block;
+    width: 100%;
+    padding: 10px 15px;
+    padding-right: 40px;
+    color: $body-color;
+    border: 1px solid #EDEDED;
+    border-radius: 0;
+    background-color: $white;
+    // background-image: url("../images/icons/arrow-down.png");
+    background-repeat: no-repeat;
+    background-position: right center;
+    background-size: auto;
+    appearance: none;
+}
+// Custom Control Label
+.custom-control-label {
+    font-size: inherit;
+    line-height: 1.65;
+}
+// Range Slider
+.range-slider {
+    &.irs-hidden-input {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: block;
+        visibility: hidden;
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+}
+// Ion Range Slider
+.irs {
+    position: relative;
+    display: block;
+    width: 100%;
+    & .irs {
+        position: relative;
+        display: block;
+        padding-top: 30px;
+        & .irs-line {
+            display: block;
+            width: 100%;
+            height: 6px;
+            background-color: #F2F2F2;
+        }
+        & .irs-min {
+            display: none;
+        }
+        & .irs-max {
+            display: none;
+        }
+        & .irs-from {
+            position: absolute;
+            top: 0;
+            visibility: visible !important;
+            white-space: nowrap;
+        }
+        & .irs-to {
+            position: absolute;
+            top: 0;
+            visibility: visible !important;
+            white-space: nowrap;
+        }
+        & .irs-single {
+            display: none;
+        }
+    }
+    & .irs-grid {
+        display: none;
+    }
+    & .irs-bar {
+        position: absolute;
+        bottom: 0;
+        height: 6px;
+        background-color: $primary;
+    }
+    & .irs-handle {
+        position: absolute;
+        bottom: -7px;
+        display: block;
+        width: 20px;
+        height: 20px;
+        border-radius: 50px;
+        background-color: $primary;
+        box-shadow: 0 0 15px rgba($black, 0.3);
+        & i {
+            display: none;
+        }
+        &.from {
+        }
+        &.to {
+        }
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_funfact.scss
+++ b/app/assets/stylesheets/scss/_funfact.scss
+/* Funfact Wrapper */
+.funfact-wrap {
+    margin-bottom: -30px;
+}
+/* Funfact */
+.funfact {
+    margin-bottom: 30px;
+    text-align: center;
+    color: $white;
+    & span {
+        line-height: 1;
+        display: block;
+    }
+    & .counter {
+        font-size: 50px;
+        margin-bottom: 10px;
+    }
+    & .title {
+        font-size: 23px;
+        line-height: 1.25;
+    }
+    // Responsive
+    @media #{$large-mobile} {
+        & .title {
+            font-size: 19px;
+        }
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_header.scss
+++ b/app/assets/stylesheets/scss/_header.scss
--- a/app/assets/stylesheets/scss/_job-category.scss
+++ b/app/assets/stylesheets/scss/_job-category.scss
+/* Job Category Slider */
+.job-category-slider {
+    & .slick-list {
+        padding-top: 15px;
+        padding-bottom: 15px;
+    }
+}
+/* Job Category */
+.job-category {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 190px;
+    transition: all 0.3s ease 0s;
+    text-align: center;
+    & .inner {
+        & i {
+            font-size: 50px;
+            line-height: 1;
+            display: block;
+        }
+        & .title {
+            font-size: 14px;
+            font-weight: 600;
+            margin-top: 20px;
+            margin-bottom: 0;
+            text-transform: uppercase;
+            color: inherit;
+        }
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_job-search.scss
+++ b/app/assets/stylesheets/scss/_job-search.scss
+/* Job Search Section */
+.job-search-section {
+    position: relative;
+    z-index: 90;
+}
+/* Job Search Wrapper */
+.job-search-wrap {
+    position: relative;
+    margin-top: -83px;
+    padding: 60px;
+    background-color: $white;
+    box-shadow: 0 0 30px rgba($black, 0.15);
+    // Responsive
+    @media #{$extra-small-mobile} {
+        padding: 30px;
+    }
+}
+/* Job Search Form */
+.job-search-form {
+    & .btn {
+        display: block;
+        width: 100%;
+    }
+}
+/* Job Search Form 2 */
+.job-search-form-2 {
+    & input[type="text"] {
+        padding: 15px 20px;
+    }
+    & select {
+        padding: 15px;
+        padding-right: 40px;
+    }
+    & .btn {
+        display: block;
+        width: 100%;
+        padding: 15px 20px;
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_job-single.scss
+++ b/app/assets/stylesheets/scss/_job-single.scss
+.job-list-details {
+    & .job-details-head {
+        position: relative;
+        z-index: 1;
+        align-items: center;
+        margin-bottom: 30px;
+        padding-bottom: 25px;
+        border-bottom: 1px solid #EDEDED;
+        & .company-logo {
+        }
+        & .salary-type {
+            text-align: right;
+            & .salary-range {
+                font-weight: 600;
+                line-height: 1;
+                display: block;
+                margin-bottom: 8px;
+                color: lighten($body-color, 15);
+            }
+            & .badge {
+                font-size: 13px;
+                font-weight: 400;
+                padding: 4px 10px 5px;
+                border-radius: 0;
+            }
+        }
+        & .content {
+            & .title {
+            }
+            & .meta {
+                display: flex;
+                flex-wrap: wrap;
+                margin-bottom: 0;
+                padding-left: 0;
+                list-style: none;
+                color: lighten($body-color, 15);
+                & li {
+                    margin-top: 0;
+                    margin-right: 20px;
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                    & i {
+                        font-size: 16px;
+                        margin-right: 3px;
+                    }
+                }
+            }
+        }
+        // Responsive
+        @media #{$small-mobile} {
+            & .salary-type {
+                margin-left: auto;
+            }
+            & .content {
+                flex: 1 0 100%;
+                margin-top: 10px;
+            }
+        }
+        @media #{$extra-small-mobile} {
+            padding: 20px 5px;
+        }
+    }
+    & .job-details-body {
+        & ul {
+            padding-left: 25px;
+        }
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_jobs.scss
+++ b/app/assets/stylesheets/scss/_jobs.scss
+/* Job List Toolbar */
+.job-list-toolbar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin: -10px -10px 20px;
+    & p {
+        display: flex;
+        align-items: center;
+        margin: 0;
+        padding: 10px;
+        white-space: nowrap;
+        & select {
+            margin-left: 10px;
+        }
+    }
+}
+/* Job List Wrapper */
+.job-list-wrap {
+    padding: 1px;
+}
+/* Job List */
+.job-list {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin: -1px;
+    padding: 23px 15px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #EDEDED transparent;
+    &:hover {
+        z-index: 9;
+        border-color: transparent;
+        box-shadow: 0 0 30px rgba($black, 0.15);
+    }
+    & .company-logo {
+    }
+    & .salary-type {
+        text-align: right;
+        & .salary-range {
+            font-weight: 600;
+            line-height: 1;
+            display: block;
+            margin-bottom: 8px;
+            color: lighten($body-color, 15);
+        }
+        & .badge {
+            font-size: 13px;
+            font-weight: 400;
+            padding: 4px 10px 5px;
+            border-radius: 0;
+        }
+    }
+    & .content {
+        & .title {
+        }
+        & .meta {
+            display: flex;
+            flex-wrap: wrap;
+            margin-bottom: 0;
+            padding-left: 0;
+            list-style: none;
+            color: lighten($body-color, 15);
+            & li {
+                margin-top: 0;
+                margin-right: 20px;
+                &:last-child {
+                    margin-right: 0;
+                }
+                & i {
+                    font-size: 16px;
+                    margin-right: 3px;
+                }
+            }
+        }
+    }
+    // Responsive
+    @media #{$small-mobile} {
+        & .salary-type {
+            margin-left: auto;
+            & .badge {
+                font-size: 10px;
+            }
+        }
+        & .content {
+            flex: 1 0 100%;
+            margin-top: 10px;
+        }
+    }
+    @media #{$extra-small-mobile} {
+        padding: 20px 5px;
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_loginSignupModal.scss
+++ b/app/assets/stylesheets/scss/_loginSignupModal.scss
+/* Login & Signup Tab Nav */
+.loginSignupNav {
+    display: flex;
+    overflow: hidden;
+    flex: 1 0 100%;
+    flex-wrap: wrap;
+    margin: -20px -30px -21px;
+    text-align: center;
+    border-top-left-radius: 0.3rem;
+    border-top-right-radius: 0.3rem;
+    & li {
+        flex-grow: 1;
+        margin: 0;
+        & .nav-link {
+            padding: 15px 30px;
+            &.active {
+                color: $white;
+                background-color: $primary;
+            }
+        }
+    }
+}
+/* Login & Signup With Social */
+.login-reg-social {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 0 -5px -10px;
+    & a {
+        display: inline-block;
+        width: 40px;
+        height: 40px;
+        margin: 0 5px 10px;
+        text-align: center;
+        border-radius: 50%;
+        background-color: #EDEDED;
+        & i {
+            line-height: 40px;
+        }
+        &:hover {
+            color: $white;
+            background-color: $primary;
+        }
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_modal.scss
+++ b/app/assets/stylesheets/scss/_modal.scss
+/*----
+/*  02.5 Button Elements CSS
+/*----------------------------------------*/
+.modal {
+}
+.modal-dialog {
+}
+.modal-content {
+}
+.modal-header {
+    position: relative;
+    padding: 20px 30px;
+    border-color: #EDEDED;
+    & .close {
+        font-weight: 300;
+        position: absolute;
+        top: -20px;
+        right: -20px;
+        width: 40px;
+        height: 40px;
+        margin: 0;
+        padding: 0 0 3px;
+        opacity: 1;
+        border-radius: 50%;
+        background-color: $white;
+        box-shadow: 0 0 30px rgba($black, 0.15);
+        &:hover {
+            opacity: 1 !important;
+            color: $white;
+            background-color: $primary;
+        }
+    }
+}
+.modal-body {
+    padding: 30px;
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_page-heading.scss
+++ b/app/assets/stylesheets/scss/_page-heading.scss
+/* Page Heading Section */
+.page-heading-section {
+    padding: 200px 0 100px;
+    @media #{$large-mobile} {
+        padding: 130px 0 50px;
+    }
+}
+/* Page Heading Content */
+.page-heading-content {
+    & .title {
+        color: $white;
+    }
+    & .breadcrumb {
+        justify-content: center;
+        margin: 0;
+        padding: 0;
+        color: $white;
+        background-color: transparent;
+        & .breadcrumb-item {
+            &::before {
+                color: $white;
+            }
+            &.active {
+                text-decoration: underline;
+                color: $white;
+            }
+        }
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_pagination.scss
+++ b/app/assets/stylesheets/scss/_pagination.scss
+/*----
+/*  02.6 Button Elements CSS
+/*----------------------------------------*/
+.pagination {
+    margin: 0 0 -10px;
+    & .page-item {
+        margin: 0 5px 10px;
+        & .page-link {
+            font-size: 14px;
+            line-height: 25px;
+            width: 35px;
+            height: 35px;
+            padding: 5px;
+            text-align: center;
+            color: $body-color;
+            border: none;
+            border-radius: 0;
+            &:hover {
+                color: $white;
+                background-color: $primary;
+            }
+        }
+        &.active {
+            & .page-link {
+                color: $white;
+                background-color: $primary;
+            }
+        }
+    }
+    &.pagination-center {
+        justify-content: center;
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_pricing.scss
+++ b/app/assets/stylesheets/scss/_pricing.scss
+/* Pricing Wrapper */
+.pricing-wrap {
+    margin-bottom: -30px;
+}
+/* Pricing */
+.pricing {
+    margin-bottom: 30px;
+    & .inner {
+        padding: 40px;
+        border: 1px solid #EDEDED;
+        background-color: $white;
+        & .head {
+            margin-bottom: 40px;
+            & .title {
+                font-weight: 600;
+                line-height: 1;
+                display: block;
+                margin-bottom: 20px;
+                text-transform: uppercase;
+            }
+            & .price {
+                font-size: 50px;
+                line-height: 1;
+                margin-bottom: 5px;
+                & sup {
+                    font-size: 20px;
+                    margin-right: 3px;
+                    vertical-align: super;
+                    &:last-child {
+                        margin-right: 0;
+                        vertical-align: sub;
+                    }
+                }
+            }
+            & .duration {
+                line-height: 1;
+                display: block;
+            }
+        }
+        & .body {
+            margin-bottom: 40px;
+            & ul {
+                font-size: 16px;
+                margin-bottom: 0;
+                padding-left: 0;
+                list-style: none;
+                & li {
+                    & + li {
+                        margin-top: 5px;
+                    }
+                }
+            }
+        }
+        & .foot {
+            & .btn {
+                padding: 10px 30px;
+                color: $white;
+                background-color: $dark;
+                &:hover {
+                    background-color: $primary;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_sidebar.scss
+++ b/app/assets/stylesheets/scss/_sidebar.scss
+/* Sidebar Wrapper */
+.sidebar-wrap {
+    margin-bottom: -35px;
+}
+/* Sidebar Widget */
+.sidebar-widget {
+    margin-bottom: 35px;
+    & > .inner {
+        padding: 25px;
+        border: 1px solid #EDEDED;
+        & > .title {
+            font-size: 19px;
+            line-height: 1;
+            margin-bottom: 20px;
+        }
+    }
+}
+/* Sidebar Job Location Map */
+.job-location-map {
+    width: 100%;
+    max-height: 300px;
+    padding-top: 100%;
+}
+/* Sidebar Banner */
+.banner {
+    display: block;
+    border: 1px solid #EDEDED;
+    & img {
+        width: 100%;
+    }
+}
+/* Sidebar Company */
+.sidebar-company {
+    display: block;
+    & .company-logo {
+        display: inline-block;
+        margin-bottom: 10px;
+    }
+    & .title {
+        font-size: 19px;
+        transition: all 0.3s ease 0s;
+    }
+    & ul {
+        margin: 0;
+        padding-left: 0;
+        list-style: none;
+        & li {
+            & strong {
+                margin-right: 6px;
+                color: $heading-color;
+            }
+        }
+    }
+}
+/* Sidebar Company Location Map */
+.company-location-map {
+    width: 100%;
+    max-height: 250px;
+    padding-top: 100%;
+}
+/* Sidebar List */
+.sidebar-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    & li {
+        line-height: 1.5;
+        & + li {
+            margin-top: 10px;
+        }
+        & a {
+            display: inline;
+        }
+    }
+    // Sidebar List Comment
+    &.sidebar-list-comment {
+        & li {
+            color: $body-light;
+            & + li {
+                margin-top: 15px;
+            }
+            & a {
+                color: $heading-color;
+                &:hover {
+                    color: $primary;
+                }
+            }
+        }
+    }
+}
+/* Sidebar Post */
+.sidebar-post {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    & li {
+        line-height: 1.5;
+        display: flex;
+        flex-wrap: wrap;
+        & + li {
+            margin-top: 15px;
+        }
+        & .image {
+            max-width: 70px;
+            margin-right: 15px;
+        }
+        & .title {
+            max-width: calc(100% - 85px);
+        }
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_slider.scss
+++ b/app/assets/stylesheets/scss/_slider.scss
+.slide-item {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 750px;
+    // Responsive
+    @media #{$desktop-device,
+    $tablet-device
+    } {
+        height: 650px;
+    }
+    @media #{$large-mobile} {
+        height: 450px;
+    }
+    @media #{$extra-small-mobile} {
+        height: 400px;
+    }
+}
+.slider-content {
+    & .title {
+        font-size: 96px;
+        font-weight: 700;
+        color: $white;
+    }
+    & p {
+        font-size: 28px;
+        margin: 0;
+        color: $white;
+    }
+    // Responsive
+    @media #{$desktop-device} {
+        & .title {
+            font-size: 86px;
+        }
+    }
+    @media #{$tablet-device} {
+        & .title {
+            font-size: 60px;
+        }
+    }
+    @media #{$large-mobile} {
+        & .title {
+            font-size: 50px;
+        }
+        & p {
+            font-size: 23px;
+        }
+    }
+    @media #{$small-mobile} {
+        & .title {
+            font-size: 40px;
+        }
+        & p {
+            font-size: 18px;
+        }
+    }
+    @media #{$extra-small-mobile} {
+        & .title {
+            font-size: 24px;
+        }
+        & p {
+            font-size: 14px;
+        }
+    }
+}
+.slide-item-2 {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 750px;
+    // Responsive
+    @media #{$desktop-device,
+    $tablet-device
+    } {
+        height: 650px;
+    }
+    @media #{$large-mobile} {
+        height: 600px;
+        padding-top: 70px;
+        padding-bottom: 40px;
+    }
+}
+.slider-content-2 {
+    &:not(:last-child) {
+        margin-bottom: 30px;
+    }
+    & .title {
+        font-size: 50px;
+        font-weight: 700;
+        color: $white;
+    }
+    & p {
+        font-size: 18px;
+        margin: 0;
+        color: $white;
+    }
+    // Responsive
+    @media #{$small-mobile} {
+        & .title {
+            font-size: 40px;
+        }
+    }
+    @media #{$extra-small-mobile} {
+        & .title {
+            font-size: 24px;
+        }
+        & p {
+            font-size: 14px;
+        }
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_team.scss
+++ b/app/assets/stylesheets/scss/_team.scss
+/* Team Wrapper */
+.team-wrap {
+    margin-bottom: -30px;
+    & [class*="col"] {
+        margin-bottom: 30px;
+    }
+}
+/* Team */
+.team {
+    position: relative;
+    overflow: hidden;
+    & img {
+        width: 100%;
+    }
+    & .content {
+        position: absolute;
+        z-index: 9;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: flex-end;
+        flex-wrap: wrap;
+        width: 100%;
+        height: 100%;
+        transition: all 0.3s ease 0s;
+        transform: scale(1.25);
+        transform-origin: left bottom;
+        opacity: 0;
+        background-color: rgba($black, 0.7);
+        & .inner {
+            padding: 25px;
+            color: $white;
+            & .name {
+                font-size: 19px;
+                margin-bottom: 6px;
+                color: inherit;
+            }
+            & .title {
+                font-size: 13px;
+                line-height: 1;
+                display: block;
+                margin-bottom: 20px;
+            }
+            & .social {
+                display: flex;
+                flex-wrap: 0;
+                margin: -5px;
+                & a {
+                    width: 30px;
+                    height: 30px;
+                    margin: 5px;
+                    text-align: center;
+                    border-radius: 50%;
+                    background-color: rgba($white, 0.15);
+                    & i {
+                        line-height: 30px;
+                    }
+                    &:hover {
+                        color: $white;
+                        background-color: $primary;
+                    }
+                }
+            }
+        }
+    }
+    &:hover {
+        & img {
+            transform: scale(1.15) rotate(5deg);
+        }
+        & .content {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_testimonial.scss
+++ b/app/assets/stylesheets/scss/_testimonial.scss
+/* Testimonial Slider */
+.testimonial-slider {
+    & .slick-arrow {
+        color: $white;
+        background-color: transparent;
+        &:hover {
+            background-color: $primary;
+        }
+    }
+}
+/* Testimonial */
+.testimonial {
+    & p {
+        font-family: $special-font;
+        font-size: 24px;
+        max-width: 650px;
+        margin-right: auto;
+        margin-bottom: 30px;
+        margin-left: auto;
+    }
+    & img {
+        width: 70px;
+        margin-right: auto;
+        margin-bottom: 15px;
+        margin-left: auto;
+        border: 3px solid $grey;
+        border-radius: 50%;
+    }
+    & .name {
+        font-weight: 700;
+        color: inherit;
+    }
+    & .title {
+        font-size: 14px;
+        line-height: 1;
+        display: block;
+    }
+}
\ No newline at end of file
--- a/app/assets/stylesheets/scss/_variabls.scss
+++ b/app/assets/stylesheets/scss/_variabls.scss
+// Font Family
+$body-font: "Open Sans",
+sans-serif;
+$heading-font: "Montserrat",
+sans-serif;
+$special-font: "Playfair Display",
+serif;
+$fontawesome: "FontAwesome";
+// Colors ---------------
+$white: #FFFFFF;
+$black: #000000;
+$grey: #F8F9FD;
+// Body Color
+$body-color: #454545;
+$body-light: #999999;
+// Heading Color
+$heading-color: #333333;
+// Template Colors
+$primary: #007BFF;
+$secondary: #6C757D;
+$success: #4CAF50;
+$danger: #F44336;
+$warning: #FFC107;
+$info: #17A2B8;
+$light: #F8F9FA;
+$dark: #343A40;
+$templateColor: ("primary": $primary,
+    "secondary": $secondary,
+    "success": $success,
+    "danger": $danger,
+    "warning": $warning,
+    "info": $info,
+    "light": $light,
+    "dark": $dark,
+);
+// Socail Color
+$android: #7AC157;
+$apple: #B8B8B8;
+$behance: #1869FF;
+$codepen: $black;
+$dribbble: #EA4C8A;
+$dropbox: #007EE5;
+$evernote: #78D525;
+$facebook: #4867AA;
+$github: #313131;
+$google-drive: #1DA462;
+$google-earth: #4285F4;
+$google-glass: #EA4335;
+$google-maps: #5083C3;
+$google-play: #01B9FD;
+$google-plus: #DD5144;
+$google: #4285F4;
+$instagram: #B23A94;
+$css3: #0277BD;
+$html5: #E44D26;
+$javascript: #F9DC3D;
+$python: #0C9DBF;
+$lastfm: #E31B23;
+$linkedin: #007BB6;
+$paypal: #002F86;
+$pinterest: #BD081B;
+$pocket: #EF3E56;
+$polymer: #F87292;
+$rss: #F99C3A;
+$share: #2C9CFF;
+$stackoverflow: #F38024;
+$steam: #15497B;
+$twitter: #1DA1F2;
+$vk: #5181B8;
+$wikipedia: #E9E9E9;
+$windows: #0078D6;
+$s500px: $black;
+$s8tracks: #122D4B;
+$amazon: #F79B34;
+$blogger: #F06A35;
+$delicious: #0000FE;
+$disqus: #2E9EFE;
+$flattr: #7AB831;
+$flickr: #FE0084;
+$odnoklassniki: #F58220;
+$outlook: #0072C6;
+$playstation: #07418E;
+$reddit: #FF4500;
+$skype: #00A9F0;
+$slideshare: #0077B5;
+$soundcloud: #FE4900;
+$tumblr: #36465D;
+$twitch: #6441A4;
+$vimeo: #1AB7EA;
+$whatsapp: #189D0E;
+$xbox: #107C0F;
+$yahoo: #4101AF;
+$youtube: #FE0000;
+// Responsive Variables
+$extraBig-device: "only screen and (min-width: 1500px)";
+$laptop-device: "only screen and (min-width: 1200px) and (max-width: 1499px)";
+$desktop-device: "only screen and (min-width: 992px) and (max-width: 1199px)";
+$tablet-device: "only screen and (min-width: 768px) and (max-width: 991px)";
+$large-mobile: "only screen and (max-width: 767px)";
+$small-mobile: "only screen and (max-width: 575px)";
+$extra-small-mobile: "only screen and (max-width: 479px)";
\ No newline at end of file
--- a/app/assets/stylesheets/scss/style.scss
+++ b/app/assets/stylesheets/scss/style.scss
+/*-----------------------------------------------------------------------------------
+    Template Name: Edwards - Lawyers Attorneys and Law Firm HTML Template
+    Version: 1.0
+-----------------------------------------------------------------------------------
+    CSS INDEX
+    ===================
+    01. Theme default CSS
+    02. Elements CSS
+        02.1 Accordion Elements CSS
+        02.2 Blockquote Elements CSS
+        02.3 Button Elements CSS
+        02.4 Form Elements CSS
+        02.5 Modal Elements CSS
+        02.6 Pagination Elements CSS
+    03. Header CSS
+    04. Login Signup Modal CSS
+    05. Slider/Hero CSS
+    06. Page Heading/Title CSS
+    07. Job Search CSS
+    08. Jobs/Job List CSS
+    09. Job Single/Details CSS
+    10. Job Category CSS
+    11. Company CSS
+    12. Blog CSS
+    13. Comment CSS
+    14. Sidebar CSS
+    15. About CSS
+    16. Team CSS
+    17. Pricing CSS
+    18. APP CSS
+    19. Testimonial CSS
+    20. Funfact CSS
+    21. FAQ CSS
+    22. Contact CSS
+    23. Footer CSS
+-----------------------------------------------------------------------------------*/
+@import "variabls";
+/*----------------------------------------*/
+/*  01. Theme default CSS
+/*----------------------------------------*/
+@import "common";
+/*----------------------------------------*/
+/*  02. Elements CSS
+/*----------------------------------------*/
+@import "form";
+@import "button";
+@import "modal";
+@import "accordion";
+@import "pagination";
+@import "blockquote";
+/*----------------------------------------*/
+/*  03. Header CSS
+/*----------------------------------------*/
+@import "header";
+/*----------------------------------------*/
+/*  04. Login Signup Modal CSS
+/*----------------------------------------*/
+@import "loginSignupModal";
+/*----------------------------------------*/
+/*  05. Slider/Hero CSS
+/*----------------------------------------*/
+@import "slider";
+/*----------------------------------------*/
+/*  06. Page Heading/Title CSS
+/*----------------------------------------*/
+@import "page-heading";
+/*----------------------------------------*/
+/*  07. Job Search CSS
+/*----------------------------------------*/
+@import "job-search";
+/*----------------------------------------*/
+/*  08. Jobs/Job List CSS
+/*----------------------------------------*/
+@import "jobs";
+/*----------------------------------------*/
+/*  09. Job Single/Details CSS
+/*----------------------------------------*/
+@import "job-single";
+/*----------------------------------------*/
+/*  10. Job Category CSS
+/*----------------------------------------*/
+@import "job-category";
+/*----------------------------------------*/
+/*  11. Company CSS
+/*----------------------------------------*/
+@import "company";
+/*----------------------------------------*/
+/*  12. Blog CSS
+/*----------------------------------------*/
+@import "blog";
+/*----------------------------------------*/
+/*  13. Comment CSS
+/*----------------------------------------*/
+@import "comment";
+/*----------------------------------------*/
+/*  14. Sidebar CSS
+/*----------------------------------------*/
+@import "sidebar";
+/*----------------------------------------*/
+/*  15. About CSS
+/*----------------------------------------*/
+@import "about";
+/*----------------------------------------*/
+/*  16. Team CSS
+/*----------------------------------------*/
+@import "team";
+/*----------------------------------------*/
+/*  17. Pricing CSS
+/*----------------------------------------*/
+@import "pricing";
+/*----------------------------------------*/
+/*  18. App CSS
+/*----------------------------------------*/
+@import "app";
+/*----------------------------------------*/
+/*  19. Testimonial CSS
+/*----------------------------------------*/
+@import "testimonial";
+/*----------------------------------------*/
+/*  20. Funfact CSS
+/*----------------------------------------*/
+@import "funfact";
+/*----------------------------------------*/
+/*  21. FAQ CSS
+/*----------------------------------------*/
+@import "faq";
+/*----------------------------------------*/
+/*  22. Contact CSS
+/*----------------------------------------*/
+@import "contact";
+/*----------------------------------------*/
+/*  23. Footer CSS
+/*----------------------------------------*/
+@import "footer";
\ No newline at end of file
--- a/app/assets/stylesheets/top.scss
+++ b/app/assets/stylesheets/top.scss
-// Top page 
-// search 
-// banner
-.banner {
-  background-image: url('banner.jpg');
-  min-height: 200px;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-// latest-job
-.latest-job {
-  .job-item {
-    font-size: 14px;
-    .job-title {
-      text-decoration: none;
-      color: black;
-      font-size: 20px;
-      font-weight: 500;
-    }
-    .job-caption {
-      line-height: 18px;
-      .job-company {
-        text-decoration: none;
-        font-size: 14px;
-        color: #495057;
-      }
-      .job-salary {
-        color: #008563;
-        margin: 0;
-      }
-      .job-locations {
-        ul {
-          list-style: none;
-          margin: 0 0 6px 0;
-          padding: 0;
-          color: #495057;
-        }
-      }
-      .job-desc {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        line-height: 18px;
-        -webkit-line-clamp: 2;
-        max-height: 36px;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-      }
-    }
-  }
-}
-// top_cities
-.top_cities {
-  .city-item {
-    margin-bottom: 12px;
-    a {
-      font-size: 18px;
-      text-decoration: none;
-      color: #287ab9;
-      margin: 10px 0;
-    }
-  }
-  .all-cities-btn {
-    color: #287ab9;
-    font-size: 20px;
-    text-decoration: none;
-  }
-  .all-cities-btn:hover {
-    text-decoration: underline;
-  }
-}
-// top_industries
-.top_industries {
-  .industry-item {
-    margin-bottom: 12px;
-    a {
-      font-size: 18px;
-      text-decoration: none;
-      color: #287ab9;
-      margin: 10px 0;
-    }
-  }
-  .all-industries-btn {
-    color: #287ab9;
-    font-size: 20px;
-    text-decoration: none;
-  }
-  .all-industries-btn:hover {
-    text-decoration: underline;
-  }
-}
--- a/app/controllers/favorite_industries_controller.rb
+++ b/app/controllers/favorite_industries_controller.rb
+class FavoriteIndustriesController < ApplicationController
+  before_action :authenticate_user!
+  before_action :load_industry, only: %i[create destroy]
+  def index
+    @favorite_industries = current_user.favorite_industries
+                                       .page(params[:page]).per(Job::JOB_PER_PAGE)
+  end
+  def create
+    @favorite_industry = current_user.favorite_industries.build(industry_id: @industry.id)
+    respond_to :js if @favorite_industry.save
+  end
+  def destroy
+    @favorite_industry = current_user.favorite_industries.find_by(industry_id: @industry.id)
+    respond_to :js if @favorite_industry.destroy
+  end
+  private
+  def load_industry
+    @industry = Industry.find_by(id: params[:industry_id])
+  end
+end
--- a/app/controllers/favorite_jobs_controller.rb
+++ b/app/controllers/favorite_jobs_controller.rb
 class FavoriteJobsController < ApplicationController
-  # before_action :logged_in_user
  before_action :authenticate_user!
  before_action :load_job, only: %i[create destroy]

--- a/app/controllers/jobs_controller.rb
+++ b/app/controllers/jobs_controller.rb
 class JobsController < ApplicationController
  before_action :history, only: :show
+  before_action :views_count, only: :show
  before_action :salary_search
  before_action :city_industry_list
  before_action :name, only: :index
@@ -31,6 +32,13 @@ class JobsController < ApplicationController
    history.update(updated_at: Time.current)
  end
+  def views_count
+    job = Job.find_by(id: params[:id])
+    count = job.views_count + 1
+    job.update_attribute :views_count, count
+  end
  def name
    @name = if params[:city_slug]
              City.find_by(slug: params[:city_slug]).name
@@ -44,6 +52,6 @@ class JobsController < ApplicationController
  def get_jobs(query)
    jobs_ids = query['response']['docs'].map { |j| j['job_id'] }
    @jobs = Job.eager_load(:cities, :cities_jobs, :company).find(jobs_ids)
-    @jobs_count = query['numFound']
+    @jobs_count = query['response']['numFound']
  end
 end
--- a/app/controllers/top_controller.rb
+++ b/app/controllers/top_controller.rb
 class TopController < ApplicationController
  before_action :salary_search
  before_action :city_industry_list
+  before_action :solr
  def index
-    solr = Solr.new(params)
+    @latest_jobs = get_jobs(@solr.latest_jobs)
-    @latest_jobs = get_jobs(solr.latest_jobs)
+    @attractive_jobs = Job.top_views
-    @total_job = solr.query_all['response']['numFound']
+    @total_job = @solr.query_all['response']['numFound']
-    @total_job = 100
+    @top_cities = @solr.facet_query('city_id')['vietnam'].take(City::TOP_JOB_COUNT)
-    @top_cities = solr.facet_query('city_id')['vietnam'].take(City::TOP_JOB_COUNT)
+    @top_industries = @solr.facet_query('industry_id').take(Industry::TOP_JOB_COUNT)
-    @top_industries = solr.facet_query('industry_id').take(Industry::TOP_JOB_COUNT)
+    @member = User.count
+    @resume = ApplyJob.count
+    @company = Company.count
+    suggest
  end
  private
+  def suggest
+    return unless user_signed_in? && current_user.industries?
+    industry_ids = current_user.fav_industries_ids
+    @suggest_jobs = get_jobs(@solr.suggest_jobs(industry_ids))
+  end
+  def solr
+    @solr = Solr.new(params)
+  end
  def get_jobs(query)
    jobs_ids = query['response']['docs'].map { |j| j['job_id'] }
-    Job.eager_load(:cities, :cities_jobs, :company).find(jobs_ids)
+    Job.includes(:cities, :cities_jobs, :company).find(jobs_ids)
  end
 end
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -16,12 +16,12 @@ module ApplicationHelper
    a = list.map do |item|
      case model
      when :city
-        link_to item.name, city_jobs_path(city_slug: item.slug), class: 'mx-1 text-decoration-none text-info'
+        link_to item.name, city_jobs_path(city_slug: item.slug)
      when :industry
-        link_to item.name, industry_jobs_path(industry_slug: item.slug), class: 'mx-1 text-decoration-none text-info'
+        link_to item.name, industry_jobs_path(industry_slug: item.slug)
      end
    end
-    a.join('|').html_safe
+    a.join(' | ').html_safe
  end
  def view_search_result

--- a/app/helpers/favorite_industries_helper.rb
+++ b/app/helpers/favorite_industries_helper.rb
+module FavoriteIndustriesHelper
+end
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -4,7 +4,9 @@
 // that code so it'll be compiled.
 //= require jquery
-//= require jquery_ujs
+//= require jquery_ujs 
+//= require popper
+//= require bootstrap
 //= require turbolinks
 //= require_tree .
@@ -17,7 +19,5 @@ Rails.start()
 Turbolinks.start()
 ActiveStorage.start()
-import "bootstrap"
-window.bootstrap = require("bootstrap");
-import "../stylesheets/application.scss";
 import "./validation";
+import "./main";
--- a/app/javascript/packs/main.js
+++ b/app/javascript/packs/main.js
+(function ($) {
+  "use strict";
+  /*--
+      Commons Variables
+  -----------------------------------*/
+  var $window = $(window),
+      $body = $('body'),
+      $mainWrapper = $('.main-wrapper'),
+      $headerHeight = $('.header').outerHeight();
+  /*______________________________ */
+  /*--
+      Custom script to call Background
+      Image form html data attribute
+  -----------------------------------*/
+  $('[data-bg-image]').each(function () {
+      var $this = $(this),
+          $image = $this.data('bg-image');
+      $this.css('background-image', 'url(' + $image + ')');
+  });
+  /*--
+      Parallax
+  -----------------------------------*/
+  $('.bg-parallax').each(function () {
+      $(this).parallax("50%", 0.5);
+  })
+  /*--
+      Header Sticky
+  -----------------------------------*/
+  $window.on('scroll', function () {
+      if ($window.scrollTop() > 350) {
+          $('.header').addClass('is-sticky');
+      } else {
+          $('.header').removeClass('is-sticky');
+      }
+  });
+  /*--
+  Mobile OffCanvas Open & Close
+  -----------------------------------*/
+  function mobileOffCanvasToggle() {
+      var $offCanvas = $('#offcanvas'),
+          $offCanvasOverlay = $('.offcanvas-overlay');
+      $('.offcanvas-toggle').on('click', function () {
+          $offCanvas.addClass('open');
+          $offCanvasOverlay.fadeIn();
+          $body.addClass('offcanvas-open');
+      });
+      $('.offcanvas-close, .offcanvas-overlay').on('click', function () {
+          $offCanvas.removeClass('open');
+          $offCanvasOverlay.fadeOut();
+          $body.removeClass('offcanvas-open');
+      });
+  }
+  mobileOffCanvasToggle();
+  /*--
+      Off Canvas Menu
+  -----------------------------------*/
+  function mobileOffCanvasMenu() {
+      var $offCanvasNav = $('.offcanvas-menu'),
+          $offCanvasNavSubMenu = $offCanvasNav.find('.sub-menu');
+      /*Add Toggle Button With Off Canvas Sub Menu*/
+      $offCanvasNavSubMenu.parent().prepend('<span class="menu-expand"><i></i></span>');
+      /*Category Sub Menu Toggle*/
+      $offCanvasNav.on('click', 'li a, li .menu-expand', function (e) {
+          var $this = $(this);
+          if ($this.siblings('.sub-menu').length && ($this.attr('href') === '#' || $this.hasClass('menu-expand'))) {
+              e.preventDefault();
+              if ($this.siblings('ul:visible').length) {
+                  $this.parent('li').removeClass('active');
+                  $this.siblings('ul').slideUp();
+                  $this.parent('li').find('li').removeClass('active');
+                  $this.parent('li').find('ul:visible').slideUp();
+              } else {
+                  $this.parent('li').addClass('active');
+                  $this.closest('li').siblings('li').removeClass('active').find('li').removeClass('active');
+                  $this.closest('li').siblings('li').find('ul:visible').slideUp();
+                  $this.siblings('ul').slideDown();
+              }
+          }
+      });
+  }
+  mobileOffCanvasMenu();
+  /*--
+      Slick Slider Activation
+  -----------------------------------*/
+  // Company Slider
+  $('.company-slider').slick({
+      slidesToShow: 6,
+      slidesToScroll: 1,
+      arrows: true,
+      autoplay: true,
+      prevArrow: '<button class="slick-prev"><i class="fa fa-angle-left"></i></button>',
+      nextArrow: '<button class="slick-next"><i class="fa fa-angle-right"></i></button>',
+      responsive: [{
+          breakpoint: 1200,
+          settings: {
+              slidesToShow: 5
+          }
+      }, {
+          breakpoint: 992,
+          settings: {
+              slidesToShow: 4
+          }
+      }, {
+          breakpoint: 767,
+          settings: {
+              slidesToShow: 3,
+              arrows: false
+          }
+      }, {
+          breakpoint: 480,
+          settings: {
+              slidesToShow: 2,
+              arrows: false
+          }
+      }]
+  });
+  // Job Category Slider
+  $('.job-category-slider').slick({
+      slidesToShow: 5,
+      slidesToScroll: 1,
+      arrows: true,
+      autoplay: true,
+      prevArrow: '<button class="slick-prev"><i class="fa fa-angle-left"></i></button>',
+      nextArrow: '<button class="slick-next"><i class="fa fa-angle-right"></i></button>',
+      responsive: [{
+          breakpoint: 1200,
+          settings: {
+              slidesToShow: 4
+          }
+      }, {
+          breakpoint: 992,
+          settings: {
+              slidesToShow: 3
+          }
+      }, {
+          breakpoint: 767,
+          settings: {
+              slidesToShow: 2,
+              arrows: false
+          }
+      }, {
+          breakpoint: 480,
+          settings: {
+              slidesToShow: 1
+          }
+      }]
+  });
+  // Testimonial Slider
+  $('.testimonial-slider').slick({
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      arrows: true,
+      autoplay: true,
+      prevArrow: '<button class="slick-prev"><i class="fa fa-angle-left"></i></button>',
+      nextArrow: '<button class="slick-next"><i class="fa fa-angle-right"></i></button>',
+      responsive: [{
+          breakpoint: 767,
+          settings: {
+              slidesToShow: 1,
+              arrows: false
+          }
+      }]
+  });
+  // Blog Slider
+  $('.blog-slider').slick({
+      slidesToShow: 3,
+      slidesToScroll: 1,
+      arrows: false,
+      autoplay: true,
+      prevArrow: '<button class="slick-prev"><i class="fa fa-angle-left"></i></button>',
+      nextArrow: '<button class="slick-next"><i class="fa fa-angle-right"></i></button>',
+      responsive: [{
+          breakpoint: 992,
+          settings: {
+              slidesToShow: 2
+          }
+      }, {
+          breakpoint: 767,
+          settings: {
+              slidesToShow: 2,
+              arrows: false
+          }
+      }, {
+          breakpoint: 767,
+          settings: {
+              slidesToShow: 2,
+              arrows: false
+          }
+      }, {
+          breakpoint: 575,
+          settings: {
+              slidesToShow: 1
+          }
+      }]
+  });
+  /*--
+      Counter Up
+  -----------------------------------*/
+  $('.counter').counterUp({
+      time: 3000
+  });
+  /*--
+      Salary Range (Ion Range Slider)
+  -----------------------------------*/
+  $("#salary-range").ionRangeSlider({
+      type: "double",
+      min: 3000,
+      max: 25000,
+      step: 500,
+      from: 7000,
+      to: 15000,
+      grid: false,
+  });
+  /*--
+      Scroll Up
+  -----------------------------------*/
+  $.scrollUp({
+      scrollText: '<i class="fa fa-long-arrow-up"></i>',
+  });
+})(jQuery);
--- a/app/javascript/stylesheets/application.scss
+++ b/app/javascript/stylesheets/application.scss
-@import "bootstrap";
--- a/app/models/favorite_industry.rb
+++ b/app/models/favorite_industry.rb
+class FavoriteIndustry < ApplicationRecord
+  belongs_to :user
+  belongs_to :industry
+end
--- a/app/models/industry.rb
+++ b/app/models/industry.rb
@@ -2,6 +2,8 @@ class Industry < ApplicationRecord
  TOP_JOB_COUNT = 9
  has_and_belongs_to_many :jobs
+  has_many :favorite_industries, dependent: :destroy
  validates :slug, presence: true, uniqueness: { case_sensitive: true }

--- a/app/models/job.rb
+++ b/app/models/job.rb
@@ -14,4 +14,8 @@ class Job < ApplicationRecord
  has_many :apply_jobs, dependent: :destroy
  has_many :favorite_jobs, dependent: :destroy
  has_many :history_jobs, dependent: :destroy
+  def self.top_views
+    includes(:cities, :cities_jobs, :company).order(views_count: :desc).limit(LATEST_JOBS_LIMIT)
+  end
 end
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -7,6 +7,7 @@ class User < ApplicationRecord
  has_many :apply_jobs, dependent: :destroy
  has_many :favorite_jobs, dependent: :destroy
  has_many :history_jobs, dependent: :destroy
+  has_many :favorite_industries, dependent: :destroy
  has_one_attached :cv
@@ -32,6 +33,20 @@ class User < ApplicationRecord
    @favorite_job_ids.include?(job.id)
  end
+  def fav_industry?(industry_slug)
+    industry_id = Industry.find_by(slug: industry_slug).id
+    @fav_industry_ids ||= Set.new(favorite_industries.pluck(:industry_id))
+    @fav_industry_ids.include?(industry_id)
+  end
+  def industries?
+    favorite_industries.exists?
+  end
+  def fav_industries_ids
+    favorite_industries.pluck(:industry_id)
+  end
  protected
  def password_required?

--- a/app/services/solr.rb
+++ b/app/services/solr.rb
@@ -62,7 +62,7 @@ class Solr
    city_name = city.name
    q = "search:*#{@params[:search]}*"
-    fq = if @params[:salary]
+    fq = if @params[:salary].present?
           ["cities_name: \"#{escape_str(city_name)}\"", "min_salary: [#{@params[:salary]} TO *]"]
         else
           "cities_name: \"#{escape_str(city_name)}\""
@@ -78,7 +78,7 @@ class Solr
    industry_name = industry.name
    q = "search:*#{@params[:search]}*"
-    fq = if @params[:salary]
+    fq = if @params[:salary].present?
           ["industries_name: \"#{escape_str(industry_name)}\"", "min_salary: [#{@params[:salary]} TO *]"]
         else
           "industries_name: \"#{escape_str(industry_name)}\""
@@ -87,6 +87,16 @@ class Solr
    send_request(q, fq)
  end
+  def suggest_jobs(arr)
+    parsed = arr.join(' ')
+    q = "industry_id: #{parsed}"
+    fq = []
+    facet = nil
+    sort = 'max_salary desc'
+    rows = 5
+    send_request(q, fq, facet, sort, rows)
+  end
  def facet_query(facet_param)
    q = '*:*'
    fq = '*:*'

--- a/app/views/admins/applies.html.slim
+++ b/app/views/admins/applies.html.slim
@@ -2,88 +2,87 @@
 - provide(:title, 'All applies jobs')
 / search 
-.container.mt-5
+= render 'shared/page_heading', title: 'Applies jobs', url: history_jobs_path
-  = form_with(url: admin_applies_jobs_path, method: :get, local: true) do |f|
+.section.section-padding
-    .row.mb-2.form-group 
+  .container
-      .col-2
+    = form_with(url: admin_applies_jobs_path, method: :get, local: true) do |f|
-        = f.label :email, 'Email', class: 'form-label'
+      .row.mb-2.form-group 
-      .col-10
+        .col-2
-        = f.text_field :email, class: 'form-control', value: params[:email]
+          = f.label :email, 'Email', class: 'form-label'
+        .col-10
-    .row.mb-2.form-group 
+          = f.text_field :email, class: 'form-control', value: params[:email]
-      .col-2
-        = f.label :city, 'City'
+      .row.mb-2.form-group 
-      .col-10
+        .col-2
-        = f.select :city, options_for_select(@city, selected: params[:city]), { include_blank: 'Select city' }, { class: 'form-select' }
+          = f.label :city, 'City'
-    .row.mb-2.form-group 
+        .col-10
-      .col-2
+          = f.select :city, options_for_select(@city, selected: params[:city]), { include_blank: 'Select city' }, { class: 'form-select' }
-        = f.label :industry, 'Industry', class: 'form-label'
+      .row.mb-2.form-group 
-      .col-10
+        .col-2
-        = f.select :industry, options_for_select(@industry, selected: params[:industry]), { include_blank: 'Select industry' }, { class:'form-select' }
+          = f.label :industry, 'Industry', class: 'form-label'
+        .col-10
+          = f.select :industry, options_for_select(@industry, selected: params[:industry]), { include_blank: 'Select industry' }, { class:'form-select' }
-    .row.mb-2.form-group 
+      .row.mb-2.form-group 
-      .col-6
+        .col-6
-        .row 
+          .row 
-          .col-4
+            .col-4
-            = f.label :date_start, 'From', class: 'form-label'
+              = f.label :date_start, 'From', class: 'form-label'
-          .col-8
+            .col-8
-            = f.date_field :date_start, value: params[:date_start], class: 'form-control'
+              = f.date_field :date_start, value: params[:date_start], class: 'form-control'
-      .col-6
+        .col-6
-        .row 
+          .row 
-          .col-4
+            .col-4
-            = f.label :date_end, 'To', class: 'form-label'
+              = f.label :date_end, 'To', class: 'form-label'
-          .col-8
+            .col-8
-            = f.date_field :date_end, value: params[:date_end], class: 'form-control'
+              = f.date_field :date_end, value: params[:date_end], class: 'form-control'
-    .row 
+      .row 
-      .col-6.d-flex.justify-content-center
+        .col-6.d-flex.justify-content-center
-        = f.submit 'Search', name: 'search', class: 'btn btn-primary w-50 my-4 btn-height',data: { disable_with: false }
+          = f.submit 'Search', name: 'search', class: 'btn btn-primary w-50 my-4 btn-height',data: { disable_with: false }
-      .col-6.d-flex.justify-content-center
+        .col-6.d-flex.justify-content-center
-        = f.submit 'Export', name: 'csv',class: 'btn btn-primary w-50 my-4 btn-height',data: { disable_with: false }
+          = f.submit 'Export', name: 'csv',class: 'btn btn-primary w-50 my-4 btn-height',data: { disable_with: false }
-/result
+  /result
-.container
+  .container.mb-3
-  h2.my-5.text-center
+    .no-padding.d-flex.align-items-center.flex-column
-    | All applies jobs
+      .page-info.p-2
-.container  
+        = page_entries_info @apply_jobs
-  .no-padding.d-flex.align-items-center.flex-column
+      .page-info.p-2
-    .page-info.p-2
+        = paginate @apply_jobs
-      = page_entries_info @apply_jobs
+  .container
-    .page-info.p-2
+    - @apply_jobs.each do |apply|
-      = paginate @apply_jobs
+      .apply-item
-.container
+        .apply-job-title
-  - @apply_jobs.each do |apply|
+          = link_to apply.job.title, apply.job, class: 'job-title fs-3 text-decoration-none text-reset'
-    .apply-item
+        .apply-user-name.text-secondary
-      .apply-job-title
+          p.fw-bold
-        = link_to apply.job.title, apply.job, class: 'job-title fs-3 text-decoration-none text-reset'
+            | Candidate Name: 
-      .apply-user-name.text-secondary
-        p.fw-bold
-          | Candidate Name: 
-          span.fw-normal.text-dark
-            = apply.user_name 
-      .apply-cv
-        p.fw-bold.text-secondary
-          | Candidate' CV: 
-          - if apply.cv.attached?
-            span.fw-normal
-            = link_to apply.cv.filename, rails_blob_path(apply.cv, disposition: "attachment")
-          - else
            span.fw-normal.text-dark
-            = 'cv file not uploaded yet'
+              = apply.user_name 
-      .d-flex.align-items-center.justify-content-between
+        .apply-cv
-        .apply-user-email
          p.fw-bold.text-secondary
-            | Candidate's Email: 
+            | Candidate' CV: 
-            span.fw-normal.text-dark
+            - if apply.cv.attached?
-              = apply.email 
+              span.fw-normal
-        .apply-date 
+              = link_to apply.cv.filename, rails_blob_path(apply.cv, disposition: "attachment")
-          p.fst-italic.text-secondary
+            - else
-            | Applied at: 
+              span.fw-normal.text-dark
-            span.fw-normal.text-dark
+              = 'cv file not uploaded yet'
-              = apply.created_at.strftime('%d/%m/%Y')
+        .d-flex.align-items-center.justify-content-between
-    hr
+          .apply-user-email
-.container  
+            p.fw-bold.text-secondary
-  .no-padding.d-flex.align-items-center.flex-column
+              | Candidate's Email: 
-    .page-info.p-2
+              span.fw-normal.text-dark
-      = page_entries_info @apply_jobs
+                = apply.email 
-    .page-info.p-2
+          .apply-date 
-      = paginate @apply_jobs
+            p.fst-italic.text-secondary
+              | Applied at: 
+              span.fw-normal.text-dark
+                = apply.created_at.strftime('%d/%m/%Y')
+      hr
+  .container  
+    .no-padding.d-flex.align-items-center.flex-column
+      .page-info.p-2
+        = page_entries_info @apply_jobs
+      .page-info.p-2
+        = paginate @apply_jobs
--- a/app/views/admins/confirmations/new.html.erb
+++ b/app/views/admins/confirmations/new.html.erb
-<h2>Resend confirmation instructions</h2>
-<%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
-  <%= render "admins/shared/error_messages", resource: resource %>
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
-  </div>
-  <div class="actions">
-    <%= f.submit "Resend confirmation instructions" %>
-  </div>
-<% end %>
-<%= render "admins/shared/links" %>
--- a/app/views/admins/confirmations/new.html.slim
+++ b/app/views/admins/confirmations/new.html.slim
+- provide(:title, 'Resend confirmation instructions')
+= render 'shared/page_heading', title: 'Resend'
+.section.section-padding
+  .container
+    .row.justify-content-center
+      .col-lg-6.col-sm-6.col-12.flex-grow-1.mb-4
+        = form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f|
+          = render "admins/shared/error_messages", resource: resource
+          .field
+            = f.label :email
+            br
+            = f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email)
+          .actions
+            = f.submit "Resend confirmation instructions"
+        = render "admins/shared/links"
\ No newline at end of file
--- a/app/views/admins/passwords/new.html.slim
+++ b/app/views/admins/passwords/new.html.slim
 - provide(:title, 'Admin Forgot password')
+= render 'shared/page_heading', title: 'Forgot password', url: login_path
-.container
+.section.section-padding
-  .row.justify-content-center
+  .container
-    .col-6
+    .row.justify-content-center
-      h2.text-center.my-5
+      .col-lg-6.col-sm-6.col-12.flex-grow-1.mb-4
-        | Forgot password
+        = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
-      = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
+          = render 'admins/shared/error_messages', resource: resource
-        = render 'admins/shared/error_messages', resource: resource
+          .field.row.form-group.mb-4
-        .field.row.form-group.mb-4
+            .col-lg-2.col-sm-2.col-12
-          .col-2
+              = f.label :email, class: 'form-label'
-            = f.label :email, class: 'form-label'
+            .col-lg-10.col-sm-10.col-12
-          .col-10
+              = f.email_field :email, autofocus: true, autocomplete: 'email', class: 'form-control mb-2'
-            = f.email_field :email, autofocus: true, autocomplete: 'email', class: 'form-control mb-2'
+              span.form-msg
-            span.form-msg
+              - if devise_mapping.confirmable? && controller_name != 'confirmations'
-            - if devise_mapping.confirmable? && controller_name != 'confirmations'
+                p 
-              p 
+                  = link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name), class: 'text-decoration-none'
-                = link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name), class: 'text-decoration-none'
+          .actions.row.justify-content-end
-        .actions.row.justify-content-end
+            .col-lg-10.col-12.d-flex.justify-content-around
-          .col-10.d-flex.justify-content-center
+              = f.submit 'Confirm your email', class: 'btn btn-primary w-100 my-4', data: { disable_with: false }
-            = f.submit 'Confirm your email', class: 'btn btn-primary w-75 my-4', data: { disable_with: false }
 javascript:
  Validator({

--- a/app/views/admins/registrations/new.html.slim
+++ b/app/views/admins/registrations/new.html.slim
 - provide(:title, 'Admin Sign Up')
-.container
+= render 'shared/page_heading', title: 'Sign up', url: new_admin_registration_path
-  .row.justify-content-center
-    .col-6
+.section.section-padding
-      h2.text-center.my-5
+  .container
-        | Sign up
+    .row.justify-content-center
-      = form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
+      .col-lg-6.col-sm-6.col-12.flex-grow-1.mb-4
-        = render 'users/shared/error_messages', resource: resource
+        = form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
-        .field.row.form-group.mb-4
+          = render 'users/shared/error_messages', resource: resource
-          .col-2
+          .field.row.form-group.mb-4
-            = f.label :email, class: 'form-label'
+            .col-lg-2.col-sm-2.col-12
-          .col-10
+              = f.label :email, class: 'form-label'
-            = f.email_field :email, autofocus: true, autocomplete: 'email', class: 'form-control mb-2'
+            .col-lg-10.col-sm-10.col-12
-            span.form-msg
+              = f.email_field :email, autofocus: true, autocomplete: 'email', class: 'form-control mb-2'
-        .field.row.form-group.mb-4
+              span.form-msg
-          .col-2
+          .field.row.form-group.mb-4
-            = f.label :password, class: 'form-label'
+            .col-lg-2.col-sm-2.col-12
-          .col-10
+              = f.label :password, class: 'form-label'
-            = f.password_field :password, autocomplete: 'new-password', class: 'form-control mb-2'
+            .col-lg-10.col-sm-10.col-12
-            span.form-msg
+              = f.password_field :password, autocomplete: 'new-password', class: 'form-control mb-2'
-        .field.row.form-group.mb-4
+              span.form-msg
-          .col-2
+          .field.row.form-group.mb-4
-            = f.label :password_confirmation, class: 'form-label'
+            .col-lg-2.col-sm-2.col-12
-          .col-10
+              = f.label :password_confirmation, class: 'form-label'
-            = f.password_field :password_confirmation, autocomplete: 'new-password', class: 'form-control mb-2'
+            .col-lg-10.col-sm-10.col-12
-            span.form-msg
+              = f.password_field :password_confirmation, autocomplete: 'new-password', class: 'form-control mb-2'
-        .actions
+              span.form-msg
-          = f.submit 'Sign up', class: 'btn btn-primary w-100 my-5'
+          .actions.row.justify-content-end
+            .col-lg-10.col-12.d-flex.justify-content-around
+              = f.submit 'Sign up', class: 'btn btn-primary w-100 my-5'
 javascript:
  Validator({

--- a/app/views/admins/sessions/new.html.slim
+++ b/app/views/admins/sessions/new.html.slim
 - provide(:title, 'Log in')
-.container
+= render 'shared/page_heading', title: 'Admin Login', url: admin_login_path
-  .row.justify-content-center
-    .col-6
+.section.section-padding
-      h2.text-center.my-5
+  .container
-        | Log in Admin
+    .row.justify-content-center
-      = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
+      .col-lg-6.col-sm-6.col-12.flex-grow-1.mb-4
-        .field.row.form-group.mb-4
+        = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
-          .col-2
+          .field.row.form-group.mb-4
-            = f.label :email, class: 'form-label'
+            .col-lg-2.col-sm-2.col-12
-          .col-10
+              = f.label :email, class: 'form-label'
-            = f.email_field :email, autofocus: true, autocomplete: 'email', class: 'form-control mb-2'
+            .col-lg-10.col-sm-10.col-12
-            span.form-msg
+              = f.email_field :email, autofocus: true, autocomplete: 'email', class: 'form-control mb-2'
-        .field.row.form-group.mb-4
+              span.form-msg
-          .col-2
+          .field.row.form-group.mb-4
-            = f.label :password, class: 'form-label'
+            .col-lg-2.col-sm-2.col-12
-          .col-10
+              = f.label :password, class: 'form-label'
-            = f.password_field :password, autocomplete: 'current-password', class: 'form-control mb-2'
+            .col-lg-10.col-sm-10.col-12
-            span.form-msg
+              = f.password_field :password, autocomplete: 'current-password', class: 'form-control mb-2'
-            - if devise_mapping.rememberable?
+              span.form-msg
-              .field
+              - if devise_mapping.rememberable?
-                = f.check_box :remember_me
+                .field
-                = f.label :remember_me, class: 'form-label mx-2'
+                  = f.check_box :remember_me
-            - if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations'
+                  = f.label :remember_me, class: 'form-label mx-2'
-              = link_to 'Forgot password?', forgot_password_path, class: 'text-decoration-none'
+              .d-flex.justify-content-between
-        .actions.row.justify-content-end
+                - if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations'
-          .col-10.d-flex.justify-content-around
+                  = link_to 'Forgot password?', new_admin_password_path, class: 'text-decoration-none'
-            = f.submit 'Log in', class: 'btn btn-primary w-25', data: { disable_with: false }
+                = link_to 'Sign up', new_registration_path(resource_name), class: 'text-decoration-none'
-            = link_to 'Sign up', new_registration_path(resource_name), class: 'text-decoration-none w-25 btn btn-secondary'
+          .actions.row.justify-content-end
+            .col-lg-10.col-12.d-flex.justify-content-around
+              = f.submit 'Log in', class: 'btn btn-primary w-100', data: { disable_with: false }
 javascript:
  Validator({

--- a/app/views/applies/_my_jobs.html.slim
+++ b/app/views/applies/_my_jobs.html.slim
-.job-item
+/ .job-item
-  .job-head.d-flex.align-items-center.justify-content-between
+/   .job-head.d-flex.align-items-center.justify-content-between
-    = link_to applied_job.job.title, applied_job.job, class: 'job-title fs-3 text-decoration-none text-reset'
+/     = link_to applied_job.job.title, applied_job.job, class: 'job-title fs-3 text-decoration-none text-reset'
-    - if user_signed_in? && current_user.favorite?(applied_job.job)
+/     - if user_signed_in? && current_user.favorite?(applied_job.job)
-      = render 'shared/unfavorite', job_id: applied_job.job.id
+/       = render 'shared/unfavorite', job_id: applied_job.job.id
-    - else
+/     - else
-      = render 'shared/favorite', job_id: applied_job.job.id
+/       = render 'shared/favorite', job_id: applied_job.job.id
-  .job-caption
+/   .job-caption
-    = link_to applied_job.job.company.name, '#', class: 'job-company text-decoration-none text-secondary'
+/     = link_to applied_job.job.company.name, '#', class: 'job-company text-decoration-none text-secondary'
-    p.job-salary.text-success
+/     p.job-salary.text-success
-      | Salary: #{applied_job.job.salary}
+/       | Salary: #{applied_job.job.salary}
-    ul.list-unstyled
+/     ul.list-unstyled
-      = show_location(applied_job.job.cities)
+/       = show_location(applied_job.job.cities)
-    .job-desc
+/     .job-desc
-      = truncate(simple_format(applied_job.job.description), escape: false, length: 250)
+/       = truncate(simple_format(applied_job.job.description), escape: false, length: 250)
-    .applied-at
+/     .applied-at
+/       strong Applied at: 
+/       = applied_job.updated_at.strftime('%d/%m/%Y')
+/     hr.my-4
+= link_to applied_job.job, class: 'job-list' do
+  .company-logo.col-auto
+    = image_tag('company-logo', width: '70')
+  .salary-type.col-auto.order-sm-3
+    span.salary-range
+      = applied_job.job.salary
+    span.badge.badge-success
+      = applied_job.job.job_type
+  .content.col 
+    h6.title
+      = applied_job.job.title
+    ul.meta
+      li 
+        strong.text-primary
+          = applied_job.job.company.name
+      li
+        i.fa.fa-map-marker
+        = show_location(applied_job.job.cities)
+    p.applied-at 
      strong Applied at: 
      = applied_job.updated_at.strftime('%d/%m/%Y')
-    hr.my-4
--- a/app/views/applies/confirm.html.slim
+++ b/app/views/applies/confirm.html.slim
 - provide(:title, 'Confirmation')
-.container 
+= render 'shared/page_heading', title: 'Confirm', url: '#'
-  = render 'ribbon'
-.container
+.section
-  h1.my-5.text-center 
+  .container 
-    | Confirmation
+    = render 'ribbon'
-  .col
-    = form_with(model: @apply, scope: :apply_job, url: done_job_path, local: true) do |f|
-      .row.mb-5
-        = f.hidden_field :job_id, value: @job.id
-        = f.hidden_field :blob_id, value: @blob.id
-        .col-2
-          = f.label :name, 'Full name:', class: 'form-label label'
-        .col-10
-          span.mx-2.label.form-control
-            = @apply.user_name
-          = f.hidden_field :user_name, value: @apply.user_name
-      .row.mb-5
+  .container
-        .col-2
+    .col
-          = f.label :email, 'Email:', class: 'form-label label'
+      = form_with(model: @apply, scope: :apply_job, url: done_job_path, local: true) do |f|
-        .col-10
-          span.mx-2.label.form-control
+        .row.mb-5
-            = @apply.email
+          = f.hidden_field :job_id, value: @job.id
-          = f.hidden_field :email, value: @apply.email
+          = f.hidden_field :blob_id, value: @blob.id
+          .col-2
-      .row.mb-5
+            = f.label :name, 'Full name:', class: 'form-label label'
-        .col-2
+          .col-10
-          = f.label :cv, 'Cv: ', class: 'form-label label'
+            span.mx-2.label.form-control
-        .col-10
+              = @apply.user_name
-          span.form-control
+            = f.hidden_field :user_name, value: @apply.user_name
-            = url_for(@apply.cv)        
-          = link_to 'Edit', apply_job_path(job_id: @job.id), class: 'btn btn-secondary w-25 btn-height mr-5 my-5'
-          = f.submit 'Confirm', class: 'btn btn-primary w-25 btn-height mx-5 my-5'
+        .row.mb-5
+          .col-2
+            = f.label :email, 'Email:', class: 'form-label label'
+          .col-10
+            span.mx-2.label.form-control
+              = @apply.email
+            = f.hidden_field :email, value: @apply.email
+        .row.mb-5
+          .col-2
+            = f.label :cv, 'Cv: ', class: 'form-label label'
+          .col-10
+            span
+              = url_for(@apply.cv)        
+            = link_to 'Edit', apply_job_path(job_id: @job.id), class: 'btn btn-secondary w-25 btn-height mr-5 my-5'
+            = f.submit 'Confirm', class: 'btn btn-primary w-25 btn-height mx-5 my-5'
--- a/app/views/applies/create.html.slim
+++ b/app/views/applies/create.html.slim
 - provide(:title, 'Done')
-.container 
+= render 'shared/page_heading', title: 'Done', url: '#'
-  =render 'ribbon'
-.container.text-center
+.section.py-5 
-  h3.my-4
+  .container 
-    | You have successfully applied for the #{@job.title}
+    =render 'ribbon'
-  p Good luck! Thank you for using our service
-  = link_to 'Keep looking for another job', root_path
+  .container.text-center
+    h3.my-4
+      | You have successfully applied for the #{@job.title}
+    p Good luck! Thank you for using our service
+    = link_to 'Keep looking for another job', root_path
--- a/app/views/applies/index.html.slim
+++ b/app/views/applies/index.html.slim
 - provide(:title, 'User Apply Jobs')
-.container.py-5
+= render 'shared/page_heading', title: 'APPlIED JOBS', url: apply_jobs_path
-  h1.text-center.my-job-label My Job
-  .no-padding.d-flex.align-items-center.flex-column
+.section.section-padding
-    .page-info.p-2
+  .container
-      = page_entries_info @jobs
+    .job-list-toolbar
-    .page-info.p-2
+      .page-info.p-2
-      = paginate @jobs
+        = page_entries_info @jobs
-  = render partial: "my_jobs", collection: @jobs, as: :applied_job
+    .job-list-wrap
-  .no-padding.d-flex.align-items-center.flex-column
+      = render partial: "my_jobs", collection: @jobs, as: :applied_job
-    .page-info.p-2
+    ul.pagination.pagination-center.mt-5
-      = page_entries_info @jobs
+        = paginate @jobs
-    .page-info.p-2
\ No newline at end of file
-      = paginate @jobs
--- a/app/views/applies/new.html.slim
+++ b/app/views/applies/new.html.slim
 - provide(:title, 'Apply job')
-.container 
+= render 'shared/page_heading', title: 'Apply form', url: '#'
-  = render 'ribbon'
-.container
+.section
-  h1.my-5.text-center 
+  .container.py-5
-    | Apply Form
+    = render 'ribbon'
-  p.fs-5.fw-bold.mb-4.text-center 
+  .container
-    = @job.title
+    h3.fs-5.fw-bold.mb-4.text-center 
-  .col
+      = @job.title
-    = form_with(model: @apply, url: confirm_job_path, local: true, id: 'apply-form') do |f|
+    .col
-      = render 'shared/error_messages', object: f.object
+      = form_with(model: @apply, url: confirm_job_path, local: true, id: 'apply-form') do |f|
-      .row.mb-5.form-group
+        = render 'shared/error_messages', object: f.object
-        = f.hidden_field :job_id, value: @job.id
+        .row.mb-5.form-group
-        .col-2
+          = f.hidden_field :job_id, value: @job.id
-          = f.label :user_name, 'Full name', class: 'form-label label'
+          .col-2
-        .col-10
+            = f.label :user_name, 'Full name', class: 'form-label label'
-          = f.text_field :user_name, value: @apply.user_name || @current_user.name, class: 'form-control'
+          .col-10
-          span.form-msg
+            = f.text_field :user_name, value: @apply.user_name || @current_user.name, class: 'form-control'
-      .row.mb-5.form-group
+            span.form-msg
-        .col-2 
+        .row.mb-5.form-group
-          = f.label :email, class: 'form-label label'
+          .col-2 
-        .col-10
+            = f.label :email, class: 'form-label label'
-          = f.text_field :email, value: @apply.email || @current_user.email, class: 'form-control'
+          .col-10
-          span.form-msg
+            = f.text_field :email, value: @apply.email || @current_user.email, class: 'form-control'
-      .row.mb-5.form-group
+            span.form-msg
-        / - if @user.cv.attached?
+        .row.mb-5.form-group
-        /   = url_for(@user.cv)
+          / - if @user.cv.attached?
-        .col-2 
+          /   = url_for(@user.cv)
-          = f.label :cv, class: 'form-label label'
+          .col-2 
-        .col-10
+            = f.label :cv, class: 'form-label label'
-          = f.file_field :cv, files: @blob, accept: ApplyJob::ACCEPT_CONTENT_TYPE, class: 'form-control'
+          .col-10
-          span.form-msg
+            = f.file_field :cv, files: @blob, accept: ApplyJob::ACCEPT_CONTENT_TYPE
-          br
+            span.form-msg
-          = f.submit 'Confirm', class: 'btn btn-primary w-25 my-4 btn-height',data: { disable_with: false }
+            br
+            = f.submit 'Confirm', class: 'btn btn-primary w-25 my-4 btn-height',data: { disable_with: false }
 javascript:
  Validator({

--- a/app/views/cities/index.html.slim
+++ b/app/views/cities/index.html.slim
+- provide(:title, 'Cities')
+= render 'shared/page_heading', title: 'Cities', url: cities_path
 /region
-.countries-list
+.section.section-padding
-  .container.py-5
+  .container
-    h2.mt-0 REGION
+    .countries-list
-    hr.my-4
+      .container.py-5
-    .row
+        h2.mt-0 REGION
-      - @regions.each do |region|
+        hr.my-4
-        .col-lg-4.col-md-6.text-center
+        .row
-          .mt-5
+          - @regions.each do |region|
-            h3.h4.mb-2.text-white.see-more-text= link_to region.upcase, anchor: region
+            .col-lg-4.col-md-6.text-center
-// cities list
+              .mt-5
-.cities-list
+                h3.mb-2.text-primary.see-more-text= link_to region.upcase, anchor: region
-  .container 
+    // cities list
-    - @job_quantity_by_region.each do |region, city_job_count|
+    .cities-list
-      .countries-job-list id=region 
+      .container 
-        .container-fullwidth.py-5
+        - @job_quantity_by_region.each do |region, city_job_count|
-          h2.mt-0
+          .countries-job-list id=region 
-            = region.upcase
+            .container-fullwidth.py-5
-            hr.my-4
+              h2.mt-0
-          .row
+                = region.upcase
-            - city_job_count.each do |city|
+                hr.my-4
-              .col-lg-4.col-md-6.text-center
+              .row
-                .mt-5
+                - city_job_count.each do |city|
-                  .city-item
+                  .col-lg-4.col-md-6.col-12.text-center
-                    h3.h4.mb-2.see-more-text= link_to city[0], city_jobs_path(city_slug: city[1]) , class:'text-decoration-none fw-normal text-reset'
+                    .mt-5
-                    p.text-muted.mb-0= pluralize(city[2], 'job')
+                      .city-item
\ No newline at end of file
+                        h3.h4.mb-2.see-more-text= link_to city[0], city_jobs_path(city_slug: city[1]) , class:'text-decoration-none fw-normal text-reset'
+                        p.text-muted.mb-0= pluralize(city[2], 'job')
\ No newline at end of file
--- a/app/views/favorite_industries/_favorite.html.slim
+++ b/app/views/favorite_industries/_favorite.html.slim
+div id="favorite-industry-#{industry_id}"
+  = button_to favorite_industries_path(industry_id: industry_id, format: :js),
+    method: :post,
+    remote: true,
+    class: 'btn' do
+      i.fa.fa-heart-o.mr-1
\ No newline at end of file
--- a/app/views/favorite_industries/_unfavorite.html.slim
+++ b/app/views/favorite_industries/_unfavorite.html.slim
+div id="unfavorite-industry-#{industry_id}"
+  = button_to favorite_industry_path(current_user, industry_id: industry_id, format: :js),
+    method: :delete,
+    remote: true,
+    class: 'btn' do
+      i.fa.fa-heart.mr-1
\ No newline at end of file
--- a/app/views/favorite_industries/create.js.erb
+++ b/app/views/favorite_industries/create.js.erb
+$("#favorite-industry-<%= @industry.id %>").html("<%= escape_javascript(render('unfavorite', industry_id: @industry.id)) %>");
--- a/app/views/favorite_industries/destroy.js.erb
+++ b/app/views/favorite_industries/destroy.js.erb
+$("#unfavorite-industry-<%= @industry.id %>").html("<%= escape_javascript(render('favorite', industry_id: @industry.id)) %>");
--- a/app/views/favorite_jobs/index.html.slim
+++ b/app/views/favorite_jobs/index.html.slim
 - provide(:title, 'History page')
+= render 'shared/page_heading', title: 'FAVORITE', url: favorite_jobs_path
 - if @favorite_jobs.empty?
-  h2 No jobs in your history
+  .section.section-padding
+    .container.text-center
+      h2 You have not applied for any job yet
+      = link_to 'See more jobs', jobs_path, class: 'btn btn-primary m-3'
 - else 
  = render partial: 'shared/jobs_list_index', object: @favorite_jobs, as: 'jobs'
--- a/app/views/history_jobs/index.html.slim
+++ b/app/views/history_jobs/index.html.slim
 - provide(:title, 'History page')
+= render 'shared/page_heading', title: 'HISTORY', url: history_jobs_path
 - if @history_jobs.empty?
-  h2 No jobs in your history
+  .section.section-padding
+    .container.text-center
+      h2 No jobs in your history
 - else 
  = render partial: 'shared/jobs_list_index', object: @history_jobs, as: 'jobs'
--- a/app/views/industries/index.html.slim
+++ b/app/views/industries/index.html.slim
-.countries-list
+- provide(:title, 'Industries')
-  .container.py-5
-    h2.mt-0 INDUSTRIES
+= render 'shared/page_heading', title: 'INDUSTRIES', url: industries_path
-    hr.my-4
+.section.section-padding
+  .container
    #info-box.row
      - @job_quantity_by_industry.each do |industry|
-        .col-lg-6.col-md-6.text-center
+        .col-lg-6.col-sm-6.col-12.text-center
          .mt-5
-            h3.h4.mb-2.see-more-text= link_to industry[0], industry_jobs_path(industry_slug: industry[1]) , class:'text-decoration-none fw-normal text-reset'
+            .row 
-            p.text-muted.mb-0= pluralize(industry[2], 'job')
+              .col-10
+                h5.mb-2.see-more-text= link_to industry[0], industry_jobs_path(industry_slug: industry[1]) , class:'text-decoration-none fw-normal text-reset'
+                p.text-muted.mb-0= pluralize(industry[2], 'job')
+              .col-2
+                - if user_signed_in? && current_user.fav_industry?(industry[1])
+                  = render 'favorite_industries/unfavorite', industry_id: Industry.find_by(slug: industry[1]).id
+                - else 
+                  = render 'favorite_industries/favorite', industry_id: Industry.find_by(slug: industry[1]).id
            hr.divider.my-4
+            / h3.h4.mb-2.see-more-text= link_to industry[0], industry_jobs_path(industry_slug: industry[1]) , class:'text-decoration-none fw-normal text-reset'
+            / p.text-muted.mb-0= pluralize(industry[2], 'job')
+            / hr.divider.my-4
--- a/app/views/jobs/index.html.slim
+++ b/app/views/jobs/index.html.slim
 - provide(:title, 'Job list page')
 / search box
+= render 'shared/page_heading', title: 'Jobs', url: jobs_path, name: @name
+/ .page-heading-section.section.bg-parallax[data-bg-image="assets/images/bg/bg-1.jpg" data-overlay="50"]
+/   .container
+/     .page-heading-content.text-center
+/       h3.title
+/         | Browse Jobs
+/       ol.breadcrumb
+/         li.breadcrumb-item
+/           = link_to 'Home', root_path
+/         li.breadcrumb-item.active
+/           = link_to 'Jobs', jobs_path
+/         - if params[:city_slug] || params[:industry_slug]
+/           li.breadcrumb-item.active
+/             = @name
 = render 'shared/search'
-.container
+.section.section-padding
-  h3
-    = view_search_result
-  hr.my-4
-  .no-padding.d-flex.align-items-center.flex-column
-    .page-info.p-2
-      = page_entries_info @jobs
-    .page-info.p-2
-      = paginate @jobs
-.container
  .container
-  - @jobs.each do |job|
+    h3
-    / job
+      = view_search_result
-    .job-item
+    .job-list-toolbar
-      .job-head.d-flex.align-items-center.justify-content-between
+      .page-info.p-2
-        = link_to job.title, job, class: 'job-title fs-3 text-decoration-none text-reset'
+        = page_entries_info @jobs
-        - if user_signed_in? && current_user.favorite?(job)
+    .job-list-wrap
-          = render 'shared/unfavorite', job_id: job.id
+      - @jobs.each do |job|
-        - else
+        = link_to job, class: 'job-list' do
-          = render 'shared/favorite', job_id: job.id
+          .company-logo.col-auto
-      .job-caption
+            = image_tag('company-logo', width: '120')
-        = link_to job.company.name, '#', class: 'job-company text-decoration-none text-secondary'
+          .salary-type.col-auto.order-sm-3
-        p.job-salary.text-success
+            span.salary-range
-          | Salary: #{job.salary}
+              = job.salary
-        ul.list-unstyled
+            span.badge.badge-success
-          = show_location(job.cities)
+              = job.job_type
-        .job-desc
+          .content.col 
-          = truncate(simple_format(job.description), escape: false, length: 250)
+            h6.title
-      hr.my-4
+              = job.title
-  .no-padding.d-flex.align-items-center.flex-column
+            ul.meta
-    .page-info.p-2
+              li 
-      = page_entries_info @jobs
+                strong.text-primary
-    .page-info.p-2
+                  = job.company.name 
-        = paginate @jobs
+              li
\ No newline at end of file
+                i.fa.fa-map-marker
+                - city_list = job.cities
+                = show_location(job.cities)
+            / p
+            /   = truncate(simple_format(job.description), escape: false, length: 150)
+      ul.pagination.pagination-center.mt-5
+        = paginate @jobs
+/ .section.section-padding
+/   .container
+/     h3
+/       = view_search_result
+/     hr.my-4
+/     .no-padding.d-flex.align-items-center.flex-column
+/       .page-info.p-2
+/         = page_entries_info @jobs
+/       .page-info.p-2
+/         = paginate @jobs
+/     . 
+/       - @jobs.each do |job|
+/         / job
+/         .job-item
+/           .job-head.d-flex.align-items-center.justify-content-between
+/             = link_to job.title, job, class: 'job-title fs-3 text-decoration-none text-reset'
+/             - if user_signed_in? && current_user.favorite?(job)
+/               = render 'shared/unfavorite', job_id: job.id
+/             - else
+/               = render 'shared/favorite', job_id: job.id
+/           .job-caption
+/             = link_to job.company.name, '#', class: 'job-company text-decoration-none text-secondary'
+/             p.job-salary.text-success
+/               | Salary: #{job.salary}
+/             ul.list-unstyled
+/               = show_location(job.cities)
+/             .job-desc
+/               = truncate(simple_format(job.description), escape: false, length: 250)
+/           hr.my-4
+/     .no-padding.d-flex.align-items-center.flex-column
+/       .page-info.p-2
+/         = page_entries_info @jobs
+/       .page-info.p-2
+/           = paginate @jobs
\ No newline at end of file
--- a/app/views/jobs/show.html.slim
+++ b/app/views/jobs/show.html.slim
@@ -2,90 +2,200 @@ ruby:
  city_list = @job.cities
  industry_list = @job.industries
-/ html
+.page-heading-section.section.bg-parallax[data-bg-image="assets/images/bg/bg-1.jpg" data-overlay="50"]
-.container.my-5
+  .container
-  / breadcrumb 
+    .page-heading-content.text-center
-  .breadcrumb
+      h3.title
-    = link_to 'Home', root_path, class: 'text-decoration-none text-info'
-    span.mx-1  >  
-    .text-info
-      = show_breadcrumb(city_list, :city)
-    span.mx-1  >  
-    .text-info
-      = show_breadcrumb(industry_list, :industry)
-    span.mx-1  > 
-    = @job.title
-  hr.my-4
-  / job details 
-  .job-detail.my5 
-    .job-apply.d-flex.align-items-center.justify-content-between
-      h2.align-items-start
        = @job.title
-      = link_to 'Apply for this job', apply_job_path(job_id: @job.id), class: 'btn btn-primary'
+      ol.breadcrumb
-    p.text-secondary
+        li.breadcrumb-item
-      = @job.company.name
+          = link_to 'Home', root_path
-    .row.bg-light
+        li.breadcrumb-item
-      .col-4
+          = show_breadcrumb(city_list, :city)
-        ul.list-unstyled
+        li.breadcrumb-item
-          li 
+          = show_breadcrumb(industry_list, :industry)
-            strong.d-block
+        li.breadcrumb-item.active
-              | Location 
+          = @job.title
-            p
+.section.section-padding
-              = show_location(city_list)
+  .container
-          li 
+    .row.mb-n5
-            strong 
+      .col-lg-8.col-12.mb-5.pr-lg-5
-              | Salary
+        .job-list-details
-            p.text-success
+          .job-details-head.row.mx-0
-              = @job.salary          
+            .company-logo.col-auto
-      .col-4
+              = image_tag('company-logo', width: 120)
-        ul.list-unstyled
+            .salary-type.col-auto.order-sm-3
-          li 
+              span.salary-range
-            strong
+                = @job.salary
-              | Type
+              span.badge.badge-success
-            p 
+                = @job.job_type
-              = @job.job_type
+            .content.col
-          li 
+              h5.title
-            strong 
+                = @job.title
-              | Position
+              ul.meta
-            p
+                li
-              = @job.position
+                  strong.text-primary
-      .col-4
+                    = @job.company.name
-        ul.list-unstyled
+                li
-          li
+                  i.fa.fa-map-marker
-            strong
+                  = show_location(city_list)
-              | Experience
+          .job-details-body
-            p
+            h6.mb-3
-              = @job.experience
+              | Job Description
-          li 
+            = @job.description.html_safe
-            strong
-              | Expiration date
+            h6.mb-3.mt-4
-            p 
+              | Requirement
-              = @job.expiration_date.strftime('%d/%m/%Y')
+            = @job.requirement.html_safe
-    .job-benefits.my-4
-      h3 
+            h6.mb-3.mt-4
-        | Benefits
+              | Benefits
-      .row 
+            ul
-        - @job.benefit.split('---').each do |benefit|
+              - @job.benefit.split('---').each do |benefit|
-          li.list-unstyled.col-4.text-secondary
+                li.list-unstyled.col-4.text-secondary
-            = benefit 
+                  = benefit 
-    .job-desc.my-4
+            h6.mb-3.mt-4
-      h3 
+              | Other info
-        | Description
+            ul
-      = @job.description.html_safe
+              - @job.other_info.split('---').each do |info|
-    .job-req.my-4
+                li.text-secondary
-      h3
+                  = info 
-        | Requirement
-      = @job.requirement.html_safe
+      .col-lg-4.col-12.mb-5
-    .job-info.my-4
+        .sidebar-wrap
-      h3
+          .sidebar-widget
-        | Other info
+            .inner
-      - @job.other_info.split('---').each do |info|
+              .row.m-n2
-        li.text-secondary
+                .col-xl-auto.col-lg-12.col-sm-auto.col-12.p-2
-          = info 
+                  / a.d-block.btn.btn-outline-secondary[href="#"]
-    .job-apply.d-flex.align-items-center.justify-content-between      
+                  /   i.fa.fa-heart-o.mr-1
-      = link_to 'Apply for this job',  apply_job_path(job_id: @job.id), class: 'btn btn-primary'
+                  /   |  Save Job
-      - if user_signed_in? && current_user.favorite?(@job)
-        = render 'shared/unfavorite', job_id: @job.id
+                  - if user_signed_in? && current_user.favorite?(@job)
-      - else
+                    = render 'shared/unfavorite', job_id: @job.id
-        = render 'shared/favorite', job_id: @job.id
+                  - else
+                    = render 'shared/favorite', job_id: @job.id
+                .col-xl-auto.col-lg-12.col-sm-auto.col-12.p-2
+                  = link_to 'Apply now', apply_job_path(job_id: @job.id), class: 'd-block btn btn-primary'
+          .sidebar-widget
+            .inner
+              h6.title
+                | Job Overview
+              ul.job-overview.list-unstyled
+                li
+                  strong
+                    | Published on: 
+                  = @job.created_at.strftime('%d/%m/%Y')
+                li
+                  strong
+                    | Experience: 
+                  = @job.experience                  
+                li
+                  strong
+                    | Type: 
+                  = @job.job_type
+                li
+                  strong
+                    | Position: 
+                  = @job.position
+                li
+                  strong
+                    | Job Location: 
+                  = show_location(city_list)
+                li
+                  strong
+                    | Salary: 
+                  = @job.salary
+                li
+                  strong
+                    | Application Deadline: 
+                  = @job.expiration_date.strftime('%d/%m/%Y')
+/ / html
+/ .container.my-5
+/   / breadcrumb 
+/   .breadcrumb
+/     = link_to 'Home', root_path, class: 'text-decoration-none text-info'
+/     span.mx-1  >  
+/     .text-info
+/       = show_breadcrumb(city_list, :city)
+/     span.mx-1  >  
+/     .text-info
+/       = show_breadcrumb(industry_list, :industry)
+/     span.mx-1  > 
+/     = @job.title
+/   hr.my-4
+/   / job details 
+/   .job-detail.my5 
+/     .job-apply.d-flex.align-items-center.justify-content-between
+/       h2.align-items-start
+/         = @job.title
+/       = link_to 'Apply for this job', apply_job_path(job_id: @job.id), class: 'btn btn-primary'
+/     p.text-secondary
+/       = @job.company.name
+/     .row.bg-light
+/       .col-4
+/         ul.list-unstyled
+/           li 
+/             strong.d-block
+/               | Location 
+/             p
+/               = show_location(city_list)
+/           li 
+/             strong 
+/               | Salary
+/             p.text-success
+/               = @job.salary          
+/       .col-4
+/         ul.list-unstyled
+/           li 
+/             strong
+/               | Type
+/             p 
+/               = @job.job_type
+/           li 
+/             strong 
+/               | Position
+/             p
+/               = @job.position
+/       .col-4
+/         ul.list-unstyled
+/           li
+/             strong
+/               | Experience
+/             p
+/               = @job.experience
+/           li 
+/             strong
+/               | Expiration date
+/             p 
+/               = @job.expiration_date.strftime('%d/%m/%Y')
+/     .job-benefits.my-4
+/       h3 
+/         | Benefits
+/       .row 
+/         - @job.benefit.split('---').each do |benefit|
+/           li.list-unstyled.col-4.text-secondary
+/             = benefit 
+/     .job-desc.my-4
+/       h3 
+/         | Description
+/       = @job.description.html_safe
+/     .job-req.my-4
+/       h3
+/         | Requirement
+/       = @job.requirement.html_safe
+/     .job-info.my-4
+/       h3
+/         | Other info
+/       - @job.other_info.split('---').each do |info|
+/         li.text-secondary
+/           = info 
+/     .job-apply.d-flex.align-items-center.justify-content-between      
+/       = link_to 'Apply for this job',  apply_job_path(job_id: @job.id), class: 'btn btn-primary'
+/       - if user_signed_in? && current_user.favorite?(@job)
+/         = render 'shared/unfavorite', job_id: @job.id
+/       - else
+/         = render 'shared/favorite', job_id: @job.id
--- a/app/views/layouts/_footer.html.slim
+++ b/app/views/layouts/_footer.html.slim
-footer.footer
+/ footer.footer
-  small
+/   small
-    |  The 
+/     |  The 
-    = link_to 'VenJob', root_path
+/     = link_to 'VenJob', root_path
-    |  by Mai Hoàng Thái Hà 
+/     |  by Mai Hoàng Thái Hà 
-  nav
+/   nav
-    ul
+/     ul
-      li
+/       li
-        = link_to 'About',       '#'
+/         = link_to 'About',       '#'
-      li
+/       li
-        = link_to 'Contact',     '#'
+/         = link_to 'Contact',     '#'
\ No newline at end of file
+.footer-top-section.section
+  .container
+    .footer-widget-wrap.row
+      .col-lg-3.col-sm-6.col-12
+        .footer-widget
+          .footer-widget-about
+            = link_to image_tag('logo.png', alt: 'Zigexn logo', width: '150'),
+            -                                             root_path
+            p
+              | Lorem ipsum dolor sit amet consecte tur adipisicing elit. Maiores officiis quod quo id inventore quis.
+            ul.footer-socail
+              li
+                a[href="#"]
+                  i.fa.fa-facebook
+              li
+                a[href="#"]
+                  i.fa.fa-twitter
+              li
+                a[href="#"]
+                  i.fa.fa-linkedin
+              li
+                a[href="#"]
+                  i.fa.fa-pinterest-p
+      .col-lg-3.col-sm-6.col-12
+        .footer-widget
+          h6.title
+            | Column 1
+          .footer-widget-link
+            ul
+              li
+                = link_to 'Item link', '#'
+              li
+                = link_to 'Item link', '#'
+              li
+                = link_to 'Item link', '#'
+              li
+                = link_to 'Item link', '#'
+              li
+                = link_to 'Item link', '#'
+      .col-lg-3.col-sm-6.col-12
+        .footer-widget
+          h6.title
+            | Column 2
+          .footer-widget-link
+            ul
+              li
+                = link_to 'Item link', '#'
+              li
+                = link_to 'Item link', '#'
+              li
+                = link_to 'Item link', '#'
+              li
+                = link_to 'Item link', '#'
+              li
+                = link_to 'Item link', '#'
+      .col-lg-3.col-sm-6.col-12
+        .footer-widget
+          h6.title
+            | Newsletter
+          .footer-widget-newsletter
+            p
+              | Lorem ipsum dolor sit amet consecte tur adipisicing elit. Maiores officiis quod quo id inventore quis.
+            form#mc-form.mc-form
+              input#mc-email[autocomplete="off" type="email" placeholder="Enter your e-mail address"]
+              button#mc-submit.btn
+                i.fa.fa-envelope-o
+            .mailchimp-alerts.text-centre
+              .mailchimp-submitting
+              .mailchimp-success.text-success
+              .mailchimp-error.text-danger
+.footer-bottom-section.section
+  .container
+    .row
+      .col-12
+        p.footer-copyright.text-center
+          | This is a sample website. Some functions won't work
--- a/app/views/layouts/_header.html.slim
+++ b/app/views/layouts/_header.html.slim
-header.navbar.navbar-fixed-top.navbar-inverse
+/ header.navbar.navbar-fixed-top.navbar-inverse
-  .container
+/   .container
-    = link_to image_tag('logo.png', alt: 'Zigexn logo', width: '150'),
+/     = link_to image_tag('logo.png', alt: 'Zigexn logo', width: '150'),
-    -                                             root_path
+/     -                                             root_path
-    nav
+/     nav
-      ul.nav.navbar-nav.navbar-right.text-light
+/       ul.nav.navbar-nav.navbar-right.text-light
-        - if user_signed_in?
+/         - if user_signed_in?
-          li
+/           li
-            = link_to "Apply jobs", apply_jobs_path
+/             = link_to "Apply jobs", apply_jobs_path
-          li
+/           li
-            = link_to "History", history_jobs_path
+/             = link_to "History", history_jobs_path
-          li
+/           li
-            = link_to "Favorite", favorite_jobs_path
+/             = link_to "Favorite", favorite_jobs_path
-          li
+/           li
-            = link_to "Profile", user_profile_path
+/             = link_to "Profile", user_profile_path
-          li
+/           li
-            = link_to "Log out", destroy_user_session_path, method: :delete
+/             = link_to "Log out", destroy_user_session_path, method: :delete
-        - elsif admin_signed_in?
+/         - elsif admin_signed_in?
-          li
+/           li
-            = link_to "Applies job", admin_applies_jobs_path
+/             = link_to "Applies job", admin_applies_jobs_path
-          li
+/           li
-            = link_to "Profile", '#'
+/             = link_to "Profile", '#'
-          li
+/           li
-            = link_to "Log out", destroy_admin_session_path, method: :delete
+/             = link_to "Log out", destroy_admin_session_path, method: :delete
-        - else
+/         - else
          li 
            = link_to "Admin", admin_login_path
          li
            = link_to "Log in", login_path
          li
            = link_to "Sign up", signup_path
\ No newline at end of file
+header.header
+  .container
+    .row.justify-content-between.align-items-center
+      .col
+        .header-logo
+          = link_to image_tag('logo.png', alt: 'Zigexn logo', width: '150'),
+          -                                             root_path
+      .col-auto.d-lg-none.d-flex.align-items-center
+        button.offcanvas-toggle
+          span
+      - unless user_signed_in? || admin_signed_in?
+        .header-links.col-auto.order-lg-3
+          = link_to "Log in", login_path
+          span or
+          = link_to "Sign up", signup_path
+          span |
+          = link_to "Admin", admin_login_path
+      nav#main-menu.main-menu.col-lg-auto.order-lg-2
+        ul
+          li.has-children
+            = link_to 'Home', root_path
+          li.has-children
+            = link_to 'All jobs', jobs_path
+          li.has-children
+            = link_to 'Industries', industries_path
+          li.has-children
+            = link_to 'Cities', cities_path
+          - if admin_signed_in?
+            li 
+              = link_to 'Admin', '#'
+              ul.sub-menu
+                li.has-children
+                  = link_to "Applies job", admin_applies_jobs_path
+                hr
+                li.has-children 
+                  = button_to "Sign out", destroy_admin_session_path, class: 'logout', method: :delete
+          - if user_signed_in?
+            li 
+              = link_to "Profile", user_profile_path
+              ul.sub-menu
+                li.has-children
+                  = link_to "Apply jobs", apply_jobs_path
+                li.has-children
+                  = link_to "History", history_jobs_path
+                li.has-children
+                  = link_to "Favorite", favorite_jobs_path
+                li.has-children
+                  = link_to "Profile", user_profile_path
+                hr
+                li.has-children
+                  = button_to "Log out", destroy_user_session_path, class: 'logout', method: :delete
+#offcanvas.offcanvas-section
+  button.offcanvas-close[data-target="#offcanvas"]
+    | ×
+  .offcanvas-wrap
+    .inner
+      - unless user_signed_in? || admin_signed_in?
+        .offcanvas-user
+            = link_to "Log in", login_path
+            span or
+            = link_to "Sign up", signup_path
+      .offcanvas-menu
+        nav
+          ul
+            li.has-children
+              = link_to 'Home', root_path
+            li
+              = link_to 'Jobs', jobs_path
+              ul.sub-menu
+                li
+                  = link_to 'Industries', industries_path
+                li
+                  = link_to 'Cities', cities_path
+            li
+              = link_to 'Contact', '#'
+            - if user_signed_in?
+              li
+                = link_to current_user.name, user_profile_path
+                ul.sub-menu
+                  li
+                    = link_to 'Edit account', edit_profile_path
+                  li
+                    = link_to 'Favorited', favorite_jobs_path
+                  li
+                    = link_to 'History', history_jobs_path
+                  li
+                    = link_to 'Applied', apply_jobs_path
+                  li
+                    = link_to "Log out", destroy_user_session_path, method: :delete
+.offcanvas-overlay  
--- a/app/views/layouts/application.html.slim
+++ b/app/views/layouts/application.html.slim
@@ -12,8 +12,13 @@ html
    = yield(:head) 
  body
    = render 'layouts/header'
-    .container-fluid style ="min-height:80vh;"
+    .flash
      - flash.each do |message_type, message|
-        div class=("text-center alert alert-#{message_type}") = message
+        div class=("m-0 text-center alert alert-#{message_type}") 
-      = yield
+          = message
-    = render 'layouts/footer'
+          .text-center 
\ No newline at end of file
+            a.btn-close close
+    = yield
+    = render 'layouts/footer'
+    = javascript_pack_tag 'main'
--- a/app/views/shared/_favorite.html.slim
+++ b/app/views/shared/_favorite.html.slim
 div id="favorite-#{job_id}"
-  = link_to favorite_jobs_path(job_id: job_id, format: :js),
+  = button_to favorite_jobs_path(job_id: job_id, format: :js),
    method: :post,
    remote: true,
-    class: 'btn btn-primary'
+    class: 'd-block btn btn-outline-secondary' do
-    | Favorite
+      i.fa.fa-heart-o.mr-1
+      |  Favorite
+  / = form_with(model: @favorite_job, url: favorite_jobs_path(job_id: job_id), id: "favorite-#{job_id}", remote: true) do |f|
+  /   = f.submit 'Favorite', class: 'd-block btn btn-outline-secondary'
--- a/app/views/shared/_jobs_list_index.html.slim
+++ b/app/views/shared/_jobs_list_index.html.slim
-.container.py-5
+.section.section-padding
-  .no-padding.d-flex.align-items-center.flex-column
+  .container
-    .page-info.p-2
+    .job-list-toolbar
-      = page_entries_info jobs
+      .page-info.p-2
-    .page-info.p-2
+        = page_entries_info jobs
-      = paginate jobs
+    .job-list-wrap
-.container
+      = form_with(url: apply_job_path, method: :get) do |f|
-  = form_with(url: apply_job_path, method: :get) do |f|
+        - jobs.each do |item|
-    - jobs.each do |item|
+          .row 
-      .row
+            .col-2.job-check.align-self-center
-        .col-1.job-check.align-self-center
+              = f.radio_button :job_id, item.job.id, class: 'btn-check', id: "option-#{item.job.id}"
-          = f.radio_button :job_id, item.job.id, class: 'btn-check', id: "option-#{item.job.id}"
+              = f.label 'Choose', class: 'btn btn-outline-primary', for: "option-#{item.job.id}"
-          = f.label 'Choose', class: 'btn btn-outline-primary', for: "option-#{item.job.id}"
+            .col-10
-        .job-item.col-10
+              = link_to item.job, class: 'job-list' do
-          .job-head
+                .company-logo.col-auto
-            = link_to item.job.title, item.job, class: 'job-title fs-3 text-decoration-none text-reset'
+                  = image_tag('company-logo', width: '120')
-          .job-caption
+                .salary-type.col-auto.order-sm-3
-            = link_to item.job.company.name, '#', class: 'job-company text-decoration-none text-secondary'
+                  span.salary-range
-            p.job-salary.text-success
+                    = item.job.salary
-              | Salary: #{item.job.salary}
+                  span.badge.badge-success
-            ul.list-unstyled
+                    = item.job.job_type
-              = show_location(item.job.cities)
+                .content.col 
-            .job-desc
+                  h6.title
-              = truncate(simple_format(item.job.description), escape: false, length: 250)
+                    = item.job.title
-        .job-fav.col-1
+                  ul.meta
-          - if user_signed_in? && current_user.favorite?(item.job)
+                    li 
-            = render 'shared/unfavorite', job_id: item.job.id
+                      strong.text-primary
-          - else
+                        = item.job.company.name 
-            = render 'shared/favorite', job_id: item.job.id
+                    li
-      hr.my-4
+                      i.fa.fa-map-marker
-    .d-flex.justify-content-center
+                      - city_list = item.job.cities
-      = f.submit 'Apply job', class: 'btn btn-primary w-50'
+                      = show_location(item.job.cities)
-  .no-padding.d-flex.align-items-center.flex-column
+        .d-flex.justify-content-center.my-5
-    .page-info.p-2
+          = f.submit 'Apply job', class: 'btn btn-primary w-50'
-      = page_entries_info jobs
+      ul.pagination.pagination-center.mt-5
-    .page-info.p-2
+        = paginate jobs
-      = paginate jobs
+/ .container.py-5
+/   .no-padding.d-flex.align-items-center.flex-column
+/     .page-info.p-2
+/       = page_entries_info jobs
+/     .page-info.p-2
+/       = paginate jobs
+/ .container
+/   = form_with(url: apply_job_path, method: :get) do |f|
+/     - jobs.each do |item|
+/       .row
+/         .col-1.job-check.align-self-center
+/           = f.radio_button :job_id, item.job.id, class: 'btn-check', id: "option-#{item.job.id}"
+/           = f.label 'Choose', class: 'btn btn-outline-primary', for: "option-#{item.job.id}"
+/         .job-item.col-10
+/           .job-head
+/             = link_to item.job.title, item.job, class: 'job-title fs-3 text-decoration-none text-reset'
+/           .job-caption
+/             = link_to item.job.company.name, '#', class: 'job-company text-decoration-none text-secondary'
+/             p.job-salary.text-success
+/               | Salary: #{item.job.salary}
+/             ul.list-unstyled
+/               = show_location(item.job.cities)
+/             .job-desc
+/               = truncate(simple_format(item.job.description), escape: false, length: 250)
+/         .job-fav.col-1
+/           - if user_signed_in? && current_user.favorite?(item.job)
+/             = render 'shared/unfavorite', job_id: item.job.id
+/           - else
+/             = render 'shared/favorite', job_id: item.job.id
+/       hr.my-4
+/     .d-flex.justify-content-center
+/       = f.submit 'Apply job', class: 'btn btn-primary w-50'
+/   .no-padding.d-flex.align-items-center.flex-column
+/     .page-info.p-2
+/       = page_entries_info jobs
+/     .page-info.p-2
+/       = paginate jobs
--- a/app/views/shared/_page_heading.html.slim
+++ b/app/views/shared/_page_heading.html.slim
+.page-heading-section.section.bg-parallax[data-bg-image="assets/banner-4.jpg" data-overlay="50"]
+  .container
+    .page-heading-content.text-center
+      h3.title
+        = title
+      ol.breadcrumb
+        li.breadcrumb-item
+          = link_to 'Home', root_path
+        li.breadcrumb-item.active
+          = link_to title, url: '#'
+        - if params[:city_slug] || params[:industry_slug]
+          li.breadcrumb-item.active
+            = name
\ No newline at end of file
--- a/app/views/shared/_search.html.slim
+++ b/app/views/shared/_search.html.slim
--- a/app/views/shared/_unfavorite.html.slim
+++ b/app/views/shared/_unfavorite.html.slim
--- a/app/views/top/_section_jobs.html.slim
+++ b/app/views/top/_section_jobs.html.slim
--- a/app/views/top/index.html.slim
+++ b/app/views/top/index.html.slim
--- a/app/views/users/confirmations/new.html.erb
+++ b/app/views/users/confirmations/new.html.erb
--- a/app/views/users/confirmations/new.html.slim
+++ b/app/views/users/confirmations/new.html.slim
--- a/app/views/users/passwords/new.html.slim
+++ b/app/views/users/passwords/new.html.slim
--- a/app/views/users/registrations/edit.html.slim
+++ b/app/views/users/registrations/edit.html.slim
--- a/app/views/users/registrations/new.html.slim
+++ b/app/views/users/registrations/new.html.slim
--- a/app/views/users/registrations/send_mail.html.slim
+++ b/app/views/users/registrations/send_mail.html.slim
--- a/app/views/users/sessions/new.html.slim
+++ b/app/views/users/sessions/new.html.slim
--- a/app/views/users/show.html.slim
+++ b/app/views/users/show.html.slim
--- a/config/environments/development.rb
+++ b/config/environments/development.rb
--- a/config/routes.rb
+++ b/config/routes.rb
--- a/db/migrate/20211129203346_add_views_count_to_jobs.rb
+++ b/db/migrate/20211129203346_add_views_count_to_jobs.rb
--- a/db/migrate/20211204210000_create_favorite_industries.rb
+++ b/db/migrate/20211204210000_create_favorite_industries.rb
--- a/db/schema.rb
+++ b/db/schema.rb
--- a/db/seeds.rb
+++ b/db/seeds.rb
--- a/lib/tasks/solr.rake
+++ b/lib/tasks/solr.rake
--- a/lib/tasks/web_crawler.rake
+++ b/lib/tasks/web_crawler.rake
--- a/package.json
+++ b/package.json
--- a/test/controllers/favorite_industries_controller_test.rb
+++ b/test/controllers/favorite_industries_controller_test.rb
--- a/test/fixtures/favorite_industries.yml
+++ b/test/fixtures/favorite_industries.yml
--- a/test/models/favorite_industry_test.rb
+++ b/test/models/favorite_industry_test.rb
--- a/yarn.lock
+++ b/yarn.lock