From 2657a4e146950de0d0fcd170c564cfc89157288a Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Fri, 9 Aug 2024 01:54:48 +0100
Subject: [PATCH] onboarding

---
 src/App.tsx                      | 46 ++++++++++-----
 src/layout/HeaderPageLayout.tsx  | 15 +++++
 src/pages/TermsAndConditions.tsx | 28 +++++----
 src/pages/VerifyEmail.tsx        | 98 +++++++++++++++++++++++++-------
 4 files changed, 140 insertions(+), 47 deletions(-)
 create mode 100644 src/layout/HeaderPageLayout.tsx

diff --git a/src/App.tsx b/src/App.tsx
index d794326..d613670 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,10 @@
 import React from "react";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+} from "react-router-dom";
 
 import ConnectWallet from "./pages/ConnectWallet";
 import SignWithNitroKey from "./pages/SignWithNitroKey";
@@ -9,7 +14,7 @@ import OnboardingSuccess from "./pages/OnboardingSuccess";
 import SignPageLayout from "./layout/SignPageLayout";
 import UserVerification from "./pages/UserVerification";
 import TermsAndConditions from "./pages/TermsAndConditions";
-import Header from "./components/Header";
+import HeaderPageLayout from "./layout/HeaderPageLayout";
 import { WalletConnectProvider } from "./context/WalletConnectContext";
 import VerifyEmail from "./pages/VerifyEmail";
 import Email from "./pages/Email";
@@ -20,23 +25,36 @@ import "./App.css";
 function App() {
   return (
     <Router>
-      <Header />
       <WalletConnectProvider>
         <Routes>
-          <Route path="/" element={<TermsAndConditions />} />
+          <Route path="/" element={<Navigate to="/verify-email" replace />} />
+          <Route
+            path="/terms-and-conditions"
+            element={<TermsAndConditions />}
+          />
           <Route path="/verify-email" element={<VerifyEmail />} />
           <Route path="/email" element={<Email />} />
-          <Route path="/connect-wallet" element={<ConnectWallet />} />
-          <Route path="/thanks" element={<Thanks />} />
-          <Route element={<SignPageLayout />}>
-            <Route path="/sign-with-nitro-key" element={<SignWithNitroKey />} />
-            <Route path="/user-verification" element={<UserVerification />} />
-            <Route path="/sign-with-cosmos" element={<SignWithCosmos />} />
-            <Route
-              path="/onboarding-success"
-              element={<OnboardingSuccess />}
-            ></Route>
+
+          {/* Routes with Header */}
+          <Route element={<HeaderPageLayout />}>
+            <Route path="/connect-wallet" element={<ConnectWallet />} />
+            <Route path="/thanks" element={<Thanks />} />
+
+            {/* SignPageLayout nested inside HeaderPageLayout */}
+            <Route element={<SignPageLayout />}>
+              <Route
+                path="/sign-with-nitro-key"
+                element={<SignWithNitroKey />}
+              />
+              <Route path="/user-verification" element={<UserVerification />} />
+              <Route path="/sign-with-cosmos" element={<SignWithCosmos />} />
+              <Route
+                path="/onboarding-success"
+                element={<OnboardingSuccess />}
+              />
+            </Route>
           </Route>
+
           <Route path="*" element={<PageNotFound />} />
         </Routes>
       </WalletConnectProvider>
diff --git a/src/layout/HeaderPageLayout.tsx b/src/layout/HeaderPageLayout.tsx
new file mode 100644
index 0000000..613f15b
--- /dev/null
+++ b/src/layout/HeaderPageLayout.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Outlet } from "react-router-dom";
+
+import Header from "../components/Header";
+
+const HeaderPageLayout: React.FC = () => {
+  return (
+    <>
+      <Header />
+      <Outlet />
+    </>
+  );
+};
+
+export default HeaderPageLayout;
diff --git a/src/pages/TermsAndConditions.tsx b/src/pages/TermsAndConditions.tsx
index a0f8112..d52b791 100644
--- a/src/pages/TermsAndConditions.tsx
+++ b/src/pages/TermsAndConditions.tsx
@@ -1,26 +1,30 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import React from "react";
+import { useNavigate } from "react-router-dom";
 
-import { Container, Button, Box, Paper } from '@mui/material';
+import { Container, Button, Box, Paper } from "@mui/material";
 
-import TermsAndConditionsBox from '../components/TermsAndConditionsBox';
+import TermsAndConditionsBox from "../components/TermsAndConditionsBox";
 
 const TermsAndConditions = () => {
   const navigate = useNavigate();
 
   const handleAccept = () => {
-    navigate('/verify-email');
+    navigate("/verify-email");
   };
 
   return (
     <Container maxWidth="lg">
-      <Paper elevation={3} style={{ padding: '2rem', marginTop: '2rem', height: '83vh', display: 'flex', flexDirection: 'column' }}>
-        <TermsAndConditionsBox height='80vh' />
-        <Box mt={2} display="flex" justifyContent="center">
-          <Button variant="contained" color="primary" onClick={handleAccept}>
-            Accept
-          </Button>
-        </Box>
+      <Paper
+        elevation={3}
+        style={{
+          padding: "2rem",
+          marginTop: "2rem",
+          height: "83vh",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <TermsAndConditionsBox height="80vh" />
       </Paper>
     </Container>
   );
diff --git a/src/pages/VerifyEmail.tsx b/src/pages/VerifyEmail.tsx
index 4c8f053..8785542 100644
--- a/src/pages/VerifyEmail.tsx
+++ b/src/pages/VerifyEmail.tsx
@@ -1,24 +1,80 @@
-import React from 'react'
+import React from "react";
+import { LaconicWithTextIcon } from "../components/CustomIcon";
 
-const VerifyEmail = () => {
+const VerifyEmail: React.FC = () => {
   return (
-    <div style={{ display: 'flex', justifyContent: 'center', margin: '20vh' }}>
-      <iframe
-        title="verify-email"
-        src="https://embeds.beehiiv.com/18aaa245-3652-4b0a-94a9-a87054df4914"
-        data-test-id="beehiiv-embed"
-        width="480"
-        height="320"
-        frameBorder="0"
-        scrolling="no"
-        style={{
-          borderRadius: '4px',
-          border: '2px solid #e5e7eb',
-          backgroundColor: 'transparent',
-        }}
-      ></iframe>
-    </div>
-  )
-}
+    <div className="w-full min-h-screen bg-gradient-to-b from-[#0000f4] to-[#0f0f0f] flex justify-center items-center px-8 pt-8 pb-16">
+      <div className="w-full max-w-5xl px-8 pt-8 pb-16 bg-[#181719] rounded-lg flex flex-col md:flex-row gap-20">
+        <div className="md:w-1/2 flex-col justify-start items-start gap-12 inline-flex">
+          <div className="w-28 h-5 relative">
+            <LaconicWithTextIcon color="white" />
+          </div>
+          <div className="flex-col justify-start items-start gap-6 flex">
+            <h1 className="text-[#fbfbfb] text-4xl font-normal font-['Arthemys Display'] leading-10">
+              LORO Testnet
+            </h1>
+            <p className="text-[#bdbcc3] text-lg font-normal font-['TT Hoves'] leading-relaxed">
+              Register to join the Loro Testnet
+            </p>
+          </div>
+          <a
+            href="#"
+            className="text-[#fbfbfb] text-sm font-normal font-['TT Hoves'] underline leading-tight"
+          >
+            Read the Docs
+          </a>
+        </div>
 
-export default VerifyEmail
+        <div className="md:w-1/2 pt-16 flex-col justify-between items-end inline-flex">
+          <form className="w-full space-y-6">
+            <div className="flex-col justify-start items-start gap-2 flex">
+              <label
+                htmlFor="email"
+                className="text-[#fbfbfb] text-base font-normal font-['TT Hoves'] leading-normal"
+              >
+                Email Address
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                required
+                className="w-full h-12 px-3 bg-[#29292d] rounded border border-[#47464f] text-[#fbfbfb] text-sm font-normal font-['TT Hoves'] leading-tight focus:outline-none focus:ring-2 focus:ring-[#0000f4]"
+                placeholder="Enter Email"
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <input
+                id="terms"
+                name="terms"
+                type="checkbox"
+                className="w-4 h-4 bg-[#29292d] rounded border border-[#47464f]"
+              />
+              <label
+                htmlFor="terms"
+                className="text-[#fbfbfb] text-sm font-normal font-['TT Hoves'] leading-tight"
+              >
+                I agree to the{" "}
+                <a href="/terms-and-conditions" target="_blank" rel="noopener">
+                  <span className="underline">Terms & Conditions</span>
+                </a>
+              </label>
+            </div>
+            <div className="flex justify-end pt-28">
+              <button
+                type="submit"
+                className="w-60 h-12 px-6 py-4 bg-[#0000f4] rounded justify-center items-center inline-flex"
+              >
+                <span className="text-center text-[#fbfbfb] text-lg font-normal font-['DM Mono'] uppercase leading-none tracking-tight">
+                  Register
+                </span>
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VerifyEmail;