hds-web 1.8.6 → 1.8.8

package/src/HDS/helpers/Media/mediabox.js

@@ -57,7 +57,6 @@ export default function MediaViewer ({ img_url, video_url, video_poster, width }
                 <video
                   controls={false}
                   autoPlay
-                  muted
                   className="object-contain max-w-full max-h-full"
                 >
                   <source src={video_url} type="video/mp4" />

package/src/HDS/helpers/Sliders/scrollSlider.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { VideoCard } from "../../components/Cards/VideoCard";
-import { HomepageCarousel } from '../../components';
+import { HomepageCarousel2, CarouselCard } from '../../components/Carousels';
+
 
 const SideCard = () => (
     <div className='bg-green-500 w-[300px] flex flex-col items-center justify-between rounded-3xl max-h-[338px]'>
@@ -87,25 +88,47 @@ export default function ScrollSlider() {
         setScrollActive(false); // Mouse left, scroll is inactive
     };
     return (
-        <div
-            className={`flex flex-row gap-4 w-screen h-screen items-center  justify-center`}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-        >
-            <div className={`${isScrollActive ? 'translate-y-0' : ''}  -translate-y-36 transition-all duration-[1500ms]`}>
-                <SideCard />
-            </div>
-            <div className='w-[643px] '>
-                <HomepageCarousel
-                    cards={carouselItems}
-                    component={VideoCard}
-                    length={carouselItems.length}
-                    
-                />
-            </div>
-            <div className={`${isScrollActive ? '-translate-y-0' : ''} translate-y-36  transition-all duration-[1500ms]`}>
-                <SideCard />
-            </div>
+        // <div>
+
+        //     <div className='absolute z-[1]'>
+        //         <div
+        //             className={`flex flex-row gap-4 w-screen h-screen items-center  justify-center`}
+        //             onMouseEnter={handleMouseEnter}
+        //             onMouseLeave={handleMouseLeave}
+        //         >
+        //             <div className={`${isScrollActive ? 'translate-y-0' : ''}  -translate-y-36 transition-all duration-[1500ms]`}>
+        //                 <SideCard />
+        //             </div>
+        //             <div className='w-[643px] '>
+        //                 <HomepageCarousel
+        //                     cards={carouselItems}
+        //                     component={VideoCard}
+        //                     length={carouselItems.length}
+
+        //                 />
+        //             </div>
+        //             <div className={`${isScrollActive ? '-translate-y-0' : ''} translate-y-36  transition-all duration-[1500ms]`}>
+        //                 <SideCard />
+        //             </div>
+        //         </div>
+        //     </div>
+        //     <div className='absolute z-[1] left-[227px] top-[83px]  '>
+        //         <div className='h-screen items-center flex'>
+        //             <div className='w-[1279px]'>
+
+        //                 <HomepageCarousel
+        //                     cards={carouselItems}
+        //                     component={SideCard}
+        //                     length={carouselItems.length}
+
+        //                 />
+        //             </div>
+        //         </div>
+        //     </div>
+        // </div>
+
+        <div>
+            <HomepageCarousel2 />
         </div>
     );
 }

package/src/styles/tailwind.css

@@ -913,6 +913,10 @@ select{
   left: 17.6%;
 }
 
+.left-\[227px\]{
+  left: 227px;
+}
+
 .left-\[45\%\]{
   left: 45%;
 }
@@ -953,14 +957,34 @@ select{
   top: 0.5rem;
 }
 
+.top-24{
+  top: 6rem;
+}
+
 .top-8{
   top: 2rem;
 }
 
+.top-\[33rem\]{
+  top: 33rem;
+}
+
 .top-\[442\.72px\]{
   top: 442.72px;
 }
 
+.top-\[83px\]{
+  top: 83px;
+}
+
+.-top-\[400px\]{
+  top: -400px;
+}
+
+.left-\[410px\]{
+  left: 410px;
+}
+
 .isolate{
   isolation: isolate;
 }
@@ -993,6 +1017,14 @@ select{
   z-index: 60;
 }
 
+.z-40{
+  z-index: 40;
+}
+
+.z-30{
+  z-index: 30;
+}
+
 .col-span-1{
   grid-column: span 1 / span 1;
 }
@@ -1275,6 +1307,10 @@ select{
   margin-right: 2rem;
 }
 
+.mt-0{
+  margin-top: 0px;
+}
+
 .mt-1{
   margin-top: 0.25rem;
 }
@@ -1490,10 +1526,18 @@ select{
   height: 472.64px;
 }
 
+.h-\[56px\]{
+  height: 56px;
+}
+
 .h-\[60px\]{
   height: 60px;
 }
 
+.h-\[90px\]{
+  height: 90px;
+}
+
 .h-\[calc\(100\%-112px\)\]{
   height: calc(100% - 112px);
 }
@@ -1510,6 +1554,18 @@ select{
   height: 100vh;
 }
 
+.h-\[338px\]{
+  height: 338px;
+}
+
+.h-\[800px\]{
+  height: 800px;
+}
+
+.h-\[630px\]{
+  height: 630px;
+}
+
 .max-h-\[26\.25\]{
   max-height: 26.25;
 }
@@ -1522,6 +1578,10 @@ select{
   max-height: 100%;
 }
 
+.max-h-\[441px\]{
+  max-height: 441px;
+}
+
 .min-h-\[20px\]{
   min-height: 20px;
 }
@@ -1530,6 +1590,10 @@ select{
   min-height: 24px;
 }
 
+.min-h-\[441px\]{
+  min-height: 441px;
+}
+
 .w-1\/2{
   width: 50%;
 }
@@ -1610,6 +1674,14 @@ select{
   width: 103px;
 }
 
+.w-\[112px\]{
+  width: 112px;
+}
+
+.w-\[1279px\]{
+  width: 1279px;
+}
+
 .w-\[151\.7px\]{
   width: 151.7px;
 }
@@ -1662,6 +1734,10 @@ select{
   width: 70%;
 }
 
+.w-\[72px\]{
+  width: 72px;
+}
+
 .w-\[80\%\]{
   width: 80%;
 }
@@ -1692,6 +1768,10 @@ select{
   min-width: 11.5rem;
 }
 
+.min-w-\[112px\]{
+  min-width: 112px;
+}
+
 .min-w-\[140px\]{
   min-width: 140px;
 }
@@ -1716,6 +1796,10 @@ select{
   min-width: 48px;
 }
 
+.min-w-\[72px\]{
+  min-width: 72px;
+}
+
 .min-w-fit{
   min-width: -webkit-fit-content;
   min-width: -moz-fit-content;
@@ -1863,6 +1947,12 @@ select{
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-y-0{
+  --tw-translate-y: -0px;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .-translate-y-1{
   --tw-translate-y: -0.25rem;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1935,12 +2025,6 @@ select{
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-y-0{
-  --tw-translate-y: -0px;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-rotate-45{
   --tw-rotate: -45deg;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2009,6 +2093,25 @@ select{
           animation: bounce 1s infinite;
 }
 
+@-webkit-keyframes spin{
+  to{
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+@keyframes spin{
+  to{
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+.animate-spin{
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
 .cursor-default{
   cursor: default;
 }
@@ -2054,10 +2157,6 @@ select{
   flex-direction: row;
 }
 
-.flex-row-reverse{
-  flex-direction: row-reverse;
-}
-
 .flex-col{
   flex-direction: column;
 }
@@ -2166,6 +2265,14 @@ select{
   gap: 25rem;
 }
 
+.gap-\[9\.25rem\]{
+  gap: 9.25rem;
+}
+
+.gap-\[160px\]{
+  gap: 160px;
+}
+
 .gap-x-1{
   -webkit-column-gap: 0.25rem;
           column-gap: 0.25rem;
@@ -3501,6 +3608,18 @@ select{
   background-color: rgb(133 77 24 / var(--tw-bg-opacity));
 }
 
+.bg-neutral-0\/40{
+  background-color: rgb(255 255 255 / 0.4);
+}
+
+.bg-neutral-1000\/40{
+  background-color: rgb(0 6 21 / 0.4);
+}
+
+.bg-green-500\/40{
+  background-color: rgb(14 165 120 / 0.4);
+}
+
 .bg-opacity-30{
   --tw-bg-opacity: 0.3;
 }
@@ -5865,10 +5984,6 @@ select{
   padding: 0.625rem;
 }
 
-.p-20{
-  padding: 5rem;
-}
-
 .p-3{
   padding: 0.75rem;
 }
@@ -6038,11 +6153,25 @@ select{
   padding-bottom: 1.75rem;
 }
 
+.py-8{
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
 .py-\[1\.625rem\]{
   padding-top: 1.625rem;
   padding-bottom: 1.625rem;
 }
 
+.py-\[338px\]{
+  padding-top: 338px;
+  padding-bottom: 338px;
+}
+
+.pb-1{
+  padding-bottom: 0.25rem;
+}
+
 .pb-10{
   padding-bottom: 2.5rem;
 }
@@ -6219,6 +6348,10 @@ select{
   padding-top: 81px;
 }
 
+.pt-\[200px\]{
+  padding-top: 200px;
+}
+
 .text-left{
   text-align: left;
 }
@@ -7210,10 +7343,6 @@ select{
   transition-duration: 100ms;
 }
 
-.duration-1000{
-  transition-duration: 1000ms;
-}
-
 .duration-150{
   transition-duration: 150ms;
 }
@@ -8560,13 +8689,6 @@ select{
           animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-@-webkit-keyframes spin{
-  to{
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
-}
-
 @keyframes spin{
   to{
     -webkit-transform: rotate(360deg);
@@ -9091,6 +9213,11 @@ select{
   background-color: rgb(133 77 24 / var(--tw-bg-opacity));
 }
 
+.hover\:text-blue-500:hover{
+  --tw-text-opacity: 1;
+  color: rgb(57 112 253 / var(--tw-text-opacity));
+}
+
 .hover\:text-blue-600:hover{
   --tw-text-opacity: 1;
   color: rgb(30 86 227 / var(--tw-text-opacity));
@@ -9477,6 +9604,10 @@ select{
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.group:hover .group-hover\:stroke-blue-500{
+  stroke: #3970FD;
+}
+
 .group:hover .group-hover\:stroke-blue-600{
   stroke: #1E56E3;
 }
@@ -9561,6 +9692,18 @@ select{
   .mb-s\:rounded-tr-none{
     border-top-right-radius: 0px;
   }
+
+  .mb-s\:pl-6{
+    padding-left: 1.5rem;
+  }
+
+  .mb-s\:pl-8{
+    padding-left: 2rem;
+  }
+
+  .mb-s\:pt-0{
+    padding-top: 0px;
+  }
 }
 
 @media (min-width: 400px){