Signup page init

public/assets/images/signup/rocket.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="301.408" height="77.587" viewBox="0 0 301.408 77.587">
+  <g id="Group_304" data-name="Group 304" transform="translate(-48.863 -25.337)">
+    <path id="Path_291" data-name="Path 291" d="M1760.163,46.053C1681.265,38.564,1599.1,35.5,1553.7,81.309s119.183,42.6,75.535-16.783-130.787,0-130.787,0" transform="translate(-1449.307 -10.375)" fill="none" stroke="#707070" stroke-width="1" stroke-dasharray="9 5"/>
+    <g id="Group_34" data-name="Group 34" transform="translate(-1386.263 122.15)">
+      <path id="Path_292" data-name="Path 292" d="M1705.353-77.281l-5.371,16.673,36.4-4.267Z" transform="translate(0 -9.541)" fill="#f8c657"/>
+      <path id="Path_293" data-name="Path 293" d="M1741.614-74.36,1710.382-86.8l2.67-10.016Z" transform="translate(-5.081)" fill="#f8c657"/>
+      <path id="Path_294" data-name="Path 294" d="M1736.726-64.794l-31.232-12.437-5.118.971Z" transform="translate(-0.192 -9.566)" fill="#ddb04e"/>
+      <path id="Path_295" data-name="Path 295" d="M1704.835-73.973l-.745,2.278-3.682-3.67Z" transform="translate(-0.208 -10.477)" fill="#efbe53"/>
+    </g>
+  </g>
+</svg>

src/App.tsx

@@ -3,6 +3,7 @@ import { IonApp, IonRouterOutlet } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
 import WelcomePage from './pages/onboarding/Welcome';
 import LoginPage from './pages/login/Login';
+import SignupPage from './pages/signup/Signup';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -34,6 +35,9 @@ const App: React.FC = () => (
         <Route exact path="/login">
             <LoginPage />
         </Route>
+        <Route exact path="/signup">
+            <SignupPage />
+        </Route>
         <Route exact path="/">
             <Redirect to="/welcome" />
         </Route>

src/pages/login/Login.tsx

@@ -3,6 +3,7 @@ import { personOutline, lockOpenOutline } from 'ionicons/icons';
 import { Component } from 'react';
 import InputWidget from '../../components/input/InputWidget';
 import styles from './Login.module.scss';
+import { BrowserRouter as Router, Route, Link } from "react-router-dom"
 
 type Props = { };
 
@@ -22,10 +23,10 @@ class LoginPage extends Component<Props, OwnState> {
                 <section className={styles.upfold}>
                     <div className={styles.container}>
                         <figure>
-                            <img src="assets/images/welcome/upfold.svg" alt="upfold image"/>
+                            <img src='assets/images/welcome/upfold.svg' alt='upfold image'/>
                         </figure>
                         <h2> Welcome Back! </h2>
-                        <p> Enter your email-id &amp; password </p>
+                        <p> Please enter your email-id &amp; password </p>
                     </div>
                 </section>
 
@@ -40,11 +41,11 @@ class LoginPage extends Component<Props, OwnState> {
                     <div className={ styles.actionLink }> <a> Forgot Password? </a> </div>
 
                     <div className={styles.actionButtonsHolder}>
-                        <IonButton className={styles.actionButton} expand="block"> Login </IonButton>
+                        <IonButton className={styles.actionButton} expand='block'> Login </IonButton>
                     </div>                    
                 </section>
 
-                <div className={ styles.navigationLink }> Don't have an account? <a> Sign up </a> </div>
+                <div className={ styles.navigationLink }> Don't have an account? <Link to='/signup'> <span> Signup </span> </Link> </div>
             </IonContent>
         </IonPage>
     };

src/pages/onboarding/Welcome.tsx

@@ -17,7 +17,6 @@ class WelcomePage extends Component<Props, OwnState> {
     render() {
         return <IonPage>
             <IonContent fullscreen>
-
                 <section className={styles.upfold}>
                     <figure>
                         <img src="assets/images/welcome/upfold.svg" alt="upfold image"/>

src/pages/signup/Signup.module.scss

@@ -0,0 +1,128 @@
+.upfold {
+    background-color: var(--charcoal);
+    height: auto;
+    transform: translateY(-50vh);
+    width: 100%;
+    border-bottom-right-radius: 30px;
+    border-bottom-left-radius: 30px;
+    position: relative;
+    z-index: 1;
+    box-shadow: 0px 0px 10px 5px var(--black-rock);
+    animation: riseDown 1s forwards;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .container {
+        padding: 30px 5%;
+        text-align: center;
+    }
+
+    h2 {
+        font-size: 26px;
+        color: white;
+    }
+
+    p {
+        font-size: 14px;
+        color: var(--grey-rock);
+    }
+
+    figure {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 0;
+        display: block;
+        width: 100%;
+        height: 100%;
+        margin: 10px 0;
+        animation: fadeIn 1s forwards;
+        opacity: 0;
+        transform: translateY(10vh);
+    }
+
+    img {
+        margin: 5px auto 0;
+        width: 70%;
+        display: block;
+    }
+
+    @keyframes riseDown {
+        from {
+            transform: translateY(-50vh);
+        }
+        to {
+            transform: translateY(0vh);
+        }
+    }
+}
+
+.inputForm {
+    width: 80%;
+    margin: 40px auto 0;
+    opacity: 0;
+    transform: translateY(10vh);
+    position: relative;
+    animation: fadeIn 1s forwards;
+
+    .input {
+        margin: 20px 0;
+    }
+
+    .actionLink {
+        text-align: right;
+        margin: 20px 0;
+
+        span {
+            font-size: 14px;
+            color: var(--rock);
+            text-decoration: none;
+        }
+    }
+
+    .actionButtonsHolder {
+        width: 60%;
+        margin: 20px auto;
+
+        .actionButton {
+            height: 50px;
+            text-transform: none;
+            font-size: 16px;            
+            --border-radius: 30px;
+            --border-color: var(--shamrock);
+            font-weight: 500;
+
+            &:nth-child(1) {
+                --background: var(--shamrock);            
+            }
+        }
+    }    
+}
+
+.navigationLink {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    bottom: 10px;
+    text-align: center;
+    font-size: 14px;
+    color: var(--rock);    
+
+    span {
+        color: var(--shamrock);
+        text-decoration: none;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10vh);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0vh);
+    }
+}

src/pages/signup/Signup.tsx

@@ -0,0 +1,51 @@
+import { IonContent, IonPage, IonButton } from '@ionic/react';
+import { personOutline, lockOpenOutline } from 'ionicons/icons';
+import { Component } from 'react';
+import InputWidget from '../../components/input/InputWidget';
+import styles from './Signup.module.scss';
+
+type Props = { };
+
+type OwnState = { };
+
+class SignupPage extends Component<Props, OwnState> {
+    constructor(
+        props: Props
+    ) {
+        super(props);
+        this.state = {};
+    }
+
+    render() {
+        return <IonPage>
+            <IonContent fullscreen>
+                <section className={styles.upfold}>
+                    <div className={styles.container}>
+                        <figure>
+                            <img src="assets/images/signup/rocket.svg" alt="rocket image"/>
+                        </figure>
+                        <h2> Let's Create </h2>
+                        <p> Please provide few details below. </p>
+                    </div>
+                </section>
+
+                <section className={styles.inputForm}>
+                    <div className={styles.input}>
+                        <InputWidget type={'TEXT'} icon={personOutline} placeholder={'Email'} />
+                    </div>
+                    <div className={styles.input}>
+                        <InputWidget type={'PASSWORD'} icon={lockOpenOutline} placeholder={'Password'} />
+                    </div>
+
+                    <div className={styles.actionButtonsHolder}>
+                        <IonButton className={styles.actionButton} expand="block"> Login </IonButton>
+                    </div>                    
+                </section>
+
+                <div className={ styles.navigationLink }> Already have an account? <a> Login </a> </div>
+            </IonContent>
+        </IonPage>
+    };
+};
+
+export default SignupPage;