fix/ carousel distribution correctly

Author: scguaquetam

dev-config.json

@@ -1,16 +1,35 @@
 {
   "RSK_NODE": "https://public-node.testnet.rsk.co",
   "SOLVE_CAPTCHA_URL": "https://www.google.com/recaptcha/api/siteverify",
-  "SECRET_VERIFY_CAPTCHA": "",
-  "SITE_KEY_CAPTCHA": "",
-  "FAUCET_ADDRESS": "",
-  "FAUCET_PRIVATE_KEY": "",
+  "SECRET_VERIFY_CAPTCHA": "6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe",
+  "SITE_KEY_CAPTCHA": "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI",
+  "FAUCET_ADDRESS": "0xff54A7563fc6bB7A34Ca66B41265f7f7D61b3a7D",
+  "FAUCET_PRIVATE_KEY": "75207714a34f735a85ab79918eb310f706c0d2944ab8f7d6d9811c88708fe004",
   "GAS_PRICE": 60000000,
   "GAS_LIMIT": 100000,
   "VALUE_TO_DISPENSE": 0.0005,
   "PROMO_VALUE_TO_DISPENSE": 0.05,
   "TAG_MANAGER_ID": "NO_ID",
   "FILTER_BY_IP": true,
   "TIMER_LIMIT": 180000,
-  "PROMO_CODE": []
+  "PROMO_CODE": [
+    {
+      "code": "ESP_01",
+      "activationDate": "2025-01-01",
+      "expirationDate": "2025-12-10",
+      "maxDispensableRBTC": 1
+    },
+    {
+      "code": "ESP_02",
+      "activationDate": "2024-01-01",
+      "expirationDate": "2024-12-10",
+      "maxDispensableRBTC": 1
+    },
+    {
+      "code": "ESP_03",
+      "activationDate": "2025-07-07",
+      "expirationDate": "2025-12-10",
+      "maxDispensableRBTC": 1
+    }
+  ]
 }

src/app/lib/faucetHistory.json

@@ -0,0 +1,18 @@
+{
+  "0x782A6fC6986D40bbeA0c01b1A7f24281f8b905Ed": {
+    "address": "0x782A6fC6986D40bbeA0c01b1A7f24281f8b905Ed",
+    "ip": "186.105.22.24",
+    "time": "2025-01-22T13:15:37.815Z",
+    "promoCode": "",
+    "loading": false,
+    "mint": true
+  },
+  "0x769fbacda24887221555b6f4794847bead857ad3": {
+    "address": "0x769fbacda24887221555b6f4794847bead857ad3",
+    "ip": "186.105.22.24",
+    "time": "2025-01-22T14:05:42.019Z",
+    "promoCode": "ESP_01",
+    "loading": false,
+    "mint": true
+  }
+}

src/components/Carousel.tsx

@@ -45,11 +45,36 @@ const Carousel = () => {
   return (
     <div className="content-carousel">
       <Swiper
-        modules={[Autoplay, Pagination]} // Carga los módulos aquí
-        spaceBetween={30}
-        slidesPerView={1}
+        modules={[Autoplay, Pagination]} 
         autoplay={{ delay: 5000, disableOnInteraction: false }}
         pagination={{ clickable: true }}
+
+        breakpoints={{
+          480: {
+            slidesPerView: 1.1,
+            spaceBetween: 5,
+          },
+          768: {
+            slidesPerView: 1.15,
+            spaceBetween: 10,
+          },
+          1024: {
+            slidesPerView: 1.3,
+            spaceBetween: 15, 
+          },
+          1440: { 
+            slidesPerView: 1.5,
+            spaceBetween: 20, 
+          },
+          1920: { 
+            slidesPerView: 1.8,
+            spaceBetween: 20,
+          },
+          2560: { 
+            slidesPerView: 2,
+            spaceBetween: 40,
+          }
+        }}
       >
         {items.map((item, i) => (
           <SwiperSlide key={i}>

src/styles/_content.scss

@@ -13,6 +13,7 @@
   }
 }
 .content-form {
+  margin-right: 20px;
   .title-form {
     color: $white1;
     font-size: 18px;
@@ -44,7 +45,6 @@
   .faucet-form {
     position: relative;
     z-index: 0;
-    margin-right: 200px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -107,7 +107,11 @@
 
 .content-carousel {
   position: relative;
-  width: 450px;
+  width: 100%;
+  max-width: 600px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   .rsk-card {
     background-color: $bg1-color;
     width: 400px;

src/styles/_responsive.scss

@@ -9,12 +9,10 @@
     }
   }
   .content-form {
+    margin-right: 20px;
     .title-form {
       font-size: 14px;
     }
-    .faucet-form {
-      margin-right: 180px;
-    }
   }
   .content-carousel {
     width: 410px;
@@ -40,9 +38,7 @@
 
 @include laptop {
   .content-form {
-    .faucet-form {
-      margin-right: 90px;
-    }
+    margin-right: 20px;
   }
   .content-carousel {
     width: 450px;
@@ -58,30 +54,42 @@
     font-size: 35px;
   }
   .content-form {
-    width: 90%;
+    width: 100%;
     max-width: 400px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-right: 0px;
   }
   .container-faucet {
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    flex-wrap: wrap;
+    width: 100%;
+    max-width: 400px; 
+    margin: 40px auto;
     gap: 20px;
+  }
+  .content-carousel {
     width: 100%;
-    text-align: center;
-    margin-top: 40px;
+    margin-left: 0px;
+    max-width: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .swiper {
+    width: 100% !important;
+    max-width: 400px !important;
   }
   .container {
     .content-message {
       margin: 30px auto 0px auto;
       width: 70%;
     }
   }
-  .content-carousel {
-    width: 100%;
-    max-width: 400px;
-  }
   footer {
     flex-direction: column;
     .links {
@@ -109,23 +117,27 @@
     }
   }
   .content-form {
-    width: 90%;
-    max-width: 350px;
+    width: 100%;
+    max-width: 400px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-right: 0px;
   }
   .rsk-card {
     width: 280px;
     height: 160px;
   }
   .container-faucet {
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    flex-wrap: wrap;
-    gap: 15px;
     width: 100%;
-    text-align: center;
-    margin-top: 30px;
+    max-width: 350px; 
+    margin: 30px auto;
+    gap: 15px;
   }
   .container {
     .content-message {
@@ -134,8 +146,15 @@
     }
   }
   .content-carousel {
-    display: block;
-    width: 90%;
-    max-width: 350px;
+    width: 100%;
+    max-width: 450px;
+    margin-left: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .swiper {
+    width: 100% !important;
+    max-width: 450px !important;
   }
 }