From a3854b80cfb4351bbd1fa74f8c88011baddd2925 Mon Sep 17 00:00:00 2001
From: "CHIEFSOFT\\ameye" <ameye@chiefsfot.com>
Date: Sat, 9 Nov 2024 11:41:12 -0500
Subject: [PATCH] new layout

---
 src/app/pages/slider/slider.page.html |  77 +++++++++-------
 src/app/pages/slider/slider.page.scss | 123 ++++++++++++++++++++++----
 2 files changed, 150 insertions(+), 50 deletions(-)

diff --git a/src/app/pages/slider/slider.page.html b/src/app/pages/slider/slider.page.html
index 6c69541..8e1773e 100644
--- a/src/app/pages/slider/slider.page.html
+++ b/src/app/pages/slider/slider.page.html
@@ -1,37 +1,48 @@
-<ion-content class="ion-padding no-scroll">
-  <div class="main-content">
-    <ion-slides pager="ios">
-
-      <ion-slide>
-        <div class="slide_div">
-          <div class="slide_img" [style.backgroundImage]="'url(assets/images/start_slider_2.jpg)'">
-          </div>
-          <ion-label class="head_lbl">Set Goals and Reward.</ion-label>
-          <ion-label class="text sl1">Earn without stress! Browse, Complete, and get Paid</ion-label>
-        </div>
-      </ion-slide>
-      <ion-slide>
-        <div class="slide_div">
-          <div class="slide_img" [style.backgroundImage]="'url(assets/images/start_slider_1.jpg)'">
-          </div>
-          <ion-label class="head_lbl">Plan Rewards.</ion-label>
-          <ion-label class="text sl1"> WrenchBoard is the platform to set goals and rewards or any other tasks. </ion-label>
-        </div>
-      </ion-slide>
-      <ion-slide>
-        <div class="slide_div">
-          <div class="slide_img" [style.backgroundImage]="'url(assets/images/start_slider_3.jpg)'">
-          </div>
-          <ion-label class="head_lbl">Let's Start.</ion-label>
-          <ion-label class="text sl1">Everything is ready to start rewarding goals.</ion-label>
-        </div>
-      </ion-slide>
-    </ion-slides>
-    <div class="footer">
-      <ion-button (click)="onRegister()" expand="block" shape="round">
-        Get Started
-      </ion-button>
+<ion-content class="no-scroll" style="margin: 0 !important; padding: 0">
+  <div class="main-content" style="display: block; margin: 0; padding: 0; ">
+    <div class="box_container">
+      <div class="box">
+        <ion-slides pager="ios" style="height: 100%;">
+          <ion-slide class="slide_image"
+                     [style.backgroundImage]="'url(assets/images/start_slider_2.jpg)'"
+                     [style.background-size]="'cover'"
+                     [style.background-position]="'center'"
+          >
+            <div class="slide_div">
+              <ion-label class="head_lbl">Set Goals and Reward.</ion-label>
+              <ion-label class="text sl1">Earn without stress! Browse, Complete, and get Paid</ion-label>
+            </div>
+          </ion-slide>
+          <ion-slide class="slide_image"
+                     [style.backgroundImage]="'url(assets/images/start_slider_1.jpg)'"
+                     [style.background-size]="'cover'"
+                     [style.background-position]="'center'"
+          >
+            <div class="slide_div">
+              <ion-label class="head_lbl">Plan Rewards.</ion-label>
+              <ion-label class="text sl1"> WrenchBoard is the platform to set goals and rewards or any other tasks. </ion-label>
+            </div>
+          </ion-slide>
+          <ion-slide class="slide_image"
+                     [style.backgroundImage]="'url(assets/images/start_slider_3.jpg)'"
+                     [style.background-size]="'cover'"
+                     [style.background-position]="'center'"
+          >
+            <div class="slide_div">
+              <ion-label class="head_lbl">Let's Start.</ion-label>
+              <ion-label class="text sl1">Everything is ready to start rewarding goals.</ion-label>
+            </div>
+          </ion-slide>
+        </ion-slides>
+      </div>
+      <div class="stack-top">
+        <div class="action_box">
+          <ion-button (click)="onRegister()" expand="block" shape="round">
+            Get Started
+          </ion-button>
+        </div>
 
+      </div>
     </div>
   </div>
 </ion-content>
diff --git a/src/app/pages/slider/slider.page.scss b/src/app/pages/slider/slider.page.scss
index 6c3356e..e9b1834 100644
--- a/src/app/pages/slider/slider.page.scss
+++ b/src/app/pages/slider/slider.page.scss
@@ -1,32 +1,121 @@
-.main-content {
+.box_container{
   width: 100%;
-  height: 95vh;
+  height: 100%;
+  position: relative;
+  margin: 0;
+}
+.box{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  //top: 0;
+  //left: 0;
+  opacity: 0.8;  /* for demo purpose  */
+}
+.stack-top{
+  z-index: 9;
+  width: 100%;
+  height: 250px;
+  padding: 20px;
+ // border-radius: 20px;
+  position: absolute;
+  bottom: 0;
+  //margin: 10px; /* for demo purpose  */
+.action_box{
+  //z-index: 7;
+  background-color: red;
+  max-width: 400px;
+  margin: 10px auto 10px auto;
+  border-radius: 20px;
+}
+  .slide_image{
+    ///height: 100%;
+    //width: auto;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    .b1{
+      background-image: url("../../../assets/images/start_slider_2.jpg");
+    }
+  }
+  .slide_div {
+    //width: 100%;
+    ////height: 80vh;
+    ////height: 100%;
+    //display: flex;
+    //flex-direction: column;
+    //justify-content: end;
+    //align-items: center;
+    //padding-bottom: 90px !important;
+    ////padding: 0 20px 0 20px;
+    //overflow: hidden;
+    //position: relative;
+
+    //.slide_img {
+    //  position: absolute;
+    //  top: 0px;
+    //  height: 50vh;
+    //  width: 90%;
+    //  background-position: center center !important;
+    //  background-size: cover !important;
+    //  background-repeat: no-repeat !important;
+    //  display: flex;
+    //  justify-content: center;
+    //  border-radius: 10px 10px 10px 10px;
+    //  box-shadow: inset 0 0 15px 25px white;
+    //}
+
+    .head_lbl {
+      font-size: 26px;
+      display: block;
+      font-family: "bold";
+      padding-bottom: 16px;
+    }
+
+    .text {
+      //font-size: 14px;
+      display: block;
+      // color: var(--ion-color-medium);
+    }
+  }
+  .sl1{
+    color: #5086ba;
+    font-weight: bolder;
+    font-size: 16px;
+  }
+}
+
+.main-content {
+
+
+  width: 100%;
+  height: 100%;
 
   .slide_div {
     width: 100%;
-    height: 80vh;
+    height:30vh;
     display: flex;
     flex-direction: column;
     justify-content: end;
     align-items: center;
-    padding-bottom: 90px !important;
+    //padding-bottom: 90px !important;
     padding: 20px;
     overflow: hidden;
     position: relative;
 
-    .slide_img {
-      position: absolute;
-      top: 0px;
-      height: 50vh;
-      width: 90%;
-      background-position: center center !important;
-      background-size: cover !important;
-      background-repeat: no-repeat !important;
-      display: flex;
-      justify-content: center;
-      border-radius: 10px 10px 10px 10px;
-      box-shadow: inset 0 0 15px 25px white;
-    }
+    //.slide_img {
+    //  position: absolute;
+    //  top: 0px;
+    //  height: 50vh;
+    //  width: 90%;
+    //  background-position: center center !important;
+    //  background-size: cover !important;
+    //  background-repeat: no-repeat !important;
+    //  display: flex;
+    //  justify-content: center;
+    //  border-radius: 10px 10px 10px 10px;
+    //  box-shadow: inset 0 0 15px 25px white;
+    //}
 
     .head_lbl {
       font-size: 26px;