Skip to content

Commit 19fc25d

Browse files
michellewong793michellewong793
authored
Merge pull request #916 from ProvableHQ/mwong/sdk-homepage
Create SDK homepage with links to SDK tabs
2 parents 212bfa9 + 8d9c288 commit 19fc25d

File tree

7 files changed

+292
-22
lines changed

7 files changed

+292
-22
lines changed

‎website/public/assets/fonts/AleofontSans-Regular.otf‎

33.8 KB
Binary file not shown.

‎website/public/primary-wordmark-dark.png‎

29.6 KB
Loading

‎website/src/App.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,31 @@
55
*/
66
input[type="text"]:disabled {
77
cursor: text;
8+
}
9+
10+
@font-face {
11+
font-family: "AleoSans";
12+
src: url("/assets/fonts/AleofontSans-Regular.otf") format("opentype");
13+
font-weight: normal;
14+
font-style: normal;
15+
}
16+
17+
.headerDark {
18+
font-family: "AleoSans";
19+
color: white;
20+
font-size:32px;
21+
margin-left:2rem;
22+
a {
23+
color: white;
24+
}
25+
}
26+
27+
.headerLight {
28+
font-family: "AleoSans";
29+
color: black;
30+
font-size:32px;
31+
margin-left:2rem;
32+
a{
33+
color: black;
34+
}
835
}

‎website/src/main.jsx‎

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,9 @@ function Main() {
5858

5959
useEffect(() => {
6060
setMenuIndex(location.pathname);
61-
if (location.pathname === "/") {
62-
navigate("/account");
63-
}
61+
// if (location.pathname === "/") {
62+
// navigate("/account");
63+
// }
6464
}, [location, navigate]);
6565

6666
const [darkMode, setDarkMode] = useState(true);
@@ -80,20 +80,11 @@ function Main() {
8080
<WasmLoadingMessage />
8181
<Layout style={{ minHeight: "100vh" }}>
8282
<Sider breakpoint="lg" collapsedWidth="0" theme="light">
83-
<img
84-
src={
85-
darkMode
86-
? "../public/aleosdklight.svg"
87-
: "../public/aleosdkdark.svg"
88-
}
89-
alt="Aleo SDK Logo"
90-
style={{
91-
height: "32px",
92-
margin: "16px",
93-
fontWeight: "bold",
94-
whiteSpace: "nowrap",
95-
}}
96-
/>
83+
<h1 className={darkMode ? "headerDark": "headerLight"}>
84+
<Link to="/">
85+
Aleo SDK
86+
</Link>
87+
</h1>
9788
<Menu
9889
theme="light"
9990
mode="inline"

‎website/src/pages/Homepage.css‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
/* Mobile Styles */
2+
.homepage {
3+
padding: 10px;
4+
font-size: 14px;
5+
}
6+
7+
.button {
8+
background-color: #12e172;
9+
padding: 16px 32px 16px 32px;
10+
border-radius: 9px;
11+
font-size: 18px;
12+
color: white;
13+
border: none;
14+
15+
a {
16+
text-decoration: none;
17+
color: white;
18+
}
19+
}
20+
21+
.button:hover {
22+
background-color: #0bb359;
23+
}
24+
25+
.arrow {
26+
font-family: Arial, Helvetica, sans-serif;
27+
}
28+
29+
.headerContainer {
30+
display: flex;
31+
flex-direction: column;
32+
align-items: center;
33+
justify-content: center;
34+
width: 100%;
35+
}
36+
37+
.header {
38+
font-size: 3rem;
39+
max-width: 1200px;
40+
width: 100%;
41+
margin: 10rem auto 0;
42+
text-align: center;
43+
}
44+
45+
.subheader {
46+
font-size: 1rem;
47+
text-align: center;
48+
}
49+
50+
.secondSubheader {
51+
font-size: 16px;
52+
text-align: center;
53+
margin-top: 6rem;
54+
}
55+
56+
.actionRow {
57+
display: flex;
58+
flex-direction: column;
59+
height: 100%;
60+
max-height: 100rem;
61+
align-items: center;
62+
justify-content: space-between;
63+
margin: 5rem auto 0;
64+
padding-left: 0;
65+
}
66+
67+
.actionRow a:nth-child(2),
68+
a:nth-child(3) {
69+
margin-top: 2rem;
70+
}
71+
72+
.actionItem {
73+
width: 200px;
74+
padding: 1rem 1rem 1rem 1rem;
75+
border: 2px solid white;
76+
border-radius: 20px;
77+
list-style-type: none;
78+
text-align: center;
79+
color: white;
80+
text-decoration: none;
81+
font-size: 1rem;
82+
align-content: center;
83+
}
84+
85+
.actionItem:hover {
86+
background-color: #0bb359;
87+
}
88+
89+
/* Desktop Styles */
90+
@media (min-width: 1024px) {
91+
.homepage {
92+
padding: 20px;
93+
font-size: 18px;
94+
}
95+
96+
.actionRow {
97+
display: flex;
98+
flex-direction: row;
99+
width: 100%;
100+
max-width: 800px;
101+
justify-content: space-between;
102+
margin: 10rem auto 0;
103+
}
104+
105+
.header {
106+
font-size: 6rem;
107+
max-width: 1200px;
108+
width: 100%;
109+
margin: 10rem auto 0;
110+
text-align: center;
111+
}
112+
113+
.subheader {
114+
font-size: 32px;
115+
width: 35rem;
116+
text-align: center;
117+
}
118+
119+
.secondSubheader {
120+
font-size: 32px;
121+
width: 35rem;
122+
text-align: center;
123+
margin-top: 10rem;
124+
}
125+
126+
.actionRow a:nth-child(2),
127+
a:nth-child(3) {
128+
margin-top: 0;
129+
}
130+
131+
.actionItem {
132+
width: 175px;
133+
padding: 2rem 2rem 2rem 2rem;
134+
border: 2px solid white;
135+
border-radius: 30px;
136+
list-style-type: none;
137+
text-align: center;
138+
139+
a {
140+
color: white;
141+
text-decoration: none;
142+
font-size: 24px;
143+
align-content: center;
144+
}
145+
}
146+
147+
.actionItem:hover {
148+
background-color: #0bb359;
149+
}
150+
}
151+
152+
@font-face {
153+
font-family: "AleoSans";
154+
src: url("/assets/fonts/AleofontSans-Regular.otf") format("opentype");
155+
font-weight: normal;
156+
font-style: normal;
157+
}
158+
159+
body {
160+
font-family: "AleoSans", sans-serif;
161+
color: white;
162+
}
163+
164+
.logo {
165+
height: 2rem;
166+
}
167+
168+
.footer {
169+
display: flex;
170+
flex-direction: column;
171+
align-items: center;
172+
margin-top: 10rem;
173+
}

‎website/src/pages/Homepage.jsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React from "react";
2+
import { Link } from "react-router-dom";
3+
4+
import "./Homepage.css";
5+
6+
const Homepage = () => {
7+
return (
8+
<div className="homepage">
9+
<Link to="https://provable.com/">
10+
<img
11+
src="../public/primary-wordmark-dark.png"
12+
className="logo"
13+
></img>
14+
</Link>
15+
<div className="headerContainer">
16+
<h1 className="header">Aleo SDK</h1>
17+
<p className="subheader">
18+
The tooling for building zero-knowledge applications at your
19+
fingertips
20+
</p>{" "}
21+
<Link
22+
target="_blank"
23+
rel="noopener noreferrer"
24+
to="https://developer.aleo.org/sdk/"
25+
>
26+
<button className="button">
27+
{" "}
28+
View Docs <span className="arrow">&rarr;</span>{" "}
29+
</button>
30+
</Link>{" "}
31+
<ul className="actionRow">
32+
<Link to="/account" className="actionItem">
33+
{" "}
34+
<li>
35+
Create and manage accounts{" "}
36+
</li>
37+
</Link>
38+
39+
<Link to="/develop" className="actionItem">
40+
{" "}
41+
<li>
42+
Execute and deploy programs{" "}
43+
</li>
44+
</Link>
45+
46+
<Link to="/transfer" className="actionItem">
47+
<li>
48+
Manage program state and data
49+
</li>
50+
</Link>
51+
</ul>
52+
<p className="secondSubheader">
53+
Build your first zero-knowledge app with create-leo-app
54+
</p>{" "}
55+
<Link
56+
target="_blank"
57+
rel="noopener noreferrer"
58+
to="https://docs.leo-lang.org/sdk/create-leo-app/tutorial/"
59+
>
60+
<button className="button">
61+
Try it now <span className="arrow">&rarr;</span>
62+
</button>
63+
</Link>{" "}
64+
<div className="footer">
65+
<a href="https://github.com/ProvableHQ/sdk">
66+
<img
67+
src="../public/github-mark-white.png"
68+
style={{ height: "24px", marginBottom: "1rem" }}
69+
></img>
70+
</a>
71+
© 2024 Provable Inc.
72+
</div>
73+
</div>
74+
</div>
75+
);
76+
};
77+
78+
export default Homepage;

‎website/src/routing.jsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createBrowserRouter, Navigate } from "react-router-dom";
1+
import { createBrowserRouter } from "react-router-dom";
22
import Main from "./main.jsx";
33
import { NewAccount } from "./tabs/account/NewAccount.jsx";
44
import { AccountFromPrivateKey } from "./tabs/account/AccountFromPrivateKey.jsx";
@@ -22,15 +22,16 @@ import { Join } from "./tabs/develop/Join.jsx";
2222
import { Execute } from "./tabs/develop/execute/";
2323
import { GetMappingNames } from "./tabs/rest/GetMappingNames.jsx";
2424
import { GetMappingValue } from "./tabs/rest/GetMappingValue.jsx";
25+
import Homepage from "./pages/Homepage";
2526

2627
export const router = createBrowserRouter([
28+
{
29+
path: "/",
30+
element: <Homepage />,
31+
},
2732
{
2833
element: <Main />,
2934
children: [
30-
{
31-
path: "/",
32-
element: <Navigate to="/deploy" replace={false} />,
33-
},
3435
{
3536
path: "/account",
3637
element: (

0 commit comments

Comments
 (0)