From 1c1df140959fc82e8b1af102e7e40ab9623ec50c Mon Sep 17 00:00:00 2001
From: kushagra-apptware <kushagra.porwal@apptware.com>
Date: Tue, 17 Sep 2024 19:49:08 +0530
Subject: [PATCH] Add Carousel for Case Study Section

---
 .../CaseStudy/case-study.module.scss          |  71 +++++++----
 .../_components/CaseStudy/caseStudyContent.js | 104 +++++++++++++++
 .../src/pages/_components/CaseStudy/index.js  | 118 ++++++------------
 3 files changed, 188 insertions(+), 105 deletions(-)
 create mode 100644 docs-website/src/pages/_components/CaseStudy/caseStudyContent.js

diff --git a/docs-website/src/pages/_components/CaseStudy/case-study.module.scss b/docs-website/src/pages/_components/CaseStudy/case-study.module.scss
index 7bf858b66a778..02acc2b2eead8 100644
--- a/docs-website/src/pages/_components/CaseStudy/case-study.module.scss
+++ b/docs-website/src/pages/_components/CaseStudy/case-study.module.scss
@@ -1,13 +1,13 @@
 .container {
   display: flex;
   flex-direction: column;
-  background: #fafafa;
+  background: #F4F4F5;
   font-family: "Manrope";
 }
 .case_study {
   display: flex;
   flex-direction: column;
-  width: 80vw;
+  width: 90vw;
   margin: 5rem auto;
 
   .case_study_heading {
@@ -25,38 +25,54 @@
   }
 
   .card_row {
-    display: flex;
-    gap: 1rem;
     margin-top: 30px;
 
+    .cardLink {
+      color: #000;
+      
+      &:hover {
+        text-decoration: none;
+      }
+    }
+    
     .card {
+      display: flex !important;
+      justify-content: space-between;
+      flex-direction: column;
       position: relative;
-      width: 25%;
-      border-radius: 20px;
+      width: 22rem !important;
+      min-height: 23.5rem !important;
+      border-radius: 23px;
       background: white;
-      padding: 5px;
+      padding: 0 0.2rem;
       padding-bottom: 15px;
 
       img {
-        width: 100%;
-        height: 70%;
+        min-width: 100%;
+        min-height: 40%;
         object-fit: cover;
-        border-radius: 15px;
+        border-radius: 16px;
+        padding: 5px;
       }
       .card_tag {
         position: absolute;
-        right: 0.8rem;
+        right: 1.2rem;
         top: 0.8rem;
         background: #edf2ff;
         color: rgb(58, 57, 57);
-        font-size: 10px;
+        font-size: 0.75rem;
+        font-family: 'Manrope';
+        font-weight: 600;
         padding: 0.3rem;
         border-radius: 0.5rem;
       }
       .card_heading_div {
         padding: 0 10px 10px;
+        text-align: start;
+
         .card_heading {
-          font-size: 1.5rem;
+          font-family: "Manrope";
+          font-size: 1.25rem;
           font-weight: bold;
         }
         .card_para {
@@ -64,6 +80,7 @@
           margin-top: 5px;
           line-height: normal;
           display: -webkit-box;
+          line-clamp: 2;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
           overflow: hidden;
@@ -97,7 +114,7 @@
   .case_study {
     display: flex;
     flex-direction: column;
-    width: 100%;
+    width: 40%;
     margin: 5rem auto;
 
     .case_study_heading {
@@ -121,39 +138,42 @@
     }
 
     .card_row {
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
       margin-top: 30px;
 
       .card {
         position: relative;
-        width: 100%;
-        border-radius: 20px;
+        width: 50%;
+        border-radius: 23px;
         background: white;
-        padding: 5px;
+        padding: 0 0.2rem;
         padding-bottom: 15px;
 
         img {
-          width: 100%;
-          height: 70%;
+          min-width: 100%;
+          min-height: 40%;
           object-fit: cover;
           border-radius: 15px;
+          padding: 5px;
         }
         .card_tag {
           position: absolute;
-          right: 0.8rem;
+          right: 1.2rem;
           top: 0.8rem;
           background: #edf2ff;
           color: rgb(58, 57, 57);
-          font-size: 10px;
+          font-size: 0.75rem;
+          font-family: 'Manrope';
+          font-weight: 600;
           padding: 0.3rem;
           border-radius: 0.5rem;
         }
         .card_heading_div {
           padding: 0 10px 10px;
+          text-align: start;
+
           .card_heading {
-            font-size: 1.5rem;
+            font-family: "Manrope";
+            font-size: 1.25rem;
             font-weight: bold;
           }
           .card_para {
@@ -161,6 +181,7 @@
             margin-top: 5px;
             line-height: normal;
             display: -webkit-box;
+            line-clamp: 2;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
             overflow: hidden;
diff --git a/docs-website/src/pages/_components/CaseStudy/caseStudyContent.js b/docs-website/src/pages/_components/CaseStudy/caseStudyContent.js
new file mode 100644
index 0000000000000..5bfdde5a8641b
--- /dev/null
+++ b/docs-website/src/pages/_components/CaseStudy/caseStudyContent.js
@@ -0,0 +1,104 @@
+const caseStudyData = [
+  {
+    title: "Make data democratization a reality",
+    description:
+      "Enable everyone in your organization to effortlessly discover trustworthy data, with experiences tailored for each persona.<span></span>Eliminate breaking changes with detailed cross-platform and column-level lineage. <span></span> Build confidence in your data with a comprehensive view of business, operational, and technical context, all in one place.",
+    tag: "Entertainment",
+    backgroundImage:
+      "https://i0.wp.com/picjumbo.com/wp-content/uploads/logo-netflix-free-photo.jpg",
+    image: "./Netflix.png",
+    link: "",
+  },
+  {
+    title: "Build trust in your data",
+    description:
+      "Effortlessly detect data quality issues with automated checks and AI-driven anomaly detection. <span></span> Notify your team where they work when issues arise and keep stakeholders in the loop with centralized incident tracking. <span></span> Spend minutes, not days, resolving issues with detailed lineage, documentation, and ownership information all in one place.",
+    tag: "Finance",
+    backgroundImage:
+      "https://cdn.pmnewsnigeria.com/wp-content/uploads/2021/09/bitcoin-255x175.jpg",
+    image: "",
+    link: "",
+  },
+  {
+    title: "Minimize compliance risk, effortlessly",
+    description:
+      "Ensure every data asset is accounted for and responsibility governed by defining and enforcing documentation standards. <span></span> Automate your governance program to automatically classify assets as they evolve over time. <span></span> Minimize redundant, manual work with GenAI documentation, AI-driven classification, smart propagation, and more.",
+    tag: "Medical",
+    backgroundImage:
+      "https://static.vecteezy.com/system/resources/thumbnails/002/414/650/small/hand-with-protective-gloves-holding-a-blood-samples-for-covid-test-free-photo.jpg",
+    image: "",
+    link: "",
+  },
+  {
+    title: "Minimize compliance risk, effortlessly",
+    description:
+      "Ensure every data asset is accounted for and responsibility governed by defining and enforcing documentation standards. <span></span> Automate your governance program to automatically classify assets as they evolve over time. <span></span> Minimize redundant, manual work with GenAI documentation, AI-driven classification, smart propagation, and more.",
+    tag: "E-Learning",
+    backgroundImage:
+      "https://static.vecteezy.com/system/resources/thumbnails/002/414/650/small/hand-with-protective-gloves-holding-a-blood-samples-for-covid-test-free-photo.jpg",
+    image: "",
+    link: "",
+  },
+  {
+    title: "Minimize compliance risk, effortlessly",
+    description:
+      "Ensure every data asset is accounted for and responsibility governed by defining and enforcing documentation standards. <span></span> Automate your governance program to automatically classify assets as they evolve over time. <span></span> Minimize redundant, manual work with GenAI documentation, AI-driven classification, smart propagation, and more.",
+    tag: "E-Learning",
+    backgroundImage:
+      "https://static.vecteezy.com/system/resources/thumbnails/002/414/650/small/hand-with-protective-gloves-holding-a-blood-samples-for-covid-test-free-photo.jpg",
+    image: "",
+    link: "",
+  },
+  {
+    title: "Make data democratization a reality",
+    description:
+      "Enable everyone in your organization to effortlessly discover trustworthy data, with experiences tailored for each persona.<span></span>Eliminate breaking changes with detailed cross-platform and column-level lineage. <span></span> Build confidence in your data with a comprehensive view of business, operational, and technical context, all in one place.",
+    tag: "Entertainment",
+    backgroundImage:
+      "https://i0.wp.com/picjumbo.com/wp-content/uploads/logo-netflix-free-photo.jpg",
+    image: "",
+    link: "",
+  },
+  {
+    title: "Build trust in your data",
+    description:
+      "Effortlessly detect data quality issues with automated checks and AI-driven anomaly detection. <span></span> Notify your team where they work when issues arise and keep stakeholders in the loop with centralized incident tracking. <span></span> Spend minutes, not days, resolving issues with detailed lineage, documentation, and ownership information all in one place.",
+    tag: "Finance",
+    backgroundImage:
+      "https://cdn.pmnewsnigeria.com/wp-content/uploads/2021/09/bitcoin-255x175.jpg",
+    image: "",
+    link: "",
+  },
+  {
+    title: "Minimize compliance risk, effortlessly",
+    description:
+      "Ensure every data asset is accounted for and responsibility governed by defining and enforcing documentation standards. <span></span> Automate your governance program to automatically classify assets as they evolve over time. <span></span> Minimize redundant, manual work with GenAI documentation, AI-driven classification, smart propagation, and more.",
+    tag: "Medical",
+    backgroundImage:
+      "https://static.vecteezy.com/system/resources/thumbnails/002/414/650/small/hand-with-protective-gloves-holding-a-blood-samples-for-covid-test-free-photo.jpg",
+    image: "",
+    link: "",
+  },
+  {
+    title: "Minimize compliance risk, effortlessly",
+    description:
+      "Ensure every data asset is accounted for and responsibility governed by defining and enforcing documentation standards. <span></span> Automate your governance program to automatically classify assets as they evolve over time. <span></span> Minimize redundant, manual work with GenAI documentation, AI-driven classification, smart propagation, and more.",
+    tag: "E-Learning",
+    backgroundImage:
+      "https://static.vecteezy.com/system/resources/thumbnails/002/414/650/small/hand-with-protective-gloves-holding-a-blood-samples-for-covid-test-free-photo.jpg",
+    image: "",
+    link: "",
+  },
+  {
+    title: "Minimize compliance risk, effortlessly",
+    description:
+      "Ensure every data asset is accounted for and responsibility governed by defining and enforcing documentation standards. <span></span> Automate your governance program to automatically classify assets as they evolve over time. <span></span> Minimize redundant, manual work with GenAI documentation, AI-driven classification, smart propagation, and more.",
+    tag: "E-Learning",
+    backgroundImage:
+      "https://cdn.pmnewsnigeria.com/wp-content/uploads/2021/09/bitcoin-255x175.jpg",
+    image: "",
+    link: "",
+  },
+];
+
+export default caseStudyData;
diff --git a/docs-website/src/pages/_components/CaseStudy/index.js b/docs-website/src/pages/_components/CaseStudy/index.js
index a695c32defa43..c1199fcea9708 100644
--- a/docs-website/src/pages/_components/CaseStudy/index.js
+++ b/docs-website/src/pages/_components/CaseStudy/index.js
@@ -1,8 +1,21 @@
 import React from "react";
 import styles from "./case-study.module.scss";
 import Link from '@docusaurus/Link'
+import { Carousel } from "antd";
+import caseStudyData from "./caseStudyContent";
+
+const contentStyle = {
+  height: "80%",
+  width: "100%",
+};
 
 const CaseStudy = () => {
+  const detectDeviceType = () =>
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    )
+      ? "Mobile"
+      : "Desktop";
   return (
     <div className={styles.container}>
       {/* Section-1 */}
@@ -13,88 +26,33 @@ const CaseStudy = () => {
         </div>
 
         <div className={styles.card_row}>
-          <div className={styles.card}>
-            <span className={styles.card_tag}>ENTERTAINMENT</span>
-            <img
-              src="https://i0.wp.com/picjumbo.com/wp-content/uploads/logo-netflix-free-photo.jpg"
-              alt=""
-            />
-            <div className={styles.card_heading_div}>
-              <div className={styles.card_heading}>
-                <span>Netflix Case Study</span>
-              </div>
-              <div className={styles.card_para}>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi,
-                minima!
-              </div>
-            </div>
-          </div>
-          <div className={styles.card}>
-            <span className={styles.card_tag}>FINANCE</span>
-            <img
-              src="https://cdn.pmnewsnigeria.com/wp-content/uploads/2021/09/bitcoin-255x175.jpg"
-              alt=""
-            />
-            <div className={styles.card_heading_div}>
-              <div className={styles.card_heading}>
-                <span>Netflix Case Study</span>
-              </div>
-              <div className={styles.card_para}>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi,
-                minima!
-              </div>
-            </div>
-          </div>
-          <div className={styles.card}>
-            <span className={styles.card_tag}>MEDICAL</span>
-            <img
-              src="https://static.vecteezy.com/system/resources/thumbnails/002/414/650/small/hand-with-protective-gloves-holding-a-blood-samples-for-covid-test-free-photo.jpg"
-              alt=""
-            />
-            <div className={styles.card_heading_div}>
-              <div className={styles.card_heading}>
-                <span>Netflix Case Study</span>
+          <Carousel
+            slidesToShow={detectDeviceType() === "Desktop" ? 4 : 1}
+            initialSlide={0}
+            draggable
+            style={contentStyle}
+          >
+            {caseStudyData.map((caseStudy, idx) => (
+              <div className={styles.card} key={idx}>
+                <a className={styles.cardLink} href={caseStudy.link}>
+                  <span className={styles.card_tag}>{caseStudy.tag}</span>
+                  <img src={caseStudy.backgroundImage} alt="" />
+                  <div className={styles.card_heading_div}>
+                    <div className={styles.card_heading}>
+                      <span>{caseStudy.title}</span>
+                    </div>
+                    <div
+                      className={styles.card_para}
+                      dangerouslySetInnerHTML={{
+                        __html: caseStudy.description,
+                      }}
+                    />
+                  </div>
+                </a>
               </div>
-              <div className={styles.card_para}>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi,
-                minima!
-              </div>
-            </div>
-          </div>{" "}
-          <div className={styles.card}>
-            <span className={styles.card_tag}>MEDICAL</span>
-            <img
-              src="https://static.vecteezy.com/system/resources/thumbnails/002/414/650/small/hand-with-protective-gloves-holding-a-blood-samples-for-covid-test-free-photo.jpg"
-              alt=""
-            />
-            <div className={styles.card_heading_div}>
-              <div className={styles.card_heading}>
-                <span>Netflix Case Study</span>
-              </div>
-              <div className={styles.card_para}>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi,
-                minima!
-              </div>
-            </div>
-          </div>
-          <div className={styles.card}>
-            <span className={styles.card_tag}>E-LEARNING</span>
-            <img
-              src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRySxTniNHamPd5PBUC-c6Hqsx-On1nM6eol71UJFWWd41qnrR8MXIkB0nuqT2Lnuahg7c&usqp=CAU"
-              alt=""
-            />
-            <div className={styles.card_heading_div}>
-              <div className={styles.card_heading}>
-                <span>Netflix Case Study</span>
-              </div>
-              <div className={styles.card_para}>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi,
-                minima!
-              </div>
-            </div>
-          </div>
+            ))}
+          </Carousel>
         </div>
-
         <Link className={styles.bottom_line} to="/adoption-stories">
           See all adoption stories →
         </Link>