Add style to landing page

views/landingPage/landing.css

@@ -1,15 +1,109 @@
-*{margin:0;padding:0;}
-
-body{
-    font-family: 'Saira', sans-serif;
+#publicStrand{
+    display: flex;
+    flex-direction: column;
 }
 
+    .main-background{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-image: url("/shared/images/backgroundImg01.jpg");
+        background-repeat: no-repeat;
+        background-size: cover;
+        height: 88vh;
+        width: 100%;
+        color: rgb(0, 27, 45);
+    }
+
+        .public-buttons{
+            position: absolute;
+            right: 50px;
+            top: 80px;
+        }
+            
+            .public-buttons *{
+                margin: 10px;
+            }
+
+        .logo-text{
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            max-width: 50vw;
+            text-align: center;
+        }
+
+            .logo-text img{
+                max-height: 25vh;
+                margin-bottom: 50px;
+            }
+
+            .logo-text p{
+                font-weight: bold;
+                font-size: 25px;
+            }
+    
+    .more-info{
+        background: rgb(0, 27, 45);
+        color: rgb(201, 201, 201);
+        text-align: center;
+        padding: 75px;
+        border-top: 5px solid black;
+    }
+
+        .more-info h1{
+            color: rgb(255, 99, 107);
+            margin: 25px;
+            font-size: 45px;
+        }
+
+        .more-info p{
+            font-size: 25px;
+            color: rgb(201, 201, 201);
+            text-align: justify;
+            padding: 10px;
+        }
+
+        .more-info li{
+            font-size: 20px;
+            color: rgb(201, 201, 201);
+            text-align: justify;
+            padding: 10px;
+        }
+
+        .more-info span{
+            font-weight: bold;
+            color: rgb(255, 99, 107);
+        }
+
 #loginStrand{
     display: none;
+    align-items: center;
+    justify-content: center;
+    background-image: url("/shared/images/backgroundImg01.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 91.5vh;
 }
 
-/* Displaying the choice for the POS system */
-#posChoiceStrand{
+    #loginStrand form{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        border: 2px solid rgb(201, 201, 201);
+        background: rgb(240, 252, 255);
+        color: rgb(255, 99, 107);
+        padding: 25px;
+        border-radius: 10px;
+    }
+
+        #loginStrand form > *{
+            margin: 10px 0;
+        }
+
+/* #posChoiceStrand{
     display: none;
     flex-direction: column;
     align-items: center;
@@ -36,11 +130,11 @@ body{
         }
 
             .cards > *:hover{
-                box-shadow: 0 0 25px #ff626b;
+                box-shadow: 0 0 25px #ff636b;
             }
 
             .cards > *:active{
-                box-shadow: 0 0 10px #ff626b;
+                box-shadow: 0 0 10px #ff636b;
             }
 
             .cards p{
@@ -51,4 +145,4 @@ body{
 
         .cards img{
             margin: auto 10px;
-        }
+        } */

views/landingPage/landing.ejs

@@ -13,12 +13,46 @@
         <% include ../shared/banner %>
 
         <div id="publicStrand">
-            <button onclick="loginObj.display()">Login</button>
-            <a href="/merchant/new/clover">Register</a>
+            <div class="main-background">
+                <div class="public-buttons">
+                    <button class="button" onclick="loginObj.display()">Log In</button>
+
+                    <a class="button" href="/merchant/new/clover">Join</a>
+                </div>
+
+                <div class="logo-text">
+                    <img src="/shared/images/logoWithText.png" alt="Subline">
+
+                    <p>The only inventory-POS integration that reduces food, time, and waste costs through automation, machine learning, and data-driven analysis.</p>
+                </div>
+            </div>
+
+            <div class="more-info">
+                <h1>TIME IS MONEY</h1>
+
+                <p>For any restaurant owner familiar with this age-old adage (ie: everyone), the Subline integration creates an immediate impact by freeing up time to focus on their heighest priorities.  Yes, all good managers understand why it is important to control food and waste costs but staying on top of this task becomes burdensome and pushed aside with the volume of operational and customer issues faced every day.  It's the unfortunate side-effect of restaurant owners who lack ideal support and continually compete against razor thin margins.</p>
+
+                <div class="line-break"></div>
+
+                <h1>HOW IT WORKS</h1>
+
+                <p>LET THE SUBLINE HELP SAVE YOU TIME WITH:</p>
+
+                <ul>
+                    <li><span>Real Time Tracking</span> - Inventory is updated in real-time with resupply and customer purchases.  This eliminates the guess work for owners who want to know what is on their shelves.</li>
+                    <li><span>True Cost of Inventory</span> - The true cost of each item on owner's shelves are tracked against waste, returns, samples, etc.  This allows owners to determine the opportunity cost of inventory, and how it affects the bottom line.</li>
+                    <li><span>Recipe Integration</span> - The Subline integrates recipes into inventory management.  This gives owners the ability to conduct cost modeling and profit projections based on ingredient type, quantity, and source.</li>
+                    <li><span>Report Generation</span> - The Subline generates weekly, monthly, and annual reports that includes KPIs and trend analysis to help owners make decisions.  The Subline also generates weekly spot-check reports to ensure you never run out of a customer favorite during peak demand.</li>
+                    <li><span>Waste Audit Reporting</span> - The Subline generates daily audits for the owner.  Integrating daily auditing into routine kitchen operations means that responsible waste prevention will become part of the restaurant's culture and will have implications both socially and on the bottom line.</li>
+                    <li><span>Trend Identification</span> - Trends happen in cycles.  The Subline helps identify these trends, such as seasonal changes in menu demand, supply pricing, and local supply shortages, to give owners the information they need for inventory management.</li>
+                </ul>
+            </div>
         </div>
 
         <div id="loginStrand">
             <form action="/login" method="post">
+                <h3>Log In</h3>
+                
                 <label>Email:
                     <input name="email" type="email" required>
                 </label>

views/shared/banner.ejs

@@ -30,6 +30,7 @@
         },
 
         updateNotifications: function(){
+            let banner = document.querySelector(".banner");
             let ul = document.querySelector(".banner ul");
 
             while(ul.hasChildNodes()){

views/shared/shared.css

@@ -1,3 +1,26 @@
+*{
+    margin:0;
+    padding:0;
+    font-family:'Saira',sans-serif;
+}
+
+.button{
+    background: none;
+    border: 5px solid rgb(255, 99, 107);
+    text-decoration: none;
+    border-radius: 10px;
+    padding: 10px 5px;
+    color: #001b2d;
+    cursor: pointer;
+    font-size: 25px;
+    box-shadow: 2px 2px 2px black;
+}
+
+.line-break{
+    border: 1px solid rgb(255, 99, 107);
+    margin: 30px 0;
+}
+
 .header{
     display: flex;
     justify-content: space-between;
@@ -22,13 +45,13 @@
 
     .header h1{
         display: inline-block;
-        color: #ff626b;
+        color: rgb(255, 99, 107);
     }
 
     .header .logout{
         display: flex;
         align-items: center;
-        color: #ff626b;
+        color: rgb(255, 99, 107);
         float: right;
         margin-right: 25px;
         text-decoration: none;
@@ -37,7 +60,6 @@
 .banner{
     width: 100%;
     text-align: center;
-    min-height: 50px;
 }
 
     .banner .notification{