@powerhousedao/academy 0.1.0-dev.0

package/src/components/HomepageFeatures/index.tsx

@@ -0,0 +1,250 @@
+import clsx from "clsx";
+import Heading from "@theme/Heading";
+import Link from "@docusaurus/Link";
+import React from "react";
+import styles from "./styles.module.css";
+
+type FeatureItem = {
+  title: string;
+  imageSrc: string;
+  docPath: string;
+  description: React.ReactNode;
+};
+
+const FeatureList: FeatureItem[] = [
+  {
+    title: "Connect",
+    imageSrc: require("@site/static/img/connect.png").default,
+    docPath: "docs/academy/Architecture/PowerhouseArchitecture",
+    description: (
+      <>
+        Learn about the private contributor tool Connect
+      </>
+    ),
+  },
+  {
+    title: "Switchboard",
+    imageSrc: require("@site/static/img/switchboard.png").default,
+    docPath: "/docs/academy/AdvancedTutorial/WorkWithData/ReadingAndWritingThroughTheAPI",
+    description: <>Get access to the open API interface with Switchboard</>,
+  },
+  {
+    title: "Fusion",
+    imageSrc: require("@site/static/img/fusion.png").default,
+    docPath: "docs/academy/Architecture/PowerhouseArchitecture",
+    description: (
+      <>
+        Setup Fusion as your organizations dashboard
+      </>
+    ),
+  },
+  {
+    title: "Renown",
+    imageSrc: require("@site/static/img/renown.png").default,
+    docPath: "/docs/renown/intro",
+    description: (
+      <>
+        Dive into the customizable reputation system 
+      </>
+    ),
+  },
+  {
+    title: "Reactor",
+    imageSrc: require("@site/static/img/reactor.png").default,
+    docPath: "/docs/academy/Architecture/WorkingWithTheReactor",
+    description: (
+      <>Find out how a Powerhouse Reactor node works</>
+    ),
+  },
+];
+
+function Feature({ title, imageSrc, description, docPath }: FeatureItem) {
+  return (
+    <div className={styles.col}>
+      <Link to={docPath} className={styles.featureLink}>
+        <div className={styles.featureContent}>
+          <div className={styles.featureImageWrapper}>
+            <img src={imageSrc} alt={title} className={styles.featureImage} />
+          </div>
+          <div className={styles.featureText}>
+            <Heading as="h4" className={styles.featureTitle}>{title}</Heading>
+            <p className={styles.featureDescription}>{description}</p>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+}
+
+export default function HomepageFeatures() {
+  return (
+    <section className={styles.features}>
+      <div className={styles.featuresWrapper}>
+        {/* Learning Path Cards */}
+        <div className={styles.learningPath}>
+          {/* Get Started Card - Full Width */}
+          <div className={`${styles.pathCard} ${styles.fullWidth}`}>
+            <div className={styles.cardHeader} style={{ justifyContent: 'center' }}>
+              <div className={styles.cardIconWrapper}>
+                <img src="/img/academy/icons/Flash.svg" alt="" />
+              </div>
+              <h3 className={styles.cardTitle}>Get started</h3>
+            </div>
+            <div className={styles.cardContent}>
+              <div style={{ maxWidth: '960px', margin: '0 auto', textAlign: 'center' }}>
+                <div style={{ marginBottom: '1.5rem' }}>
+                  <p style={{ fontSize: '1.1rem', marginBottom: '1rem' }}><strong>Welcome to Powerhouse!</strong></p>
+                  <p style={{ lineHeight: '1.6', color: '#444' }}>As a developer, you're about to dive into a <strong>unique ecosystem built to empower decentralized organizations</strong>. Powerhouse provides the software, infrastructure, and frameworks that enable scalable network organizations to operate efficiently.</p>
+                </div>
+                <div style={{ margin: '20px 0', textAlign: 'center' }}>
+                   <iframe
+                     src="https://drive.google.com/file/d/17dDKy-hQeI4ZlLiUZ4xhnXL4bDhJB0N-/preview"
+                     frameBorder="0"
+                     allow="autoplay; fullscreen"
+                     allowFullScreen
+                     title="Powerhouse Introduction Video"
+                     style={{
+                       width: '100%',
+                       maxWidth: '960px',
+                       aspectRatio: '16 / 9',
+                       borderRadius: '8px',
+                       display: 'block',
+                       margin: '0 auto'
+                     }}
+                   ></iframe>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Create Cards - One in each column */}
+          <div className={styles.pathCard}>
+            <div className={styles.cardHeader}>
+              <div className={styles.cardIconWrapper}>
+                <img src="/img/academy/icons/Book.svg" alt="" />
+              </div>
+              <h3 className={styles.cardTitle}>Book of Powerhouse</h3>
+            </div>
+            <div className={styles.cardContent}>
+              <a href="/docs/bookofpowerhouse/Overview" className={styles.pathButton}>The Vision of Powerhouse</a>
+            </div>
+          </div>
+
+          <div className={styles.pathCard} style={{ border: '1px solid #4FC86F' }}>
+            <div className={styles.cardHeader}>
+              <div className={styles.cardIconWrapper}>
+                <img src="/img/academy/icons/Create.svg" alt="" />
+              </div>
+              <h3 className={styles.cardTitle}>Create</h3>
+            </div>
+            <div className={styles.cardContent}>
+              <a href="/docs/academy/GetStarted/ToDoList/CreateNewPowerhouseProject" className={styles.pathButton}>Build a Todo-list Document Model</a>
+            </div>
+          </div>
+
+          <div className={styles.pathCard}>
+            <div className={styles.cardHeader}>
+              <div className={styles.cardIconWrapper}>
+                <img src="/img/academy/icons/Advanced.svg" alt="" />
+              </div>
+              <h3 className={styles.cardTitle}>Document Model Theory</h3>
+            </div>
+            <div className={styles.cardContent}>
+              <a href="/docs/academy/GetStarted/DocumentModelTheory/WhatIsADocumentModel" className={styles.pathButton}>Deep Dive into Document Modelling</a>
+            </div>
+          </div>
+
+          {/* Left Column Card with 2 buttons */}
+          <div className={styles.pathCard} style={{ border: '1px solid #4FC86F' }}>
+            <div className={styles.cardHeader}>
+              <div className={styles.cardIconWrapper}>
+                <img src="/img/academy/icons/Editor.svg" alt="" />
+              </div>
+              <h3 className={styles.cardTitle}>Build User Experiences</h3>
+            </div>
+            <div className={styles.cardContent}>
+              <a href="/docs/academy/GetStarted/ToDoList/BuildToDoListEditor" className={styles.pathButton}>Building a Todo-list Editor</a>
+              <a href="/docs/academy/BuildingUserExperiences/BuildingBeautifulDocumentEditors" className={styles.pathButton}>Building Beautiful Document Editors</a>
+              <a href="/docs/academy/AdvancedTutorial/BuildingUserExperiences/BuildingADriveExplorer" className={styles.pathButton}>Building Custom Drive Explorers</a>
+            </div>
+          </div>
+
+          {/* Middle column with Union.svg */}
+          <div className={styles.middleColumn} style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            alignItems: 'flex-start', 
+            paddingTop: '-20px',
+            position: 'relative'
+          }}>
+            <img src="/img/Union.svg" alt="Powerhouse Union" width="250" />
+            <div style={{ 
+              position: 'absolute',
+              top: '18px',
+              backgroundColor: 'white', 
+              padding: '8px 16px', 
+              borderRadius: '8px',
+              textAlign: 'center',
+              zIndex: 2,
+            }}>
+              <h3 className={styles.cardTitle} style={{ margin: 0 }}>Builder Track</h3>
+            </div>
+          </div>
+
+          {/* Right Column Card with 3 buttons */}
+          <div className={styles.pathCard} style={{ border: '1px solid #4FC86F' }}>
+            <div className={styles.cardHeader}>
+              <div className={styles.cardIconWrapper}>
+                <img src="/img/academy/icons/Data.svg" alt="" />
+              </div>
+              <h3 className={styles.cardTitle}>Work with Data</h3>
+            </div>
+            <div className={styles.cardContent}>
+              <a href="//docs/academy/AdvancedTutorial/WorkWithData/ReadingAndWritingThroughTheAPI" className={styles.pathButton}>Reading & Writing through the API</a>
+              <a href="/docs/academy/AdvancedTutorial/WorkWithData/WorkingWithSubgraphs" className={styles.pathButton}>Create your own Subgraph</a>
+              <a href="/docs/academy/WorkWithData/Analytics Engine/intro" className={styles.pathButton}>Using the Analytics Engine</a>
+            </div>
+          </div>
+
+          {/* Launch Card - Full Width with 3 column buttons */}
+          <div className={`${styles.pathCard} ${styles.fullWidth}`}>
+            <div className={styles.cardHeader} style={{ justifyContent: 'center' }}>
+              <div className={styles.cardIconWrapper}>
+                <img src="/img/academy/icons/Launch.svg" alt="" />
+              </div>
+              <h3 className={styles.cardTitle}>Launch</h3>
+            </div>
+            <div className={styles.cardContent}>
+              <div className={styles.buttonContainer}>
+                <a href="/docs/academy/AdvancedTutorial/Launch/PublishYourProject" className={styles.pathButton}>Package & Publish</a>
+                <a href="/docs/academy/Launch/LaunchYourBackend" className={styles.pathButton}>Launch Back-end</a>
+                <a href="/docs/academy/Launch/LaunchYourFrontend" className={styles.pathButton}>Launch Front-end</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* Existing Features Section */}
+        <h2 className={styles.sectionTitle}>Browse by host-application</h2>
+        <div className={styles.row}>
+          {FeatureList.map((props, idx) => {
+            return (
+              <div key={idx} className={styles.col}>
+                <Link to={props.docPath} className={styles.featureLink}>
+                  <div className={styles.featureContent}>
+                    <div className={styles.featureImageWrapper}>
+                      <img src={props.imageSrc} alt={props.title} className={styles.featureImage} />
+                    </div>
+                    <div className={styles.featureText}>
+                      <Heading as="h4" className={styles.featureTitle}>{props.title}</Heading>
+                      <p className={styles.featureDescription}>{props.description}</p>
+                    </div>
+                  </div>
+                </Link>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,267 @@
+.features {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-bottom: 2.5rem;
+}
+
+/* Add a wrapper class to contain and center the features */
+.featuresWrapper {
+  max-width: 1200px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0 2rem;
+}
+
+.featuresSection {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  gap: 1.5rem;
+  padding: 0;
+}
+
+.col {
+  flex: 1;
+  min-width: 200px;
+  margin: 0;
+  padding: 0;
+}
+
+.featureContent {
+  padding: 0;
+  width: 100%;
+}
+
+.featureLink {
+  display: block;
+  width: 100%;
+}
+
+.featureImageWrapper {
+  width: 100%;
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+
+.featureImage {
+  max-width: 100%;
+  height: auto;
+}
+
+.featureText {
+  width: 100%;
+  text-align: left;
+}
+
+.featureTitle {
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+}
+
+.featureDescription {
+  font-size: 1rem;
+  line-height: 1.2;
+}
+
+@media screen and (max-width: 996px) {
+  .features {
+    padding: 1rem;
+  }
+
+  .row {
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .col {
+    width: 100%;
+    min-width: 100%;
+  }
+
+  .pathRow {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .pathColumn {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .featuresWrapper {
+    padding: 0 1rem;
+  }
+
+  .sectionTitle {
+    padding: 0 1rem;
+    text-align: center;
+  }
+
+  .featureContent {
+    align-items: center;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+
+  .featureImageWrapper {
+    text-align: center;
+  }
+
+  .featureImage {
+    max-width: 100%;
+    width: auto;
+  }
+
+  .featureText {
+    text-align: center;
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .features {
+    padding: 0.5rem;
+  }
+
+  .featuresWrapper {
+    padding: 0 0.5rem;
+  }
+
+  .pathCard {
+    padding: 1rem;
+  }
+}
+
+.sectionTitle {
+  text-align: left;
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+  width: 100%;
+  padding: 0;
+  max-width: 1200px;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--ifm-color-primary);
+}
+
+
+.learningPath {
+  width: 100%;
+  padding: 3rem 0 0 0;  /* Added top padding */
+  margin-bottom: 3rem;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+  max-width: 1200px;
+  box-sizing: border-box;
+}
+
+.pathRow {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  width: 100%;
+}
+
+.pathColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  flex: 1;
+  max-width: 360px;
+}
+
+.pathCard {
+  background: var(--ifm-color-emphasis-100);
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Added styles from MDX file */
+.fullWidth {
+  grid-column: 1 / -1;
+  width: 100%;
+}
+
+.middleColumn {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.buttonContainer {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+  margin-top: 1rem;
+}
+
+.cardHeader {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.cardIconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-right: 0.75rem;
+}
+
+.cardTitle {
+  margin-bottom: 1rem;
+  font-size: 1.2rem;
+  color: var(--ifm-color-primary);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0;
+  padding: 0;
+  line-height: 1.2;
+}
+
+.cardContent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.pathButton {
+  display: block;
+  padding: 0.8rem 1rem;
+  background: var(--ifm-color-emphasis-200);
+  border-radius: 6px;
+  color: var(--ifm-font-color-base);
+  text-decoration: none;
+  transition: background 0.2s;
+  margin: 0.5rem 0;
+  text-align: center;
+}
+
+.pathButton:hover {
+  background: var(--ifm-color-emphasis-300);
+  text-decoration: none;
+}
+
+.pathColumnTitle {
+  font-size: 1.5rem;
+  margin-bottom: 1.5rem;
+  color: var(--ifm-color-primary);
+  font-weight: 600;
+}