Add landing page

compliant-reward-distribution/frontend/src/App.tsx

@@ -8,6 +8,7 @@ import { ConcordiumGRPCClient } from '@concordium/web-sdk';
 import './styles.scss';
 import { WalletProvider } from './wallet-connection';
 import { version } from '../package.json';
+import { LandingPage } from './components/LandingPage';
 import { ConnectWallet } from './components/ConnectWallet';
 import { ZkProofSubmission } from './components/ZkProofSubmission';
 import { Admin } from './components/Admin/Admin';
@@ -60,6 +61,9 @@ export const App = () => {
                         Version {version} ({capitalizedNetwork})
                     </a>
                 </div>
+                <Link className="secondary" to="/landingPage">
+                    LandingPage
+                </Link>
                 <Link className="secondary" to="/connectWallet">
                     ConnectWallet
                 </Link>
@@ -81,6 +85,7 @@ export const App = () => {
             </div>
 
             <Routes>
+                <Route path="/landingPage" element={<LandingPage />} />
                 <Route
                     path="/connectWallet"
                     element={<ConnectWallet connectProvider={connectProvider} connectedAccount={connectedAccount} />}

compliant-reward-distribution/frontend/src/components/LandingPage.tsx

@@ -0,0 +1,38 @@
+import { Button, Image } from 'react-bootstrap';
+
+export function LandingPage() {
+    return (
+        <div className="centered">
+            <div className="card">
+                <h1 className="centered h1">Concordium Rewards</h1>
+
+                <br />
+
+                <div className="centered">
+                    <Image src="./src/pictures/LandingPage.png" alt="Concordium Logo" fluid />
+                </div>
+
+                <br />
+
+                <h2 className="centered h2">Create post on X and get 1000 CCD rewards:</h2>
+
+                <br />
+                <br />
+
+                <ul className="list">
+                    <li>1. Connect your wallet</li>
+                    <li>2. Post about Concordium on X (Twitter) with the #Concordium hashtag</li>
+                    <li>3. Confirm that you are of eligible age and nationality.</li>
+                </ul>
+
+                <br />
+
+                <Button variant="primary" type="submit" onClick={async () => (window.location.href = 'connectWallet')}>
+                    Get Started
+                </Button>
+
+                <br />
+            </div>
+        </div>
+    );
+}

compliant-reward-distribution/frontend/src/styles.scss

@@ -13,6 +13,21 @@ body,
     height: auto;
     width: 100%;
     display: flex;
+    background: black;
+    color: white;
+}
+
+.h1 {
+    color: #a2cac1;
+}
+
+.h2 {
+    color: #a2cac1;
+}
+
+.list {
+    list-style-type: none;
+    color: white;
 }
 
 .centered {
@@ -25,19 +40,18 @@ body,
 }
 
 .card {
-    color: rgb(0, 0, 0);
     width: 825px;
     height: auto;
     border-radius: 10;
     margin: 10px 0px;
     padding: 20px 20px;
     border: 1px solid rgb(85, 85, 85);
-    background: #ddd;
+    background: black;
 }
 
 .btn:hover {
     border-color: grey;
-    background: grey;
+    background: #a2cac1;
 }
 
 .pre {
@@ -56,15 +70,15 @@ body,
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    background: black;
+    background: #a2cac1;
     border-radius: 8px;
-    border-color: black;
-    color: white;
+    border-color: #a2cac1;
+    color: black;
     cursor: pointer;
 }
 
 .navbar {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: #a2cac1;
     display: flex;
     justify-content: center;
     overflow: hidden;
@@ -97,6 +111,6 @@ body,
 }
 
 .navbar a.secondary:hover {
-    background-color: #ddd;
+    background-color: white;
     color: black;
 }