feat: add two CTA sections to homepage

src/components/JoinUsCTA/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import styles from './styles.module.css';
+
+const JoinUsCTA: React.FC = () => {
+  return (
+    <section className={styles.joinUsSection}>
+      <div className="container">
+        <div className={styles.content}>
+          <div className={styles.textContent}>
+            <h2 className={styles.title}>Join Our Community</h2>
+            <p className={styles.description}>
+              We are building an open-source Data Mesh platform and high-performance GraphQL backend.
+              Whether you're interested in database internals, distributed systems, analytics, or GraphQL,
+              there's a place for you in our community.
+            </p>
+            <p className={styles.description}>
+              <strong>All repositories are open source and licensed under MIT</strong>, making them free
+              to use for both commercial and non-commercial purposes.
+            </p>
+            <div className={styles.buttons}>
+              <Link
+                className="button button--primary button--lg"
+                to="/docs/join-us"
+              >
+                Learn How to Contribute
+              </Link>
+              <Link
+                className="button button--secondary button--lg"
+                to="https://github.com/hugr-lab/hugr/discussions"
+              >
+                Join Discussions
+              </Link>
+            </div>
+          </div>
+          <div className={styles.imageContainer}>
+            <img
+              src="/img/logo-circle.svg"
+              alt="Join Hugr Community"
+              className={styles.image}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default JoinUsCTA;

src/components/JoinUsCTA/styles.module.css

@@ -0,0 +1,133 @@
+/* Join Us CTA Section Styles */
+.joinUsSection {
+  padding: 80px 0;
+  background: #f8fafc;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: 60px;
+  justify-content: space-between;
+}
+
+.textContent {
+  flex: 1;
+  max-width: 600px;
+}
+
+.title {
+  font-size: 2.5rem;
+  line-height: 1.2;
+  margin-bottom: 1.5rem;
+  font-weight: 700;
+  color: var(--ifm-heading-color);
+  font-family: 'Quicksand', sans-serif;
+}
+
+.description {
+  font-size: 1.1rem;
+  line-height: 1.75;
+  color: var(--ifm-font-color-base);
+  margin-bottom: 1.5rem;
+}
+
+.description strong {
+  color: #0d7271;
+  font-weight: 600;
+}
+
+.buttons {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-top: 2rem;
+}
+
+.buttons a {
+  min-width: 200px;
+}
+
+.imageContainer {
+  flex-shrink: 0;
+  width: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image {
+  width: 100%;
+  height: auto;
+  max-width: 400px;
+  object-fit: contain;
+  filter: drop-shadow(0 10px 30px rgba(13, 114, 113, 0.15));
+}
+
+/* Responsive Design */
+@media (max-width: 996px) {
+  .content {
+    gap: 40px;
+  }
+
+  .imageContainer {
+    width: 300px;
+  }
+
+  .title {
+    font-size: 2rem;
+  }
+
+  .description {
+    font-size: 1rem;
+  }
+}
+
+/* Hide image on mobile devices */
+@media (max-width: 768px) {
+  .joinUsSection {
+    padding: 60px 0;
+  }
+
+  .content {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .textContent {
+    max-width: 100%;
+  }
+
+  .title {
+    font-size: 1.875rem;
+  }
+
+  .description {
+    font-size: 1rem;
+  }
+
+  .buttons {
+    justify-content: center;
+  }
+
+  /* Hide image on mobile */
+  .imageContainer {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .title {
+    font-size: 1.625rem;
+  }
+
+  .buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .buttons a {
+    width: 100%;
+    max-width: 300px;
+  }
+}

src/components/TryHugrCTA/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import styles from './styles.module.css';
+
+const TryHugrCTA: React.FC = () => {
+  return (
+    <section className={styles.tryHugrSection}>
+      <div className="container">
+        <div className={styles.content}>
+          <h2 className={styles.title}>Try Hugr in Your Workspace</h2>
+          <p className={styles.description}>
+            Hugr is in early stages of development, and we provide <strong>full support</strong> for new users
+            during initial implementation. Leave an issue or start a discussion, and we'll get in touch with
+            you to plan the implementation together.
+          </p>
+          <div className={styles.buttons}>
+            <Link
+              className="button button--primary button--lg"
+              to="https://github.com/hugr-dev/hugr/issues/new"
+            >
+              Open an Issue
+            </Link>
+            <Link
+              className="button button--secondary button--lg"
+              to="https://github.com/hugr-dev/hugr/discussions"
+            >
+              Start a Discussion
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TryHugrCTA;

src/components/TryHugrCTA/styles.module.css

@@ -0,0 +1,81 @@
+/* Try Hugr CTA Section Styles */
+.tryHugrSection {
+  padding: 80px 0;
+  background: linear-gradient(135deg, #0d7271 0%, #26bab5 100%);
+  text-align: center;
+}
+
+.content {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.title {
+  font-size: 2.5rem;
+  line-height: 1.2;
+  margin-bottom: 1.5rem;
+  font-weight: 700;
+  color: #ffffff;
+  font-family: 'Quicksand', sans-serif;
+}
+
+.description {
+  font-size: 1.25rem;
+  line-height: 1.75;
+  color: #ffffff;
+  margin-bottom: 2.5rem;
+  opacity: 0.95;
+}
+
+.description strong {
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.buttons a {
+  min-width: 180px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .tryHugrSection {
+    padding: 60px 0;
+  }
+
+  .title {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+  }
+
+  .description {
+    font-size: 1.1rem;
+    margin-bottom: 2rem;
+  }
+
+  .buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .buttons a {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+
+@media (max-width: 480px) {
+  .title {
+    font-size: 1.75rem;
+  }
+
+  .description {
+    font-size: 1rem;
+  }
+}

src/pages/index.tsx

@@ -11,6 +11,8 @@ import ListSection from '../components/ListSection';
 import DescriptionSection from '../components/DescriptionSection';
 import DuckDBSection from '../components/DuckDBSection';
 import DataMeshSection from '../components/DataMeshSection';
+import TryHugrCTA from '../components/TryHugrCTA';
+import JoinUsCTA from '../components/JoinUsCTA';
 import SetupSection from '../components/SetupSection';
 import FAQSection from '../components/FAQSection';
 
@@ -129,8 +131,13 @@ export default function Home(): ReactNode {
           </div>
         </section>
 
+        <TryHugrCTA />
+
         <SetupSection />
         <FAQSection />
+
+        <JoinUsCTA />
+
         <DuckDBSection />
       </main>
     </Layout>