Merge pull request #4 from webb-tools/dec-11

components/CommonActions.module.css

@@ -0,0 +1,97 @@
+/* components/CardGrid.module.css */
+.actionCardGrid {
+  display: flex;
+  flex-wrap: wrap; /* Allow wrapping */
+  gap: 1rem;
+  padding-top: 30px;
+  justify-content: flex-start; /* Align cards to the start of the container */
+  width: 100%; /* 100% width of the parent minus padding */
+  margin: 0 auto; /* Center the grid if it's smaller than the parent */
+}
+
+.actionCardGrid > * {
+  /* Direct children are the cards */
+  flex: 1 1 235px; /* Allow cards to grow but have a minimum width of 235px */
+  max-width: calc(
+    50% - 1rem
+  ); /* Maximum width of 50% of the parent width minus gap */
+}
+
+.card {
+  border: 1px solid #c0c0c0;
+  border-radius: 8px;
+  display: grid;
+  grid-template-rows: auto 1fr auto; /* Three rows: header, content, footer */
+  margin: 0px 0px 4px 0px;
+  transition: box-shadow 0.3s ease-in-out;
+  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 8%), 0 6px 20px 0 rgb(0 0 0 / 1%);
+  overflow: hidden; /* Maintain the border-radius */
+  background-color: #f5f5f5d1;
+}
+
+@media screen and (max-width: 480px) {
+  .actionCardGrid > * {
+    max-width: 100%; /* Single column layout on small screens */
+  }
+}
+
+.cardHeader {
+  background: linear-gradient(163deg, #6a34fe, #a991ff1c);
+  border-radius: 8px 8px 0 0; /* Rounded corners at the top */
+  color: #fff;
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  /* No need for absolute positioning; the grid handles the layout */
+}
+
+.title {
+  font-size: 1.05rem;
+  font-weight: 700;
+  text-align: left;
+}
+
+.description {
+  font-size: 1rem;
+  padding: 1rem;
+  text-align: left;
+  /* The content will naturally flow in the second row */
+}
+
+.cardFooter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.3rem 1rem;
+  border-top: 1px solid rgb(202, 202, 202);
+  text-decoration: none; /* Removes underline from links */
+  color: inherit;
+}
+
+.footerContent {
+  display: flex;
+  align-items: center; /* Aligns the icon and text vertically */
+  font-weight: 600;
+}
+
+.icon {
+  height: 1em;
+  width: 1em;
+  vertical-align: middle;
+  margin-right: 0.5em;
+  color: #cf00ef;
+}
+
+.cardArrow {
+  font-size: 1.4em;
+  color: rgb(183, 183, 183);
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  color: rgb(27, 27, 27);
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+}

components/CommonActions.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import Link from "next/link";
+import {
+  ChartBarIcon,
+  BookOpenIcon,
+  ServerIcon,
+  BeakerIcon,
+} from "@heroicons/react/outline";
+import styles from "./CommonActions.module.css";
+import { FaGithub } from "react-icons/fa";
+
+const features = [
+  {
+    Icon: ServerIcon,
+    title: "Node Deployment",
+    description: `Want to spin up a full node on the Tangle Network? We've made it easier than ever!`,
+    href: "/docs/tangle-network/node/docker-node",
+    action: "Deploy a Docker Node",
+  },
+  {
+    Icon: ServerIcon,
+    title: "Validators",
+    description: `Start your journey on Tangle Network. This guide will walk you through the steps to become a validator, ensuring network security and integrity.`,
+    href: "/docs/tangle-network/node/quickstart/",
+    action: "Launch a Quick Validator Node",
+  },
+  {
+    Icon: FaGithub,
+    title: "Tangle Open Source",
+    description: `Multy-party threshold ECDSA (GG20) Substrate node`,
+    href: "https://github.com/webb-tools/tangle",
+    action: "View the Repo",
+  },
+  {
+    Icon: ServerIcon,
+    title: "Accounts",
+    description: `Tangle uses Polkadot Apps to manage Accounts.`,
+    href: "https://polkadot.js.org/apps/?rpc=wss://rpc.tangle.tools#/explorer",
+    action: "Go to Polkadot Apps",
+  },
+  {
+    Icon: BookOpenIcon,
+    title: "Staking",
+    description: `Through Polkadot Apps you can create `,
+    href: "https://polkadot.js.org/apps/?rpc=wss://rpc.tangle.tools#/democracy",
+    action: "Manage Staking",
+  },
+  {
+    Icon: BookOpenIcon,
+    title: "Governance",
+    description: `Through governance, you can create proposals for updating cross-chain applications.`,
+    href: "https://polkadot.js.org/apps/?rpc=wss://rpc.tangle.tools#/democracy",
+    action: "Interact with Governance",
+  },
+  {
+    Icon: BeakerIcon,
+    title: "Faucet",
+    description: `Our easy-to-use testnet faucet allows you to claim test tokens with just a few clicks. Start experimenting with Hubble Bridge today.`,
+    href: "https://faucet.tangle.tools",
+    action: "Go to Faucet",
+  },
+  {
+    Icon: ChartBarIcon,
+    title: "DKG Stats dApp",
+    description: `The DKG Stats dApp provides insights into the DKG protocol running on the Tangle Network.`,
+    href: "https://stats.tangle.tools",
+    action: "View DKG Functionality",
+  },
+];
+
+const Card = ({ Icon, title, description, href, action }) => (
+  <div className={styles.card}>
+    <div className={styles.cardHeader}>
+      <h3 className={styles.title}>{title}</h3>
+    </div>
+    {/*}   <p className={styles.description}>{description}</p>
+    {/* Wrap the entire footer content with Link */}
+    <Link href={href} passHref className={styles.cardFooter}>
+      <div className={styles.footerContent}>
+        <Icon className={styles.icon} aria-hidden="true" />
+        {action}
+      </div>
+      {/* Arrow */}
+      <span className={styles.cardArrow}>→</span>
+    </Link>
+  </div>
+);
+
+// CommonActions component that renders a grid of Cards
+export const CommonActions = () => {
+  return (
+    <div className={styles.actionCardGrid}>
+      {features.map((feature, index) => (
+        <Card key={index} {...feature} />
+      ))}
+    </div>
+  );
+};
+
+export default CommonActions;

components/HeaderLogo.module.css

@@ -0,0 +1,15 @@
+.mobileLogo {
+  display: block;
+
+  @media (min-width: 768px) {
+    display: none;
+  }
+}
+
+.desktopLogo {
+  display: none;
+
+  @media (min-width: 768px) {
+    display: block;
+  }
+}

components/Navigation.tsx

@@ -1,8 +1,11 @@
 import { Navbar } from "nextra-theme-docs";
 
 function Navigation(props) {
-  // items last to override the default
-  return <Navbar {...props} />;
+  return (
+    <>
+      <Navbar {...props} />
+    </>
+  );
 }
 
 export default Navigation;

components/NetworkConfig.module.css

@@ -0,0 +1,116 @@
+.networkinfo {
+  font-family: "Arial", sans-serif;
+  background-color: #f0f2f5;
+  color: #333;
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.networkInfo h1,
+.networkInfo h2 {
+  color: #000;
+  text-align: left;
+}
+
+.titleContainer {
+  display: flex; /* Use flexbox to lay out the title and icon */
+  align-items: center; /* Align items vertically in the center */
+  cursor: pointer; /* Change the cursor to indicate it's clickable */
+  border-bottom: 2px solid white;
+}
+
+.chevronIcon {
+  height: 3em;
+  width: 3em;
+  color: white;
+  border: 1px white solid;
+  border-radius: 10px;
+  background-color: #0001d33b;
+  margin-left: auto;
+}
+.networkCard {
+  border-radius: 8px;
+  padding: 48px;
+  margin: 20px 0 0 0;
+  background: linear-gradient(45deg, rgb(168 0 198), rgba(255, 0, 0, 0) 70%),
+    linear-gradient(-45deg, rgb(190 0 255 / 90%), rgba(0, 0, 255, 0) 70%),
+    linear-gradient(135deg, rgb(0 242 245), rgba(0, 255, 0, 0) 70%),
+    linear-gradient(-135deg, rgb(117 119 251 / 32%), rgba(255, 255, 0, 0) 70%);
+  background-blend-mode: multiply;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+}
+
+.networkTitle {
+  margin-right: 0.5em; /* Add some space between the title and the icon */
+}
+
+.networkCard h2 {
+  margin-top: 0;
+  color: #fff;
+  font-size: 2.8em;
+  font-weight: 600;
+  line-height: 1.2em;
+  padding-bottom: 8px;
+  margin-bottom: 2px;
+}
+
+.networkCard h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.networkType {
+  color: #ffffff;
+  text-transform: uppercase;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 0.8em;
+  margin-bottom: 0;
+  font-weight: 700;
+}
+.section {
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  margin-bottom: 20px;
+  padding: 20px;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 0;
+  margin-bottom: 8px;
+}
+
+.tableRow {
+  text-align: left;
+}
+
+.tableHeader {
+  color: #fff;
+  font-weight: 400;
+  text-align: left;
+  padding: 10px;
+  border-bottom: 1px solid #e1e4e8;
+}
+
+.tableCell {
+  padding: 10px;
+  text-align: left;
+  border-bottom: 1px solid #e1e4e8;
+  color: #fff;
+  font-weight: 600;
+}
+
+@media (max-width: 768px) {
+  .networkinfo {
+    padding: 10px;
+  }
+
+  .table,
+  .th,
+  .td {
+    font-size: 14px;
+  }
+}