feat(docs): embed luma calendar widget (#9784)

docs-website/docusaurus.config.js

@@ -66,7 +66,7 @@ module.exports = {
               label: "Join Slack",
             },
             {
-              href: "https://calendar.datahubproject.io/",
+              to: "/events",
               label: "Events",
             },
             {

docs-website/src/pages/champions/index.js

@@ -1,7 +1,6 @@
 import React from "react";
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import { useColorMode } from "@docusaurus/theme-common";
 import Link from "@docusaurus/Link";
 import ChampionQualityCardsSection from "./_components/ChampionQualityCardsSection"
 
@@ -352,10 +351,9 @@ const championSections = [
 ];
 
 const HeroImage = (props) => {
-  const { colorMode } = useColorMode();
   return (
     <>
-      <img style={{ marginBottom: "2rem", height: "14rem" }} src={`/img/champions/champions-logo-${colorMode}.png`} alt="DataHub Champions" {...props} />
+      <img style={{ marginBottom: "2rem", height: "14rem" }} src={`/img/champions/champions-logo-light.png`} alt="DataHub Champions" {...props} />
     </>
   );
 };

docs-website/src/pages/events/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+function Events() {
+    const { siteConfig = {} } = useDocusaurusContext();
+
+    return (
+        <Layout
+            title={siteConfig.tagline}
+            description="Description of the page">
+            <header className={"hero"}>
+                <div className="container">
+                    <div className="hero__content">
+                        <h1>DataHub Community Event Calendar</h1>
+                        <div style={{ fontSize: "18px" }}>Subscribe to join our monthly events to network and learn more about our community!</div>
+                        <div className="lumaCalendar" style={{ maxWidth: "60rem", margin: "3rem auto" }}>
+                            <iframe
+                                src="https://lu.ma/embed/calendar/cal-lom9HnTVnZkKsNh/events"
+                                allowFullScreen={true}
+                                aria-hidden="false"
+                                tabIndex="0"
+                                style={{
+                                    border:"1px solid #bfcbda88",
+                                    borderRadius:"10px",
+                                    width:"100%",
+                                    height:"600px",
+                                }}
+                            ></iframe>
+                        </div> 
+                    </div>
+                </div>
+            </header>
+        </Layout>
+    );
+}
+
+export default Events;