Shop UI

src/app/fan-zone/fan-zone.page.scss

@@ -300,7 +300,7 @@
             font-size: 1rem;
             color: darken($blue-grey, 20%);
             font-weight: 500;
-            background-color: lighten($light-grey, 40%);
+            background-color: lighten($light-grey, 45%);
             width: 100%;
             border-radius: 30px;
             box-shadow: 2px 2px 5px $blue-grey;

src/app/shop/shop.page.html

@@ -5,9 +5,10 @@
     <section class="upfold">        
         <h5> Just for you </h5>
 
-        <h2> KXIP COLLECTIONS </h2>
+        <h2> KXIP MERCH </h2>
         <h4> Jersey </h4>
 
+        <img src="assets/home-team/KXIP-lion-white.svg" class="bg-image">
 
         <figure>
             <img src="https://static.iplt20.com/players/210/1125.png">
@@ -16,27 +17,31 @@
 
     <div class="container">
         <section class="segments">
-            <button> Fb. </button>
+            <button class="active"> Fb. </button>
             <button> Tw </button>
             <button> In. </button>
         </section>
 
-        <ul class="product-list">
-            <li *ngFor="let product of products">
-                <figure>
-                    <img [src]="product.image">                    
-                </figure>
-                <label> {{ product.name }} </label>
-                <p> &#8377; {{ product.price }} </p>
-            </li>
-        </ul>
-
-    </div>
-
-    <section class="categories">
-        <button> Men </button>
-        <button> Women </button>
-        <button> Kids </button>
-    </section>
+        <div class="product-container">
+            <h2> You may like </h2>
+            <ul class="product-list">
+                <li *ngFor="let product of products">
+                    <a [href]="product.link" target="_blank">
+                        <figure>
+                            <img [src]="product.image">                    
+                        </figure>
+                        <label> {{ product.name }} </label>
+                        <p> &#8377; {{ product.price }} </p>
+                    </a>
+                </li>
+            </ul>
+        </div>
+
+        <section class="categories">
+            <button class="active"> Men </button>
+            <button> Women </button>
+            <button> Kids </button>
+        </section>
+    </div> 
 
 </ion-content>

src/app/shop/shop.page.scss

@@ -22,12 +22,23 @@
 }
 
 .upfold {
-    height: 50vh;
+    height: 40vh;
     background-color: rgba($blue-grey, 0.1);
     padding: 20px 5%;
     color: $blue-grey;
     position: relative;
 
+    .bg-image {
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 50%;
+        height: 100%;
+        object-position: left;
+        object-fit: cover;
+        opacity: 0.1;
+    }
+
     p {
         margin: 0;
         font-size: 0.8rem;        
@@ -35,19 +46,19 @@
 
     h2 {
         margin: 30px 0px 5px 0px;
-        font-size: 1.5rem;
+        font-size: 1.8rem;
     }
 
     h4 {
         margin: 0px;
-        font-size: 1.1rem;
+        font-size: 1.2rem;
     }
 
     figure {
         position: absolute;
         right: 0;
-        bottom: 0;
-        width: 50%;
+        bottom: 34px;
+        width: 60%;
         display: block;
         height: 100%;
 
@@ -56,15 +67,156 @@
             width: 100%;
             height: 100%;
             object-fit: contain;
+            object-position: bottom;
         }
     }
 
 }
 
 .container {
-    height: calc(50vh - 50px);
+    height: 60vh;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    background-color: #f3f3f3;
+    position: relative;
+    overflow: visible; 
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.product-container {
+    width: 90%;
+    margin: 0 auto;
+    overflow: auto;
+
+    h2 {
+        font-size: 1.2rem;
+        color: $light-grey;
+        margin: 0;
+        position: sticky;
+        left: 0;
+    }
 }
 
-.catgories {
-    height: 50px;
+.segments {
+    position: absolute;
+    top: -35px;
+    right: 0;
+    height: 70px;
+    display: flex;
+    align-items: stretch;
+    background-color: $dark-blue;
+    box-shadow: 0px 0px 5px $dark-blue;
+    overflow: hidden;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+
+    button {
+        font-size: 1rem;        
+        border: 0px solid white;
+        width: 100px;
+        color: white;
+        background-color: transparent;
+        position: relative;
+
+        &.active {
+            color: $pink;
+            font-weight: 500;
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 45px;
+                bottom: 15px;
+                width: 5px;
+                height: 5px;
+                background-color: $pink;
+                border-radius: 50%;
+            }
+        }
+    }
+}
+
+.product-list {
+    white-space: nowrap;
+    overflow: auto;
+    display: inline-block;
+    list-style: none;
+    margin: 0;
+    padding: 30px 10px;
+
+    li {
+        display: inline-block;
+        width: 40vw;
+        box-shadow: 0px 5px 10px rgba($blue-grey, 0.5);
+        border-radius: 10px;
+        overflow: hidden;
+        margin-right: 30px;
+        background-color: white;
+
+        figure {
+            background-color: rgba($blue-grey, 0.1);
+            display: block;
+
+            img {
+                width: 100%;
+                height: 100%;
+                display: block;
+            }
+        }
+
+        label {
+            display: block;
+            color: $light-grey;
+            font-size: 1rem;
+            text-align: center;
+            margin: 10px 0;
+            padding: 0 20px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            width: 100%;
+            overflow: hidden;
+        }
+
+        p {
+            padding: 0 10px;
+            text-align: center;
+            margin: 10px 0;
+            font-size: 1rem;
+            font-weight: 500;
+            color: $dark-blue;
+        }
+    }
+}
+
+.categories {
+    height: 60px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    button {
+        color: $dark-blue;
+        border: none;
+        border-radius: 30px;
+        height: 40px;
+        background-color: transparent;
+        font-size: 0.8rem;
+        width: 100px;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &.active {
+            background-color: $green;
+            color: white;
+        }
+    }
 }

src/app/shop/shop.page.ts

@@ -10,7 +10,8 @@ export class ShopPage implements OnInit {
     products: Array<{
         name: string,
         price: number,
-        image: string
+        image: string,
+        link: string,
     }> = [];
 
     constructor(
@@ -26,19 +27,23 @@ export class ShopPage implements OnInit {
         this.products = [{
             name: 'KXIP Jersy',
             price: 300,
-            image: 'https://www.kxip.in/static-assets/images/product/player-replica-jersey-ed-2020-front.jpg'
+            image: 'https://www.kxip.in/static-assets/images/product/player-replica-jersey-ed-2020-front.jpg',
+            link: 'https://www.t10sports.com/index.php?route=product/product&path=196_214&product_id=1530',
         }, {
             name: 'KXIP Practice Jersey',
             price: 300,
-            image: 'https://www.kxip.in/static-assets/images/product/kxip-player-replica-practice-jersey-2020.jpg'
+            image: 'https://www.kxip.in/static-assets/images/product/kxip-player-replica-practice-jersey-2020.jpg',
+            link: 'https://www.t10sports.com/index.php?route=product/product&path=196_214&product_id=1530'
         }, {
             name: 'KXIP Track suit',
             price: 300,
-            image: 'https://www.kxip.in/static-assets/images/product/kxip-replica-active-tracksuit-ed-2020.jpg'
+            image: 'https://www.kxip.in/static-assets/images/product/kxip-replica-active-tracksuit-ed-2020.jpg',
+            link: 'https://www.t10sports.com/index.php?route=product/product&path=196_214&product_id=1530',
         }, {
             name: 'KXIP Track top',
             price: 300,
-            image: 'https://www.kxip.in/static-assets/images/product/KXIP-Replica-Active-Track-Top-Ed-2020.jpg'
+            image: 'https://www.kxip.in/static-assets/images/product/KXIP-Replica-Active-Track-Top-Ed-2020.jpg',
+            link: 'https://www.t10sports.com/index.php?route=product/product&path=196_214&product_id=1530'
         }];
 
     }