From 6bdc120575d2898b79bea418ac42493306b0b547 Mon Sep 17 00:00:00 2001 From: Pat Losoponkul Date: Tue, 6 Jan 2026 23:28:08 +0700 Subject: [PATCH 1/6] feat: add get involved section with button color variants Signed-off-by: Pat Losoponkul --- src/components/button/index.js | 17 ++++++++-- src/components/button/styles.module.css | 15 ++++++--- src/components/features/index.js | 3 +- src/components/get-involved/index.js | 21 ++++++++++++ src/components/get-involved/styles.module.css | 33 +++++++++++++++++++ 5 files changed, 81 insertions(+), 8 deletions(-) create mode 100644 src/components/get-involved/index.js create mode 100644 src/components/get-involved/styles.module.css diff --git a/src/components/button/index.js b/src/components/button/index.js index 86b446d407..df3cb02588 100644 --- a/src/components/button/index.js +++ b/src/components/button/index.js @@ -1,7 +1,18 @@ import React, {useCallback, useRef} from 'react'; import Link from '@docusaurus/Link'; import styles from './styles.module.css' -export default function Button({to, className, children}) { + +const VALID_COLORS = ['primary', 'secondary']; + +/** + * @param {Object} props + * @param {string} props.to - Link destination + * @param {string} [props.className] - Additional CSS classes + * @param {React.ReactNode} props.children - Button content + * @param {'primary'|'secondary'} [props.color='primary'] - Button color variant + */ +export default function Button({to, className, children, color = 'primary'}) { + const validColor = VALID_COLORS.includes(color) ? color : 'primary'; const lightRef = useRef(null); const handleMouseMove = useCallback((event) => { @@ -28,9 +39,9 @@ export default function Button({to, className, children}) { }, {fill: "forwards", duration: 500}) }, []) return ( - + {children}
) -} \ No newline at end of file +} diff --git a/src/components/button/styles.module.css b/src/components/button/styles.module.css index 510525b3bc..9dd0bb8e2a 100644 --- a/src/components/button/styles.module.css +++ b/src/components/button/styles.module.css @@ -3,15 +3,22 @@ margin-top: 1.5rem; cursor: pointer; border-radius: 5rem; - background-color: var(--ifm-color-primary); padding: .7rem 1.5rem; - color: #fff; font-weight: 500; overflow: hidden; + transition: all 0.3s ease; } -.button:hover { +.button.primary { + background-color: var(--ifm-color-primary); color: white; + border: 2px solid var(--ifm-color-primary); +} + +.button.secondary { + background-color: transparent; + color: var(--ifm-color-primary); + border: 2px solid var(--ifm-color-primary); } .button:hover .light { @@ -30,4 +37,4 @@ border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .1) 0%, transparent 70%); z-index: 10; -} \ No newline at end of file +} diff --git a/src/components/features/index.js b/src/components/features/index.js index 968bb226f2..4a019822a4 100644 --- a/src/components/features/index.js +++ b/src/components/features/index.js @@ -3,6 +3,7 @@ import clsx from 'clsx'; import styles from './styles.module.css'; import HomeResources from '../resources'; import { FutureOfIdentity } from '../resources'; +import GetInvolved from '../get-involved'; const FeatureList = [ @@ -70,7 +71,7 @@ export default function HomepageFeatures() { ))}
- + ); diff --git a/src/components/get-involved/index.js b/src/components/get-involved/index.js new file mode 100644 index 0000000000..cf2704de69 --- /dev/null +++ b/src/components/get-involved/index.js @@ -0,0 +1,21 @@ +import React from 'react'; +import Button from '../button'; +import styles from './styles.module.css'; + +export default function GetInvolved() { + return ( +
+
+

Get Involved

+
+ + +
+
+
+ ); +} diff --git a/src/components/get-involved/styles.module.css b/src/components/get-involved/styles.module.css new file mode 100644 index 0000000000..27960c1d40 --- /dev/null +++ b/src/components/get-involved/styles.module.css @@ -0,0 +1,33 @@ +.getInvolved { + padding: 4rem 0; + text-align: center; +} + +.heading { + margin-bottom: 2rem; + font-size: clamp(1.75rem, 4vw, 2.5rem); + font-weight: 600; + color: var(--ifm-heading-color); +} + +.buttonGroup { + display: flex; + gap: 1rem; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +/* Mobile: Stack vertically */ +@media screen and (max-width: 768px) { + .buttonGroup { + flex-direction: column; + width: 100%; + max-width: 300px; + margin: 0 auto; + } + + .buttonGroup > * { + width: 100%; + } +} From fbf5ddad762e3098c32f1efd47f74ebb9a1fd304 Mon Sep 17 00:00:00 2001 From: Pat Losoponkul Date: Thu, 8 Jan 2026 13:16:11 +0700 Subject: [PATCH 2/6] feat: add community calls meeting link to get involved section Signed-off-by: Pat Losoponkul --- src/components/get-involved/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/get-involved/index.js b/src/components/get-involved/index.js index cf2704de69..0cd1936850 100644 --- a/src/components/get-involved/index.js +++ b/src/components/get-involved/index.js @@ -11,7 +11,7 @@ export default function GetInvolved() { - From b0e5bfad3f8515d12e0651f81c2596d633a50fa5 Mon Sep 17 00:00:00 2001 From: Pat Losoponkul Date: Thu, 8 Jan 2026 13:41:19 +0700 Subject: [PATCH 3/6] style: adjust breakpoint for button group layout Signed-off-by: Pat Losoponkul --- src/components/get-involved/styles.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/get-involved/styles.module.css b/src/components/get-involved/styles.module.css index 27960c1d40..a84e6895c8 100644 --- a/src/components/get-involved/styles.module.css +++ b/src/components/get-involved/styles.module.css @@ -19,14 +19,14 @@ } /* Mobile: Stack vertically */ -@media screen and (max-width: 768px) { +@media (max-width: 996px) { .buttonGroup { flex-direction: column; width: 100%; max-width: 300px; margin: 0 auto; } - + .buttonGroup > * { width: 100%; } From d6282afe4759e2deda157e1700d2da212637197c Mon Sep 17 00:00:00 2001 From: Pat Losoponkul Date: Thu, 8 Jan 2026 13:53:38 +0700 Subject: [PATCH 4/6] refactor: use CSS variable for large breakpoint in button group Signed-off-by: Pat Losoponkul --- src/components/get-involved/styles.module.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/get-involved/styles.module.css b/src/components/get-involved/styles.module.css index a84e6895c8..a6dc4ba3c3 100644 --- a/src/components/get-involved/styles.module.css +++ b/src/components/get-involved/styles.module.css @@ -18,8 +18,7 @@ flex-wrap: wrap; } -/* Mobile: Stack vertically */ -@media (max-width: 996px) { +@media (max-width: var(--ifm-breakpoint-lg)) { .buttonGroup { flex-direction: column; width: 100%; From 6d4cad22fd7a2a86747666ef80957744af5fc62b Mon Sep 17 00:00:00 2001 From: Pat Losoponkul Date: Thu, 8 Jan 2026 14:11:09 +0700 Subject: [PATCH 5/6] style: remove transition from button component Signed-off-by: Pat Losoponkul --- src/components/button/styles.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/button/styles.module.css b/src/components/button/styles.module.css index 9dd0bb8e2a..6f4a6ae7d1 100644 --- a/src/components/button/styles.module.css +++ b/src/components/button/styles.module.css @@ -6,7 +6,6 @@ padding: .7rem 1.5rem; font-weight: 500; overflow: hidden; - transition: all 0.3s ease; } .button.primary { From a9da1ac9bd04dade970029100872f4043dcd13b6 Mon Sep 17 00:00:00 2001 From: Pat Losoponkul Date: Mon, 19 Jan 2026 21:59:06 +0700 Subject: [PATCH 6/6] Update Chat to Us button link Signed-off-by: Pat Losoponkul --- src/components/get-involved/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/get-involved/index.js b/src/components/get-involved/index.js index 0cd1936850..79c73cd453 100644 --- a/src/components/get-involved/index.js +++ b/src/components/get-involved/index.js @@ -8,7 +8,7 @@ export default function GetInvolved() {

Get Involved

-