Skip to content

Commit

Permalink
Added social media section
Browse files Browse the repository at this point in the history
  • Loading branch information
@aditya-chaphekar
aditya-chaphekar committed Sep 10, 2024
1 parent 46bbd09 commit f16a7b8
Show file tree
Hide file tree
Showing 5 changed files with 415 additions and 96 deletions.
217 changes: 125 additions & 92 deletions docs-website/src/pages/_components/CaseStudy/case-study.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,98 @@
.container {
position: relative;
display: flex;
flex-direction: column;
background: #fafafa;
font-family: "Manrope";
}

.case_study {
display: flex;
flex-direction: column;
width: 80vw;
margin: 5rem auto;
position: relative;

.case_study_heading {
text-align: center;
font-family: "Manrope";
.arrow {
position: absolute;
top: 45%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.3);
color: white;
border: none;
padding: 10px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
}

div {
font-size: 3.5rem;
line-height: normal;
}
p {
font-size: 1.8rem;
margin-top: 10px;
}
.left_arrow {
left: -40px;
}

.right_arrow {
right: -40px;
}

.card_row {
display: flex;
gap: 1rem;
margin-top: 30px;
overflow-x: auto;
white-space: nowrap;
scroll-behavior: smooth;
-ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
scrollbar-width: none; /* Hide scrollbar in Firefox */
}

.card {
position: relative;
width: 25%;
border-radius: 20px;
background: white;
padding: 5px;
padding-bottom: 15px;
.card_row::-webkit-scrollbar {
display: none; /* Hide scrollbar in Chrome, Safari, and Opera */
}

img {
width: 100%;
height: 70%;
object-fit: cover;
border-radius: 15px;
}
.card_tag {
position: absolute;
right: 0.8rem;
top: 0.8rem;
background: #edf2ff;
color: rgb(58, 57, 57);
font-size: 10px;
padding: 0.3rem;
border-radius: 0.5rem;
.card {
flex: 0 0 auto;
width: 25%;
min-width: 300px;
border-radius: 20px;
background: white;
padding: 5px;
padding-bottom: 15px;

img {
width: 100%;
height: 70%;
object-fit: cover;
border-radius: 15px;
}

.card_tag {
position: absolute;
right: 0.8rem;
top: 0.8rem;
background: #edf2ff;
color: rgb(58, 57, 57);
font-size: 10px;
padding: 0.3rem;
border-radius: 0.5rem;
}

.card_heading_div {
padding: 0 10px 10px;

.card_heading {
font-size: 1.5rem;
font-weight: bold;
}
.card_heading_div {
padding: 0 10px 10px;
.card_heading {
font-size: 1.5rem;
font-weight: bold;
}
.card_para {
font-size: 1rem;
margin-top: 5px;
line-height: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

.card_para {
font-size: 1rem;
margin-top: 5px;
line-height: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
Expand All @@ -94,8 +118,6 @@

@media (max-width: 480px) {
.case_study {
display: flex;
flex-direction: column;
width: 100%;
margin: 5rem auto;

Expand All @@ -110,6 +132,7 @@
line-height: normal;
font-weight: 500;
}

p {
width: 65%;
margin: auto;
Expand All @@ -120,51 +143,61 @@
}

.card_row {
display: flex;
flex-direction: column;
flex-direction: row;
gap: 1rem;
margin-top: 30px;
overflow-x: scroll;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
}

.card_row::-webkit-scrollbar {
display: none;
}

.card {
position: relative;
.card {
min-width: 70%;
flex-shrink: 0;
border-radius: 20px;
background: white;
padding: 5px;
padding-bottom: 15px;

img {
width: 100%;
border-radius: 20px;
background: white;
padding: 5px;
padding-bottom: 15px;

img {
width: 100%;
height: 70%;
object-fit: cover;
border-radius: 15px;
}
.card_tag {
position: absolute;
right: 0.8rem;
top: 0.8rem;
background: #edf2ff;
color: rgb(58, 57, 57);
font-size: 10px;
padding: 0.3rem;
border-radius: 0.5rem;
height: 70%;
object-fit: cover;
border-radius: 15px;
}

.card_tag {
position: absolute;
right: 0.8rem;
top: 0.8rem;
background: #edf2ff;
color: rgb(58, 57, 57);
font-size: 10px;
padding: 0.3rem;
border-radius: 0.5rem;
}

.card_heading_div {
padding: 0 10px 10px;

.card_heading {
font-size: 1.5rem;
font-weight: bold;
}
.card_heading_div {
padding: 0 10px 10px;
.card_heading {
font-size: 1.5rem;
font-weight: bold;
}
.card_para {
font-size: 1rem;
margin-top: 5px;
line-height: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

.card_para {
font-size: 1rem;
margin-top: 5px;
line-height: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
Expand Down
47 changes: 43 additions & 4 deletions docs-website/src/pages/_components/CaseStudy/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,48 @@
import React from "react";
import React, { useRef } from "react";
import styles from "./case-study.module.scss";

const CaseStudy = () => {
const cardRowRef = useRef(null);

const handleScrollRight = () => {
const slider = cardRowRef.current;
slider.scrollBy({
left: 300,
behavior: "smooth",
});
};

const handleScrollLeft = () => {
const slider = cardRowRef.current;
slider.scrollBy({
left: -300,
behavior: "smooth",
});
};

return (
<div className={styles.container}>
{/* Section-1 */}
<div className={styles.case_study}>
<div className={styles.case_study_heading}>
<div>See how Industry leaders use the Datahub</div>
<p>Across finance, healthcare, e-commerce and more.</p>
</div>

<div className={styles.card_row}>

<button
className={`${styles.arrow} ${styles.left_arrow}`}
onClick={handleScrollLeft}
>
←
</button>

<div className={styles.card_row} ref={cardRowRef}>

<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=""
alt="Netflix Case Study"
/>
<div className={styles.card_heading_div}>
<div className={styles.card_heading}>
Expand All @@ -28,6 +54,7 @@ const CaseStudy = () => {
</div>
</div>
</div>

<div className={styles.card}>
<span className={styles.card_tag}>FINANCE</span>
<img
Expand All @@ -44,6 +71,7 @@ const CaseStudy = () => {
</div>
</div>
</div>

<div className={styles.card}>
<span className={styles.card_tag}>MEDICAL</span>
<img
Expand All @@ -60,6 +88,7 @@ const CaseStudy = () => {
</div>
</div>
</div>{" "}

<div className={styles.card}>
<span className={styles.card_tag}>MEDICAL</span>
<img
Expand All @@ -76,6 +105,7 @@ const CaseStudy = () => {
</div>
</div>
</div>

<div className={styles.card}>
<span className={styles.card_tag}>E-LEARNING</span>
<img
Expand All @@ -92,8 +122,17 @@ const CaseStudy = () => {
</div>
</div>
</div>

</div>

{/* Right Arrow */}
<button
className={`${styles.arrow} ${styles.right_arrow}`}
onClick={handleScrollRight}
>
→
</button>

<div className={styles.bottom_line}>
See all adoption stories<span>→</span>
</div>
Expand Down
Loading

0 comments on commit f16a7b8

Please sign in to comment.