landing page edit

2024-11-19 17:01:33 +02:00 · 2024-11-19 17:01:33 +02:00 · 3f7e5722d5
commit 3f7e5722d5
parent 68875d6384
14 changed files with 580 additions and 3 deletions
--- a/public/assets/css/Simple-Slider-Simple-Slider.css
+++ b/public/assets/css/Simple-Slider-Simple-Slider.css
@ -0,0 +1,25 @@
+.simple-slider .swiper-slide {
+  height: 500px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+.simple-slider .swiper-button-next, .simple-slider .swiper-button-prev {
+  /*width: 50px;*/
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+@media (max-width:767px) {
+  .simple-slider .swiper-button-next, .simple-slider .swiper-button-prev {
+    /*display: none;*/
+  }
+}
+
+@media (max-width:767px) {
+  .simple-slider .swiper-slide {
+    height: 360px;
+  }
+}
+
--- a/public/assets/css/footer.css
+++ b/public/assets/css/footer.css
@ -4,7 +4,7 @@
  flex-direction: column;
  align-items: center;
  background: white;
-  box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
+  box-shadow: 0 0 8px 0 rgba(0,0,0,0.05);
  border-top: solid 1px rgba(0,0,0,0.1);
 }

--- a/public/assets/css/landing.css
+++ b/public/assets/css/landing.css
@ -0,0 +1,388 @@
+.secMain.secMainHero {
+  background: rgba(0,0,0,0.05);
+  border-bottom: solid 1px rgba(0,0,0,0.1);
+  margin-top: -2px;
+}
+
+.simple-slider.heroSlider {
+  width: 100%;
+  /*height: auto;*/
+  /*width: auto;*/
+  /*min-width: auto;*/
+  /*min-height: auto;*/
+}
+
+.swiper-container.heroSliderInside {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+}
+
+.swiper-wrapper.heroSliderInsideWrapper {
+  width: 100%;
+}
+
+.swiper-slide.heroSliderInsideWrapperSlide {
+  height: 450px!important;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 25px;
+  justify-content: center;
+  align-items: center;
+}
+
+@media (max-width: 992px) {
+  .swiper-slide.heroSliderInsideWrapperSlide {
+    height: 600px!important;
+  }
+}
+
+@media (max-width: 576px) {
+  .swiper-slide.heroSliderInsideWrapperSlide {
+    height: 400px!important;
+  }
+}
+
+.swiper-pagination.heroSliderInsidePagination {
+  position: relative;
+  padding: 10px;
+}
+
+.swiper-button-prev.heroSliderInsideBtn, .swiper-button-next.heroSliderInsideBtn {
+  transition: ease 0.3s;
+  position: relative;
+  width: 100%;
+  margin: 0!important;
+  max-width: 125px;
+  font-size: 24px;
+  color: rgba(0,0,0,0.5);
+  border-radius: 6px;
+  background: rgba(255,255,255,0.5);
+  border: solid 1px rgba(0,0,0,0.1);
+  padding: 5px!important;
+  height: auto;
+}
+
+@media (max-width: 992px) {
+  .swiper-button-prev.heroSliderInsideBtn, .swiper-button-next.heroSliderInsideBtn {
+    max-width: unset;
+  }
+}
+
+.swiper-button-prev.heroSliderInsideBtn:hover, .swiper-button-next.heroSliderInsideBtn:hover {
+  color: #ffffff;
+  background: rgb(255,153,0);
+  border: solid 1px rgba(0,0,0,0);
+}
+
+.swiper-button-prev.heroSliderInsideBtn::after, .swiper-button-next.heroSliderInsideBtn::after {
+  content: none;
+}
+
+.swiper-button-prev.heroSliderInsideBtn.heroSliderInsideLeft {
+}
+
+.swiper-button-next.heroSliderInsideBtn.heroSliderInsideRight {
+}
+
+.heroSliderInsideBtns {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 35px;
+  justify-content: center;
+  align-items: center;
+}
+
+.heroSliderInsideWrapperSlideStore {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 25px;
+  padding: 15px;
+}
+
+@media (max-width: 992px) {
+  .heroSliderInsideWrapperSlideStore {
+    flex-direction: column;
+    padding: 0;
+    grid-gap: 15px;
+  }
+}
+
+.heroSliderInsideWrapperSlideStoreMedia {
+  width: 100%;
+  height: 100%;
+  background: white;
+  padding: 10px;
+  border-radius: 10px;
+  box-shadow: 0 0 4px 0 rgb(0,0,0,0.1);
+}
+
+.heroSliderInsideWrapperSlideStoreDetails {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+  min-width: 350px;
+}
+
+@media (max-width: 992px) {
+  .heroSliderInsideWrapperSlideStoreDetails {
+    min-width: unset;
+    max-height: 200px;
+  }
+}
+
+.heroSliderInsideWrapperSlideStoreDetailsSec {
+  height: 100%;
+  width: 100%;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 0 4px 0 rgb(0,0,0,0.1);
+  display: flex;
+  flex-direction: column;
+  grid-gap: 25px;
+  padding: 0px;
+  overflow: auto;
+  border: solid 10px white;
+}
+
+@media (max-width: 992px) {
+  .heroSliderInsideWrapperSlideStoreDetailsSec {
+    flex-direction: row;
+  }
+}
+
+.heroSliderInsideWrapperSlideStoreDetailsSec::-webkit-scrollbar {
+  display: none;
+}
+
+.heroSliderInsideWrapperSlideStoreMediaPic {
+  width: 100%;
+  height: 100%;
+  /*padding-top: 56.25%;*/
+  position: relative;
+  overflow: hidden;
+  /*box-shadow: 0 0 4px 0 rgb(0,0,0,0.1);*/
+  border: solid 1px rgba(0,0,0,0.1);
+  border-radius: 8px;
+}
+
+.heroSliderInsideWrapperSlideStoreMediaPicImg {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
+.heroSliderInsideWrapperSlideStoreDetailsSecProduct {
+  transition: ease 0.4s;
+  overflow: hidden;
+  border-radius: 8px;
+  background: rgba(0,0,0,0.1);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+  padding: 10px;
+  padding-top: 56.25%;
+  position: relative;
+  border: solid 2px rgba(255,153,0,0);
+}
+
+@media (max-width: 992px) {
+  .heroSliderInsideWrapperSlideStoreDetailsSecProduct {
+    padding-top: unset;
+    min-width: 300px;
+    min-height: 135px;
+  }
+}
+
+.heroSliderInsideWrapperSlideStoreDetailsSecProduct:hover {
+  border: solid 2px #ff9900;
+  transform: scale(1.01);
+}
+
+.heroSliderInsideWrapperSlideStoreDetailsSecProductImg {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
+.heroSliderInsideWrapperSlideStoreDetailsSecProductDetails {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+}
+
+.heroSliderInsideWrapperSlideStoreDetailsSecProductDetailsText {
+  color: rgba(255,255,255,0.75);
+  font-weight: 700;
+  font-size: 14px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 1;
+}
+
+.heroSliderInsideWrapperSlideStoreMediaPicDetails {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  padding: 15px;
+}
+
+.heroSliderInsideWrapperSlideStoreMediaPicDetailsBox {
+  width: 100%;
+  background: rgba(255,255,255,0.75);
+  border-radius: 8px;
+  padding: 15px;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
+  display: flex;
+  flex-direction: row;
+  grid-gap: 15px;
+  align-items: center;
+}
+
+.heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxPic {
+  transition: ease 0.4s;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 8px;
+  max-width: 75px;
+  max-height: 75px;
+  height: 75px;
+  position: relative;
+  border: solid 2px #ffffff;
+  box-shadow: 0 0 4px 0 rgba(0,0,0,0);
+}
+
+@media (max-width: 576px) {
+  .heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxPic {
+    max-width: 50px;
+    max-height: 50px;
+    height: 50px;
+    display: none;
+  }
+}
+
+.heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxPic:hover {
+  border: solid 2px #ff9900;
+  box-shadow: 0 0 4px 0 rgb(0,0,0,0.1);
+}
+
+.heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxPicImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+
+.heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxText {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 5px;
+  font-size: 16px;
+}
+
+.heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxTextName {
+  font-weight: 600;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 1;
+}
+
+.heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxTextBio {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+}
+
+.infoCardLanding {
+  transition: ease 0.4s;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background: rgba(255,255,255,0.5);
+  border-radius: 8px;
+  overflow: hidden;
+  border: solid 4px rgba(0,0,0,0);
+  padding: 25px 25px;
+  box-shadow: 0 0 4px 0 rgba(0,0,0,0);
+  grid-gap: 25px;
+  color: rgba(0,0,0,0.5);
+}
+
+.infoCardLanding:hover {
+  background: #ffffff;
+  overflow: hidden;
+  border: solid 4px rgb(255,153,0);
+  box-shadow: 0 0 4px 0 rgba(0,0,0,0);
+  color: rgba(0,0,0,0.65);
+  transform: scale(1.01);
+}
+
+.infoCardLandingMedia {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  grid-gap: 10px;
+  font-size: 52px;
+  /*color: rgba(0,0,0,0.5);*/
+}
+
+.infoCardLandingDetails {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  grid-gap: 10px;
+  /*color: rgba(0,0,0,0.5);*/
+}
+
+.infoCardLandingDetailsHead {
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.infoCardLandingDetailsText {
+}
+
--- a/public/assets/css/styles.css
+++ b/public/assets/css/styles.css
@ -160,6 +160,8 @@ a:hover {
 .MidMain {
  width: 100%;
  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 }

 .secMainInside {
@ -282,6 +284,10 @@ a:hover {
  grid-gap: 10px;
 }

+.secMainInsideHead.secMainInsideHeadAlt {
+  text-align: center;
+}
+
 .secMainInsideHeadHeading {
 }

@ -540,3 +546,15 @@ a:hover {
  color: rgba(0,0,0,0.65);
 }

+.secDivider {
+  width: 100%;
+  height: 1px;
+  background: rgba(0,0,0,0.05);
+}
+
+.secDivider.secDividerAlt {
+  max-width: 85%;
+  justify-self: center;
+  align-self: center;
+}
+
--- a/public/assets/js/Simple-Slider.js
+++ b/public/assets/js/Simple-Slider.js
@ -0,0 +1,23 @@
+document.addEventListener("DOMContentLoaded", function() {
+
+    // Initializing the swiper plugin for the slider.
+    // Read more here: http://idangero.us/swiper/api/
+    
+    var mySwiper = new Swiper('.swiper-container', {
+        loop: true,
+        speed: 1200,
+        stopOnLastSlide: false,
+        autoplay: {delay: 8000,},
+        pagination: {
+            el: '.swiper-pagination' ,
+            clickable: true
+        },
+        paginationClickable: true,
+        navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev'
+        },
+        spaceBetween: 10,
+    });
+    
+});
--- a/public/checkout.html
+++ b/public/checkout.html
@ -12,6 +12,8 @@
    <link rel="stylesheet" href="assets/css/createStore.css">
    <link rel="stylesheet" href="assets/css/filters.css">
    <link rel="stylesheet" href="assets/css/footer.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.css">
+    <link rel="stylesheet" href="assets/css/landing.css">
    <link rel="stylesheet" href="assets/css/listings.css">
    <link rel="stylesheet" href="assets/css/nav.css">
    <link rel="stylesheet" href="assets/css/pagination.css">
@ -19,6 +21,7 @@
    <link rel="stylesheet" href="assets/css/product.css">
    <link rel="stylesheet" href="assets/css/productCard.css">
    <link rel="stylesheet" href="assets/css/profileBox.css">
+    <link rel="stylesheet" href="assets/css/Simple-Slider-Simple-Slider.css">
    <link rel="stylesheet" href="assets/css/storeCard.css">
    <link rel="stylesheet" href="assets/css/storePage.css">
    <link rel="stylesheet" href="assets/css/styles.css">
@ -376,7 +379,9 @@
    <script src="assets/js/checkboxBetter.js"></script>
    <script src="assets/js/expandList.js"></script>
    <script src="assets/js/expandProductCheckout.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.js"></script>
    <script src="assets/js/popups.js"></script>
+    <script src="assets/js/Simple-Slider.js"></script>
    <script src="assets/js/tabs.js"></script>
    <script src="assets/js/toggleCategories.js"></script>
 </body>
--- a/public/createProduct.html
+++ b/public/createProduct.html
@ -12,6 +12,8 @@
    <link rel="stylesheet" href="assets/css/createStore.css">
    <link rel="stylesheet" href="assets/css/filters.css">
    <link rel="stylesheet" href="assets/css/footer.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.css">
+    <link rel="stylesheet" href="assets/css/landing.css">
    <link rel="stylesheet" href="assets/css/listings.css">
    <link rel="stylesheet" href="assets/css/nav.css">
    <link rel="stylesheet" href="assets/css/pagination.css">
@ -19,6 +21,7 @@
    <link rel="stylesheet" href="assets/css/product.css">
    <link rel="stylesheet" href="assets/css/productCard.css">
    <link rel="stylesheet" href="assets/css/profileBox.css">
+    <link rel="stylesheet" href="assets/css/Simple-Slider-Simple-Slider.css">
    <link rel="stylesheet" href="assets/css/storeCard.css">
    <link rel="stylesheet" href="assets/css/storePage.css">
    <link rel="stylesheet" href="assets/css/styles.css">
@ -348,7 +351,9 @@
    <script src="assets/js/checkboxBetter.js"></script>
    <script src="assets/js/expandList.js"></script>
    <script src="assets/js/expandProductCheckout.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.js"></script>
    <script src="assets/js/popups.js"></script>
+    <script src="assets/js/Simple-Slider.js"></script>
    <script src="assets/js/tabs.js"></script>
    <script src="assets/js/toggleCategories.js"></script>
 </body>
--- a/public/createStore.html
+++ b/public/createStore.html
@ -12,6 +12,8 @@
    <link rel="stylesheet" href="assets/css/createStore.css">
    <link rel="stylesheet" href="assets/css/filters.css">
    <link rel="stylesheet" href="assets/css/footer.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.css">
+    <link rel="stylesheet" href="assets/css/landing.css">
    <link rel="stylesheet" href="assets/css/listings.css">
    <link rel="stylesheet" href="assets/css/nav.css">
    <link rel="stylesheet" href="assets/css/pagination.css">
@ -19,6 +21,7 @@
    <link rel="stylesheet" href="assets/css/product.css">
    <link rel="stylesheet" href="assets/css/productCard.css">
    <link rel="stylesheet" href="assets/css/profileBox.css">
+    <link rel="stylesheet" href="assets/css/Simple-Slider-Simple-Slider.css">
    <link rel="stylesheet" href="assets/css/storeCard.css">
    <link rel="stylesheet" href="assets/css/storePage.css">
    <link rel="stylesheet" href="assets/css/styles.css">
@ -336,7 +339,9 @@
    <script src="assets/js/checkboxBetter.js"></script>
    <script src="assets/js/expandList.js"></script>
    <script src="assets/js/expandProductCheckout.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.js"></script>
    <script src="assets/js/popups.js"></script>
+    <script src="assets/js/Simple-Slider.js"></script>
    <script src="assets/js/tabs.js"></script>
    <script src="assets/js/toggleCategories.js"></script>
 </body>
--- a/public/index.html
+++ b/public/index.html
@ -12,6 +12,8 @@
    <link rel="stylesheet" href="assets/css/createStore.css">
    <link rel="stylesheet" href="assets/css/filters.css">
    <link rel="stylesheet" href="assets/css/footer.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.css">
+    <link rel="stylesheet" href="assets/css/landing.css">
    <link rel="stylesheet" href="assets/css/listings.css">
    <link rel="stylesheet" href="assets/css/nav.css">
    <link rel="stylesheet" href="assets/css/pagination.css">
@ -19,6 +21,7 @@
    <link rel="stylesheet" href="assets/css/product.css">
    <link rel="stylesheet" href="assets/css/productCard.css">
    <link rel="stylesheet" href="assets/css/profileBox.css">
+    <link rel="stylesheet" href="assets/css/Simple-Slider-Simple-Slider.css">
    <link rel="stylesheet" href="assets/css/storeCard.css">
    <link rel="stylesheet" href="assets/css/storePage.css">
    <link rel="stylesheet" href="assets/css/styles.css">
@ -80,11 +83,89 @@
        </div>
    </div>
    <div class="MidMain">
-        <div class="secMain">
+        <div class="secMain secMainAlt secMainHero">
            <div class="containerMain">
-                <div class="secMainInside"></div>
+                <div class="secMainInside">
+                    <div class="simple-slider heroSlider">
+                        <div class="swiper-container heroSliderInside">
+                            <div class="swiper-wrapper heroSliderInsideWrapper">
+                                <div class="swiper-slide heroSliderInsideWrapperSlide">
+                                    <div class="heroSliderInsideWrapperSlideStore">
+                                        <div class="heroSliderInsideWrapperSlideStoreMedia">
+                                            <div class="heroSliderInsideWrapperSlideStoreMediaPic"><img class="heroSliderInsideWrapperSlideStoreMediaPicImg" src="https://image.nostr.build/a66cc6c0b32d70362dc791f9cf338133db945a0abe1c08f0b940de00130c80fa.jpg">
+                                                <div class="heroSliderInsideWrapperSlideStoreMediaPicDetails">
+                                                    <div class="heroSliderInsideWrapperSlideStoreMediaPicDetailsBox"><a class="heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxPic" href="#"><img class="heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxPicImg" src="https://image.nostr.build/a66cc6c0b32d70362dc791f9cf338133db945a0abe1c08f0b940de00130c80fa.jpg"></a>
+                                                        <div class="heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxText">
+                                                            <p class="heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxTextName">Store name</p>
+                                                            <p class="heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxTextBio">Need a smoke? A specific kind of smoke? We got it. We got the long, the short, the thick and thin, the brown and black. We have them all.</p>
                                                        </div>
                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="heroSliderInsideWrapperSlideStoreDetails">
+                                            <div class="heroSliderInsideWrapperSlideStoreDetailsSec"><a class="heroSliderInsideWrapperSlideStoreDetailsSecProduct" href="#"><img class="heroSliderInsideWrapperSlideStoreDetailsSecProductImg" src="https://image.nostr.build/63c350b95198496250ee63d95efe4cabb2bd70e7de4a3ce3505f71c7bd24651b.jpg">
+                                                    <div class="heroSliderInsideWrapperSlideStoreDetailsSecProductDetails" style="background: linear-gradient(rgba(255,255,255,0) 0%, black 100%);">
+                                                        <p class="heroSliderInsideWrapperSlideStoreDetailsSecProductDetailsText">Product name</p>
+                                                    </div>
+                                                </a><a class="heroSliderInsideWrapperSlideStoreDetailsSecProduct" href="#"><img class="heroSliderInsideWrapperSlideStoreDetailsSecProductImg" src="https://image.nostr.build/63c350b95198496250ee63d95efe4cabb2bd70e7de4a3ce3505f71c7bd24651b.jpg">
+                                                    <div class="heroSliderInsideWrapperSlideStoreDetailsSecProductDetails" style="background: linear-gradient(rgba(255,255,255,0) 0%, black 100%);">
+                                                        <p class="heroSliderInsideWrapperSlideStoreDetailsSecProductDetailsText">Product name</p>
+                                                    </div>
+                                                </a><a class="heroSliderInsideWrapperSlideStoreDetailsSecProduct" href="#"><img class="heroSliderInsideWrapperSlideStoreDetailsSecProductImg" src="https://image.nostr.build/63c350b95198496250ee63d95efe4cabb2bd70e7de4a3ce3505f71c7bd24651b.jpg">
+                                                    <div class="heroSliderInsideWrapperSlideStoreDetailsSecProductDetails" style="background: linear-gradient(rgba(255,255,255,0) 0%, black 100%);">
+                                                        <p class="heroSliderInsideWrapperSlideStoreDetailsSecProductDetailsText">Product name</p>
+                                                    </div>
+                                                </a></div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="heroSliderInsideBtns">
+                                <div class="swiper-button-prev heroSliderInsideBtn heroSliderInsideLeft"><i class='bx bx-chevron-left btnMainIcon'></i></div>
+                                <div class="swiper-button-next heroSliderInsideBtn heroSliderInsideRight"><i class='bx bx-chevron-right btnMainIcon'></i></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="secMain secMainAlt">
+            <div class="containerMain">
+                <div class="secMainInside">
+                    <div class="secMainInsideHead secMainInsideHeadAlt">
+                        <h1 class="secMainInsideHeadHeading">Welcome to the Decentralised Marketplace</h1>
+                        <p class="secMainInsideHeadText">Where you have the power, both as a normal buyer and as a seller or store owner</p>
+                    </div>
+                    <div class="secMainInsideGrid secMainInsideGrid3">
+                        <div class="infoCardLanding">
+                            <div class="infoCardLandingMedia"><i class='bx bx-git-branch btnMainIcon'></i></div>
+                            <div class="infoCardLandingDetails">
+                                <h2 class="infoCardLandingDetailsHead">Freedom Tech</h2>
+                                <p class="infoCardLandingDetailsText">Powered by Nostr &amp; Bitcoin, enjoy your rightful freedom</p>
+                            </div>
+                        </div>
+                        <div class="infoCardLanding">
+                            <div class="infoCardLandingMedia"><i class='bx bxs-store-alt btnMainIcon'></i></div>
+                            <div class="infoCardLandingDetails">
+                                <h2 class="infoCardLandingDetailsHead">True Ownership</h2>
+                                <p class="infoCardLandingDetailsText">You truly own your 'account' and your store with its products.</p>
+                            </div>
+                        </div>
+                        <div class="infoCardLanding">
+                            <div class="infoCardLandingMedia"><i class='bx bxs-purchase-tag btnMainIcon'></i></div>
+                            <div class="infoCardLandingDetails">
+                                <h2 class="infoCardLandingDetailsHead">No Middlemen</h2>
+                                <p class="infoCardLandingDetailsText">Transact with whomever you want with, regardless of who they are or where they're from</p>
+                            </div>
+                        </div>
+                        <div></div>
+                        <div></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="secDivider secDividerAlt"></div>
        <div class="secMain secMainAlt">
            <div class="containerMain">
                <div class="secMainInside">
@ -441,7 +522,9 @@
    <script src="assets/js/checkboxBetter.js"></script>
    <script src="assets/js/expandList.js"></script>
    <script src="assets/js/expandProductCheckout.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.js"></script>
    <script src="assets/js/popups.js"></script>
+    <script src="assets/js/Simple-Slider.js"></script>
    <script src="assets/js/tabs.js"></script>
    <script src="assets/js/toggleCategories.js"></script>
 </body>
--- a/public/productPage.html
+++ b/public/productPage.html
@ -12,6 +12,8 @@
    <link rel="stylesheet" href="assets/css/createStore.css">
    <link rel="stylesheet" href="assets/css/filters.css">
    <link rel="stylesheet" href="assets/css/footer.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.css">
+    <link rel="stylesheet" href="assets/css/landing.css">
    <link rel="stylesheet" href="assets/css/listings.css">
    <link rel="stylesheet" href="assets/css/nav.css">
    <link rel="stylesheet" href="assets/css/pagination.css">
@ -19,6 +21,7 @@
    <link rel="stylesheet" href="assets/css/product.css">
    <link rel="stylesheet" href="assets/css/productCard.css">
    <link rel="stylesheet" href="assets/css/profileBox.css">
+    <link rel="stylesheet" href="assets/css/Simple-Slider-Simple-Slider.css">
    <link rel="stylesheet" href="assets/css/storeCard.css">
    <link rel="stylesheet" href="assets/css/storePage.css">
    <link rel="stylesheet" href="assets/css/styles.css">
@ -594,7 +597,9 @@
    <script src="assets/js/checkboxBetter.js"></script>
    <script src="assets/js/expandList.js"></script>
    <script src="assets/js/expandProductCheckout.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.js"></script>
    <script src="assets/js/popups.js"></script>
+    <script src="assets/js/Simple-Slider.js"></script>
    <script src="assets/js/tabs.js"></script>
    <script src="assets/js/toggleCategories.js"></script>
 </body>
--- a/public/products.html
+++ b/public/products.html
@ -12,6 +12,8 @@
    <link rel="stylesheet" href="assets/css/createStore.css">
    <link rel="stylesheet" href="assets/css/filters.css">
    <link rel="stylesheet" href="assets/css/footer.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.css">
+    <link rel="stylesheet" href="assets/css/landing.css">
    <link rel="stylesheet" href="assets/css/listings.css">
    <link rel="stylesheet" href="assets/css/nav.css">
    <link rel="stylesheet" href="assets/css/pagination.css">
@ -19,6 +21,7 @@
    <link rel="stylesheet" href="assets/css/product.css">
    <link rel="stylesheet" href="assets/css/productCard.css">
    <link rel="stylesheet" href="assets/css/profileBox.css">
+    <link rel="stylesheet" href="assets/css/Simple-Slider-Simple-Slider.css">
    <link rel="stylesheet" href="assets/css/storeCard.css">
    <link rel="stylesheet" href="assets/css/storePage.css">
    <link rel="stylesheet" href="assets/css/styles.css">
@ -380,7 +383,9 @@
    <script src="assets/js/checkboxBetter.js"></script>
    <script src="assets/js/expandList.js"></script>
    <script src="assets/js/expandProductCheckout.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.js"></script>
    <script src="assets/js/popups.js"></script>
+    <script src="assets/js/Simple-Slider.js"></script>
    <script src="assets/js/tabs.js"></script>
    <script src="assets/js/toggleCategories.js"></script>
 </body>
--- a/public/storePage.html
+++ b/public/storePage.html
@ -12,6 +12,8 @@
    <link rel="stylesheet" href="assets/css/createStore.css">
    <link rel="stylesheet" href="assets/css/filters.css">
    <link rel="stylesheet" href="assets/css/footer.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.css">
+    <link rel="stylesheet" href="assets/css/landing.css">
    <link rel="stylesheet" href="assets/css/listings.css">
    <link rel="stylesheet" href="assets/css/nav.css">
    <link rel="stylesheet" href="assets/css/pagination.css">
@ -19,6 +21,7 @@
    <link rel="stylesheet" href="assets/css/product.css">
    <link rel="stylesheet" href="assets/css/productCard.css">
    <link rel="stylesheet" href="assets/css/profileBox.css">
+    <link rel="stylesheet" href="assets/css/Simple-Slider-Simple-Slider.css">
    <link rel="stylesheet" href="assets/css/storeCard.css">
    <link rel="stylesheet" href="assets/css/storePage.css">
    <link rel="stylesheet" href="assets/css/styles.css">
@ -458,7 +461,9 @@
    <script src="assets/js/checkboxBetter.js"></script>
    <script src="assets/js/expandList.js"></script>
    <script src="assets/js/expandProductCheckout.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.js"></script>
    <script src="assets/js/popups.js"></script>
+    <script src="assets/js/Simple-Slider.js"></script>
    <script src="assets/js/tabs.js"></script>
    <script src="assets/js/toggleCategories.js"></script>
 </body>
--- a/public/stores.html
+++ b/public/stores.html
@ -12,6 +12,8 @@
    <link rel="stylesheet" href="assets/css/createStore.css">
    <link rel="stylesheet" href="assets/css/filters.css">
    <link rel="stylesheet" href="assets/css/footer.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.css">
+    <link rel="stylesheet" href="assets/css/landing.css">
    <link rel="stylesheet" href="assets/css/listings.css">
    <link rel="stylesheet" href="assets/css/nav.css">
    <link rel="stylesheet" href="assets/css/pagination.css">
@ -19,6 +21,7 @@
    <link rel="stylesheet" href="assets/css/product.css">
    <link rel="stylesheet" href="assets/css/productCard.css">
    <link rel="stylesheet" href="assets/css/profileBox.css">
+    <link rel="stylesheet" href="assets/css/Simple-Slider-Simple-Slider.css">
    <link rel="stylesheet" href="assets/css/storeCard.css">
    <link rel="stylesheet" href="assets/css/storePage.css">
    <link rel="stylesheet" href="assets/css/styles.css">
@ -384,7 +387,9 @@
    <script src="assets/js/checkboxBetter.js"></script>
    <script src="assets/js/expandList.js"></script>
    <script src="assets/js/expandProductCheckout.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.js"></script>
    <script src="assets/js/popups.js"></script>
+    <script src="assets/js/Simple-Slider.js"></script>
    <script src="assets/js/tabs.js"></script>
    <script src="assets/js/toggleCategories.js"></script>
 </body>
--- a/public/userPage.html
+++ b/public/userPage.html
@ -12,6 +12,8 @@
    <link rel="stylesheet" href="assets/css/createStore.css">
    <link rel="stylesheet" href="assets/css/filters.css">
    <link rel="stylesheet" href="assets/css/footer.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.css">
+    <link rel="stylesheet" href="assets/css/landing.css">
    <link rel="stylesheet" href="assets/css/listings.css">
    <link rel="stylesheet" href="assets/css/nav.css">
    <link rel="stylesheet" href="assets/css/pagination.css">
@ -19,6 +21,7 @@
    <link rel="stylesheet" href="assets/css/product.css">
    <link rel="stylesheet" href="assets/css/productCard.css">
    <link rel="stylesheet" href="assets/css/profileBox.css">
+    <link rel="stylesheet" href="assets/css/Simple-Slider-Simple-Slider.css">
    <link rel="stylesheet" href="assets/css/storeCard.css">
    <link rel="stylesheet" href="assets/css/storePage.css">
    <link rel="stylesheet" href="assets/css/styles.css">
@ -452,7 +455,9 @@
    <script src="assets/js/checkboxBetter.js"></script>
    <script src="assets/js/expandList.js"></script>
    <script src="assets/js/expandProductCheckout.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.8/swiper-bundle.min.js"></script>
    <script src="assets/js/popups.js"></script>
+    <script src="assets/js/Simple-Slider.js"></script>
    <script src="assets/js/tabs.js"></script>
    <script src="assets/js/toggleCategories.js"></script>
 </body>