Merge pull request #30 from JuzerShakir/homepage

Homepage

README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <img src="public/images/project_logo.jpeg" />
-  <h2>Faizul Mawaid il Burhaniyah (FMB)</h2>
+  <h2>Faiz al-Mawaid al-Burhaniyah (FMB)</h2>
   <p>A Dawoodi Bohra NPO with one overarching objective: <strong>to provide at least one wholesome & nutritious meal a day to every community household.</strong></p>
 </div>
 
@@ -43,7 +43,7 @@ This application is hosted [here](https://fmb.fly.dev).
 **Password**
 
 ```
-123456
+12345678
 ```
 
 ---

app/assets/stylesheets/_components.scss

@@ -30,3 +30,7 @@ mark {
 	color: $success !important;
 	background-color: $lighter !important;
 }
+
+#contact ul {
+	margin-left: -3.5rem !important;
+}

app/assets/stylesheets/abstracts/_mixins.scss

@@ -0,0 +1,32 @@
+@mixin respond_to_height($breakpoint) {
+	// * iPad Air 1180px
+	@if $breakpoint == tab-medium {
+		@media only screen and (max-height: 73.75rem) {
+			@content;
+		}
+	}
+	// * iPad mini 1024px
+	@if $breakpoint == tab-small {
+		@media only screen and (max-height: 64rem) {
+			@content;
+		}
+	}
+	// * iPhone 14 Pro Max 932px
+	@if $breakpoint == phone-large {
+		@media only screen and (max-height: 58.25rem) {
+			@content;
+		}
+	}
+	// * Galaxy S8+ 740px
+	@if $breakpoint == phone-medium {
+		@media only screen and (max-height: 46.25rem) {
+			@content;
+		}
+	}
+	// * Galaxy Fold, Nest Hub 670px
+	@if $breakpoint == phone-small {
+		@media only screen and (max-height: 41.875rem) {
+			@content;
+		}
+	}
+}

app/assets/stylesheets/application.bootstrap.scss

@@ -4,6 +4,7 @@
 // ! IMPORTANT - load these files before any other css files
 @import "abstracts/themes";
 @import "abstracts/variables";
+@import "abstracts/mixins";
 @import "base/typography";
 
 // * load other sass files from here
@@ -18,5 +19,7 @@
 @import "layouts/index";
 @import "layouts/search";
 @import "layouts/show";
+// pages
+@import "pages/home";
 
 @import "components";

app/assets/stylesheets/base/_animations.scss

@@ -12,3 +12,9 @@
 		transform: translateX(-15rem);
 	}
 }
+
+@keyframes slide_bg {
+	to {
+		background-position: right center;
+	}
+}

app/assets/stylesheets/layouts/_show.scss

@@ -15,12 +15,11 @@
 }
 
 #thaali {
-	margin-top: 45px;
-
 	&__handle {
 		width: 5.5rem;
 		height: 9px;
 		margin: auto;
+		margin-top: 5rem !important;
 		top: -25px;
 		position: relative;
 

app/assets/stylesheets/pages/_home.scss

@@ -0,0 +1,122 @@
+#home {
+	background-image: linear-gradient(
+			rgba(255, 255, 255, 0.75),
+			rgba(255, 255, 255, 0.75)
+		),
+		url(banner.png);
+	width: 100%;
+	height: 100dvh;
+	background-size: cover;
+	background-position: center;
+	padding: 2.5rem 8rem;
+
+	&__body {
+		margin-top: 22rem;
+		letter-spacing: -0.05rem;
+
+		//  use max-height to position element with respect to device viewport height
+		@include respond_to_height(tab-medium) {
+			margin-top: 18rem;
+		}
+
+		@include respond_to_height(tab-small) {
+			margin-top: 14rem;
+		}
+
+		@include respond_to_height(phone-large) {
+			margin-top: 12rem;
+		}
+
+		@include respond_to_height(phone-medium) {
+			margin-top: 7rem;
+		}
+
+		@include respond_to_height(phone-small) {
+			margin-top: 5.5rem;
+		}
+
+		&_cta {
+			margin-top: 1.5rem;
+
+			@include respond_to_height(phone-large) {
+				margin-top: 1rem;
+			}
+
+			color: $teal-200;
+			background-image: linear-gradient(
+				to right,
+				$primary 0%,
+				$success 25%,
+				$secondary 50%,
+				$success 75%,
+				$primary 100%
+			);
+			transition: 1s;
+			animation: slide_bg 2s alternate infinite;
+			background-size: 200% auto;
+
+			&:hover {
+				color: $green-100;
+				box-shadow:
+					0 12px 16px 0 rgba(0, 0, 0, 0.24),
+					0 17px 50px 0 rgba(0, 0, 0, 0.19);
+				text-decoration: none;
+			}
+
+			&:active {
+				box-shadow: none;
+			}
+		}
+	}
+}
+
+// source for breakpoints: https://getbootstrap.com/docs/5.3/layout/breakpoints/#core-concepts
+// * 1399.98px (xxl)
+@include media-breakpoint-down(xxl) {
+	#home {
+		padding: 2.5rem 7rem;
+	}
+}
+
+// * 1199.98px (xl)
+@include media-breakpoint-down(xl) {
+	#home {
+		padding: 2.5rem 6rem;
+
+		&__header-logo {
+			width: 280px;
+			height: 120px;
+		}
+	}
+}
+
+// * 991.98px (lg)
+@include media-breakpoint-down(lg) {
+	#home {
+		padding: 2.2rem 5rem;
+
+		&__header-logo {
+			width: 250px;
+			height: 100px;
+		}
+	}
+}
+
+// * 767.98px (md)
+@include media-breakpoint-down(md) {
+	#home {
+		padding: 2rem 3rem;
+	}
+}
+
+// * 575.98px (sm)
+@include media-breakpoint-down(sm) {
+	#home {
+		padding: 1.5rem 2rem;
+
+		&__header-logo {
+			width: 230px;
+			height: 90px;
+		}
+	}
+}

app/controllers/pages_controller.rb

@@ -0,0 +1,6 @@
+class PagesController < ApplicationController
+  before_action :logged_in?
+
+  def home
+  end
+end

app/views/layouts/application.html.erb

@@ -12,12 +12,13 @@
   </head>
 
   <body onselectstart="return false">
-    <%= render "shared/navbar/navbar" %>
-    <br>
-    <%= render "shared/flash_messages" %>
+    <%= render "shared/navbar/navbar" if current_user.present? %>
+    <%= render "shared/flash_messages" if flash.present? %>
 
-    <div class="container mt-3">
+    <main class="<%= (action_name == "home") ? "" : "container mt-3" %>">
       <%= yield %>
-    </div>
+    </main>
+
+    <%= render "shared/footer" if current_user.blank? %>
   </body>
 </html>

app/views/pages/home.html.erb

@@ -0,0 +1,12 @@
+<div id="home">
+  <div id="home__header" class="text-center">
+    <%= image_tag("fmb-logo-full.png", width: "320", height: "130", alt: "FMB logo", id: "home__header-logo") %>
+  </div>
+
+  <div id="home__body">
+    <h5 id="home__body_primary-heading" class="heading text-start text-uppercase text-primary">Thaali tracking, simplified</h5>
+    <h2 id="home__body_secondary-heading" class="heading text-start text-secondary">Manage your thaalis & transactions effortlessly with real-time statistics</h2>
+
+    <%= link_to "Free demo", login_path, id: "home__body_cta", class: "btn rounded-pill border border-0 fs-5 px-4 py-2" %>
+  </div>
+</div>

app/views/sessions/new.html.erb

@@ -1,10 +1,7 @@
 <% content_for :title, "Login" %>
 
 <%# * Heading %>
-<h2 class="heading fs-1">Faizul Mawaid il Burhaniyah</h2>
+<h2 class="heading fs-1">Faiz al-Mawaid al-Burhaniyah</h2>
 
 <%# * Login Form %>
 <%= render "form" %>
-
-<%# * Footer %>
-<%= render "shared/footer" %>

app/views/shared/navbar/_contact.html.erb → app/views/shared/_contact.html.erb

@@ -1,11 +1,14 @@
-<li id="contact" class="nav-item dropdown">
-  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Connect</a>
+<span id="contact" class="nav-item dropdown">
+  <a class="link-info link-offset-2 link-underline-opacity-0 link-underline-opacity-75-hover"
+    href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+    Contact
+  </a>
 
   <ul class="dropdown-menu rounded-5 p-3">
-    <div class="hstack gap-3 justify-content-center">
+    <div class="hstack gap-3">
       <%= fa_btn_gen "", "mailto:[email protected]", "fa-regular fa-envelope" %>
       <%= fa_btn_gen "", "https://wa.me/919819393148", "fa-brands fa-whatsapp" %>
       <%= fa_btn_gen "", "https://t.me/juzershakir", "fa-brands fa-telegram" %>
     </div>
   </ul>
-</li>
+</span>

app/views/shared/_flash_messages.html.erb

@@ -1,7 +1,5 @@
-<% if flash.any? %>
-  <div id="flash" data-controller="autohide" class="z-2 position-fixed bg-primary fs-5 p-3 rounded-5">
-    <% flash.each do |name, msg| %>
-      <%= render_flash(name, msg) %>
-    <% end %>
-  </div>
-<% end %>
+<div id="flash" data-controller="autohide" class="z-2 position-fixed bg-primary rounded-5 fs-5 p-3 mt-4">
+  <% flash.each do |name, msg| %>
+    <%= render_flash(name, msg) %>
+  <% end %>
+</div>

app/views/shared/_footer.html.erb

@@ -1,4 +1,12 @@
-<footer id="footer" class="py-3 bg-primary text-center text-info fw-lighter fixed-bottom">
+<footer id="footer" class="fixed-bottom bg-primary text-center text-info fw-lighter py-3">
+  <div class="hstack gap-5 justify-content-center mb-2 fs-5">
+    <%= render "shared/contact" %>
+    <a href="https://www.thedawoodibohras.com/about-the-bohras/faiz-al-mawaid-al-burhaniyah/"
+      class="link-info link-offset-2 link-underline-opacity-0 link-underline-opacity-75-hover"
+      target="_blank">
+      About
+    </a></li>
+  </div>
   <small>
     <i class="fa-regular fa-copyright"></i>
     <%= Date.current.year %>

app/views/shared/navbar/_navbar.html.erb

@@ -1,4 +1,4 @@
-<div class="mb-5">
+<div class="mb-5 pb-4">
   <nav class="navbar navbar-expand-lg fixed-top heading bg-primary" data-bs-theme="dark">
 
     <div class="container container-fluid">
@@ -11,35 +11,26 @@
 
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav justify-content-center me-auto mb-2 mb-lg-0">
-          <% if current_user %>
-            <%# * Create Sabeel %>
-            <% if current_user.is? "admin" %>
-              <li class="nav-item">
-                <%= link_to "Create Sabeel", new_sabeel_path, id: "create-sabeel", class: "nav-link mt-3 mx-4 px-4 rounded-pill mt-lg-0 create-sabeel-btn" %>
-              </li>
-            <% end %>
+          <% if current_user.is? "admin" %>
+          <%# * Create Sabeel %>
+            <li class="nav-item">
+              <%= link_to "Create Sabeel", new_sabeel_path, id: "create-sabeel", class: "nav-link mt-3 mx-4 px-4 rounded-pill mt-lg-0 create-sabeel-btn" %>
+            </li>
+          <% end %>
 
-            <%# * Resources %>
-            <%= render "shared/navbar/resources_dropdown" %>
-            <%# * Statistics %>
-            <%= render "shared/navbar/statistics_dropdown" %>
-            <%# * User Dropdown %>
-            <% case current_user.role %>
-            <% when "admin" %>
+          <%# * Resources %>
+          <%= render "shared/navbar/resources_dropdown" %>
+          <%# * Statistics %>
+          <%= render "shared/navbar/statistics_dropdown" %>
+          <%# * User Dropdown %>
+          <% case current_user.role %>
+          <% when "admin" %>
             <%= render "shared/navbar/admin_dropdown" %>
-            <% when "member" %>
-              <%= render "shared/navbar/member_dropdown" %>
-            <% else %>
-              <li id="viewer">
-                <%= link_to "Log out", destroy_path, data: {turbo_method: :delete}, class: "nav-item nav-link text-danger fw-bold" %>
-              </li>
-            <% end %>
+          <% when "member" %>
+            <%= render "shared/navbar/member_dropdown" %>
           <% else %>
-            <%# * Contact %>
-            <%= render "shared/navbar/contact" %>
-            <%# * About %>
-            <li id="about">
-              <%= link_to "About", "https://www.thedawoodibohras.com/about-the-bohras/faiz-al-mawaid-al-burhaniyah/", target: :_blank, class: "nav-item nav-link", rel: :noopener %>
+            <li id="viewer">
+              <%= link_to "Log out", destroy_path, data: {turbo_method: :delete}, class: "nav-item nav-link text-danger fw-bold" %>
             </li>
           <% end %>
         </ul>

app/views/thaalis/_thaali.html.erb

@@ -1,5 +1,5 @@
 <div id="thaali" class="col-lg-2 col-md-3 col-sm-4 col-5 mx-auto">
-  <div id="thaali__handle" class="">&nbsp;</div>
+  <div id="thaali__handle">&nbsp;</div>
 
   <div id="thaali__container" class="border border-primary border-4 rounded-5 shadow text-center text-warning">
     <div class="row border-bottom border-2 border-secondary m-0 py-sm-3 py-2">

config/routes.rb

@@ -5,6 +5,8 @@
   root "thaalis#index"
 
   # * CUSTOM ROUTES
+  # pages
+  get "/home", to: "pages#home"
   # session
   get "/login", to: "sessions#new"
   post "/signup", to: "sessions#create"