Some styling

aziflaj · Aug 28, 2019 · 3f4a9c8 · 3f4a9c8
1 parent 83c98fb
commit 3f4a9c8
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 5 deletions.
diff --git a/Gemfile b/Gemfile
@@ -21,11 +21,11 @@ group :development, :test do
 end
 
 group :development do
-  gem 'web-console', '>= 3.3.0'
   gem 'listen', '>= 3.0.5', '< 3.2'
+  gem 'rubocop-rails', '~> 2.3', '>= 2.3.1'
   gem 'spring'
   gem 'spring-watcher-listen', '~> 2.0.0'
-  gem 'rubocop-rails', '~> 2.3', '>= 2.3.1'
+  gem 'web-console', '>= 3.3.0'
 end
 
 group :test do

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,2 +1,9 @@
-@import "materialize";
+$blue: #4AA3FF;
+$darker-blue: #226AB3;
+$redish: #FF6D63;
+$greenish: #BBCC27;
+$darker-greenish: #A4B32B;
 
+$primary-color: $blue !default;
+$secondary-color: $darker-blue !default;
+@import "materialize";
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -10,9 +10,11 @@
 </head>
 
 <body>
+<%= render 'shared/header' %>
 <p class="notice"><%= notice %></p>
 <p class="alert"><%= alert %></p>
 <%= yield %>
+<%= render 'shared/footer' %>
 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
 </body>
 </html>
diff --git a/app/views/pages/hello.html.erb b/app/views/pages/hello.html.erb
@@ -1,2 +1,55 @@
-<h1>Pages#hello</h1>
-<p>Find me in app/views/pages/hello.html.erb</p>
+<div class="section no-pad-bot" id="index-banner">
+  <div class="container">
+    <br><br>
+    <h1 class="header center orange-text">Skeduler</h1>
+    <div class="row center">
+      <h5 class="header col s12 light">The best way to schedule your appointments</h5>
+    </div>
+    <div class="row center">
+      <%= link_to 'Get Started', new_user_session_path, class: 'btn-large waves-effect waves-light orange' %>
+    </div>
+  </div>
+</div>
+
+
+<div class="container">
+  <div class="section">
+
+    <!--   Icon Section   -->
+    <div class="row">
+      <div class="col s12 m4">
+        <div class="icon-block">
+          <h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2>
+          <h5 class="center">A Good Feature</h5>
+          <p class="light">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto deserunt dicta dolores enim eum, fugit ipsa iste itaque minus molestiae, natus, optio perferendis provident quod similique veniam veritatis. Perspiciatis, quidem.
+          </p>
+        </div>
+      </div>
+
+      <div class="col s12 m4">
+        <div class="icon-block">
+          <h2 class="center light-blue-text"><i class="material-icons">group</i></h2>
+          <h5 class="center">Another Good Feature</h5>
+
+          <p class="light">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cupiditate et iusto quo ullam. Atque eum explicabo, inventore iusto, laborum modi nam omnis quisquam quo quos repellat repellendus tenetur vero.
+          </p>
+        </div>
+      </div>
+
+      <div class="col s12 m4">
+        <div class="icon-block">
+          <h2 class="center light-blue-text"><i class="material-icons">settings</i></h2>
+          <h5 class="center">The Most Awesome Feature</h5>
+
+          <p class="light">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam delectus deleniti dolorum, earum facilis fugiat laborum magni molestiae numquam obcaecati possimus, quis quo ratione rerum sapiente suscipit tenetur vel voluptatem!
+          </p>
+        </div>
+      </div>
+    </div>
+
+  </div>
+  <br><br>
+</div>
diff --git a/app/views/shared/_footer.html.erb b/app/views/shared/_footer.html.erb
@@ -0,0 +1,25 @@
+<footer class="page-footer">
+  <div class="container">
+    <div class="row">
+      <div class="col l6 s12">
+        <h5 class="white-text">Skeduler</h5>
+        <p class="grey-text text-lighten-4">Let us help you connect with others, so you can focus on what matters.</p>
+      </div>
+      <div class="col l4 offset-l2 s12">
+        <h5 class="white-text">Links</h5>
+        <ul>
+          <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
+          <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
+          <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
+          <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="footer-copyright">
+    <div class="container">
+      &copy; <%= Time.zone.now.strftime('%Y') %> Skeduler
+      <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
+    </div>
+  </div>
+</footer>
diff --git a/app/views/shared/_header.html.erb b/app/views/shared/_header.html.erb
@@ -0,0 +1,17 @@
+<nav>
+  <div class="nav-wrapper">
+    <div class="container">
+      <%= link_to 'Skeduler', root_path, class: 'brand-logo' %>
+      <ul id="nav-mobile" class="right">
+        <% if user_signed_in? %>
+          <li><%= link_to 'Profile', '#' %></li>
+          <li><%= link_to 'Settings', '#' %></li>
+          <li><%= link_to 'Log Out', destroy_user_session_path, method: :delete %></li>
+        <% else %>
+          <li><%= link_to 'Log In', new_user_session_path %></li>
+          <li><%= link_to 'Sign Up', new_user_registration_path %></li>
+        <% end %>
+      </ul>
+    </div>
+  </div>
+</nav>