update

src/app/+admin/management/job/feature/job-list.component.ts

@@ -126,7 +126,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
                     <nz-form-item>
                         <nz-form-control nzErrorTip="Please enter Url!">
                             <nz-input-group>
-                            <input class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="url">
+                            <input [(ngModel)]="searchString" (change)="getAllJobs()" class="tw-border tw-rounded-lg tw-w-full tw-h-8" type="text" formControlName="url">
                             </nz-input-group>
                         </nz-form-control>
                     </nz-form-item>
@@ -140,7 +140,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
             <nz-form-item class="tw-flex-1">
                 <nz-form-control>
                     <nz-input-group>
-                        <input class="tw-border tw-rounded-lg tw-w-full tw-h-8">
+                        <input class="tw-border tw-rounded-lg tw-w-full tw-h-8" [(ngModel)]="searchString">
                     </nz-input-group>
                 </nz-form-control>
             </nz-form-item>
@@ -223,6 +223,8 @@ export class JobListComponent implements OnInit {
     pageSize: number = 5;
     jobsList: Rows<JobApi.Response> | null = null;
 
+    searchString: string = "";
+
     isDeleting: boolean = false;
     deletetingId: string = "";
 
@@ -263,7 +265,7 @@ export class JobListComponent implements OnInit {
         );
     }
 
-    getAllJobs(pageIndex: number = this.pageIndex, pageSize: number = 5) {
+    getAllJobs(pageIndex: number = this.pageIndex, pageSize: number = this.pageSize) {
         this._service.jobsGet(pageIndex, pageSize)
             .pipe(
                 tap((response: ResponseResult<Rows<JobApi.Response>>) => {

src/app/+job/feature/job.component.html

 <div class="tw-max-w-3xl tw-mx-auto">
+  <div class="tw-w-full">
+    <p class="tw-text-lg tw-font-semibold">Search for your dream job...!</p>
+    <div class="tw-flex tw-gap-x-3">
+      <input class="tw-h-8 tw-shadow-md tw-border tw-rounded-md tw-w-full tw-flex-1 tw-px-2" placeholder="Location, Title,...">
+      <button type="button" class="tw-h-8 tw-shadow-md tw-border tw-rounded-md tw-bg-sky">Search</button>
+  </div>
+  <p class="tw-text-lg tw-font-semibold tw-mt-3">Suggested keywords:</p>
+  <div class="tw-flex tw-flex-wrap tw-gap-x-3 tw-gap-y-1 tw-my-3">
+    <a class="tw-border tw-p-1">Laravel</a>
+    <a class="tw-border tw-p-1">VueJS</a>
+    <a class="tw-border tw-p-1">React</a>
+    <a class="tw-border tw-p-1">.NET Core</a>
+    <a class="tw-border tw-p-1">SpringBoot</a>
+    <a class="tw-border tw-p-1">Java</a>
+    <a class="tw-border tw-p-1">Svelte</a>
+    <a class="tw-border tw-p-1">CodeIgniter</a>
+    <a class="tw-border tw-p-1">Flutter</a>
+    <a class="tw-border tw-p-1">React Native</a>
+    <a class="tw-border tw-p-1">DevOps</a>
+    <a class="tw-border tw-p-1">FLask</a>
+    <a class="tw-border tw-p-1">Django</a>
+    <a class="tw-border tw-p-1">GoLang</a>
+    <a class="tw-border tw-p-1">Wizard</a>
+    <a class="tw-border tw-p-1">NodeJS</a>
+</div>
+  </div>
+  
   <div class="tw-flex tw-flex-row tw-flex-wrap tw-mt-6">
     <nz-card
       *ngFor="let job of jobList?.rows"

src/app/+shell/ui/components/footer/feature/footer.component.html

-<nz-footer class="tw-min-h-48 tw-bg-white">
+<nz-footer class="tw-min-h-48 tw-bg-wind">
     <div class="tw-w-full tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3">
         <div>
             <p class="tw-text-lg tw-font-semibold">Text</p>

src/app/+shell/ui/components/header/feature/header.component.html

-<nz-header class="tw-bg-white tw-flex tw-flex-wrap">
+<nz-header class="tw-bg-wind tw-flex tw-flex-wrap">
     <a routerLink="/home" routerLinkActive="active">
         <img src="https://yt3.googleusercontent.com/y4J_Fs5ksRlxx6_LzT1VKxVqH_T8Vyn_RN_YYgLJhuMzBS5qxTgm7NlEcMkQd3hgCpfWtYcEUg=s900-c-k-c0x00ffffff-no-rj" class="tw-border tw-rounded-full tw-w-10 tw-h-10 tw-mt-3 tw-float-left">
     </a>
   <ul nz-menu nzMode="horizontal">
-    <li nz-menu-item routerLink="/home" routerLinkActive="active">Home</li>
-    <li nz-menu-item routerLink="/jobs" routerLinkActive="active">Jobs</li>
+    <li nz-menu-item class="tw-bg-wind" routerLink="/home" routerLinkActive="active">Home</li>
+    <li nz-menu-item class="tw-bg-wind" routerLink="/jobs" routerLinkActive="active">Jobs</li>
     <ng-container *ngIf="!isLoggedIn()">
-      <li nz-menu-item routerLink="/login" routerLinkActive="active">Login</li>
-      <li nz-menu-item>Register</li>
+      <li nz-menu-item class="tw-bg-wind" routerLink="/login" routerLinkActive="active">Login</li>
+      <li nz-menu-item class="tw-bg-wind">Register</li>
     </ng-container>
     <ng-container *ngIf="isLoggedIn()">
       
-      <li *ngIf="isAdmin()" nz-menu-item routerLink="/admin" routerLinkActive="active">Admin</li>
+      <li *ngIf="isAdmin()" class="tw-bg-wind" nz-menu-item routerLink="/admin" routerLinkActive="active">Admin</li>
     </ng-container>
   </ul>
   <ng-container *ngIf="isLoggedIn()">

src/app/+shell/ui/layout.component.ts

@@ -33,7 +33,7 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
       <nz-layout>
       <meu-header></meu-header>
       <div class="tw-relative tw-min-h-[92dvh]">
-        <div class="tw-max-w-5xl tw-bg-white tw-mx-auto tw-py-10 tw-px-3 tw-shadow-xl">
+        <div class="tw-max-w-5xl tw-mx-auto tw-py-10 tw-px-3 tw-bg-white">
           <router-outlet></router-outlet>
         </div>
       </div>

tailwind.config.js

@@ -29,7 +29,8 @@ module.exports = {
       white: "#ffffff",
       black: "#000000",
       sky: "#a3e4ff",
-      link: "#1484b2"
+      link: "#1484b2",
+      wind: "#def6ff"
     },
     fontFamily: {
       "roboto-black": ["Roboto-Black", "sans-serif"],