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..6f4a6ae7d1 100644
--- a/src/components/button/styles.module.css
+++ b/src/components/button/styles.module.css
@@ -3,15 +3,21 @@
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;
}
-.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 +36,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..79c73cd453
--- /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..a6dc4ba3c3
--- /dev/null
+++ b/src/components/get-involved/styles.module.css
@@ -0,0 +1,32 @@
+.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;
+}
+
+@media (max-width: var(--ifm-breakpoint-lg)) {
+ .buttonGroup {
+ flex-direction: column;
+ width: 100%;
+ max-width: 300px;
+ margin: 0 auto;
+ }
+
+ .buttonGroup > * {
+ width: 100%;
+ }
+}