Skip to content

Commit

Permalink
add hover state for social media icons, refactor for video
Browse files Browse the repository at this point in the history
  • Loading branch information
@kushagra-apptware
kushagra-apptware committed Sep 11, 2024
1 parent e9ad60c commit 35f684c
Show file tree
Hide file tree
Showing 3 changed files with 177 additions and 29 deletions.
Binary file added docs-website/src/pages/_components/SocialMedia/demo.mp4
View file
Binary file not shown.
105 changes: 95 additions & 10 deletions docs-website/src/pages/_components/SocialMedia/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import styles from "./socialmedia.module.scss";
import "swiper/css";
import "swiper/css/pagination";
Expand All @@ -8,7 +8,32 @@ import {
MediumWorkmarkOutlined,
YoutubeOutlined,
} from "@ant-design/icons";
import video from "./demo.mp4";
import { Carousel } from "antd";

const sliderVideos = [
{
videoUrl: video,
title: "Kathleen Maley from Experian talks about data leadership",
description: "VP Data Analytics, Experian",
date: "12 Aug 2024",
subscriberCount: "12k",
},
{
videoUrl: video,
title: "Kathleen Maley from Experian talks about data leadership",
description: "VP Data Analytics, Experian",
date: "12 Aug 2024",
subscriberCount: "12k",
},
{
videoUrl: video,
title: "Kathleen Maley from Experian talks about data leadership",
description: "VP Data Analytics, Experian",
date: "12 Aug 2024",
subscriberCount: "12k",
},
];

const SocialMedia = ({}) => {
return (
Expand All @@ -20,21 +45,13 @@ const SocialMedia = ({}) => {
Data Practitioners
</div>
</div>
<div style={{ height: "40vh" }}></div>
<div className={styles.socialMediaSection}>
<div className={styles.socialSubText}>
Born at LinkedIn, driven by Acryl <br />
and 500+ community contributors.
</div>
<div className={styles.socialStats}>
<div
className={styles.statItem}
style={{
background: "#A2A6B4",
border: "1px solid #ffffff",
position: "relative",
}}
>
<div className={styles.statItem}>
<div className={styles.styledIcon}>
<YoutubeOutlined
width={38}
Expand Down Expand Up @@ -65,6 +82,12 @@ const SocialMedia = ({}) => {
LinkedIn
<div className={styles.followerCount}>3.5k followers</div>
</div>
<ArrowUpOutlined
width={13}
height={13}
rotate={45}
className={styles.visitPageIcon}
/>
</div>
<div className={styles.statItem}>
<div className={styles.styledIcon}>
Expand All @@ -78,6 +101,12 @@ const SocialMedia = ({}) => {
Newsletter
<div className={styles.followerCount}>900 subscribers</div>
</div>
<ArrowUpOutlined
width={13}
height={13}
rotate={45}
className={styles.visitPageIcon}
/>
</div>
<div className={styles.statItem}>
<div className={styles.styledIcon}>
Expand All @@ -91,10 +120,66 @@ const SocialMedia = ({}) => {
Medium
<div className={styles.followerCount}>1k subscribers</div>
</div>
<ArrowUpOutlined
width={13}
height={13}
rotate={45}
className={styles.visitPageIcon}
/>
</div>
</div>
</div>
</div>
<div style={{ height: "100%", width: "45%" }}>
<Carousel slidesToShow={1} dotPosition="left" infinite autoplay>
{sliderVideos.map((video, idx) => (
<div className={styles.videoContainer} key={idx}>
<video
autoPlay
width="100%"
height="auto"
src={video.videoUrl}
className={styles.video}
/>
<div className={styles.videoTitle}>{video.title}</div>
<div className={styles.videoDetails}>
<div className={styles.videoDescription}>
{video.description}
</div>
<div className={styles.divider}>.</div>
<div className={styles.videoDescription}>{video.date}</div>
<div className={styles.divider}>.</div>
<div>{video.subscriberCount}</div>
</div>
</div>
))}
</Carousel>
</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>
);
};
Expand Down
101 changes: 82 additions & 19 deletions docs-website/src/pages/_components/SocialMedia/socialmedia.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,22 @@
display: flex;
justify-content: space-between;
align-items: center;
margin: auto;
margin: 60px auto;
width: 90vw;
height: 90vh;
border-radius: 50px;
background-color: #9297AA;
padding: 25px;
background-color: #9297aa;
padding: 80px;
position: relative;
}

.upperBox {
border-radius: 40px;
width: 45%;
width: 27%;
height: 25%;
background-color: #f3f3f5;
color: #000;
font-size: 24px;
font-size: 1.6rem;
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -33,24 +33,24 @@
.mainBox {
color: #fff;
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 100%;
}

.socialSubText {
font-size: 30px;
font-size: 1.8rem;
font-weight: 400;
text-align: left;
}

.socialStats {
display:grid;
display: grid;
gap: 10px;
width: fit-content;
height: fit-content;
grid-template-columns: 260px 260px;
grid-column-gap: 40px;
grid-column-gap: 50px;
margin-top: 20px;
margin-bottom: 70px;
}

.mediaIcons > svg {
Expand All @@ -60,25 +60,24 @@
}

.followerCount {
font-size: 23px;
font-size: 1.2rem;
font-weight: 400;
}

.styledIcon {
width: 74px;
height: 74px;
min-width: 74px;
min-height: 74px;
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;

}

.visitPageIcon {
position: absolute;
top: 10px;
right: 10px,
right: 10px;
}

.visitPageIcon > svg {
Expand All @@ -87,13 +86,30 @@

.statItem {
border-radius: 20px;
padding: 10px;
width: max-content;
padding: 7px;
width: 20rem;
height: fit-content;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 14px;
border: 2px solid transparent;
transition: background-color 0.3s ease, border-color 0.3s ease;
}

.statItem:hover {
background-color: #a2a6b4;
border-color: #ffffff;
position: relative;
}

.visitPageIcon {
opacity: 0;
transition: opacity 0.3s ease;
}

.statItem:hover .visitPageIcon {
opacity: 1;
}

.statName {
Expand All @@ -107,7 +123,54 @@

.socialMediaSection {
display: flex;
justify-content: flex-start;
justify-content: flex-end;
flex-direction: column;
align-items: flex-start;
}
}

.videoStyles {
height: 100%;
width: 35%;
gap: 10px;
}

.videoContainer {
width: 80% !important;
height: 25rem;
padding: 10px;
margin-bottom: 40px;
border: 1px solid white;
border-radius: 30px;
background: white;
}

.videoTitle {
font-size: 20px;
font-weight: 500;
color: rgba(46, 46, 56, 1);
}

.video {
border-radius: 16px;
}

.videoDescription {
font-size: 14px;
font-weight: 400;
color: #838ba8;
}

.videoDetails {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
}

.divider {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 7px;
color: #838ba8;
}

0 comments on commit 35f684c

Please sign in to comment.