v1.15: docs - new homepage (backport of #29793) (#30299)

docs - new homepage (#29793)

* refactor: new home page

* refactor: line lengths and meta description

* docs: removed text section

* refactor: links label and comments

* chore: removed comment

* refactor: removed page

(cherry picked from commit 5441645)

Co-authored-by: Nick Frostbutter <[email protected]>

docs/components/Card.jsx

@@ -37,11 +37,14 @@ function Card({ to, header, body, externalIcon = false }) {
             )}
           </h3>
         </div>
-        <div className="card__body">
-          <p>
-            <Translate description={body.translateId}>{body.label}</Translate>
-          </p>
-        </div>
+
+        {typeof body === "object" && (
+          <div className="card__body">
+            <p>
+              <Translate description={body.translateId}>{body.label}</Translate>
+            </p>
+          </div>
+        )}
       </Link>
     </div>
   );

docs/components/HomeCtaLinks.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Card from "./Card";
+
+export default function HomeCtaLinks() {
+  return (
+    <div className="container">
+      <div className="row cards__container">
+        <Card
+          to="developers"
+          header={{
+            label: "Developers",
+            translateId: "cta-developers",
+          }}
+        />
+
+        <Card
+          to="running-validator"
+          header={{
+            label: "Validators",
+            translateId: "cta-validators",
+          }}
+        />
+
+        <Card
+          to="cluster/overview"
+          header={{
+            label: "Architecture",
+            translateId: "cta-architecture",
+          }}
+        />
+      </div>
+    </div>
+  );
+}

docs/src/css/custom.css

@@ -57,11 +57,11 @@ main {
 }
 
 .cards__container {
-  margin: 3em 0;
+  /* margin-bottom: 0; */
 }
 
 .cards__container .col {
-  margin-bottom: 1em;
+  margin-bottom: 3em;
 }
 
 .card {
@@ -73,15 +73,21 @@ main {
   transition-duration: 200ms;
   align-items: start;
   height: 100%;
-  box-shadow: 0 8px 15px 2px rgba(86, 91, 115, 0.1);
+  /* box-shadow: 0 8px 15px 2px rgba(86, 91, 115, 0.1); */
+  border: 1px solid #ccc;
+}
+
+[data-theme="dark"] .card {
+  border-color: #444;
 }
 
 .card a {
   text-decoration: none;
 }
 
 .card:hover {
-  transform: translate(0px, -5px);
+  /* transform: translate(0px, -5px); */
+  border-color: var(--ifm-color-primary);
 }
 
 .footer--dark {

docs/src/index.mdx

@@ -0,0 +1,56 @@
+---
+slug: /
+id: home
+title: Home
+sidebar_label: Home
+description:
+  "Solana is a high performance network that is utilized for a range of use cases, \
+  including finance, NFTs, payments, and gaming."
+# displayed_sidebar: introductionSidebar
+---
+
+# Solana Documentaion
+
+Solana is a blockchain built for mass adoption. It's a high performance network that is utilized for
+a range of use cases, including finance, NFTs, payments, and gaming. Solana operates as a single
+global state machine, and is open, interoperable and decentralized.
+
+## Getting started
+
+Dive right into Solana to start building or setup your tooling.
+
+- [Setup local environment](/cli) - Install the Solana CLI to get your local development environment setup
+- [Hello World in your browser](getstarted/hello-world) - Build and deploy your first on-chain Solana program,
+  directly in your browser using Solana Playground
+
+## Start learning
+
+Build a strong understanding of the core concepts that make Solana different from other blockchains.
+
+- [Transactions](./developing/programming-model/transactions) - Collection of instructions for the blockchain to execute
+- [Accounts](./developing/programming-model/accounts) - Data and state storage mechanism for Solana
+- [Programs](./developing/intro/programs) - The executable code used to perform actions on the blockchain
+- [Cross-Program Invocation](./developing/programming-model/calling-between-programs) - Core of the "composability"
+  of Solana, this is how programs can "call" each other.
+
+## Understanding the architecture
+
+Get to know the underlying architecture of how the proof-of-stake blockchain works.
+
+- [Validators](./validator/anatomy) - the individual nodes that are the backbone of the network
+- [Clusters](./cluster/overview) - a collection of validators that work together for consensus
+
+## Running a validator
+
+Explore what it takes to operate a Solana validator and help secure the network.
+
+- [System requirements](./running-validator/validator-reqs) - Recommended hardware requirements and expected SOL
+  needed to operate a validator
+- [Quick start guide](./running-validator/validator-start) - Setup a validator and get connected to a cluster
+  for the first time
+
+## Learn more
+
+import HomeCtaLinks from "../components/HomeCtaLinks";
+
+<HomeCtaLinks />