Migrate to modernize template

Web/src/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

Web/src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'Angular15'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('Angular15');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('Angular15 app is running!');
+  });
+});

Web/src/app/app.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { OAuthService } from 'angular-oauth2-oidc';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet],
+  providers: [
+    OAuthService,
+  ],
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  title = 'Modernize Angular Admin Tempplate';
+}

Web/src/app/app.config.ts

@@ -1,34 +1,92 @@
-import { ApplicationConfig, inject, provideAppInitializer, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
-import { routes } from './app.routes';
-import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { DefaultOAuthInterceptor, provideOAuthClient } from 'angular-oauth2-oidc';
-import { AppConfigService } from './services/config.service';
-import { ApiEndpointInterceptor } from './services/http.interceptor';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideBrowserGlobalErrorListeners(),
-    provideZonelessChangeDetection(),
-    provideRouter(routes),
-    provideAppInitializer(() => inject(AppConfigService).loadConfig()),
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: DefaultOAuthInterceptor,
-      multi: true,
-    },
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: ApiEndpointInterceptor,
-      multi: true,
-    },
-    provideHttpClient(withInterceptorsFromDi()),
-    provideOAuthClient({
-      resourceServer: {
-        allowedUrls: ['http://localhost:5000', 'https://localhost:5001', 'https://centrum.lesko.me','https://beta.e-dias.sk/'],
-        sendAccessToken: true,
-      },
-    }),
-  ]
-};
+import {
+  ApplicationConfig,
+  provideZoneChangeDetection,
+  importProvidersFrom,
+} from '@angular/core';
+import {
+  HttpClient,
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import { routes } from './app.routes';
+import {
+  provideRouter,
+  withComponentInputBinding,
+  withInMemoryScrolling,
+} from '@angular/router';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideClientHydration } from '@angular/platform-browser';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+import { ToastrModule } from 'ngx-toastr';
+import { provideToastr } from 'ngx-toastr';
+
+// icons
+import { TablerIconsModule } from 'angular-tabler-icons';
+import * as TablerIcons from 'angular-tabler-icons/icons';
+
+// perfect scrollbar
+import { NgScrollbarModule } from 'ngx-scrollbar';
+import { NgxPermissionsModule } from 'ngx-permissions';
+//Import all material modules
+import { MaterialModule } from './material.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+
+// code view
+import { provideHighlightOptions } from 'ngx-highlightjs';
+import 'highlight.js/styles/atom-one-dark.min.css';
+
+export function HttpLoaderFactory(http: HttpClient): any {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAnimationsAsync(), // required animations providers
+    provideToastr(), // Toastr providers
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideHighlightOptions({
+      coreLibraryLoader: () => import('highlight.js/lib/core'),
+      lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'), // Optional, add line numbers if needed
+      languages: {
+        typescript: () => import('highlight.js/lib/languages/typescript'),
+        css: () => import('highlight.js/lib/languages/css'),
+        xml: () => import('highlight.js/lib/languages/xml'),
+      },
+    }),
+    provideRouter(
+      routes,
+      withInMemoryScrolling({
+        scrollPositionRestoration: 'enabled',
+        anchorScrolling: 'enabled',
+      }),
+      withComponentInputBinding()
+    ),
+    provideHttpClient(withInterceptorsFromDi()),
+    provideClientHydration(),
+    provideAnimationsAsync(),
+    importProvidersFrom(
+      FormsModule,
+      ToastrModule.forRoot(),
+      ReactiveFormsModule,
+      MaterialModule,
+      NgxPermissionsModule.forRoot(),
+      TablerIconsModule.pick(TablerIcons),
+      NgScrollbarModule,
+      CalendarModule.forRoot({
+        provide: DateAdapter,
+        useFactory: adapterFactory,
+      }),
+      TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useFactory: HttpLoaderFactory,
+          deps: [HttpClient],
+        },
+      })
+    ),
+  ],
+};

Web/src/app/app.routes.ts

@@ -1,26 +1,106 @@
-import { Routes } from '@angular/router';
-import { Login } from './login/login';
-import { authGuard } from './app.route.guard';
-import { App } from './app';
-
-export const routes: Routes = [
-    {
-        path: '',
-        component: App
-    },
-    {
-        path: 'login',
-        component: Login
-    },
-    {
-        path: 'content',
-        loadComponent: () => import('./content/content').then(m => m.Content),
-        canActivate: [authGuard],
-        children: [
-            {
-                path: 'items',
-                loadComponent: () => import('./content/items/items').then(m => m.Items),
-                canActivate: [authGuard],
-            }]
-    }
-];
+import { Routes } from '@angular/router';
+import { BlankComponent } from './layouts/blank/blank.component';
+import { FullComponent } from './layouts/full/full.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: FullComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: '/front-pages/homepage',
+        pathMatch: 'full',
+      },
+      // {
+      //   path: 'starter',
+      //   loadChildren: () =>
+      //     import('./pages/pages.routes').then((m) => m.PagesRoutes),
+      // },
+      // {
+      //   path: 'dashboards',
+      //   loadChildren: () =>
+      //     import('../../../theme/packages/main/src/app/pages/dashboards/dashboards.routes').then(
+      //       (m) => m.DashboardsRoutes
+      //     ),
+      // },
+      // {
+      //   path: 'forms',
+      //   loadChildren: () =>
+      //     import('../../../theme/packages/main/src/app/pages/forms/forms.routes').then((m) => m.FormsRoutes),
+      // },
+      // {
+      //   path: 'charts',
+      //   loadChildren: () =>
+      //     import('../../../theme/packages/main/src/app/pages/charts/charts.routes').then((m) => m.ChartsRoutes),
+      // },
+      // {
+      //   path: 'apps',
+      //   loadChildren: () =>
+      //     import('../../../theme/packages/main/src/app/pages/apps/apps.routes').then((m) => m.AppsRoutes),
+      // },
+      // {
+      //   path: 'widgets',
+      //   loadChildren: () =>
+      //     import('../../../theme/packages/main/src/app/pages/widgets/widgets.routes').then((m) => m.WidgetsRoutes),
+      // },
+      // {
+      //   path: 'tables',
+      //   loadChildren: () =>
+      //     import('../../../theme/packages/main/src/app/pages/tables/tables.routes').then((m) => m.TablesRoutes),
+      // },
+      // {
+      //   path: 'datatable',
+      //   loadChildren: () =>
+      //     import('../../../theme/packages/main/src/app/pages/datatable/datatable.routes').then(
+      //       (m) => m.DatatablesRoutes
+      //     ),
+      // },
+      // {
+      //   path: 'theme-pages',
+      //   loadChildren: () =>
+      //     import('../../../theme/packages/main/src/app/pages/theme-pages/theme-pages.routes').then(
+      //       (m) => m.ThemePagesRoutes
+      //     ),
+      // },
+      // {
+      //   path: 'ui-components',
+      //   loadChildren: () =>
+      //     import('../../../theme/packages/main/src/app/pages/ui-components/ui-components.routes').then(
+      //       (m) => m.UiComponentsRoutes
+      //     ),
+      // },
+    ],
+  },
+  {
+    path: '',
+    component: BlankComponent,
+    children: [
+      {
+        path: 'authentication',
+        loadChildren: () =>
+          import('./pages/authentication/authentication.routes').then(
+            (m) => m.AuthenticationRoutes
+          ),
+      },
+      // {
+      //   path: 'landingpage',
+      //   loadChildren: () =>
+      //     import('../../../theme/packages/main/src/app/pages/theme-pages/landingpage/landingpage.routes').then(
+      //       (m) => m.LandingPageRoutes
+      //     ),
+      // },
+      {
+        path: 'front-pages',
+        loadChildren: () =>
+          import('./pages/front-pages/front-pages.routes').then(
+            (m) => m.FrontPagesRoutes
+          ), 
+      },
+    ],
+  },
+  {
+    path: '**',
+    redirectTo: 'authentication/error',
+  },
+];

Web/src/app/app.ts

@@ -1,45 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Router, RouterOutlet } from '@angular/router';
-import { OAuthService } from 'angular-oauth2-oidc';
-
-@Component({
-  selector: 'app-root',
-  imports: [RouterOutlet],
-  providers: [
-    OAuthService,
-  ],
-  templateUrl: './app.html',
-  styleUrl: './app.scss'
-})
-export class App implements OnInit {
-  protected title = 'Web';
-  constructor(private readonly as: OAuthService, private readonly router: Router) {
-    this.as.configure({
-      issuer: 'https://identity.lesko.me',
-      redirectUri: window.location.origin + '/login',
-      clientId: '21131567-fea1-42a2-8907-21abd874eff8',
-      scope: 'openid profile email',
-      responseType: 'code',
-      timeoutFactor: 0.01,
-    });
-  }
-  ngOnInit(): void {
-    if (!sessionStorage.getItem('isDarkMode')) {
-      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'true' : 'false';
-      sessionStorage.setItem('isDarkMode', isDarkMode);
-      setTheme();
-    }
-
-    this.as.loadDiscoveryDocumentAndLogin()
-      .then(() => this.router.navigate(['login']));
-  }
-}
-
-export function setTheme(): void {
-  const isDarkMode = sessionStorage.getItem('isDarkMode');
-  if (isDarkMode === 'true') {
-    document.documentElement.classList.add('dark');
-  } else {
-    document.documentElement.classList.remove('dark');
-  }
-}

Web/src/app/config.ts

@@ -0,0 +1,25 @@
+export interface AppSettings {
+  dir: 'ltr' | 'rtl';
+  theme: string;
+  sidenavOpened: boolean;
+  sidenavCollapsed: boolean;
+  boxed: boolean;
+  horizontal: boolean;
+  activeTheme: string;
+  language: string;
+  cardBorder: boolean;
+  navPos: 'side' | 'top';
+}
+
+export const defaults: AppSettings = {
+  dir: 'ltr',
+  theme: 'light',
+  sidenavOpened: false,
+  sidenavCollapsed: false,
+  boxed: true,
+  horizontal: false,
+  cardBorder: true,
+  activeTheme: 'blue_theme',
+  language: 'en-us',
+  navPos: 'side',
+};

Web/src/app/content/content.html

@@ -1,8 +0,0 @@
-<span>{{data()|json}}</span>
-<router-outlet />
-<div>
-    <a [routerLink]="['/']">Back to Home</a>
-</div>
-<div>
-     <a (click)="toggleMode()" class="cursor-pointer">Change mode</a>
-</div>

Web/src/app/content/content.ts

@@ -1,36 +0,0 @@
-import { JsonPipe } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
-import { Component, OnInit, signal } from '@angular/core';
-import { OAuthService } from 'angular-oauth2-oidc';
-import { AppConfigService } from '../services/config.service';
-import { RouterLink, RouterOutlet } from "@angular/router";
-import { setTheme } from '../app';
-
-@Component({
-  selector: 'app-content',
-  imports: [JsonPipe, RouterOutlet, RouterLink],
-  templateUrl: './content.html',
-  styleUrl: './content.scss'
-})
-export class Content implements OnInit {
-  data = signal({});
-
-  constructor(httpClient: HttpClient, readonly as: OAuthService, readonly cs: AppConfigService) {
-    httpClient.get('/api/product')
-      .subscribe(data => {
-        this.data.set(data);
-      });
-  }
-
-  ngOnInit(): void {
-    setTheme();
-  }
-
-  toggleMode() {
-    sessionStorage.getItem('isDarkMode') === 'true' ?
-      sessionStorage.setItem('isDarkMode', 'false') : sessionStorage.setItem('isDarkMode', 'true');
-    setTheme();
-  }
-}
-
-

Web/src/app/content/items/items.html

@@ -1,4 +0,0 @@
-<p>items works!</p>
-<div>
-    <a [routerLink]="['/','content']">Back to content</a>
-</div>

Web/src/app/content/items/items.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
-
-@Component({
-  selector: 'app-items',
-  imports: [RouterLink],
-  templateUrl: './items.html',
-  styleUrl: './items.scss'
-})
-export class Items {
-
-}

Web/src/app/icon/icon.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import * as TablerIcons from 'angular-tabler-icons/icons';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    TablerIconsModule.pick(TablerIcons),
+    CommonModule
+  ],
+  exports: [TablerIconsModule]
+})
+export class IconModule { }

Web/src/app/layouts/blank/blank.component.html

@@ -0,0 +1,11 @@
+<!-- ============================================================== -->
+<!-- Only router without any element -->
+<!-- ============================================================== -->
+<mat-sidenav-container
+  [ngClass]="{
+    cardBorder: options.cardBorder,
+  }"
+  [dir]="options.dir!"
+>
+  <router-outlet></router-outlet>
+</mat-sidenav-container>

Web/src/app/layouts/blank/blank.component.ts

@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+import { CoreService } from '../../services/core.service';
+import { AppSettings } from '../../config';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
+import { MaterialModule } from '../../material.module';
+
+@Component({
+  selector: 'app-blank',
+  templateUrl: './blank.component.html',
+  styleUrls: [],
+  imports: [RouterOutlet, MaterialModule, CommonModule],
+})
+export class BlankComponent {
+  private htmlElement!: HTMLHtmlElement;
+
+  options!: AppSettings;
+
+  constructor(private settings: CoreService) {
+    this.htmlElement = document.querySelector('html')!;
+    this.options = this.settings.getOptions();
+    // Initialize project theme with options
+    this.receiveOptions(this.options);
+  }
+
+  receiveOptions(options: AppSettings): void {
+    this.toggleDarkTheme(options);
+    this.toggleColorsTheme(options);
+  }
+
+  toggleDarkTheme(options: AppSettings) {
+    if (options.theme === 'dark') {
+      this.htmlElement.classList.add('dark-theme');
+      this.htmlElement.classList.remove('light-theme');
+    } else {
+      this.htmlElement.classList.remove('dark-theme');
+      this.htmlElement.classList.add('light-theme');
+    }
+  }
+
+  toggleColorsTheme(options: AppSettings) {
+    // Remove any existing theme class dynamically
+    this.htmlElement.classList.forEach((className) => {
+      if (className.endsWith('_theme')) {
+        this.htmlElement.classList.remove(className);
+      }
+    });
+
+    // Add the selected theme class
+    this.htmlElement.classList.add(options.activeTheme);
+  }
+}

Web/src/app/layouts/full/full.component.html

@@ -0,0 +1,197 @@
+<span [dir]="options.dir!">
+  <mat-sidenav-container class="mainWrapper" autosize autoFocus [ngClass]="{
+      'sidebarNav-mini':
+        options.sidenavCollapsed && options.navPos !== 'top' && !resView,
+      'sidebarNav-horizontal': options.horizontal,
+      cardBorder: options.cardBorder
+    }">
+    <!-- ============================================================== -->
+    <!-- Vertical Sidebar -->
+    <!-- ============================================================== -->
+    @if (!options.horizontal) {
+    <mat-sidenav #leftsidenav [mode]="isOver ? 'over' : 'side'" [opened]="
+        options.navPos === 'side' &&
+        options.sidenavOpened &&
+        !isOver &&
+        !resView
+      " (openedChange)="onSidenavOpenedChange($event)" (closedStart)="onSidenavClosedStart()" class="sidebarNav">
+      <div class="flex-layout">
+        <app-sidebar (toggleMobileNav)="sidenav.toggle()" [showToggle]="isOver"></app-sidebar>
+        <ng-scrollbar class="position-relative" style="height: 100%">
+          <mat-nav-list class="sidebar-list">
+            @for(item of navItems; track item) {
+            <app-nav-item [item]="item" (notify)="sidenav.toggle()" class="top-parent">
+            </app-nav-item>
+            }
+          </mat-nav-list>
+        </ng-scrollbar>
+        <div class="p-24 m-t-auto profile-bar">
+          <div class="bg-light-secondary d-flex align-items-center rounded p-16">
+            <img src="/assets/images/profile/user-1.jpg" class="rounded-circle" width="40" />
+            <div class="m-l-16">
+              <h4 class="f-w-600">Mathew</h4>
+              <span class="f-s-12">Designer</span>
+            </div>
+            <div class="m-l-auto">
+              <a mat-icon-button [routerLink]="['/authentication/login']" class="d-flex justify-content-center">
+                <i-tabler name="power" class="text-primary icon-18 d-flex"></i-tabler>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </mat-sidenav>
+    }
+
+    <!-- ============================================================== -->
+    <!-- horizontal Sidebar -->
+    <!-- ============================================================== -->
+    @if (resView) {
+    <mat-sidenav #leftsidenav [mode]="'over'" [opened]="options.sidenavOpened && !isTablet"
+      (openedChange)="onSidenavOpenedChange($event)" (closedStart)="onSidenavClosedStart()" class="sidebarNav">
+      <app-sidebar> </app-sidebar>
+      <ng-scrollbar class="position-relative" style="height: 100%">
+        <mat-nav-list class="sidebar-list">
+          @for(item of navItems; track item) {
+          <app-nav-item [item]="item" (notify)="sidenav.toggle()">
+          </app-nav-item>
+          }
+        </mat-nav-list>
+      </ng-scrollbar>
+      <div class="p-24 m-t-auto profile-bar">
+        <div class="bg-light-secondary d-flex align-items-center rounded p-16">
+          <img src="/assets/images/profile/user-1.jpg" class="rounded-circle" width="40" />
+          <div class="m-l-16">
+            <h4 class="f-w-600">Mathew</h4>
+            <span class="f-s-12">Designer</span>
+          </div>
+          <div class="m-l-auto">
+            <a mat-icon-button [routerLink]="['/authentication/login']" class="d-flex justify-content-center">
+              <i-tabler name="power" class="text-primary icon-18 d-flex"></i-tabler>
+            </a>
+          </div>
+        </div>
+      </div>
+    </mat-sidenav>
+    }
+
+    <!-- ============================================================== -->
+    <!-- Main Content -->
+    <!-- ============================================================== -->
+    <mat-sidenav-content class="contentWrapper" #content>
+      <!-- ============================================================== -->
+      <!-- VerticalHeader -->
+      <!-- ============================================================== -->
+      @if (!options.horizontal) {
+      <app-header [showToggle]="!isOver" (toggleCollapsed)="toggleCollapsed()" (toggleMobileNav)="sidenav.toggle()"
+        (toggleMobileFilterNav)="toggleFilterNav()" (optionsChange)="receiveOptions($event)"></app-header>
+      } @else {
+      <!-- horizontal header -->
+      <app-horizontal-header (toggleMobileNav)="sidenav.toggle()" (toggleMobileFilterNav)="toggleFilterNav()"
+        (optionsChange)="receiveOptions($event)"></app-horizontal-header>
+      } @if(options.horizontal) {
+      <app-horizontal-sidebar></app-horizontal-sidebar>
+      }
+
+      <main class="pageWrapper" [ngClass]="{
+          maxWidth: options.boxed
+        }">
+        <app-breadcrumb></app-breadcrumb>
+        <!-- ============================================================== -->
+        <!-- Outlet -->
+        <!-- ============================================================== -->
+        <router-outlet></router-outlet>
+        <div class="customizerBtn">
+          <button mat-fab class="bg-primary text-white" (click)="customizerRight.toggle()">
+            <mat-icon>settings</mat-icon>
+          </button>
+        </div>
+      </main>
+
+      <!-- ------------------------------------------------------------------
+        Mobile Apps Sidebar
+        ------------------------------------------------------------------ -->
+      <div [class.open]="isFilterNavOpen" class="filter-sidebar">
+        <div>
+          <div class="d-flex justify-content-between align-items-center">
+            <div class="branding">
+              @if(options.theme === 'light') {
+              <a href="/">
+                <img src="./assets/images/logos/dark-logo.svg" class="align-middle m-2" alt="logo" />
+              </a>
+              } @else {
+              <a href="/">
+                <img src="./assets/images/logos/light-logo.svg" class="align-middle m-2" alt="logo" />
+              </a>
+              }
+            </div>
+            <button mat-icon-button (click)="isFilterNavOpen = !isFilterNavOpen" class="d-flex justify-content-center">
+              <i-tabler name="x" class="icon-18 d-flex"></i-tabler>
+            </button>
+          </div>
+
+          <mat-accordion>
+            <mat-expansion-panel class="shadow-none">
+              <mat-expansion-panel-header>
+                <mat-panel-title class="f-s-16 f-w-500"> Apps </mat-panel-title>
+              </mat-expansion-panel-header>
+              <div>
+                <div class="row">
+                  @for(appdd of apps; track appdd.img) {
+                  <div class="col-12 text-hover-primary">
+                    <a [routerLink]="[appdd.link]" class="d-flex align-items-center text-decoration-none m-b-24 gap-16">
+                      <button mat-mini-fab class="text-primary bg-light-primary shadow-none rounded">
+                        <img [src]="appdd.img" width="20" />
+                      </button>
+
+                      <div>
+                        <h5 class="f-s-14 f-w-600 m-0 textprimary f-s-14 hover-text">
+                          {{ appdd.title }}
+                        </h5>
+                        <span class="f-s-14 f-s-12">{{ appdd.subtitle }}</span>
+                      </div>
+                    </a>
+                  </div>
+                  }
+                </div>
+                <h4 class="f-s-18 f-w-600 m-b-16">Quick Links</h4>
+                @for(quicklink of quicklinks; track quicklink.title) {
+                <div class="text-hover-primary">
+                  <a [routerLink]="['quicklink.link']"
+                    class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8">{{ quicklink.title }}</a>
+                </div>
+                }
+              </div>
+            </mat-expansion-panel>
+          </mat-accordion>
+
+          <div class="p-x-16">
+            <a [routerLink]="['/apps/calendar']"
+              class="d-flex align-items-center text-decoration-none f-s-14 p-y-16 gap-8">
+              <span class="f-s-15 f-w-500 m-l-8">Calendar</span>
+            </a>
+            <a [routerLink]="['/apps/chat']" class="d-flex align-items-center text-decoration-none f-s-14 p-y-16">
+              <span class="f-s-15 f-w-500 m-l-8">Chat</span>
+            </a>
+            <a [routerLink]="['/apps/email/inbox']"
+              class="d-flex align-items-center text-decoration-none f-s-14 p-y-16 gap-8">
+              <span class="f-s-15 f-w-500 m-l-8">Email</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </mat-sidenav-content>
+
+    <mat-sidenav #customizerRight mode="over" position="end">
+      <div class="p-x-16 p-y-20 d-flex align-items-center justify-content-between">
+        <h3 class="f-s-21 f-w-600">Settings</h3>
+        <button class="d-lg-none" mat-button (click)="customizerRight.toggle()">
+          Close
+        </button>
+      </div>
+      <mat-divider></mat-divider>
+
+      <app-customizer (optionsChange)="receiveOptions($event)"></app-customizer>
+    </mat-sidenav>
+  </mat-sidenav-container>
+</span>

Web/src/app/layouts/full/full.component.ts

@@ -0,0 +1,285 @@
+import { BreakpointObserver, MediaMatcher } from '@angular/cdk/layout';
+import { ChangeDetectorRef, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { MatSidenav, MatSidenavContent } from '@angular/material/sidenav';
+import { CoreService } from '../../services/core.service';
+import { AppSettings } from '../../config';
+import { filter } from 'rxjs/operators';
+import { NavigationEnd, Router } from '@angular/router';
+import { navItems } from './vertical/sidebar/sidebar-data';
+import { NavService } from '../../services/nav.service';
+import { AppNavItemComponent } from './vertical/sidebar/nav-item/nav-item.component';
+import { RouterModule } from '@angular/router';
+import { MaterialModule } from '../../material.module';
+import { CommonModule } from '@angular/common';
+import { SidebarComponent } from './vertical/sidebar/sidebar.component';
+import { NgScrollbarModule } from 'ngx-scrollbar';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { HeaderComponent } from './vertical/header/header.component';
+import { AppHorizontalHeaderComponent } from './horizontal/header/header.component';
+import { AppHorizontalSidebarComponent } from './horizontal/sidebar/sidebar.component';
+import { AppBreadcrumbComponent } from './shared/breadcrumb/breadcrumb.component';
+import { CustomizerComponent } from './shared/customizer/customizer.component';
+
+const MOBILE_VIEW = 'screen and (max-width: 768px)';
+const TABLET_VIEW = 'screen and (min-width: 769px) and (max-width: 1024px)';
+const MONITOR_VIEW = 'screen and (min-width: 1024px)';
+const BELOWMONITOR = 'screen and (max-width: 1023px)';
+
+// for mobile app sidebar
+interface apps {
+  id: number;
+  img: string;
+  title: string;
+  subtitle: string;
+  link: string;
+}
+
+interface quicklinks {
+  id: number;
+  title: string;
+  link: string;
+}
+
+@Component({
+    selector: 'app-full',
+    imports: [
+        RouterModule,
+        AppNavItemComponent,
+        MaterialModule,
+        CommonModule,
+        SidebarComponent,
+        NgScrollbarModule,
+        TablerIconsModule,
+        HeaderComponent,
+        AppHorizontalHeaderComponent,
+        AppHorizontalSidebarComponent,
+        AppBreadcrumbComponent,
+        CustomizerComponent,
+    ],
+    templateUrl: './full.component.html',
+  
+    encapsulation: ViewEncapsulation.None
+})
+export class FullComponent implements OnInit {
+  navItems = navItems;
+
+  
+
+  @ViewChild('leftsidenav')
+  public sidenav: MatSidenav;
+  resView = false;
+  @ViewChild('content', { static: true }) content!: MatSidenavContent;
+  //get options from service
+  options: AppSettings;
+  private layoutChangesSubscription = Subscription.EMPTY;
+  private isMobileScreen = false;
+  private isContentWidthFixed = true;
+  private isCollapsedWidthFixed = false;
+  private htmlElement!: HTMLHtmlElement;
+
+  get isOver(): boolean {
+    return this.isMobileScreen;
+  }
+
+  get isTablet(): boolean {
+    return this.resView;
+  }
+
+  // for mobile app sidebar
+  apps: apps[] = [
+    {
+      id: 1,
+      img: '/assets/images/svgs/icon-dd-chat.svg',
+      title: 'Chat Application',
+      subtitle: 'Messages & Emails',
+      link: '/apps/chat',
+    },
+    {
+      id: 2,
+      img: '/assets/images/svgs/icon-dd-cart.svg',
+      title: 'Todo App',
+      subtitle: 'Completed task',
+      link: '/apps/todo',
+    },
+    {
+      id: 3,
+      img: '/assets/images/svgs/icon-dd-invoice.svg',
+      title: 'Invoice App',
+      subtitle: 'Get latest invoice',
+      link: '/apps/invoice',
+    },
+    {
+      id: 4,
+      img: '/assets/images/svgs/icon-dd-date.svg',
+      title: 'Calendar App',
+      subtitle: 'Get Dates',
+      link: '/apps/calendar',
+    },
+    {
+      id: 5,
+      img: '/assets/images/svgs/icon-dd-mobile.svg',
+      title: 'Contact Application',
+      subtitle: '2 Unsaved Contacts',
+      link: '/apps/contacts',
+    },
+    {
+      id: 6,
+      img: '/assets/images/svgs/icon-dd-lifebuoy.svg',
+      title: 'Tickets App',
+      subtitle: 'Create new ticket',
+      link: '/apps/tickets',
+    },
+    {
+      id: 7,
+      img: '/assets/images/svgs/icon-dd-message-box.svg',
+      title: 'Email App',
+      subtitle: 'Get new emails',
+      link: '/apps/email/inbox',
+    },
+    {
+      id: 8,
+      img: '/assets/images/svgs/icon-dd-application.svg',
+      title: 'Courses',
+      subtitle: 'Create new course',
+      link: '/apps/courses',
+    },
+  ];
+
+  quicklinks: quicklinks[] = [
+    {
+      id: 1,
+      title: 'Pricing Page',
+      link: '/theme-pages/pricing',
+    },
+    {
+      id: 2,
+      title: 'Authentication Design',
+      link: '/authentication/login',
+    },
+    {
+      id: 3,
+      title: 'Register Now',
+      link: '/authentication/side-register',
+    },
+    {
+      id: 4,
+      title: '404 Error Page',
+      link: '/authentication/error',
+    },
+    {
+      id: 5,
+      title: 'Notes App',
+      link: '/apps/notes',
+    },
+    {
+      id: 6,
+      title: 'Employee App',
+      link: '/apps/employee',
+    },
+    {
+      id: 7,
+      title: 'Todo Application',
+      link: '/apps/todo',
+    },
+    {
+      id: 8,
+      title: 'Treeview',
+      link: '/theme-pages/treeview',
+    },
+  ];
+
+  constructor(
+    private settings: CoreService,
+    private mediaMatcher: MediaMatcher,
+    private router: Router,
+    private breakpointObserver: BreakpointObserver,
+    private navService: NavService, private cdr: ChangeDetectorRef
+  ) {
+    this.htmlElement = document.querySelector('html')!;
+    this.options = this.settings.getOptions();
+    this.layoutChangesSubscription = this.breakpointObserver
+      .observe([MOBILE_VIEW, TABLET_VIEW, MONITOR_VIEW, BELOWMONITOR])
+      .subscribe((state) => {
+        // SidenavOpened must be reset true when layout changes
+        this.options.sidenavOpened = true;
+        this.isMobileScreen = state.breakpoints[BELOWMONITOR];
+        if (this.options.sidenavCollapsed == false) {
+          this.options.sidenavCollapsed = state.breakpoints[TABLET_VIEW];
+        }
+        this.isContentWidthFixed = state.breakpoints[MONITOR_VIEW];
+        this.resView = state.breakpoints[BELOWMONITOR];
+      });
+
+    // Initialize project theme with options
+    this.receiveOptions(this.options);
+
+    // This is for scroll to top
+    this.router.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      .subscribe((e) => {
+        this.content.scrollTo({ top: 0 });
+      });
+  }
+
+  isFilterNavOpen = false;
+
+  toggleFilterNav() {
+    this.isFilterNavOpen = !this.isFilterNavOpen;
+    console.log('Sidebar open:', this.isFilterNavOpen);
+    this.cdr.detectChanges(); // Ensures Angular updates the view
+  }
+
+  ngOnInit(): void {}
+
+  ngOnDestroy() {
+    this.layoutChangesSubscription.unsubscribe();
+  }
+
+  toggleCollapsed() {
+    this.isContentWidthFixed = false;
+    this.options.sidenavCollapsed = !this.options.sidenavCollapsed;
+    this.resetCollapsedState();
+  }
+
+  resetCollapsedState(timer = 400) {
+    setTimeout(() => this.settings.setOptions(this.options), timer);
+  }
+
+  onSidenavClosedStart() {
+    this.isContentWidthFixed = false;
+  }
+
+  onSidenavOpenedChange(isOpened: boolean) {
+    this.isCollapsedWidthFixed = !this.isOver;
+    this.options.sidenavOpened = isOpened;
+    this.settings.setOptions(this.options);
+  }
+
+  receiveOptions(options: AppSettings): void {
+    this.toggleDarkTheme(options);
+    this.toggleColorsTheme(options);
+  }
+
+  toggleDarkTheme(options: AppSettings) {
+    if (options.theme === 'dark') {
+      this.htmlElement.classList.add('dark-theme');
+      this.htmlElement.classList.remove('light-theme');
+    } else {
+      this.htmlElement.classList.remove('dark-theme');
+      this.htmlElement.classList.add('light-theme');
+    }
+  }
+
+  toggleColorsTheme(options: AppSettings) {
+    // Remove any existing theme class dynamically
+    this.htmlElement.classList.forEach((className) => {
+      if (className.endsWith('_theme')) {
+        this.htmlElement.classList.remove(className);
+      }
+    });
+
+    // Add the selected theme class
+    this.htmlElement.classList.add(options.activeTheme);
+  }
+}

Web/src/app/layouts/full/horizontal/header/header.component.html

@@ -0,0 +1,296 @@
+<mat-toolbar class="topbar horizontal-topbar">
+  <div class="container">
+    <div class="d-none d-sm-flex branding">
+      <app-branding></app-branding>
+    </div>
+
+    <!-- Mobile Menu -->
+    <button
+      mat-icon-button
+      (click)="toggleMobileNav.emit()"
+      class="d-block d-lg-none"
+    >
+      <i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
+    </button>
+    <!-- --------------------------------------------------------------- -->
+
+    <!-- --------------------------------------------------------------- -->
+    <!--  Search -->
+    <!-- --------------------------------------------------------------- -->
+    <button mat-icon-button (click)="openDialog()" class="d-flex">
+      <i-tabler name="search" class="icon-20 d-flex"></i-tabler>
+    </button>
+
+    <div class="d-none d-lg-flex">
+      <!-- --------------------------------------------------------------- -->
+      <!--  Links -->
+      <!-- --------------------------------------------------------------- -->
+      <button
+        mat-button
+        [matMenuTriggerFor]="appsmenu"
+        aria-label="Notifications"
+      >
+        <div class="d-flex align-items-center">
+          Apps <i-tabler name="chevron-down" class="icon-16 m-l-4"></i-tabler>
+        </div>
+      </button>
+      <mat-menu #appsmenu="matMenu" class="apps-dd cardWithShadow">
+        <div class="row">
+          <div class="col-sm-8 b-r-1 p-r-0">
+            <div class="p-32 p-b-0">
+              <div class="row">
+                @for(appdd of apps; track appdd.title) {
+                <div class="col-sm-6 text-hover-primary">
+                  <a
+                    [routerLink]="[appdd.link]"
+                    class="d-flex align-items-center text-decoration-none m-b-24"
+                  >
+                    <span
+                      class="text-primary bg-light rounded icon-40 d-flex align-items-center justify-content-center"
+                    >
+                      <img [src]="appdd.img" width="20" />
+                    </span>
+
+                    <div class="m-l-16">
+                      <h5
+                        class="f-s-14 f-w-600 m-0 textprimary  hover-text"
+                      >
+                        {{ appdd.title }}
+                      </h5>
+                      <span class="text-body f-s-12">{{
+                        appdd.subtitle
+                      }}</span>
+                    </div>
+                  </a>
+                </div>
+                }
+              </div>
+            </div>
+            <div
+              class="b-t-1 p-24 d-none d-lg-flex align-items-center justify-content-between"
+            >
+              <span
+                class="d-flex align-items-center  f-s-16 f-w-500"
+              >
+                <i-tabler name="help" class="icon-20 m-r-8"></i-tabler
+                >Frequently Asked Questions
+              </span>
+              <a
+                [routerLink]="['/theme-pages/faq']"
+                mat-flat-button
+                color="primary"
+                >Check</a
+              >
+            </div>
+          </div>
+          <div class="col-sm-4">
+            <div class="p-x-16 p-y-32">
+              <h4 class="f-s-18 f-w-600  m-b-16">Quick Links</h4>
+              @for(quicklink of quicklinks; track quicklink.title) {
+              <div class="text-hover-primary">
+                <a
+                  [routerLink]="[quicklink.link]"
+                  class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8"
+                  >{{ quicklink.title }}</a
+                >
+              </div>
+              }
+            </div>
+          </div>
+        </div>
+      </mat-menu>
+      <a mat-button [routerLink]="['/apps/chat']">Chat</a>
+      <a mat-button [routerLink]="['/apps/calendar']">Calendar</a>
+      <a mat-button [routerLink]="['/apps/email/inbox']">Email</a>
+    </div>
+
+    <span class="flex-1-auto"></span>
+
+    <!-- Mobile Menu -->
+    <button
+      mat-icon-button
+      (click)="toggleMobileFilterNav.emit()"
+      class="d-flex d-lg-none justify-content-center"
+    >
+      <i-tabler name="grid-dots" class="icon-20 d-flex"></i-tabler>
+    </button>
+
+    <!-- --------------------------------------------------------------- -->
+    <!-- langugage Dropdown -->
+    <!-- --------------------------------------------------------------- -->
+    <button [matMenuTriggerFor]="flags" mat-icon-button class="m-r-5">
+      <img
+        [src]="selectedLanguage.icon"
+        class="rounded-circle object-cover icon-20"
+      />
+    </button>
+    <mat-menu #flags="matMenu" class="cardWithShadow">
+      @for(lang of languages; track lang.icon) {
+      <button mat-menu-item (click)="changeLanguage(lang)">
+        <div class="d-flex align-items-center">
+          <img
+            [src]="lang.icon"
+            class="rounded-circle object-cover m-r-8 icon-20"
+          />
+          <span class=" f-s-14">{{ lang.language }}</span>
+        </div>
+      </button>
+      }
+    </mat-menu>
+
+    @if(options.theme=='light'){
+      <button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('dark')" >
+        <i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
+      </button>
+      }@else{
+      <button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('light')">
+        <i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
+      </button>
+    }
+
+    <!-- --------------------------------------------------------------- -->
+    <!-- Notification Dropdown -->
+    <!-- --------------------------------------------------------------- -->
+    <button
+      mat-icon-button matBadge="5"
+      [matMenuTriggerFor]="notificationmenu"
+      aria-label="Notifications" class="m-x-5 notification-badge"
+    >
+      <i-tabler
+        class="d-flex"
+        name="bell"
+      ></i-tabler>
+    </button>
+    <mat-menu
+      #notificationmenu="matMenu"
+      xPosition="before"
+      class="topbar-dd cardWithShadow"
+    >
+      <div class="d-flex align-items-center p-x-32 p-y-16">
+        <h6 class="f-s-16 f-w-600 m-0 ">Notifications</h6>
+        <span class="m-l-auto">
+          <span class="bg-primary text-white p-x-8 p-y-4 f-w-500 rounded f-s-12"
+            >5 new</span
+          >
+        </span>
+      </div>
+      @for(notification of notifications; track notification.title) {
+      <button mat-menu-item class="p-x-32 p-y-16">
+        <div class="d-flex align-items-center">
+          <img [src]="notification.img" class="rounded-circle" width="48" />
+          <div class="m-l-16">
+            <h5 class="f-s-14 f-w-600 m-0 ">
+              {{ notification.title }}
+            </h5>
+            <span>{{ notification.subtitle }}</span>
+          </div>
+        </div>
+      </button>
+      }
+
+      <div class="p-y-12 p-x-32">
+        <button mat-stroked-button color="primary" class="w-100">
+          See all notifications
+        </button>
+      </div>
+    </mat-menu>
+
+    <!-- --------------------------------------------------------------- -->
+    <!-- profile Dropdown -->
+    <!-- --------------------------------------------------------------- -->
+    <button
+      mat-icon-button
+      [matMenuTriggerFor]="profilemenu"
+      aria-label="Notifications"
+    >
+      <img
+        src="/assets/images/profile/user-1.jpg"
+        class="rounded-circle object-cover icon-35 profile-dd"
+        width="35"
+      />
+    </button>
+    <mat-menu
+      #profilemenu="matMenu"
+      xPosition="before"
+      class="topbar-dd cardWithShadow"
+    >
+      <div class="p-x-32 p-y-16">
+        <h6 class="f-s-16 f-w-600 m-0 ">User Profile</h6>
+
+        <div class="d-flex align-items-center p-b-24 b-b-1 m-t-16">
+          <img
+            src="/assets/images/profile/user-1.jpg"
+            class="rounded-circle"
+            width="95"
+          />
+          <div class="m-l-16">
+            <h6 class="f-s-14 f-w-600 m-0 ">Mathew Anderson</h6>
+            <span class="f-s-14 d-block m-b-4">Designer</span>
+            <span class="d-flex align-items-center">
+              <i-tabler name="mail" class="icon-15 m-r-4"></i-tabler>
+              info&#64;modernize.com
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="p-x-32">
+        @for(profile of profiledd; track profile.title) {
+        <a
+          class="p-y-16 text-decoration-none d-block text-hover-primary"
+          [routerLink]="[profile.link]"
+        >
+          <div class="d-flex align-items-center">
+            <button
+              mat-mini-fab
+              class="text-primary bg-light-primary shadow-none rounded"
+            >
+              <img [src]="profile.img" width="20" />
+            </button>
+
+            <div class="m-l-16">
+              <h5
+                class="f-s-14 f-w-600 m-0 textprimary  hover-text"
+              >
+                {{ profile.title }}
+              </h5>
+              <span class="f-s-14 text-body">{{ profile.subtitle }}</span>
+            </div>
+          </div>
+        </a>
+        }
+
+        <!-- upgrade -->
+        <div
+          class="p-24 overflow-hidden bg-light-primary rounded position-relative m-y-16"
+        >
+          <div class="d-flex align-items-center">
+            <div>
+              <h5 class="f-s-18 m-0 f-w-600 m-b-12 ">
+                Unlimited <br />
+                Access
+              </h5>
+              <button mat-flat-button color="primary">Upgrade</button>
+            </div>
+            <div class="m-l-auto">
+              <img
+                src="/assets/images/backgrounds/unlimited-bg.png"
+                alt="upgrade-bg"
+                class="upgrade-bg"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-y-12 p-x-32">
+        <a
+          [routerLink]="['/authentication/login']"
+          mat-stroked-button
+          color="primary"
+          class="w-100"
+          >Logout</a
+        >
+      </div>
+    </mat-menu>
+  </div>
+</mat-toolbar>

Web/src/app/layouts/full/horizontal/header/header.component.ts

@@ -0,0 +1,292 @@
+import { Component, Output, EventEmitter, Input } from '@angular/core';
+import { CoreService } from '../../../../services/core.service';
+import { MatDialog } from '@angular/material/dialog';
+import { navItems } from '../../vertical/sidebar/sidebar-data';
+import { TranslateService } from '@ngx-translate/core';
+import { RouterModule } from '@angular/router';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { MaterialModule } from '../../../../material.module';
+import { BrandingComponent } from '../../vertical/sidebar/branding.component';
+import { FormsModule } from '@angular/forms';
+import { AppSettings } from '../../../../config';
+
+interface notifications {
+  id: number;
+  img: string;
+  title: string;
+  subtitle: string;
+}
+
+interface profiledd {
+  id: number;
+  img: string;
+  title: string;
+  subtitle: string;
+  link: string;
+}
+
+interface apps {
+  id: number;
+  img: string;
+  title: string;
+  subtitle: string;
+  link: string;
+}
+
+interface quicklinks {
+  id: number;
+  title: string;
+  link: string;
+}
+
+@Component({
+    selector: 'app-horizontal-header',
+    imports: [RouterModule, TablerIconsModule, MaterialModule, BrandingComponent],
+    templateUrl: './header.component.html'
+})
+export class AppHorizontalHeaderComponent {
+  @Input() showToggle = true;
+  @Input() toggleChecked = false;
+  @Output() toggleMobileNav = new EventEmitter<void>();
+  @Output() toggleMobileFilterNav = new EventEmitter<void>();
+  @Output() toggleCollapsed = new EventEmitter<void>();
+
+  showFiller = false;
+
+  public selectedLanguage: any = {
+    language: 'English',
+    code: 'en',
+    type: 'US',
+    icon: '/assets/images/flag/icon-flag-en.svg',
+  };
+
+  public languages: any[] = [
+    {
+      language: 'English',
+      code: 'en',
+      type: 'US',
+      icon: '/assets/images/flag/icon-flag-en.svg',
+    },
+    {
+      language: 'Español',
+      code: 'es',
+      icon: '/assets/images/flag/icon-flag-es.svg',
+    },
+    {
+      language: 'Français',
+      code: 'fr',
+      icon: '/assets/images/flag/icon-flag-fr.svg',
+    },
+    {
+      language: 'German',
+      code: 'de',
+      icon: '/assets/images/flag/icon-flag-de.svg',
+    },
+  ];
+
+  @Output() optionsChange = new EventEmitter<AppSettings>();
+
+  constructor(
+    private settings: CoreService,
+    private vsidenav: CoreService,
+    public dialog: MatDialog,
+    private translate: TranslateService
+  ) {
+    translate.setDefaultLang('en');
+    this.options = this.settings.getOptions();
+  }
+  options: AppSettings;
+
+  openDialog() {
+    const dialogRef = this.dialog.open(AppHorizontalSearchDialogComponent);
+
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log(`Dialog result: ${result}`);
+    });
+  }
+
+  private emitOptions() {
+    this.optionsChange.emit(this.options);
+  }
+
+  setlightDark(theme: string) {
+    this.options.theme = theme;
+    this.emitOptions();
+  }
+
+  changeLanguage(lang: any): void {
+    this.translate.use(lang.code);
+    this.selectedLanguage = lang;
+  }
+
+  notifications: notifications[] = [
+    {
+      id: 1,
+      img: '/assets/images/profile/user-1.jpg',
+      title: 'Roman Joined thes Team!',
+      subtitle: 'Congratulate him',
+    },
+    {
+      id: 2,
+      img: '/assets/images/profile/user-2.jpg',
+      title: 'New message received',
+      subtitle: 'Salma sent you new message',
+    },
+    {
+      id: 3,
+      img: '/assets/images/profile/user-3.jpg',
+      title: 'New Payment received',
+      subtitle: 'Check your earnings',
+    },
+    {
+      id: 4,
+      img: '/assets/images/profile/user-4.jpg',
+      title: 'Jolly completed tasks',
+      subtitle: 'Assign her new tasks',
+    },
+    {
+      id: 5,
+      img: '/assets/images/profile/user-5.jpg',
+      title: 'Roman Joined the Team!',
+      subtitle: 'Congratulate him',
+    },
+  ];
+
+  profiledd: profiledd[] = [
+    {
+      id: 1,
+      img: '/assets/images/svgs/icon-account.svg',
+      title: 'My Profile',
+      subtitle: 'Account Settings',
+      link: '/',
+    },
+    {
+      id: 2,
+      img: '/assets/images/svgs/icon-inbox.svg',
+      title: 'My Inbox',
+      subtitle: 'Messages & Email',
+      link: '/apps/email/inbox',
+    },
+    {
+      id: 3,
+      img: '/assets/images/svgs/icon-tasks.svg',
+      title: 'My Tasks',
+      subtitle: 'To-do and Daily Tasks',
+      link: '/apps/taskboard',
+    },
+  ];
+
+  apps: apps[] = [
+    {
+      id: 1,
+      img: '/assets/images/svgs/icon-dd-chat.svg',
+      title: 'Chat Application',
+      subtitle: 'Messages & Emails',
+      link: '/apps/chat',
+    },
+    {
+      id: 2,
+      img: '/assets/images/svgs/icon-dd-cart.svg',
+      title: 'eCommerce App',
+      subtitle: 'Buy a Product',
+      link: '/apps/email/inbox',
+    },
+    {
+      id: 3,
+      img: '/assets/images/svgs/icon-dd-invoice.svg',
+      title: 'Invoice App',
+      subtitle: 'Get latest invoice',
+      link: '/apps/invoice',
+    },
+    {
+      id: 4,
+      img: '/assets/images/svgs/icon-dd-date.svg',
+      title: 'Calendar App',
+      subtitle: 'Get Dates',
+      link: '/apps/calendar',
+    },
+    {
+      id: 5,
+      img: '/assets/images/svgs/icon-dd-mobile.svg',
+      title: 'Contact Application',
+      subtitle: '2 Unsaved Contacts',
+      link: '/apps/contacts',
+    },
+    {
+      id: 6,
+      img: '/assets/images/svgs/icon-dd-lifebuoy.svg',
+      title: 'Tickets App',
+      subtitle: 'Create new ticket',
+      link: '/apps/tickets',
+    },
+    {
+      id: 7,
+      img: '/assets/images/svgs/icon-dd-message-box.svg',
+      title: 'Email App',
+      subtitle: 'Get new emails',
+      link: '/apps/email/inbox',
+    },
+    {
+      id: 8,
+      img: '/assets/images/svgs/icon-dd-application.svg',
+      title: 'Courses',
+      subtitle: 'Create new course',
+      link: '/apps/courses',
+    },
+  ];
+
+  quicklinks: quicklinks[] = [
+    {
+      id: 1,
+      title: 'Pricing Page',
+      link: '/theme-pages/pricing',
+    },
+    {
+      id: 2,
+      title: 'Authentication Design',
+      link: '/authentication/login',
+    },
+    {
+      id: 3,
+      title: 'Register Now',
+      link: '/authentication/side-register',
+    },
+    {
+      id: 4,
+      title: '404 Error Page',
+      link: '/authentication/error',
+    },
+    {
+      id: 5,
+      title: 'Notes App',
+      link: '/apps/notes',
+    },
+    {
+      id: 6,
+      title: 'Employee App',
+      link: '/apps/employee',
+    },
+    {
+      id: 7,
+      title: 'Todo Application',
+      link: '/apps/todo',
+    },
+    {
+      id: 8,
+      title: 'Treeview',
+      link: '/theme-pages/treeview',
+    },
+  ];
+}
+
+@Component({
+    selector: 'app-search-dialog',
+    imports: [RouterModule, MaterialModule, TablerIconsModule, FormsModule],
+    templateUrl: 'search-dialog.component.html'
+})
+export class AppHorizontalSearchDialogComponent {
+  searchText: string = '';
+  navItems = navItems;
+
+  navItemsData = navItems.filter((navitem) => navitem.displayName);
+}

Web/src/app/layouts/full/horizontal/header/search-dialog.component.html

@@ -0,0 +1,39 @@
+<div class="p-24 p-b-0">
+  <div class="row">
+    <div class="col-10">
+      <mat-form-field
+        appearance="outline"
+        color="primary"
+        class="hide-hint w-100"
+      >
+        <input matInput placeholder="Search here" [(ngModel)]="searchText" />
+      </mat-form-field>
+    </div>
+    <div class="col-2 d-flex justify-content-end">
+      <button
+        mat-icon-button
+        mat-dialog-close
+        class="d-flex justify-content-center"
+      >
+        <i-tabler name="x" class="icon-18 d-flex"></i-tabler>
+      </button>
+    </div>
+  </div>
+</div>
+<mat-divider></mat-divider>
+<mat-dialog-content class="mat-typography search-dialog">
+  <h4 class="f-s-18 f-w-500  m-b-16">Quick Page Links</h4>
+
+  @for(item of navItemsData; track item.route) {
+  <a
+    [routerLink]="[item.route]"
+    mat-dialog-close
+    class="p-y-12 text-decoration-none d-block"
+  >
+    <h5 class="f-s-14 f-w-500 d-block  m-0">
+      {{ item.displayName }}
+    </h5>
+    <span class="f-s-12 f-s-16">{{ item.route }}</span>
+  </a>
+  }
+</mat-dialog-content>

Web/src/app/layouts/full/horizontal/sidebar/nav-item/nav-item.component.html

@@ -0,0 +1,24 @@
+@if(!item.navCap) {
+<a
+  class="cursor-pointer menuLink"
+  (click)="onItemSelected(item)"
+  [ngClass]="{
+    activeMenu: item.route ? router.isActive(item.route, true) : false
+  }"
+>
+  <i-tabler class="routeIcon icon-18" name="{{ item.iconName }}"></i-tabler>
+  {{ item.displayName }}
+  @if(item.children && item.children.length) {
+  <span class="down-icon d-flex m-l-auto">
+    <mat-icon> expand_more </mat-icon>
+  </span>
+  }
+</a>
+} @if(item.children){
+<div class="childBox">
+  @for(child of item.children; track child) {
+  <app-horizontal-nav-item [item]="child" class="ddmenu">
+  </app-horizontal-nav-item>
+  }
+</div>
+}

Web/src/app/layouts/full/horizontal/sidebar/nav-item/nav-item.component.ts

@@ -0,0 +1,33 @@
+import {
+  Component,
+  OnInit,
+  Input,
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { NavService } from '../../../../../services/nav.service';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+    selector: 'app-horizontal-nav-item',
+    imports: [TablerIconsModule, CommonModule, MatIconModule],
+    templateUrl: './nav-item.component.html'
+})
+export class AppHorizontalNavItemComponent implements OnInit {
+  @Input() depth: any;
+  @Input() item: any;
+
+  constructor(public navService: NavService, public router: Router) {
+    if (this.depth === undefined) {
+      this.depth = 0;
+    }
+  }
+
+  ngOnInit() { }
+  onItemSelected(item: any) {
+    if (!item.children || !item.children.length) {
+      this.router.navigate([item.route]);
+    }
+  }
+}

Web/src/app/layouts/full/horizontal/sidebar/sidebar-data.ts

@@ -0,0 +1,633 @@
+import { NavItem } from '../../vertical/sidebar/nav-item/nav-item';
+
+export const navItems: NavItem[] = [
+  {
+    navCap: 'Home',
+  },
+  {
+    displayName: 'Dashboards',
+    iconName: 'home',
+    route: 'dashboards',
+    children: [
+      {
+        displayName: 'Analytical',
+        iconName: 'point',
+        route: 'dashboards/dashboard1',
+      },
+      {
+        displayName: 'eCommerce',
+        iconName: 'point',
+        route: 'dashboards/dashboard2',
+      },
+    ],
+  },
+  {
+    displayName: 'Frontend pages',
+    iconName: 'app-window',
+    route: 'front-pages',
+    children: [
+      {
+        displayName: 'Home Page',
+        iconName: 'point',
+        route: 'front-pages/homepage',
+      } ,
+      {
+        displayName: 'About Us',
+        iconName: 'point',
+        route: 'front-pages/about',
+      } ,
+      {
+        displayName: 'Blog',
+        iconName: 'point',
+        route: 'front-pages/blog',
+      } ,
+      {
+        displayName: 'Blog Details',
+        iconName: 'point',
+        route: 'front-pages/blog-details',
+      } ,
+      {
+        displayName: 'Portfolio',
+        iconName: 'point',
+        route: 'front-pages/portfolio',
+      },
+      {
+        displayName: 'Pricing',
+        iconName: 'point',
+        route: 'front-pages/pricing',
+      },
+      {
+        displayName: 'Contact',
+        iconName: 'point',
+        route: 'front-pages/contact',
+      }
+    ]
+  },
+  {
+    displayName: 'Apps',
+    iconName: 'apps',
+    route: 'apps',
+    ddType: '',
+    children: [
+      {
+        displayName: 'Chat',
+        iconName: 'point',
+        route: 'apps/chat',
+      },
+      {
+        displayName: 'Calendar',
+        iconName: 'point',
+        route: 'apps/calendar',
+      },
+      {
+        displayName: 'Email',
+        iconName: 'point',
+        route: 'apps/email/inbox',
+      },
+      {
+        displayName: 'Contacts',
+        iconName: 'point',
+        route: 'apps/contacts',
+      },
+      {
+        displayName: 'Contact List',
+        iconName: 'point',
+        route: 'apps/contact-list',
+      },
+      {
+        displayName: 'Courses',
+        iconName: 'point',
+        route: 'apps/courses',
+      },
+      {
+        displayName: 'Employee',
+        iconName: 'point',
+        route: 'apps/employee',
+      },
+      {
+        displayName: 'Notes',
+        iconName: 'point',
+        route: 'apps/notes',
+      },
+      {
+        displayName: 'Tickets',
+        iconName: 'point',
+        route: 'apps/tickets',
+      },
+      {
+        displayName: 'Invoice',
+        iconName: 'point',
+        route: 'apps/invoice',
+      },
+      {
+        displayName: 'ToDo',
+        iconName: 'point',
+        route: 'apps/todo',
+      },
+      {
+        displayName: 'Kanban',
+        iconName: 'point',
+        route: 'apps/kanban',
+      },
+      {
+        displayName: 'Blog',
+        iconName: 'point',
+        route: 'apps/blog',
+        children: [
+          {
+            displayName: 'Post',
+            iconName: 'point',
+            route: 'apps/blog/post',
+          },
+          {
+            displayName: 'Detail',
+            iconName: 'point',
+            route: 'apps/blog/detail/Early Black Friday Amazon deals: cheap TVs, headphones, laptops',
+          },
+        ],
+      },
+      {
+        displayName: 'User Profile',
+        iconName: 'point',
+        route: 'apps/profile-details',
+        children: [
+          {
+            displayName: 'Profile',
+            iconName: 'point',
+            route: 'apps/profile-details/profile',
+          },
+          {
+            displayName: 'Followers',
+            iconName: 'point',
+            route: 'apps/profile-details/followers',
+          },
+          {
+            displayName: 'Friends',
+            iconName: 'point',
+            route: 'apps/profile-details/friends',
+          },
+          {
+            displayName: 'Gellary',
+            iconName: 'point',
+            route: 'apps/profile-details/gallery',
+          },
+        ],
+      },
+      {
+        displayName: 'Ecommerce',
+        iconName: 'point',
+        route: 'apps/product',
+        children: [
+          {
+            displayName: 'Product List',
+            iconName: 'point',
+            route: 'apps/product/product-list',
+          },
+          {
+            displayName: 'Add Product',
+            iconName: 'point',
+            route: 'apps/product/add-product',
+          },
+          {
+            displayName: 'Edit Product',
+            iconName: 'point',
+            route: 'apps/product/edit-product',
+          },
+          {
+            displayName: 'Shop',
+            iconName: 'point',
+            route: 'apps/product/shop',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    displayName: 'Ui',
+    iconName: 'components',
+    route: 'ui-components',
+    ddType: '',
+    children: [
+      {
+        displayName: 'Badge',
+        iconName: 'point',
+        route: 'ui-components/badge',
+      },
+      {
+        displayName: 'Expansion Panel',
+        iconName: 'point',
+        route: 'ui-components/expansion',
+      },
+      {
+        displayName: 'Chips',
+        iconName: 'point',
+        route: 'ui-components/chips',
+      },
+      {
+        displayName: 'Dialog',
+        iconName: 'point',
+        route: 'ui-components/dialog',
+      },
+      {
+        displayName: 'Lists',
+        iconName: 'point',
+        route: 'ui-components/lists',
+      },
+      {
+        displayName: 'Divider',
+        iconName: 'point',
+        route: 'ui-components/divider',
+      },
+      {
+        displayName: 'Menu',
+        iconName: 'point',
+        route: 'ui-components/menu',
+      },
+      {
+        displayName: 'Paginator',
+        iconName: 'point',
+        route: 'ui-components/paginator',
+      },
+      {
+        displayName: 'Progress Bar',
+        iconName: 'point',
+        route: 'ui-components/progress',
+      },
+      {
+        displayName: 'Progress Spinner',
+        iconName: 'point',
+        route: 'ui-components/progress-spinner',
+      },
+      {
+        displayName: 'Ripples',
+        iconName: 'point',
+        route: 'ui-components/ripples',
+      },
+      {
+        displayName: 'Slide Toggle',
+        iconName: 'point',
+        route: 'ui-components/slide-toggle',
+      },
+      {
+        displayName: 'Slider',
+        iconName: 'point',
+        route: 'ui-components/slider',
+      },
+      {
+        displayName: 'Snackbar',
+        iconName: 'point',
+        route: 'ui-components/snackbar',
+      },
+      {
+        displayName: 'Tabs',
+        iconName: 'point',
+        route: 'ui-components/tabs',
+      },
+      {
+        displayName: 'Toolbar',
+        iconName: 'point',
+        route: 'ui-components/toolbar',
+      },
+      {
+        displayName: 'Tooltips',
+        iconName: 'point',
+        route: 'ui-components/tooltips',
+      },
+    ],
+  },
+  {
+    displayName: 'Pages',
+    iconName: 'clipboard',
+    route: 'theme-pages',
+    ddType: '',
+    children: [
+      {
+        displayName: 'Treeview',
+        iconName: 'point',
+        route: 'theme-pages/treeview',
+      },
+      {
+        displayName: 'Pricing',
+        iconName: 'point',
+        route: 'theme-pages/pricing',
+      },
+      {
+        displayName: 'Account Setting',
+        iconName: 'point',
+        route: 'theme-pages/account-setting',
+      },
+      {
+        displayName: 'FAQ',
+        iconName: 'point',
+        route: 'theme-pages/faq',
+      },
+      {
+        displayName: 'Landingpage',
+        iconName: 'point',
+        route: 'landingpage',
+      },
+      {
+        displayName: 'Widgets',
+        iconName: 'point',
+        route: 'widgets',
+        children: [
+          {
+            displayName: 'Cards',
+            iconName: 'point',
+            route: 'widgets/cards',
+          },
+          {
+            displayName: 'Banners',
+            iconName: 'point',
+            route: 'widgets/banners',
+          },
+          {
+            displayName: 'Charts',
+            iconName: 'point',
+            route: 'widgets/charts',
+          },
+        ],
+      },
+      {
+        displayName: 'Charts',
+        iconName: 'point',
+        route: 'charts',
+        children: [
+          {
+            displayName: 'Line',
+            iconName: 'point',
+            route: '/charts/line',
+          },
+          {
+            displayName: 'Gredient',
+            iconName: 'point',
+            route: '/charts/gredient',
+          },
+          {
+            displayName: 'Area',
+            iconName: 'point',
+            route: '/charts/area',
+          },
+          {
+            displayName: 'Candlestick',
+            iconName: 'point',
+            route: '/charts/candlestick',
+          },
+          {
+            displayName: 'Column',
+            iconName: 'point',
+            route: '/charts/column',
+          },
+          {
+            displayName: 'Doughnut & Pie',
+            iconName: 'point',
+            route: '/charts/doughnut-pie',
+          },
+          {
+            displayName: 'Radialbar & Radar',
+            iconName: 'point',
+            route: '/charts/radial-radar',
+          },
+        ],
+      },
+      {
+        displayName: 'Auth',
+        iconName: 'point',
+        route: '/',
+        children: [
+          {
+            displayName: 'Login',
+            iconName: 'point',
+            route: '/authentication',
+            children: [
+              {
+                displayName: 'Login 1',
+                iconName: 'point',
+                route: '/authentication/login',
+              },
+              {
+                displayName: 'Boxed Login',
+                iconName: 'point',
+                route: '/authentication/boxed-login',
+              },
+            ],
+          },
+          {
+            displayName: 'Register',
+            iconName: 'point',
+            route: '/authentication',
+            children: [
+              {
+                displayName: 'Login 1',
+                iconName: 'point',
+                route: '/authentication/side-register',
+              },
+              {
+                displayName: 'Boxed Login',
+                iconName: 'point',
+                route: '/authentication/boxed-register',
+              },
+            ],
+          },
+          {
+            displayName: 'Forgot Password',
+            iconName: 'point',
+            route: '/authentication',
+            children: [
+              {
+                displayName: 'Side Forgot Password',
+                iconName: 'point',
+                route: '/authentication/side-forgot-pwd',
+              },
+              {
+                displayName: 'Boxed Forgot Password',
+                iconName: 'point',
+                route: '/authentication/boxed-forgot-pwd',
+              },
+            ],
+          },
+          {
+            displayName: 'Two Steps',
+            iconName: 'point',
+            route: '/authentication',
+            children: [
+              {
+                displayName: 'Side Two Steps',
+                iconName: 'point',
+                route: '/authentication/side-two-steps',
+              },
+              {
+                displayName: 'Boxed Two Steps',
+                iconName: 'point',
+                route: '/authentication/boxed-two-steps',
+              },
+            ],
+          },
+          {
+            displayName: 'Error',
+            iconName: 'point',
+            route: '/authentication/error',
+          },
+          {
+            displayName: 'Maintenance',
+            iconName: 'point',
+            route: '/authentication/maintenance',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    displayName: 'Forms',
+    iconName: 'file-description',
+    route: 'forms',
+    ddType: '',
+    children: [
+      {
+        displayName: 'Form elements',
+        iconName: 'point',
+        route: 'forms/forms-elements',
+        children: [
+          {
+            displayName: 'Autocomplete',
+            iconName: 'point',
+            route: 'forms/forms-elements/autocomplete',
+          },
+          {
+            displayName: 'Button',
+            iconName: 'point',
+            route: 'forms/forms-elements/button',
+          },
+          {
+            displayName: 'Checkbox',
+            iconName: 'point',
+            route: 'forms/forms-elements/checkbox',
+          },
+          {
+            displayName: 'Radio',
+            iconName: 'point',
+            route: 'forms/forms-elements/radio',
+          },
+          {
+            displayName: 'Datepicker',
+            iconName: 'point',
+            route: 'forms/forms-elements/datepicker',
+          },
+        ],
+      },
+      {
+        displayName: 'Form Layouts',
+        iconName: 'point',
+        route: '/forms/form-layouts',
+      },
+      {
+        displayName: 'Form Horizontal',
+        iconName: 'point',
+        route: '/forms/form-horizontal',
+      },
+      {
+        displayName: 'Form Vertical',
+        iconName: 'point',
+        route: '/forms/form-vertical',
+      },
+      {
+        displayName: 'Form Wizard',
+        iconName: 'point',
+        route: '/forms/form-wizard',
+      },
+      {
+        displayName: 'Toastr',
+        iconName: 'point',
+        route: '/forms/form-toastr',
+      },
+      {
+        displayName: 'Editor',
+        iconName: 'point',
+        route: '/forms/form-editor',
+      },
+    ],
+  },
+  {
+    displayName: 'Tables',
+    iconName: 'layout',
+    route: 'tables',
+    ddType: '',
+    children: [
+      {
+        displayName: 'Basic Table',
+        iconName: 'point',
+        route: 'tables/basic-table',
+      },
+      {
+        displayName: 'Dynamic Table',
+        iconName: 'point',
+        route: 'tables/dynamic-table',
+      },
+      {
+        displayName: 'Expand Table',
+        iconName: 'point',
+        route: 'tables/expand-table',
+      },
+      {
+        displayName: 'Filterable Table',
+        iconName: 'point',
+        route: 'tables/filterable-table',
+      },
+      {
+        displayName: 'Footer Row Table',
+        iconName: 'point',
+        route: 'tables/footer-row-table',
+      },
+      {
+        displayName: 'HTTP Table',
+        iconName: 'point',
+        route: 'tables/http-table',
+      },
+      {
+        displayName: 'Mix Table',
+        iconName: 'point',
+        route: 'tables/mix-table',
+      },
+      {
+        displayName: 'Multi Header Footer',
+        iconName: 'point',
+        route: 'tables/multi-header-footer-table',
+      },
+      {
+        displayName: 'Pagination Table',
+        iconName: 'point',
+        route: 'tables/pagination-table',
+      },
+      {
+        displayName: 'Row Context Table',
+        iconName: 'point',
+        route: 'tables/row-context-table',
+      },
+      {
+        displayName: 'Selection Table',
+        iconName: 'point',
+        route: 'tables/selection-table',
+      },
+      {
+        displayName: 'Sortable Table',
+        iconName: 'point',
+        route: 'tables/sortable-table',
+      },
+      {
+        displayName: 'Sticky Column',
+        iconName: 'point',
+        route: 'tables/sticky-column-table',
+      },
+      {
+        displayName: 'Sticky Header Footer',
+        iconName: 'point',
+        route: 'tables/sticky-header-footer-table',
+      },
+      {
+        displayName: 'Data table',
+        iconName: 'point',
+        route: '/datatable/kichen-sink',
+      },
+    ],
+  },
+];

Web/src/app/layouts/full/horizontal/sidebar/sidebar.component.html

@@ -0,0 +1,16 @@
+@if(mobileQuery.matches) {
+<div class="horizontal-sidebar p-y-8 p-y-8 b-b-1">
+  <div class="container">
+    <div>
+      <div class="horizontal-navbar hstack align-items-center">
+        @for(item of navItems; track item) {
+        <app-horizontal-nav-item [item]="item" class="parentBox {{ item.ddType }}" [ngClass]="{
+                pactive: item.route == parentActive ? 'pactive' : ''
+              }">
+        </app-horizontal-nav-item>
+        }
+      </div>
+    </div>
+  </div>
+</div>
+}

Web/src/app/layouts/full/horizontal/sidebar/sidebar.component.ts

@@ -0,0 +1,48 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  ChangeDetectorRef,
+  OnChanges,
+} from '@angular/core';
+import { navItems } from './sidebar-data';
+import { Router } from '@angular/router';
+import { NavService } from '../../../../services/nav.service';
+import { MediaMatcher } from '@angular/cdk/layout';
+import { AppHorizontalNavItemComponent } from './nav-item/nav-item.component';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-horizontal-sidebar',
+  imports: [AppHorizontalNavItemComponent, CommonModule],
+  templateUrl: './sidebar.component.html',
+})
+export class AppHorizontalSidebarComponent implements OnInit {
+  navItems = navItems;
+  parentActive = '';
+
+  mobileQuery: MediaQueryList;
+  private _mobileQueryListener: () => void;
+
+  constructor(
+    public navService: NavService,
+    public router: Router,
+    media: MediaMatcher,
+    changeDetectorRef: ChangeDetectorRef
+  ) {
+    this.mobileQuery = media.matchMedia('(min-width: 1100px)');
+    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
+    this.mobileQuery.addListener(this._mobileQueryListener);
+    this.router.events.subscribe(
+      () => (this.parentActive = this.router.url.split('/')[1])
+    );
+  }
+
+  ngOnInit(): void {
+    this.parentActive = this.router.url.split('/')[1];
+
+    this.router.events.subscribe(() => {
+      this.parentActive = this.router.url.split('/')[1];
+    });
+  }
+}

Web/src/app/layouts/full/shared/breadcrumb/breadcrumb.component.html

@@ -0,0 +1,36 @@
+@if(pageInfo?.['title'] != 'Analytical' && pageInfo?.['title'] != 'eCommerce'){
+<div class="bg-light-primary rounded p-y-30 p-x-24 m-b-30 overflow-hidden">
+  <div class="row">
+    <div class="col-sm-8">
+      <h4 class="page-title m-0 f-s-20 f-w-600 m-b-16">
+        {{ pageInfo?.['title'] }}
+      </h4>
+      <div class="d-flex align-items-center overflow-hidden">
+        <ul class="breadcrumb">
+          @for (url of pageInfo?.['urls']; track url.url;let index = $index,last
+          = $last ) { @if(!last){
+
+          <li class="breadcrumb-item" [routerLink]="url.url">
+            <a [routerLink]="url.url">{{ url.title }}</a>
+          </li>
+          }@else {
+          <li class="breadcrumb-item">
+            <i-tabler name="circle-filled" class="icon-8"></i-tabler>
+          </li>
+          <li class="breadcrumb-item active f-s-14">{{ url.title }}</li>
+          } }
+        </ul>
+      </div>
+    </div>
+    <div class="col-sm-4 text-right position-relative">
+      <div class="breadcrumb-icon">
+        <img
+          src="/assets/images/breadcrumb/ChatBc.png"
+          alt="breadcrumb"
+          width="165"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+}

Web/src/app/layouts/full/shared/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+import { Router, NavigationEnd, ActivatedRoute, Data } from '@angular/router';
+import { filter, map, mergeMap } from 'rxjs/operators';
+import { TablerIconsModule } from 'angular-tabler-icons';
+
+@Component({
+    selector: 'app-breadcrumb',
+    imports: [RouterModule, TablerIconsModule],
+    templateUrl: './breadcrumb.component.html',
+    styleUrls: []
+})
+export class AppBreadcrumbComponent {
+  // @Input() layout;
+  pageInfo: Data | any = Object.create(null);
+  myurl: any;
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private titleService: Title
+  ) {
+    this.myurl = this.router.url.slice(1).split('/');
+    this.router.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      .pipe(map(() => this.activatedRoute))
+      .pipe(
+        map((route) => {
+          while (route.firstChild) {
+            route = route.firstChild;
+          }
+          return route;
+        })
+      )
+      .pipe(filter((route) => route.outlet === 'primary'))
+      .pipe(mergeMap((route) => route.data))
+      // tslint:disable-next-line - Disables all
+      .subscribe((event) => {
+        // tslint:disable-next-line - Disables all
+        this.titleService.setTitle(event['title'] + ' - Angular 20');
+        this.pageInfo = event;
+      });
+  }
+}

Web/src/app/layouts/full/shared/customizer/customizer.component.html

@@ -0,0 +1,173 @@
+<div class="customizerNav">
+  <ng-scrollbar class="position-relative" style="height: calc(100vh - 85px)">
+    <div class="p-24">
+      <h6 class="f-s-16 f-w-600 f-s-16 m-b-16">Theme Option</h6>
+      <mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.theme" (change)="setDark()"
+        class="customizer-button-group gap-16" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
+        <mat-button-toggle [value]="'light'">
+          <div class="d-flex align-items-center f-w-500">
+            <i-tabler name="sun-high" class="d-flex m-r-8 fill-icon"></i-tabler>
+            Light
+          </div>
+        </mat-button-toggle>
+        <mat-button-toggle [value]="'dark'">
+          <div class="d-flex align-items-center f-w-500">
+            <i-tabler name="moon" class="d-flex m-r-8 fill-icon"></i-tabler>
+            Dark
+          </div>
+        </mat-button-toggle>
+      </mat-button-toggle-group>
+
+      <div>
+        <h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24 p-t-16">
+          Theme Colors
+        </h6>
+        <mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.activeTheme"
+          (change)="setColor($event.value)" class="customizer-button-group theme-colors two-row"
+          [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
+          <mat-button-toggle [value]="'blue_theme'">
+            <span class="theme-circle blue_theme" matTooltip="blue_theme" matTooltipClass="text-uppercase"
+              matTooltipPosition="above">
+              <i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
+            </span>
+          </mat-button-toggle>
+          <mat-button-toggle [value]="'aqua_theme'">
+            <span class="theme-circle aqua_theme" matTooltip="aqua_theme" matTooltipClass="text-uppercase"
+              matTooltipPosition="above">
+              <i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
+            </span>
+          </mat-button-toggle>
+          <mat-button-toggle [value]="'purple_theme'">
+            <span class="theme-circle purple_theme" matTooltip="purple_theme" matTooltipClass="text-uppercase"
+              matTooltipPosition="above">
+              <i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
+            </span>
+          </mat-button-toggle>
+
+          <mat-button-toggle [value]="'green_theme'">
+            <span class="theme-circle green_theme" matTooltip="green_theme" matTooltipClass="text-uppercase"
+              matTooltipPosition="above">
+              <i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
+            </span>
+          </mat-button-toggle>
+          <mat-button-toggle [value]="'cyan_theme'">
+            <span class="theme-circle cyan_theme" matTooltip="cyan_theme" matTooltipClass="text-uppercase"
+              matTooltipPosition="above">
+              <i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
+            </span>
+          </mat-button-toggle>
+          <mat-button-toggle [value]="'orange_theme'">
+            <span class="theme-circle orange_theme" matTooltip="orange_theme" matTooltipClass="text-uppercase"
+              matTooltipPosition="above">
+              <i-tabler name="check" class="icon-16 theme-icon"></i-tabler>
+            </span>
+          </mat-button-toggle>
+        </mat-button-toggle-group>
+      </div>
+
+      <h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24">
+        Theme Direction
+      </h6>
+
+      <mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.dir" (change)="setDir($event.value)"
+        class="customizer-button-group gap-16" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
+        <mat-button-toggle [value]="'ltr'">
+          <div class="d-flex align-items-center f-w-500">
+            <i-tabler name="text-direction-ltr" class="d-flex m-r-8 fill-icon"></i-tabler>
+            LTR
+          </div>
+        </mat-button-toggle>
+        <mat-button-toggle [value]="'rtl'">
+          <div class="d-flex align-items-center f-w-500">
+            <i-tabler name="text-direction-rtl" class="d-flex m-r-8 fill-icon"></i-tabler>
+            RTL
+          </div>
+        </mat-button-toggle>
+      </mat-button-toggle-group>
+
+      @if(!options.horizontal){
+      <div>
+        <h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24 p-t-16">
+          Sidebar type
+        </h6>
+
+        <mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.sidenavCollapsed"
+          (change)="setSidebar($event.value)" class="customizer-button-group gap-16"
+          [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
+          <mat-button-toggle [value]="false">
+            <div class="d-flex align-items-center f-w-500">
+              <i-tabler name="layout-sidebar-right" class="d-flex m-r-8 fill-icon"></i-tabler>
+              Full
+            </div>
+          </mat-button-toggle>
+          <mat-button-toggle [value]="true">
+            <div class="d-flex align-items-center f-w-500">
+              <i-tabler name="layout-sidebar" class="d-flex m-r-8 fill-icon"></i-tabler>
+              Minisidebar
+            </div>
+          </mat-button-toggle>
+        </mat-button-toggle-group>
+      </div>
+      }
+      <h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24 p-t-16">
+        Layout type
+      </h6>
+
+      <mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.horizontal"
+        class="customizer-button-group gap-16" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
+        <mat-button-toggle [value]="false">
+          <div class="d-flex align-items-center f-w-500">
+            <i-tabler name="layout-distribute-vertical" class="d-flex m-r-8 fill-icon"></i-tabler>
+            Vertical
+          </div>
+        </mat-button-toggle>
+        <mat-button-toggle [value]="true">
+          <div class="d-flex align-items-center f-w-500">
+            <i-tabler name="layout-distribute-horizontal" class="d-flex m-r-8 fill-icon"></i-tabler>
+            Horizontal
+          </div>
+        </mat-button-toggle>
+      </mat-button-toggle-group>
+
+      <h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24 p-t-16">
+        Card with
+      </h6>
+
+      <mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.cardBorder"
+        class="customizer-button-group gap-16" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
+        <mat-button-toggle [value]="false">
+          <div class="d-flex align-items-center f-w-500">
+            <i-tabler name="shadow" class="d-flex m-r-8 fill-icon"></i-tabler>
+            Shadow
+          </div>
+        </mat-button-toggle>
+        <mat-button-toggle [value]="true">
+          <div class="d-flex align-items-center f-w-500">
+            <i-tabler name="shadow-off" class="d-flex m-r-8 fill-icon"></i-tabler>
+            Border
+          </div>
+        </mat-button-toggle>
+      </mat-button-toggle-group>
+
+      <h6 class="f-s-16 f-w-600 f-s-16 m-b-16 m-t-24 p-t-16">
+        Container Option
+      </h6>
+
+      <mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="options.boxed"
+        class="customizer-button-group gap-16" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()">
+        <mat-button-toggle [value]="false">
+          <div class="d-flex align-items-center f-w-500">
+            <i-tabler name="layout-navbar" class="d-flex m-r-8 fill-icon"></i-tabler>
+            Full
+          </div>
+        </mat-button-toggle>
+        <mat-button-toggle [value]="true">
+          <div class="d-flex align-items-center f-w-500">
+            <i-tabler name="layout-sidebar" class="d-flex m-r-8 fill-icon"></i-tabler>
+            Boxed
+          </div>
+        </mat-button-toggle>
+      </mat-button-toggle-group>
+    </div>
+  </ng-scrollbar>
+</div>

Web/src/app/layouts/full/shared/customizer/customizer.component.scss

@@ -0,0 +1,4 @@
+.customizerNav {
+    width: 320px;
+}
+

Web/src/app/layouts/full/shared/customizer/customizer.component.ts

@@ -0,0 +1,61 @@
+import {
+  Component,
+  Output,
+  EventEmitter,
+  ViewEncapsulation,
+  signal,
+} from '@angular/core';
+import { AppSettings } from '../../../../config';
+import { CoreService } from '../../../../services/core.service';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { MaterialModule } from '../../../../material.module';
+import { FormsModule } from '@angular/forms';
+import { NgScrollbarModule } from 'ngx-scrollbar';
+
+@Component({
+  selector: 'app-customizer',
+  imports: [
+    TablerIconsModule,
+    MaterialModule,
+    FormsModule,
+    NgScrollbarModule,
+  ],
+  templateUrl: './customizer.component.html',
+  styleUrls: ['./customizer.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CustomizerComponent {
+
+  options: AppSettings;
+
+  @Output() optionsChange = new EventEmitter<AppSettings>();
+  hideSingleSelectionIndicator = signal(true);
+
+  constructor(private settings: CoreService) {
+    this.options = this.settings.getOptions();
+  }
+  setDark() {
+    this.settings.setOptions({ theme: 'dark' });
+    this.emitOptions();
+  }
+
+  setColor(color: string) {
+    this.settings.setOptions({ activeTheme: color });
+    this.emitOptions();
+  }
+
+  setDir(dir: 'ltr' | 'rtl') {
+    this.settings.setOptions({ dir: dir });
+    this.emitOptions();
+  }
+
+  setSidebar(sidenavOpened: boolean) {
+    this.settings.setOptions({ sidenavOpened: sidenavOpened });
+    this.emitOptions();
+  }
+
+  private emitOptions() {
+    this.optionsChange.emit(this.options);
+  }
+}
+

Web/src/app/layouts/full/vertical/header/header.component.html

@@ -0,0 +1,301 @@
+<mat-toolbar class="topbar">
+  <!-- --------------------------------------------------------------- -->
+  <!-- Desktop Menu -->
+  @if(showToggle) {
+  <button
+    mat-icon-button
+    (click)="toggleCollapsed.emit()"
+    class="d-flex justify-content-center"
+  >
+    <i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
+  </button>
+  }
+
+  <!-- Mobile Menu -->
+  @if(!showToggle) {
+  <button
+    mat-icon-button
+    (click)="toggleMobileNav.emit()"
+    class="d-flex justify-content-center"
+  >
+    <i-tabler name="menu-2" class="icon-20 d-flex"></i-tabler>
+  </button>
+  }
+  <!-- --------------------------------------------------------------- -->
+
+  <!-- --------------------------------------------------------------- -->
+  <!--  Search -->
+  <!-- --------------------------------------------------------------- -->
+  <button
+    mat-icon-button
+    (click)="openDialog()"
+    class="d-flex justify-content-center"
+  >
+    <i-tabler name="search" class="icon-20 d-flex"></i-tabler>
+  </button>
+
+  <div class="d-none d-lg-flex">
+    <!-- --------------------------------------------------------------- -->
+    <!--  Links -->
+    <!-- --------------------------------------------------------------- -->
+    <button
+      mat-button
+      [matMenuTriggerFor]="appsmenu"
+      aria-label="Notifications"
+    >
+      <div class="d-flex align-items-center">
+        Apps <i-tabler name="chevron-down" class="icon-16 m-l-4"></i-tabler>
+      </div>
+    </button>
+    <mat-menu #appsmenu="matMenu" class="apps-dd cardWithShadow">
+      <div class="row">
+        <div class="col-sm-8 b-r-1 p-r-0">
+          <div class="p-32 p-b-0">
+            <div class="row">
+              @for(appdd of apps; track appdd.title) {
+              <div class="col-sm-6 text-hover-primary">
+                <a
+                  [routerLink]="[appdd.link]"
+                  class="d-flex align-items-center text-decoration-none m-b-24"
+                >
+                  <span
+                    class="text-primary bg-light rounded icon-40 d-flex align-items-center justify-content-center"
+                  >
+                    <img [src]="appdd.img" width="20" />
+                  </span>
+
+                  <div class="m-l-16">
+                    <h5
+                      class="f-s-14 f-w-600 m-0 textprimary  hover-text"
+                    >
+                      {{ appdd.title }}
+                    </h5>
+                    <span class="f-s-12 text-body">{{ appdd.subtitle }}</span>
+                  </div>
+                </a>
+              </div>
+              }
+            </div>
+          </div>
+          <div
+            class="b-t-1 p-24 d-none d-lg-flex align-items-center justify-content-between"
+          >
+            <span
+              class="d-flex align-items-center  f-s-16 f-w-500"
+            >
+              <i-tabler name="help" class="icon-20 m-r-8"></i-tabler>Frequently
+              Asked Questions
+            </span>
+            <a
+              [routerLink]="['/theme-pages/faq']"
+              mat-flat-button
+              color="primary"
+              >Check</a
+            >
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <div class="p-x-16 p-y-32">
+            <h4 class="f-s-18 f-w-600  m-b-16">Quick Links</h4>
+            @for(quicklink of quicklinks; track quicklink.title) {
+            <div class="text-hover-primary">
+              <a
+                [routerLink]="[quicklink.link]"
+                class="hover-text text-decoration-none f-s-14 f-w-600 d-block p-y-8"
+                >{{ quicklink.title }}</a
+              >
+            </div>
+            }
+          </div>
+        </div>
+      </div>
+    </mat-menu>
+    <a mat-button [routerLink]="['/apps/chat']">Chat</a>
+    <a mat-button [routerLink]="['/apps/calendar']">Calendar</a>
+    <a mat-button [routerLink]="['/apps/email/inbox']">Email</a>
+  </div>
+
+  <span class="flex-1-auto"></span>
+
+  <!-- Mobile Menu -->
+  <button
+    mat-icon-button
+    (click)="toggleMobileFilterNav.emit()"
+    class="d-flex d-lg-none justify-content-center"
+  >
+    <i-tabler name="grid-dots" class="icon-20 d-flex"></i-tabler>
+  </button>
+
+  <!-- --------------------------------------------------------------- -->
+  <!-- langugage Dropdown -->
+  <!-- --------------------------------------------------------------- -->
+  <button [matMenuTriggerFor]="flags" mat-icon-button class="m-r-5">
+    <img
+      [src]="selectedLanguage.icon"
+      class="rounded-circle object-cover icon-20"
+    />
+  </button>
+  <mat-menu #flags="matMenu" class="cardWithShadow">
+    @for(lang of languages; track lang.icon) {
+    <button mat-menu-item (click)="changeLanguage(lang)">
+      <div class="d-flex align-items-center">
+        <img
+          [src]="lang.icon"
+          class="rounded-circle object-cover m-r-8 icon-20"
+        />
+        <span class=" f-s-14">{{ lang.language }}</span>
+      </div>
+    </button>
+    }
+  </mat-menu>
+
+  @if(options.theme=='light'){
+    <button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('dark')" >
+      <i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
+    </button>
+    }@else{
+    <button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center" (click)="setlightDark('light')">
+      <i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
+    </button>
+  }
+
+  <!-- --------------------------------------------------------------- -->
+  <!-- Notification Dropdown -->
+  <!-- --------------------------------------------------------------- -->
+  <button
+    mat-icon-button matBadge="5"
+    [matMenuTriggerFor]="notificationmenu"
+    aria-label="Notifications" class="m-x-5 notification-badge"
+  >
+    <i-tabler
+      class="d-flex"
+      name="bell"
+    ></i-tabler>
+  </button>
+  <mat-menu #notificationmenu="matMenu" class="topbar-dd cardWithShadow">
+    <div class="d-flex align-items-center p-x-32 p-y-16">
+      <h6 class="f-s-16 f-w-600 m-0 ">Notifications</h6>
+      <span class="m-l-auto">
+        <span class="bg-primary text-white p-x-8 p-y-4 f-w-500 rounded f-s-12"
+          >5 new</span
+        >
+      </span>
+    </div>
+
+    @for(notification of notifications; track notification.title) {
+    <button mat-menu-item class="p-x-32 p-y-16">
+      <div class="d-flex align-items-center">
+        <img [src]="notification.img" class="rounded-circle" width="48" />
+        <div class="m-l-16">
+          <h5 class="f-s-14 f-w-600 m-0 ">
+            {{ notification.title }}
+          </h5>
+          <span>{{ notification.subtitle }}</span>
+        </div>
+      </div>
+    </button>
+    }
+
+    <div class="p-y-12 p-x-32">
+      <button mat-stroked-button color="primary" class="w-100">
+        See all notifications
+      </button>
+    </div>
+  </mat-menu>
+
+  <!-- --------------------------------------------------------------- -->
+  <!-- profile Dropdown -->
+  <!-- --------------------------------------------------------------- -->
+  <button
+    mat-icon-button
+    [matMenuTriggerFor]="profilemenu"
+    aria-label="Notifications" class="m-l-8"
+  >
+    <img
+      src="/assets/images/profile/user-1.jpg"
+      class="rounded-circle object-cover icon-35 profile-dd"
+      width="35"
+    />
+  </button>
+  <mat-menu #profilemenu="matMenu" class="topbar-dd cardWithShadow">
+    <ng-scrollbar class="position-relative" style="height: 647px">
+      <div class="p-x-32 p-y-16">
+        <h6 class="f-s-16 f-w-600 m-0 ">User Profile</h6>
+
+        <div class="d-flex align-items-center p-b-24 b-b-1 m-t-16">
+          <img
+            src="/assets/images/profile/user-1.jpg"
+            class="rounded-circle"
+            width="95"
+          />
+          <div class="m-l-16">
+            <h6 class="f-s-14 f-w-600 m-0 ">Mathew Anderson</h6>
+            <span class="f-s-14 d-block m-b-4">Designer</span>
+            <span class="d-flex align-items-center">
+              <i-tabler name="mail" class="icon-15 m-r-4"></i-tabler>
+              info&#64;modernize.com
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="p-x-32">
+        @for(profile of profiledd; track profile.title) {
+        <a
+          class="p-y-16 text-decoration-none d-block text-hover-primary"
+          [routerLink]="[profile.link]"
+        >
+          <div class="d-flex align-items-center">
+            <button
+              mat-mini-fab
+              class="text-primary bg-light shadow-none rounded"
+            >
+              <img [src]="profile.img" width="20" />
+            </button>
+
+            <div class="m-l-16">
+              <h5
+                class="f-s-14 f-w-600 m-0 textprimary  hover-text"
+              >
+                {{ profile.title }}
+              </h5>
+              <span class="f-s-14 text-body">{{ profile.subtitle }}</span>
+            </div>
+          </div>
+        </a>
+        }
+
+        <!-- upgrade -->
+        <div
+          class="p-24 overflow-hidden bg-light-primary rounded position-relative m-y-16"
+        >
+          <div class="d-flex align-items-center">
+            <div>
+              <h5 class="f-s-18 m-0 f-w-600 m-b-12 ">
+                Unlimited <br />
+                Access
+              </h5>
+              <button mat-flat-button color="primary">Upgrade</button>
+            </div>
+            <div class="m-l-auto">
+              <img
+                src="/assets/images/backgrounds/unlimited-bg.png"
+                alt="upgrade-bg"
+                class="upgrade-bg"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-y-12 p-x-32">
+        <a
+          [routerLink]="['/authentication/login']"
+          mat-stroked-button
+          color="primary"
+          class="w-100"
+          >Logout</a
+        >
+      </div>
+    </ng-scrollbar>
+  </mat-menu>
+</mat-toolbar>

Web/src/app/layouts/full/vertical/header/header.component.ts

@@ -0,0 +1,310 @@
+import {
+  Component,
+  Output,
+  EventEmitter,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { CoreService } from '../../../../services/core.service';
+import { MatDialog } from '@angular/material/dialog';
+import { navItems } from '../sidebar/sidebar-data';
+import { TranslateService } from '@ngx-translate/core';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { MaterialModule } from '../../../../material.module';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgScrollbarModule } from 'ngx-scrollbar';
+import { AppSettings } from '../../../../config';
+
+interface notifications {
+  id: number;
+  img: string;
+  title: string;
+  subtitle: string;
+}
+
+interface profiledd {
+  id: number;
+  img: string;
+  title: string;
+  subtitle: string;
+  link: string;
+}
+
+interface apps {
+  id: number;
+  img: string;
+  title: string;
+  subtitle: string;
+  link: string;
+}
+
+interface quicklinks {
+  id: number;
+  title: string;
+  link: string;
+}
+
+@Component({
+    selector: 'app-header',
+    imports: [
+        RouterModule,
+        CommonModule,
+        NgScrollbarModule,
+        TablerIconsModule,
+        MaterialModule,
+    ],
+    templateUrl: './header.component.html',
+    encapsulation: ViewEncapsulation.None
+})
+export class HeaderComponent {
+  @Input() showToggle = true;
+  @Input() toggleChecked = false;
+  @Output() toggleMobileNav = new EventEmitter<void>();
+  @Output() toggleMobileFilterNav = new EventEmitter<void>();
+  @Output() toggleCollapsed = new EventEmitter<void>();
+
+  showFiller = false;
+
+  public selectedLanguage: any = {
+    language: 'English',
+    code: 'en',
+    type: 'US',
+    icon: '/assets/images/flag/icon-flag-en.svg',
+  };
+
+  public languages: any[] = [
+    {
+      language: 'English',
+      code: 'en',
+      type: 'US',
+      icon: '/assets/images/flag/icon-flag-en.svg',
+    },
+    {
+      language: 'Español',
+      code: 'es',
+      icon: '/assets/images/flag/icon-flag-es.svg',
+    },
+    {
+      language: 'Français',
+      code: 'fr',
+      icon: '/assets/images/flag/icon-flag-fr.svg',
+    },
+    {
+      language: 'German',
+      code: 'de',
+      icon: '/assets/images/flag/icon-flag-de.svg',
+    },
+  ];
+
+  @Output() optionsChange = new EventEmitter<AppSettings>();
+
+  constructor(
+    private settings: CoreService,
+    private vsidenav: CoreService,
+    public dialog: MatDialog,
+    private translate: TranslateService
+  ) {
+    translate.setDefaultLang('en');
+    this.options = this.settings.getOptions();
+  }
+  options: AppSettings;
+
+  openDialog() {
+    const dialogRef = this.dialog.open(AppSearchDialogComponent);
+
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log(`Dialog result: ${result}`);
+    });
+  }
+
+  private emitOptions() {
+    this.optionsChange.emit(this.options);
+  }
+
+  setlightDark(theme: string) {
+    this.options.theme = theme;
+    this.emitOptions();
+  }
+
+  changeLanguage(lang: any): void {
+    this.translate.use(lang.code);
+    this.selectedLanguage = lang;
+  }
+
+  notifications: notifications[] = [
+    {
+      id: 1,
+      img: '/assets/images/profile/user-1.jpg',
+      title: 'Roman Joined thes Team!',
+      subtitle: 'Congratulate him',
+    },
+    {
+      id: 2,
+      img: '/assets/images/profile/user-2.jpg',
+      title: 'New message received',
+      subtitle: 'Salma sent you new message',
+    },
+    {
+      id: 3,
+      img: '/assets/images/profile/user-3.jpg',
+      title: 'New Payment received',
+      subtitle: 'Check your earnings',
+    },
+    {
+      id: 4,
+      img: '/assets/images/profile/user-4.jpg',
+      title: 'Jolly completed tasks',
+      subtitle: 'Assign her new tasks',
+    },
+    {
+      id: 5,
+      img: '/assets/images/profile/user-5.jpg',
+      title: 'Roman Joined the Team!',
+      subtitle: 'Congratulatse him',
+    },
+  ];
+
+  profiledd: profiledd[] = [
+    {
+      id: 1,
+      img: '/assets/images/svgs/icon-account.svg',
+      title: 'My Profile',
+      subtitle: 'Account Settings',
+      link: '/',
+    },
+    {
+      id: 2,
+      img: '/assets/images/svgs/icon-inbox.svg',
+      title: 'My Inbox',
+      subtitle: 'Messages & Email',
+      link: '/apps/email/inbox',
+    },
+    {
+      id: 3,
+      img: '/assets/images/svgs/icon-tasks.svg',
+      title: 'My Tasks',
+      subtitle: 'To-do and Daily Tasks',
+      link: '/apps/taskboard',
+    },
+  ];
+
+  apps: apps[] = [
+    {
+      id: 1,
+      img: '/assets/images/svgs/icon-dd-chat.svg',
+      title: 'Chat Application',
+      subtitle: 'Messages & Emails',
+      link: '/apps/chat',
+    },
+    {
+      id: 2,
+      img: '/assets/images/svgs/icon-dd-cart.svg',
+      title: 'Todo App',
+      subtitle: 'Completed task',
+      link: '/apps/todo',
+    },
+    {
+      id: 3,
+      img: '/assets/images/svgs/icon-dd-invoice.svg',
+      title: 'Invoice App',
+      subtitle: 'Get latest invoice',
+      link: '/apps/invoice',
+    },
+    {
+      id: 4,
+      img: '/assets/images/svgs/icon-dd-date.svg',
+      title: 'Calendar App',
+      subtitle: 'Get Dates',
+      link: '/apps/calendar',
+    },
+    {
+      id: 5,
+      img: '/assets/images/svgs/icon-dd-mobile.svg',
+      title: 'Contact Application',
+      subtitle: '2 Unsaved Contacts',
+      link: '/apps/contacts',
+    },
+    {
+      id: 6,
+      img: '/assets/images/svgs/icon-dd-lifebuoy.svg',
+      title: 'Tickets App',
+      subtitle: 'Create new ticket',
+      link: '/apps/tickets',
+    },
+    {
+      id: 7,
+      img: '/assets/images/svgs/icon-dd-message-box.svg',
+      title: 'Email App',
+      subtitle: 'Get new emails',
+      link: '/apps/email/inbox',
+    },
+    {
+      id: 8,
+      img: '/assets/images/svgs/icon-dd-application.svg',
+      title: 'Conatct List',
+      subtitle: 'Create new contact',
+      link: '/apps/contact-list',
+    },
+  ];
+
+  quicklinks: quicklinks[] = [
+    {
+      id: 1,
+      title: 'Pricing Page',
+      link: '/theme-pages/pricing',
+    },
+    {
+      id: 2,
+      title: 'Authentication Design',
+      link: '/authentication/login',
+    },
+    {
+      id: 3,
+      title: 'Register Now',
+      link: '/authentication/side-register',
+    },
+    {
+      id: 4,
+      title: '404 Error Page',
+      link: '/authentication/error',
+    },
+    {
+      id: 5,
+      title: 'Notes App',
+      link: '/apps/notes',
+    },
+    {
+      id: 6,
+      title: 'Employee App',
+      link: '/apps/employee',
+    },
+    {
+      id: 7,
+      title: 'Todo Application',
+      link: '/apps/todo',
+    },
+    {
+      id: 8,
+      title: 'Treeview',
+      link: '/theme-pages/treeview',
+    },
+  ];
+}
+
+@Component({
+    selector: 'search-dialog',
+    imports: [RouterModule, MaterialModule, TablerIconsModule, FormsModule],
+    templateUrl: 'search-dialog.component.html'
+})
+export class AppSearchDialogComponent {
+  searchText: string = '';
+  navItems = navItems;
+
+  navItemsData = navItems.filter((navitem) => navitem.displayName);
+
+  // filtered = this.navItemsData.find((obj) => {
+  //   return obj.displayName == this.searchinput;
+  // });
+}

Web/src/app/layouts/full/vertical/header/search-dialog.component.html

@@ -0,0 +1,39 @@
+<div class="p-24 p-b-0">
+  <div class="row">
+    <div class="col-10">
+      <mat-form-field
+        appearance="outline"
+        color="primary"
+        class="hide-hint w-100"
+      >
+        <input matInput placeholder="Search here" [(ngModel)]="searchText" />
+      </mat-form-field>
+    </div>
+    <div class="col-2 d-flex justify-content-end">
+      <button
+        mat-icon-button
+        mat-dialog-close
+        class="d-flex justify-content-center"
+      >
+        <i-tabler name="x" class="icon-18 d-flex"></i-tabler>
+      </button>
+    </div>
+  </div>
+</div>
+<mat-divider></mat-divider>
+<mat-dialog-content class="mat-typography search-dialog">
+  <h4 class="f-s-18 f-w-600  m-b-16">Quick Page Links</h4>
+
+  @for(item of navItemsData; track item.displayName) {
+  <a
+    [routerLink]="[item.route]"
+    mat-dialog-close
+    class="p-y-12 text-decoration-none d-block"
+  >
+    <h5 class="f-s-14 f-w-500 d-block  m-0">
+      {{ item.displayName }}
+    </h5>
+    <span class="f-s-12 f-s-16">{{ item.route }}</span>
+  </a>
+  }
+</mat-dialog-content>

Web/src/app/layouts/full/vertical/sidebar/branding.component.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { CoreService } from '../../../../services/core.service';
+
+@Component({
+  selector: 'app-branding',
+  imports: [],
+  standalone: true,
+  template: `
+    <a href="/" class="logodark">
+      <img
+        src="./assets/images/logos/dark-logo.svg"
+        class="align-middle m-2"
+        alt="logo"
+      />
+    </a>
+
+    <a href="/" class="logolight">
+      <img
+        src="./assets/images/logos/light-logo.svg"
+        class="align-middle m-2"
+        alt="logo"
+      />
+    </a>
+  `,
+})
+export class BrandingComponent {
+  options: any;
+
+  constructor(private settings: CoreService) { 
+    this.options = this.settings.getOptions();
+  }
+}

Web/src/app/layouts/full/vertical/sidebar/nav-item/nav-item.component.html

@@ -0,0 +1,51 @@
+@if(item.navCap){
+<div mat-subheader class="nav-caption">
+  {{ item.navCap }}
+</div>
+} @if(!item.navCap && !item.external && !item.twoLines) {
+<a mat-list-item (click)="onItemSelected(item)" [ngClass]="{
+    'mat-toolbar mat-primary activeMenu': item.route
+      ? router.isActive(item.route, true)
+      : false,
+    expanded: expanded, activemenu: isChildActive(item),
+    disabled: item.disabled
+  }" class="menu-list-item">
+  <i-tabler class="routeIcon" name="{{ item.iconName }}" matListItemIcon></i-tabler>
+  <span class="hide-menu">{{ item.displayName | translate }}</span>
+  <div class="d-flex align-items-center gap-4">
+    @if(item.children && item.children.length) {
+    @if(item.chip) {
+    <span>
+      <span class="{{ item.chipClass }} p-x-8 p-y-4 item-chip f-w-500 rounded-pill ">{{ item.chipContent }}</span>
+    </span>
+    }
+    <span class="arrow-icon" fxFlex>
+      <span fxFlex></span>
+      <mat-icon [@indicatorRotate]="expanded ? 'expanded' : 'collapsed'">
+        expand_more
+      </mat-icon>
+    </span>
+    }
+  </div>
+  @if(item.chip && !item.children ) {
+  <span>
+    <span class="{{ item.chipClass }} p-x-8 p-y-4 item-chip f-w-500 rounded-pill ">{{ item.chipContent }}</span>
+  </span>
+  }
+</a>
+}
+
+<!-- external Link -->
+
+@if(!item.navCap && item.external) {
+<mat-list-item onClick="window.open('//google.com')" class="menu-list-item" target="_blank">
+  <i-tabler class="routeIcon" name="{{ item.iconName }}" matListItemIcon></i-tabler>
+  <span class="hide-menu">{{ item.displayName | translate }}</span>
+</mat-list-item>
+}
+
+<!-- children -->
+@if(expanded) { @for(child of item.children; track child) {
+<app-nav-item [item]="child" (click)="onSubItemSelected(child)" [depth]="depth + 1">
+</app-nav-item>
+} }

Web/src/app/layouts/full/vertical/sidebar/nav-item/nav-item.component.ts

@@ -0,0 +1,103 @@
+import {
+  Component,
+  HostBinding,
+  Input,
+  OnInit,
+  OnChanges,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { NavItem } from './nav-item';
+import { Router } from '@angular/router';
+import { NavService } from '../../../../../services/nav.service';
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+import { TranslateModule } from '@ngx-translate/core';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { MaterialModule } from '../../../../../material.module';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-nav-item',
+  imports: [TranslateModule, TablerIconsModule, MaterialModule, CommonModule],
+  templateUrl: './nav-item.component.html',
+  styleUrls: [],
+  animations: [
+    trigger('indicatorRotate', [
+      state('collapsed', style({ transform: 'rotate(0deg)' })),
+      state('expanded', style({ transform: 'rotate(180deg)' })),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
+    ]),
+  ]
+})
+export class AppNavItemComponent implements OnChanges {
+  @Output() toggleMobileLink: any = new EventEmitter<void>();
+  @Output() notify: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  expanded: any = false;
+  disabled: any = false;
+  twoLines: any = false;
+  @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
+  @Input() item: NavItem | any;
+  @Input() depth: any;
+
+  constructor(public navService: NavService, public router: Router) {
+    if (this.depth === undefined) {
+      this.depth = 0;
+    }
+  }
+
+  ngOnChanges() {
+    const url = this.navService.currentUrl();
+    if (this.item.route && url) {
+      this.expanded = url.indexOf(`/${this.item.route}`) === 0;
+      this.ariaExpanded = this.expanded;
+    }
+  }
+
+  onItemSelected(item: NavItem) {
+    if (!item.children || !item.children.length) {
+      this.router.navigate([item.route]);
+
+    }
+    if (item.children && item.children.length) {
+      this.expanded = !this.expanded;
+    }
+    //scroll
+    window.scroll({
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    });
+    if (!this.expanded) {
+      if (window.innerWidth < 1024) {
+        this.notify.emit();
+      }
+    }
+  }
+
+  onSubItemSelected(item: NavItem) {
+    if (!item.children || !item.children.length) {
+      if (this.expanded && window.innerWidth < 1024) {
+        this.notify.emit();
+      }
+    }
+  }
+
+  isDirectlyActive(item: NavItem): boolean {
+    return !!item.route && this.router.isActive(item.route, true);
+  }
+
+  isChildActive(item: NavItem): boolean {
+    if (!item.children) return false;
+    return item.children.some(
+      (child) => this.isDirectlyActive(child) || this.isChildActive(child)
+    );
+  }
+
+}

Web/src/app/layouts/full/vertical/sidebar/nav-item/nav-item.ts

@@ -0,0 +1,15 @@
+export interface NavItem {
+    displayName?: string;
+    disabled?: boolean;
+    external?: boolean;
+    twoLines?: boolean;
+    chip?: boolean;
+    iconName?: string;
+    navCap?: string;
+    chipContent?: string;
+    chipClass?: string;
+    subtext?: string;
+    route?: string;
+    children?: NavItem[];
+    ddType?: string;
+}

Web/src/app/layouts/full/vertical/sidebar/sidebar-data.ts

@@ -0,0 +1,705 @@
+import { NavItem } from './nav-item/nav-item';
+
+export const navItems: NavItem[] = [
+  {
+    navCap: 'Home',
+  },
+  {
+    displayName: 'Analytical',
+    iconName: 'aperture',
+    route: '/dashboards/dashboard1',
+  },
+  {
+    displayName: 'eCommerce',
+    iconName: 'shopping-cart',
+    route: '/dashboards/dashboard2',
+  },
+  {
+    displayName: 'Frontend pages',
+    iconName: 'app-window',
+    route: 'front-pages',
+    children: [
+      {
+        displayName: 'Home Page',
+        iconName: 'point',
+        route: 'front-pages/homepage',
+      } ,
+      {
+        displayName: 'About Us',
+        iconName: 'point',
+        route: 'front-pages/about',
+      } ,
+      {
+        displayName: 'Blog',
+        iconName: 'point',
+        route: 'front-pages/blog',
+      } ,
+      {
+        displayName: 'Blog Details',
+        iconName: 'point',
+        route: 'front-pages/blog-details', 
+      } ,
+      {
+        displayName: 'Portfolio',
+        iconName: 'point',
+        route: 'front-pages/portfolio',
+      },
+      {
+        displayName: 'Pricing',
+        iconName: 'point',
+        route: 'front-pages/pricing',
+      },
+      {
+        displayName: 'Contact',
+        iconName: 'point',
+        route: 'front-pages/contact',
+      }
+    ]
+  }, 
+  {
+    navCap: 'Apps',
+  },
+  {
+    displayName: 'Chat',
+    iconName: 'message-2',
+    route: 'apps/chat',
+  },
+  {
+    displayName: 'Calendar',
+    iconName: 'calendar-event',
+    route: 'apps/calendar',
+  },
+  {
+    displayName: 'Email',
+    iconName: 'mail',
+    route: 'apps/email/inbox',
+  },
+  {
+    displayName: 'Kanban',
+    iconName: 'checklist',
+    route: 'apps/kanban',
+  },
+  {
+    displayName: 'User Profile',
+    iconName: 'user-circle',
+    route: 'apps/profile-details',
+    chip: true,
+    chipClass: 'bg-error text-white',
+    chipContent: 'New',
+    children: [
+      {
+        displayName: 'Profile',
+        iconName: 'point',
+        route: 'apps/profile-details/profile',
+      },
+      {
+        displayName: 'Followers',
+        iconName: 'point',
+        route: 'apps/profile-details/followers',
+      },
+      {
+        displayName: 'Friends',
+        iconName: 'point',
+        route: 'apps/profile-details/friends',
+      },
+      {
+        displayName: 'Gellary',
+        iconName: 'point',
+        route: 'apps/profile-details/gallery',
+      },
+    ],
+  },
+  {
+    displayName: 'Ecommerce',
+    iconName: 'basket',
+    route: 'apps/product',
+    chip: true,
+    chipClass: 'border-error text-error',
+    chipContent: 'New',
+    children: [
+      {
+        displayName: 'Product List',
+        iconName: 'point',
+        route: 'apps/product/product-list',
+      },
+      {
+        displayName: 'Add Product',
+        iconName: 'point',
+        route: 'apps/product/add-product',
+      },
+      {
+        displayName: 'Edit Product',
+        iconName: 'point',
+        route: 'apps/product/edit-product',
+      },
+      {
+        displayName: 'Shop',
+        iconName: 'point',
+        route: 'apps/product/shop',
+      },
+    ],
+  },
+  {
+    displayName: 'Contacts',
+    iconName: 'phone',
+    route: 'apps/contacts',
+  },
+  {
+    displayName: 'Courses',
+    iconName: 'certificate',
+    route: 'apps/courses',
+  },
+  {
+    displayName: 'Employee',
+    iconName: 'brand-ctemplar',
+    route: 'apps/employee',
+  },
+  {
+    displayName: 'Notes',
+    iconName: 'note',
+    route: 'apps/notes',
+  },
+  {
+    displayName: 'Tickets',
+    iconName: 'ticket',
+    route: 'apps/tickets',
+  },
+  {
+    displayName: 'Contact List',
+    iconName: 'phone',
+    route: 'apps/contact-list',
+  },
+  {
+    displayName: 'Invoice',
+    iconName: 'file-invoice',
+    route: 'apps/invoice',
+    children: [
+      {
+        displayName: 'List',
+        iconName: 'point',
+        route: 'apps/invoice/list',
+      },
+      {
+        displayName: 'Detail',
+        iconName: 'point',
+        route: 'apps/invoice/viewInvoice/101',
+      },
+      {
+        displayName: 'Create',
+        iconName: 'point',
+        route: 'apps/invoice/addInvoice',
+      },
+      {
+        displayName: 'Edit',
+        iconName: 'point',
+        route: 'apps/invoice/editinvoice/101',
+      },
+    ],
+  },
+  {
+    displayName: 'ToDo',
+    iconName: 'edit',
+    route: 'apps/todo',
+  },
+  {
+    displayName: 'Blog',
+    iconName: 'chart-donut-3',
+    route: 'apps/blog',
+    children: [
+      {
+        displayName: 'Post',
+        iconName: 'point',
+        route: 'apps/blog/post',
+      },
+      {
+        displayName: 'Detail',
+        iconName: 'point',
+        route: 'apps/blog/detail/Early Black Friday Amazon deals: cheap TVs, headphones, laptops',
+      },
+    ],
+  },
+  {
+    navCap: 'Pages',
+  },
+  {
+    displayName: 'Roll Base Access',
+    iconName: 'lock-access',
+    route: 'apps/permission',
+  },
+  {
+    displayName: 'Treeview',
+    iconName: 'git-merge',
+    route: 'theme-pages/treeview',
+  },
+  {
+    displayName: 'Pricing',
+    iconName: 'currency-dollar',
+    route: 'theme-pages/pricing',
+  },
+  {
+    displayName: 'Account Setting',
+    iconName: 'user-circle',
+    route: 'theme-pages/account-setting',
+  },
+  {
+    displayName: 'FAQ',
+    iconName: 'help',
+    route: 'theme-pages/faq',
+  },
+  {
+    displayName: 'Landingpage',
+    iconName: 'app-window',
+    route: 'landingpage',
+  },
+  {
+    displayName: 'Widgets',
+    iconName: 'layout',
+    route: 'widgets',
+    children: [
+      {
+        displayName: 'Cards',
+        iconName: 'point',
+        route: 'widgets/cards',
+      },
+      {
+        displayName: 'Banners',
+        iconName: 'point',
+        route: 'widgets/banners',
+      },
+      {
+        displayName: 'Charts',
+        iconName: 'point',
+        route: 'widgets/charts',
+      },
+    ],
+  },
+  {
+    navCap: 'Forms',
+  },
+  {
+    displayName: 'Form elements',
+    iconName: 'apps',
+    route: 'forms/forms-elements',
+    children: [
+      {
+        displayName: 'Autocomplete',
+        iconName: 'point',
+        route: 'forms/forms-elements/autocomplete',
+      },
+      {
+        displayName: 'Button',
+        iconName: 'point',
+        route: 'forms/forms-elements/button',
+      },
+      {
+        displayName: 'Checkbox',
+        iconName: 'point',
+        route: 'forms/forms-elements/checkbox',
+      },
+      {
+        displayName: 'Radio',
+        iconName: 'point',
+        route: 'forms/forms-elements/radio',
+      },
+      {
+        displayName: 'Datepicker',
+        iconName: 'point',
+        route: 'forms/forms-elements/datepicker',
+      },
+    ],
+  },
+  {
+    displayName: 'Form Layouts',
+    iconName: 'file-description',
+    route: '/forms/form-layouts',
+  },
+  {
+    displayName: 'Form Horizontal',
+    iconName: 'box-align-bottom',
+    route: '/forms/form-horizontal',
+  },
+  {
+    displayName: 'Form Vertical',
+    iconName: 'box-align-left',
+    route: '/forms/form-vertical',
+  },
+  {
+    displayName: 'Form Wizard',
+    iconName: 'files',
+    route: '/forms/form-wizard',
+  },
+  {
+    displayName: 'Toastr',
+    iconName: 'notification',
+    route: '/forms/form-toastr',
+  },
+  {
+    displayName: 'Editor',
+    iconName: 'edit',
+    route: '/forms/form-editor',
+    chip: true,
+    chipClass: 'bg-error text-white',
+    chipContent: 'New',
+  },
+  {
+    navCap: 'Tables',
+  },
+  {
+    displayName: 'Tables',
+    iconName: 'layout',
+    route: 'tables',
+    children: [
+      {
+        displayName: 'Basic Table',
+        iconName: 'point',
+        route: 'tables/basic-table',
+      },
+      {
+        displayName: 'Dynamic Table',
+        iconName: 'point',
+        route: 'tables/dynamic-table',
+      },
+      {
+        displayName: 'Expand Table',
+        iconName: 'point',
+        route: 'tables/expand-table',
+      },
+      {
+        displayName: 'Filterable Table',
+        iconName: 'point',
+        route: 'tables/filterable-table',
+      },
+      {
+        displayName: 'Footer Row Table',
+        iconName: 'point',
+        route: 'tables/footer-row-table',
+      },
+      {
+        displayName: 'HTTP Table',
+        iconName: 'point',
+        route: 'tables/http-table',
+      },
+      {
+        displayName: 'Mix Table',
+        iconName: 'point',
+        route: 'tables/mix-table',
+      },
+      {
+        displayName: 'Multi Header Footer',
+        iconName: 'point',
+        route: 'tables/multi-header-footer-table',
+      },
+      {
+        displayName: 'Pagination Table',
+        iconName: 'point',
+        route: 'tables/pagination-table',
+      },
+      {
+        displayName: 'Row Context Table',
+        iconName: 'point',
+        route: 'tables/row-context-table',
+      },
+      {
+        displayName: 'Selection Table',
+        iconName: 'point',
+        route: 'tables/selection-table',
+      },
+      {
+        displayName: 'Sortable Table',
+        iconName: 'point',
+        route: 'tables/sortable-table',
+      },
+      {
+        displayName: 'Sticky Column',
+        iconName: 'point',
+        route: 'tables/sticky-column-table',
+      },
+      {
+        displayName: 'Sticky Header Footer',
+        iconName: 'point',
+        route: 'tables/sticky-header-footer-table',
+      },
+    ],
+  },
+  {
+    displayName: 'Data table',
+    iconName: 'border-outer',
+    route: '/datatable/kichen-sink',
+  },
+  {
+    navCap: 'Chart',
+  },
+  {
+    displayName: 'Line',
+    iconName: 'chart-line',
+    route: '/charts/line',
+  },
+  {
+    displayName: 'Gredient',
+    iconName: 'chart-arcs',
+    route: '/charts/gredient',
+  },
+  {
+    displayName: 'Area',
+    iconName: 'chart-area',
+    route: '/charts/area',
+  },
+  {
+    displayName: 'Candlestick',
+    iconName: 'chart-candle',
+    route: '/charts/candlestick',
+  },
+  {
+    displayName: 'Column',
+    iconName: 'chart-dots',
+    route: '/charts/column',
+  },
+  {
+    displayName: 'Doughnut & Pie',
+    iconName: 'chart-donut-3',
+    route: '/charts/doughnut-pie',
+  },
+  {
+    displayName: 'Radialbar & Radar',
+    iconName: 'chart-radar',
+    route: '/charts/radial-radar',
+  },
+  {
+    navCap: 'UI',
+  },
+  {
+    displayName: 'Ui Components',
+    iconName: 'box',
+    route: 'ui-components',
+    children: [
+      {
+        displayName: 'Badge',
+        iconName: 'point',
+        route: 'ui-components/badge',
+      },
+      {
+        displayName: 'Expansion Panel',
+        iconName: 'point',
+        route: 'ui-components/expansion',
+      },
+      {
+        displayName: 'Chips',
+        iconName: 'point',
+        route: 'ui-components/chips',
+      },
+      {
+        displayName: 'Dialog',
+        iconName: 'point',
+        route: 'ui-components/dialog',
+      },
+      {
+        displayName: 'Lists',
+        iconName: 'point',
+        route: 'ui-components/lists',
+      },
+      {
+        displayName: 'Divider',
+        iconName: 'point',
+        route: 'ui-components/divider',
+      },
+      {
+        displayName: 'Menu',
+        iconName: 'point',
+        route: 'ui-components/menu',
+      },
+      {
+        displayName: 'Paginator',
+        iconName: 'point',
+        route: 'ui-components/paginator',
+      },
+      {
+        displayName: 'Progress Bar',
+        iconName: 'point',
+        route: 'ui-components/progress',
+      },
+      {
+        displayName: 'Progress Spinner',
+        iconName: 'point',
+        route: 'ui-components/progress-spinner',
+      },
+      {
+        displayName: 'Ripples',
+        iconName: 'point',
+        route: 'ui-components/ripples',
+      },
+      {
+        displayName: 'Slide Toggle',
+        iconName: 'point',
+        route: 'ui-components/slide-toggle',
+      },
+      {
+        displayName: 'Slider',
+        iconName: 'point',
+        route: 'ui-components/slider',
+      },
+      {
+        displayName: 'Snackbar',
+        iconName: 'point',
+        route: 'ui-components/snackbar',
+      },
+      {
+        displayName: 'Tabs',
+        iconName: 'point',
+        route: 'ui-components/tabs',
+      },
+      {
+        displayName: 'Toolbar',
+        iconName: 'point',
+        route: 'ui-components/toolbar',
+      },
+      {
+        displayName: 'Tooltips',
+        iconName: 'point',
+        route: 'ui-components/tooltips',
+      },
+    ],
+  },
+  {
+    navCap: 'Auth',
+  },
+  {
+    displayName: 'Login',
+    iconName: 'login',
+    route: '/authentication',
+    children: [
+      {
+        displayName: 'Login 1',
+        iconName: 'point',
+        route: '/authentication/login',
+      },
+      {
+        displayName: 'Boxed Login',
+        iconName: 'point',
+        route: '/authentication/boxed-login',
+      },
+    ],
+  },
+  {
+    displayName: 'Register',
+    iconName: 'user-plus',
+    route: '/authentication',
+    children: [
+      {
+        displayName: 'Side Register',
+        iconName: 'point',
+        route: '/authentication/side-register',
+      },
+      {
+        displayName: 'Boxed Register',
+        iconName: 'point',
+        route: '/authentication/boxed-register',
+      },
+    ],
+  },
+  {
+    displayName: 'Forgot Password',
+    iconName: 'rotate',
+    route: '/authentication',
+    children: [
+      {
+        displayName: 'Side Forgot Password',
+        iconName: 'point',
+        route: '/authentication/side-forgot-pwd',
+      },
+      {
+        displayName: 'Boxed Forgot Password',
+        iconName: 'point',
+        route: '/authentication/boxed-forgot-pwd',
+      },
+    ],
+  },
+  {
+    displayName: 'Two Steps',
+    iconName: 'zoom-code',
+    route: '/authentication',
+    children: [
+      {
+        displayName: 'Side Two Steps',
+        iconName: 'point',
+        route: '/authentication/side-two-steps',
+      },
+      {
+        displayName: 'Boxed Two Steps',
+        iconName: 'point',
+        route: '/authentication/boxed-two-steps',
+      },
+    ],
+  },
+  {
+    displayName: 'Error',
+    iconName: 'alert-circle',
+    route: '/authentication/error',
+  },
+  {
+    displayName: 'Maintenance',
+    iconName: 'settings',
+    route: '/authentication/maintenance',
+  },
+  {
+    navCap: 'Other',
+  },
+  {
+    displayName: 'Menu Level',
+    iconName: 'box-multiple',
+    route: '/menu-level',
+    children: [
+      {
+        displayName: 'Menu 1',
+        iconName: 'point',
+        route: '/menu-1',
+        children: [
+          {
+            displayName: 'Menu 1',
+            iconName: 'point',
+            route: '/menu-1',
+          },
+
+          {
+            displayName: 'Menu 2',
+            iconName: 'point',
+            route: '/menu-2',
+          },
+        ],
+      },
+
+      {
+        displayName: 'Menu 2',
+        iconName: 'point',
+        route: '/menu-2',
+      },
+    ],
+  },
+  {
+    displayName: 'Disabled',
+    iconName: 'ban',
+    route: '/disabled',
+    disabled: true,
+  },
+  {
+    displayName: 'Chip',
+    iconName: 'mood-smile',
+    route: '/',
+    chip: true,
+    chipClass: 'bg-primary text-white',
+    chipContent: '9',
+  },
+  {
+    displayName: 'Outlined',
+    iconName: 'mood-smile',
+    route: '/',
+    chip: true,
+    chipClass: 'bg-error text-white',
+    chipContent: 'outlined',
+  },
+  {
+    displayName: 'External Link',
+    iconName: 'star',
+    route: 'https://www.google.com/',
+    external: true,
+  },
+];

Web/src/app/layouts/full/vertical/sidebar/sidebar.component.html

@@ -0,0 +1,15 @@
+<div class="d-flex align-items-center justify-content-between">
+  <div class="branding">
+    <app-branding></app-branding>
+  </div>
+
+  @if(showToggle) {
+  <a
+    href="javascript:void(0)"
+    (click)="toggleMobileNav.emit()"
+    class="d-flex justify-content-center ng-star-inserted icon-40 align-items-center f-s-14"
+  >
+    <i-tabler name="x" class="icon-20 d-flex"></i-tabler>
+  </a>
+  }
+</div>

Web/src/app/layouts/full/vertical/sidebar/sidebar.component.ts

@@ -0,0 +1,25 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { BrandingComponent } from './branding.component';
+import { TablerIconsModule } from 'angular-tabler-icons';
+import { MaterialModule } from '../../../../material.module';
+
+@Component({
+    selector: 'app-sidebar',
+    imports: [BrandingComponent, TablerIconsModule, MaterialModule],
+    templateUrl: './sidebar.component.html'
+})
+export class SidebarComponent implements OnInit {
+  constructor() { }
+  @Input() showToggle = true;
+  @Output() toggleMobileNav = new EventEmitter<void>();
+  @Output() toggleCollapsed = new EventEmitter<void>();
+
+  ngOnInit(): void { }
+}

Web/src/app/material.module.ts

@@ -0,0 +1,89 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+// Material Form Controls
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+// Material Navigation
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+// Material Layout
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatListModule } from '@angular/material/list';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatTreeModule } from '@angular/material/tree';
+// Material Buttons & Indicators
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatRippleModule } from '@angular/material/core';
+// Material Popups & Modals
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+// Material Data tables
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    
+  ],
+  exports: [
+    MatAutocompleteModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatMenuModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    MatCardModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatListModule,
+    MatStepperModule,
+    MatTabsModule,
+    MatTreeModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatBadgeModule,
+    MatChipsModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+    MatRippleModule,
+    MatBottomSheetModule,
+    MatDialogModule,
+    MatSnackBarModule,
+    MatTooltipModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule,
+  ],
+  
+})
+export class MaterialModule {}

Web/src/app/pages/authentication/authentication.routes.ts

@@ -0,0 +1,60 @@
+import { Routes } from '@angular/router';
+
+import { AppBoxedForgotPasswordComponent } from './boxed-forgot-password/boxed-forgot-password.component';
+import { AppBoxedLoginComponent } from './boxed-login/boxed-login.component';
+import { AppBoxedRegisterComponent } from './boxed-register/boxed-register.component';
+import { AppBoxedTwoStepsComponent } from './boxed-two-steps/boxed-two-steps.component';
+import { AppErrorComponent } from './error/error.component';
+import { AppMaintenanceComponent } from './maintenance/maintenance.component';
+import { AppSideForgotPasswordComponent } from './side-forgot-password/side-forgot-password.component';
+import { AppSideLoginComponent } from './side-login/side-login.component';
+import { AppSideRegisterComponent } from './side-register/side-register.component';
+import { AppSideTwoStepsComponent } from './side-two-steps/side-two-steps.component';
+
+export const AuthenticationRoutes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'boxed-forgot-pwd',
+        component: AppBoxedForgotPasswordComponent,
+      },
+      {
+        path: 'boxed-login',
+        component: AppBoxedLoginComponent,
+      },
+      {
+        path: 'boxed-register',
+        component: AppBoxedRegisterComponent,
+      },
+      {
+        path: 'boxed-two-steps',
+        component: AppBoxedTwoStepsComponent,
+      },
+      {
+        path: 'error',
+        component: AppErrorComponent,
+      },
+      {
+        path: 'maintenance',
+        component: AppMaintenanceComponent,
+      },
+      {
+        path: 'side-forgot-pwd',
+        component: AppSideForgotPasswordComponent,
+      },
+      {
+        path: 'login',
+        component: AppSideLoginComponent,
+      },
+      {
+        path: 'side-register',
+        component: AppSideRegisterComponent,
+      },
+      {
+        path: 'side-two-steps',
+        component: AppSideTwoStepsComponent,
+      },
+    ],
+  },
+];

Web/src/app/pages/authentication/boxed-forgot-password/boxed-forgot-password.component.html

@@ -0,0 +1,53 @@
+<div class="blank-layout-container justify-content-center align-items-center">
+  <div
+    class="position-relative row w-100 h-100 bg-gredient justify-content-center"
+  >
+    <div class="col-lg-4 d-flex align-items-center">
+      <mat-card class="cardWithShadow boxed-auth">
+        <mat-card-content class="p-32">
+          <div class="text-center">
+            <app-branding></app-branding>
+          </div>
+          <span class="f-s-14 d-block f-s-14 m-t-8 text-center m-t-30"
+            >Please enter the email address associated with your account and We
+            will email you a link to reset your password.</span
+          >
+
+          <form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+              >Email Adddress</mat-label
+            >
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput type="email" formControlName="email" />
+              @if(f['email'].touched && f['email'].invalid) {
+              <mat-hint class="m-b-16 error-msg">
+                @if(f['email'].errors && f['email'].errors['required']) {
+                <div class="text-error">Email is required.</div>
+                }
+              </mat-hint>
+              }
+            </mat-form-field>
+
+            <button
+              mat-flat-button
+              color="primary"
+              class="w-100"
+              [disabled]="!form.valid"
+            >
+              Forgot Password
+            </button>
+            <a
+              [routerLink]="['/authentication/boxed-login']"
+              mat-stroked-button
+              color="primary"
+              class="w-100 m-t-8"
+            >
+              Back to Login
+            </a>
+            <!-- input -->
+          </form>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>

Web/src/app/pages/authentication/boxed-forgot-password/boxed-forgot-password.component.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import { CoreService } from '../../../services/core.service';
+import {
+  FormGroup,
+  FormControl,
+  Validators,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { MaterialModule } from '../../../material.module';
+import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
+
+@Component({
+  selector: 'app-boxed-forgot-password',
+  imports: [
+    RouterModule,
+    MaterialModule,
+    FormsModule,
+    ReactiveFormsModule,
+    BrandingComponent,
+  ],
+  templateUrl: './boxed-forgot-password.component.html',
+})
+export class AppBoxedForgotPasswordComponent {
+  options: any;
+
+  constructor(private settings: CoreService, private router: Router) {
+    this.options = this.settings.getOptions();
+  }
+
+  form = new FormGroup({
+    email: new FormControl('', [Validators.required]),
+  });
+
+  get f() {
+    return this.form.controls;
+  }
+
+  submit() {
+    // console.log(this.form.value);
+    this.router.navigate(['/dashboards/dashboard1']);
+  }
+}

Web/src/app/pages/authentication/boxed-login/boxed-login.component.html

@@ -0,0 +1,108 @@
+<div class="blank-layout-container justify-content-center align-items-center">
+  <div
+    class="position-relative row w-100 h-100 bg-gredient justify-content-center"
+  >
+    <div class="col-lg-4 d-flex align-items-center">
+      <mat-card class="cardWithShadow boxed-auth">
+        <mat-card-content class="p-32">
+          <div class="text-center">
+            <app-branding></app-branding>
+          </div>
+
+          <div class="row m-t-24 custom-row">
+            <div class="col-12 col-sm-6">
+              <button mat-stroked-button class="w-100">
+                <div class="d-flex align-items-center">
+                  <img
+                    src="/assets/images/svgs/google-icon.svg"
+                    alt="google"
+                    width="16"
+                    class="m-r-8"
+                  />
+                  Sign in with Google
+                </div>
+              </button>
+            </div>
+            <div class="col-12 col-sm-6">
+              <button
+                mat-stroked-button
+                class="w-100 d-flex align-items-center"
+              >
+                <div class="d-flex align-items-center">
+                  <img
+                    src="/assets/images/svgs/facebook-icon.svg"
+                    alt="facebook"
+                    width="40"
+                    class="m-r-4"
+                  />
+                  Sign in with FB
+                </div>
+              </button>
+            </div>
+          </div>
+
+          <div class="or-border m-t-30">or sign in with</div>
+
+          <form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+              >Username</mat-label
+            >
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput formControlName="uname" />
+              @if(f['uname'].touched && f['uname'].invalid) {
+              <mat-hint class="m-b-16 error-msg">
+                @if(f['uname'].errors && f['uname'].errors['required']) {
+                <div class="text-error">Name is required.</div>
+                } @if(f['uname'].errors && f['uname'].errors['minlength']) {
+                <div class="text-error">Name should be 6 character.</div>
+                }
+              </mat-hint>
+              }
+            </mat-form-field>
+            <!-- password -->
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+              >Password</mat-label
+            >
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput type="password" formControlName="password" />
+              @if(f['password'].touched && f['password'].invalid) {
+              <mat-hint class="m-b-16 error-msg">
+                @if(f['password'].errors && f['password'].errors['required']) {
+                <div class="text-error">Password is required.</div>
+                }
+              </mat-hint>
+              }
+            </mat-form-field>
+
+            <div class="d-flex align-items-center m-b-12">
+              <mat-checkbox color="primary">Remember this Device</mat-checkbox>
+              <a
+                [routerLink]="['/authentication/boxed-forgot-pwd']"
+                class="text-primary f-w-600 text-decoration-none m-l-auto f-s-14"
+                >Forgot Password ?</a
+              >
+            </div>
+            <button
+              mat-flat-button
+              color="primary"
+              class="w-100"
+              [disabled]="!form.valid"
+            >
+              Sign In
+            </button>
+            <!-- input -->
+          </form>
+          <span class="d-block f-w-500 text-center m-t-24"
+            >New to Modernize?
+            <a
+              [routerLink]="['/authentication/boxed-register']"
+              class="text-decoration-none text-primary f-w-500 f-s-14"
+            >
+              Create an account</a
+            >
+          </span>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>

Web/src/app/pages/authentication/boxed-login/boxed-login.component.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import { CoreService } from '../../../services/core.service';
+import {
+  FormGroup,
+  FormControl,
+  Validators,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { MaterialModule } from '../../../material.module';
+import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
+
+@Component({
+  selector: 'app-boxed-login',
+  imports: [
+    RouterModule,
+    MaterialModule,
+    FormsModule,
+    ReactiveFormsModule,
+    BrandingComponent,
+  ],
+  templateUrl: './boxed-login.component.html',
+})
+export class AppBoxedLoginComponent {
+  options: any;
+
+  constructor(private settings: CoreService, private router: Router) {
+    this.options = this.settings.getOptions();
+  }
+
+  form = new FormGroup({
+    uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
+    password: new FormControl('', [Validators.required]),
+  });
+
+  get f() {
+    return this.form.controls;
+  }
+
+  submit() {
+    // console.log(this.form.value);
+    this.router.navigate(['/dashboards/dashboard1']);
+  }
+}

Web/src/app/pages/authentication/boxed-register/boxed-register.component.html

@@ -0,0 +1,112 @@
+<div class="blank-layout-container justify-content-center align-items-center">
+  <div
+    class="position-relative row w-100 h-100 bg-gredient justify-content-center"
+  >
+    <div class="col-lg-4 d-flex align-items-center">
+      <mat-card class="cardWithShadow boxed-auth">
+        <mat-card-content class="p-32">
+          <div class="text-center">
+            <app-branding></app-branding>
+          </div>
+
+          <div class="row m-t-24 custom-row">
+            <div class="col-12 col-sm-6">
+              <button mat-stroked-button class="w-100">
+                <div class="d-flex align-items-center">
+                  <img
+                    src="/assets/images/svgs/google-icon.svg"
+                    alt="google"
+                    width="16"
+                    class="m-r-8"
+                  />
+                  Sign in with Google
+                </div>
+              </button>
+            </div>
+            <div class="col-12 col-sm-6">
+              <button
+                mat-stroked-button
+                class="w-100 d-flex align-items-center"
+              >
+                <div class="d-flex align-items-center">
+                  <img
+                    src="/assets/images/svgs/facebook-icon.svg"
+                    alt="facebook"
+                    width="40"
+                    class="m-r-4"
+                  />
+                  Sign in with FB
+                </div>
+              </button>
+            </div>
+          </div>
+
+          <div class="or-border m-t-30">or sign up with</div>
+
+          <form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block">Name</mat-label>
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput formControlName="uname" />
+              @if(f['uname'].touched && f['uname'].invalid) {
+              <mat-hint class="m-b-16 error-msg">
+                @if(f['uname'].errors && f['uname'].errors['required']) {
+                <div class="text-error">Name is required.</div>
+                } @if(f['uname'].errors && f['uname'].errors['minlength']) {
+                <div class="text-error">Name should be 6 character.</div>
+                }
+              </mat-hint>
+              }
+            </mat-form-field>
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+              >Email Adddress</mat-label
+            >
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput type="email" formControlName="email" />
+              @if(f['email'].touched && f['email'].invalid) {
+              <mat-hint class="m-b-16 error-msg">
+                @if(f['email'].errors && f['email'].errors['required']) {
+                <div class="text-error">Email is required.</div>
+                }
+              </mat-hint>
+              }
+            </mat-form-field>
+            <!-- password -->
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+              >Password</mat-label
+            >
+            <mat-form-field appearance="outline" class="w-100" color="primary">
+              <input matInput type="password" formControlName="password" />
+              @if(f['password'].touched && f['password'].invalid) {
+              <mat-hint class="m-b-16 error-msg">
+                @if(f['password'].errors && f['password'].errors['required']) {
+                <div class="text-error">Password is required.</div>
+                }
+              </mat-hint>
+              }
+            </mat-form-field>
+
+            <button
+              mat-flat-button
+              color="primary"
+              class="w-100"
+              [disabled]="!form.valid"
+            >
+              Sign Up
+            </button>
+            <!-- input -->
+          </form>
+          <span class="d-block f-w-500 text-center m-t-24"
+            >Already have an Account?
+
+            <a
+              [routerLink]="['/authentication/boxed-login']"
+              class="text-decoration-none text-primary f-w-500 f-s-14"
+            >
+              Sign In</a
+            >
+          </span>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>

Web/src/app/pages/authentication/boxed-register/boxed-register.component.ts

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { CoreService } from '../../../services/core.service';
+import {
+  FormGroup,
+  FormControl,
+  Validators,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { MaterialModule } from '../../../material.module';
+import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
+
+@Component({
+  selector: 'app-boxed-register',
+  imports: [
+    RouterModule,
+    MaterialModule,
+    FormsModule,
+    BrandingComponent,
+    ReactiveFormsModule,
+  ],
+  templateUrl: './boxed-register.component.html',
+})
+export class AppBoxedRegisterComponent {
+  options: any;
+
+  constructor(private settings: CoreService, private router: Router) {
+    this.options = this.settings.getOptions();
+  }
+
+  form = new FormGroup({
+    uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
+    email: new FormControl('', [Validators.required]),
+    password: new FormControl('', [Validators.required]),
+  });
+
+  get f() {
+    return this.form.controls;
+  }
+
+  submit() {
+    // console.log(this.form.value);
+    this.router.navigate(['/dashboards/dashboard1']);
+  }
+}

Web/src/app/pages/authentication/boxed-two-steps/boxed-two-steps.component.html

@@ -0,0 +1,101 @@
+<div class="blank-layout-container justify-content-center align-items-center">
+  <div
+    class="position-relative row w-100 h-100 bg-gredient justify-content-center"
+  >
+    <div class="col-lg-4 d-flex align-items-center">
+      <mat-card class="cardWithShadow boxed-auth">
+        <mat-card-content class="p-32">
+          <div class="text-center">
+            <app-branding></app-branding>
+          </div>
+          <span class="f-s-14 d-block f-s-14 text-center m-t-30"
+            >We sent a verification code to your mobile. Enter the code from the
+            mobile in the field below.</span
+          >
+          <span class="f-w-600 d-block m-t-16 text-center">******1234</span>
+
+          <form class="m-t-30 p-t-30">
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+              >Type your 6 digits security code</mat-label
+            >
+            <div class="d-flex align-items-center"></div>
+            <div class="row custom-row">
+              <div class="col-2">
+                <mat-form-field
+                  appearance="outline"
+                  class="w-100"
+                  color="primary"
+                >
+                  <input matInput />
+                </mat-form-field>
+              </div>
+              <div class="col-2">
+                <mat-form-field
+                  appearance="outline"
+                  class="w-100"
+                  color="primary"
+                >
+                  <input matInput />
+                </mat-form-field>
+              </div>
+              <div class="col-2">
+                <mat-form-field
+                  appearance="outline"
+                  class="w-100"
+                  color="primary"
+                >
+                  <input matInput />
+                </mat-form-field>
+              </div>
+              <div class="col-2">
+                <mat-form-field
+                  appearance="outline"
+                  class="w-100"
+                  color="primary"
+                >
+                  <input matInput />
+                </mat-form-field>
+              </div>
+              <div class="col-2">
+                <mat-form-field
+                  appearance="outline"
+                  class="w-100"
+                  color="primary"
+                >
+                  <input matInput />
+                </mat-form-field>
+              </div>
+              <div class="col-2">
+                <mat-form-field
+                  appearance="outline"
+                  class="w-100"
+                  color="primary"
+                >
+                  <input matInput />
+                </mat-form-field>
+              </div>
+            </div>
+
+            <a
+              [routerLink]="['/dashboards/dashboard1']"
+              mat-flat-button
+              color="primary"
+              class="w-100"
+            >
+              Verify My Account
+            </a>
+            <!-- input -->
+          </form>
+          <span class="d-block f-w-500 d-block f-s-14 m-t-24"
+            >Didn't get the code?
+            <a
+              [routerLink]="['/dashboards/dashboard1']"
+              class="text-decoration-none text-primary f-w-500"
+              >Resend</a
+            >
+          </span>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>

Web/src/app/pages/authentication/boxed-two-steps/boxed-two-steps.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CoreService } from '../../../services/core.service';
+import { MaterialModule } from '../../../material.module';
+import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
+
+@Component({
+    selector: 'app-boxed-two-steps',
+    imports: [RouterModule, MaterialModule, BrandingComponent],
+    templateUrl: './boxed-two-steps.component.html'
+})
+export class AppBoxedTwoStepsComponent {
+  options;
+  
+  constructor(private settings: CoreService) {
+    this.options = this.settings.getOptions();
+  }
+}

Web/src/app/pages/authentication/error/error.component.html

@@ -0,0 +1,10 @@
+<div class="blank-layout-container justify-content-center">
+  <div class="row">
+    <div class="col-12 text-center">
+      <img src="/assets/images/backgrounds/errorimg.svg" alt="error-bg" />
+      <h2 class="auth-title f-w-600">Opps!!!</h2>
+      <h6 class="f-s-20 f-w-600 m-b-30">This page you are looking for could not be found.</h6>
+      <a mat-flat-button [routerLink]="['/']">Go back to Home</a>
+    </div>
+  </div>
+</div>

Web/src/app/pages/authentication/error/error.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { MaterialModule } from '../../../material.module';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+    selector: 'app-error',
+    imports: [RouterModule, MaterialModule, MatButtonModule],
+    templateUrl: './error.component.html'
+})
+export class AppErrorComponent {}

Web/src/app/pages/authentication/maintenance/maintenance.component.html

@@ -0,0 +1,11 @@
+<div class="blank-layout-container justify-content-center">
+    <div class="row">
+      <div class="col-12 text-center">
+        <img src="/assets/images/backgrounds/maintenance.svg" alt="error-bg" />
+        <h2 class="auth-title f-w-600">Maintenance Mode!!!</h2>
+        <h6 class="f-s-20 f-w-600 m-b-30">Website is Under Construction. Check back later!</h6>
+        <a mat-flat-button [routerLink]="['/dashboards/dashboard1']">Go back to Home</a>
+      </div>
+    </div>
+  </div>
+  

Web/src/app/pages/authentication/maintenance/maintenance.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { MaterialModule } from '../../../material.module';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'app-maintenance',
+  imports: [RouterModule, MaterialModule, MatButtonModule],
+  templateUrl: './maintenance.component.html',
+})
+export class AppMaintenanceComponent {}

Web/src/app/pages/authentication/side-forgot-password/side-forgot-password.component.html

@@ -0,0 +1,72 @@
+<div class="blank-layout-container justify-content-center">
+  <div class="position-relative row w-100 h-100">
+    <div class="col-lg-7 col-xl-8 bg-gredient p-0">
+      <div class="p-24 h-100">
+        <app-branding></app-branding>
+
+        <div
+          class="align-items-center justify-content-center img-height d-none d-lg-flex"
+        >
+          <img
+            src="/assets/images/backgrounds/login-bg.svg"
+            alt="login"
+            style="max-width: 500px"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-5 col-xl-4 p-0 d-flex justify-content-center">
+      <div
+        class="p-32 d-flex align-items-start align-items-lg-center justify-content-center h-100"
+      >
+        <div class="row justify-content-center w-100">
+          <div class="col-lg-9">
+            <h4 class="f-w-700 f-s-24 m-0">Forgot your password?</h4>
+            <span class="f-s-14 d-block f-s-14 m-t-8"
+              >Please enter the email address associated with your account and
+              We will email you a link to reset your password.</span
+            >
+
+            <form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
+              <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+                >Email Adddress</mat-label
+              >
+              <mat-form-field
+                appearance="outline"
+                class="w-100"
+                color="primary"
+              >
+                <input matInput type="email" formControlName="email" />
+                @if(f['email'].touched && f['email'].invalid) {
+                <mat-hint class="m-b-16 error-msg">
+                  @if(f['email'].errors && f['email'].errors['required']) {
+                  <div class="text-error">Email is required.</div>
+                  }
+                </mat-hint>
+                }
+              </mat-form-field>
+
+              <button
+                mat-flat-button
+                color="primary"
+                class="w-100"
+                [disabled]="!form.valid"
+              >
+                Forgot Password
+              </button>
+              <a
+                [routerLink]="['/authentication/login']"
+                mat-stroked-button
+                color="primary"
+                class="w-100 m-t-8"
+              >
+                Back to Login
+              </a>
+              <!-- input -->
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

Web/src/app/pages/authentication/side-forgot-password/side-forgot-password.component.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import { CoreService } from '../../../services/core.service';
+import {
+  FormGroup,
+  FormControl,
+  Validators,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { MaterialModule } from '../../../material.module';
+import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
+
+@Component({
+  selector: 'app-side-forgot-password',
+  imports: [
+    RouterModule,
+    MaterialModule,
+    FormsModule,
+    ReactiveFormsModule,
+    BrandingComponent,
+  ],
+  templateUrl: './side-forgot-password.component.html',
+})
+export class AppSideForgotPasswordComponent {
+  options: any;
+
+  constructor(private settings: CoreService, private router: Router) {
+    this.options = this.settings.getOptions();
+  }
+
+  form = new FormGroup({
+    email: new FormControl('', [Validators.required]),
+  });
+
+  get f() {
+    return this.form.controls;
+  }
+
+  submit() {
+    // console.log(this.form.value);
+    this.router.navigate(['/dashboards/dashboard1']);
+  }
+}

Web/src/app/pages/authentication/side-login/side-login.component.html

@@ -0,0 +1,138 @@
+<div class="blank-layout-container justify-content-center">
+  <div class="position-relative row w-100 h-100">
+    <div class="col-lg-7 col-xl-8 bg-gredient p-0">
+      <div class="p-24 h-100">
+        <app-branding></app-branding>
+
+        <div
+          class="align-items-center justify-content-center img-height d-none d-lg-flex"
+        >
+          <img
+            src="/assets/images/backgrounds/login-bg.svg"
+            alt="login"
+            style="max-width: 500px"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-5 col-xl-4 p-0">
+      <div
+        class="p-32 d-flex align-items-start align-items-lg-center justify-content-center h-100"
+      >
+        <div class="row justify-content-center w-100">
+          <div class="col-lg-9 max-width-form">
+            <h4 class="f-w-700 f-s-24 m-0">Welcome to Modernize</h4>
+            <span class="f-s-14 d-block f-s-14 m-t-8"
+              >Your Admin Dashboard</span
+            >
+
+            <div class="row m-t-24">
+              <div class="col-12 col-sm-6">
+                <button mat-stroked-button class="w-100">
+                  <div class="d-flex align-items-center">
+                    <img
+                      src="/assets/images/svgs/google-icon.svg"
+                      alt="google"
+                      width="16"
+                      class="m-r-8"
+                    />
+                    Sign in with Google
+                  </div>
+                </button>
+              </div>
+              <div class="col-12 col-sm-6">
+                <button
+                  mat-stroked-button
+                  class="w-100 d-flex align-items-center"
+                >
+                  <div class="d-flex align-items-center">
+                    <img
+                      src="/assets/images/svgs/facebook-icon.svg"
+                      alt="facebook"
+                      width="40"
+                      class="m-r-4"
+                    />
+                    Sign in with FB
+                  </div>
+                </button>
+              </div>
+            </div>
+
+            <div class="or-border m-t-30">or sign in with</div>
+
+            <form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
+              <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+                >Username</mat-label
+              >
+              <mat-form-field
+                appearance="outline"
+                class="w-100"
+                color="primary"
+              >
+                <input matInput formControlName="uname" />
+                @if(f['uname'].touched && f['uname'].invalid) {
+                <mat-hint class="m-b-16 error-msg">
+                  @if(f['uname'].errors && f['uname'].errors['required']) {
+                  <div class="text-error">Name is required.</div>
+                  } @if(f['uname'].errors && f['uname'].errors['minlength']) {
+                  <div class="text-error">Name should be 6 character.</div>
+                  }
+                </mat-hint>
+                }
+              </mat-form-field>
+
+              <!-- password -->
+              <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+                >Password</mat-label
+              >
+              <mat-form-field
+                appearance="outline"
+                class="w-100"
+                color="primary"
+              >
+                <input matInput type="password" formControlName="password" />
+                @if(f['password'].touched && f['password'].invalid) {
+                <mat-hint class="m-b-16 error-msg">
+                  @if( f['password'].errors && f['password'].errors['required'])
+                  {
+                  <div class="text-error">Password is required.</div>
+                  }
+                </mat-hint>
+                }
+              </mat-form-field>
+
+              <div class="d-flex align-items-center m-b-12">
+                <mat-checkbox color="primary"
+                  >Remember this Device</mat-checkbox
+                >
+                <a
+                  [routerLink]="['/authentication/side-forgot-pwd']"
+                  class="text-primary f-w-600 text-decoration-none m-l-auto f-s-14"
+                  >Forgot Password ?</a
+                >
+              </div>
+              <button
+                mat-flat-button
+                color="primary"
+                class="w-100"
+                [disabled]="!form.valid"
+              >
+                Sign In
+              </button>
+              <!-- input -->
+            </form>
+            <span class="d-block f-w-500 d-block m-t-24"
+              >New to Modernize?
+              <a
+                [routerLink]="['/authentication/side-register']"
+                class="text-decoration-none text-primary f-w-500 f-s-14"
+              >
+                Create an account</a
+              >
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

Web/src/app/pages/authentication/side-login/side-login.component.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { CoreService } from '../../../services/core.service';
+import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { MaterialModule } from '../../../material.module';
+import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
+
+@Component({
+    selector: 'app-side-login',
+    imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule, BrandingComponent],
+    templateUrl: './side-login.component.html'
+})
+export class AppSideLoginComponent {
+  options: any;
+
+  constructor(private settings: CoreService, private router: Router) {
+    this.options = this.settings.getOptions();
+  }
+
+  form = new FormGroup({
+    uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
+    password: new FormControl('', [Validators.required]),
+  });
+
+  get f() {
+    return this.form.controls;
+  }
+
+  submit() {
+    // console.log(this.form.value);
+    this.router.navigate(['/dashboards/dashboard1']);
+  }
+}

Web/src/app/pages/authentication/side-register/side-register.component.html

@@ -0,0 +1,146 @@
+<div class="blank-layout-container justify-content-center">
+  <div class="position-relative row w-100 h-100">
+    <div class="col-lg-7 col-xl-8 bg-gredient p-0">
+      <div class="p-24 h-100">
+        <app-branding></app-branding>
+
+        <div
+          class="align-items-center justify-content-center img-height d-none d-lg-flex"
+        >
+          <img
+            src="/assets/images/backgrounds/login-bg.svg"
+            alt="login"
+            style="max-width: 500px"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-5 col-xl-4 p-0">
+      <div
+        class="p-32 d-flex align-items-start align-items-lg-center justify-content-center h-100"
+      >
+        <div class="row justify-content-center w-100">
+          <div class="col-lg-9 max-width-form">
+            <h4 class="f-w-700 f-s-24 m-0">Welcome to Modernize</h4>
+            <span class="f-s-14 d-block f-s-14 m-t-8"
+              >Your Admin Dashboard</span
+            >
+
+            <div class="row m-t-24">
+              <div class="col-12 col-sm-6">
+                <button mat-stroked-button class="w-100">
+                  <div class="d-flex align-items-center">
+                    <img
+                      src="/assets/images/svgs/google-icon.svg"
+                      alt="google"
+                      width="16"
+                      class="m-r-8"
+                    />
+                    Sign in with Google
+                  </div>
+                </button>
+              </div>
+              <div class="col-12 col-sm-6">
+                <button
+                  mat-stroked-button
+                  class="w-100 d-flex align-items-center"
+                >
+                  <div class="d-flex align-items-center">
+                    <img
+                      src="/assets/images/svgs/facebook-icon.svg"
+                      alt="facebook"
+                      width="40"
+                      class="m-r-4"
+                    />
+                    Sign in with FB
+                  </div>
+                </button>
+              </div>
+            </div>
+
+            <div class="or-border m-t-30">or sign up with</div>
+
+            <form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
+              <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+                >Name</mat-label
+              >
+              <mat-form-field
+                appearance="outline"
+                class="w-100"
+                color="primary"
+              >
+                <input matInput formControlName="uname" />
+                @if(f['uname'].touched && f['uname'].invalid) {
+                <mat-hint class="m-b-16 error-msg">
+                  @if(f['uname'].errors && f['uname'].errors['required']) {
+                  <div class="text-error">Name is required.</div>
+                  } @if(f['uname'].errors && f['uname'].errors['minlength']) {
+                  <div class="text-error">Name should be 6 character.</div>
+                  }
+                </mat-hint>
+                }
+              </mat-form-field>
+              <!-- email -->
+              <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+                >Email Address</mat-label
+              >
+              <mat-form-field
+                appearance="outline"
+                class="w-100"
+                color="primary"
+              >
+                <input matInput type="email" formControlName="email" />
+                @if(f['email'].touched && f['email'].invalid) {
+                <mat-hint class="m-b-16 error-msg">
+                  @if(f['email'].errors && f['email'].errors['required']) {
+                  <div class="text-error">Email is required.</div>
+                  }
+                </mat-hint>
+                }
+              </mat-form-field>
+              <!-- password -->
+              <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+                >Password</mat-label
+              >
+              <mat-form-field
+                appearance="outline"
+                class="w-100"
+                color="primary"
+              >
+                <input matInput type="password" formControlName="password" />
+                @if(f['password'].touched && f['password'].invalid) {
+                <mat-hint class="m-b-16 error-msg">
+                  @if( f['password'].errors && f['password'].errors['required'])
+                  {
+                  <div class="text-error">Password is required.</div>
+                  }
+                </mat-hint>
+                }
+              </mat-form-field>
+
+              <button
+                mat-flat-button
+                color="primary"
+                class="w-100"
+                [disabled]="!form.valid"
+              >
+                Sign Up
+              </button>
+              <!-- input -->
+            </form>
+            <span class="d-block f-w-500 d-block m-t-24"
+              >Already have an Account?
+
+              <a
+                [routerLink]="['/authentication/login']"
+                class="text-decoration-none text-primary f-w-500 f-s-14"
+              >
+                Sign In</a
+              >
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

Web/src/app/pages/authentication/side-register/side-register.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { CoreService } from '../../../services/core.service';
+import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+import { MaterialModule } from '../../../material.module';
+import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
+
+@Component({
+    selector: 'app-side-register',
+    imports: [RouterModule, MaterialModule, FormsModule, ReactiveFormsModule, BrandingComponent],
+    templateUrl: './side-register.component.html'
+})
+export class AppSideRegisterComponent {
+  options: any;
+
+  constructor(private settings: CoreService, private router: Router) {
+    this.options = this.settings.getOptions();
+  }
+
+  form = new FormGroup({
+    uname: new FormControl('', [Validators.required, Validators.minLength(6)]),
+    email: new FormControl('', [Validators.required]),
+    password: new FormControl('', [Validators.required]),
+  });
+
+  get f() {
+    return this.form.controls;
+  }
+
+  submit() {
+    // console.log(this.form.value);
+    this.router.navigate(['/dashboards/dashboard1']);
+  }
+}

Web/src/app/pages/authentication/side-two-steps/side-two-steps.component.html

@@ -0,0 +1,114 @@
+<div class="blank-layout-container justify-content-center">
+  <div class="position-relative row w-100 h-100">
+    <div class="col-lg-8 col-xl-9 bg-gredient p-0">
+      <div class="p-24 h-100">
+        <app-branding></app-branding>
+
+        <div
+          class="align-items-center justify-content-center img-height d-none d-lg-flex"
+        >
+          <img
+            src="/assets/images/backgrounds/login-bg.svg"
+            alt="login"
+            style="max-width: 500px"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-4 col-xl-3 p-0 d-flex justify-content-center">
+      <div
+        class="p-32 d-flex align-items-start align-items-lg-center h-100 max-width-form justify-content-center"
+      >
+        <div>
+          <h4 class="f-w-700 f-s-20 m-0">Two Step Verification</h4>
+          <span class="f-s-14 d-block f-s-14 m-t-24"
+            >We sent a verification code to your mobile. Enter the code from the
+            mobile in the field below.</span
+          >
+          <span class="f-w-600 d-block m-t-16">******1234</span>
+
+          <form class="m-t-30 p-t-30">
+            <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+              >Type your 6 digits security code</mat-label
+            >
+            <div class="d-flex align-items-center"></div>
+            <div class="row custom-row">
+              <div class="col-2">
+                <mat-form-field
+                  appearance="outline"
+                  class="w-100"
+                  color="primary"
+                >
+                  <input matInput />
+                </mat-form-field>
+              </div>
+              <div class="col-2">
+                <mat-form-field
+                  appearance="outline"
+                  class="w-100"
+                  color="primary"
+                >
+                  <input matInput />
+                </mat-form-field>
+              </div>
+              <div class="col-2">
+                <mat-form-field
+                  appearance="outline"
+                  class="w-100"
+                  color="primary"
+                >
+                  <input matInput />
+                </mat-form-field>
+              </div>
+              <div class="col-2">
+                <mat-form-field
+                  appearance="outline"
+                  class="w-100"
+                  color="primary"
+                >
+                  <input matInput />
+                </mat-form-field>
+              </div>
+              <div class="col-2">
+                <mat-form-field
+                  appearance="outline"
+                  class="w-100"
+                  color="primary"
+                >
+                  <input matInput />
+                </mat-form-field>
+              </div>
+              <div class="col-2">
+                <mat-form-field
+                  appearance="outline"
+                  class="w-100"
+                  color="primary"
+                >
+                  <input matInput />
+                </mat-form-field>
+              </div>
+            </div>
+
+            <a
+              [routerLink]="['/dashboards/dashboard1']"
+              mat-flat-button
+              color="primary"
+              class="w-100"
+            >
+              Verify My Account
+            </a>
+            <!-- input -->
+          </form>
+          <span class="d-block f-w-500 d-block f-s-14 m-t-24"
+            >Didn't get the code?
+            <a
+              [routerLink]="['/dashboards/dashboard1']"
+              class="text-decoration-none text-primary f-w-500"
+              >Resend</a
+            >
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

Web/src/app/pages/authentication/side-two-steps/side-two-steps.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CoreService } from '../../../services/core.service';
+import { MaterialModule } from '../../../material.module';
+import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
+
+@Component({
+  selector: 'app-side-two-steps',
+  imports: [RouterModule, MaterialModule, BrandingComponent],
+  templateUrl: './side-two-steps.component.html',
+})
+export class AppSideTwoStepsComponent {
+  options: any;
+
+  constructor(private settings: CoreService) {
+    this.options = this.settings.getOptions();
+  }
+}

Web/src/app/pages/front-pages/about-us/about-us.component.html

@@ -0,0 +1,169 @@
+<div class="contact-page">
+  <div class="banner-section bg-light-primary contact-herder spacing-top-bottom">
+    <div class="container p-y-20">
+      <div class="row align-items-center">
+        <div class="col-lg-6">
+          <h1 class="m-b-24 f-s-48 lh-normal section-sub-title">
+            Get to know Modernize Dashboard Template
+          </h1>
+          <div class="hstack">
+            <a mat-flat-button color="primary">Create an account</a>
+            <a mat-stroked-button color="primary" class="border-primary">View Open
+              Positions</a>
+          </div>
+        </div>
+
+        <div class="col-lg-6">
+          <p class="lh-base m-t-32">
+            Do you need a highly customizable and developer friendly premium
+            Angular admin template packed with numerous features? Modernize
+            Angular Admin Template has everything you need. This bootstrap based
+            admin template is designed in accordance with industry standards and
+            best practices to provide you.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="spacing-top-bottom setup-process">
+    <div class="container">
+      <h2 class="text-center section-sub-title m-b-48 f-s-40 lh-normal">
+        The hassle-free setup process
+      </h2>
+      <div class="row">
+        @for(topcard of setupCards; track topcard.title) {
+        <div class="col-lg-3 col-sm-6 d-flex align-items-stretch">
+          <mat-card class="shadow-none text-center w-100 bg-light-{{
+              topcard.color
+            }} rounded-8 ">
+            <mat-card-content>
+              <div class="m-t-16">
+                @if(topcard.id!==2){
+                <img [src]="topcard.img" alt="users" width="40" class="rounded-circle" />
+                }
+
+                <h6 class="f-s-16 m-t-16">
+                  {{ topcard.title }}
+                </h6>
+                <p class="f-s-14 m-t-16 m-b-0">
+                  {{ topcard.subtitle }}
+                </p>
+                @if(topcard.id===2){
+                <img [src]="topcard.imgMain" alt="image" class="img-fluid w-100 m-t-10 m-b--32" />
+                }
+              </div>
+            </mat-card-content>
+          </mat-card>
+        </div>
+        }
+      </div>
+    </div>
+  </div>
+
+  <mat-divider></mat-divider>
+
+  <div class="spacing-top-bottom key-metric">
+    <div class="container">
+      <div class="row justify-content-between">
+        <div class="col-md-5">
+          <div class="m-b-32">
+            <h2 class="f-s-40 m-b-16 section-sub-title f-s-40 lh-normal">Key metric at a glance</h2>
+            <p class="f-s-14 m-0 lh-base">
+              From the year we were founded to the impressive customer base
+              we've built, and the growth percentages that reflect our
+              continuous improvement, these numbers tell our story at a glance.
+              Explore the data that drives our mission and underscores our
+              commitment to excellence.
+            </p>
+          </div>
+        </div>
+        <div class="col-md-6">
+          <div class="row stat-section">
+            @for (stat of stats; track stat) {
+            <div class="col-6 m-b-32">
+              <div class="stat-block">
+                <p class="stat-label f-s-12 f-w-400 text-uppercase text-primary m-y-0">
+                  {{ stat.label }}
+                </p>
+                <h2 class="stat-value f-s-48 lh-normal section-sub-title">
+                  {{ stat.value }}
+                </h2>
+                <p class="f-s-14 m-y-0">{{ stat.description }}</p>
+              </div>
+            </div>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="our-leadership spacing-top p-b-48">
+    <app-image-slider></app-image-slider>
+  </div>
+
+  <div class="features spacing-bottom">
+    <div class="container">
+      <div class="row align-items-center justify-content-between">
+        <!--row-->
+        <div class="col-md-5 m-b-30">
+          <div class="client-margin">
+            <h2 class="lh-normal f-s-40 m-b-16 section-sub-title">
+              What our clients <br> think <img src="assets/images/front-pages/logoIcon.svg" alt="logo" />
+              about us?
+            </h2>
+            <p class="m-0">
+              Our users' feedback is a testament to our commitment to quality
+              and user satisfaction. Read what they have to say about their
+              journey with us.
+            </p>
+          </div>
+        </div>
+        <div class="col-md-5">
+          <mat-card class="cardWithShadow b-1 rounded-8 m-b-0 p-48">
+            <mat-card-content>
+              <mat-card-title class="f-s-24 f-w-600 m-b-24">Features availability</mat-card-title>
+
+              <div class="d-flex align-items-center gap-16 m-b-24">
+                <div>
+                  <img [src]="currentUser().img" [alt]="currentUser().name" class="rounded-circle" width="40" />
+                </div>
+                <h6 class="f-s-14 f-w-600">{{ currentUser().name }}</h6>
+              </div>
+
+              <p class="f-s-14 m-b-16 m-t-0">
+                Our users' feedback is a testament to our commitment to quality
+                and user satisfaction. Read what they have to say about their
+                journey with us.
+              </p>
+
+              <mat-divider></mat-divider>
+
+              <div class="d-flex align-items-center gap-10 m-t-8">
+                <button class="bg-light icon-32 d-flex align-items-center justify-content-center" mat-icon-button
+                  (click)="goPrev()">
+                  <i-tabler name="chevron-left"
+                    class="icon-18 d-flex align-items-center justify-content-center"></i-tabler>
+                </button>
+
+                <span class="f-s-14">{{ displayCount() }}</span>
+
+                <button class="bg-light icon-32 d-flex align-items-center justify-content-center" mat-icon-button
+                  (click)="goNext()">
+                  <i-tabler name="chevron-right"
+                    class="icon-18 d-flex align-items-center justify-content-center"></i-tabler>
+                </button>
+              </div>
+            </mat-card-content>
+          </mat-card>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="footer">
+    <app-footer></app-footer>
+  </div>
+
+</div>

Web/src/app/pages/front-pages/about-us/about-us.component.scss

@@ -0,0 +1,23 @@
+.contact-page {
+
+  .setup-process {
+
+    mat-card-content {
+      padding: 0px !important;
+      padding: 30px 16px !important;
+    }
+  }
+
+  .key-metric {
+    box-shadow: 0px 6px 12px rgba(127, 145, 156, 0.12);
+  }
+
+  .features {
+
+    .cardWithShadow {
+      mat-card-content {
+        padding: 0px !important;
+      }
+    }
+  }
+}

Web/src/app/pages/front-pages/about-us/about-us.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutUsComponent } from './about-us.component';
+
+describe('AboutUsComponent', () => {
+  let component: AboutUsComponent;
+  let fixture: ComponentFixture<AboutUsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AboutUsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AboutUsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Web/src/app/pages/front-pages/about-us/about-us.component.ts

@@ -0,0 +1,48 @@
+import { Component, computed, signal } from '@angular/core';
+import { IconModule } from '../../../icon/icon.module';
+import { MaterialModule } from '../../../material.module';
+import { ImageSliderComponent } from '../image-slider/image-slider.component';
+import { FooterComponent } from '../footer/footer.component';
+//import { PagePricingComponent } from '../page-pricing/page-pricing.component';
+import {
+  setupCards,
+  stats,
+  users,
+} from '../front-pagesData';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-about-us',
+  imports: [IconModule,MaterialModule ,CommonModule,ImageSliderComponent,FooterComponent,
+    //PagePricingComponent
+  ],
+  templateUrl: './about-us.component.html',
+  styleUrl: './about-us.component.scss'
+})
+export class AboutUsComponent {
+  setupCards=setupCards;
+  stats = stats;
+    currentIndex = signal(0); // Starting from 0
+    users = users;
+   // Computed values to auto-update template
+   currentUser = computed(() => this.users[this.currentIndex()]);
+   displayCount = computed(
+     () => `${this.currentIndex() + 1}/${this.users.length}`
+   ); 
+    goPrev() {
+       if (this.currentIndex() > 0) {
+         this.currentIndex.update((i) => i - 1);
+       }
+     }
+   
+     goNext() {
+       if (this.currentIndex() < this.users.length - 1) {
+         this.currentIndex.update((i) => i + 1);
+       }
+ 
+ 
+      }
+
+
+     
+}

Web/src/app/pages/front-pages/blog-details/blog-details.component.html

@@ -0,0 +1,116 @@
+<div class="banner-section bg-light-primary spacing-top-bottom">
+  <div class="container">
+    <p class="text-primary text-center text-uppercase f-s-14 m-t-0">
+      Blog Page
+    </p>
+    <h1 class="text-center f-s-48 section-sub-title lh-normal">Latest blog & news</h1>
+  </div>
+</div>
+
+<div class="blog-details-content spacing-top-bottom">
+  <div class="container">
+    <!-- ----------------------------------------------------------------- -->
+    <!-- If Blog is available -->
+    <!-- ----------------------------------------------------------------- -->
+    @if(blogDetail()) {
+    <mat-card class="cardWithShadow">
+      <img mat-card-image src="{{ blogDetail()?.imgSrc }}" alt="Photo of a Shiba Inu" height="440" />
+      <div class="detail-card-overlay h-100 d-flex align-items-end justify-content-end">
+        <span class="f-s-12 m-y-16 f-w-600 bg-white rounded-pill p-x-8 m-r-16">2 mins Read</span>
+      </div>
+      <mat-card-content class="p-24 b-b-1">
+        <div class="user-category">
+          <div>
+            <img src="{{ blogDetail()?.user }}" class="rounded-circle" width="40" />
+          </div>
+          <span class="f-s-12 m-y-16 f-w-600 rounded-pill p-x-8 p-y-4 d-inline-block text-dark bg-light">{{
+            blogDetail()?.category }}</span>
+        </div>
+
+        <mat-card-title class="f-s-36 lh-normal section-sub-title">{{
+          blogDetail()?.title }}
+        </mat-card-title>
+        <div class="d-flex align-items-center justify-content-center m-t-24 justify-content-between">
+          <div class="d-flex align-items-center gap-24">
+            <span class="f-s-14 d-flex align-items-center gap-8"><i-tabler name="eye" class="icon-18"></i-tabler>{{
+              blogDetail()?.views }}</span>
+            <span class="f-s-14 d-flex align-items-center gap-8"><i-tabler name="message-2"
+                class="icon-18"></i-tabler>4</span>
+          </div>
+          <span class="f-s-14 d-flex align-items-center">
+            <i-tabler name="point" class="icon-18"></i-tabler>
+            {{ blogDetail()?.date }}
+          </span>
+        </div>
+      </mat-card-content>
+      <mat-card-content class="heading-section">
+        <h2 class="f-s-28 lh-normal m-y-12 section-sub-title">Main Heading & Points</h2>
+        <p class="f-s-14">
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+          industry's standard dummy text ever since
+          the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
+          has survived not only five centuries,
+          but also the leap into electronic typesetting,
+          remaining essentially unchanged. It was popularised in the
+        </p>
+        <ul>
+          <li class="f-s-14">Vivamus eu lacus scelerisque, placerat commodo lectus.</li>
+          <li class="f-s-14">Etiam et ante at ex porta fringilla.</li>
+          <li class="f-s-14">Nullam dignissim sem eu magna aliquet, sit amet volutpat tellus</li>
+        </ul>
+        <p class="f-s-14">
+          Unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not
+          only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
+          popularised in the
+        </p>
+        <mat-divider></mat-divider>
+        <p class="f-s-14">
+          We are a dedicated team of passionate product managers, developers, UX/UI designers, QA engineers experts
+          helping businesses from new startups
+        </p>
+        <mat-divider></mat-divider>
+        <p class="f-s-14">
+          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
+          some form, by injected humour, or randomised words which don't look even slightly believable making this the
+          first true generator on the Internet. It uses a dictionary
+        </p>
+        <mat-divider class="m-b-16"></mat-divider>
+        <h2 class="f-s-21 lh-normal">Tags</h2>
+        <ul>
+          <li class="f-s-14">Trends</li>
+          <li class="f-s-14">Design</li>
+          <li class="f-s-14">Research</li>
+        </ul>
+
+        <mat-divider class="m-b-16"></mat-divider>
+        <h2 class="f-s-21 lh-normal">Share</h2>
+        <ul class="text-primary">
+          <li class="f-s-14"><a class="text-primary text-decoration-none" href="javascript:void(0)">Facebook</a></li>
+          <li class="f-s-14"><a class="text-primary text-decoration-none" href="javascript:void(0)">Twitter</a></li>
+          <li class="f-s-14"><a class="text-primary text-decoration-none" href="javascript:void(0)">Linkedin</a></li>
+        </ul>
+
+        <mat-divider class="m-b-16"></mat-divider>
+        <h2 class="f-s-21 lh-normal">Join our newsletter</h2>
+        <p class="f-s-14">Email address : <a href="javascript:void(0)" class="f-s-14 text-primary text-decoration-none">Subscribe</a></p>
+      </mat-card-content>
+    </mat-card>
+    }
+
+    <!-- ----------------------------------------------------------------- -->
+    <!-- If Blog isn't available -->
+    <!-- ----------------------------------------------------------------- -->
+
+    @if (!blogDetail() || blogDetail().length === 0) {
+    <mat-card class="cardWithShadow">
+      <mat-card-content>
+        <p>No blog post available.</p>
+      </mat-card-content>
+    </mat-card>
+    }
+  </div>
+</div>
+
+<div class="footer">
+  <app-footer></app-footer>
+</div>

Web/src/app/pages/front-pages/blog-details/blog-details.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BlogDetailsComponent } from './blog-details.component';
+
+describe('BlogDetailsComponent', () => {
+  let component: BlogDetailsComponent;
+  let fixture: ComponentFixture<BlogDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BlogDetailsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BlogDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Web/src/app/pages/front-pages/blog-details/blog-details.component.ts

@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, OnInit, signal } from '@angular/core';
+import { IconModule } from '../../../icon/icon.module';
+import { MaterialModule } from '../../../material.module';
+import { FooterComponent } from '../footer/footer.component';
+import { FrontEndService } from '../../../services/apps/front-pages/front-end.service';
+
+@Component({
+  selector: 'app-blog-details',
+  imports: [IconModule, MaterialModule, CommonModule,
+    FooterComponent
+  ],
+  templateUrl: './blog-details.component.html',
+  styleUrl: './blog-details.component.scss'
+})
+export class BlogDetailsComponent implements OnInit {
+  blogDetail = signal<any>(null);
+  private frontendService = inject(FrontEndService);
+  ngOnInit(): void {
+    const selected = this.frontendService.getBlog()();
+
+    if (selected) {
+      this.blogDetail.set(selected);
+    } else {
+      // Fallback if accessed directly (e.g., from sidebar or refresh)
+      const defaultBlog = {
+        id: 1,
+        time: "2 mins Read",
+        imgSrc: "/assets/images/blog/blog-img1.jpg",
+        user: "/assets/images/profile/user-1.jpg",
+        title: "As yen tumbles, gadget-loving Japan goes for secondhand iPhones",
+        views: "9,125",
+        category: "Social",
+        comments: 3,
+        date: "Mon, Dec 23"
+      };
+      this.blogDetail.set(defaultBlog);
+    }
+  }
+}

Web/src/app/pages/front-pages/blog/blog.component.html

@@ -0,0 +1,55 @@
+<div class="banner-section bg-light-primary spacing-top-bottom">
+  <div class="container">
+    <p class="text-primary text-center text-uppercase f-s-14 m-t-0">
+      Blog Page
+    </p>
+    <h1 class="text-center f-s-48 section-sub-title lh-normal">Latest blog & news</h1>
+  </div>
+</div>
+
+<div class="spacing-top-bottom">
+  <div class="container">
+    <div class="row">
+      @for(cardimg of cardimgs; track cardimg.imgSrc) {
+      <div class="col-sm-6 col-lg-4">
+        <mat-card class="cardWithShadow card2 position-relative card-hover cursor-pointer" (click)="getNavigate(cardimg)">
+          <img mat-card-image src="{{ cardimg.imgSrc }}" alt="Photo of a Shiba Inu" />
+          <div class="card-overlay h-100 d-flex align-items-end justify-content-end">
+            <mat-chip class="m-r-16 bg-white">{{
+              cardimg.time
+              }}</mat-chip>
+          </div>
+
+          <mat-card-content class="p-y-24">
+            <div class="user-category">
+              <div>
+                <img src="{{ cardimg.user }}" class="rounded-circle" width="40" />
+              </div>
+              <mat-chip class="m-y-16 bg-light">{{
+                cardimg.category
+                }}</mat-chip>
+            </div>
+            <mat-card-title>{{ cardimg.title }}</mat-card-title>
+            <div class="d-flex align-items-center justify-content-center m-t-24">
+              <div class="d-flex align-items-center">
+                <span class="m-r-12 f-s-14 d-flex align-items-center"><i-tabler name="eye"
+                    class="icon-18 m-r-4"></i-tabler>{{ cardimg.views }}</span>
+                <span class="f-s-14 d-flex align-items-center"><i-tabler name="message-2"
+                    class="icon-18 m-r-4"></i-tabler>{{ cardimg.comments }}</span>
+              </div>
+              <span class="m-l-auto f-s-14 d-flex align-items-center">
+                <i-tabler name="point" class="icon-14 m-r-4 d-flex"></i-tabler>
+                {{ cardimg.date }}
+              </span>
+            </div>
+          </mat-card-content>
+        </mat-card>
+      </div>
+      }
+    </div>
+  </div>
+</div>
+
+<div class="footer">
+  <app-footer></app-footer>
+</div>

Web/src/app/pages/front-pages/blog/blog.component.scss

@@ -0,0 +1,24 @@
+
+
+.social-btns {
+  margin-top: 20px;
+
+  .btn-icon {
+    width: 25px !important;
+    height: 25px !important;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    tabler-icon {
+      width: 16px !important;
+      height: 16px !important;
+    }
+  }
+
+  .btn-add-story {
+    font-size: 0.75rem;
+    padding: 0.35rem 0.75rem;
+  }
+}

Web/src/app/pages/front-pages/blog/blog.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { Items } from './items';
+import { BlogComponent } from './blog.component';
 
-describe('Items', () => {
-  let component: Items;
-  let fixture: ComponentFixture<Items>;
+describe('BlogComponent', () => {
+  let component: BlogComponent;
+  let fixture: ComponentFixture<BlogComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [Items]
+      imports: [BlogComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(Items);
+    fixture = TestBed.createComponent(BlogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

Web/src/app/pages/front-pages/blog/blog.component.ts

@@ -0,0 +1,32 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { IconModule } from '../../../icon/icon.module';
+import { MaterialModule } from '../../../material.module';
+import { cardimgs } from '../front-pagesData';
+import { FooterComponent } from '../footer/footer.component';
+import { Router } from '@angular/router';
+import { FrontEndService } from '../../../services/apps/front-pages/front-end.service';
+
+@Component({
+  selector: 'app-blog',
+  imports: [IconModule, MaterialModule, FooterComponent,],
+  templateUrl: './blog.component.html',
+  styleUrl: './blog.component.scss'
+})
+export class BlogComponent implements OnInit {
+
+  private router = inject(Router);
+  private frontendService = inject(FrontEndService);
+  cardimgs = cardimgs;
+
+  ngOnInit() {
+    console.log(cardimgs, 'cardimgs');
+  }
+
+  getNavigate(cardimg: any) {
+    console.log('cardimg--->', cardimg);
+    this.frontendService.setBlog(cardimg);
+    this.router.navigate(['front-pages/blog-details'])
+
+  }
+
+}

Web/src/app/pages/front-pages/contact/contact.component.html

@@ -0,0 +1,103 @@
+<div class="contact-content">
+  <!-- Light Blue Section -->
+  <div class="banner-section bg-light-primary p-y-80">
+    <div class="container m-b-80 p-b-80">
+      <div class="container-content">
+        <p class="text-primary text-center text-uppercase f-s-14 m-t-0"> Contact us</p>
+        <h1 class="text-center f-s-48 section-sub-title lh-normal">We'd love to hear from you</h1>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-content">
+    <form>
+      <div class="container">
+        <!-- Map stays inside, but will visually float out -->
+        <div class="map-container overflow-hidden rounded">
+          <iframe class="overflow-hidden rounded"
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6335071.017601874!2d7.472741070779207!3d34.000243243063756!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x126c2c82aeb63e77%3A0xb5b3d1a2f1304c8e!2sTunisia!5e0!3m2!1sen!2stn!4v1715499362503!5m2!1sen!2stn"
+            width="100%" height="400" style="border: 0" allowfullscreen="" loading="lazy"
+            referrerpolicy="no-referrer-when-downgrade"></iframe>
+        </div>
+        <div class="spacing-top-bottom">
+          <div class="row">
+            <div class="col-md-8 m-b-30">
+              <div class="row ">
+                <div class="col-md-6">
+                  <!-- input -->
+                  <mat-label class="f-s-14 f-w-600 m-b-8 d-block">First Name<span>*</span></mat-label>
+                  <mat-form-field appearance="outline" class="w-100" color="primary">
+                    <input matInput type="text" placeholder="First Name" />
+                  </mat-form-field>
+                  <!-- input -->
+                  <mat-label class="f-s-14 f-w-600 m-b-8 d-block">Phone Number<span>*</span></mat-label>
+                  <mat-form-field appearance="outline" class="w-100" color="primary">
+                    <input matInput type="tel" placeholder="xxx xxx xxxx" />
+                  </mat-form-field>
+                </div>
+                <div class="col-md-6">
+                  <!-- input -->
+                  <mat-label class="f-s-14 f-w-600 m-b-8 d-block">Last Name<span>*</span></mat-label>
+                  <mat-form-field appearance="outline" class="w-100" color="primary">
+                    <input matInput type="text" placeholder="Last Name" />
+                  </mat-form-field>
+                  <!-- input -->
+                  <mat-label class="f-s-14 f-w-600 m-b-8 d-block">Email<span>*</span></mat-label>
+                  <mat-form-field appearance="outline" class="w-100" color="primary">
+                    <input matInput type="mail" placeholder="Email address" />
+                  </mat-form-field>
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-lg-12">
+                  <mat-label class="f-s-14 f-w-600 m-b-8 d-block">Enquire related to<span>*</span>
+                  </mat-label>
+                  <mat-form-field appearance="outline" class="w-100">
+                    <mat-select value="General Enquiry">
+                      <mat-option value="General Enquiry">General Enquiry</mat-option>
+                      <mat-option value="General Enquiry 2">General Enquiry 2</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-lg-12">
+                  <mat-label class="f-s-14 f-w-600 m-b-8 d-block">Message</mat-label>
+                  <mat-form-field appearance="outline" class="w-100" color="primary">
+                    <textarea matInput rows="5" placeholder="Write your message here"></textarea>
+                  </mat-form-field>
+                </div>
+              </div>
+              <button mat-flat-button>Submit</button>
+            </div>
+            <div class="col-md-4 right-side-content">
+              <mat-card class="shadow-none bg-primary rounded-8 p-8">
+                <mat-card-content>
+                  <div>
+                    <h6 class="f-s-20 m-b-16 text-white">Reach Out Today</h6>
+                    <p class="f-s-14 m-0 text-white">
+                      Have questions or need assistance? We're just a message
+                      away.
+                    </p>
+                  </div>
+                  <mat-divider class="m-y-30"></mat-divider>
+                  <div>
+                    <h6 class="f-s-20 m-b-16 text-white">Our Location</h6>
+                    <p class="f-s-14 m-0 text-white">
+                      Visit us in person or find our contact details to connect
+                      with us directly.
+                    </p>
+                  </div>
+                </mat-card-content>
+              </mat-card>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+  <div class="footer">
+    <app-footer></app-footer>
+  </div>
+</div>

Web/src/app/pages/front-pages/contact/contact.component.scss

@@ -0,0 +1,3 @@
+.map-container{
+    margin-top: -200px;
+}

Web/src/app/pages/front-pages/contact/contact.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactComponent } from './contact.component';
+
+describe('ContactComponent', () => {
+  let component: ContactComponent;
+  let fixture: ComponentFixture<ContactComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ContactComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Web/src/app/pages/front-pages/contact/contact.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { IconModule } from '../../../icon/icon.module';
+import { MaterialModule } from '../../../material.module';
+import { FooterComponent } from '../footer/footer.component';
+
+@Component({
+  selector: 'app-contact',
+  imports: [MaterialModule,IconModule,FooterComponent],
+  templateUrl: './contact.component.html',
+  styleUrl: './contact.component.scss'
+})
+export class ContactComponent {
+
+}

Web/src/app/pages/front-pages/footer/footer.component.html

@@ -0,0 +1,69 @@
+<div class="footer-content">
+  <div class="footer-wrapper">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-3 col-6 m-b-30">
+          <div class="listContainer">
+            <h5 class="f-s-16 f-w-600 m-b-30">Applications</h5>
+            <mat-list role="list" class="p-y-0">
+              @for (item of applicationsItems; track item) {
+              <a class="text-decoration-none d-block m-b-20" [routerLink]="[item.href]">
+                {{ item.title }}
+              </a>
+              }
+            </mat-list>
+          </div>
+        </div>
+        <div class="col-md-3 col-6 m-b-30">
+          <div class="listContainer">
+            <h5 class="f-s-16 f-w-600 m-b-30">Forms</h5>
+            <mat-list role="list" class="p-y-0">
+              @for (item of formsItems; track item) {
+              <a class="text-decoration-none d-block m-b-20" [routerLink]="[item.href]">
+                {{ item.title }}
+              </a>
+              }
+            </mat-list>
+          </div>
+        </div>
+        <div class="col-md-3 col-6 m-b-30">
+          <div class="listContainer">
+            <h5 class="f-s-16 f-w-600 m-b-30">Tables</h5>
+            <mat-list role="list" class="p-y-0">
+              @for (item of tablesItems; track item) {
+              <a class="text-decoration-none d-block m-b-20" [routerLink]="[item.href]">
+                {{ item.title }}
+              </a>
+              }
+            </mat-list>
+          </div>
+        </div>
+        <div class="col-md-3 col-6 m-b-30">
+          <h5 class="f-s-16 f-w-600 m-b-30">Follow us</h5>
+          <div class="d-flex align-items-center gap-20">
+            @for (icon of socialIcons; track icon.src) {
+            <img [src]="icon.src" [matTooltip]="icon.tooltip" alt="social-icon" width="22" height="22"
+              class="cursor-pointer" />
+            }
+          </div>
+        </div>
+      </div>
+      <div class="d-flex align-items-center justify-content-between p-y-30 b-t-1 flex-wrap">
+        <!-- Left side -->
+        <div class="d-flex align-items-center gap-4">
+          <img src="assets/images/landingpage/favicon.png" alt="logo" width="20" height="15" />
+          <h6 class="f-s-16 f-w-500">All rights reserved by Modernize.</h6>
+        </div>
+
+        <!-- Right side -->
+        <div class="d-flex justify-content-end align-items-center">
+          <p class="f-s-16 m-0">
+            Designed & Developed by
+            <a href="https://adminmart.com/" target="_blank" class="text-decoration-none text-primary">
+              AdminMart </a>.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

Web/src/app/pages/front-pages/footer/footer.component.scss

@@ -0,0 +1,13 @@
+
+.footer-content{
+  .custom-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    width: 100%;
+    padding: 0 15px;
+  }
+}
+
+.imgStyleDash {
+  position: absolute;
+}

Web/src/app/pages/front-pages/footer/footer.component.spec.ts

@@ -1,23 +1,23 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Content } from './content';
-
-describe('Content', () => {
-  let component: Content;
-  let fixture: ComponentFixture<Content>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Content]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Content);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FooterComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Web/src/app/pages/front-pages/footer/footer.component.ts

@@ -0,0 +1,95 @@
+import { Component } from '@angular/core';
+import { IconModule } from '../../../icon/icon.module';
+import { MaterialModule } from '../../../material.module';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-footer',
+  imports: [MaterialModule, IconModule, RouterLink],
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.scss'
+})
+export class FooterComponent {
+  applicationsItems = [
+    {
+      title: 'Kanban',
+      href: "/apps/kanban"
+    },
+    {
+      title: 'Invoice List',
+      href: "/apps/invoice/list"
+    },
+    {
+      title: 'eCommerce',
+      href: "/apps/product/shop"
+    },
+    {
+      title: 'Chats',
+      href: "/apps/chat"
+    },
+    {
+      title: 'Tickets',
+      href: "/apps/tickets"
+    },
+    {
+      title: 'Blog',
+      href: "/apps/blog/post"
+    },
+  ];
+
+  formsItems = [
+    {
+      title: 'Form Layout',
+      href: "/forms/form-layouts"
+    },
+    {
+      title: 'Form Horizontal',
+      href: "/forms/form-horizontal"
+    },
+    {
+      title: 'Form Wizard',
+      href: "/forms/form-wizard"
+    },
+    {
+      title: 'Form Vertical',
+      href: "/forms/form-vertical"
+    },
+    {
+      title: 'Form Toastr',
+      href: "/forms/form-toastr"
+    },
+  ];
+
+  tablesItems = [
+    {
+      title: 'Basic Table',
+      href: "/tables/basic-table"
+    },
+    {
+      title: 'Multi Header Footer Table',
+      href: "/tables/multi-header-footer-table"
+    },
+    {
+      title: 'Pagination Table',
+      href: "/tables/pagination-table"
+    },
+    {
+      title: 'Dynamic Table',
+      href: "/tables/dynamic-table"
+    },
+    {
+      title: 'HTTP Table',
+      href: "/tables/http-table"
+    },
+    {
+      title: 'Sortable Table',
+      href: "/tables/sortable-table"
+    },
+  ];
+
+  socialIcons = [
+    { src: 'assets/images/front-pages/icon-facebook.svg', tooltip: 'Facebook' },
+    { src: 'assets/images/front-pages/icon-twitter.svg', tooltip: 'Twitter' },
+    { src: 'assets/images/front-pages/icon-instagram.svg', tooltip: 'Instagram' },
+  ];
+}

Web/src/app/pages/front-pages/front-pages.routes.ts

@@ -0,0 +1,28 @@
+import { Routes } from '@angular/router';
+import { HomepageComponent } from './homepage/homepage.component';
+import { AboutUsComponent } from './about-us/about-us.component';
+import { HomepageDetailsComponent } from './homepage-details/homepage-details.component';
+import { BlogComponent } from './blog/blog.component';
+import { PortfolioComponent } from './portfolio/portfolio.component';
+import { PricingComponent } from './pricing/pricing.component';
+import { ContactComponent } from './contact/contact.component';
+import { BlogDetailsComponent } from './blog-details/blog-details.component';
+
+
+export const FrontPagesRoutes: Routes = [
+    
+    {
+        path: '',
+        component: HomepageComponent, // acts as layout shell
+        children: [
+          { path: '', redirectTo: 'homepage', pathMatch: 'full' },
+          { path: 'homepage', component: HomepageDetailsComponent }, // real homepage content
+          { path: 'about', component: AboutUsComponent },
+          {path:'blog',component:BlogComponent },
+          { path: 'portfolio', component: PortfolioComponent },
+          { path: 'pricing', component: PricingComponent  },
+          { path: 'contact', component: ContactComponent },
+          { path: 'blog-details', component: BlogDetailsComponent },
+        ],
+      },
+];

Web/src/app/pages/front-pages/front-pagesData.ts

@@ -0,0 +1,768 @@
+interface cardimgs {
+  id: number;
+  time: string;
+  imgSrc: string;
+  user: string;
+  title: string;
+  views: string;
+  category: string;
+  comments: number;
+  date: string;
+}
+
+interface productcards {
+  id: number;
+  imgSrc: string;
+  title: string;
+  price: string;
+  rprice: string;
+  date: string;
+}
+
+interface Framework {
+  src: string;
+  alt: string;
+  tooltip: string;
+}
+
+interface followercards {
+  id: number;
+  imgSrc: string;
+  title: string;
+}
+
+interface setupCards {
+  id: number;
+  img: string;
+  color: string;
+  title: string;
+  subtitle: string;
+  imgMain?:string;
+}
+
+export const cardimgs: cardimgs[] = [
+  {
+    id: 1,
+    time: '2 mins Read',
+    imgSrc: '/assets/images/blog/blog-img1.jpg',
+    user: '/assets/images/profile/user-1.jpg',
+    title: 'As yen tumbles, gadget-loving Japan goes for secondhand iPhones',
+    views: '9,125',
+    category: 'Social',
+    comments: 3,
+    date: 'Mon, Dec 23',
+  },
+  {
+    id: 2,
+    time: '3 mins Read',
+    imgSrc: '/assets/images/blog/blog-img2.jpg',
+    user: '/assets/images/profile/user-2.jpg',
+    title:
+      'Intel loses bid to revive antitrust case against patent foe Fortress',
+    views: '9,125',
+    category: 'Gadget',
+    comments: 3,
+    date: 'Sun, Dec 23',
+  },
+  {
+    id: 3,
+    time: '4 mins Read',
+    imgSrc: '/assets/images/blog/blog-img3.jpg',
+    user: '/assets/images/profile/user-3.jpg',
+    title: 'COVID outbreak deepens as more lockdowns loom in China',
+    views: '9,125',
+    category: 'Health',
+    comments: 12,
+    date: 'Sat, Dec 23',
+  },
+  {
+    id: 4,
+    time: '2 mins Read',
+    imgSrc: '/assets/images/blog/blog-img4.jpg',
+    user: '/assets/images/profile/user-1.jpg',
+    title: 'As yen tumbles, gadget-loving Japan goes for secondhand iPhones',
+    views: '9,125',
+    category: 'Social',
+    comments: 3,
+    date: 'Mon, Dec 23',
+  },
+  {
+    id: 5,
+    time: '3 mins Read',
+    imgSrc: '/assets/images/blog/blog-img5.jpg',
+    user: '/assets/images/profile/user-2.jpg',
+    title:
+      'Intel loses bid to revive antitrust case against patent foe Fortress',
+    views: '9,125',
+    category: 'Gadget',
+    comments: 3,
+    date: 'Sun, Dec 23',
+  },
+  {
+    id: 6,
+    time: '4 mins Read',
+    imgSrc: '/assets/images/blog/blog-img6.jpg',
+    user: '/assets/images/profile/user-3.jpg',
+    title: 'COVID outbreak deepens as more lockdowns loom in China',
+    views: '9,125',
+    category: 'Health',
+    comments: 12,
+    date: 'Sat, Dec 23',
+  },
+  {
+    id: 7,
+    time: '2 mins Read',
+    imgSrc: '/assets/images/blog/blog-img10.jpg',
+    user: '/assets/images/profile/user-1.jpg',
+    title: 'As yen tumbles, gadget-loving Japan goes for secondhand iPhones',
+    views: '9,125',
+    category: 'Social',
+    comments: 3,
+    date: 'Mon, Dec 23',
+  },
+  {
+    id: 8,
+    time: '3 mins Read',
+    imgSrc: '/assets/images/blog/blog-img8.jpg',
+    user: '/assets/images/profile/user-2.jpg',
+    title:
+      'Intel loses bid to revive antitrust case against patent foe Fortress',
+    views: '9,125',
+    category: 'Gadget',
+    comments: 3,
+    date: 'Sun, Dec 23',
+  },
+  {
+    id: 9,
+    time: '4 mins Read',
+    imgSrc: '/assets/images/blog/blog-img9.jpg',
+    user: '/assets/images/profile/user-3.jpg',
+    title: 'COVID outbreak deepens as more lockdowns loom in China',
+    views: '9,125',
+    category: 'Health',
+    comments: 12,
+    date: 'Sat, Dec 23',
+  },
+];
+
+export const productcards: productcards[] = [
+  {
+    id: 1,
+    imgSrc: 'assets/images/products/s4.jpg',
+    title: 'Boat Headphone',
+    price: '285',
+    rprice: '375',
+    date: 'Tue, Apr 03, 2025',
+  },
+  {
+    id: 2,
+    imgSrc: 'assets/images/products/s5.jpg',
+    title: 'MacBook Air Pro',
+    price: '285',
+    rprice: '375',
+    date: 'Tue, Apr 10, 2025',
+  },
+  {
+    id: 3,
+    imgSrc: 'assets/images/products/s7.jpg',
+    title: 'Red Velvet Dress',
+    price: '285',
+    rprice: '375',
+    date: 'Tue, Apr 15, 2025',
+  },
+  {
+    id: 4,
+    imgSrc: 'assets/images/products/s11.jpg',
+    title: 'Soft Plush Teddy',
+    price: '285',
+    rprice: '375',
+    date: 'Tue, Apr 12, 2025',
+  },
+  {
+    id: 5,
+    imgSrc: 'assets/images/products/s2.jpg',
+    title: 'Boat Bass Booster',
+    price: '285',
+    rprice: '375',
+    date: 'Tue, Apr 14, 2025',
+  },
+  {
+    id: 6,
+    imgSrc: 'assets/images/products/s6.jpg',
+    title: 'MacBook Ultra Slim',
+    price: '285',
+    rprice: '375',
+    date: 'Tue, Apr 18, 2025',
+  },
+  {
+    id: 7,
+    imgSrc: 'assets/images/products/s8.jpg',
+    title: 'Crimson Party Dress',
+    price: '285',
+    rprice: '375',
+    date: 'Tue, Apr 20, 2025',
+  },
+  {
+    id: 8,
+    imgSrc: 'assets/images/products/s12.jpg',
+    title: 'Cuddly Teddy Gift',
+    price: '285',
+    rprice: '375',
+    date: 'Tue, Apr 22, 2025',
+  },
+  {
+    id: 9,
+    imgSrc: 'assets/images/products/s4.jpg',
+    title: 'Boat Sonic Headset',
+    price: '285',
+    rprice: '375',
+    date: 'Tue, Apr 25, 2025',
+  },
+  {
+    id: 10,
+    imgSrc: 'assets/images/products/s5.jpg',
+    title: 'MacBook Pro 2025',
+    price: '285',
+    rprice: '375',
+    date: 'Tue, Apr 27, 2025',
+  },
+  {
+    id: 11,
+    imgSrc: 'assets/images/products/s7.jpg',
+    title: 'Evening Gown - Red',
+    price: '285',
+    rprice: '375',
+    date: 'Tue, Apr 29, 2025',
+  },
+  {
+    id: 12,
+    imgSrc: 'assets/images/products/s11.jpg',
+    title: 'Fluffy Bear Surprise',
+    price: '285',
+    rprice: '375',
+    date: 'Tue, Apr 30, 2025',
+  },
+];
+
+export const frameworks: Framework[] = [
+  {
+    src: 'assets/images/landingpage/frameworks/angular.svg',
+    alt: 'Angular',
+    tooltip: 'Angular',
+  },
+  {
+    src: 'assets/images/landingpage/frameworks/material.svg',
+    alt: 'Angular Material',
+    tooltip: 'Angular Material',
+  },
+  {
+    src: 'assets/images/landingpage/frameworks/logo-ts.svg',
+    alt: 'Typescript',
+    tooltip: 'Typescript',
+  },
+  {
+    src: 'assets/images/landingpage/frameworks/icon-tabler.svg',
+    alt: 'Tabler Icon',
+    tooltip: 'Tabler Icon',
+  },
+];
+
+export const tiles = [
+  {
+    id: 1,
+    text: 'Light & Dark Color Schemes',
+    cols: 1,
+    rows: 1,
+    color: '#FFF6E5',
+    icon: 'svgs/icon-briefcase.svg',
+    subtitle: 'Choose your preferred visual style effortlessly.',
+  },
+  {
+    id: 2,
+    text: 'New Demos',
+    cols: 2,
+    rows: 2,
+    color: '#E9F1FF',
+    icon: 'logos/logoIcon.svg',
+    img: 'landingpage/background/screen1.png',
+    subtitle:
+      'Brand new demos to help you build the perfect dashboard:<br><strong>Dark and Right-to-Left.</strong>',
+  },
+  {
+    id: 3,
+    text: 'Code Improvements',
+    cols: 1,
+    rows: 1,
+    color: '#E7FFF2',
+    icon: 'logos/icon-speech-bubble.svg',
+    subtitle: 'Benefit from continuous improvements and optimizations.',
+  },
+  {
+    id: 4,
+    text: '12+ Ready to Use Application Designs',
+    cols: 1,
+    rows: 1,
+    color: '#E4F4FF',
+    icon: 'icon-layer.svg',
+    img: 'landingpage/background/feature-apps.png',
+    subtitle: 'Instantly deployable designs for your applications.',
+  },
+  {
+    id: 5,
+    text: '50+ UI Components',
+    cols: 1,
+    rows: 1,
+    color: '#FFECEC',
+    icon: 'logos/icon-favorites.svg',
+    subtitle: 'A rich collection for seamless user experiences.',
+  },
+];
+
+export const users = [
+  { name: 'Jenny Wilson', img: '/assets/images/profile/user-1.jpg' },
+  { name: 'Robert Fox', img: '/assets/images/profile/user-2.jpg' },
+  { name: 'Kristin Watson', img: '/assets/images/profile/user-3.jpg' },
+  { name: 'Darlene Robertson', img: '/assets/images/profile/user-4.jpg' },
+  { name: 'Jacob Jones', img: '/assets/images/profile/user-5.jpg' },
+];
+
+export const plans = [
+  {
+    title: 'Single Use',
+    description:
+      'Use for single end product which end users can’t be charged for.',
+    price: 49,
+    period: 'one time pay',
+    features: [
+      { text: 'Full source code', included: true },
+      { text: 'Documentation', included: true },
+      { text: 'Use in SaaS app', included: false },
+      { text: 'One Project', included: true, bold: true },
+      { text: 'One Year Technical Support', included: true },
+      { text: 'One Year Free Updates', included: true },
+    ],
+  },
+  {
+    title: 'Multiple Use',
+    description:
+      'Use for unlimited end products end users can’t be charged for.',
+    price: 89,
+    period: 'one time pay',
+    features: [
+      { text: 'Full source code', included: true },
+      { text: 'Documentation', included: true },
+      { text: 'Use in SaaS app', included: false },
+      { text: 'Unlimited Project', included: true, bold: true },
+      { text: 'One Year Technical Support', included: true },
+      { text: 'One Year Free Updates', included: true },
+    ],
+  },
+  {
+    title: 'Extended Use',
+    description:
+      'Use for single end product which end users can be charged for.',
+    price: 299,
+    period: 'one time pay',
+    popular: true,
+    features: [
+      { text: 'Full source code', included: true },
+      { text: 'Documentation', included: true },
+      { text: 'Use in SaaS app', included: true },
+      { text: 'One Project', included: true, bold: true },
+      { text: 'One Year Technical Support', included: true },
+      { text: 'One Year Free Updates', included: true },
+    ],
+  },
+  {
+    title: 'Unlimited Use',
+    description:
+      'Use in unlimited end products end users can be charged for.',
+    price: 499,
+    period: 'one time pay',
+    features: [
+      { text: 'Full source code', included: true },
+      { text: 'Documentation', included: true },
+      { text: 'Use in SaaS app', included: true },
+      { text: 'Unlimited Project', included: true, bold: true },
+      { text: 'One Year Technical Support', included: true },
+      { text: 'One Year Free Updates', included: true },
+    ],
+  },
+];
+
+export const paymentLogos = [
+  { src: 'assets/images/front-pages/icon-visa.svg', alt: 'visa', tooltip: 'Visa' },
+  {
+    src: 'assets/images/front-pages/icon-mastercard.svg',
+    alt: 'mastercard',
+    tooltip: 'Master Card',
+  },
+  {
+    src: 'assets/images/front-pages/icon-american-express.svg',
+    alt: 'american express',
+    tooltip: 'American Express',
+  },
+  {
+    src: 'assets/images/front-pages/icon-discover.svg',
+    alt: 'discover',
+    tooltip: 'Discover',
+  },
+  {
+    src: 'assets/images/front-pages/icon-paypal.svg',
+    alt: 'paypal',
+    tooltip: 'Paypal',
+  },
+  {
+    src: 'assets/images/front-pages/icon-masetro.svg',
+    alt: 'maestro',
+    tooltip: 'Maestro',
+  },
+  { src: 'assets/images/front-pages/icon-jcb.svg', alt: 'jcb', tooltip: 'JCB' },
+  {
+    src: 'assets/images/front-pages/icon-diners.svg',
+    alt: 'diners',
+    tooltip: 'Diners',
+  },
+];
+
+export const faqList = [
+  {
+    question: 'What is included with my purchase?',
+    answer:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
+  },
+  {
+    question: 'Are there any recurring fees?',
+    answer:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
+  },
+  {
+    question: 'Can i use template on multiple projects? ',
+    answer:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
+  },
+  {
+    question:
+      'Can i use customize the admin dashboard template to match my brand?',
+    answer:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
+  },
+  {
+    question: 'Are any restrictions on using the template?',
+    answer:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
+  },
+  {
+    question: 'How can i get support after purchase? ',
+    answer:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
+  },
+];
+
+export const followercardsFirst: followercards[] = [
+  {
+    id: 1,
+    imgSrc: '/assets/images/front-pages/icon-color.svg',
+    title: '6 Themes Colors',
+  },
+  {
+    id: 2,
+    imgSrc: '/assets/images/front-pages/icon-sidebar.svg',
+    title: 'Dard & Light Sidebar',
+  },
+  {
+    id: 3,
+    imgSrc: '/assets/images/front-pages/icon-components.svg',
+    title: '50+ UI Components',
+  },
+  {
+    id: 4,
+    imgSrc: '/assets/images/front-pages/icon-pages.svg',
+    title: '65+ pages Templates',
+  },
+  {
+    id: 5,
+    imgSrc: '/assets/images/front-pages/icon-color.svg',
+    title: '6 Themes Colors',
+  },
+  {
+    id: 6,
+    imgSrc: '/assets/images/front-pages/icon-sidebar.svg',
+    title: 'Dard & Light Sidebar',
+  },
+  {
+    id: 7,
+    imgSrc: '/assets/images/front-pages/icon-components.svg',
+    title: '50+ UI Components',
+  },
+  {
+    id: 8,
+    imgSrc: '/assets/images/front-pages/icon-pages.svg',
+    title: '65+ pages Templates',
+  },
+  {
+    id: 9,
+    imgSrc: '/assets/images/front-pages/icon-color.svg',
+    title: '6 Themes Colors',
+  },
+  {
+    id: 10,
+    imgSrc: '/assets/images/front-pages/icon-sidebar.svg',
+    title: 'Dard & Light Sidebar',
+  },
+  {
+    id: 11,
+    imgSrc: '/assets/images/front-pages/icon-components.svg',
+    title: '50+ UI Components',
+  },
+  {
+    id: 12,
+    imgSrc: '/assets/images/front-pages/icon-pages.svg',
+    title: '65+ pages Templates',
+  },
+];
+
+export const followercardSecond: followercards[] = [
+  {
+    id: 1,
+    imgSrc: '/assets/images/front-pages/icon-framework.svg',
+    title: 'Material UI',
+  },
+  {
+    id: 2,
+    imgSrc: '/assets/images/front-pages/icon-icons.svg',
+    title: '3400+ icons',
+  },
+  {
+    id: 3,
+    imgSrc: '/assets/images/front-pages/icon-responsive.svg',
+    title: 'Fully responsive',
+  },
+  {
+    id: 4,
+    imgSrc: '/assets/images/front-pages/icon-sass.svg',
+    title: 'Sassbase css',
+  },
+  {
+    id: 5,
+    imgSrc: '/assets/images/front-pages/icon-framework.svg',
+    title: 'Material UI',
+  },
+  {
+    id: 6,
+    imgSrc: '/assets/images/front-pages/icon-icons.svg',
+    title: '3400+ icons',
+  },
+  {
+    id: 7,
+    imgSrc: '/assets/images/front-pages/icon-responsive.svg',
+    title: 'Fully responsive',
+  },
+  {
+    id: 8,
+    imgSrc: '/assets/images/front-pages/icon-sass.svg',
+    title: 'Sassbase css',
+  },
+  {
+    id: 9,
+    imgSrc: '/assets/images/front-pages/icon-framework.svg',
+    title: 'Material UI',
+  },
+  {
+    id: 10,
+    imgSrc: '/assets/images/front-pages/icon-icons.svg',
+    title: '3400+ icons',
+  },
+  {
+    id: 11,
+    imgSrc: '/assets/images/front-pages/icon-responsive.svg',
+    title: 'Fully responsive',
+  },
+  {
+    id: 12,
+    imgSrc: '/assets/images/front-pages/icon-sass.svg',
+    title: 'Sassbase css',
+  },
+];
+export const followercardThird: followercards[] = [
+  {
+    id: 1,
+    imgSrc: '/assets/images/front-pages/icon-customize.svg',
+    title: 'Easy to Customize',
+  },
+  {
+    id: 2,
+    imgSrc: '/assets/images/front-pages/icon-chart.svg',
+    title: 'Lots of Chart Options',
+  },
+  {
+    id: 3,
+    imgSrc: '/assets/images/front-pages/icon-table.svg',
+    title: 'Lots of Table Examples',
+  },
+  {
+    id: 4,
+    imgSrc: '/assets/images/front-pages/icon-update.svg',
+    title: 'Regular Updates',
+  },
+  {
+    id: 5,
+    imgSrc: '/assets/images/front-pages/icon-support.svg',
+    title: 'Dedicated Support',
+  },
+  {
+    id: 6,
+    imgSrc: '/assets/images/front-pages/icon-framework.svg',
+    title: 'Easy to Customize',
+  },
+  {
+    id: 7,
+    imgSrc: '/assets/images/front-pages/icon-icons.svg',
+    title: 'Lots of Chart Options',
+  },
+  {
+    id: 8,
+    imgSrc: '/assets/images/front-pages/icon-responsive.svg',
+    title: 'Lots of Table Examples',
+  },
+  {
+    id: 9,
+    imgSrc: '/assets/images/front-pages/icon-sass.svg',
+    title: 'Regular Updates',
+  },
+  {
+    id: 10,
+    imgSrc: '/assets/images/front-pages/icon-framework.svg',
+    title: 'Dedicated Support',
+  },
+  {
+    id: 11,
+    imgSrc: '/assets/images/front-pages/icon-framework.svg',
+    title: 'Easy to Customize',
+  },
+  {
+    id: 12,
+    imgSrc: '/assets/images/front-pages/icon-icons.svg',
+    title: 'Lots of Chart Options',
+  },
+ 
+];
+
+export const topcardsGrid = [
+  { title: 'Light & Dark Color Schemes', subtitle: 'Choose your preferred visual style effortlessly.',
+     img: '/assets/images/svgs/icon-briefcase.svg', color: 'warning' },
+  { title: '12+ Ready to Use Application Designs', subtitle: 'Instantly deployable designs for your applications.',
+    img: 'assets/icons/icon2.png', color: 'secondary',imgMain: '/assets/images/landingpage/background/feature-apps.png', },
+  { title: 'New Demos', subtitle: 'Brand new demos to help you build the perfect dashboard: <strong>Dark and Right-to-Left.</strong>', 
+    img: '/assets/images/front-pages/logoIcon.svg', color: 'primary',imgMain: '/assets/images/landingpage/background/screen1.png' },
+  { title: 'Code Improvements', subtitle: 'Benefit from continuous improvements and optimizations.', 
+    img: '/assets/images/front-pages/icon-speech-bubble.svg', color: 'success' },
+  { title: '50+ UI Components', subtitle: 'A rich collection for seamless user experiences.', 
+    img: '/assets/images/front-pages/icon-favorites.svg', color: 'error' },
+];
+
+export const  setupCards:setupCards[] = [
+  {
+    id: 1,
+    color: 'warning',
+    img: '/assets/images/svgs/icon-briefcase.svg',
+    title: 'Light & Dark Color Schemes',
+    subtitle: 'Choose your preferred visual style effortlessly.',
+  },
+  {
+    id: 2,
+    color: 'secondary',
+    img: '/assets/images/svgs/icon-connect.svg',
+    title: '12+ Ready to Use Application Designs',
+    subtitle: 'Instantly deployable designs for your applications.',
+    imgMain: '/assets/images/landingpage/background/feature-apps.png'
+  },
+
+  {
+    id: 3,
+    color: 'success',
+    img: '/assets/images/svgs/icon-speech-bubble.svg',
+    title: 'Code Improvements',
+    subtitle: 'Benefit from continuous improvements and optimizations.',
+  },
+  {
+    id: 4,
+    color: 'error',
+    img: '/assets/images/svgs/icon-favorites.svg',
+    title: '50+ UI Components',
+    subtitle: 'A rich collection for seamless user experiences.',
+  },
+
+];
+
+export const stats = [
+  {
+    label: 'Founded',
+    value: '2019',
+    description: 'When we founded Modernize',
+  },
+  {
+    label: 'Growth',
+    value: '1,400%',
+    description: 'Revenue growth in 2024',
+  },
+  {
+    label: 'Customers',
+    value: '300k+',
+    description: 'Customers on Modernize',
+  },
+  {
+    label: 'Dashboards',
+    value: '25k+',
+    description: 'Dashboards built using Modernize',
+  },
+];
+
+export const team = [
+  {id: 1,
+    name: 'Alex Martinez',
+    position: 'CEO & Co-Founder',
+    image: 'assets/images/front-pages/user1.jpg'
+  },
+  {
+    id: 2,
+    name: 'Jordan Nguyen',
+    position: 'CTO & Co-Founder',
+    image: 'assets/images/front-pages/user2.jpg'
+  },
+  {
+    id: 3,
+    name: 'Taylor Roberts',
+    position: 'Product Manager',
+    image: 'assets/images/front-pages/user3.jpg'
+  },
+  {id: 4,
+    name: 'Morgan Patel',
+    position: 'Lead Developer',
+    image: 'assets/images/front-pages/user4.jpg'
+  },
+  {
+    id: 5,
+    name: 'Andrew Grant',
+    position: 'Product Manager',
+    image: 'assets/images/front-pages/user5.jpg'
+  },
+  {
+    id: 6,
+    name: 'Leo Pratt',
+    position: 'Lead Developer',
+    image: 'assets/images/front-pages/user3.jpg'
+  },
+  {
+    id: 7,
+    name: 'C. A. Nunez',
+    position: 'CEO & Co-Founder',
+    image: 'assets/images/front-pages/user2.jpg'
+  },
+  {
+    id: 8,
+    name: 'Leo Maxwell',
+    position: 'Lead Developer',
+    image: 'assets/images/front-pages/user1.jpg'
+  }
+];

Web/src/app/pages/front-pages/homepage-details/homepage-details.component.html

@@ -0,0 +1,603 @@
+<div class="home-page">
+  <div class="bg-light-primary home-page-header">
+    <div class="header-container-content custom-container m-x-auto">
+      <div class="row justify-content-center">
+        <div class="col-md-8">
+          <h1 class="banner-title text-center m-t-48">
+            Most powerful &
+            <span class="text-primary">developer friendly </span>
+            dashboard
+          </h1>
+        </div>
+      </div>
+      <div class="row align-items-end justify-content-center">
+        @if(!isMobileView){
+
+        <div class="col-md-3 d-none d-lg-block cardPosition">
+          <img src="assets/images/front-pages/banner-top-left.svg" alt="banner-top-left"
+            class="img-fluid rounded-8 float-image w-100" />
+        </div>
+        }
+
+        <div class="col-md-6 m-b-10">
+          <div class="row m-t-24">
+            <div class="col-12 d-flex gap-20 align-items-center justify-content-center chipContainer">
+              <div class="social-chips flex-shrink-0">
+                <img src="assets/images/profile/user-2.jpg" width="40" alt="social" class="rounded-circle" />
+                <img src="assets/images/profile/user-3.jpg" width="40" alt="social" class="rounded-circle" />
+                <img src="assets/images/profile/user-4.jpg" width="40" alt="social" class="rounded-circle" />
+              </div>
+              <div class="f-s-16 f-w-500">
+                52,589+ developers & agencies using our templates
+              </div>
+            </div>
+          </div>
+          <div class="d-flex align-items-center justify-content-center m-t-24 gap-20 loginBtn">
+            <a mat-flat-button color="primary" [routerLink]="'/authentication/login'"><span
+                class="p-y-10">Login</span></a>
+            <div class="d-flex align-items-center" matRipple [matRippleCentered]="centered"
+              [matRippleDisabled]="disabled" [matRippleUnbounded]="unbounded" [matRippleRadius]="radius"
+              [matRippleColor]="color" [ngClass]="{
+                'rounded bg-light-primary': showBackground,
+                'p-y-2': true,
+                'p-x-7': true
+              }" (click)="openDialog(true)">
+              <button mat-mini-fab class="text-primary play-button m-l-10"
+                aria-label="Example icon button with a delete icon">
+                <i-tabler class="icon-18 d-flex margin-auto" name="player-play"></i-tabler></button><span
+                class="textSee f-s-14 f-w-500 m-x-10">
+                See how it works</span>
+            </div>
+          </div>
+          <div class="d-flex align-items-center gap-20 justify-content-center framework m-t-32">
+            @for (framework of frameworks; track framework.tooltip) {
+            <a href="javascript:void(0)"
+              class="rounded-8 m-b-0 bg-white icon-54 d-flex align-items-center justify-content-center"
+              matTooltip="{{ framework.tooltip }}" matTooltipPosition="below">
+              <img [src]="framework.src" [alt]="framework.alt" class="" width="28" height="28" />
+            </a>
+            }
+          </div>
+        </div>
+        @if(!isMobileView){
+        <div class="col-md-3 d-none d-lg-block cardPositionTwo">
+          <img src="assets/images/front-pages/banner-top-right.svg" alt="banner-top-right"
+            class="img-fluid rounded-8 float-image w-100" />
+        </div>
+
+        }
+      </div>
+      @if (!isMobileView) {
+      <div class="row d-none d-lg-block m-t-30">
+        <div class="col-12">
+          <img src="assets/images/front-pages/bottom-part.svg" alt="bottom-part" class="w-100 img-fluid d-block" />
+        </div>
+      </div>
+      }
+    </div>
+  </div>
+
+  <div class="introducing-section dashboardCards spacing-top-bottom">
+    <div class="container card-container">
+      <div class="row justify-content-center">
+        <div class="col-md-6">
+          <p class="text-center m-t-0">
+            Introducing Modernize's Light & Dark Skins, Exceptional Dashboards,
+            and Dynamic Pages - Stay Updated on What's New!
+          </p>
+        </div>
+      </div>
+
+
+      <!--new-->
+      <!-- DESKTOP VIEW -->
+      @if (!isMobileView) {
+      <div class="row m-t-24">
+        <!-- Column 1: Light & Dark + 12+ Designs -->
+        <div class="col-md-4">
+          <div>
+            @for (topcard of topcards; track topcard.title) {
+            @if (topcard.title === 'Light & Dark Color Schemes' || topcard.title.includes('12+')) {
+            <mat-card class="shadow-none text-center rounded-12 bg-light-{{ topcard.color }} card-box p-x-30 p-y-44">
+              <mat-card-content>
+                @if (topcard.title === 'Light & Dark Color Schemes') {
+                <img [src]="topcard.img" alt="icon" width="40" />
+                }
+                <h6 class="f-s-16 m-t-16">{{ topcard.title }}</h6>
+                <p class="f-s-14 m-t-16">{{ topcard.subtitle }}</p>
+                @if (topcard.title.includes('12+')) {
+                <img [src]="topcard.imgMain" alt="image" class="img-fluid w-100 m-t-16 m-b--48" />
+                }
+              </mat-card-content>
+            </mat-card>
+            }
+            }
+          </div>
+        </div>
+        <div class="col-md-4">
+          <div>
+            @for (topcard of topcards; track topcard.title)
+            {
+            @if
+            (topcard.title.includes('New Demos')) {
+            <mat-card class="shadow-none text-center rounded-12 bg-light-{{
+          topcard.color
+        }} card-box tall-card p-x-30 p-y-48">
+              <mat-card-content>
+                <img [src]="topcard.img" alt="icon" width="40" class="" />
+                <h2 class="f-s-40 m-t-48 lh-lg section-sub-title">{{ topcard.title }}</h2>
+                <p class="f-s-14 m-t-20 m-b-0" [innerHTML]="topcard.subtitle"></p>
+                <img src="assets/images/landingpage/background/screen1.png" alt="demo" class="img-fluid w-100 m-t-48" />
+              </mat-card-content>
+            </mat-card>
+            } }
+          </div>
+        </div>
+
+        <!-- Column 2: Code Improvements + UI Components -->
+        <div class="col-md-4">
+          <div>
+            @for (topcard of topcards; track topcard.title) {
+            @if (topcard.title.includes('Code Improvements') || topcard.title.includes('UI Components')) {
+            <mat-card class="shadow-none text-center rounded-12 bg-light-{{ topcard.color }} card-box p-x-30 p-y-48">
+              <mat-card-content>
+                <img [src]="topcard.img" alt="icon" width="40" />
+                <h6 class="f-s-16 m-t-16">{{ topcard.title }}</h6>
+                <p class="f-s-14 m-t-16">{{ topcard.subtitle }}</p>
+              </mat-card-content>
+            </mat-card>
+            }
+            }
+          </div>
+        </div>
+
+      </div>
+      }
+
+      <!-- MOBILE VIEW -->
+      @else {
+      <div class="grid-container m-t-24 m-x-0">
+        @for (topcard of topcards; track topcard.title) {
+        @if (!topcard.title.includes('New Demos')) {
+        <mat-card class="shadow-none text-center rounded-12 bg-light-{{ topcard.color }} card-box p-x-24 p-y-32">
+          <mat-card-content>
+            @if (!topcard.title.includes('12+')) {
+            <img [src]="topcard.img" alt="icon" width="40" />
+            }
+            <h6 class="f-s-16 m-t-16">{{ topcard.title }}</h6>
+            <p class="f-s-14 m-t-16">{{ topcard.subtitle }}</p>
+
+            @if (topcard.title.includes('12+')) {
+            <img [src]="topcard.imgMain" alt="image" class="img-fluid w-100 m-t-16" />
+            }
+          </mat-card-content>
+        </mat-card>
+        }
+        }
+      </div>
+
+
+      <div>
+        @for (topcard of topcards; track topcard.title)
+        {
+        @if
+        (topcard.title.includes('New Demos')) {
+        <mat-card class="shadow-none text-center rounded-12 bg-light-{{
+        topcard.color
+      }} card-box tall-card p-x-32 p-y-48">
+          <mat-card-content>
+            <img [src]="topcard.img" alt="icon" width="40" class="" />
+            <h6 class="f-s-40 m-t-32 tall-card-title section-sub-title">{{ topcard.title }}</h6>
+            <p class="f-s-14 m-t-20" [innerHTML]="topcard.subtitle"></p>
+            <img src="assets/images/landingpage/background/screen1.png" alt="demo" class="img-fluid w-100 m-t-30" />
+          </mat-card-content>
+        </mat-card>
+        } }
+      </div>
+      }
+
+      <!--end-->
+    </div>
+  </div>
+
+  <div class="tab-header">
+    <mat-divider></mat-divider>
+    <div class="container">
+      <mat-tab-group headerPosition="below" [(selectedIndex)]="selectedIndex" class="profileTabs">
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <tabler-icon name="user-circle" class="m-r-10 icon-24"></tabler-icon>
+            <span class="tab-label f-s-18 f-w-500">Team Scheduling</span>
+          </ng-template>
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <tabler-icon name="wallet" class="m-r-10 icon-24"></tabler-icon>
+            <span class="tab-label f-s-18 f-w-500">Payments</span>
+          </ng-template>
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <tabler-icon name="app-window" class="m-r-10 icon-24"></tabler-icon>
+            <span class="tab-label f-s-18 f-w-500">Embedding</span>
+          </ng-template>
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <tabler-icon name="arrow-fork" class="m-r-10 icon-24"></tabler-icon>
+            <span class="tab-label f-s-18 f-w-500">Workflows</span>
+          </ng-template>
+        </mat-tab>
+      </mat-tab-group>
+
+      <!-- Tab content shown BELOW the tab group -->
+
+      <div class="row tab-header-content p-y-66 align-items-center">
+        <div class="col-md-6">
+          <div class="tabsimage">
+            <img src="assets/images/landingpage/background/accordian1.jpg" alt="slider-group" class="img-fluid w-100" />
+          </div>
+        </div>
+
+        <div class="col-md-6 m-t-30">
+          <div class="right-content m-l-24">
+            <h2 class="f-s-40 lh-lg section-sub-title">Defend your focus</h2>
+            <div class="m-y-30">
+              <mat-accordion multi>
+                <!-- Panel 0 -->
+                <mat-expansion-panel #panel0 [expanded]="selectedIndex === 0 || selectedIndex === 3" hideToggle
+                  class="expansion-panel">
+                  <mat-expansion-panel-header>
+                    <div class="d-flex align-items-center justify-content-between w-100">
+                      <span class="f-s-18 f-w-500">Factor in outside colleagues</span>
+                      <tabler-icon [name]="panel0.expanded ? 'minus' : 'plus'" class="m-l-8 icon-20"></tabler-icon>
+                    </div>
+                  </mat-expansion-panel-header>
+                  <div>
+                    <p class="f-s-16 m-y-0">
+                      Factor in availability for required attendees, and skip
+                      checking for conflicts for optional attendees.
+                    </p>
+                  </div>
+                </mat-expansion-panel>
+
+                <!-- Panel 1 -->
+                <mat-expansion-panel #panel1 [expanded]="selectedIndex === 1" hideToggle class="expansion-panel">
+                  <mat-expansion-panel-header>
+                    <div class="d-flex align-items-center justify-content-between w-100">
+                      <span class="f-s-18 f-w-500">Combine teammate schedules</span>
+                      <tabler-icon [name]="panel1.expanded ? 'minus' : 'plus'" class="icon-20"></tabler-icon>
+                    </div>
+                  </mat-expansion-panel-header>
+                  <div>
+                    <p class="f-s-16 m-y-0">
+                      Factor in availability for required attendees, and skip
+                      checking for conflicts for optional attendees.
+                    </p>
+                  </div>
+                </mat-expansion-panel>
+
+                <!-- Panel 2 & 3 merged -->
+                <mat-expansion-panel #panel2 [expanded]="selectedIndex === 2" hideToggle class="expansion-panel">
+                  <mat-expansion-panel-header>
+                    <div class="d-flex align-items-center justify-content-between w-100">
+                      <span class="f-s-18 f-w-500">Round robin pooling</span>
+                      <tabler-icon [name]="panel2.expanded ? 'minus' : 'plus'" class="m-l-8 icon-20"></tabler-icon>
+                    </div>
+                  </mat-expansion-panel-header>
+                  <div>
+                    <p class="f-s-16 m-y-0">
+                      Factor in availability for required attendees, and skip
+                      checking for conflicts for optional attendees.
+                    </p>
+                  </div>
+                </mat-expansion-panel>
+              </mat-accordion>
+            </div>
+
+            <a mat-flat-button color="primary">Learn More</a>
+          </div>
+
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="our-leadership spacing-top p-b-48">
+    <app-image-slider></app-image-slider>
+  </div>
+
+  <div class="toolBar bg-primary p-y-16">
+    <div class="container">
+      <div class="d-flex align-items-center justify-content-center">
+        <div class="social-chips flex-shrink-0">
+          <img src="assets/images/profile/user-2.jpg" width="44" height="44" alt="social"
+            class="rounded-circle m-x-1" />
+          <img src="assets/images/profile/user-3.jpg" width="44" height="44" alt="social"
+            class="rounded-circle m-x-1" />
+        </div>
+        <span class="text-white f-s-16 m-l-16">
+          Save valuable time and effort spent searching for a solution.
+          <a class="text-white f-w-600 m-l-8" href="#">Contact us now</a>
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div class="template-slider spacing-top-bottom">
+    <div class="custom-container">
+      <div class="bg-light-primary rounded-pill spacing-top-bottom template-slider-content">
+        <div class="spacing-left-right m-b-8">
+          <h2 class="f-s-40 lh-normal section-sub-title">
+            Discover Powerful Dozens of <br> Purpose-Fit Templates
+          </h2>
+        </div>
+        <div class="demo-slider overflow-hidden d-flex gap-30 spacing-bottom">
+          <div>
+            <div class="demo-slide">
+              <a [routerLink]="['/apps/chat']">
+                <img src="assets/images/front-pages/app-chat.jpg" alt="slide" class="img-fluid rounded-7 sliderImg" />
+              </a>
+            </div>
+          </div>
+          <div>
+            <div class="demo-slide">
+              <a (click)="onImageClick('/apps/email/inbox')">
+                <img src="assets/images/front-pages/app-email.jpg" alt="slide" class="img-fluid rounded-7 sliderImg"
+                  [ngClass]="{
+                  'img-border': selectedPath === '/apps/email/inbox'
+                }" />
+              </a>
+            </div>
+          </div>
+          <div>
+            <div class="demo-slide">
+              <a (click)="onImageClick('/dashboards/dashboard1')">
+                <img src="assets/images/front-pages/demo-main.jpg" alt="slide" class="img-fluid rounded-7 sliderImg"
+                  [ngClass]="{
+                  'img-border': selectedPath === '/dashboards/dashboard1'
+                }" />
+              </a>
+            </div>
+          </div>
+          <div>
+            <div class="demo-slide">
+              <img src="assets/images/front-pages/demo-dark.jpg" alt="slide" class="img-fluid rounded-7 sliderImg" />
+            </div>
+          </div>
+          <div>
+            <div class="demo-slide">
+              <a (click)="onImageClick('/front-pages/homepage')">
+                <img src="assets/images/front-pages/demo-horizontal.jpg" alt="slide"
+                  class="img-fluid rounded-7 sliderImg" [ngClass]="{
+                  'img-border': selectedPath === '/front-pages/homepage'
+                }" />
+              </a>
+            </div>
+          </div>
+          <div>
+            <div class="demo-slide">
+              <img src="assets/images/front-pages/demo-rtl.jpg" alt="slide" class="img-fluid rounded-7 sliderImg" />
+            </div>
+          </div>
+          <div>
+            <div class="demo-slide">
+              <img src="assets/images/front-pages/app-chat.jpg" alt="slide" class="img-fluid rounded-7 sliderImg" />
+            </div>
+          </div>
+          <div>
+            <div class="demo-slide">
+              <img src="assets/images/front-pages/app-email.jpg" alt="slide" class="img-fluid rounded-7 sliderImg" />
+            </div>
+          </div>
+        </div>
+        <div class="spacing-left-right">
+          <div class="row">
+            <div class="col-md-4 text-center m-b-30">
+              <h3 class="f-s-18 m-b-16">High Customizability</h3>
+              <p class="f-s-14 m-0">
+                Tailor the dashboard to your exact needs. Customize layouts, color
+                schemes, and widgets effortlessly for a personalized user
+                experience.
+              </p>
+            </div>
+            <div class="col-md-4 text-center m-b-30">
+              <h3 class="f-s-18 m-b-16">Powerful Data Analytics</h3>
+              <p class="f-s-14 m-0">
+                Unlock the true potential of your data with our advanced analytics
+                tools. Gain valuable insights and make data-driven decisions with
+                ease.
+              </p>
+            </div>
+
+            <div class="col-md-4 text-center m-b-30">
+              <h3 class="f-s-18 m-b-16">Interactive Charts</h3>
+              <p class="f-s-14 m-0">
+                Visualize complex data sets beautifully with our interactive
+                graphs and charts. Quickly grasp trends and patterns for smarter
+                analysis.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="features spacing-bottom">
+    <div class="container">
+      <div class="row align-items-center justify-content-between">
+        <!--row-->
+        <div class="col-md-5 m-b-30">
+          <div class="client-margin">
+            <h2 class="lh-normal f-s-40 m-b-16 section-sub-title">
+              What our clients <br> think <img src="assets/images/front-pages/logoIcon.svg" alt="logo" />
+              about us?
+            </h2>
+            <p class="m-0">
+              Our users' feedback is a testament to our commitment to quality
+              and user satisfaction. Read what they have to say about their
+              journey with us.
+            </p>
+          </div>
+        </div>
+        <div class="col-md-5">
+          <mat-card class="cardWithShadow b-1 rounded-8 m-b-0 p-48">
+            <mat-card-content>
+              <mat-card-title class="f-s-24 f-w-600 m-b-24">Features availability</mat-card-title>
+
+              <div class="d-flex align-items-center gap-16 m-b-24">
+                <div>
+                  <img [src]="currentUser().img" [alt]="currentUser().name" class="rounded-circle" width="40" />
+                </div>
+                <h6 class="f-s-14 f-w-600">{{ currentUser().name }}</h6>
+              </div>
+
+              <p class="f-s-14 m-b-16 m-t-0">
+                Our users' feedback is a testament to our commitment to quality
+                and user satisfaction. Read what they have to say about their
+                journey with us.
+              </p>
+
+              <mat-divider></mat-divider>
+
+              <div class="d-flex align-items-center gap-10 m-t-8">
+                <button class="bg-light icon-32 d-flex align-items-center justify-content-center" mat-icon-button
+                  (click)="goPrev()">
+                  <i-tabler name="chevron-left"
+                    class="icon-18 d-flex align-items-center justify-content-center"></i-tabler>
+                </button>
+
+                <span class="f-s-14">{{ displayCount() }}</span>
+
+                <button class="bg-light icon-32 d-flex align-items-center justify-content-center" mat-icon-button
+                  (click)="goNext()">
+                  <i-tabler name="chevron-right"
+                    class="icon-18 d-flex align-items-center justify-content-center"></i-tabler>
+                </button>
+              </div>
+            </mat-card-content>
+          </mat-card>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="exceptional position-relative">
+    <div class="custom-container">
+      <div class="bg-light-primary rounded-8 exceptional-content spacing-top-bottom">
+        <div class="row justify-content-center">
+          <div class="col-md-6">
+            <h2 class="lh-normal text-center f-s-40 m-b-30 section-sub-title">
+              Enjoy unparalleled features & exceptional flexibility.
+            </h2>
+          </div>
+        </div>
+
+        <div class="m-t-0">
+          <div class="demo-slider overflow-hidden d-flex gap-30">
+            <div class="row flex-nowrap overflow-auto gap-20">
+              @for (followercard of followercardsfirst; track followercard.title)
+              {
+              <div class="col-2">
+                <mat-card class="cardWithShadow demo-slide rounded-8">
+                  <mat-card-content>
+                    <div class="d-flex align-items-center justify-content-center x-20">
+                      <img [src]="followercard.imgSrc" alt="icon" />
+                      <h6 class="m-0 f-w-500 f-s-14 m-x-8">
+                        {{ followercard.title }}
+                      </h6>
+                    </div>
+                  </mat-card-content>
+                </mat-card>
+              </div>
+              }
+            </div>
+          </div>
+          <div class="demo-slider overflow-hidden d-flex gap-30 m-t-2">
+            <div class="row flex-nowrap overflow-auto gap-20">
+              @for (followercard of followercardsecond; track followercard.title)
+              {
+              <div class="col-2">
+                <mat-card class="cardWithShadow demo-slide-two rounded-8">
+                  <mat-card-content>
+                    <div class="d-flex align-items-center justify-content-center x-20">
+                      <img [src]="followercard.imgSrc" alt="icon" />
+                      <h6 class="m-0 f-w-500 f-s-14 m-x-8">
+                        {{ followercard.title }}
+                      </h6>
+                    </div>
+                  </mat-card-content>
+                </mat-card>
+              </div>
+              }
+            </div>
+          </div>
+          <div class="demo-slider overflow-hidden d-flex gap-30 m-t-2">
+            <div class="row flex-nowrap overflow-auto gap-20">
+              @for (followercard of followercardthird; track followercard.title) {
+              <div class="col-2">
+                <mat-card class="cardWithShadow demo-slide rounded-8">
+                  <mat-card-content>
+                    <div class="d-flex align-items-center justify-content-center x-20">
+                      <img [src]="followercard.imgSrc" alt="icon" />
+                      <h6 class="m-0 f-w-500 f-s-14 m-x-8">
+                        {{ followercard.title }}
+                      </h6>
+                    </div>
+                  </mat-card-content>
+                </mat-card>
+              </div>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="asked-questions spacing-top-bottom">
+    <div class="container">
+      <h2 class="f-s-40 text-center lh-normal m-b-48 section-sub-title">Frequently Asked Questions</h2>
+      <div class="row align-items-center justify-content-center">
+        <div class="col-md-8">
+          <mat-accordion multi class="faq-accordion m-b-48 d-block">
+            @for (item of faqList; track item) {
+            <mat-expansion-panel [expanded]="expandedIndex === $index" (opened)="expandedIndex = $index"
+              (closed)="expandedIndex = null" hideToggle class="b-1 expansion-panel m-b-16">
+              <mat-expansion-panel-header>
+                <mat-panel-title class="f-s-18 m-x-0">{{
+                  item.question
+                  }}</mat-panel-title>
+
+                <tabler-icon [name]="expandedIndex === $index ? 'minus' : 'plus'" class="m-s-auto icon-20 m-x-0 p-0">
+                </tabler-icon>
+              </mat-expansion-panel-header>
+
+              <p class="m-0">{{ item.answer }}</p>
+            </mat-expansion-panel>
+            }
+          </mat-accordion>
+        </div>
+      </div>
+      <div class="d-flex justify-content-center">
+        <div class="d-flex align-items-center justify-content-center gap-4 p-y-6 p-x-10 rounded border-dash">
+          <span class="f-s-14">Still have a question?</span>
+          <a target="_blank" href="https://discord.com/invite/XujgB8ww4n"
+            class="text-decoration-underline text-dark f-s-14">Ask on discord</a>
+          <span class="f-s-14">or</span>
+          <a target="_blank" href="https://adminmart.com/support/"
+            class="text-decoration-underline text-dark f-s-14">Submit a ticket</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="footer">
+    <div>
+      <app-footer></app-footer>
+    </div>
+  </div>
+
+</div>

Web/src/app/pages/front-pages/homepage-details/homepage-details.component.scss

@@ -0,0 +1,189 @@
+.home-page {
+  .custom-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    width: 100%;
+    padding: 0 15px;
+  }
+
+  .home-page-header {
+
+    .header-container-content {
+
+      .cardPosition {
+        .float-image {
+          animation: floatUpDown 6s ease-in-out infinite;
+        }
+      }
+
+      .cardPositionTwo {
+
+        .float-image {
+          animation: floatUpDown 6s ease-in-out infinite;
+        }
+      }
+
+      .loginBtn {
+        .play-button {
+          background-color: transparent;
+          border: 2px solid var(--mat-sys-primary); // or use your theme color
+          color: var(--mat-sys-primary);
+          box-shadow: none;
+        }
+
+        .textSee {
+          cursor: pointer;
+
+          &:hover {
+            color: var(--mat-sys-primary);
+          }
+        }
+      }
+    }
+  }
+
+  .dashboardCards {
+
+    .card-container {
+
+      mat-card-content {
+        padding: 0px !important;
+      }
+    }
+  }
+
+  .tab-header {
+    box-shadow: 0px 6px 12px rgba(127, 145, 156, 0.12);
+
+    .profileTabs {
+      background-color: var(--mdc-elevated-card-container-color) !important;
+
+      .mat-mdc-tab.mdc-tab-indicator--active {
+        .mdc-tab__text-label {
+          color: var(--mat-sys-primary);
+        }
+      }
+    }
+
+  }
+
+  .template-slider {
+    .template-slider-content {
+      .demo-slider {
+        .demo-slide {
+          animation: slide3d 15s linear infinite;
+        }
+      }
+    }
+  }
+
+  .features {
+
+    .cardWithShadow {
+      mat-card-content {
+        padding: 0px !important;
+      }
+    }
+  }
+
+  .exceptional {
+    .exceptional-content {
+      .demo-slider {
+        .demo-slide {
+          animation: slide3d 20s linear infinite;
+        }
+
+        .demo-slide-two {
+          animation: slide3dTwo 20s linear infinite;
+        }
+      }
+    }
+  }
+
+  .expansion-panel {
+    box-shadow: none;
+    background: transparent;
+    border-radius: 0 !important;
+    border-bottom: 1px solid var(--mat-sys-outline);
+
+    .mat-expansion-panel-header {
+      padding: 18px 0 !important;
+      height: auto;
+    }
+  }
+
+  .sliderImg {
+    max-width: 380px;
+    height: 300px;
+  }
+
+  .img-border {
+    border: 2px solid var(--mat-sys-secondary);
+    /* Blue border, change color as needed */
+    cursor: pointer;
+  }
+
+  .img-border:hover {
+    border-color: var(--mat-sys-secondary);
+  }
+
+  .border-dash {
+    border: 1px dashed var(--mat-sys-outline); // Initial border color (Bootstrap primary)
+    transition: border-color 0.3s ease;
+    flex-wrap: wrap;
+
+    &:hover {
+      border-color: var(--mat-sys-primary); // Use your Angular Material primary variable or a custom color
+    }
+  }
+
+  .faq-accordion {
+    .mat-expansion-panel {
+      border-radius: 8px !important;
+
+      .mat-expansion-panel-header {
+        padding: 20px 21px !important;
+      }
+    }
+  }
+}
+
+@keyframes floatUpDown {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-6px); // smaller bounce
+  }
+}
+
+@keyframes slide3d {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: translate3d(-2028px, 0, 0); // adjust based on actual slide width
+  }
+}
+
+@keyframes slide3dTwo {
+  from {
+    transform: translate3d(-2028px, 0, 0); // Rightward (starts left)
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+
+
+@media (max-width: 1199px) {
+  .home-page-header {
+    padding-bottom: 48px;
+  }
+}

Web/src/app/pages/front-pages/homepage-details/homepage-details.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomepageDetailsComponent } from './homepage-details.component';
+
+describe('HomepageDetailsComponent', () => {
+  let component: HomepageDetailsComponent;
+  let fixture: ComponentFixture<HomepageDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HomepageDetailsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HomepageDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Web/src/app/pages/front-pages/homepage-details/homepage-details.component.ts

@@ -0,0 +1,131 @@
+import { Component, computed, DestroyRef, inject, signal } from '@angular/core';
+import { IconModule } from '../../../icon/icon.module';
+import { MaterialModule } from '../../../material.module';
+import {
+  faqList,
+  followercardsFirst,
+  followercardSecond,
+  followercardThird,
+  frameworks,
+  tiles,
+  users,
+  topcardsGrid,
+} from '../front-pagesData';
+import { CommonModule } from '@angular/common';
+import { MediaMatcher } from '@angular/cdk/layout';
+import { ImageSliderComponent } from '../image-slider/image-slider.component';
+import { FooterComponent } from '../footer/footer.component';
+import { MatDialog } from '@angular/material/dialog';
+import { TemplateVideoComponent } from '../template-video/template-video.component';
+import { Router, RouterModule } from '@angular/router';
+
+
+@Component({
+  selector: 'app-homepage-details',
+  imports: [
+    MaterialModule,
+    IconModule,
+    CommonModule,
+    ImageSliderComponent,
+    FooterComponent,
+    RouterModule
+  ],
+  templateUrl: './homepage-details.component.html',
+  styleUrl: './homepage-details.component.scss',
+})
+export class HomepageDetailsComponent {
+ 
+  topcards=topcardsGrid;
+
+ 
+  centered = false;
+  disabled = false;
+  unbounded = false;
+  radius: number;
+  color: string;
+  showBackground: boolean = false;
+  frameworks = frameworks;
+  selectedIndex = 1;
+
+  readonly dialog = inject(MatDialog);
+  private router = inject(Router);
+  private destroyRef = inject(DestroyRef); // ✅ For automatic cleanup
+  private mediaMatcher = inject(MediaMatcher); // ✅ Proper MediaMatcher injection
+
+  mobileQuery: MediaQueryList;
+  isMobileView = false;
+
+  readonly panelOpenState = signal(false);
+  tiles = tiles;
+  hideCloserBtn: boolean = true;
+  users = users;
+  expandedIndex: number | null = null;
+  currentIndex = signal(0); // Starting from 0
+  faqList = faqList;
+  selectedPath: string | null = null;
+  clicked = false;
+
+  followercardsfirst = followercardsFirst;
+  followercardsecond = followercardSecond;
+  followercardthird = followercardThird;
+
+  currentUser = computed(() => this.users[this.currentIndex()]);
+  displayCount = computed(() => `${this.currentIndex() + 1}/${this.users.length}`);
+
+  constructor() {
+    const isSmallScreen = this.mediaMatcher.matchMedia('(max-width: 599px)');
+    // ✅ Setup media query for max-width: 1199px
+    this.mobileQuery = this.mediaMatcher.matchMedia('(max-width: 1199px)');
+    this.isMobileView = this.mobileQuery.matches;
+
+    const listener = (e: MediaQueryListEvent) => {
+      this.isMobileView = e.matches;
+    };
+
+    // ✅ Listen to viewport changes
+    this.mobileQuery.addEventListener('change', listener);
+
+    // ✅ Clean up listener on component destroy
+    this.destroyRef.onDestroy(() => {
+      this.mobileQuery.removeEventListener('change', listener);
+    });
+  }
+  isOver(): boolean {
+    return this.mediaMatcher.matchMedia('(max-width: 1199px)').matches;
+  }
+
+  goPrev() {
+    if (this.currentIndex() > 0) {
+      this.currentIndex.update((i) => i - 1);
+    }
+  }
+
+  goNext() {
+    if (this.currentIndex() < this.users.length - 1) {
+      this.currentIndex.update((i) => i + 1);
+    }
+  }
+  openDialog(showBackground:boolean){
+    this.showBackground = showBackground;
+
+    const dialogRef = this.dialog.open(TemplateVideoComponent, {
+      data: {},
+      width: '1000px',
+    });
+  
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result === false) {
+        this.showBackground = false; // Reset or take any action
+      }
+    });
+  }
+
+ 
+  onImageClick(path: string) {
+    this.selectedPath = path;
+
+    setTimeout(() => {
+      this.router.navigate([path]);
+    }, 100); // brief delay to show border
+  }
+}

Web/src/app/pages/front-pages/homepage/homepage.component.html

@@ -0,0 +1,118 @@
+<div>
+  <mat-sidenav-container>
+    <mat-sidenav-content class="landing-page">
+       <mat-toolbar class="topbar front-topbar topbar-xl m-auto bg-light-primary p-y-8"
+        [ngClass]="{ 'fixed-topbar': isTopbarFixed }">
+        <div class="custom-container full-width">
+          <div class="d-flex align-items-center justify-content-between">
+            <div class="branding p-x-0">
+              <app-branding></app-branding>
+            </div>
+
+            @if(!isMobileView){
+            <div class="d-none d-lg-flex justify-content-between toolBarContent">
+              <button mat-button class="m-x-8 f-s-15 f-w-500 nav-item" [routerLink]="['/front-pages/about']"
+                [class.selected]="isActiveRoute('about')">
+                About Us
+              </button>
+              <button mat-button class="m-x-8 f-s-14 f-w-500 nav-item" [class.selected]="isActiveRoute('blog')"
+                [routerLink]="['/front-pages/blog']">
+                Blogs
+              </button>
+              <button mat-button class="m-x-8 f-s-15 f-w-500 nav-item" [routerLink]="['/front-pages/portfolio']"
+                [class.selected]="isActiveRoute('portfolio')">
+                Portfolio
+                <span class="bg-light-primary text-primary rounded f-w-600 p-x-8 p-y-4 f-s-12 m-l-4">
+                  New
+                </span>
+              </button>
+              <button mat-button class="m-x-8 f-s-15 f-w-500 nav-item" [class.selected]="isActiveRoute('dashboard')"
+                [routerLink]="['/dashboards/dashboard1']">
+                Dashboard
+              </button>
+
+              <button mat-button class="m-x-8 f-s-15 f-w-500 nav-item" [class.selected]="isActiveRoute('pricing')"
+                [routerLink]="['/front-pages/pricing']">
+                Pricing
+              </button>
+
+              <button mat-button class="m-x-8 f-s-15 f-w-500 nav-item" [class.selected]="isActiveRoute('contact')"
+                [routerLink]="['/front-pages/contact']">
+                Contact
+              </button>
+            </div>
+            <a mat-flat-button color="primary" class="" [routerLink]="'/authentication/login'">Login</a>
+            } @if(isMobileView){
+            <button mat-mini-fab class="bg-light" aria-label="Example icon button with a delete icon"
+              (click)="customizerRight.toggle()">
+              <i-tabler class="icon-18 d-flex" name="menu"></i-tabler>
+            </button>
+            }
+          </div>
+        </div>
+      </mat-toolbar>
+
+      <div class="content-scroll">
+        <router-outlet></router-outlet>
+      </div>
+    </mat-sidenav-content>
+
+    <mat-sidenav class="mobile-sidebar" #customizerRight mode="over" position="start">
+
+      <div class="">
+        <div class="branding">
+          <app-branding></app-branding>
+        </div>
+        <div class="">
+          <mat-list role="list">
+            <mat-list-item role="listitem">
+              <button mat-button class="text-dark" [routerLink]="['/front-pages/about']"
+                [class.selected]="isActiveRoute('about')">
+                About Us
+              </button></mat-list-item>
+            <mat-list-item role="listitem">
+              <button mat-button class="text-dark" [class.selected]="isActiveRoute('blogs')"
+                [routerLink]="['/front-pages/blog']">
+                Blogs
+              </button></mat-list-item>
+            <mat-list-item role="listitem">
+              <button mat-button class="text-dark" [routerLink]="['/front-pages/portfolio']"
+                [class.selected]="isActiveRoute('portfolio')">
+                Portfolio
+                <span class="bg-light-primary text-primary rounded f-w-600 p-6 p-y-4 f-s-12">
+                  New
+                </span>
+              </button></mat-list-item>
+            <mat-list-item role="listitem">
+              <button mat-button class="text-dark" [class.selected]="isActiveRoute('dashboard')"
+                [routerLink]="['/dashboards/dashboard1']">
+                Dashboard
+              </button>
+            </mat-list-item>
+            <mat-list-item role="listitem">
+              <button mat-button class="text-dark" [class.selected]="isActiveRoute('pricing')"
+                [routerLink]="['/front-pages/pricing']">
+                Pricing
+              </button>
+            </mat-list-item>
+            <mat-list-item role="listitem">
+              <button mat-button class="text-dark " [class.selected]="isActiveRoute('contact')"
+                [routerLink]="['/front-pages/contact']">
+                Contact
+              </button></mat-list-item>
+            <mat-list-item role="listitem" class="w-100">
+              <a mat-flat-button color="primary" class="w-100" [routerLink]="'/authentication/login'">Get
+                Started</a></mat-list-item>
+          </mat-list>
+        </div>
+      </div>
+    </mat-sidenav>
+  </mat-sidenav-container>
+  @if(showBackToTop){
+  <div
+    class="back-to-top bg-primary rounded-circle d-flex align-items-center justify-content-center shadow icon-54 cursor-pointer"
+    (click)="scrollToTop()">
+    <i-tabler name="arrow-up" class="icon-24 text-white"></i-tabler>
+  </div>
+  }
+</div>

Web/src/app/pages/front-pages/homepage/homepage.component.scss

@@ -0,0 +1,32 @@
+.landing-page {
+  .custom-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    width: 100%;
+    padding: 0 15px;
+  }
+
+  .heightToolbar {
+    height: 46px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-image: url(/assets/images/front-pages/topbar-bg.png);
+  }
+
+  .toolBarContent {
+    .nav-item {
+      &.selected {
+        background-color: var(--mat-sys-primary-fixed-dim);
+        color: var(--mat-sys-primary); // optional for visibility
+        transition: background-color 0.3s ease;
+      }
+
+      &:hover {
+        color: var(--mat-sys-primary);
+        transition: color 0.3s ease;
+      }
+    }
+
+  }
+
+}

Web/src/app/pages/front-pages/homepage/homepage.component.ts

@@ -0,0 +1,61 @@
+import { MediaMatcher } from '@angular/cdk/layout';
+import { CommonModule } from '@angular/common';
+import { Component, HostListener, inject, ViewChild } from '@angular/core';
+import { MatSidenav } from '@angular/material/sidenav';
+import { ActivatedRoute, Router, RouterLink, RouterOutlet } from '@angular/router';
+import { IconModule } from '../../../icon/icon.module';
+import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
+import { MaterialModule } from '../../../material.module';
+
+@Component({
+  selector: 'app-homepage',
+  imports: [MaterialModule, BrandingComponent, RouterLink,
+    IconModule, RouterOutlet, CommonModule],
+  templateUrl: './homepage.component.html',
+  styleUrl: './homepage.component.scss'
+})
+export class HomepageComponent {
+  @ViewChild('customizerRight') customizerRight!: MatSidenav;
+  selected: string = ''; // default selected
+  mobileQuery: MediaQueryList;
+  isMobileView = false;
+  private router = inject(Router)
+  private mediaMatcher: MediaQueryList = matchMedia(`(max-width: 1199px)`);
+  showBackToTop: boolean = false;
+  isTopbarFixed: boolean = false;
+  constructor(private route: ActivatedRoute) {
+    const media = inject(MediaMatcher);
+    this.mobileQuery = media.matchMedia('(max-width: 1199px)');
+    this.isMobileView = this.mobileQuery.matches;
+
+    this.mobileQuery.addEventListener('change', (e) => {
+
+      this.isMobileView = e.matches;
+      this.closeSidenavIfNeeded();
+    });
+  }
+  closeSidenavIfNeeded() {
+    if (!this.isMobileView && this.customizerRight?.opened) {
+      this.customizerRight.close();
+    }
+  }
+  isOver(): boolean {
+    return this.mediaMatcher.matches;
+  }
+
+  isActiveRoute(route: string): boolean {
+    return this.router.url.includes(`/front-pages/${route}`);
+  }
+  getNavigate() {
+    this.router.navigate(['/dashboards/dashboard1'])
+  }
+
+  scrollToTop(): void {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+  @HostListener('window:scroll', [])
+  onWindowScroll() {
+    this.showBackToTop = window.scrollY > 300;
+    this.isTopbarFixed = scrollY > 45;
+  }
+}

Web/src/app/pages/front-pages/image-slider/image-slider.component.html

@@ -0,0 +1,44 @@
+<div class="img-slider-content">
+  <div class="container img-slider">
+    <div class="">
+      <div class="row m-b-48">
+        <div class="col-md-5">
+          <h2 class="f-s-40 lh-lg m-b-24 section-sub-title">Our leadership</h2>
+          <div class="d-flex justify-content-between align-items-center">
+            <p class="m-0">
+              Our robust analytics offer rich insights into the information
+              buyers want, informing where teams
+            </p>
+          </div>
+        </div>
+
+        <div class="col-md-7 m-t-24 position-relative d-flex flex-column justify-content-end align-items-end">
+          <div class="d-flex gap-16">
+            <button mat-icon-button class="d-flex align-items-center justify-content-center icon-48 bg-light" aria-label="Previous" (click)="prev()">
+              <i-tabler name="arrow-left" class="d-flex align-items-center justify-content-center"></i-tabler>
+            </button>
+            <button mat-icon-button class="d-flex align-items-center justify-content-center icon-48 bg-light" aria-label="Next" (click)="next()">
+              <i-tabler name="arrow-right" class="d-flex align-items-center justify-content-center"></i-tabler>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        @for (member of visibleTeamMembers(); track member.id){
+        <div class="col-sm-6 col-md-3">
+          <mat-card class="cardWithShadow productcard overflow-hidden rounded-8 position-relative shadow-none">
+            <a routerLink="/widgets/cards">
+              <img [src]="member.image" alt="imgSrc" class="w-100 h-100 rounded-7" mat-card-image />
+            </a>
+            <mat-card class="position-absolute info-card text-center p-y-16 p-x-10">
+              <h3 class="f-w-600 m-b-8">{{ member.name }}</h3>
+              <p class="f-s-14 m-y-0">{{ member.position }}</p>
+            </mat-card>
+          </mat-card>
+        </div>
+        }
+      </div>
+    </div>
+  </div>
+</div>

Web/src/app/pages/front-pages/image-slider/image-slider.component.scss

@@ -0,0 +1,22 @@
+.img-slider-content {
+  .img-slider {
+
+    .mat-mdc-card {
+      margin-bottom: 0px !important;
+    }
+
+    .productcard {
+      position: relative;
+
+      .info-card {
+        bottom: 42px; // controls overlap depth
+        left: 50%;
+        transform: translateX(-50%);
+        width: 90%;
+        box-shadow: 0px 6px 12px rgba(127, 145, 156, 0.12);
+        z-index: 2;
+      }
+    }
+
+  }
+}

Web/src/app/pages/front-pages/image-slider/image-slider.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImageSliderComponent } from './image-slider.component';
+
+describe('ImageSliderComponent', () => {
+  let component: ImageSliderComponent;
+  let fixture: ComponentFixture<ImageSliderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ImageSliderComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ImageSliderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Web/src/app/pages/front-pages/image-slider/image-slider.component.ts

@@ -0,0 +1,39 @@
+import { Component, computed, signal } from '@angular/core';
+import { IconModule } from '../../../icon/icon.module';
+import { MaterialModule } from '../../../material.module';
+import { team } from '../front-pagesData';
+
+@Component({
+  selector: 'app-image-slider',
+  imports: [MaterialModule,IconModule],
+  templateUrl: './image-slider.component.html',
+  styleUrl: './image-slider.component.scss'
+})
+export class ImageSliderComponent {
+  team = team;
+  // Signals
+  currentPage = signal(0);
+  pageSize = 4;
+
+  visibleTeamMembers = computed(() => {
+    const start = this.currentPage() * this.pageSize;
+    const end = start + this.pageSize;
+    return this.team.slice(start, end);
+  });
+
+  next() {
+    console.log('next--->',this.visibleTeamMembers().map(m => m.id));
+    const totalPages = Math.ceil(this.team.length / this.pageSize);
+    if (this.currentPage() < totalPages - 1) {
+      this.currentPage.update((p) => p + 1);
+    }
+  }
+
+  prev() {
+    console.log(this.visibleTeamMembers().map(m => m.id));
+    if (this.currentPage() > 0) {
+      this.currentPage.update((p) => p - 1);
+    }
+  }
+  
+}

Web/src/app/pages/front-pages/page-pricing/page-pricing.component.html

@@ -0,0 +1,68 @@
+<div class="row justify-content-center">
+  <div class="col-lg-7 col-sm-11">
+    <h2 class="f-s-40 text-center m-b-48 lh-normal section-sub-title">
+      111,476+ Trusted developers & many tech giants as well
+    </h2>
+  </div>
+</div>
+<div class="row">
+  @for(plan of plans;track plan){
+  <div class="col-lg-3 col-md-4 col-sm-6">
+    <mat-card class="cardWithShadow b-1">
+      <mat-card-content>
+
+        <div class="m-b-16 d-flex align-items-center">
+          <h6 class="f-s-20 f-w-600  ">
+            {{ plan.title }}
+            @if (plan.popular) {
+            <span class="bg-light-primary text-primary rounded f-w-600 f-s-12 p-y-2  p-x-8">
+              Popular
+            </span>
+            }
+          </h6>
+        </div>
+        <p class="f-s-12 m-b-32 m-t-0">{{ plan.description }}</p>
+        <mat-divider></mat-divider>
+
+        <div class="price-line m-t-32">
+          <span class="f-s-40 f-w-600">${{ plan.price }}</span>
+          <span class="f-s-14">/{{ plan.period }}</span>
+        </div>
+        <div class="m-y-32">
+          @for(feature of plan.features; track feature) {
+          <div class="d-flex align-items-center gap-8 m-b-12">
+            <img
+              [src]="feature.included ? '/assets/images/front-pages/icon-circle-check.svg' : '/assets/images/front-pages/icon-circle-x.svg'"
+              alt="icon-facebook-dark" width="21" height="21" />
+
+            <span [ngClass]="{
+                                'f-w-600': feature.bold,
+                                'f-s-14 op-5': !feature.included,
+                                'f-s-14': feature.included
+                              }">
+              {{ feature.text }}
+            </span>
+          </div>
+          }
+        </div>
+
+        <button mat-flat-button color="primary" class="w-100 ">
+          Purchase Now
+        </button>
+      </mat-card-content>
+    </mat-card>
+
+  </div>
+  }
+
+
+</div>
+<div class="m-t-32">
+  <p class="text-center f-s-14 m-b-0">Secured payment with PayPal & Razorpay</p>
+  <div class="d-flex align-items-center justify-content-center m-t-32 m-x-0 gap-48 flex-wrap">
+    @for( logo of paymentLogos;track logo){
+    <img class="cursor-pointer" [src]="logo.src" [alt]="logo.alt" [matTooltip]="logo.tooltip"
+      matTooltipPosition="below">
+    }
+  </div>
+</div>

Web/src/app/pages/front-pages/page-pricing/page-pricing.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PagePricingComponent } from './page-pricing.component';
+
+describe('PagePricingComponent', () => {
+  let component: PagePricingComponent;
+  let fixture: ComponentFixture<PagePricingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PagePricingComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PagePricingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Web/src/app/pages/front-pages/page-pricing/page-pricing.component.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { IconModule } from '../../../icon/icon.module';
+import { MaterialModule } from '../../../material.module';
+import { paymentLogos, plans } from '../front-pagesData';
+
+@Component({
+  selector: 'app-page-pricing',
+  imports: [MaterialModule, IconModule, CommonModule],
+  templateUrl: './page-pricing.component.html',
+  styleUrl: './page-pricing.component.scss',
+})
+export class PagePricingComponent {
+  plans = plans;
+
+  paymentLogos = paymentLogos;
+}

Web/src/app/pages/front-pages/portfolio/portfolio.component.html

@@ -0,0 +1,57 @@
+<div class="banner-section bg-light-primary spacing-top-bottom">
+  <div class="container">
+    <p class="text-primary text-center text-uppercase f-s-14 m-t-0">
+      Portfolio
+    </p>
+    <h1 class="text-center f-s-48 section-sub-title lh-normal">Explore Our Latest Works</h1>
+  </div>
+</div>
+
+<div class="spacing-top-bottom">
+  <div class="container">
+    <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap m-b-24">
+      <div class="d-flex align-items-center gap-8 m-b-10">
+        <h5 class="f-w-500 f-s-20">Portfolio</h5>
+        <div class="p-x-6 p-y-2 rounded-pill bg-secondary text-white">
+          <div class="f-s-14 lh-sm">{{ filteredCount }} </div>
+        </div>
+      </div>
+
+      <!-- Search bar pushed to the right -->
+      <mat-form-field appearance="outline" class="search-bar-style hide-hint">
+        <mat-icon matPrefix>search</mat-icon>
+        <input matInput placeholder="Search Photos" [(ngModel)]="searchText" (input)="onSearchChange()" />
+      </mat-form-field>
+    </div>
+    <div class="row">
+      @for(productcard of filteredCardImgs; track productcard.id) {
+      <div class="col-sm-6 col-lg-4">
+        <mat-card class="cardWithShadow productcard overflow-hidden b-1 rounded">
+          <a routerLink="/widgets/cards">
+            <img src="{{ productcard.imgSrc }}" alt="imgSrc" class="w-100 object-cover" height="220" mat-card-image />
+          </a>
+          <mat-card-content class="p-b-24 p-t-12 position-relative">
+            <mat-card-title class="mat-headline-2 f-s-16 m-b-4">
+              <div class="d-flex align-items-center justify-content-between">
+                <!-- Left Side: Text Content -->
+                <div>
+                  <h6 class="f-s-16 lh-sm f-w-600">{{ productcard.title }}</h6>
+                  <p class="f-s-12 f-w-400 m-y-0">{{ productcard.date }}</p>
+                </div>
+
+                <!-- Right Side: Icon -->
+                <button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
+                  <mat-icon>more_vert</mat-icon>
+                </button>
+              </div>
+            </mat-card-title>
+          </mat-card-content>
+        </mat-card>
+      </div>
+      }
+    </div>
+  </div>
+</div>
+<div class="footer">
+  <app-footer></app-footer>
+</div>