feat: add CTA section

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 (
-        <Link to={to} className={`${styles.button} ${className}`} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+        <Link to={to} className={`${styles.button} ${styles[validColor]} ${className || ''}`} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
             {children}
             <div className={styles.light} ref={lightRef}/>
         </Link>
     )
-}
+}

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

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() {
                         <Feature key={idx} {...props} />
                     ))}
                 </div>
-
+                <GetInvolved />
             </div>
         </section>
     );

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 (
+        <section className={styles.getInvolved}>
+            <div className="container">
+                <h2 className={styles.heading}>Get Involved</h2>
+                <div className={styles.buttonGroup}>
+                    <Button to="https://services.iog.io/hyperledger-identus-contact" color="primary">
+                        Chat to Us
+                    </Button>
+                    <Button to="https://zoom-lfx.platform.linuxfoundation.org/meetings/identus?view=week" color="secondary">
+                        Join Community Calls
+                    </Button>
+                </div>
+            </div>
+        </section>
+    );
+}

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