diff --git a/docs-website/src/pages/_components/Community/community.module.scss b/docs-website/src/pages/_components/Community/community.module.scss index 5302902cfb817..3d06eb8fc47b5 100644 --- a/docs-website/src/pages/_components/Community/community.module.scss +++ b/docs-website/src/pages/_components/Community/community.module.scss @@ -3,40 +3,15 @@ flex-direction: column; background: #fafafa; } + .community_section { position: relative; display: flex; justify-content: space-between; font-family: "Manrope"; - // &::before { - // position: absolute; - // content: ""; - // top: 0; - // left: 50%; - // transform: translateX(-50%); - // width: 80%; - // height: 60px; - // background-color: #ffffff; - // border-bottom-left-radius: 10px; - // border-bottom-right-radius: 10px; - // } - - // &::after { - // position: absolute; - // content: ""; - // bottom: 0; - // left: 50%; - // transform: translateX(-50%); - // width: 80%; - // height: 60px; - // background-color: #ffffff; - // border-top-left-radius: 10px; - // border-top-right-radius: 10px; - // } - .community_section_left { - padding: 20px 0; + padding: 100px 0; width: 60%; height: 100%; background: #3e2644; @@ -47,18 +22,21 @@ .community_section_left_content { margin: 5rem auto; + .community_section_heading { color: rgba($color: #fff, $alpha: 0.4); font-size: 3.5rem; line-height: normal; font-weight: bold; } + p { font-size: 1.2rem; color: rgba($color: #fff, $alpha: 0.6); font-weight: light; margin-top: 10px; } + a { cursor: pointer; display: inline-block; @@ -70,22 +48,33 @@ outline: none; border: 1px solid white; color: white; + text-decoration: none; } } } + .community_section_right { width: 40%; background: #000000; flex: 1; color: white; - padding: 100px 50px; display: flex; justify-content: center; flex-direction: column; font-family: "Manrope"; + .community_section_subText { + padding: 100px 50px 50px; + color: white; + font-size: 28px; + + a { + text-decoration: none; + } + } + .community_section_heading { - color: rgba($color: #fff, $alpha: 0.9); + color: rgba($color: #fff, $alpha: 0.4); font-size: 1.5rem; line-height: normal; font-weight: bold; @@ -95,15 +84,16 @@ font-weight: 300; cursor: pointer; display: inline-flex; - font-size: 1.2rem; + font-size: 20px; background-color: transparent; padding: 10px 20px; border-radius: 50px; outline: none; - border: 1px solid white; + border: 0.89px solid #E9EAEE; color: white; align-items: center; gap: 8px; + } } } @@ -156,18 +146,21 @@ .community_section_left_content { width: 80%; margin: 2rem auto 5rem 2rem; + .community_section_heading { color: rgba($color: #fff, $alpha: 0.4); font-size: 1.7rem; line-height: normal; font-weight: bold; } + p { font-size: 0.8rem; color: rgba($color: #fff, $alpha: 0.6); font-weight: light; margin-top: 10px; } + a { cursor: pointer; display: inline-block; @@ -182,6 +175,7 @@ } } } + .community_section_right { width: 100%; background: #000000; @@ -196,7 +190,8 @@ .community_section_heading { width: 80%; margin: 2rem auto 10rem 2rem; - div{ + + div { color: white; font-size: 1.2rem; line-height: normal; @@ -222,3 +217,132 @@ } } } + +.carouselContainer { + width: 100%; + background-color: #000; + min-height: 100px; + min-width: 400px; +} + +.slider { + background: #000; + height: 100px; + margin: auto; + overflow: hidden; + position: relative; + display: flex; + align-items: center; + width: 100%; + + &::before, + &::after { + position: absolute; + content: ''; + width: 90%; + height: 100%; + z-index: 9; + } + + &::before { + left: 0; + background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 70%); + } + + &::after { + right: 0; + background: linear-gradient(90deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%); + } +} + +.carouselContainer { + overflow: hidden; +} + +.slider { + position: relative; +} + +.slide_track { + display: flex; + width: calc(100px * 6 * 2); + /* Width of the track */ + animation: scroll 15s linear infinite; +} + +.slide { + width: 100px; + height: 100px; + margin-left: 15px; + display: flex; + justify-content: center; + overflow: hidden; + flex-direction: column; + align-items: center; + position: relative; +} + +.slide img { + height: 100%; + width: 100%; +} + +@keyframes scroll { + 0% { + transform: translateX(0); + } + + 100% { + transform: translateX(-50%); + } +} + +.slide::after { + position: absolute; + right: 5px; + top: 6px; + content: ''; + width: 18px; + height: 18px; + background-image: url("/static/img/slack/Crown.png"); + background-repeat: no-repeat; + background-size: contain; +} + +.slide::before { + width: 25px; + height: 25px; + border-radius: 25px; + right: 2px; + top: 2px; + position: absolute; + content: ''; + background: white; + display: flex; + align-items: center; + justify-content: center; +} + + +.numberContainer { + display: inline-block; + width: 190px; + text-align: right; +} + +@keyframes slideIn { + 0% { + opacity: 0; + transform: translateY(20px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.numberChange { + display: inline-block; + animation: slideIn 0.5s ease-in-out; +} \ No newline at end of file diff --git a/docs-website/src/pages/_components/Community/index.js b/docs-website/src/pages/_components/Community/index.js index 72cda17409e4d..9f1fcc1d5b7bf 100644 --- a/docs-website/src/pages/_components/Community/index.js +++ b/docs-website/src/pages/_components/Community/index.js @@ -1,8 +1,49 @@ -import React from "react"; +import React, { useState, useRef } from "react"; import styles from "./community.module.scss"; import useBaseUrl from "@docusaurus/useBaseUrl"; +import Item1 from "../../../../static/img/slack/slack-community-user-1.png"; +import Item2 from "../../../../static/img/slack/slack-community-user-2.png"; +import Item3 from "../../../../static/img/slack/slack-community-user-3.png"; +import Item4 from "../../../../static/img/slack/slack-community-user-4.png"; +import Item5 from "../../../../static/img/slack/slack-community-user-5.png"; +import Item6 from "../../../../static/img/slack/slack-community-user-6.png"; const Community = () => { + const [count, setCount] = useState(10235); + const [hasAnimated, setHasAnimated] = useState(false); + const counterRef = useRef(null); + + const handleScroll = () => { + if (!hasAnimated && counterRef.current) { + const { top } = counterRef.current.getBoundingClientRect(); + const windowHeight = window.innerHeight; + + if (top <= windowHeight) { + setHasAnimated(true); + animateNumber(); + } + } + }; + + const animateNumber = () => { + let currentCount = 10335; + const targetCount = 10500; + const increment = 1; + + const interval = setInterval(() => { + if (currentCount < targetCount) { + currentCount += increment; + setCount(currentCount); + } else { + clearInterval(interval); + } + }, 50); + }; + + const formattedCount = count.toLocaleString(); + + window.onscroll = handleScroll; + return (
@@ -15,13 +56,15 @@ const Community = () => { width={30} height={30} src={useBaseUrl("/img/logos/companies/slack.svg")} + alt="Slack" /> - - 10,332 + + + {formattedCount} + {" "} strong.
@@ -30,18 +73,40 @@ const Community = () => { Q&A. Office Hours.  Monthly Town Hall.  Job Postings.

- Join Slack + Join Slack
-
- With 500+ contributors
world wide. +
+
+ With{" "} + GitHub{" "} + 500+ contributors
world-wide. +
+ Open GitHub +
+
+
+
+ {/* Duplicate the slides */} + {[...Array(2)].map((_, i) => ( + + {[Item1, Item2, Item3, Item4, Item5, Item6].map((item, index) => ( +
+ {`Item +
+ ))} + + ))} +
+
- - - Open Github -
diff --git a/docs-website/static/img/slack/Crown.png b/docs-website/static/img/slack/Crown.png new file mode 100644 index 0000000000000..e04a9a4a644eb Binary files /dev/null and b/docs-website/static/img/slack/Crown.png differ diff --git a/docs-website/static/img/slack/slack-community-user-1.png b/docs-website/static/img/slack/slack-community-user-1.png new file mode 100644 index 0000000000000..91871e061057f Binary files /dev/null and b/docs-website/static/img/slack/slack-community-user-1.png differ diff --git a/docs-website/static/img/slack/slack-community-user-2.png b/docs-website/static/img/slack/slack-community-user-2.png new file mode 100644 index 0000000000000..a8f5db35a1b65 Binary files /dev/null and b/docs-website/static/img/slack/slack-community-user-2.png differ diff --git a/docs-website/static/img/slack/slack-community-user-3.png b/docs-website/static/img/slack/slack-community-user-3.png new file mode 100644 index 0000000000000..a7bf41cb07394 Binary files /dev/null and b/docs-website/static/img/slack/slack-community-user-3.png differ diff --git a/docs-website/static/img/slack/slack-community-user-4.png b/docs-website/static/img/slack/slack-community-user-4.png new file mode 100644 index 0000000000000..b6a483056d69c Binary files /dev/null and b/docs-website/static/img/slack/slack-community-user-4.png differ diff --git a/docs-website/static/img/slack/slack-community-user-5.png b/docs-website/static/img/slack/slack-community-user-5.png new file mode 100644 index 0000000000000..ebe7d9af54c5b Binary files /dev/null and b/docs-website/static/img/slack/slack-community-user-5.png differ diff --git a/docs-website/static/img/slack/slack-community-user-6.png b/docs-website/static/img/slack/slack-community-user-6.png new file mode 100644 index 0000000000000..fcbf4f78a1a98 Binary files /dev/null and b/docs-website/static/img/slack/slack-community-user-6.png differ