sign-up

src/app/authentication/auth-sign-up/auth-sign-up.component.html

@@ -1 +1,2 @@
+<!-- <app-type-header></app-type-header> -->
 <router-outlet></router-outlet>

src/app/authentication/auth-sign-up/auth-sign-up.component.scss

@@ -0,0 +1,153 @@
+@mixin signUp-theme() {
+  app-auth-sign-up {
+    header {
+      width: 100%;
+      padding: 4rem 0;
+      padding-bottom: 0;
+      main {
+        text-align: center;
+        h1 {
+          color: $main-color;
+        }
+        p {
+          color: $main-color;
+          font-size: 14px;
+          margin-top: 5px;
+        }
+      }
+      .form-type {
+        width: 542px;
+        padding: 10px 20px;
+        background: #2f2c8326 0% 0% no-repeat padding-box;
+        border-radius: 10px;
+        margin: 2rem auto;
+        @media (max-width: 767px) {
+          width: 100%;
+        }
+        p {
+          span {
+            color: $main-color;
+            font-size: 15px;
+          }
+          button {
+            background-color: transparent;
+            border: none;
+            color: #009fe3;
+            text-decoration: underline;
+            cursor: pointer;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+
+    section {
+      .form-container {
+        padding: 0 10rem;
+        padding-bottom: 3rem;
+        @media (max-width: 767px) {
+          padding: 0 1rem;
+          width: 100%;
+        }
+        form {
+          background-color: #2f2c8326;
+          padding: 20px;
+          border-radius: 10px;
+          p {
+            color: $black-color;
+            font-size: 15px;
+            margin-bottom: 20px;
+          }
+
+          .form-input {
+            width: 100%;
+            label {
+              margin-bottom: 5px;
+              font-size: 13px;
+              span {
+                margin: 0 5px;
+              }
+            }
+            input,
+            select {
+              padding: 15px 20px;
+              border-radius: 10px;
+              box-shadow: 0px 5px 6px #2f2c8324;
+              border: 0.5px solid $main-color;
+              border-radius: 10px;
+              outline: none;
+            }
+          }
+
+          .formats-acceptance {
+            width: 60%;
+            background: $white-color;
+            box-shadow: 0px 5px 6px #2f2c8324;
+            border: 1px solid red;
+            border-radius: 10px;
+            margin: 0 auto;
+            padding: 10px 0;
+            @media (max-width: 767px) {
+              width: 90%;
+            }
+            p {
+              font-size: 15px;
+              margin: 0;
+            }
+          }
+
+          .files {
+            padding: 30px 0;
+            gap: 21px;
+            div {
+              width: 232px;
+              padding: 10px 0;
+              background: $white-color;
+              box-shadow: 0px 5px 6px #2f2c8324;
+              border: 1px solid $main-color;
+              border-radius: 10px;
+              p {
+                text-align: center;
+                margin: 0;
+                border-bottom: 1px solid $main-color;
+                padding-bottom: 10px;
+                color: $main-color;
+                font-size: 13px;
+              }
+            }
+          }
+
+          .payment {
+            .add-payment {
+              background-color: $open-light-blue;
+              color: $main-color;
+              border: 1px solid $open-light-blue;
+              padding: 13px 20px;
+              border-radius: 10px;
+              box-shadow: 0px 5px 6px #2f2c8324;
+              transition: all 0.5s;
+              &:hover {
+                background-color: $light-blue;
+                color: $white-color;
+              }
+            }
+          }
+
+          button[type="submit"] {
+            background-color: $light-blue;
+            color: $white-color;
+            padding: 10px 80px;
+            border-radius: 10px;
+            border: 1px solid $light-blue;
+            cursor: pointer;
+            transition: all 0.5s;
+            &:hover {
+              background-color: $main-blue;
+              border: 1px solid $main-blue;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/app/authentication/auth-sign-up/auth-sign-up.module.ts

@@ -8,6 +8,7 @@ import { SignupBusinessComponent } from './signup-business/signup-business.compo
 import { SignupContractorComponent } from './signup-contractor/signup-contractor.component';
 import { SignupEmployeeComponent } from './signup-employee/signup-employee.component';
 import { SharedModule } from '@shared/shared.module';
+import { TypeHeaderComponent } from './type-header/type-header.component';
 
 @NgModule({
   declarations: [
@@ -16,6 +17,7 @@ import { SharedModule } from '@shared/shared.module';
     SignupBusinessComponent,
     SignupContractorComponent,
     SignupEmployeeComponent,
+    TypeHeaderComponent,
   ],
   imports: [CommonModule, AuthSignUpRoutingModule, SharedModule],
 })

src/app/authentication/auth-sign-up/signup-business/signup-business.component.html

@@ -1 +1,263 @@
-<p>signup-business works!</p>
+<section>
+  <app-type-header> </app-type-header>
+  <div class="form-container">
+    <form>
+      <p class="bold">Basic Information</p>
+      <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="center start">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="company_name">
+            <img src="../../../../assets/images/company.svg" alt="" title="" />
+            <span>Company Name <span class="red">*</span></span>
+          </label>
+          <input type="text" id="company_name" placeholder="Company Name" />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="commercial_no">
+            <img
+              src="../../../../assets/images/commercial.svg"
+              alt=""
+              title=""
+            />
+            <span>Commercial Registration No <span class="red">*</span></span>
+          </label>
+          <input
+            type="text"
+            id="commercial_no"
+            placeholder="Commercial Registration No"
+          />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="tax_no">
+            <img src="../../../../assets/images/tax.svg" alt="" title="" />
+            <span>tax declaration No <span class="red">*</span></span>
+          </label>
+          <input type="text" id="tax_no" placeholder="tax declaration No" />
+        </div>
+      </div>
+      <div class="gap-36 mt-2" fxLayout="row wrap" fxLayoutAlign="center start">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="country">
+            <img src="../../../../assets/images/country.svg" alt="" title="" />
+            <span>Country <span class="red">*</span></span>
+          </label>
+          <select id="country">
+            <!-- <option disabled selected>Select your country</option> -->
+          </select>
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="city">
+            <img src="../../../../assets/images/city.svg" alt="" title="" />
+            <span>City<span class="red">*</span></span>
+          </label>
+          <input type="text" id="city" placeholder="Enter your city" />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="postal">
+            <img src="../../../../assets/images/postal.svg" alt="" title="" />
+            <span>Postal Code <span class="red">*</span></span>
+          </label>
+          <input type="text" id="postal" placeholder="Postal code" />
+        </div>
+      </div>
+
+      <div class="mt-2">
+        <div class="form-input" fxLayout="column" fxLayoutAlign="start stretch">
+          <label for="city">
+            <img
+              src="../../../../assets/images/country-direction-location-map-navigation-pin-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>National Address<span class="red">*</span></span>
+          </label>
+          <input
+            type="text"
+            id="national_address"
+            placeholder="National address"
+          />
+        </div>
+      </div>
+
+      <p class="bold mt-3">authorized</p>
+      <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="start start">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="authorized">
+            <img
+              src="../../../../assets/images/authorized_name.svg"
+              alt=""
+              title=""
+            />
+            <span>Authorized Name <span class="red">*</span></span>
+          </label>
+          <input type="text" id="authorized" placeholder="Authorized Name" />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="authorized_id">
+            <img
+              src="../../../../assets/images/authorized_name.svg"
+              alt=""
+              title=""
+            />
+            <span>Authorized ID <span class="red">*</span></span>
+          </label>
+          <input type="text" id="authorized_id" placeholder="Authorized id" />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="passport_no">
+            <img
+              src="../../../../assets/images/passport-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Passport Number <span class="red">*</span></span>
+          </label>
+          <input type="text" id="passport_no" placeholder="Passport Number" />
+        </div>
+      </div>
+      <div class="gap-36 mt-2" fxLayout="row wrap" fxLayoutAlign="start start">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="mobile_number">
+            <img
+              src="../../../../assets/images/mobile-horizontal-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Mobile Number <span class="red">*</span></span>
+          </label>
+          <input type="text" id="mobile_number" placeholder="Mobile Number" />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="email">
+            <img
+              src="../../../../assets/images/email-9-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Email <span class="red">*</span></span>
+          </label>
+          <input type="text" id="email" placeholder="Email" />
+        </div>
+      </div>
+
+      <p class="bold mt-3">Attachments</p>
+      <app-warning
+        [message]="
+          'Mandatory to Attach your CV, Passport, Education Certification, Experience Certifications, and Professional Certificates'
+        "
+      ></app-warning>
+      <div
+        class="formats-acceptance"
+        fxLayout="column"
+        fxLayoutAlign="center center"
+      >
+        <p>
+          Supported formats: JPEG,PNG,WORD,PDF / size shouldn't be more than 4
+          MP
+        </p>
+      </div>
+
+      <div
+        class="files gap-20"
+        fxLayout="row wrap"
+        fxLayoutAlign="start center"
+      >
+        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
+          <p class="bold">Commercial Registration</p>
+          <app-file-upload />
+        </div>
+        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
+          <p class="bold">Tax Declaration</p>
+          <app-file-upload />
+        </div>
+        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
+          <p class="bold">Passport</p>
+          <app-file-upload />
+        </div>
+        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
+          <p class="bold">Experience Certification</p>
+          <app-file-upload />
+        </div>
+        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
+          <p class="bold">ID</p>
+          <app-file-upload />
+        </div>
+      </div>
+
+      <p class="bold mt-3">Payment</p>
+      <div class="payment">
+        <app-warning
+          [message]="'Mandatory to pay 500$ to complete your registration'"
+        ></app-warning>
+        <button type="button" class="add-payment bold ptr">
+          + Add new card
+        </button>
+      </div>
+    </form>
+  </div>
+</section>

src/app/authentication/auth-sign-up/signup-business/signup-business.component.scss

@@ -0,0 +1,5 @@
+.custom-width {
+  width: 98%;
+  margin-right: auto;
+  margin-left: auto;
+}

src/app/authentication/auth-sign-up/signup-contractor/signup-contractor.component.html

@@ -1 +1,339 @@
-<p>signup-contractor works!</p>
+<section>
+  <app-type-header> </app-type-header>
+  <div class="form-container">
+    <form>
+      <p class="bold">Basic Information</p>
+      <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="center start">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="first_name">
+            <img src="assets/images/authorized_name.svg" alt="" title="" />
+            <span>First Name <span class="red">*</span></span>
+          </label>
+          <input type="text" id="first_name" placeholder="Enter your Name" />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="birth_date">
+            <img
+              src="assets/images/birthday-cake-candle-pie-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Birth Date<span class="red">*</span></span>
+          </label>
+          <input type="text" id="birth_date" placeholder="Select Date" />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="tax_no">
+            <img src="assets/images/id-card-svgrepo-com.svg" alt="" title="" />
+            <span>ID Number <span class="red">*</span></span>
+          </label>
+          <input type="text" id="tax_no" placeholder="ID Number" />
+        </div>
+      </div>
+      <div class="gap-36 mt-2" fxLayout="row wrap" fxLayoutAlign="center start">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="country">
+            <img src="assets/images/authorized_name.svg" alt="" title="" />
+            <span>Last Name <span class="red">*</span></span>
+          </label>
+          <input
+            type="text"
+            placeholder="Enter your last name"
+            id="last_name"
+          />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="email">
+            <img src="assets/images/email-9-svgrepo-com" alt="" title="" />
+            <span>Email<span class="red">*</span></span>
+          </label>
+          <input type="email" id="email" placeholder="Enter your email" />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="passprt">
+            <img
+              src="../../../../assets/images/passport-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Passport Number <span class="red">*</span></span>
+          </label>
+          <input type="text" id="postal" placeholder="Passport Number" />
+        </div>
+      </div>
+
+      <div class="gap-36 mt-2" fxLayout="row wrap" fxLayoutAlign="center start">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="favourite_name">
+            <img src="assets/images/authorized_name.svg" alt="" title="" />
+            <span>Favorite Name <span class="red">*</span></span>
+          </label>
+          <input
+            type="text"
+            placeholder="Enter your Favorite Name"
+            id="favourite_name"
+          />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="mobile_number">
+            <img
+              src="assets/images/mobile-horizontal-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Mobile Number <span class="red">*</span></span>
+          </label>
+          <input type="text" id="mobile_number" placeholder="Mobile Number" />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="tax_decoration">
+            <img
+              src="../../../../assets/images/tax-fee-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Tax Decoration <span class="red">*</span></span>
+          </label>
+          <div fxLayout="row wrap" fxLayoutAlign="start center" class="gap-10">
+            <input
+              type="text"
+              id="tax_decoration_number"
+              placeholder="number"
+              class="decoration"
+            />
+            <input
+              type="text"
+              id="tax_decoration_value"
+              placeholder="value"
+              class="decoration"
+            />
+            <input type="text" class="calc" placeholder="0.0" />
+          </div>
+        </div>
+      </div>
+
+      <p class="bold mt-3">Education & Qualifications</p>
+      <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="start start">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="qualification">
+            <img
+              src="../../../../assets/images/speaker-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Qualification <span class="red">*</span></span>
+          </label>
+          <select id="qualification">
+            <!-- <option disabled selected>Select your country</option> -->
+          </select>
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="university">
+            <img
+              src="assets/images/academic-cap-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>University <span class="red">*</span></span>
+          </label>
+          <input
+            type="text"
+            id="university"
+            placeholder="Enter your university name"
+          />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="job_title">
+            <img src="assets/images/work-svgrepo-com.svg" alt="" title="" />
+            <span>Job Title <span class="red">*</span></span>
+          </label>
+          <input type="text" id="job_title" placeholder="Job Title" />
+        </div>
+      </div>
+
+      <p class="bold mt-3">Address</p>
+      <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="start start">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="country">
+            <img src="../../../../assets/images/country.svg" alt="" title="" />
+            <span>Country <span class="red">*</span></span>
+          </label>
+          <select id="country">
+            <!-- <option disabled selected>Select your country</option> -->
+          </select>
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="city">
+            <img src="../../../../assets/images/city.svg" alt="" title="" />
+            <span>City<span class="red">*</span></span>
+          </label>
+          <input type="text" id="city" placeholder="Enter your city" />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="postal">
+            <img src="../../../../assets/images/postal.svg" alt="" title="" />
+            <span>Postal Code <span class="red">*</span></span>
+          </label>
+          <input type="text" id="postal" placeholder="Postal code" />
+        </div>
+      </div>
+      <div class="mt-2">
+        <div class="form-input" fxLayout="column" fxLayoutAlign="start stretch">
+          <label for="address">
+            <img
+              src="../../../../assets/images/country-direction-location-map-navigation-pin-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Address<span class="red">*</span></span>
+          </label>
+          <input type="text" id="address" placeholder="Address" />
+        </div>
+      </div>
+
+      <p class="bold mt-3">Attachments</p>
+      <app-warning
+        [message]="
+          'Mandatory to Attach your CV, Passport, Education Certification, Experience Certifications, and Professional Certificates'
+        "
+      ></app-warning>
+      <div
+        class="formats-acceptance"
+        fxLayout="column"
+        fxLayoutAlign="center center"
+      >
+        <p>
+          Supported formats: JPEG,PNG,WORD,PDF / size shouldn't be more than 4
+          MP
+        </p>
+      </div>
+
+      <div
+        class="files gap-20"
+        fxLayout="row wrap"
+        fxLayoutAlign="start center"
+      >
+        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
+          <p class="bold">CV</p>
+          <app-file-upload />
+        </div>
+        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
+          <p class="bold">Passport</p>
+          <app-file-upload />
+        </div>
+        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
+          <p class="bold">Educational Certification</p>
+          <app-file-upload />
+        </div>
+        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
+          <p class="bold">Experience Certification</p>
+          <app-file-upload />
+        </div>
+        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
+          <p class="bold">Professional Certification</p>
+          <app-file-upload />
+        </div>
+      </div>
+
+      <div fxLayout="column" fxLayoutAlign="center center">
+        <mat-checkbox class="example-margin"
+          ><span class="checkbox">
+            By signing up you agree to
+            <span><a>the terms and conditions for use.</a></span>
+          </span></mat-checkbox
+        >
+        <button type="submit" [routerLink]="['/']">Sign Up</button>
+      </div>
+    </form>
+  </div>
+</section>

src/app/authentication/auth-sign-up/signup-contractor/signup-contractor.component.scss

@@ -0,0 +1,18 @@
+.decoration {
+  width: 20%;
+}
+
+.calc {
+  width: 15%;
+  background-color: #28abe3;
+  color: #fff;
+  border: none;
+}
+
+.checkbox {
+  color: #252525;
+  a {
+    text-decoration: none;
+    color: #28abe3;
+  }
+}

src/app/authentication/auth-sign-up/signup-employee/signup-employee.component.html

@@ -1 +1,339 @@
-<p>signup-employee works!</p>
+<section>
+  <app-type-header> </app-type-header>
+  <div class="form-container">
+    <form>
+      <p class="bold">Basic Information</p>
+      <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="center start">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="first_name">
+            <img src="assets/images/authorized_name.svg" alt="" title="" />
+            <span>First Name <span class="red">*</span></span>
+          </label>
+          <input type="text" id="first_name" placeholder="Enter your Name" />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="birth_date">
+            <img
+              src="assets/images/birthday-cake-candle-pie-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Birth Date<span class="red">*</span></span>
+          </label>
+          <input type="text" id="birth_date" placeholder="Select Date" />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="tax_no">
+            <img src="assets/images/id-card-svgrepo-com.svg" alt="" title="" />
+            <span>ID Number <span class="red">*</span></span>
+          </label>
+          <input type="text" id="tax_no" placeholder="ID Number" />
+        </div>
+      </div>
+      <div class="gap-36 mt-2" fxLayout="row wrap" fxLayoutAlign="center start">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="country">
+            <img src="assets/images/authorized_name.svg" alt="" title="" />
+            <span>Last Name <span class="red">*</span></span>
+          </label>
+          <input
+            type="text"
+            placeholder="Enter your last name"
+            id="last_name"
+          />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="email">
+            <img src="assets/images/email-9-svgrepo-com" alt="" title="" />
+            <span>Email<span class="red">*</span></span>
+          </label>
+          <input type="email" id="email" placeholder="Enter your email" />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="passprt">
+            <img
+              src="../../../../assets/images/passport-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Passport Number <span class="red">*</span></span>
+          </label>
+          <input type="text" id="postal" placeholder="Passport Number" />
+        </div>
+      </div>
+
+      <div class="gap-36 mt-2" fxLayout="row wrap" fxLayoutAlign="center start">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="favourite_name">
+            <img src="assets/images/authorized_name.svg" alt="" title="" />
+            <span>Favorite Name <span class="red">*</span></span>
+          </label>
+          <input
+            type="text"
+            placeholder="Enter your Favorite Name"
+            id="favourite_name"
+          />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="mobile_number">
+            <img
+              src="assets/images/mobile-horizontal-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Mobile Number <span class="red">*</span></span>
+          </label>
+          <input type="text" id="mobile_number" placeholder="Mobile Number" />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="tax_decoration">
+            <img
+              src="../../../../assets/images/tax-fee-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Tax Decoration <span class="red">*</span></span>
+          </label>
+          <div fxLayout="row wrap" fxLayoutAlign="start center" class="gap-10">
+            <input
+              type="text"
+              id="tax_decoration_number"
+              placeholder="number"
+              class="decoration"
+            />
+            <input
+              type="text"
+              id="tax_decoration_value"
+              placeholder="value"
+              class="decoration"
+            />
+            <input type="text" class="calc" placeholder="0.0" />
+          </div>
+        </div>
+      </div>
+
+      <p class="bold mt-3">Education & Qualifications</p>
+      <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="start start">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="qualification">
+            <img
+              src="../../../../assets/images/speaker-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Qualification <span class="red">*</span></span>
+          </label>
+          <select id="qualification">
+            <!-- <option disabled selected>Select your country</option> -->
+          </select>
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="university">
+            <img
+              src="assets/images/academic-cap-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>University <span class="red">*</span></span>
+          </label>
+          <input
+            type="text"
+            id="university"
+            placeholder="Enter your university name"
+          />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="job_title">
+            <img src="assets/images/work-svgrepo-com.svg" alt="" title="" />
+            <span>Job Title <span class="red">*</span></span>
+          </label>
+          <input type="text" id="job_title" placeholder="Job Title" />
+        </div>
+      </div>
+
+      <p class="bold mt-3">Address</p>
+      <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="start start">
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="country">
+            <img src="../../../../assets/images/country.svg" alt="" title="" />
+            <span>Country <span class="red">*</span></span>
+          </label>
+          <select id="country">
+            <!-- <option disabled selected>Select your country</option> -->
+          </select>
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="city">
+            <img src="../../../../assets/images/city.svg" alt="" title="" />
+            <span>City<span class="red">*</span></span>
+          </label>
+          <input type="text" id="city" placeholder="Enter your city" />
+        </div>
+        <div
+          class="form-input"
+          fxLayout="column"
+          fxLayoutAlign="start stretch"
+          fxFlex.lt-md="45"
+          fxFlex.gt-sm="31"
+        >
+          <label for="postal">
+            <img src="../../../../assets/images/postal.svg" alt="" title="" />
+            <span>Postal Code <span class="red">*</span></span>
+          </label>
+          <input type="text" id="postal" placeholder="Postal code" />
+        </div>
+      </div>
+      <div class="mt-2">
+        <div class="form-input" fxLayout="column" fxLayoutAlign="start stretch">
+          <label for="address">
+            <img
+              src="../../../../assets/images/country-direction-location-map-navigation-pin-svgrepo-com.svg"
+              alt=""
+              title=""
+            />
+            <span>Address<span class="red">*</span></span>
+          </label>
+          <input type="text" id="address" placeholder="Address" />
+        </div>
+      </div>
+
+      <p class="bold mt-3">Attachments</p>
+      <app-warning
+        [message]="
+          'Mandatory to Attach your CV, Passport, Education Certification, Experience Certifications, and Professional Certificates'
+        "
+      ></app-warning>
+      <div
+        class="formats-acceptance"
+        fxLayout="column"
+        fxLayoutAlign="center center"
+      >
+        <p>
+          Supported formats: JPEG,PNG,WORD,PDF / size shouldn't be more than 4
+          MP
+        </p>
+      </div>
+
+      <div
+        class="files gap-20"
+        fxLayout="row wrap"
+        fxLayoutAlign="start center"
+      >
+        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
+          <p class="bold">CV</p>
+          <app-file-upload />
+        </div>
+        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
+          <p class="bold">Passport</p>
+          <app-file-upload />
+        </div>
+        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
+          <p class="bold">Educational Certification</p>
+          <app-file-upload />
+        </div>
+        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
+          <p class="bold">Experience Certification</p>
+          <app-file-upload />
+        </div>
+        <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
+          <p class="bold">Professional Certification</p>
+          <app-file-upload />
+        </div>
+      </div>
+
+      <div fxLayout="column" fxLayoutAlign="center center">
+        <mat-checkbox class="example-margin"
+          ><span class="checkbox">
+            By signing up you agree to
+            <span><a>the terms and conditions for use.</a></span>
+          </span></mat-checkbox
+        >
+        <button type="submit" [routerLink]="['/']">Sign Up</button>
+      </div>
+    </form>
+  </div>
+</section>

src/app/authentication/auth-sign-up/signup-employee/signup-employee.component.scss

@@ -0,0 +1,18 @@
+.decoration {
+  width: 20%;
+}
+
+.calc {
+  width: 15%;
+  background-color: #28abe3;
+  color: #fff;
+  border: none;
+}
+
+.checkbox {
+  color: #252525;
+  a {
+    text-decoration: none;
+    color: #28abe3;
+  }
+}

src/app/authentication/auth-sign-up/signup-type/signup-type.component.html

@@ -7,22 +7,25 @@
       <h1>Nice to meet you !</h1>
       <p>Choose your category to have the best help</p>
       <div class="types" fxLayout="wrap row" fxLayoutAlign="center center">
-        <div>
+        <div (click)="onClickType(0)" [ngClass]="{ active: active === 0 }">
           <img
             src="../../../../assets/images/business_img.svg"
             alt=""
             title=""
           />
+          <p class="m-0 bold">Business</p>
         </div>
-        <div>
+        <div (click)="onClickType(1)" [ngClass]="{ active: active === 1 }">
           <img src="../../../../assets/images/contractor.jpg" alt="" title="" />
+          <p class="m-0 bold">Contractor</p>
         </div>
-        <div>
+        <div (click)="onClickType(2)" [ngClass]="{ active: active === 2 }">
           <img src="../../../../assets/images/employee.jpg" alt="" title="" />
+          <p class="m-0 bold">Employee</p>
         </div>
       </div>
       <div class="actions">
-        <button type="submit">Next</button>
+        <button type="submit" (click)="openType()">Next</button>
         <p>Already have an account?<a [routerLink]="['/auth']">Sign in </a></p>
       </div>
     </form>

src/app/authentication/auth-sign-up/signup-type/signup-type.component.scss

@@ -1,20 +1,21 @@
 .auth-type {
   width: 100%;
-  height: 100%;
+  height: 100vh;
+  padding: 40px 0;
   background: url("../../../../assets/images/auth-back.jpg") no-repeat center
     center;
   background-size: cover;
   position: relative;
 
   .overlay {
+    position: absolute;
     width: 100%;
     height: 100%;
-    background: rgba($color: #2e368f, $alpha: 0.2);
-    position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
+    background: rgba($color: #2e368f, $alpha: 0.2);
 
     header {
       padding: 3rem 4rem;
@@ -85,4 +86,8 @@
       }
     }
   }
+
+  .active {
+    border: 3px solid #28abe3;
+  }
 }

src/app/authentication/auth-sign-up/signup-type/signup-type.component.ts

@@ -1,10 +1,36 @@
 import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-signup-type',
   templateUrl: './signup-type.component.html',
-  styleUrls: ['./signup-type.component.scss']
+  styleUrls: ['./signup-type.component.scss'],
 })
 export class SignupTypeComponent {
+  active: number = -1;
+  typeRoutingMap: { [key: number]: string } = {
+    0: 'business',
+    1: 'contractor',
+    2: 'employee',
+  };
+  constructor(
+    private readonly router: Router,
+    private readonly route: ActivatedRoute
+  ) {}
 
+  onClickType(type: number): void {
+    console.log(type);
+    this.active = type;
+  }
+
+  openType(): void {
+    if (this.active !== -1) {
+      this.router.navigate([`./${this.typeRoutingMap[this.active]}`], {
+        queryParams: { type: this.active },
+        relativeTo: this.route,
+      });
+    } else {
+      alert('Please Select the Type !');
+    }
+  }
 }

src/app/authentication/auth-sign-up/type-header/type-header.component.html

@@ -0,0 +1,14 @@
+<header fxLayout="column" fxLayoutAlign="start stretch">
+  <main>
+    <h1 class="bold">Nice to meet you !</h1>
+    <p>Let's sign up to have a great experience</p>
+  </main>
+  <div class="form-type">
+    <p fxLayout="row" fxLayoutAlign="space-between center">
+      <span class="bold">{{ typeName }} Form</span>
+      <button>
+        <a [routerLink]="['/auth/signUp']">Change</a>
+      </button>
+    </p>
+  </div>
+</header>

src/app/authentication/auth-sign-up/type-header/type-header.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TypeHeaderComponent } from './type-header.component';
+
+describe('TypeHeaderComponent', () => {
+  let component: TypeHeaderComponent;
+  let fixture: ComponentFixture<TypeHeaderComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TypeHeaderComponent]
+    });
+    fixture = TestBed.createComponent(TypeHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/authentication/auth-sign-up/type-header/type-header.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-type-header',
+  templateUrl: './type-header.component.html',
+  styleUrls: ['./type-header.component.scss'],
+})
+export class TypeHeaderComponent implements OnInit {
+  constructor(private readonly route: ActivatedRoute) {}
+
+  typeName!: string;
+
+  ngOnInit(): void {
+    this.route.queryParams.pipe().subscribe((res) => {
+      console.log(res);
+      if (+res['type'] === 0) {
+        this.typeName = 'Business';
+      } else if (+res['type'] === 1) {
+        this.typeName = 'Contractor';
+      } else {
+        this.typeName = 'Employee';
+      }
+    });
+  }
+}

src/app/shared/components/file-upload/file-upload.component.html

@@ -0,0 +1,14 @@
+<label
+  for="file-upload"
+  class="custom-file-upload gap-10"
+  fxLayout="row"
+  fxLayoutAlign="center center"
+>
+  <img
+    src="../../../../assets/images/upload-svgrepo-com (1).svg"
+    alt=""
+    title=""
+  />
+  <span> Upload File </span>
+</label>
+<input id="file-upload" type="file" />

src/app/shared/components/file-upload/file-upload.component.scss

@@ -0,0 +1,10 @@
+input[type="file"] {
+  display: none;
+}
+
+.custom-file-upload {
+  display: inline-block;
+  padding: 6px 12px;
+  cursor: pointer;
+  padding: 10px 0;
+}

src/app/shared/components/file-upload/file-upload.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileUploadComponent } from './file-upload.component';
+
+describe('FileUploadComponent', () => {
+  let component: FileUploadComponent;
+  let fixture: ComponentFixture<FileUploadComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FileUploadComponent]
+    });
+    fixture = TestBed.createComponent(FileUploadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/file-upload/file-upload.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-file-upload',
+  templateUrl: './file-upload.component.html',
+  styleUrls: ['./file-upload.component.scss']
+})
+export class FileUploadComponent {
+
+}

src/app/shared/components/warning/warning.component.html

@@ -0,0 +1,6 @@
+<div class="warning">
+  <p class="gap-10" fxLayout="row" fxLayoutAlign="center center">
+    <img src="/assets/images/warning.svg" alt="" title="" />
+    <span class="bold">{{ message }}</span>
+  </p>
+</div>

src/app/shared/components/warning/warning.component.scss

@@ -0,0 +1,21 @@
+@mixin warning-theme() {
+  app-warning {
+    .warning {
+      background-color: $warning-color;
+      border-radius: 10px;
+      width: 90%;
+      margin: 0 auto;
+      p {
+        margin: 0;
+        padding: 0;
+        img {
+          padding: 10px 0;
+        }
+        span {
+          color: $black-color;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}

src/app/shared/components/warning/warning.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WarningComponent } from './warning.component';
+
+describe('WarningComponent', () => {
+  let component: WarningComponent;
+  let fixture: ComponentFixture<WarningComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [WarningComponent]
+    });
+    fixture = TestBed.createComponent(WarningComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/warning/warning.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-warning',
+  templateUrl: './warning.component.html',
+  styleUrls: ['./warning.component.scss'],
+})
+export class WarningComponent {
+  @Input() message: string = '';
+}

src/app/shared/shared.module.ts

@@ -8,6 +8,9 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { NgxOtpInputModule } from 'ngx-otp-input';
+import { WarningComponent } from './components/warning/warning.component';
+import { FileUploadComponent } from './components/file-upload/file-upload.component';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 
 const MATERIAL_MODULES = [
   FlexLayoutModule,
@@ -16,12 +19,24 @@ const MATERIAL_MODULES = [
   MatIconModule,
   MatInputModule,
   NgxOtpInputModule,
+  MatCheckboxModule,
   // ErrorStateMatcher,
 ];
+
+const COMPONENTS = [WarningComponent, FileUploadComponent];
 @NgModule({
-  declarations: [],
-  imports: [FormsModule, ReactiveFormsModule, CommonModule],
-  ...MATERIAL_MODULES,
-  exports: [FormsModule, ReactiveFormsModule, ...MATERIAL_MODULES],
+  declarations: [WarningComponent, ...COMPONENTS, FileUploadComponent],
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    CommonModule,
+    ...MATERIAL_MODULES,
+  ],
+  exports: [
+    FormsModule,
+    ReactiveFormsModule,
+    ...MATERIAL_MODULES,
+    ...COMPONENTS,
+  ],
 })
 export class SharedModule {}

src/assets/images/academic-cap-svgrepo-com.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.637" height="12.618" viewBox="0 0 13.637 12.618">
+  <g id="academic-cap-svgrepo-com" transform="translate(-2.933 -3.618)">
+    <path id="Path_1117" data-name="Path 1117" d="M9.381,4.211,3.586,7.43a.3.3,0,0,0,0,.522l5.794,3.219a.654.654,0,0,0,.636,0l5.951-3.306a.2.2,0,0,0,0-.349L10.016,4.211A.654.654,0,0,0,9.381,4.211Z" transform="translate(0)" fill="none" stroke="#040000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+    <path id="Path_1118" data-name="Path 1118" d="M5.4,10.5,5.13,14a1.512,1.512,0,0,0,1.118,1.562c.456.126.957.275,1.345.42a9.987,9.987,0,0,1,1.669.866,1.69,1.69,0,0,0,1.781,0,9.99,9.99,0,0,1,1.669-.866c.389-.145.89-.294,1.345-.42A1.512,1.512,0,0,0,15.177,14l-.27-3.5" transform="translate(-0.455 -1.711)" fill="none" stroke="#040000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+    <path id="Path_1119" data-name="Path 1119" d="M10.56,10.5,8.737,11.542A1.463,1.463,0,0,0,8,12.812v4.636" transform="translate(-1.227 -1.711)" fill="none" stroke="#040000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+  </g>
+</svg>

src/assets/images/authorized_name.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11.709" height="11.961" viewBox="0 0 11.709 11.961">
+  <path id="user-svgrepo-com" d="M6.926,7.221A3.235,3.235,0,1,0,3.69,3.985h0A3.239,3.239,0,0,0,6.925,7.221Zm0-5.49A2.255,2.255,0,1,1,4.671,3.985h0A2.258,2.258,0,0,1,6.926,1.73Zm5.843,10.386a5.983,5.983,0,0,0-11.679-.04l-.007.04a.483.483,0,0,0-.011.1.49.49,0,0,0,.969.107v0a5,5,0,0,1,9.764-.034l.006.033a.49.49,0,0,0,.478.386h0A.492.492,0,0,0,12.4,12.7h0a.489.489,0,0,0,.374-.586v0Z" transform="translate(-1.071 -0.75)" fill="#040000"/>
+</svg>

src/assets/images/birthday-cake-candle-pie-svgrepo-com.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9.551" height="10.082" viewBox="0 0 9.551 10.082">
+  <g id="birthday-cake-candle-pie-svgrepo-com" transform="translate(-3 -2)">
+    <path id="Path_1096" data-name="Path 1096" d="M11.959,20.061H4.531a.531.531,0,0,1,0-1.061h7.429a.531.531,0,0,1,0,1.061Z" transform="translate(-0.469 -7.979)" fill="#040000"/>
+    <path id="Path_1097" data-name="Path 1097" d="M11.959,16.061H4.531a.531.531,0,1,1,0-1.061h7.429a.531.531,0,0,1,0,1.061Z" transform="translate(-0.469 -6.102)" fill="#040000"/>
+    <path id="Path_1098" data-name="Path 1098" d="M11.49,10H4.061A1.061,1.061,0,0,0,3,11.061H3a1.061,1.061,0,0,0,1.061,1.061l.891-.764a.531.531,0,0,1,.69,0l.531.462a.531.531,0,0,0,.706,0l.531-.462a.531.531,0,0,1,.69,0l.531.462a.531.531,0,0,0,.706,0l.531-.462a.531.531,0,0,1,.69,0l.934.764a1.061,1.061,0,0,0,1.061-1.061h0A1.061,1.061,0,0,0,11.49,10Z" transform="translate(0 -3.755)" fill="#040000"/>
+    <rect id="Rectangle_543" data-name="Rectangle 543" width="1.546" height="1.546" transform="translate(4.683 4.722)" fill="#040000"/>
+    <rect id="Rectangle_544" data-name="Rectangle 544" height="1.546" transform="translate(7.776 4.722)" fill="#040000"/>
+    <rect id="Rectangle_545" data-name="Rectangle 545" width="1.546" height="1.546" transform="translate(9.322 4.722)" fill="#040000"/>
+    <path id="Path_1099" data-name="Path 1099" d="M7.531,5.714A.531.531,0,0,1,7,5.184V2.531a.531.531,0,0,1,1.061,0V5.184A.531.531,0,0,1,7.531,5.714Z" transform="translate(-1.877)" fill="#040000"/>
+    <path id="Path_1100" data-name="Path 1100" d="M11.531,5.714A.531.531,0,0,1,11,5.184V2.531a.531.531,0,1,1,1.061,0V5.184A.531.531,0,0,1,11.531,5.714Z" transform="translate(-3.755)" fill="#040000"/>
+    <path id="Path_1101" data-name="Path 1101" d="M15.531,5.714A.531.531,0,0,1,15,5.184V2.531a.531.531,0,0,1,1.061,0V5.184A.531.531,0,0,1,15.531,5.714Z" transform="translate(-5.632)" fill="#040000"/>
+  </g>
+</svg>

src/assets/images/city.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.742" height="12.326" viewBox="0 0 13.742 12.326">
+  <path id="music-svgrepo-com" d="M6.247,4h8.495V15.326H9.079V9.663h4.247V6.832H7.663v8.495H2V9.663H6.247Zm0,7.079H3.416v2.832H6.247Zm7.079,0H10.495v2.832h2.832Z" transform="translate(-1.5 -3.5)" fill="none" stroke="#040000" stroke-width="1"/>
+</svg>

src/assets/images/commercial.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11.975" height="11.975" viewBox="0 0 11.975 11.975">
+  <g id="tax-fee-svgrepo-com" transform="translate(-71.68 -71.68)">
+    <path id="Path_1127" data-name="Path 1127" d="M322.663,332.661a.543.543,0,1,0-.542.566A.555.555,0,0,0,322.663,332.661Zm.557,0a1.1,1.1,0,1,1-1.1-1.123A1.111,1.111,0,0,1,323.22,332.661Zm2.4,2.619a.543.543,0,1,0-.542.566A.555.555,0,0,0,325.617,335.281Zm.557,0a1.1,1.1,0,1,1-1.1-1.123A1.111,1.111,0,0,1,326.174,335.281Zm-1.3-3.067-3.282,3.38a.278.278,0,1,0,.4.388l3.282-3.38a.278.278,0,1,0-.4-.388Z" transform="translate(-245.951 -256.324)"/>
+    <path id="Path_1128" data-name="Path 1128" d="M81.984,83.1A1.114,1.114,0,0,0,83.1,81.984V73.351a1.114,1.114,0,0,0-1.114-1.114H73.351a1.114,1.114,0,0,0-1.114,1.114v8.633A1.114,1.114,0,0,0,73.351,83.1Zm0,.557H73.351a1.671,1.671,0,0,1-1.671-1.671V73.351a1.671,1.671,0,0,1,1.671-1.671h8.633a1.671,1.671,0,0,1,1.671,1.671v8.633A1.671,1.671,0,0,1,81.984,83.655Z" transform="translate(0 0)"/>
+  </g>
+</svg>

src/assets/images/mobile-horizontal-svgrepo-com.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9.592" height="14.505" viewBox="0 0 9.592 14.505">
+  <g id="mobile-horizontal-svgrepo-com" transform="translate(-4.82 15.505) rotate(-90)">
+    <rect id="Rectangle_546" data-name="Rectangle 546" width="8.592" height="13.505" rx="1.91" transform="translate(15.005 5.32) rotate(90)" fill="none" stroke="#020202" stroke-width="1"/>
+    <path id="Path_1103" data-name="Path 1103" d="M21.55,12.208V9.751a.6.6,0,0,1,.611-.611h0v3.679h0a.6.6,0,0,1-.611-.611Z" transform="translate(-7.156 -1.363)" fill="none" stroke="#020202" stroke-width="1"/>
+    <line id="Line_2" data-name="Line 2" y2="1.222" transform="translate(3.339 9.005)" fill="none" stroke="#020202" stroke-width="1"/>
+  </g>
+</svg>

src/assets/images/speaker-svgrepo-com.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9.505" height="12.357" viewBox="0 0 9.505 12.357">
+  <g id="speaker-svgrepo-com" transform="translate(-4.75 -3.25)">
+    <path id="Path_1114" data-name="Path 1114" d="M10.355,11.581a2.646,2.646,0,1,1,1.012-.2A2.646,2.646,0,0,1,10.355,11.581Zm0-4.221a1.576,1.576,0,1,0,1.114.462A1.576,1.576,0,0,0,10.355,7.36Z" transform="translate(-0.849 -0.872)"/>
+    <path id="Path_1115" data-name="Path 1115" d="M13.72,15.607H5.285a.535.535,0,0,1-.535-.535V3.785a.542.542,0,0,1,.535-.535H13.72a.535.535,0,0,1,.535.535V15.072a.528.528,0,0,1-.535.535Zm-7.9-1.07h7.365V4.32H5.82Z"/>
+    <path id="Path_1116" data-name="Path 1116" d="M12.466,16.32H8.245a.535.535,0,0,1,0-1.07h4.221a.535.535,0,0,1,0,1.07Z" transform="translate(-0.849 -3.444)"/>
+  </g>
+</svg>

src/assets/images/tax-fee-svgrepo-com.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11.975" height="11.975" viewBox="0 0 11.975 11.975">
+  <g id="tax-fee-svgrepo-com" transform="translate(-71.68 -71.68)">
+    <path id="Path_1127" data-name="Path 1127" d="M322.663,332.661a.543.543,0,1,0-.542.566A.555.555,0,0,0,322.663,332.661Zm.557,0a1.1,1.1,0,1,1-1.1-1.123A1.111,1.111,0,0,1,323.22,332.661Zm2.4,2.619a.543.543,0,1,0-.542.566A.555.555,0,0,0,325.617,335.281Zm.557,0a1.1,1.1,0,1,1-1.1-1.123A1.111,1.111,0,0,1,326.174,335.281Zm-1.3-3.067-3.282,3.38a.278.278,0,1,0,.4.388l3.282-3.38a.278.278,0,1,0-.4-.388Z" transform="translate(-245.951 -256.324)"/>
+    <path id="Path_1128" data-name="Path 1128" d="M81.984,83.1A1.114,1.114,0,0,0,83.1,81.984V73.351a1.114,1.114,0,0,0-1.114-1.114H73.351a1.114,1.114,0,0,0-1.114,1.114v8.633A1.114,1.114,0,0,0,73.351,83.1Zm0,.557H73.351a1.671,1.671,0,0,1-1.671-1.671V73.351a1.671,1.671,0,0,1,1.671-1.671h8.633a1.671,1.671,0,0,1,1.671,1.671v8.633A1.671,1.671,0,0,1,81.984,83.655Z" transform="translate(0 0)"/>
+  </g>
+</svg>

src/assets/images/tax.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11.975" height="11.975" viewBox="0 0 11.975 11.975">
+  <g id="tax-fee-svgrepo-com" transform="translate(-71.68 -71.68)">
+    <path id="Path_1127" data-name="Path 1127" d="M322.663,332.661a.543.543,0,1,0-.542.566A.555.555,0,0,0,322.663,332.661Zm.557,0a1.1,1.1,0,1,1-1.1-1.123A1.111,1.111,0,0,1,323.22,332.661Zm2.4,2.619a.543.543,0,1,0-.542.566A.555.555,0,0,0,325.617,335.281Zm.557,0a1.1,1.1,0,1,1-1.1-1.123A1.111,1.111,0,0,1,326.174,335.281Zm-1.3-3.067-3.282,3.38a.278.278,0,1,0,.4.388l3.282-3.38a.278.278,0,1,0-.4-.388Z" transform="translate(-245.951 -256.324)"/>
+    <path id="Path_1128" data-name="Path 1128" d="M81.984,83.1A1.114,1.114,0,0,0,83.1,81.984V73.351a1.114,1.114,0,0,0-1.114-1.114H73.351a1.114,1.114,0,0,0-1.114,1.114v8.633A1.114,1.114,0,0,0,73.351,83.1Zm0,.557H73.351a1.671,1.671,0,0,1-1.671-1.671V73.351a1.671,1.671,0,0,1,1.671-1.671h8.633a1.671,1.671,0,0,1,1.671,1.671v8.633A1.671,1.671,0,0,1,81.984,83.655Z" transform="translate(0 0)"/>
+  </g>
+</svg>

src/assets/images/upload-svgrepo-com (1).svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37.794" height="30.711" viewBox="0 0 37.794 30.711">
+  <g id="upload-svgrepo-com_1_" data-name="upload-svgrepo-com (1)" transform="translate(0)">
+    <path id="Path_1120" data-name="Path 1120" d="M28.445,153.2a1.576,1.576,0,0,1,0-3.152,6.3,6.3,0,0,0,.413-12.58l-.93-.055-.395-.838a9.43,9.43,0,0,0-17.075,0l-.395.838-.926.059a6.3,6.3,0,0,0,.413,12.58,1.576,1.576,0,1,1,0,3.152,9.445,9.445,0,0,1-1.524-18.766,12.573,12.573,0,0,1,21.944-.007,9.447,9.447,0,0,1-1.524,18.77Z" transform="translate(-0.1 -128)" fill="#009fe3"/>
+    <path id="Path_1121" data-name="Path 1121" d="M352.4,583.849a1.583,1.583,0,0,1-1.115-.461l-3.61-3.61-3.61,3.61a1.574,1.574,0,0,1-2.226-2.226l4.725-4.725a1.571,1.571,0,0,1,2.226,0l4.725,4.725a1.574,1.574,0,0,1-1.115,2.687Z" transform="translate(-328.778 -559.439)" fill="#5f6379"/>
+    <path id="Path_1122" data-name="Path 1122" d="M470.876,590.174A1.575,1.575,0,0,1,469.3,588.6V577.576a1.576,1.576,0,1,1,3.152,0V588.6A1.575,1.575,0,0,1,470.876,590.174Z" transform="translate(-451.981 -559.464)" fill="#5f6379"/>
+  </g>
+</svg>

src/assets/images/warning.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.634" height="28.47" viewBox="0 0 31.634 28.47">
+  <g id="layer1" transform="translate(-1 -1032.36)">
+    <path id="path839" d="M16.817,1032.36,1,1060.83H32.634Zm0,3.163,12.654,23.725H4.163Z" fill="#e73232"/>
+    <path id="path844" d="M10,1046.36h3.163v3.163H10Z" transform="translate(5.235 8.144)" fill="#e73232"/>
+    <path id="path846" d="M10,1048.85h3.163v-9.49H10Z" transform="translate(5.235 4.072)" fill="#e73232"/>
+  </g>
+</svg>

src/assets/scss/variables.scss

@@ -16,7 +16,8 @@ $white-blue: #1da1f2;
 $dark-yellow: #e09b3d;
 $dark-red: #c74c4d;
 $move-color: #7024c4;
-
+$black-color: #252525;
+$warning-color: #e732321c;
 //PRIMARY THEME
 // $mat-primary: (
 //   main: $main-color,
@@ -31,9 +32,7 @@ $move-color: #7024c4;
 //       darker: $white-color,
 //     ),
 // );
-
 // $theme-primary: mat-palette($mat-primary, main, lighter, darker);
-
 //ACCENT THEME
 // $mat-accent: (
 //   main: #cf484f,
@@ -48,9 +47,7 @@ $move-color: #7024c4;
 //       darker: $white-color,
 //     ),
 // );
-
 // $theme-accent: mat-palette($mat-accent, main, lighter, darker);
-
 // //WARN_THEME
 // $mat-warn: (
 //   main: #ff0000,
@@ -65,26 +62,26 @@ $move-color: #7024c4;
 //       darker: $white-color,
 //     ),
 // );
-
 // $theme-warn: mat-palette($mat-warn, main, lighter, darker);
-
 // $custom-light-theme: mat-light-theme(
 //   $theme-primary,
 //   $theme-accent,
 //   $theme-warn
 // );
-
 // @include angular-material-theme($custom-light-theme);
-
 @import "../../app/landing-page/landing-page-theme.scss";
 @import "../../app/landing-page/landing-header/landing-header.component.scss";
 @import "../../app/authentication/auth-sign-in/auth-sign-in-theme.scss";
+@import "../../app/authentication/auth-sign-up/auth-sign-up.component.scss";
+@import "../../app/shared/components/warning/warning.component.scss";
 @import "./spineer.scss";
 
 @mixin component-theme() {
   @include landing-page-theme();
   @include header-theme();
   @include auth-sign-in-theme();
+  @include signUp-theme();
+  @include warning-theme();
 }
 
 @include component-theme();

src/styles.scss

@@ -37,6 +37,10 @@ body {
   margin-top: 1rem;
 }
 
+.mt-3 {
+  margin-top: 2rem;
+}
+
 .plr-1 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -50,8 +54,8 @@ body {
   gap: 80px;
 }
 
-.gap-30 {
-  gap: 30px;
+.gap-36 {
+  gap: 36px;
 }
 
 .w-100 {
@@ -76,6 +80,11 @@ body {
   cursor: pointer;
 }
 
+.red {
+  color: red;
+  margin: 0 !important;
+}
+
 /* Border */
 .mat-form-field-appearance-outline .mat-form-field-outline {
   color: white;
@@ -101,3 +110,10 @@ input.mat-input-element {
   width: 15px !important;
   height: 15px !important;
 }
+.m-0 {
+  margin: 0 !important;
+}
+
+.bold {
+  font-family: Montserrat-Bold;
+}