corrected the placement for carousal

datahub-project · Sep 11, 2024 · d2e8ee0 · d2e8ee0
1 parent 35f684c
commit d2e8ee0
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 30 deletions.
diff --git a/docs-website/src/pages/_components/SocialMedia/index.js b/docs-website/src/pages/_components/SocialMedia/index.js
@@ -130,8 +130,9 @@ const SocialMedia = ({}) => {
           </div>
         </div>
       </div>
-      <div style={{ height: "100%", width: "45%" }}>
-        <Carousel slidesToShow={1} dotPosition="left" infinite autoplay>
+      <div className={styles.carousalContainer}>
+        <div className={styles.carousalWrapper}>
+        <Carousel slidesToShow={3} dotPosition="left" infinite autoplay>
           {sliderVideos.map((video, idx) => (
             <div className={styles.videoContainer} key={idx}>
               <video
@@ -154,32 +155,8 @@ const SocialMedia = ({}) => {
             </div>
           ))}
         </Carousel>
+        </div>
       </div>
-      {/* <Swiper
-        slidesPerView={2}
-        spaceBetween={30}
-        slidesPerGroup={3}
-        className={styles.videoStyles}
-        direction="vertical"
-        scrollbar={{ draggable: true }}
-        navigation
-      >
-        {sliderVideos.map((video, idx) => (
-          <SwiperSlide key={idx}>
-            <div className={styles.videoContainer}>
-              <video
-                autoPlay
-                width="100%"
-                height="auto"
-                src={video.videoUrl}
-                className={styles.video}
-              />
-              <div className={styles.videoTitle}>{video.title}</div>
-              <div className={styles.videoDescription}>{video.description}</div>
-            </div>
-          </SwiperSlide>
-        ))}
-      </Swiper> */}
     </div>
   );
 };

diff --git a/docs-website/src/pages/_components/SocialMedia/socialmedia.module.scss b/docs-website/src/pages/_components/SocialMedia/socialmedia.module.scss
@@ -9,7 +9,6 @@
   height: 90vh;
   border-radius: 50px;
   background-color: #9297aa;
-  padding: 80px;
   position: relative;
 }
 
@@ -35,6 +34,7 @@
   display: flex;
   justify-content: flex-start;
   height: 100%;
+  padding: 80px 0 80px 80px;
 }
 
 .socialSubText {
@@ -134,9 +134,43 @@
   gap: 10px;
 }
 
+.carousalContainer{
+  height: 100%;
+  width: 45%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.carousalWrapper{
+  width: 50%;
+}
+
+.carousalWrapper::before,
+.carousalWrapper::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  right: 0;
+  height: 50px;
+  width: 70%;
+  z-index: 9;
+  transform: translateX(-50%);
+}
+.carousalWrapper::before {
+  top: 0;
+  background: linear-gradient(0deg, #989CAC 0%, rgba(152, 156, 172, 0.00) 106.38%);
+}
+
+.carousalWrapper::after {
+  bottom: 0;
+  background: linear-gradient(180deg, #989CAC 0%, rgba(152, 156, 172, 0.00) 106.38%);
+}
+
 .videoContainer {
-  width: 80% !important;
-  height: 25rem;
+  height: 23rem;
   padding: 10px;
   margin-bottom: 40px;
   border: 1px solid white;