Removed chant page, Added explore card and collections

package-lock.json

@@ -17,7 +17,6 @@
         "@angular/platform-browser-dynamic": "^17.0.2",
         "@angular/router": "^17.0.2",
         "@ionic/angular": "^7.0.0",
-        "angular-svg-round-progressbar": "^12.0.0",
         "ionicons": "^7.0.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
@@ -4734,18 +4733,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/angular-svg-round-progressbar": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/angular-svg-round-progressbar/-/angular-svg-round-progressbar-12.0.0.tgz",
-      "integrity": "sha512-zf5TLC0goQZgirSp6g72SdN8Vz7a3VuKVqdSnIuAf0Q7Nx55crmlwLWIEYIxrKe5A1wea8fnOF8oFK5v8mCAsA==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "^17.0.0",
-        "@angular/core": "^17.0.0"
-      }
-    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -19855,14 +19842,6 @@
         "fast-deep-equal": "^3.1.3"
       }
     },
-    "angular-svg-round-progressbar": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/angular-svg-round-progressbar/-/angular-svg-round-progressbar-12.0.0.tgz",
-      "integrity": "sha512-zf5TLC0goQZgirSp6g72SdN8Vz7a3VuKVqdSnIuAf0Q7Nx55crmlwLWIEYIxrKe5A1wea8fnOF8oFK5v8mCAsA==",
-      "requires": {
-        "tslib": "^2.3.0"
-      }
-    },
     "ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",

package.json

@@ -22,7 +22,6 @@
     "@angular/platform-browser-dynamic": "^17.0.2",
     "@angular/router": "^17.0.2",
     "@ionic/angular": "^7.0.0",
-    "angular-svg-round-progressbar": "^12.0.0",
     "ionicons": "^7.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

src/app/app-routing.module.ts

@@ -14,11 +14,7 @@ const routes: Routes = [
   {
     path: 'story-details',
     loadChildren: () => import('./story-details/story-details.module').then( m => m.StoryDetailsPageModule)
-  },
-  {
-    path: 'chant-mantras',
-    loadChildren: () => import('./chant-mantras/chant-mantras.module').then( m => m.ChantMantrasPageModule)
-  },
+  }
 ];
 
 @NgModule({

src/app/chant-mantras/chant-mantras-routing.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { ChantMantrasPage } from './chant-mantras.page';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: ChantMantrasPage
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class ChantMantrasPageRoutingModule {}

src/app/chant-mantras/chant-mantras.module.ts

@@ -1,23 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { IonicModule } from '@ionic/angular';
-
-import { ChantMantrasPageRoutingModule } from './chant-mantras-routing.module';
-
-import { ChantMantrasPage } from './chant-mantras.page';
-
-import { RoundProgressModule } from 'angular-svg-round-progressbar';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    IonicModule,
-    ChantMantrasPageRoutingModule,
-    RoundProgressModule,
-  ],
-  declarations: [ChantMantrasPage],
-})
-export class ChantMantrasPageModule {}

src/app/chant-mantras/chant-mantras.page.html

@@ -1,20 +0,0 @@
-<ion-content [fullscreen]="true">
-  <section class="timer">
-    <round-progress
-    [current]="options.current"
-    [max]="options.max"
-    [color]="options.color"
-    [background]="options.background"
-    [stroke]="options.stroke"
-    [semicircle]="options.semicircle"
-    [rounded]="options.rounded"
-    [clockwise]="options.clockwise"
-    [responsive]="options.responsive"
-    [duration]="options.duration"
-    [animation]="options.animation"
-    [animationDelay]="options.animationDelay"/>
-    <div class="indicator">
-      {{ totalTime }}
-    </div>
-  </section>
-</ion-content>

src/app/chant-mantras/chant-mantras.page.scss

@@ -1,13 +0,0 @@
-.timer {
-  position: relative;
-
-  .indicator {
-    background: linear-gradient(90deg, var(--brand-orange-shade1), var(--brand-orange-shade2));
-    margin: 0 auto;
-    height: 30vh;
-    width: 30vh;
-    position: absolute;
-    border-top-left-radius: 50%;
-    border-top-right-radius: 50%;
-  }
-}

src/app/chant-mantras/chant-mantras.page.spec.ts

@@ -1,17 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ChantMantrasPage } from './chant-mantras.page';
-
-describe('ChantMantrasPage', () => {
-  let component: ChantMantrasPage;
-  let fixture: ComponentFixture<ChantMantrasPage>;
-
-  beforeEach(async(() => {
-    fixture = TestBed.createComponent(ChantMantrasPage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/chant-mantras/chant-mantras.page.ts

@@ -1,44 +0,0 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-
-@Component({
-  selector: 'app-chant-mantras',
-  templateUrl: './chant-mantras.page.html',
-  styleUrls: ['./chant-mantras.page.scss'],
-})
-export class ChantMantrasPage implements OnInit, OnDestroy {
-  options = {
-    current: 100,
-    max: 100,
-    color: '#fa9900',
-    background: '#fce09f',
-    stroke: 10,
-    semicircle: true,
-    rounded: true,
-    clockwise: true,
-    responsive: true,
-    duration: 1000,
-    animation: 'easeInOutQuart',
-    animationDelay: 0,
-  };
-
-  totalTime: number = 100000;
-  currentTime: number = 0;
-  timerInterval: any;
-
-  constructor() {}
-  ngOnDestroy() {
-    clearInterval(this.timerInterval);
-  }
-
-  ngOnInit() {
-    this.currentTime = this.totalTime;
-    this.timerInterval = setInterval(() => {
-      if (this.currentTime > 0) {
-        this.currentTime -= 1000;
-        this.options.current = this.currentTime * 100 / this.totalTime;
-      } else {
-        clearInterval(this.timerInterval);
-      }
-    }, 1000);
-  }
-}

src/app/home/home.page.html

@@ -5,7 +5,7 @@
       <h5>Om Namo Narayani</h5>
       <button class="notifications-button">
         <ion-icon src="assets/revised-assets/bell.svg"></ion-icon>
-        <ion-badge>11</ion-badge>
+        <ion-badge>9</ion-badge>
       </button>
     </header>
     <ul class="stories remove-scrollbar" (click)="showStoryDetails()">
@@ -63,25 +63,32 @@
       <ul class="horizontal-card-list remove-scrollbar">
         <li>
           <figure>
-            <img src="assets/sample-images/merch/idol.webp" alt="" />
+            <img src="assets/revised-assets/meditation.svg" />
           </figure>
+          <span> Thrive beyond fear </span>
         </li>
         <li>
           <figure>
-            <img src="assets/sample-images/merch/incense-1.jpeg" alt="" />
-          </figure>
-        </li>
-        <li>
-          <figure>
-            <img src="assets/sample-images/merch/incense-2.jpeg" alt="" />
-          </figure>
-        </li>
-        <li>
-          <figure>
-            <img src="assets/sample-images/merch/kunkum.webp" alt="" />
+            <img src="assets/revised-assets/chakras.svg" />
           </figure>
+          <span> Conquer addiction </span>
         </li>
       </ul>
     </section>
-  </section>
+
+    <section class="action-card alternative">
+      <div class="container">
+        <h5> Explore Temple </h5>
+        <p> Discover The Essence of a Journey of Spiritual Awakening. </p>
+        <button>
+          <ion-icon src="assets/revised-assets/play-filled.svg"></ion-icon>
+          Watch Live
+        </button>
+      </div>
+      <figure>
+        <img src="assets/sample-images/temple-image.png" alt="temple image">
+      </figure>
+    </section>
+    
+  </section>  
 </ion-content>

src/app/home/home.page.scss

@@ -16,7 +16,7 @@ h5 {
   border-bottom-right-radius: var(--card-radius);
   border-bottom-left-radius: var(--card-radius);
   height: 40rem;
-  margin-bottom: -17rem;
+  margin-bottom: -15rem;
   overflow: hidden;
 
   .pattern {
@@ -63,12 +63,11 @@ h5 {
 
   ion-badge {
     position: absolute;
-    right: 0;
-    top: 0;
+    right: -0.1rem;
+    top: -0.1rem;
     background-color: #79af2e;
     color: var(--brand-cream-light);
-    border-radius: 50%;
-    transform: translate(0.3rem, -0.3rem);
+    font-size: 1rem;
   }
 }
 
@@ -125,6 +124,7 @@ h5 {
 
   .container {
     align-self: center;
+    padding: var(--standard-vertical-spacing-between-sections) 0;
   }
 
   .icon {
@@ -160,10 +160,34 @@ h5 {
       font-size: 1.1rem;
     }
   }
+
+  &.alternative {
+    background-color: var(--brand-red);
+    grid-template-columns: 0.6fr 0.4fr;
+    
+    h5, p {
+      color: var(--brand-cream-light);
+    }
+
+    button {
+      border-color: var(--brand-cream-light);
+      background-color: var(--brand-cream-light);
+      color: var(--brand-red);
+
+      ion-icon {
+        font-size: 2rem;
+        margin-left: 0;
+      }
+    }
+
+    figure {
+      align-self: center;
+    }
+  }
 }
 
 .card-collections {
-  padding-top: 2rem;
+  padding-top: 4rem;
   header {
     align-items: center;    
     
@@ -186,57 +210,55 @@ h5 {
 
 .horizontal-card-list {
   list-style: none;
-  width: calc(100% + 2rem);
+  width: calc(100% + (2 * var(--page-padding-value)));
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
-  padding: var(--standard-vertical-spacing-between-sections);
   margin: var(--standard-vertical-spacing-between-sections) 0;
-  margin-left: -var(--standard-vertical-spacing-between-sections);
+  padding-left: var(--page-padding-value);
+  margin-left: calc(var(--page-padding-value) * -1);
+  $card-height: 22rem;
 
   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: var(--card-radius);
-    }
-
-    &::after {
-      content: '';
-      width: 100%;
-      height: 100%;
-      left: 0;
-      position: absolute;
-      top: 0rem;
-      background-color: var(--brand-red);
-      opacity: 0.2;
-      border-radius: var(--card-radius);
-      z-index: 1;
-    }
+    background: linear-gradient(180deg, #e0c086, #756445 50%);
+    padding: 2rem;
+    border-radius: var(--card-radius);
+    width: calc($card-height - 2rem);
+    height: $card-height;
+    overflow: hidden;
   }
 
   figure {
     position: relative;
     z-index: 0;
-    width: 15rem;
-    height: 20rem;
+    width: 100%;
+    height: 100%;
 
     img {
       border-radius: var(--card-radius);
       width: 100%;
       height: 100%;
-      object-fit: cover;
+      object-fit: contain;
       object-position: center;
     }
   }
+
+  span {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    display: block;
+    font-family: 'charter-bold';
+    text-align: center;
+    font-size: 1.6rem;
+    color: var(--brand-cream-light);
+    width: 100%;
+    padding: 2rem;
+    font-size: 1.4rem;
+    white-space: normal;
+  }
 }

src/app/story-details/story-details.page.scss

@@ -20,19 +20,19 @@ figure {
   height: 40vh;
   text-align: center;
   display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 h5 {
   font-weight: 700;
   font-size: 2rem;
   margin-bottom: var(--standard-vertical-spacing-between-sections);
+  color: var(--brand-red);
 }
 
 p {
   font-size: 1.8rem;
   font-style: italic;
+  color: var(--brand-brown);
 }
 
 .action-items {