...

src/components/HomepageFeatures/index.tsx

@@ -0,0 +1,71 @@
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+import { useColorMode } from '@docusaurus/theme-common'
+
+type FeatureItem = {
+  title: string;
+  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  description: JSX.Element;
+};
+
+const FeatureList: FeatureItem[] = [
+  { scale: 1.0,
+    fill:"currentColor",
+    title: 'Building Web4',
+    Svg: require('@site/static/img/clouds.svg').default,
+    description: (
+      <>
+        Laying the groundwork for Web4, the next generation of the Internet.
+      </>
+    ),
+  },
+  { scale: 1.0,
+    fill:"currentColor",
+    title: 'ThreeFold Grid',
+    Svg: require('@site/static/img/nodes.svg').default,
+    description: (
+      <>
+        ThreeFold nodes, routers and phones create an end&#8209;to&#8209;end encrypted network.
+      </>
+    ),
+  },
+  { scale: 1.0,
+    fill:"currentColor",
+    title: 'Community Rewards',
+    Svg: require('@site/static/img/rewards.svg').default,
+    description: (
+      <>
+        The ecosystem rewards the community to foster growth and expansion.
+      </>
+    ),
+  },
+];
+
+function Feature({scale, fill, id, title, Svg, description}: FeatureItem) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className="text--center">
+      <Svg transform={"scale(" + scale + ")"} fill={fill} id={id} className={styles.featureSvg} role="img" />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <Heading as="h3">{title}</Heading>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures(): JSX.Element {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}

src/css/custom.css

@@ -0,0 +1,131 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* Ensure navbar items and logo are vertically aligned */
+.navbar__logo {
+  display: flex;
+  align-items: center;  /* Center aligns the items vertically */
+  height: 100%;         /* Ensures full height for alignment */
+}
+
+.navbar__logo img {
+  max-width: 150px;   /* Set maximum width of the logo */
+  height: auto;       /* Maintain aspect ratio */
+}
+
+/* Align navbar items, such as Docs and Support */
+.navbar__item {
+  display: flex;
+  align-items: center; /* Vertically align the items */
+}
+
+/* Optional: Adjust padding for navbar items */
+.navbar__link {
+  padding: 8px 12px;   /* Modify values as necessary for better spacing */
+}
+
+/* Add @font-face declarations for the Inter font */
+@font-face {
+  font-family: 'Inter';
+  font-weight: 400; /* Light */
+  font-style: normal;
+  src: url('/fonts/Inter_28pt-Light.ttf') format('truetype'); /* Corrected path */
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-weight: 500; /* Regular */
+  font-style: normal;
+  src: url('/fonts/Inter_28pt-Regular.ttf') format('truetype'); /* Corrected path */
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-weight: 600; /* Medium */
+  font-style: normal;
+  src: url('/fonts/Inter_28pt-Medium.ttf') format('truetype'); /* Corrected path */
+}
+
+/* Apply the Inter font globally */
+body {
+  font-family: 'Inter', sans-serif; /* Set the global font */
+  font-size: 18px;
+}
+
+/* Header styles - Medium weight for headers */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600; /* Medium weight for headers */
+  font-family: 'Inter', sans-serif; /* Set the global font */
+}
+
+/* Paragraph styles - Light weight for paragraphs */
+p {
+  font-weight: 400; /* Light weight for paragraphs */
+  font-family: 'Inter', sans-serif; /* Set the global font */
+}
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #2e83ff;
+  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-code-font-size: 95%;
+  --svg-fill-color: #2a2021; /* Black fill for light mode */
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+/* Dark mode styles */
+html[data-theme="dark"] {
+  --svg-fill-color: #fff; /* White fill for dark mode */
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+  --ifm-color-primary: #8d8d8d;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+  --svg-fill-color: #fff; /* White fill for dark mode */
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+.footer {
+  background-color: #131213;
+}
+.footer a,
+.footer p,
+.footer span,
+.footer div {
+  color: #ffffff; /* Example: Light gray text for dark mode */
+}
+.navbar {  /* or .navbar--fixedTop if it has that class */
+  background-color: #131213;
+}
+
+/* Apply scroll margin to footnote targets */
+[data-footnote-ref="true"] {
+  scroll-margin-top: 80px; /* Adjust this value to match your navbar height */
+}
+
+/* Ensure navbar items and logo are vertically aligned */
+.navbar__logo {
+  display: flex;
+  align-items: center;  /* Center aligns the items vertically */
+  height: 100%;         /* Ensures full height for alignment */
+}
+
+.navbar__link {  /* Example: for navbar links */
+  color: #ffffff;
+}
+img.svg-icon {
+  fill: var(--svg-fill-color); /* Apply the color variable */
+}

src/pages/index.module.css

@@ -0,0 +1,23 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/pages/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Redirect } from '@docusaurus/router';
+
+export default function Home() {
+  return <Redirect to="/docs/introduction" />;
+}

src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.

src/pages/support.md

@@ -0,0 +1,36 @@
+# Support
+
+Our dedicated team is here to help you every step of the way. We're passionate about ensuring that you receive the best possible experience exploring the ThreeFold ecosystem.
+
+If you can't find the answer to your question, our dedicated ThreeFold support team is here to help.
+
+## Reach Support
+
+***To contact the ThreeFold support team, simply click on the chat button at the bottom right of the screen.***
+
+You can also visit the [ThreeFold Support Crisp website](https://threefoldfaq.crisp.help/en/).
+
+## Live Chat Availability
+
+Our support team is available from Monday to Friday, Central European Summer Time (CEST), between 8:00 AM and 12:00 AM (16 hours per day). During these hours, you can interact with us in real-time via live chat on the ThreeFold website.
+
+* **Monday to Friday**: Available from 8:00 AM to 12:00 AM CEST
+
+> Outside of these hours, you can still write to the support team and they will get back to you during working hours.
+
+## How We Can Help
+
+Our support team is here to assist you with any questions or concerns you may have about ThreeFold. Whether it's troubleshooting an issue, setting up a new feature, or simply answering a question, we're here to help.
+
+### Support Services
+* **Technical Support**: Assistance with technical issues related to ThreeFold.
+* **Feature Setup**: Guidance on how to set up and use various ThreeFold features, services and products.
+* **General Questions**: Answers to any questions you may have about ThreeFold.
+
+## Get In Touch
+
+Ready to reach out? Simply click on the chat button at the bottom right of the screen and initiate a chat with us during business hours. 
+
+*We're here to listen, assist, and provide support!*
+
+---