Added global configurations, variables, home page with stories, action cards, chant card and collections

src/app/home/home.page.html

@@ -1,6 +1,30 @@
 <ion-content [fullscreen]="true">
   <h5> Namaskaram! </h5>
-  <ul>
+  <ul class="stories">
+    <li>
+      <img src="assets/sample-images/golden-temple-icon.webp" alt="golden-temple-icon">
+    </li>
+    <li>
+      <img src="assets/sample-images/lakshmi-idol-icon.webp" alt="golden-temple-icon">
+    </li>
+    <li>
+      <img src="assets/sample-images/narayani-peedam-icon.jpeg" alt="golden-temple-icon">
+    </li>
+    <li>
+      <img src="assets/sample-images/swarnalakshmi-icon.jpeg" alt="golden-temple-icon">
+    </li>
+    <li>
+      <img src="assets/sample-images/golden-temple-icon.webp" alt="golden-temple-icon">
+    </li>
+    <li>
+      <img src="assets/sample-images/lakshmi-idol-icon.webp" alt="golden-temple-icon">
+    </li>
+    <li>
+      <img src="assets/sample-images/narayani-peedam-icon.jpeg" alt="golden-temple-icon">
+    </li>
+    <li>
+      <img src="assets/sample-images/swarnalakshmi-icon.jpeg" alt="golden-temple-icon">
+    </li>
     <li>
       <img src="assets/sample-images/golden-temple-icon.webp" alt="golden-temple-icon">
     </li>
@@ -14,24 +38,26 @@
       <img src="assets/sample-images/swarnalakshmi-icon.jpeg" alt="golden-temple-icon">
     </li>
   </ul>
-  <section class="card grid">
+
+  <section class="card action-card">
     <div>
       <h5> Explore Temple </h5>
       <p> Discover The Essence of a Journey of Spiritual Awakening. </p>
       <button>
         <ion-icon name="play-circle-sharp"></ion-icon>
-        Explore
+        Watch Live
       </button>
     </div>
     <figure>
       <img src="assets/sample-images/temple-image.png" alt="temple image">
     </figure>
   </section>
-  <section class="card">
+  
+  <section class="card image-action-card">
     <figure>
       <img src="assets/sample-images/chanting.webp" alt="temple image">
     </figure>
-    <div>
+    <div class="action-items">
       <button>
         <ion-icon name="play-outline"></ion-icon>
         Start Today's Chant
@@ -39,12 +65,12 @@
     </div>    
   </section>
 
-  <section>
+  <section class="card-collections">
     <header>
       <h5> Trending Collections </h5>
-      <button> See All </button>
+      <a href="#"> See All </a>
     </header>
-    <ul>
+    <ul class="horizontal-card-list">
       <li>
         <figure>
           <img src="assets/sample-images/merch/idol.webp" alt="">

src/app/home/home.page.scss

@@ -0,0 +1,215 @@
+// light 300; semi-regular 400; regular 500; semi-bold 600; bold 700;
+
+$standard-vertical-spacing-between-sections: 1.5rem;
+$stories-height: 6rem;
+$card-radius: 1rem;
+
+@mixin removeScrollbar {
+  &::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+  }
+}
+
+ion-content {
+  --background: var(--brand-cream-shade1);
+}
+
+h5 {
+  font-weight: 600;
+  font-size: 1.6rem;
+  margin: 0 0 $standard-vertical-spacing-between-sections 0;
+}
+
+.stories {
+  list-style: none;
+  width: calc(100% + 2rem);
+  overflow-x: auto;
+  overflow-y: hidden;
+  height: $stories-height;
+  white-space: nowrap;
+  margin: $standard-vertical-spacing-between-sections 0;
+  @include removeScrollbar;
+
+  li {
+    display: inline-block;
+    margin: 0rem 0.5rem;
+    height: 100%;
+
+    img {
+      border: 0.2rem solid var(--brand-red);
+      width: $stories-height;
+      height: $stories-height;
+      border-radius: 50%;
+      overflow: hidden;
+      object-fit: cover;
+      display: block;
+      object-position: center;
+    }
+  }
+}
+
+.card {
+  border-radius: $card-radius;
+  overflow: hidden;
+  background-color: white;
+  margin: $standard-vertical-spacing-between-sections 0;
+
+  h5, p {
+    margin-bottom: 1rem;
+  }
+
+  p {
+    font-size: 1.2rem;    
+  }
+
+  button {    
+    padding: 0.7rem;
+    width: auto;
+    border-radius: 3rem;
+    font-size: 1.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;    
+
+    ion-icon {      
+      margin-right: 0.3rem;
+      font-size: 2.4rem;
+    }
+  }
+}
+
+.action-card {
+  padding: $standard-vertical-spacing-between-sections;
+  display: grid;
+  grid-template-columns: 0.6fr 0.4fr;
+  background-image: url('../../assets/sample-images/pattern.png');
+  background-repeat: repeat;
+  background-size: 70%;
+  box-shadow: 0px 0px 1rem var(--brand-orange-shade2);
+  align-items: center;
+
+  button {
+    color: white;
+    background-color: var(--brand-orange-shade1);
+  }
+
+  figure {
+    display: block;
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+}
+
+.image-action-card {
+  box-shadow: 0px 0px 1rem var(--brand-red);
+  background-color: var(--brand-red);
+
+  figure {
+    height: 20rem;
+    display: block;
+    
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: top;
+      border-radius: $card-radius;
+    }
+  }
+
+  .action-items {
+    padding: 0.5rem;
+  }
+
+  button {
+    margin: 0 auto;
+    background-color: var(--brand-red);
+    color: white;
+  }
+}
+
+header {
+  display: grid;
+  grid-template-columns: 0.7fr 0.3fr;
+}
+
+.card-collections {
+  header {
+    h5 {
+      margin: 0;
+    }
+    a {
+      text-align: right;
+      font-size: 1.2rem;
+      background-color: transparent;
+      color: var(--brand-orange-shade1);
+      font-weight: 600;
+    }
+  }
+}
+
+.horizontal-card-list {
+  list-style: none;
+  width: calc(100% + 2rem);
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  padding: $standard-vertical-spacing-between-sections;
+  margin: $standard-vertical-spacing-between-sections 0;
+  margin-left: -$standard-vertical-spacing-between-sections;
+  @include removeScrollbar;
+
+  li {
+    display: inline-block;
+    margin-right: 2rem;
+    position: relative;
+
+    &::before {
+      content: '';
+      width: 90%;
+      height: 100%;
+      left: 5%;
+      position: absolute;
+      top: -1rem;
+      background-color: var(--brand-red);
+      opacity: 0.1;
+      border-radius: $card-radius;
+    }
+
+    &::after {
+      content: '';
+      width: 100%;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0rem;
+      background-color: var(--brand-red);
+      opacity: 0.2;
+      border-radius: $card-radius;
+      z-index: 1;
+    }
+  }
+
+  figure {
+    position: relative;
+    z-index: 0;
+    width: 15rem;
+    height: 20rem;
+
+    img {
+      border-radius: $card-radius;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+}

src/global.scss

@@ -24,3 +24,37 @@
 @import "@ionic/angular/css/text-alignment.css";
 @import "@ionic/angular/css/text-transformation.css";
 @import "@ionic/angular/css/flex-utils.css";
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+figure,
+img,
+button,
+span,
+a {
+  font-family: 'Open Sans', sans-serif;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-weight: 500;
+  color: var(--brand-black);
+}
+
+ion-content {
+  --padding-top: 2rem;
+  --padding-start: 2rem;
+  --padding-end: 2rem;
+  --padding-bottom: 2rem;
+}
+
+:root {
+  font-size: 62.5%;
+}

src/index.html

@@ -1,26 +1,33 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Ionic App</title>
 
-<head>
-  <meta charset="utf-8" />
-  <title>Ionic App</title>
+    <base href="/" />
 
-  <base href="/" />
+    <meta name="color-scheme" content="light dark" />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
 
-  <meta name="color-scheme" content="light dark" />
-  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <meta name="format-detection" content="telephone=no" />
-  <meta name="msapplication-tap-highlight" content="no" />
+    <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
 
-  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
-
-  <!-- add to homescreen for ios -->
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-</head>
-
-<body>
-  <app-root></app-root>
-</body>
+    <!-- add to homescreen for ios -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
 
+  <body>
+    <app-root></app-root>
+  </body>
 </html>

src/theme/variables.scss

@@ -74,6 +74,14 @@
   --ion-color-light-contrast-rgb: 0, 0, 0;
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
+
+  // Custom Colors
+  --brand-black: #1F1F1F;
+  --brand-red: #9f1905;  
+  --brand-orange-shade1: #dc5b1c;
+  --brand-orange-shade2: #fa9900;
+  --brand-cream-shade1: #fde6c8;
+  --brand-cream-shade2: #fce09f;
 }
 
 // @media (prefers-color-scheme: dark) {