Merge pull request #28 from rtCamp/feature/adding-grid-layout

Adding grid layout to the home page

public/assets/styles/style.css

@@ -623,6 +623,10 @@ video {
   margin-left: 1rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -651,6 +655,10 @@ video {
   display: grid;
 }
 
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
+
 .h-14 {
   height: 3.5rem;
 }
@@ -701,8 +709,8 @@ video {
           appearance: none;
 }
 
-.grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .flex-col {
@@ -725,6 +733,10 @@ video {
   gap: 1rem;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -765,6 +777,10 @@ video {
   border-radius: 0.5rem;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -862,6 +878,11 @@ video {
   line-height: 2.25rem;
 }
 
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -895,6 +916,11 @@ video {
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
@@ -938,6 +964,11 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.drop-shadow-\[8px_8px_0_rgba\(32\2c 33\2c 37\2c \.1\)\] {
+  --tw-drop-shadow: drop-shadow(8px 8px 0 rgba(32,33,37,.1));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

src/common/index.ejs

@@ -1,24 +1,22 @@
 <%- include(commonPath + '/header.ejs') %>
 
-<% const scenarioButton = (title, link) => { %>
+<% const renderCard = (title, emoji, link) => { %>
     <a href="<%= link %>"
-        class="block p-4 bg-white shadow rounded hover:bg-blue-500 hover:text-white transition duration-300">
+        class="flex flex-col border border-blue justify-center items-center font-bold p-4 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-md hover:bg-blue-500 hover:text-white aspect-square transition duration-300 text-center">
+        <span class="block text-5xl mb-4"><%= emoji %></span>
         <%= title %>
     </a>
 <% } %>
 
 <div class="container-lg mx-auto py-8">
-    <section class="text-center mb-4">
-        <h2 class="text-3xl font-bold mb-4 text-center">Scenarios</h2>
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
-            <%= scenarioButton('🔎 Analytics Tracking', '/analytics') %>
-            <%= scenarioButton('📽️ Embedded Content', '/embedded-video') %>
-            <%= scenarioButton('🛒 E-Commerce', '/ecommerce') %>
-            <%= scenarioButton('🔐 Single Sign-On', '/single-sign-on') %>
-            <%= scenarioButton('💳 Payment Gateway', '/payment-gateway') %>
-            <%= scenarioButton('🍪 CHIPS', '/chips') %>
-        </div>
-    </section>
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8 mt-8">
+        <%= renderCard('Analytics Tracking', '🔎', '/analytics') %>
+        <%= renderCard('Embedded Content', '📽️', '/embedded-video') %>
+        <%= renderCard('E-Commerce', '🛒', '/ecommerce') %>
+        <%= renderCard('Single Sign-On', '🔐', '/single-sign-on') %>
+        <%= renderCard('Payment Gateway', '💳', '/payment-gateway') %>
+        <%= renderCard('CHIPS', '🍪', '/chips') %>
+    </div>
 </div>
 
 <%- include(commonPath + '/footer.ejs') %>