Added left side of landing page

config.ts

@@ -0,0 +1,7 @@
+export default {
+    UNIREP_ADDRESS: '0xCa61bFcA0107c5952f8bf59f4D510d111cbcE146',
+    APP_ADDRESS: '0xA51c1fc2f0D1a1b8494Ed1FE312d7C3a78Ed91C0',
+    ETH_PROVIDER_URL: 'http://127.0.0.1:8545',
+    PRIVATE_KEY: '0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80',
+  }
+  

package.json

@@ -20,6 +20,7 @@
         "lint": "prettier ."
     },
     "devDependencies": {
+        "@types/react-dom": "^18.2.5",
         "lerna": "^6.0.1",
         "node-fetch": "^3.3.0"
     },

packages/frontend/src/index.css

@@ -1,5 +1,16 @@
+html {
+    height: 100%;
+}
+
 body {
     /* font-family: sans-serif, helvetica; */
     font-family: 'Azeret Mono';
     font-weight: 200;
+    height: 100%;
+    margin: 0;
+    background-color: black;
 }
+
+#root {
+    height: 100%;
+}

packages/frontend/src/pages/Start.tsx

@@ -4,8 +4,10 @@ import { observer } from 'mobx-react-lite'
 import './start.css'
 import Tooltip from '../components/Tooltip'
 import Button from '../components/Button'
+import logo from '../images/voteathon-emblem.png';
 
 import User from '../contexts/User'
+// import imageName from '../../public/yellow-curve-bg.png';
 
 export default observer(() => {
     const userContext = React.useContext(User)
@@ -19,76 +21,26 @@ export default observer(() => {
     // }
 
     return (
-        <>
-            <div className="bg">
-                <img
-                    src={require('../../public/hummingbird.svg')}
-                    alt="hummingbird at a flower"
-                />
+        <div className="main-container" style={{ backgroundImage: `url("/yellow-curve-bg.png")` }}>
+            <div className="title">
+                voteathon is built for hackers by the hackers.
             </div>
-            <div className="content">
-                <div style={{ fontSize: '70px', fontWeight: '600' }}>
-                    Congratulations
-                </div>
-                <div className="attester">
-                    <div style={{ marginRight: '12px' }}>
-                        You have created a new UniRep attester{' '}
-                    </div>
-                    <Tooltip text="Attesters define their own data systems and are able to attest to users, giving them data." />
-                </div>
-                <p>
-                    Clicking 'Join' adds a user to this attester's membership
-                    group.
-                </p>
-                <div className="join">
-                    {!userContext.hasSignedUp ? (
-                        <Button
-                            onClick={() => {
-                                if (!userContext.userState) return
-                                return userContext.signup()
-                            }}
-                        >
-                            {userContext.userState ? 'Join' : 'Initializing...'}
-                            <span style={{ marginLeft: '12px' }}>
-                                <img
-                                    src={require('../../public/arrow.svg')}
-                                    alt="right arrow"
-                                />
-                            </span>
-                        </Button>
-                    ) : (
-                        <div>
-                            <p
-                                style={{
-                                    fontWeight: '400',
-                                    lineHeight: '.5em',
-                                }}
-                            >
-                                USER ADDED!
-                            </p>
-                            <Link to="/dashboard">
-                                <Button>
-                                    Dashboard
-                                    <span style={{ marginLeft: '12px' }}>
-                                        <img
-                                            src={require('../../public/arrow.svg')}
-                                            alt="right arrow"
-                                        />
-                                    </span>
-                                </Button>
-                            </Link>
-                        </div>
-                    )}
-                </div>
-                <p>
-                    After joining, the member can interact with data in the
-                    attester's application.{' '}
-                </p>
-                <p>
-                    Customize this landing page to onboard new users to your
-                    app.
-                </p>
+
+            <div className="info">
+                <div className="list-title">How does it work?</div>
+
+                <ol>
+                    <li>Claim your ID</li>
+                    <li>Join the project that you are a part of</li>
+                    <li>Vote for the project you like</li>
+                    <li>Wait for the final result</li>
+                    <li>Claim the reward</li>
+                </ol>
             </div>
-        </>
+
+            <div className="right-container">
+                <img src={logo} alt="voteathon" />
+            </div>
+        </div>
     )
 })

packages/frontend/src/pages/start.css

@@ -1,3 +1,32 @@
+.main-container {
+    background-size: 50%;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+    padding: 60px;
+}
+
+.title {
+    width: 32%;
+    font-size: 50px;
+    font-weight: 700;
+    line-height: 1.1em;
+}
+
+.info {
+    margin-top: 8em;
+    font-size: 1.1em;
+}
+
+.info > .list-title {
+    font-size: 1.2em;
+    font-weight: bold;
+}
+
+.info > ol {
+    line-height: 2em;
+}
+
 p {
     font-size: 14px;
     font-weight: 200;