registeration form UI

src/app/register-business/register-business.component.html

@@ -21,7 +21,8 @@
             <p> {{ error.message }} </p>
         </section>
     
-        <button class="proceed-button" *ngIf="formState === 'INIT_REGISTER'">
+        <button class="proceed-button" *ngIf="formState === 'INIT_REGISTER'"
+        (click)="formState = 'CONFIRM_INIT'">
             Proceed
         </button>
     </ng-container>
@@ -33,13 +34,77 @@
             Lorem, ipsum dolor sit amet consectetur adipisicing elit. At accusamus harum non dolores qui quaerat itaque architecto tenetur maiores dolor! Dolor aspernatur nemo autem et iusto deserunt officiis consectetur laboriosam!
         </p>
 
-        <div class="actions">
-            <button>
+        <div class="form-action-buttons">
+            <button (click)="formState = 'INIT_REGISTER'">
                 Cancel
             </button>
-            <button>
+            <button (click)="formState = 'REGISTER_FORM'">
                 Proceed
             </button>
         </div>
     </section>
+</div>
+
+
+<ng-container *ngIf="formState === 'REGISTER_FORM'">
+    <section class="form">
+        <div class="input-holder" *ngFor="let registerInput of registerForm">
+            <label> {{ registerInput.name }}: </label>
+    
+            <ng-container *ngIf="registerInput.type === 'date'">
+                <input type="date">
+                <img src="assets/icons/calendar-fill.svg" alt="calendar icon">
+            </ng-container>
+    
+            <ng-container *ngIf="registerInput.type === 'select'">
+                <select *ngIf="registerInput.options">
+                    <option *ngFor="let option of registerInput.options" value="option"> {{ option }} </option>
+                </select>
+                
+                <img src="assets/icons/chevron-down.svg" alt="calendar icon">
+            </ng-container>
+    
+            <ng-container *ngIf="registerInput.type === 'text' || registerInput.type === 'email' || registerInput.type === 'number'">
+                <input [type]="registerInput.type" [placeholder]="registerInput.placeholder">
+            </ng-container>
+        </div>
+    </section>
+    
+    <div class="form-action-buttons">
+        <button (click)="formState = 'CONFIRM_INIT'">
+            Back
+        </button>
+        <button (click)="formState = 'SELECT_PLAN'">
+            Proceed
+        </button>
+    </div>
+</ng-container>
+
+<div class="plan-list-container" *ngIf="formState === 'SELECT_PLAN'">
+    <ng-container *ngIf="!selectedPlan">
+        <h5>
+            Your business name application for <br> <strong> {{ nameToCheck }} </strong> is successfully approved!
+        </h5>
+        <ul class="plan-list">
+            <li *ngFor="let plan of plans">
+                <h4> {{ plan.name }} </h4>
+                <h2> ₹ {{ plan.amount }}/- <span> (govt fees + taxes extra) </span> </h2>
+                <h4> {{ plan.range }} </h4>
+                <button (click)="selectedPlan = plan"> Pay </button>
+            </li>
+        </ul>
+    </ng-container>
+
+    <section class="confirmation-box" *ngIf="selectedPlan">
+        <h6> Successfully made payment </h6>
+        <p class="description">
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. At accusamus harum non dolores qui quaerat itaque architecto tenetur maiores dolor! Dolor aspernatur nemo autem et iusto deserunt officiis consectetur laboriosam!
+        </p>
+    
+        <div class="form-action-buttons">
+            <button (click)="formState = 'REGISTER_FORM'" class="highlight">
+                Next
+            </button>
+        </div>
+    </section>
 </div>

src/app/register-business/register-business.component.scss

@@ -124,7 +124,7 @@ header {
             color: var(--dark-grey);
             filter: brightness(80%);
             font-weight: 500;
-            margin: 4rem 0;
+            margin: 4rem 0 2rem;
         }
         
         .description {
@@ -132,33 +132,184 @@ header {
             display: flex;
             align-items: flex-start;
             justify-content: flex-start;
+            margin-bottom: 4rem;
 
             input {
                 margin: 5px 10px;
             }
         }
+    }
+}
 
-        .actions {
-            margin-top: 2rem;
+.form-action-buttons {
+    text-align: center;
 
-            button {
-                border: none;
+    button {
+        border: none;
+        background-color: var(--highlight);
+        padding: 0 4rem;
+        color: white;
+        font-size: 1.6rem;
+        letter-spacing: 0.5px;
+        border-radius: 4rem;
+        height: 5rem;
+        vertical-align: middle;
+
+
+        &:first-child {
+            background-color: var(--border-grey);
+            color: var(--dark-grey);
+            margin-right: 20px;
+
+            &.highlight {
                 background-color: var(--highlight);
-                padding: 0 4rem;
                 color: white;
-                font-size: 1.6rem;
-                letter-spacing: 0.5px;
-                border-radius: 4rem;
-                height: 5rem;
-                vertical-align: middle;
-
-
-                &:first-child {
-                    background-color: var(--border-grey);
-                    color: var(--dark-grey);
-                    margin-right: 20px;
-                }
             }
         }
     }
+}
+
+.form {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    padding: 4rem;
+
+    .input-holder {
+        width: calc(100% - 2rem);
+        margin: 3.5rem 0;
+        position: relative;    
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;    
+
+        label {
+            font-size: 1.6rem;
+            color: var(--primary);
+            font-weight: 500;
+            position: absolute;
+            top: 0;
+            left: 0;
+            font-weight: 400;
+            letter-spacing: 0.5px;
+            transform: translate(2.5rem, -3rem);
+        }
+
+        input, select {
+            display: block;
+            width: 100%;
+            border-radius: 4rem;
+            height: 5.5rem;
+            border: 1px solid var(--border-grey);
+            padding: 0 2rem;
+            font-size: 1.5rem;
+            letter-spacing: 0.5px;
+            color: var(--dark-grey);
+        }
+
+        select {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            text-indent: 1px;
+            text-overflow: '';
+        }
+
+        img {
+            position: relative;
+            transform: translateX(-4rem);
+        }
+    }
+}
+
+
+.plan-list-container {
+    text-align: center;
+
+    h5 {
+        font-size: 1.8rem;
+        color: var(--dark-grey);
+        filter: brightness(80%);
+        font-weight: 300;
+        line-height: 1.4;
+        letter-spacing: 0.5px;
+        margin: 4rem auto;
+        width: 50%;
+    }
+
+    .plan-list {
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        list-style: none;
+
+        li {
+            border: 1px solid var(--border-grey);
+            border-radius: 2rem;
+            padding: 3rem 6rem;
+            margin: 0 2rem;
+            transition: box-shadow 0.3s, transform 0.3s;
+
+            &:hover {
+                box-shadow: 0px 0px 20px -10px var(--dark-grey);
+                transform: scale(1.01);
+            }
+        }
+
+        h4 {
+            font-size: 2rem;
+            font-weight: 400;
+            color: var(--dark-grey);
+            filter: brightness(80%);
+        }
+
+        h2 {
+            font-size: 4rem;
+            font-weight: 500;
+            color: var(--dark-grey);
+            filter: brightness(80%);
+            text-align: center;
+            margin: 4rem 0;
+
+            span {
+                font-size: 1.4rem;
+                display: block;
+                font-weight: 300;
+            }
+        }
+
+        button {
+            border: none;
+            background-color: var(--highlight);
+            padding: 0 6rem;
+            color: white;
+            font-size: 1.6rem;
+            letter-spacing: 0.5px;
+            border-radius: 4rem;
+            height: 5rem;
+            vertical-align: middle;
+            margin-top: 4rem;
+            cursor: pointer;
+        }
+    }
+
+    .confirmation-box {
+        h6 {
+            font-size: 1.8rem;
+            color: var(--dark-grey);
+            filter: brightness(80%);
+            font-weight: 500;
+            margin: 4rem 0 2rem;
+        }
+        
+        .description {
+            width: 40%;
+            margin: 0 auto 2rem;
+            font-size: 1.2rem;
+            color: var(--dark-grey);
+            opacity: 0.6;
+            letter-spacing: 0.5px;
+            line-height: 1.4;
+            font-weight: 300;
+            text-align: center;
+        }
+    }
 }

src/app/register-business/register-business.component.ts

@@ -6,13 +6,75 @@ import { Component, OnInit } from '@angular/core';
     styleUrls: ['./register-business.component.scss']
 })
 export class RegisterBusinessComponent implements OnInit {
-    formState: 'CHECK_NAME' | 'INIT_REGISTER' | 'CONFIRM_INIT' | undefined = 'CONFIRM_INIT';
+    formState: 'CHECK_NAME' | 'INIT_REGISTER' | 'CONFIRM_INIT' | 'REGISTER_FORM' | 'SELECT_PLAN' | undefined = 'CHECK_NAME';
     nameToCheck: string = 'JK Enterprises';
     error: {
         message: string,
         isError: boolean,
     } | undefined;
 
+    plans: Array<{
+        name: string,
+        amount: number,
+        range: string,
+    }> = [{
+        name: 'Basic',
+        amount: 2000,
+        range: 'One Year'
+    }, {
+        name: 'Popular',
+        amount: 5000,
+        range: 'Three Years'
+    }, {
+        name: 'Premium',
+        amount: 9000,
+        range: 'Five Years'
+    }];
+
+    selectedPlan: {
+        name: string,
+        amount: number,
+        range: string,
+    } | undefined;
+
+    registerForm: Array<{
+        name: string,
+        type: 'date' | 'select' | 'text' | 'email' | 'number',
+        placeholder?: string,
+        options?: Array<string>
+    }> = [{
+        name: 'Date of Incorporation',
+        type: 'date'
+    }, {
+        name: 'Company Status',
+        type: 'select',
+        options: ['Status 1', 'Status 2']
+    }, {
+        name: 'Company Category',
+        type: 'select',
+        options: ['Category 1', 'Category 2']
+    }, {
+        name: 'Company Sub-Category',
+        type: 'select',
+        options: ['Sub-Category 1', 'Sub-Category 2']
+    }, {
+        name: 'Company Class',
+        type: 'select',
+        options: ['Class 1', 'Class 2']
+    }, {
+        name: 'Registrar Office City',
+        type: 'select',
+        options: ['Class 1', 'Class 2']
+    }, {
+        name: 'Registered Office',
+        type: 'select',
+        options: ['Office 1', 'Office 2']
+    }, {
+        name: 'Capita Investment',
+        type: 'number',
+        placeholder: 'Enter here in Rupees'
+    }];
+
     constructor() { }
 
     ngOnInit(): void {