Copied Design UI colours

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

@@ -44,7 +44,7 @@
     overflow: hidden;
 
     h4 {
-        font-size: 1.2rem;
+        font-size: 1.5rem;
         margin: 0px;
         line-height: 1.5;
         font-weight: 500;
@@ -54,16 +54,16 @@
         color: white;
         bottom: 45px;
         left: 6%;
-        width: 88%;
+        width: 70%;
         animation: fadeInFromBottom 0.5s forwards;
     }
 
     button {
-        width: 40px;
-        height: 40px;
+        width: 60px;
+        height: 60px;
         position: absolute;
-        top: calc(50% - 20px);
-        left: calc(50% - 20px);
+        top: calc(50% - 60px);
+        left: calc(50% - 30px);
         display: flex;
         align-items: center;
         justify-content: center;

src/app/home/home.page.html

@@ -4,18 +4,18 @@
     </figure>
 
     <div class="heading-holder">
-        <h2 class="main-header"> Home </h2>
+        <h2 class="main-header"> # Discover </h2>
     
         <section class="segments">
             <button [ngClass]="{'active' : selectedTab === 'news'}"
-            (click)="selectedTab = 'news'"> News ({{ newsData.length }}) </button>
+            (click)="selectedTab = 'news'"> News </button>
             <button [ngClass]="{'active' : selectedTab === 'videos'}"
             (click)="selectedTab = 'videos'"> Videos </button>
         </section>
     </div>
 
-    <ion-slides  #slides [options]="slideOpts" *ngIf="selectedTab === 'news'" >
-
+    <ion-slides  #slides [options]="slideOpts" *ngIf="selectedTab === 'news'">
+        
         <ion-slide *ngFor="let news of newsData; let i = index" 
         [ngClass]="{'active' : selectedArticle === i}">
             <div class="image-holder">
@@ -59,54 +59,8 @@
                     <ion-icon name="chevron-forward-outline"></ion-icon> 
                 </button>
             </section>
-
         </ion-slide>
 
-        <ion-slide *ngFor="let news of newsData; let i = index" 
-        [ngClass]="{'active' : selectedArticle === i}">
-            <div class="image-holder">
-                <figure>
-                    <img [src]="news.image">
-                </figure>
-
-                <button *ngIf="news.type === 'VIDEO'">
-                    <ion-icon name="play"></ion-icon>
-                </button>
-
-                <button *ngIf="news.type === 'ARTICLE'">
-                    <ion-icon name="newspaper"></ion-icon>
-                </button>
-            </div>
-
-            <section class="content">
-                <h4> {{ news.heading }} </h4>
-
-                <div class="details">
-                    {{ news.description }}
-                </div>
-            </section>           
-
-            <section class="action-buttons">
-                <section class="shortcuts">
-                    <button class="wide-button" (click)="news.isLiked = !news.isLiked"
-                    [ngClass]="{'active' : news.isLiked}">
-                        <ion-icon *ngIf="!news.isLiked" name="heart-outline"></ion-icon>
-                        <ion-icon *ngIf="news.isLiked" name="heart"></ion-icon>
-                        <span> {{ news.isLiked ? news.likes + 1 : news.likes }} </span>
-                    </button>
-
-                    <button>
-                        <ion-icon name="share-social-outline"></ion-icon>
-                    </button>
-                </section>                
-
-                <button class="read-more" (click)="showNewsDetails(news);"> 
-                    <span> More </span>            
-                    <ion-icon name="chevron-forward-outline"></ion-icon> 
-                </button>
-            </section>
-
-        </ion-slide>
     </ion-slides>
 
 </ion-content>

src/app/home/home.page.scss

@@ -1,17 +1,16 @@
-ion-content {
-    --background: var(--brand-black);    
-}
+$dark-blue: #076a93;
+$dark-voilet: #8c6ee5;
 
 .heading-holder {
-    margin-bottom: 3rem;
+    margin-bottom: 2.7rem;
 }
 
 .main-header {
-    background: -webkit-linear-gradient(180deg, rgba(var(--brand-red-rgb), 0.6) 50%, rgba(var(--brand-red-rgb), 1));
+    background: -webkit-linear-gradient(180deg, $dark-blue 50%, $dark-voilet);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
-    font-size: 2.5rem;
+    font-size: 2.3rem;
     font-weight: 700;
     letter-spacing: 1px;
     padding: 0px 7%;
@@ -20,23 +19,24 @@ ion-content {
 
 .segments {
     display: flex;
-    align-items: stretch;
+    align-items: center;
     width: 100%;
     padding: 0px 7%;
     margin: 5% 0%;
 
     button {
         background-color: transparent;
-        color: white;
-        font-size: 1.2rem;
+        color: $dark-blue;
+        font-size: 1.1rem;
         font-weight: 400;
         margin-right: 5%;
         position: relative;
-        opacity: 0.5;
+        opacity: 0.8;
 
         &.active {
             font-weight: 500;
             opacity: 1;
+            color: var(--brand-black);
 
             &::before {
                 content: '';
@@ -54,22 +54,22 @@ ion-content {
 
 
 ion-slides {
-    height: calc(100vh - 40% - 16px);
     padding: 8px 0;
     position: relative;
     left: 0;
     top: 0;
     z-index: 1;
-    overflow: hidden;
+    overflow: visible;
+    height: calc(100vh - 40%);
 
     ion-slide {
         display: block;        
         overflow: hidden;
         border-radius: 7px;
         text-align: left;
-        align-self: start;
         height: 100%;
-        box-shadow: 2px 2px 5px black;
+        position: relative;
+        box-shadow: 0px 10px 25px -7px rgba(var(--light-grey-rgb), 0.5);
     }
 
     .image-holder {
@@ -218,14 +218,13 @@ ion-slides {
         .read-more {
             background-color: transparent;
             font-size: 0.9rem;
-            color: var(--brand-red);
+            color: $dark-blue;
             font-weight: 400;
 
             ion-icon {
-                color: var(--brand-black);
                 font-size: 1.2rem;
                 vertical-align: middle;
-                color: var(--brand-red);
+                color: $dark-blue;
             }
         }
     }

src/app/home/home.page.ts

@@ -32,10 +32,10 @@ export class HomePage implements OnInit {
     selectedArticle: number = null;    
 
     slideOpts = {
-        slidesPerView: 1.3,
+        slidesPerView: 1.5,
         spaceBetween: 30,
-        slidesOffsetBefore: 30,
-        slidesOffsetAfter: 30,
+        initialSlide: 1,
+        centeredSlides: true
     };
 
     newsData: Array<INews> = [];
@@ -83,6 +83,16 @@ export class HomePage implements OnInit {
             isBookmarked: false,
             likes: 308,
             comments: []
+        }, {
+            id: 3,
+            image: 'https://www.ak4tsay1.com/wp-content/uploads/2020/02/Kings-XI-Punjab-KXIP-Strengths-and-Weakness-for-IPL-2020-800x445.jpg',
+            heading: 'KL Rahul scores fastest 100',
+            description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis ullam. Explicabo accusantium quia tempore totam repellat amet debitis adipisci deserunt iste.`,
+            type: 'ARTICLE',
+            isLiked: false,
+            isBookmarked: false,
+            likes: 308,
+            comments: []
         }];                
     }