From 00b6246e2b0b856121d086accdca169f5c3b5b24 Mon Sep 17 00:00:00 2001
From: Miche <miche@provable.com>
Date: Thu, 15 Aug 2024 13:56:37 -0700
Subject: [PATCH] make buttons fully clickable, rather than just text

---
 website/src/pages/Homepage.css | 77 ++++++++++++++++------------------
 website/src/pages/Homepage.jsx | 69 +++++++++++++++---------------
 2 files changed, 71 insertions(+), 75 deletions(-)

diff --git a/website/src/pages/Homepage.css b/website/src/pages/Homepage.css
index 6452e9df9..05a8e88fc 100644
--- a/website/src/pages/Homepage.css
+++ b/website/src/pages/Homepage.css
@@ -4,11 +4,11 @@
     font-size: 14px;
 }
 
-.button { 
-    background-color:#12E172;
+.button {
+    background-color: #12e172;
     padding: 16px 32px 16px 32px;
     border-radius: 9px;
-    font-size:18px;
+    font-size: 18px;
     color: white;
     border: none;
 
@@ -30,15 +30,15 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center; 
+    justify-content: center;
     width: 100%;
 }
 
 .header {
-    font-size:3rem;
+    font-size: 3rem;
     max-width: 1200px;
-    width: 100%; 
-    margin: 10rem auto 0; 
+    width: 100%;
+    margin: 10rem auto 0;
     text-align: center;
 }
 
@@ -50,23 +50,22 @@
 .secondSubheader {
     font-size: 16px;
     text-align: center;
-    margin-top:6rem;
+    margin-top: 6rem;
 }
 
-
-
 .actionRow {
     display: flex;
     flex-direction: column;
     height: 100%;
     max-height: 100rem;
-    align-items:center;
+    align-items: center;
     justify-content: space-between;
     margin: 5rem auto 0;
     padding-left: 0;
 }
 
-.actionRow li:nth-child(2), li:nth-child(3) {
+.actionRow li:nth-child(2),
+li:nth-child(3) {
     margin-top: 2rem;
 }
 
@@ -77,25 +76,21 @@
     border-radius: 20px;
     list-style-type: none;
     text-align: center;
-    
-    a {
-        color: white;
-        text-decoration: none;
-        font-size: 1rem;
-        align-content:center;
-    }
+    color: white;
+    text-decoration: none;
+    font-size: 1rem;
+    align-content: center;
 }
 
 .actionItem:hover {
     background-color: #0bb359;
 }
 
-
-  /* Desktop Styles */
-  @media (min-width: 1024px) {
+/* Desktop Styles */
+@media (min-width: 1024px) {
     .homepage {
-      padding: 20px;
-      font-size: 18px;
+        padding: 20px;
+        font-size: 18px;
     }
 
     .actionRow {
@@ -108,10 +103,10 @@
     }
 
     .header {
-        font-size:6rem;
+        font-size: 6rem;
         max-width: 1200px;
-        width: 100%; 
-        margin: 10rem auto 0; 
+        width: 100%;
+        margin: 10rem auto 0;
         text-align: center;
     }
 
@@ -125,10 +120,11 @@
         font-size: 32px;
         width: 35rem;
         text-align: center;
-        margin-top:10rem;
+        margin-top: 10rem;
     }
 
-    .actionRow li:nth-child(2), li:nth-child(3) {
+    .actionRow li:nth-child(2),
+    li:nth-child(3) {
         margin-top: 0;
     }
 
@@ -139,35 +135,32 @@
         border-radius: 30px;
         list-style-type: none;
         text-align: center;
-        
+
         a {
             color: white;
             text-decoration: none;
             font-size: 24px;
-            align-content:center;
+            align-content: center;
         }
     }
-    
+
     .actionItem:hover {
         background-color: #0bb359;
     }
-    
-  }
-
+}
 
- @font-face {
-    font-family: 'AleoSans';
-    src: url('/assets/fonts/AleofontSans-Regular.otf') format('opentype');
+@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;
+    font-family: "AleoSans", sans-serif;
     color: white;
 }
 
-
 .logo {
     height: 1.5rem;
 }
@@ -176,5 +169,5 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top:10rem;
-}
\ No newline at end of file
+    margin-top: 10rem;
+}
diff --git a/website/src/pages/Homepage.jsx b/website/src/pages/Homepage.jsx
index f10856bcb..78decf194 100644
--- a/website/src/pages/Homepage.jsx
+++ b/website/src/pages/Homepage.jsx
@@ -15,47 +15,50 @@ const Homepage = () => {
                 <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/"
-                    >
+                </p>{" "}
+                <Link
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    to="https://developer.aleo.org/sdk/"
+                >
+                    <button className="button">
                         {" "}
                         View Docs <span className="arrow">&rarr;</span>{" "}
-                    </Link>{" "}
-                </button>
-
+                    </button>
+                </Link>{" "}
                 <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">
+                    <Link to="/account" className="actionItem">
+                        {" "}
+                        <li>
+                            Create and manage accounts{" "}
+                        </li>
+                    </Link>
+
+                    <Link to="/develop" className="actionItem">
+                        {" "}
+                        <li>
+                            Execute and deploy programs{" "}
+                        </li>
+                    </Link>
+
+                    <Link to="/transfer" className="actionItem">
+                        <li>
                             Manage program state and data
-                        </Link>
-                    </li>
+                        </li>
+                    </Link>
                 </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/"
-                    >
+                </p>{" "}
+                <Link
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    to="https://docs.leo-lang.org/sdk/create-leo-app/tutorial/"
+                >
+                    <button className="button">
                         Try it now <span className="arrow">&rarr;</span>
-                    </Link>{" "}
-                </button>
-
+                    </button>
+                </Link>{" "}
                 <div className="footer">
                     <a href="https://github.com/ProvableHQ/sdk">
                         <img