added landing page + navigation

softstack · Apr 2, 2024 · 2cbd96a · 2cbd96a
1 parent 15d22f4
commit 2cbd96a
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 23 deletions.
diff --git a/src/App.css b/src/App.css
@@ -41,15 +41,50 @@
     height: 100vh;
 }
 
+.components-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.headline {
+    margin: 5px;
+}
+
 .avatar {
-    margin-bottom: -240px;
-    margin-top: -80px;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    width: 100%;
+    overflow: hidden;
+    height: 100%;
 }
 
 .avatar img {
     scale: 0.8;
-    width: 100%;
-    height: 90%;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: scale-down;
+}
+
+.add-to-home {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    background-color: #ffffff;
+    padding: 1em 2em 2em 2em;
+    gap: 1em;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    box-shadow: 0px 0px 4px 10px rgba(255, 255, 255, 0.2);
+}
+
+.landing-text {
+    margin: 0 0 1em 0;
+    padding: 0 1em 0 1em;
+    color: #888a8c;
 }
 
 .connect-buttons {
@@ -60,7 +95,7 @@
     display: flex;
     flex-direction: column;
     background-color: #ffffff;
-    padding: 2em;
+    padding: 1em 2em 2em 2em;
     gap: 1em;
     border-top-left-radius: 25px;
     border-top-right-radius: 25px;
@@ -102,3 +137,35 @@
     margin-left: -34px;
     text-align: center; /* Center the text */
 }
+
+.primary-button {
+    display: flex;
+    align-items: center; /* Vertically center align items */
+    justify-content: center; /* Horizontally center content */
+    background-color: #007aff; /* Background color of the button */
+    color: white; /* Text color */
+    padding: 10px 20px; /* Padding around text and icon */
+    border-radius: 10px; /* Rounded corners */
+    border: none; /* No border */
+    cursor: pointer; /* Pointer cursor on hover */
+    font-size: 16px; /* Text size */
+    font-weight: bold; /* Font weight for the text */
+    /* white-space: nowrap; Prevents wrapping of text */
+    text-align: center;
+}
+
+.skip-button {
+    color: #888a8c;
+    display: flex;
+    padding: 1em;
+    font-size: 0.8rem;
+    font-weight: 600;
+    justify-content: flex-end;
+}
+
+.back-button {
+    display: flex;
+    padding: 1em;
+    font-size: 0.8rem;
+    justify-content: flex-start;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,35 +1,103 @@
+import { useState } from 'react';
+
 import './App.css';
 
+import PrimaryButton from './components/buttons/PrimaryButton';
+
 import WalletConnectModal from './components/connectors/WalletConnectModal';
 import TonConnectModal from './components/connectors/TonConnectModal';
 import SolanaConnectModal from './components/connectors/SolanaConnectModal';
 
-import avatorPhone from './assets/avatar_phone.png';
+import avatarPhone from './assets/avatar_phone.png';
+import avatarScooter from './assets/avatar_scooter.png';
+import chevronLeftIcon from './assets/chevron-left.svg';
+
 import walletConnectIcon from './assets/wallet_connect.png';
 import tonConnectIcon from './assets/ton_connect.png';
 import solanaConnectIcon from './assets/solana_connect.png';
 
+enum View {
+    LANDING = 0,
+    CONNECT = 1,
+    CONNECTED = 2,
+    WALLET = 3,
+}
+
 function App() {
+    const [view, setView] = useState<View>(View.LANDING);
+
+    const addToHomeScreen = () => {
+        setView(View.CONNECT);
+    };
+
+    const goBack = () => {
+        if (view === View.LANDING) {
+            return;
+        }
+        setView(view - 1);
+    };
+
     return (
         <>
             <div className="main-component">
-                <div className="avatar">
-                    <img src={avatorPhone} alt="" />
-                </div>
-                <div className="connect-buttons">
-                    <WalletConnectModal
-                        title="Wallet Connect"
-                        icon={walletConnectIcon}
-                    />
-                    <TonConnectModal
-                        title="TON Connect"
-                        icon={tonConnectIcon}
-                    />
-                    <SolanaConnectModal
-                        title="Solana Connect"
-                        icon={solanaConnectIcon}
-                    />
-                </div>
+                {view === View.LANDING && (
+                    <div className="components-container">
+                        <div className="skip-button">
+                            <span>Skip</span>
+                        </div>
+                        <div className="avatar">
+                            <img src={avatarScooter} alt="" />
+                        </div>
+                        <div className="add-to-home">
+                            <div>
+                                <h2 className="headline">CALL IT HOME</h2>
+                            </div>
+                            <div>
+                                <p className="landing-text">
+                                    Catat Keuanganmu dengan Mudah, setiap
+                                    pengeluaran dan pemasukan akan terdata rapi
+                                </p>
+                            </div>
+                            <div>
+                                <PrimaryButton
+                                    title="Add to your Home Screen"
+                                    callback={addToHomeScreen}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                )}
+                {view === View.CONNECT && (
+                    <div className="components-container">
+                        <div className="back-button">
+                            <img
+                                onClick={goBack}
+                                src={chevronLeftIcon}
+                                alt="Back"
+                            />
+                        </div>
+                        <div className="avatar" style={{ height: '58%' }}>
+                            <img src={avatarPhone} alt="" />
+                        </div>
+                        <div className="connect-buttons">
+                            <h2 className="headline">CONNECT</h2>
+                            <WalletConnectModal
+                                title="Wallet Connect"
+                                icon={walletConnectIcon}
+                            />
+                            <TonConnectModal
+                                title="TON Connect"
+                                icon={tonConnectIcon}
+                            />
+                            <SolanaConnectModal
+                                title="Solana Connect"
+                                icon={solanaConnectIcon}
+                            />
+                        </div>
+                    </div>
+                )}
+                {view === View.CONNECTED && <div></div>}
+                {view === View.WALLET && <div></div>}
             </div>
         </>
     );

diff --git a/src/assets/avatar_scooter.png b/src/assets/avatar_scooter.png
diff --git a/src/assets/chevron-left.svg b/src/assets/chevron-left.svg
diff --git a/src/components/buttons/PrimaryButton.tsx b/src/components/buttons/PrimaryButton.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+type Props = {
+    title: string;
+    callback: () => void;
+};
+
+const PrimaryButton: React.FC<Props> = ({ title, callback }) => {
+    return (
+        <div className="primary-button" onClick={callback}>
+            <span>{title}</span>
+        </div>
+    );
+};
+
+export default PrimaryButton;