Create SDK homepage with links to SDK tabs

website/src/main.jsx

@@ -58,9 +58,9 @@ function Main() {
 
     useEffect(() => {
         setMenuIndex(location.pathname);
-        if (location.pathname === "/") {
-            navigate("/account");
-        }
+        // if (location.pathname === "/") {
+        //     navigate("/account");
+        // }
     }, [location, navigate]);
 
     const [darkMode, setDarkMode] = useState(true);

website/src/pages/Homepage.css

@@ -0,0 +1,180 @@
+/* Mobile Styles */
+.homepage {
+    padding: 10px;
+    font-size: 14px;
+}
+
+.button { 
+    background-color:#12E172;
+    padding: 16px 32px 16px 32px;
+    border-radius: 9px;
+    font-size:18px;
+    color: white;
+    border: none;
+
+    a {
+        text-decoration: none;
+        color: white;
+    }
+}
+
+.button:hover {
+    background-color: #0bb359;
+}
+
+.arrow {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.headerContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center; 
+    width: 100%;
+}
+
+.header {
+    font-size:3rem;
+    max-width: 1200px;
+    width: 100%; 
+    margin: 10rem auto 0; 
+    text-align: center;
+}
+
+.subheader {
+    font-size: 1rem;
+    text-align: center;
+}
+
+.secondSubheader {
+    font-size: 16px;
+    text-align: center;
+    margin-top:6rem;
+}
+
+
+
+.actionRow {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: 100rem;
+    align-items:center;
+    justify-content: space-between;
+    margin: 5rem auto 0;
+    padding-left: 0;
+}
+
+.actionRow li:nth-child(2), li:nth-child(3) {
+    margin-top: 2rem;
+}
+
+.actionItem {
+    width: 200px;
+    padding: 1rem 1rem 1rem 1rem;
+    border: 2px solid white;
+    border-radius: 20px;
+    list-style-type: none;
+    text-align: center;
+
+    a {
+        color: white;
+        text-decoration: none;
+        font-size: 1rem;
+        align-content:center;
+    }
+}
+
+.actionItem:hover {
+    background-color: #0bb359;
+}
+
+
+  /* Desktop Styles */
+  @media (min-width: 1024px) {
+    .homepage {
+      padding: 20px;
+      font-size: 18px;
+    }
+
+    .actionRow {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        max-width: 800px;
+        justify-content: space-between;
+        margin: 10rem auto 0;
+    }
+
+    .header {
+        font-size:6rem;
+        max-width: 1200px;
+        width: 100%; 
+        margin: 10rem auto 0; 
+        text-align: center;
+    }
+
+    .subheader {
+        font-size: 32px;
+        width: 35rem;
+        text-align: center;
+    }
+
+    .secondSubheader {
+        font-size: 32px;
+        width: 35rem;
+        text-align: center;
+        margin-top:10rem;
+    }
+
+    .actionRow li:nth-child(2), li:nth-child(3) {
+        margin-top: 0;
+    }
+
+    .actionItem {
+        width: 175px;
+        padding: 2rem 2rem 2rem 2rem;
+        border: 2px solid white;
+        border-radius: 30px;
+        list-style-type: none;
+        text-align: center;
+
+        a {
+            color: white;
+            text-decoration: none;
+            font-size: 24px;
+            align-content:center;
+        }
+    }
+
+    .actionItem:hover {
+        background-color: #0bb359;
+    }
+
+  }
+
+
+ @font-face {
+    font-family: 'AleoSans';
+    src: url('/assets/fonts/AleofontSans-Regular.otf') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+body {
+    font-family: 'AleoSans', sans-serif;
+    color: white;
+}
+
+
+.logo {
+    height: 1.5rem;
+}
+
+.footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top:10rem;
+}

website/src/pages/Homepage.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+
+import './Homepage.css'; 
+
+const Homepage = () => {
+  return (
+    <div className="homepage">
+    <img src="../public/primary-wordmark-dark.png" className="logo"></img>
+    <div className="headerContainer">
+      <h1 className="header">Aleo SDK</h1>
+      <p className="subheader">The tooling for building zero knowledge applications at your fingertips</p>
+        <button className="button"> <Link target="_blank" rel="noopener noreferrer" to="https://developer.aleo.org/sdk/"> View Docs <span className="arrow">&rarr;</span> </Link> </button>
+
+
+      <ul className="actionRow">
+        <li  className="actionItem">
+          <Link to="/account">Create and manage accounts</Link>
+        </li>
+        <li className="actionItem">
+          <Link to="/develop" >Execute and deploy programs</Link>
+        </li>
+        <li className="actionItem"> 
+          <Link to="/transfer">Manage program state and data</Link>
+        </li>
+        </ul>
+
+
+        <p className="secondSubheader">Build your first zero knowledge app with create-leo-app</p>
+        <button className="button"> <Link target="_blank" rel="noopener noreferrer" to="https://docs.leo-lang.org/sdk/create-leo-app/tutorial/">Try it now <span className="arrow">&rarr;</span></Link>  </button>
+
+
+        <div className="footer">          
+           <a href="https://github.com/ProvableHQ/sdk">
+                            <img src="../public/github-mark-white.png" style={{height:"24px", marginBottom: "1rem"}}></img>
+                            </a>
+
+                            © 2024 Provable Inc.
+
+        </div>
+        </div>
+    </div>
+  );
+};
+
+export default Homepage;

website/src/routing.jsx

@@ -1,4 +1,4 @@
-import { createBrowserRouter, Navigate } from "react-router-dom";
+import { createBrowserRouter } from "react-router-dom";
 import Main from "./main.jsx";
 import { NewAccount } from "./tabs/account/NewAccount.jsx";
 import { AccountFromPrivateKey } from "./tabs/account/AccountFromPrivateKey.jsx";
@@ -22,15 +22,16 @@ import { Join } from "./tabs/develop/Join.jsx";
 import { Execute } from "./tabs/develop/execute/";
 import { GetMappingNames } from "./tabs/rest/GetMappingNames.jsx";
 import { GetMappingValue } from "./tabs/rest/GetMappingValue.jsx";
+import Homepage from "./pages/Homepage"; 
 
 export const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <Homepage />,
+    },
     {
         element: <Main />,
         children: [
-            {
-                path: "/",
-                element: <Navigate to="/deploy" replace={false} />,
-            },
             {
                 path: "/account",
                 element: (