Shop UI Partial commit

src/app/shop/shop.page.html

@@ -1,3 +1,39 @@
 <ion-content>
+    <section class="upfold">        
+        <h5> Just for you </h5>
+
+        <h2> KXIP COLLECTIONS </h2>
+        <h4> Jersey </h4>
+
+
+        <figure>
+            <img src="https://static.iplt20.com/players/210/1125.png">
+        </figure>
+    </section>
+
+    <div class="container">
+        <section class="segments">
+            <button> 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>
 
 </ion-content>

src/app/shop/shop.page.scss

@@ -0,0 +1,49 @@
+@import '../colors';
+
+.upfold {
+    height: 50vh;
+    background-color: rgba($blue-grey, 0.1);
+    padding: 20px 5%;
+    color: $blue-grey;
+    position: relative;
+
+    p {
+        margin: 0;
+        font-size: 0.8rem;        
+    }
+
+    h2 {
+        margin: 30px 0px 5px 0px;
+        font-size: 1.5rem;
+    }
+
+    h4 {
+        margin: 0px;
+        font-size: 1.1rem;
+    }
+
+    figure {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 50%;
+        display: block;
+        height: 100%;
+
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+    }
+
+}
+
+.container {
+    height: calc(50vh - 50px);
+}
+
+.catgories {
+    height: 50px;
+}

src/app/shop/shop.page.ts

@@ -1,15 +1,39 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-shop',
-  templateUrl: './shop.page.html',
-  styleUrls: ['./shop.page.scss'],
+    selector: 'app-shop',
+    templateUrl: './shop.page.html',
+    styleUrls: ['./shop.page.scss'],
 })
 export class ShopPage implements OnInit {
+    products: Array<{
+        name: string,
+        price: number,
+        image: string
+    }> = [];
 
-  constructor() { }
+    constructor() { }
 
-  ngOnInit() {
-  }
+    ngOnInit() {
+
+        this.products = [{
+            name: 'KXIP Jersy',
+            price: 300,
+            image: 'https://www.kxip.in/static-assets/images/product/player-replica-jersey-ed-2020-front.jpg'
+        }, {
+            name: 'KXIP Practice Jersey',
+            price: 300,
+            image: 'https://www.kxip.in/static-assets/images/product/kxip-player-replica-practice-jersey-2020.jpg'
+        }, {
+            name: 'KXIP Track suit',
+            price: 300,
+            image: 'https://www.kxip.in/static-assets/images/product/kxip-replica-active-tracksuit-ed-2020.jpg'
+        }, {
+            name: 'KXIP Track top',
+            price: 300,
+            image: 'https://www.kxip.in/static-assets/images/product/KXIP-Replica-Active-Track-Top-Ed-2020.jpg'
+        }];
+
+    }
 
 }