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%; + } +}