first commit

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "semi": true,
+    "singleQuote": true,
+    "printWidth": 160,
+    "vueIndentScriptAndStyle": true
+}

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

README.md

@@ -0,0 +1,27 @@
+# PlurkAngular
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.4.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

angular.json

@@ -0,0 +1,115 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "cli": {
+        "packageManager": "npm",
+        "analytics": false
+    },
+    "newProjectRoot": "projects",
+    "projects": {
+        "plurk-angular": {
+            "projectType": "application",
+            "schematics": {},
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
+            "architect": {
+
+
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": [
+                            "zone.js"
+                        ],
+                        "tsConfig": "tsconfig.app.json",
+                        "assets": [
+                            "src/assets",
+                            "src/demo-prepare.html"
+                        ],
+                        "styles": [
+                            "src/assets/css/styles.css",
+                            "src/assets/css/tailwind.css"
+                        ],
+                        "scripts": [
+                            "./node_modules/aos/dist/aos.js"
+                        ],
+                        "allowedCommonJsDependencies": [
+                            "aos","ngx-lightbox"
+                        ]
+                    },
+                    "configurations": {
+                        "production": {
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "2mb",
+                                    "maximumError": "5mb"
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "2kb",
+                                    "maximumError": "4kb"
+                                }
+                            ],
+                            "outputHashing": "all"
+                        },
+                        "development": {
+                            "buildOptimizer": false,
+                            "optimization": false,
+                            "vendorChunk": true,
+                            "extractLicenses": false,
+                            "sourceMap": true,
+                            "namedChunks": true
+                        }
+                    },
+                    "defaultConfiguration": "production"
+                },
+                "serve": {
+
+                        "options": {
+                            "port": 4201
+                        },
+                    
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "plurk-angular:build:production"
+                        },
+                        "development": {
+                            "browserTarget": "plurk-angular:build:development"
+                        }
+                    },
+                    "defaultConfiguration": "development"
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "plurk-angular:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "polyfills": [
+                            "zone.js",
+                            "zone.js/testing"
+                        ],
+                        "tsConfig": "tsconfig.spec.json",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "src/styles.css"
+                        ],
+                        "scripts": []
+                    }
+                }
+            }
+        }
+    }
+}

mac_setup.txt

@@ -0,0 +1,6 @@
+
+[[ -s $HOME/.nvm/nvm.sh ]] && . $HOME/.nvm/nvm.sh  # This loads NVM
+
+
+ nvm use 12                                                         
+ 

package.json

@@ -0,0 +1,62 @@
+{
+    "name": "plurk-angular",
+    "version": "0.0.0",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve --open --watch",
+        "build": "ng build",
+        "watch": "ng build --watch --configuration development",
+        "test": "ng test"
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/animations": "^15.0.0",
+        "@angular/common": "^15.0.0",
+        "@angular/compiler": "^15.0.0",
+        "@angular/core": "^15.0.0",
+        "@angular/forms": "^15.0.0",
+        "@angular/platform-browser": "^15.0.0",
+        "@angular/platform-browser-dynamic": "^15.0.0",
+        "@angular/router": "^15.0.0",
+        "@ngrx/store": "^15.0.0",
+        "@nicky-lenaers/ngx-scroll-to": "^9.0.0",
+        "@supabase/supabase-js": "^2.36.0",
+        "@tailwindcss/line-clamp": "^0.4.2",
+        "@tailwindcss/typography": "^0.5.8",
+        "aos": "^2.3.4",
+        "apexcharts": "^3.36.3",
+        "file-saver": "^2.0.5",
+        "ng-apexcharts": "^1.7.4",
+        "ng-particles": "^2.1.11",
+        "ngx-countup": "^13.1.0",
+        "ngx-lightbox": "^2.4.1",
+        "ngx-owl-carousel-o": "^5.0.0",
+        "ngx-typed-js": "^2.0.2",
+        "or": "^0.2.0",
+        "rxjs": "~7.5.0",
+        "swiper": "^8.4.5",
+        "tslib": "^2.3.0",
+        "tsparticles": "^1.18.11",
+        "xlsx": "^0.18.5",
+        "zone.js": "~0.12.0"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "^15.0.4",
+        "@angular/cli": "~15.0.4",
+        "@angular/compiler-cli": "^15.0.0",
+        "@types/aos": "^3.0.4",
+        "@types/jasmine": "~4.3.0",
+        "autoprefixer": "^10.4.13",
+        "jasmine-core": "~4.5.0",
+        "karma": "~6.4.0",
+        "karma-chrome-launcher": "~3.1.0",
+        "karma-coverage": "~2.2.0",
+        "karma-jasmine": "~5.1.0",
+        "karma-jasmine-html-reporter": "~2.0.0",
+        "postcss": "^8.4.20",
+        "prettier": "^2.8.1",
+        "prettier-plugin-tailwindcss": "^0.2.1",
+        "tailwindcss": "^3.2.4",
+        "typescript": "~4.8.2"
+    }
+}

src/app/about-us.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './about-us.html',
+})
+export class AboutUsComponent {
+    storeData: any;
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/app-routing.module.ts

@@ -0,0 +1,105 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { IndexComponent } from './index';
+import { ErrorComponent } from './error';
+import { PortfolioComponent } from './portfolio';
+import { PortfolioDetailComponent } from './portfolio-detail';
+import { ServicesComponent } from './services';
+import { ServicesDetailComponent } from './services-detail';
+import { TeamComponent } from './team';
+import { AboutUsComponent } from './about-us';
+import { CareerComponent } from './career';
+import { ContactUsComponent } from './contact-us';
+import { TermsConditionsComponent } from './terms-conditions';
+import { PrivacyPolicyComponent } from './privacy-policy';
+import { FaqComponent } from './faq';
+import { BlogComponent } from './blog';
+import { BlogDetailsComponent } from './blog-details';
+import { CryptoComponent } from './crypto';
+import { RealEstateComponent } from './real-estate';
+import { ModernSaasComponent } from './modern-saas';
+import { HealthcareComponent } from './healthcare';
+import { HotelResortComponent } from './hotel-resort';
+import { MarketingComponent } from './marketing';
+import { ApplicationComponent } from './application';
+import { NftComponent } from './nft';
+import { BlogLandingComponent } from './blog-landing';
+import { ConstructionComponent } from './construction';
+import { ConsultingComponent } from './consulting';
+import { CreativeComponent } from './creative-agency';
+import { EventComponent } from './event-concert';
+import { GymComponent } from './gym';
+import { InsuranceComponent } from './insurance';
+import { JobPlacementComponent } from './job-placement';
+import { OnlineCoursesComponent } from './online-courses';
+import { OnlinePaymentsComponent } from './online-payments';
+import { PersonalPortfolioComponent } from './personal-portfolio';
+import { RestaurantComponent } from './restaurant';
+import { PortfolioLandingComponent } from './portfolio-landing';
+import { PhotographyComponent } from './photography';
+import { RootComponent } from './root/root.component';
+import { RootContactUsComponent } from './root-contact-us/root-contact-us.component';
+import { RootBlogComponent } from './root-blog/root-blog.component';
+import { RootBlogDetailsComponent } from './root-blog-details/root-blog-details.component';
+import { StaffComponent } from './staff/staff.component';
+import { RootEventComponent } from './root-event/root-event.component';
+import { RootAboutUsComponent } from './root-about-us/root-about-us.component';
+
+const routes: Routes = [
+    { path: '', component: RootComponent, title: 'cmc - home' },
+    { path: 'contactUs', component: RootContactUsComponent, title: 'cmc - home' },
+    { path: 'aboutUs', component: RootAboutUsComponent, title: 'cmc - home' },
+    { path: 'blogs', component: RootBlogComponent, title: 'cmc - home' },
+    { path: 'root-events', component: RootEventComponent, title: 'cmc - home' },
+    { path: 'staff', component: StaffComponent, title: 'cmc - home' },
+    { path: 'root-blog-details/:id', component: RootBlogDetailsComponent, title: 'cmc - home' },
+
+    // {
+    //     path: 'pa',
+    //     loadChildren: () => import('./pages/pages.module').then((m) => m.PagesModule),
+    // },
+    // { path: 'index', component: IndexComponent, title: 'Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'portfolio', component: PortfolioComponent, title: 'Portfolio | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'portfolio-detail', component: PortfolioDetailComponent, title: 'Portfolio Detail | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'services', component: ServicesComponent, title: 'Services | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'services-detail', component: ServicesDetailComponent, title: 'Services Detail | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'team', component: TeamComponent, title: 'Team | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'about-us', component: AboutUsComponent, title: 'About Us | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'career', component: CareerComponent, title: 'Career | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'contact-us', component: ContactUsComponent, title: 'Contact Us | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'terms-conditions', component: TermsConditionsComponent, title: 'Terms Conditions | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'privacy-policy', component: PrivacyPolicyComponent, title: 'Privacy Policy | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'faq', component: FaqComponent, title: 'FAQs | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'blog', component: BlogComponent, title: 'Blog | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'blog-details', component: BlogDetailsComponent, title: 'Blog Details | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'crypto', component: CryptoComponent, title: 'Crypto | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'real-estate', component: RealEstateComponent, title: 'Real Estate | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'modern-saas', component: ModernSaasComponent, title: 'Modern SAAS | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'healthcare', component: HealthcareComponent, title: 'Health Care | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'hotel-resort', component: HotelResortComponent, title: 'Hotel & Resort | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'marketing', component: MarketingComponent, title: 'Marketing | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'application', component: ApplicationComponent, title: 'Application | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'nft', component: NftComponent, title: 'Nft | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'blog-landing', component: BlogLandingComponent, title: 'Blog | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'construction', component: ConstructionComponent, title: 'Construction | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'consulting', component: ConsultingComponent, title: 'Consulting | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'creative-agency', component: CreativeComponent, title: 'Creative Agency | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'event-concert', component: EventComponent, title: 'Event Concert | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'gym', component: GymComponent, title: 'GYM | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'insurance', component: InsuranceComponent, title: 'Insurance | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'job-placement', component: JobPlacementComponent, title: 'Job Placement | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'online-courses', component: OnlineCoursesComponent, title: 'Online Courses | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'online-payments', component: OnlinePaymentsComponent, title: 'Online Payments | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'personal-portfolio', component: PersonalPortfolioComponent, title: 'Personal Portfolio | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'restaurant', component: RestaurantComponent, title: 'Restaurant | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'portfolio-landing', component: PortfolioLandingComponent, title: 'Portfolio Landing | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    // { path: 'photography', component: PhotographyComponent, title: 'Photography | Plurk – Tailwind CSS Multipurpose Landing Templates' },
+    { path: '**', component: ErrorComponent },
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })],
+    exports: [RouterModule],
+})
+export class AppRoutingModule {}

src/app/app.component.html

@@ -0,0 +1,44 @@
+<div
+    class="flex min-h-screen flex-col bg-white bg-gradient-to-r from-[#FCF1F4] to-[#EDFBF9] font-mulish text-base font-normal text-gray antialiased dark:bg-[#101926] dark:from-transparent dark:to-transparent">
+    <!-- screen loader -->
+    <div *ngIf="storeData.isShowMainLoader"
+        class="screen_loader fixed inset-0 z-[60] grid place-content-center bg-[#fafafa] dark:bg-[#060818]">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px"
+            viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+            <circle cx="50" cy="50" r="0" fill="none" stroke="#47bdff" stroke-width="4">
+                <animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;16" keyTimes="0;1"
+                    keySplines="0 0.2 0.8 1" calcMode="spline" begin="0s"></animate>
+                <animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1"
+                    keySplines="0.2 0 0.8 1" calcMode="spline" begin="0s"></animate>
+            </circle>
+            <circle cx="50" cy="50" r="0" fill="none" stroke="#b476e5" stroke-width="4">
+                <animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;16" keyTimes="0;1"
+                    keySplines="0 0.2 0.8 1" calcMode="spline" begin="-0.5s"></animate>
+                <animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1"
+                    keySplines="0.2 0 0.8 1" calcMode="spline" begin="-0.5s"></animate>
+            </circle>
+        </svg>
+    </div>
+
+    <header class="sticky top-0 z-50 bg-black/10 transition duration-300" [ngClass]="headerClass"></header>
+
+    <div class="-mt-[82px] flex-grow overflow-x-hidden lg:-mt-[106px]">
+        <router-outlet></router-outlet>
+    </div>
+
+    <footer
+        class="mt-auto bg-white dark:bg-transparent dark:bg-gradient-to-b dark:from-white/[0.03] dark:to-transparent">
+    </footer>
+
+    <!-- Return to Top -->
+    <button *ngIf="showTopButton" type="button" class="fixed bottom-5 z-10 animate-bounce ltr:right-5 rtl:left-5"
+        (click)="scrollToTop()">
+        <div
+            class="group flex h-14 w-14 items-center justify-center rounded-full border border-black/20 bg-black text-white transition duration-500 hover:bg-secondary dark:bg-primary dark:hover:bg-secondary">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="h-6 w-6 transition group-hover:text-black">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
+            </svg>
+        </div>
+    </button>
+</div>

src/app/app.component.ts

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppService } from './service/app.service';
+import * as AOS from 'aos';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+})
+export class AppComponent {
+    storeData: any;
+    showTopButton = false;
+    constructor(public store: Store<any>, private service: AppService) {
+        this.initStore();
+    }
+    headerClass = '';
+    ngOnInit() {
+        window.addEventListener('scroll', () => {
+            if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
+                this.showTopButton = true;
+                this.headerClass = 'sticky-header';
+            } else {
+                this.showTopButton = false;
+                this.headerClass = '';
+            }
+        });
+
+        // aos animation
+        AOS.init({
+            once: true,
+        });
+
+        // main loader
+        this.store.dispatch({ type: 'toggleMainLoader', payload: false });
+    }
+
+    ngOnDestroy() {
+        window.removeEventListener('scroll', () => {});
+    }
+
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+
+    scrollToTop() {
+        document.body.scrollTop = 0;
+        document.documentElement.scrollTop = 0;
+    }
+}

src/app/app.module.ts

@@ -0,0 +1,167 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule, Title } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { CommonModule } from '@angular/common';
+
+//swiper
+import { SwiperModule } from 'swiper/angular';
+
+// counter
+import { CountUpModule } from 'ngx-countup';
+
+// lightbox
+import { LightboxModule } from 'ngx-lightbox';
+
+// apexchart
+import { NgApexchartsModule } from 'ng-apexcharts';
+
+// store
+import { StoreModule } from '@ngrx/store';
+import { indexReducer } from './store/index.reducer';
+
+// service
+import { AppService } from './service/app.service';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+
+//Layout
+import { HeaderComponent } from './layout/header';
+import { FooterComponent } from './layout/footer';
+import { ErrorComponent } from './error';
+
+//components
+import { IndexComponent } from './index';
+import { PortfolioComponent } from './portfolio';
+import { PortfolioDetailComponent } from './portfolio-detail';
+import { ContactusComponent } from './components/contactus-component';
+import { ServicesComponent } from './services';
+import { ModalDialog } from './components/modal-dialog';
+import { ServicesDetailComponent } from './services-detail';
+import { TeamComponent } from './team';
+import { AboutUsComponent } from './about-us';
+import { CareerComponent } from './career';
+import { ContactUsComponent } from './contact-us';
+import { TermsConditionsComponent } from './terms-conditions';
+import { PrivacyPolicyComponent } from './privacy-policy';
+import { FaqComponent } from './faq';
+import { BlogComponent } from './blog';
+import { BlogDetailsComponent } from './blog-details';
+import { TestimonialComponent } from './components/testimonial';
+import { BlogSliderComponent } from './components/blog-slider';
+import { OfficeSwiperComponent } from './components/office-swiper';
+import { ProjectSliderComponent } from './components/project-slider';
+import { CounterComponent } from './components/counter';
+import { FaqAccordionComponent } from './components/faq-component';
+import { CryptoComponent } from './crypto';
+import { RealEstateComponent } from './real-estate';
+import { ModernSaasComponent } from './modern-saas';
+import { LogoSliderComponent } from './components/logo-slider';
+import { HealthcareComponent } from './healthcare';
+import { HotelResortComponent } from './hotel-resort';
+import { MarketingComponent } from './marketing';
+import { ClientSliderComponent } from './components/client-slider';
+import { ApplicationComponent } from './application';
+import { NftComponent } from './nft';
+import { BlogLandingComponent } from './blog-landing';
+import { ConstructionComponent } from './construction';
+import { ConsultingComponent } from './consulting';
+import { CreativeComponent } from './creative-agency';
+import { EventComponent } from './event-concert';
+import { GymComponent } from './gym';
+import { InsuranceComponent } from './insurance';
+import { JobPlacementComponent } from './job-placement';
+import { OnlineCoursesComponent } from './online-courses';
+import { OnlinePaymentsComponent } from './online-payments';
+import { PersonalPortfolioComponent } from './personal-portfolio';
+import { RestaurantComponent } from './restaurant';
+import { PortfolioLandingComponent } from './portfolio-landing';
+import { PhotographyComponent } from './photography';
+import { HttpClientModule } from '@angular/common/http';
+import { RootComponent } from './root/root.component';
+import { RootContactUsComponent } from './root-contact-us/root-contact-us.component';
+import { RootBlogComponent } from './root-blog/root-blog.component';
+import { RootBlogDetailsComponent } from './root-blog-details/root-blog-details.component';
+import { StaffComponent } from './staff/staff.component';
+import { RootEventComponent } from './root-event/root-event.component';
+import { RootEventDetailsComponent } from './root-event-details/root-event-details.component';
+import { RootAboutUsComponent } from './root-about-us/root-about-us.component';
+
+@NgModule({
+    declarations: [
+        ModalDialog,
+        AppComponent,
+        HeaderComponent,
+        FooterComponent,
+        ErrorComponent,
+        IndexComponent,
+        PortfolioComponent,
+        PortfolioDetailComponent,
+        ContactusComponent,
+        ServicesComponent,
+        ServicesDetailComponent,
+        TeamComponent,
+        AboutUsComponent,
+        CareerComponent,
+        ContactUsComponent,
+        TermsConditionsComponent,
+        PrivacyPolicyComponent,
+        FaqComponent,
+        BlogComponent,
+        BlogDetailsComponent,
+        TestimonialComponent,
+        BlogSliderComponent,
+        OfficeSwiperComponent,
+        ProjectSliderComponent,
+        CounterComponent,
+        FaqAccordionComponent,
+        CryptoComponent,
+        RealEstateComponent,
+        ModernSaasComponent,
+        LogoSliderComponent,
+        HealthcareComponent,
+        HotelResortComponent,
+        MarketingComponent,
+        ClientSliderComponent,
+        ApplicationComponent,
+        NftComponent,
+        BlogLandingComponent,
+        ConstructionComponent,
+        ConsultingComponent,
+        CreativeComponent,
+        EventComponent,
+        GymComponent,
+        InsuranceComponent,
+        JobPlacementComponent,
+        OnlineCoursesComponent,
+        OnlinePaymentsComponent,
+        PersonalPortfolioComponent,
+        RestaurantComponent,
+        PortfolioLandingComponent,
+        PhotographyComponent,
+        RootComponent,
+        RootContactUsComponent,
+        RootBlogComponent,
+        RootBlogDetailsComponent,
+        StaffComponent,
+        RootEventComponent,
+        RootEventDetailsComponent,
+        RootAboutUsComponent
+    ],
+    imports: [
+        HttpClientModule,
+        
+        BrowserModule,
+        BrowserAnimationsModule,
+        CommonModule,
+        AppRoutingModule,
+        SwiperModule,
+        CountUpModule,
+        LightboxModule,
+        NgApexchartsModule,
+        StoreModule.forRoot({ index: indexReducer }),
+    ],
+    providers: [AppService, Title],
+    bootstrap: [AppComponent],
+})
+export class AppModule {}

src/app/application.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import SwiperCore, { SwiperOptions, Navigation, Autoplay } from 'swiper';
+
+// install Swiper modules
+SwiperCore.use([Navigation, Autoplay]);
+@Component({
+    moduleId: module.id,
+    templateUrl: './application.html',
+})
+export class ApplicationComponent {
+    config: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        speed: 2500,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        modules: [Autoplay],
+        breakpoints: {
+            320: {
+                slidesPerView: 2,
+            },
+            600: {
+                slidesPerView: 4,
+            },
+            1000: {
+                slidesPerView: 5,
+            },
+            1600: {
+                slidesPerView: 7,
+            },
+        },
+    };
+    constructor() {}
+}

src/app/blog-details.html

@@ -0,0 +1,135 @@
+<div>
+    <div class="bg-[url(/assets/images/inner-page-hero-bg.png)] bg-cover bg-bottom bg-no-repeat pt-[82px] lg:pt-[106px]">
+        <div class="relative">
+            <div class="container">
+                <div class="relative w-full py-14 md:my-14 md:inline-block md:py-0 lg:my-[128px]">
+                    <div class="heading relative mb-8 text-center lg:mb-0 lg:w-1/2 ltr:lg:text-left rtl:lg:text-right">
+                        <h6>Project Management</h6>
+                        <h4 class="!text-white">Why is JIRA important for managing projects?</h4>
+                        <ul class="items-center justify-center pt-6 sm:flex lg:justify-start">
+                            <li class="flex items-center justify-center">
+                                <img src="/assets/images/sophia-avtar.png" alt="avtar" />
+                                <span class="px-4 font-semibold sm:text-lg">Sophia Reyes</span>
+                            </li>
+                            <li
+                                class="relative px-4 font-semibold before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-full before:bg-gray ltr:before:left-0 rtl:before:right-0 sm:text-lg sm:before:h-1 sm:before:w-1"
+                            >
+                                June 2, 2021
+                            </li>
+                            <li
+                                class="relative px-4 font-semibold before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-full before:bg-gray ltr:before:left-0 rtl:before:right-0 sm:text-lg sm:before:h-1 sm:before:w-1"
+                            >
+                                3 mins read
+                            </li>
+                        </ul>
+                    </div>
+                    <div
+                        class="top-0 mt-6 ltr:right-0 rtl:left-0 md:mt-0 lg:absolute"
+                        [attr.data-aos]="storeData.direction === 'rtl' ? 'fade-right' : 'fade-left'"
+                        data-aos-duration="1000"
+                    >
+                        <img
+                            src="/assets/images/blog-detail-hero.png"
+                            alt="blog-detail-hero"
+                            class="mx-auto h-80 rounded-[32px] object-cover sm:h-[400px] sm:w-[445px]"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <section class="bg-gradient-to-t from-white to-transparent py-14 dark:bg-none md:py-[100px]">
+        <div class="container">
+            <div class="prose max-w-full dark:prose-invert">
+                <h2>Where does it come from?</h2>
+                <p>
+                    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making
+                    it over 2000 years old.
+                </p>
+                <p>
+                    Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur,
+                    from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
+                </p>
+
+                <h2>Where can I get some?</h2>
+                <p>
+                    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.
+                </p>
+
+                <h2>Where does it come from?</h2>
+                <ul>
+                    <li>Vestibulum hendrerit tortor ac rutrum porta.</li>
+                    <li>Donec gravida elit a auctor luctus.</li>
+                    <li>Integer iaculis odio id blandit varius.</li>
+                </ul>
+
+                <h4>What is Lorem Ipsum?</h4>
+                <p>
+                    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.
+                </p>
+
+                <div class="not-prose grid gap-[30px] pb-12 sm:grid-cols-2 lg:grid-cols-3">
+                    <div class="group h-[400px] overflow-hidden rounded-[32px] lg:col-span-2" data-aos="fade-up" data-aos-duration="1000">
+                        <img
+                            src="/assets/images/blog-detail-1.png"
+                            alt="blog-detail-1"
+                            class="h-full w-full rounded-[32px] object-cover transition duration-500 group-hover:scale-110"
+                        />
+                    </div>
+                    <div class="group h-[400px] overflow-hidden rounded-[32px]" data-aos="fade-up" data-aos-duration="1000">
+                        <img
+                            src="/assets/images/blog-detail-2.png"
+                            alt="blog-detail-2"
+                            class="h-full w-full rounded-[32px] object-cover transition duration-500 group-hover:scale-110"
+                        />
+                    </div>
+                </div>
+
+                <h2>1914 translation by H. Rackham</h2>
+                <p>
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
+                    inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
+                    aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+                </p>
+
+                <h2>The standard Lorem Ipsum passage</h2>
+                <p>
+                    Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in
+                    45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum
+                    dolor sit amet..", comes from a line in section 1.10.32.
+                </p>
+                <p>
+                    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.
+                </p>
+
+                <div class="not-prose grid gap-[30px] pb-12 sm:grid-cols-2">
+                    <div class="group h-[324px] overflow-hidden rounded-[20px]" data-aos="fade-up" data-aos-duration="1000">
+                        <img
+                            src="/assets/images/blog-detail-3.png"
+                            alt="blog-detail-3"
+                            class="h-full w-full rounded-[20px] object-cover transition duration-500 group-hover:scale-110"
+                        />
+                    </div>
+                    <div class="group h-[324px] overflow-hidden rounded-[20px]" data-aos="fade-up" data-aos-duration="1000">
+                        <img
+                            src="/assets/images/blog-detail-4.png"
+                            alt="blog-detail-4"
+                            class="h-full w-full rounded-[20px] object-cover transition duration-500 group-hover:scale-110"
+                        />
+                    </div>
+                </div>
+
+                <h2>Nunc et sem vel diam dignissim</h2>
+                <p>
+                    On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of
+                    the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those
+                    who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
+                </p>
+            </div>
+        </div>
+    </section>
+</div>

src/app/blog-details.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './blog-details.html',
+})
+export class BlogDetailsComponent {
+    storeData: any;
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/blog-landing.ts

@@ -0,0 +1,78 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import SwiperCore, { SwiperOptions, Navigation, Autoplay } from 'swiper';
+
+// install Swiper modules
+SwiperCore.use([Navigation, Autoplay]);
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './blog-landing.html',
+})
+export class BlogLandingComponent {
+    storeData: any;
+    activeTab = 'all';
+    config: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        speed: 1000,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        navigation: {
+            nextEl: '.Stories-slider-button-next',
+            prevEl: '.Stories-slider-button-prev',
+        },
+        modules: [Navigation, Autoplay],
+        breakpoints: {
+            320: {
+                slidesPerView: 1,
+            },
+            600: {
+                slidesPerView: 2,
+            },
+            1000: {
+                slidesPerView: 3,
+            },
+        },
+    };
+
+    config1: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        speed: 1000,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        navigation: {
+            nextEl: '.feedback-slider-button-next',
+            prevEl: '.feedback-slider-button-prev',
+        },
+        modules: [Navigation, Autoplay],
+        breakpoints: {
+            320: {
+                slidesPerView: 1,
+            },
+            600: {
+                slidesPerView: 2,
+            },
+            1000: {
+                slidesPerView: 3,
+            },
+        },
+    };
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/blog.html

@@ -0,0 +1,674 @@
+<div>
+    <div class="bg-[url(/assets/images/inner-page-hero-bg.png)] bg-cover bg-bottom bg-no-repeat pt-[82px] lg:pt-[106px]">
+        <div class="relative">
+            <div class="container">
+                <div class="items-center justify-between py-10 md:flex md:h-[400px] md:py-0">
+                    <div class="heading relative mb-0 text-center ltr:md:text-left rtl:md:text-right">
+                        <h6>Blog</h6>
+                        <h4 class="!text-white">Unlock the latest trends/news</h4>
+                    </div>
+                    <div class="relative mt-6 md:mt-0" [attr.data-aos]="storeData.direction === 'rtl' ? 'fade-right' : 'fade-left'" data-aos-duration="1000">
+                        <svg
+                            width="273"
+                            height="282"
+                            viewBox="0 0 273 282"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="mx-auto rtl:rotate-y-180 md:mx-0"
+                        >
+                            <path
+                                d="M189.028 66.2347C179.007 64.8906 167.385 63.5186 167.385 63.5186C169.652 63.8266 170.828 68.6147 170.072 74.1868C169.316 79.7589 166.852 84.0415 164.585 83.7335C163.129 83.5375 162.121 81.4655 161.785 78.5254C160.385 78.8334 158.957 79.0869 157.501 79.3389C157.501 79.3389 164.529 90.1737 158.117 92.6097C152.545 94.7098 139.805 83.9575 139.805 83.9575C124.363 91.6724 94.4367 97.6631 78.4336 100.802C82.5069 100.13 86.8441 119.753 82.8547 120.749C101.502 117.389 121.83 112.573 139.245 104.902C142.269 109.409 148.177 114.729 148.849 120.273C156.577 122.041 165.901 121.813 170.688 118.621C172.899 104.006 172.088 97.2519 170.324 93.1417C176.558 92.2585 182.641 90.5347 188.412 88.0176C203.704 81.5583 200.031 67.7408 189.028 66.2347Z"
+                                fill="#B476E5"
+                            />
+                            <path
+                                d="M159.49 162.807L157.026 162.555L156.102 164.935L153.946 164.493L145.293 182.3C143.83 185.318 141.254 187.652 138.105 188.811C134.957 189.971 131.482 189.864 128.411 188.516L105.59 177.512L94.4194 183.812C92.7114 196.888 102.706 221.891 119.394 229.927L156.746 208.983C159.434 199.156 163.158 185.352 163.606 183.504C160.843 169.655 160.439 167.67 159.49 162.807Z"
+                                fill="#B476E5"
+                            />
+                            <path
+                                d="M161.758 78.2734C162.458 85.2175 166.406 85.5536 168.84 79.0589C166.453 79.1615 164.064 78.8966 161.758 78.2734Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M166.376 63.6262L166.236 65.5022C166.516 66.0342 168.478 66.4822 169.764 66.5102C169.176 64.4706 168.008 62.9306 166.376 63.6262Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M191.268 66.7947C197.091 68.9787 203.447 76.5389 193.928 84.6575C191.383 86.6708 188.5 88.2174 185.416 89.2261C187.383 98.2257 190.145 107.033 193.669 115.545C206.828 108.517 220.436 105.158 232.223 105.376C216.187 82.0476 200.227 66.8507 191.268 66.7947Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M180.798 193.659C180.518 194.415 180.238 195.171 179.93 195.955L182.562 194.499C181.974 194.247 181.386 193.967 180.798 193.659Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M258.721 152.416C252.812 162.585 242.872 172.492 230.021 180.108C236.973 189.378 258.192 215.33 268.211 209.704C276.219 205.194 271.823 181.507 258.721 152.416Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M76.9746 103.25C78.1226 102.858 80.2787 102.071 80.4187 102.046C78.7386 99.9459 77.4226 100.646 76.9746 103.25Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M132.195 45.6557C129.164 45.6529 126.194 46.5034 123.625 48.1096C121.055 49.7158 118.989 52.013 117.664 54.7382C116.603 53.6627 115.256 52.9149 113.782 52.5842C112.308 52.2534 110.771 52.3536 109.352 52.8728C107.934 53.392 106.695 54.3082 105.783 55.5122C104.871 56.7162 104.324 58.1571 104.209 59.6631C104.093 61.1692 104.413 62.6767 105.131 64.0057C105.848 65.3348 106.933 66.4295 108.256 67.159C109.578 67.8886 111.083 68.2223 112.59 68.1203C114.097 68.0183 115.542 67.485 116.755 66.5839C117.53 69.0926 118.905 71.3745 120.761 73.2317C122.617 75.0889 124.898 76.4653 127.406 77.2417C129.914 78.0182 132.574 78.1712 135.155 77.6873C137.736 77.2035 140.159 76.0975 142.216 74.4653C141.943 73.8751 141.585 73.3287 141.152 72.8443C140.978 72.6116 140.747 72.4282 140.48 72.3123C135.104 71.7228 135.524 66.8241 138.632 67.8602C140.116 68.3642 140.48 68.0562 140.253 67.2707C138.573 63.1266 140.449 53.3544 148.345 62.3146C148.41 60.1519 148.042 57.9982 147.259 55.9809C146.478 53.9635 145.299 52.1237 143.793 50.5703C142.287 49.0168 140.484 47.7814 138.492 46.9373C136.5 46.0931 134.358 45.6573 132.195 45.6557Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M19.6607 135.141C17.4208 134.771 15.128 134.881 12.9336 135.463C10.7392 136.045 8.69329 137.086 6.93102 138.517C5.16876 139.948 3.73021 141.737 2.71037 143.765C1.69053 145.793 1.11264 148.015 1.01489 150.283C0.917122 152.552 1.30172 154.814 2.14325 156.923C2.98479 159.031 4.26419 160.937 5.89677 162.514C7.52935 164.092 9.47804 165.305 11.6142 166.074C13.7503 166.842 16.0253 167.149 18.2886 166.973C16.1899 156.405 16.6603 145.49 19.6607 135.141Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M84.2253 118.448C83.1613 118.812 82.0147 119.176 80.7812 119.512C82.4333 121.561 83.7493 121.001 84.2253 118.448Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M55.5619 166.892C65.4051 160.795 76.0042 156.013 87.0891 152.668C85.8875 152.011 84.7447 151.252 83.673 150.4C70.3888 152.56 57.7309 157.575 46.5723 165.1C49.5355 165.855 52.5361 166.452 55.5619 166.892Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M149.97 228.463C148.738 230.927 147.759 232.663 147.786 232.803C150.242 245.846 154.951 258.364 161.702 269.793C162.595 267.229 163.325 264.61 163.886 261.953C159.854 254.166 152.63 235.491 149.97 228.463Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M144.622 102.385L142.69 109.326C141.429 107.786 140.197 106.302 139.273 104.905C141.065 104.09 142.858 103.25 144.622 102.385Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M146.414 75.2508L150.983 77.7429C150.336 76.8497 149.801 75.8812 149.387 74.8588C148.423 75.1442 147.419 75.2765 146.414 75.2508Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M181.184 41.4562C185.087 40.1969 188.526 37.8088 191.071 34.594C192.763 32.4607 194.019 30.0146 194.765 27.3955C195.51 24.7766 195.731 22.0362 195.417 19.3314C195.102 16.6265 194.258 14.0104 192.93 11.6327C191.602 9.255 189.819 7.16245 187.682 5.47492C184.468 2.93054 180.57 1.39659 176.483 1.06706C172.397 0.737505 168.304 1.62719 164.723 3.62357C161.142 5.61995 158.234 8.63338 156.366 12.2827C154.497 15.9321 153.753 20.0536 154.227 24.1259C154.702 28.1984 156.371 32.0388 159.029 35.1614C161.686 38.2841 165.208 40.5489 169.151 41.6693C173.095 42.7898 177.283 42.7157 181.184 41.4562ZM176.819 18.3272L174.859 14.0431L185.891 18.2726L181.859 29.4154L179.759 24.7953C179.759 24.7953 168.337 30.7594 163.744 19.1392C166.152 25.2433 176.819 18.3272 176.819 18.3272Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M237.046 240.503C237.046 243.676 236.104 246.778 234.341 249.417C232.579 252.055 230.072 254.111 227.141 255.325C224.21 256.54 220.984 256.858 217.871 256.239C214.759 255.62 211.9 254.092 209.655 251.847C207.412 249.603 205.884 246.744 205.265 243.631C204.646 240.519 204.964 237.293 206.179 234.362C207.393 231.431 209.45 228.924 212.088 227.161C214.728 225.399 217.83 224.458 221.003 224.458C225.256 224.464 229.334 226.156 232.342 229.164C235.349 232.172 237.041 236.25 237.046 240.503Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M132.195 45.6557C129.164 45.6529 126.194 46.5034 123.625 48.1096C121.055 49.7158 118.989 52.013 117.664 54.7382C116.603 53.6627 115.256 52.9149 113.782 52.5842C112.308 52.2534 110.771 52.3536 109.352 52.8728C107.934 53.392 106.695 54.3082 105.783 55.5122C104.871 56.7162 104.324 58.1571 104.209 59.6631C104.093 61.1692 104.413 62.6767 105.131 64.0057C105.848 65.3348 106.933 66.4295 108.256 67.159C109.578 67.8886 111.083 68.2223 112.59 68.1203C114.096 68.0183 115.542 67.485 116.755 66.5839C117.53 69.0926 118.905 71.3745 120.761 73.2317C122.617 75.0889 124.898 76.4653 127.406 77.2417C129.914 78.0182 132.574 78.1712 135.155 77.6873C137.736 77.2035 140.159 76.0975 142.216 74.4653C141.943 73.8751 141.585 73.3287 141.152 72.8443C140.978 72.6116 140.747 72.4282 140.48 72.3123C135.104 71.7228 135.524 66.8241 138.632 67.8602C140.116 68.3642 140.48 68.0562 140.253 67.2707C138.573 63.1266 140.449 53.3544 148.345 62.3146C148.41 60.1519 148.042 57.9982 147.259 55.9809C146.478 53.9635 145.299 52.1237 143.793 50.5703C142.287 49.0168 140.484 47.7814 138.492 46.9373C136.5 46.0931 134.358 45.6573 132.195 45.6557Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M182.559 194.499C181.97 194.247 181.381 193.967 180.791 193.659"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M156.716 208.976L119.393 229.919C102.704 221.882 92.6817 196.879 94.3897 183.803L105.56 177.503"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M132.973 107.506C137.801 112.573 141.808 118.364 144.845 124.669"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M80.7543 220.986C70.8283 220.465 61.1414 217.749 52.3908 213.034C43.6403 208.32 36.0436 201.723 30.1479 193.721C24.252 185.719 20.2035 176.51 18.2938 166.755C16.3841 157.001 16.6606 146.944 19.1036 137.308C21.5464 127.674 26.0949 118.7 32.4217 111.034C38.7483 103.368 46.6959 97.1993 55.6923 92.9728C64.6888 88.7464 74.5102 86.5667 84.4499 86.5912C94.3897 86.6155 104.2 88.8432 113.176 93.1137"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M167.158 226.581L187.151 262.539C187.948 263.975 188.184 265.655 187.811 267.254C187.438 268.853 186.484 270.256 185.135 271.191C179.909 274.818 174.337 277.922 168.502 280.458C166.998 281.108 165.304 281.176 163.752 280.648C162.201 280.119 160.899 279.034 160.102 277.602L130.223 223.898"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M191.598 66.8035C200.643 67.2221 216.409 82.3645 232.229 105.35"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M258.717 152.388C271.82 181.479 276.185 205.188 268.208 209.676C258.069 215.379 231.955 188.168 209.858 148.916C197.122 126.291 188.489 104.594 185.387 89.1936"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M193.648 115.541C221.732 100.534 251.937 102.245 261.771 119.713C271.605 137.181 257.431 163.868 230.02 180.135"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M262.552 210.066L182.558 194.499L179.926 195.955"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M119.393 229.919L114.017 232.915C83.75 246.409 62.3871 201.807 91.1746 185.595L94.3947 183.803"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path d="M177.716 91.6577L171.92 107.422" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+                            <path
+                                d="M149.379 74.8588C149.379 74.8588 151.195 80.3514 155.315 79.7015C157.526 79.3537 159.683 78.9469 161.811 78.5225"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M139.803 83.9634C139.803 83.9634 152.543 94.7142 158.115 92.5876C164.498 90.1516 157.499 79.3153 157.499 79.3153"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M135.52 85.8056C141.148 90.4537 152.234 98.8759 160.104 96.2778C167.073 93.9773 164.752 84.5735 161.392 78.5549"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M76.9746 103.25C78.1226 102.858 80.2787 102.071 80.4187 102.046C78.7386 99.9459 77.4226 100.646 76.9746 103.25Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M166.374 63.6586C169.371 62.3706 170.912 68.1947 170.071 74.1868C169.288 79.7589 166.852 84.0386 164.584 83.7335C163.1 83.5361 162.064 81.3756 161.756 78.3309"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M167.383 63.4906C167.383 63.4906 179.025 64.8862 189.027 66.2066C200.189 67.6804 203.72 81.4802 188.411 87.9896C182.634 90.4871 176.552 92.2102 170.323 93.1137"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path d="M164.586 83.7055H183.513" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+                            <path
+                                d="M156.63 63.5746C156.347 62.4286 155.801 61.3645 155.034 60.4665C153.568 58.8793 153.938 68.0827 155.398 73.5708C156.291 76.9309 161.866 79.2814 168.837 79.0869"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M159.937 55.2024C160.301 53.1024 160.775 46.2614 158.593 52.7104C158.028 54.4501 157.587 56.228 157.276 58.0305C156.683 60.9876 156.466 64.0085 156.632 67.0201"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M166.291 65.5066C166.571 66.0387 168.475 66.4867 169.763 66.5147"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M164.053 60.8865C164.165 60.6345 164.893 59.0665 164.977 58.8425C166.745 55.0624 167.307 56.1279 166.683 60.6345C166.263 64.2506 166.039 67.8865 166.011 71.5268"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M161.027 61.8946C161.559 59.2419 162.511 55.7625 162.796 54.9785C164.756 49.4903 166.34 50.4409 165.154 55.9585C164.474 59.0931 163.894 61.3906 163.533 63.4906"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M163.045 54.3904C163.829 45.8237 161.164 50.1889 160.077 54.6984C159.563 56.7644 159.17 58.8587 158.898 60.9706"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M158.117 60.9735C159.334 61.1396 160.5 61.5683 161.535 62.2299C162.569 62.8916 163.448 63.7702 164.109 64.8052"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M62.784 111.202C62.784 111.202 59.8719 110.81 55.3918 110.25C50.6877 109.661 50.0157 107.715 55.4478 107.702C56.0373 107.702 61.9999 107.574 63.764 107.534C64.716 107.512 67.4262 107.17 67.4321 106.302C67.4453 103.866 62.7854 98.6387 64.52 97.4258C65.6415 96.6447 69.006 99.912 71.2107 102.298C71.8408 102.97 72.6542 103.442 73.5502 103.656C74.446 103.87 75.3849 103.816 76.2508 103.502C76.4188 103.443 80.1988 102.102 80.3668 102.046"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M64.0099 110.978C64.0099 110.978 53.7617 112.798 53.0897 112.909C47.7431 113.793 48.6936 115.573 53.4257 115.429C57.9338 115.293 63.447 115.205 63.447 115.205"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M65.1601 114.617C61.9589 115.721 58.6959 116.637 55.3879 117.361C50.0928 118.553 51.1878 120.109 55.9199 119.853C58.8421 119.769 61.7534 119.46 64.6281 118.929"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M67.3707 117.564C64.811 119.018 62.0844 120.157 59.2506 120.954C53.9879 122.416 55.189 123.888 60.0626 123.362C61.3786 123.214 62.5252 123.052 63.4787 122.886C66.2492 122.404 68.9933 121.934 71.7934 121.542C76.0182 120.847 80.1831 119.828 84.2507 118.491"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M63.7305 109.326C64.5705 114.029 66.5305 116.885 69.8891 120.301"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M67.623 108.038C69.0192 109.839 70.7756 111.33 72.7802 112.415C74.7849 113.499 76.9935 114.154 79.2654 114.337"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M139.256 104.918C142.283 109.422 148.178 114.736 148.848 120.273C156.576 122.041 165.899 121.813 170.687 118.621C174.077 96.1938 170.351 92.3017 167.047 87.9896"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M170.685 118.596C170.685 118.596 177.906 137.104 185.413 157.935C176.446 161.722 166.699 163.298 156.994 162.527"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M166.29 138.277L156.069 164.904C146.523 162.966 137.341 159.546 128.854 154.768C133.584 136.989 142.46 126.965 148.844 120.245"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M131.209 156.056C130.307 161.372 129.746 166.74 129.529 172.128"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M130.144 163.924C130.144 163.924 107.183 159.08 97.8046 156.784C88.4259 154.488 83.7204 150.428 83.7204 150.428C70.4366 152.588 57.7793 157.603 46.6211 165.128C70.5881 171.008 76.4402 164.036 88.3125 169.188L128.38 188.507C131.451 189.856 134.926 189.962 138.074 188.803C141.223 187.644 143.799 185.309 145.263 182.291L153.915 164.484"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M182.222 159.164C183.73 166.898 184.305 174.784 183.93 182.655C183.843 184.032 183.6 185.395 183.202 186.715C179.518 198.985 165.536 230.283 165.536 230.283C162.091 240.615 168.698 249.573 161.704 269.79C155.01 258.335 150.305 245.827 147.788 232.8C147.74 232.561 151.056 226.905 153.161 221.346C154.62 217.495 163.379 184.344 163.58 183.52L159.492 162.773"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M63.1139 228.83C62.0594 228.533 60.9304 228.667 59.9748 229.204C59.0194 229.739 58.3154 230.632 58.0178 231.686L57.5978 233.114L56.1697 232.694C55.1144 232.396 53.9844 232.531 53.0281 233.066C52.0718 233.603 51.3678 234.497 51.0707 235.553C50.7736 236.608 50.908 237.738 51.4441 238.695C51.9803 239.651 52.8744 240.354 53.9297 240.652L63.3099 243.304L65.9625 233.926C66.2591 232.872 66.1257 231.745 65.5916 230.788C65.0577 229.833 64.1665 229.129 63.1139 228.83Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M242.14 92.9531C241.589 93.3769 240.924 93.6277 240.232 93.674C239.537 93.7201 238.845 93.5597 238.244 93.2126C237.641 92.8657 237.154 92.3478 236.846 91.7246C236.538 91.1013 236.422 90.4009 236.512 89.7115C236.602 89.0221 236.895 88.375 237.352 87.852C237.81 87.3288 238.413 86.9533 239.085 86.7728C239.756 86.5922 240.466 86.6148 241.125 86.8378C241.783 87.0606 242.361 87.4738 242.784 88.025C243.067 88.3905 243.273 88.8081 243.394 89.2539C243.515 89.6997 243.546 90.165 243.486 90.6228C243.427 91.0807 243.276 91.5224 243.045 91.9222C242.815 92.3222 242.507 92.6725 242.14 92.9531Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M18.0069 134.954C14.797 134.768 11.6051 135.55 8.84527 137.2C6.0853 138.85 3.88466 141.291 2.52849 144.206C1.17232 147.121 0.72322 150.376 1.23939 153.551C1.75556 156.724 3.21321 159.67 5.42331 162.005C7.63343 164.34 10.4942 165.958 13.6347 166.648C16.775 167.337 20.0504 167.069 23.036 165.875C26.0215 164.682 28.5796 162.618 30.3787 159.953C32.1778 157.288 33.1349 154.145 33.1257 150.929C33.1216 146.839 31.5533 142.906 28.7422 139.936C25.9311 136.966 22.0901 135.183 18.0069 134.954Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M84.2312 118.498C83.1672 118.862 82.0206 119.226 80.7871 119.562C82.4391 121.607 83.7552 121.046 84.2312 118.498Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path d="M146.412 75.2789L150.948 77.7429" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+                            <path
+                                d="M146.411 75.2788C146.411 75.2788 159.74 75.3068 148.343 62.3426C140.618 53.5224 138.655 62.711 140.148 66.9936C140.493 67.9839 140.329 68.4673 138.627 67.8867C135.519 66.8551 135.099 71.7507 140.475 72.3388C140.901 72.5785 141.265 72.9141 141.539 73.3188C144.929 78.8614 144.703 81.9975 138.515 84.5735C121.828 91.4897 107.156 95.1843 78.373 100.814C80.6367 100.298 82.9253 107.012 83.5001 109.302C84.1471 111.88 85.4159 120.134 82.8531 120.777C103.462 117.053 126.085 111.594 144.619 102.41L142.658 109.326"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M153.416 125.117C153.416 125.117 151.058 128.869 144.848 128.869"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path d="M53.6211 62.9026L59.8652 76.4549" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M63.5086 66.5706L49.9844 72.8148" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+                            <path
+                                d="M174.859 14.0431L176.819 18.3272C176.819 18.3272 166.152 25.2433 163.744 19.1392C168.336 30.7594 179.759 24.7953 179.759 24.7953L181.859 29.4154L185.891 18.2727L174.859 14.0431Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M191.071 34.594C188.526 37.8088 185.087 40.1969 181.184 41.4562C177.283 42.7157 173.095 42.7898 169.151 41.6693C165.208 40.5489 161.686 38.2841 159.029 35.1614C156.371 32.0388 154.702 28.1984 154.227 24.1259C153.753 20.0536 154.497 15.9321 156.366 12.2827C158.234 8.63338 161.142 5.61995 164.723 3.62357C168.304 1.62719 172.397 0.737505 176.483 1.06706C180.57 1.39659 184.468 2.93054 187.682 5.47492C189.819 7.16245 191.602 9.255 192.93 11.6327C194.258 14.0104 195.102 16.6265 195.417 19.3314C195.731 22.0362 195.51 24.7766 194.765 27.3955C194.019 30.0146 192.763 32.4607 191.071 34.594Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M221.198 244.477C221.666 244.442 222.134 244.545 222.544 244.775C222.952 245.005 223.284 245.351 223.496 245.77C223.708 246.188 223.792 246.66 223.736 247.126C223.68 247.593 223.487 248.03 223.182 248.387C222.875 248.744 222.472 249.002 222.021 249.128C221.568 249.254 221.089 249.245 220.643 249.099C220.196 248.953 219.804 248.677 219.514 248.309C219.225 247.941 219.05 247.493 219.014 247.025C218.976 246.401 219.181 245.785 219.589 245.309C219.997 244.833 220.575 244.535 221.198 244.477Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M226.941 234.455C227.408 234.419 227.877 234.522 228.286 234.752C228.695 234.982 229.026 235.329 229.238 235.747C229.451 236.166 229.535 236.637 229.479 237.103C229.423 237.57 229.23 238.008 228.924 238.364C228.618 238.721 228.214 238.979 227.763 239.106C227.311 239.231 226.832 239.222 226.385 239.076C225.939 238.93 225.547 238.655 225.256 238.286C224.968 237.918 224.792 237.47 224.757 237.003C224.717 236.378 224.923 235.76 225.332 235.284C225.738 234.808 226.316 234.511 226.941 234.455Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M214.646 233.867C215.113 233.831 215.582 233.934 215.991 234.164C216.4 234.394 216.731 234.741 216.943 235.159C217.156 235.578 217.24 236.049 217.184 236.515C217.128 236.982 216.935 237.42 216.63 237.776C216.323 238.133 215.919 238.391 215.468 238.518C215.016 238.643 214.537 238.634 214.09 238.488C213.644 238.342 213.252 238.067 212.961 237.698C212.673 237.33 212.497 236.882 212.462 236.415C212.422 235.788 212.628 235.172 213.037 234.696C213.443 234.22 214.021 233.923 214.646 233.867Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path d="M217.195 236.051L224.783 237.003" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M222.348 244.673L225.764 238.739" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+                            <path
+                                d="M237.046 240.503C237.046 243.676 236.104 246.778 234.341 249.417C232.579 252.055 230.072 254.111 227.141 255.325C224.21 256.54 220.984 256.858 217.871 256.239C214.759 255.62 211.9 254.092 209.655 251.847C207.412 249.603 205.884 246.744 205.265 243.631C204.646 240.519 204.964 237.293 206.179 234.362C207.393 231.431 209.45 228.924 212.088 227.161C214.728 225.399 217.83 224.458 221.003 224.458C225.256 224.464 229.334 226.156 232.342 229.164C235.349 232.172 237.041 236.25 237.046 240.503Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M55.5619 166.892C65.4051 160.795 76.0042 156.013 87.0891 152.668C85.8875 152.011 84.7447 151.252 83.673 150.4C70.3888 152.56 57.7309 157.575 46.5723 165.1C49.5355 165.855 52.5361 166.452 55.5619 166.892Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M149.97 228.463C148.738 230.927 147.759 232.663 147.786 232.803C150.242 245.846 154.951 258.364 161.702 269.793C162.595 267.229 163.325 264.61 163.886 261.953C159.854 254.166 152.63 235.491 149.97 228.463Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <section class="bg-gradient-to-t from-white/70 to-transparent py-14 dark:bg-none md:py-[100px]">
+        <div class="container">
+            <div class="grid gap-x-[30px] gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
+                <div data-aos="fade-up" data-aos-duration="1000">
+                    <div
+                        class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+                    >
+                        <a routerLink="/blog-details" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                        <img src="/assets/images/blog1.png" alt="blog" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <h6 class="font-extrabold text-secondary dark:text-secondary">UI/UX Design</h6>
+                            <h5 class="my-[10px] block text-lg font-extrabold leading-[23px] text-black line-clamp-2 dark:text-white">
+                                Simple & constructive methods to improve your visual/UI design
+                            </h5>
+                            <p class="line-clamp-4">
+                                Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45
+                                BC, making it over 2000 years old.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div data-aos="fade-up" data-aos-duration="1000">
+                    <div
+                        class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+                    >
+                        <a routerLink="/blog-details" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                        <img src="/assets/images/blog2.png" alt="blog" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <h6 class="font-extrabold text-secondary dark:text-secondary">Project Management</h6>
+                            <h5 class="my-[10px] block text-lg font-extrabold leading-[23px] text-black line-clamp-2 dark:text-white">
+                                Why is JIRA important for managing projects?
+                            </h5>
+                            <p class="line-clamp-4">
+                                Jira works well for Agile development projects for many reasons, including the ability to create Kanban and Scrum boards with
+                                sprint planning and issue time estimation capabilities.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div data-aos="fade-up" data-aos-duration="1000">
+                    <div
+                        class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+                    >
+                        <a routerLink="/blog-details" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                        <img src="/assets/images/blog3.png" alt="blog" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <h6 class="font-extrabold text-secondary dark:text-secondary">SEO Marketing</h6>
+                            <h5 class="my-[10px] block text-lg font-extrabold leading-[23px] text-black line-clamp-2 dark:text-white">
+                                What is SEO (Search Engine Optimization)?
+                            </h5>
+                            <p class="line-clamp-4">
+                                Search engine optimization is the process of improving the quality and quantity of website traffic to a website or a web page
+                                from search engines.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div data-aos="fade-up" data-aos-duration="1000">
+                    <div
+                        class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+                    >
+                        <a routerLink="/blog-details" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                        <img src="/assets/images/blog1.png" alt="blog" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <h6 class="font-extrabold text-secondary dark:text-secondary">UI/UX Design</h6>
+                            <h5 class="my-[10px] block text-lg font-extrabold leading-[23px] text-black line-clamp-2 dark:text-white">
+                                Simple & constructive methods to improve your visual/UI design
+                            </h5>
+                            <p class="line-clamp-4">
+                                Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45
+                                BC, making it over 2000 years old.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div data-aos="fade-up" data-aos-duration="1000">
+                    <div
+                        class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+                    >
+                        <a routerLink="/blog-details" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                        <img src="/assets/images/blog2.png" alt="blog" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <h6 class="font-extrabold text-secondary dark:text-secondary">Project Management</h6>
+                            <h5 class="my-[10px] block text-lg font-extrabold leading-[23px] text-black line-clamp-2 dark:text-white">
+                                Why is JIRA important for managing projects?
+                            </h5>
+                            <p class="line-clamp-4">
+                                Jira works well for Agile development projects for many reasons, including the ability to create Kanban and Scrum boards with
+                                sprint planning and issue time estimation capabilities.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div data-aos="fade-up" data-aos-duration="1000">
+                    <div
+                        class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+                    >
+                        <a routerLink="/blog-details" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                        <img src="/assets/images/blog3.png" alt="blog" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <h6 class="font-extrabold text-secondary dark:text-secondary">SEO Marketing</h6>
+                            <h5 class="my-[10px] block text-lg font-extrabold leading-[23px] text-black line-clamp-2 dark:text-white">
+                                What is SEO (Search Engine Optimization)?
+                            </h5>
+                            <p class="line-clamp-4">
+                                Search engine optimization is the process of improving the quality and quantity of website traffic to a website or a web page
+                                from search engines.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div data-aos="fade-up" data-aos-duration="1000">
+                    <div
+                        class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+                    >
+                        <a routerLink="/blog-details" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                        <img src="/assets/images/blog1.png" alt="blog" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <h6 class="font-extrabold text-secondary dark:text-secondary">UI/UX Design</h6>
+                            <h5 class="my-[10px] block text-lg font-extrabold leading-[23px] text-black line-clamp-2 dark:text-white">
+                                Simple & constructive methods to improve your visual/UI design
+                            </h5>
+                            <p class="line-clamp-4">
+                                Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45
+                                BC, making it over 2000 years old.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div data-aos="fade-up" data-aos-duration="1000">
+                    <div
+                        class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+                    >
+                        <a routerLink="/blog-details" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                        <img src="/assets/images/blog2.png" alt="blog" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <h6 class="font-extrabold text-secondary dark:text-secondary">Project Management</h6>
+                            <h5 class="my-[10px] block text-lg font-extrabold leading-[23px] text-black line-clamp-2 dark:text-white">
+                                Why is JIRA important for managing projects?
+                            </h5>
+                            <p class="line-clamp-4">
+                                Jira works well for Agile development projects for many reasons, including the ability to create Kanban and Scrum boards with
+                                sprint planning and issue time estimation capabilities.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div data-aos="fade-up" data-aos-duration="1000">
+                    <div
+                        class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+                    >
+                        <a routerLink="/blog-details" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                        <img src="/assets/images/blog3.png" alt="blog" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <h6 class="font-extrabold text-secondary dark:text-secondary">SEO Marketing</h6>
+                            <h5 class="my-[10px] block text-lg font-extrabold leading-[23px] text-black line-clamp-2 dark:text-white">
+                                What is SEO (Search Engine Optimization)?
+                            </h5>
+                            <p class="line-clamp-4">
+                                Search engine optimization is the process of improving the quality and quantity of website traffic to a website or a web page
+                                from search engines.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div data-aos="fade-up" data-aos-duration="1000">
+                    <div
+                        class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+                    >
+                        <a routerLink="/blog-details" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                        <img src="/assets/images/blog1.png" alt="blog" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <h6 class="font-extrabold text-secondary dark:text-secondary">UI/UX Design</h6>
+                            <h5 class="my-[10px] block text-lg font-extrabold leading-[23px] text-black line-clamp-2 dark:text-white">
+                                Simple & constructive methods to improve your visual/UI design
+                            </h5>
+                            <p class="line-clamp-4">
+                                Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45
+                                BC, making it over 2000 years old.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div data-aos="fade-up" data-aos-duration="1000">
+                    <div
+                        class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+                    >
+                        <a routerLink="/blog-details" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                        <img src="/assets/images/blog2.png" alt="blog" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <h6 class="font-extrabold text-secondary dark:text-secondary">Project Management</h6>
+                            <h5 class="my-[10px] block text-lg font-extrabold leading-[23px] text-black line-clamp-2 dark:text-white">
+                                Why is JIRA important for managing projects?
+                            </h5>
+                            <p class="line-clamp-4">
+                                Jira works well for Agile development projects for many reasons, including the ability to create Kanban and Scrum boards with
+                                sprint planning and issue time estimation capabilities.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div data-aos="fade-up" data-aos-duration="1000">
+                    <div
+                        class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+                    >
+                        <a routerLink="/blog-details" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                        <img src="/assets/images/blog3.png" alt="blog" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <h6 class="font-extrabold text-secondary dark:text-secondary">SEO Marketing</h6>
+                            <h5 class="my-[10px] block text-lg font-extrabold leading-[23px] text-black line-clamp-2 dark:text-white">
+                                What is SEO (Search Engine Optimization)?
+                            </h5>
+                            <p class="line-clamp-4">
+                                Search engine optimization is the process of improving the quality and quantity of website traffic to a website or a web page
+                                from search engines.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>

src/app/blog.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './blog.html',
+})
+export class BlogComponent {
+    storeData: any;
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/career.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Lightbox, LightboxConfig } from 'ngx-lightbox';
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './career.html',
+})
+export class CareerComponent {
+    storeData: any;
+    activeTab = 'all';
+    items = [
+        { src: '/assets/images/gallery-1.png', thumb: '/assets/images/gallery-1.png' },
+        { src: '/assets/images/gallery-2.png', thumb: '/assets/images/gallery-2.png' },
+        { src: '/assets/images/gallery-3.png', thumb: '/assets/images/gallery-3.png' },
+        { src: '/assets/images/gallery-4.png', thumb: '/assets/images/gallery-4.png' },
+        { src: '/assets/images/gallery-5.png', thumb: '/assets/images/gallery-5.png' },
+    ];
+    constructor(public store: Store<any>, private _lightbox: Lightbox, private _lightboxConfig: LightboxConfig) {
+        this.initStore();
+        _lightboxConfig.enableTransition = false;
+        _lightboxConfig.wrapAround = true;
+        _lightboxConfig.showImageNumberLabel = true;
+        _lightboxConfig.showZoom = true;
+        _lightboxConfig.showRotate = true;
+        _lightboxConfig.albumLabel = '%1 of %2';
+        _lightboxConfig.positionFromTop = 0;
+        _lightboxConfig.disableScrolling = true;
+    }
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+    open(index: number): void {
+        // open lightbox
+        this._lightbox.open(this.items, index);
+    }
+}

src/app/components/blog-slider.html

@@ -0,0 +1,101 @@
+<section class="py-14 lg:py-[100px]">
+    <div class="container">
+        <div class="flex flex-col items-center justify-center lg:flex-row lg:justify-between" [ngClass]="{ 'mb-10': !title }">
+            <div class="heading text-center ltr:lg:text-left rtl:lg:text-right" [ngClass]="{ 'mb-0': !title }">
+                <h6 *ngIf="title" [ngClass]="{'!text-secondary' : type.toLowerCase() === 'modern-saas'}">{{ title }}</h6>
+                <h4 *ngIf="subTitle">{{ subTitle }}</h4>
+            </div>
+            <div class="mb-8 flex items-center justify-end gap-4 lg:mb-0">
+                <a routerLink="/blog" class="text-sm font-extrabold text-black transition hover:text-secondary dark:text-white dark:hover:text-secondary">
+                    View All
+                </a>
+                <button
+                    type="button"
+                    class="blog-slider-button-prev flex h-10 w-10 items-center justify-center rounded-full bg-black/5 transition hover:bg-secondary dark:bg-white/5 dark:hover:bg-secondary"
+                >
+                    <svg
+                        width="7"
+                        height="12"
+                        viewBox="0 0 7 12"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="text-black rtl:rotate-180 dark:text-white"
+                    >
+                        <path
+                            d="M5.95007 1.2002L1.48924 5.3424C1.06317 5.73803 1.06317 6.41236 1.48924 6.80799L5.95007 10.9502"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                        ></path>
+                    </svg>
+                </button>
+                <button
+                    type="button"
+                    class="blog-slider-button-next text-p flex h-10 w-10 items-center justify-center rounded-full bg-black/5 transition hover:bg-secondary dark:bg-white/5 dark:hover:bg-secondary"
+                >
+                    <svg
+                        width="7"
+                        height="12"
+                        viewBox="0 0 7 12"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="text-black rtl:rotate-180 dark:text-white"
+                    >
+                        <path
+                            d="M1.05005 10.7998L5.51089 6.6576C5.93695 6.26197 5.93695 5.58764 5.51089 5.19201L1.05005 1.0498"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                        ></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+
+        <swiper [config]="config">
+            <ng-container *ngIf="type.toLowerCase() === 'service'">
+                <ng-template swiperSlide *ngFor="let blog of blogs;">
+                    <div
+                        class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+                    >
+                        <a routerLink="/blog-details" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                        <img [src]="blog.thumbnail" alt="blog-1" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <h6 class="font-extrabold text-secondary dark:text-secondary">{{ blog.title }}</h6>
+                            <h5 class="my-[10px] block text-lg font-extrabold leading-[23px] text-black line-clamp-2 dark:text-white">{{ blog.excerpt }}</h5>
+                            <p class="line-clamp-4">{{ blog.description }}</p>
+                        </div>
+                    </div>
+                </ng-template>
+            </ng-container>
+            <ng-container *ngIf="type.toLowerCase() === 'modern-saas'">
+                <ng-template swiperSlide *ngFor="let blog of blogs;">
+                    <div class="rounded-3xl bg-white dark:bg-gray-dark">
+                        <img [src]="blog.thumbnail" alt="blog-3" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <span class="rounded bg-primary/10 py-1 px-2 text-sm font-extrabold text-primary">{{ blog.tag }}</span>
+                            <a
+                                routerLink="/blog-details"
+                                class="my-[10px] block text-lg font-extrabold leading-[23px] text-black transition line-clamp-2 hover:text-secondary dark:text-white dark:hover:text-secondary"
+                            >
+                                {{ blog.title }}
+                            </a>
+                            <p class="line-clamp-3">{{ blog.excerpt }}</p>
+                            <div class="mt-6 flex items-center justify-between text-secondary">
+                                <span>{{ blog.date }}</span>
+                                <a routerLink="/blog-details" class="transition hover:text-primary">
+                                    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M25.4091 13.0009C25.4091 19.8539 19.8531 25.41 13 25.41C6.14699 25.41 0.590937 19.8539 0.590937 13.0009C0.590937 6.14785 6.14699 0.591797 13 0.591797C19.8531 0.591797 25.4091 6.14785 25.4091 13.0009ZM12.7226 7.55043C12.6336 7.63872 12.5628 7.74368 12.5144 7.85931C12.466 7.97495 12.4408 8.09899 12.4403 8.22436C12.4398 8.34973 12.464 8.47398 12.5115 8.58999C12.559 8.70601 12.6289 8.81153 12.7172 8.90052L15.8386 12.0463H7.86935C7.61618 12.0463 7.37339 12.1469 7.19438 12.3259C7.01537 12.5049 6.9148 12.7477 6.9148 13.0009C6.9148 13.254 7.01537 13.4968 7.19438 13.6759C7.37339 13.8549 7.61618 13.9554 7.86935 13.9554H15.8386L12.7172 17.1013C12.6289 17.1903 12.5591 17.2959 12.5116 17.412C12.4641 17.5281 12.4399 17.6524 12.4405 17.7778C12.441 17.9033 12.4663 18.0273 12.5148 18.143C12.5633 18.2587 12.6341 18.3636 12.7232 18.4519C12.8123 18.5402 12.9179 18.6101 13.034 18.6576C13.1501 18.7051 13.2744 18.7292 13.3998 18.7287C13.5252 18.7281 13.6493 18.7029 13.765 18.6544C13.8806 18.6059 13.9856 18.5351 14.0739 18.446L18.8102 13.6732C18.9876 13.4944 19.0872 13.2528 19.0872 13.0009C19.0872 12.749 18.9876 12.5073 18.8102 12.3285L14.0739 7.5558C13.9856 7.46661 13.8806 7.39571 13.7648 7.34716C13.6491 7.29861 13.5249 7.27336 13.3994 7.27286C13.2739 7.27236 13.1495 7.29662 13.0333 7.34425C12.9172 7.39188 12.8116 7.46194 12.7226 7.55043Z"
+                                            fill="currentColor"
+                                        />
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </ng-template>
+            </ng-container>
+        </swiper>
+    </div>
+</section>

src/app/components/blog-slider.ts

@@ -0,0 +1,66 @@
+import { Component, Input } from '@angular/core';
+import SwiperCore, { SwiperOptions, Navigation, Autoplay } from 'swiper';
+
+// install Swiper modules
+SwiperCore.use([Navigation, Autoplay]);
+
+@Component({
+    moduleId: module.id,
+    selector: 'blog-slider',
+    templateUrl: './blog-slider.html',
+})
+export class BlogSliderComponent {
+    @Input() title: string = '';
+    @Input() subTitle: string = '';
+    @Input() blogs: any[] = [
+        {
+            id: 1,
+            thumbnail: '/assets/images/blog1.png',
+            title: 'UI/UX Design',
+            excerpt: 'Simple & constructive methods to improve your visual/UI design',
+            description:
+                'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.',
+        },
+        {
+            id: 2,
+            thumbnail: '/assets/images/blog2.png',
+            title: 'Project Management',
+            excerpt: 'Why is JIRA important for managing projects?',
+            description:
+                'Jira works well for Agile development projects for many reasons, including the ability to create Kanban and Scrum boards with sprint planning and issue time estimation capabilities.',
+        },
+        {
+            id: 3,
+            thumbnail: '/assets/images/blog3.png',
+            title: 'SEO Marketing',
+            excerpt: 'What is SEO (Search Engine Optimization)?',
+            description:
+                'Search engine optimization is the process of improving the quality and quantity of website traffic to a website or a web page from search engines.',
+        },
+    ];
+    @Input() type: string = 'service';
+
+    config: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        navigation: {
+            nextEl: '.blog-slider-button-next',
+            prevEl: '.blog-slider-button-prev',
+        },
+        modules: [Navigation, Autoplay],
+        breakpoints: {
+            640: {
+                slidesPerView: 2,
+            },
+            1024: {
+                slidesPerView: 3,
+            },
+        },
+    };
+    constructor() {}
+}

src/app/components/client-slider.html

@@ -0,0 +1,85 @@
+<div>
+    <div *ngIf="type.toLowerCase() === 'creative-agency'; else elseBlock">
+        <swiper class="mt-12" [config]="config1">
+            <ng-template swiperSlide *ngFor="let feedback of feedbacks">
+                <div class="border-2 border-gray/10 bg-gray/[0.06] p-[30px]">
+                    <p class="font-semibold leading-7">{{ feedback.message }}</p>
+                    <div class="mt-12 flex items-center gap-2.5">
+                        <div>
+                            <img [src]="feedback.thumbnail" alt="" />
+                        </div>
+                        <div>
+                            <h5 class="text-lg font-bold text-black dark:text-white">{{ feedback.name }}</h5>
+                            <p class="mt-[2px] text-sm font-bold italic">{{ feedback.role }}</p>
+                        </div>
+                    </div>
+                </div>
+            </ng-template>
+        </swiper>
+        <div class="mt-5 flex items-center justify-end gap-2.5">
+            <button
+                type="button"
+                class="client-swiper-button-prev flex h-9 w-[38px] items-center justify-center bg-black duration-200 hover:bg-secondary rtl:rotate-y-180 dark:bg-gray-dark dark:hover:bg-secondary"
+            >
+                <svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8 2L2 8L8 14" stroke="white" stroke-width="2" stroke-linecap="square" />
+                    <path d="M18 8H4" stroke="white" stroke-width="2" stroke-linecap="square" />
+                </svg>
+            </button>
+            <button
+                type="button"
+                class="client-swiper-button-next flex h-9 w-[38px] items-center justify-center bg-black duration-200 hover:bg-secondary rtl:rotate-y-180 dark:bg-gray-dark dark:hover:bg-secondary"
+            >
+                <svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M11 2L17 8L11 14" stroke="white" stroke-width="2" stroke-linecap="square" />
+                    <path d="M1 8H15" stroke="white" stroke-width="2" stroke-linecap="square" />
+                </svg>
+            </button>
+        </div>
+    </div>
+    <ng-template #elseBlock>
+        <swiper [config]="config2">
+            <ng-template swiperSlide *ngFor="let feedback of feedbacks">
+                <div class="flex justify-between gap-7 p-7">
+                    <div class="flex items-center gap-2.5">
+                        <div
+                            class="flex h-14 w-14 items-end justify-center overflow-hidden rounded-full border border-[rgba(125,132,150,0.2)] bg-gradient-to-t from-[rgba(125,132,150,0.1)] to-[125,132,150]"
+                        >
+                            <img [src]="feedback.thumbnail" alt="" class="h-full w-full object-cover" />
+                        </div>
+                        <div>
+                            <h5 class="text-lg font-bold text-black dark:text-white">{{ feedback.name }}</h5>
+                            <p class="text-sm font-bold italic">{{ feedback.role }}</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="border border-gray/10"></div>
+                <div class="p-7">
+                    <h3 class="text-lg font-bold italic text-black dark:text-white">new bungalow house</h3>
+                    <p class="mt-4 text-base font-semibold leading-7">{{ feedback.message }}</p>
+                    <div class="text-right">
+                        <p class="mt-7 inline-flex bg-[rgba(8,17,31,0.06)] p-2 text-sm font-semibold text-black dark:text-white">San Diego, California</p>
+                    </div>
+                </div>
+            </ng-template>
+        </swiper>
+        <div class="absolute top-7 z-10 flex gap-2.5 ltr:right-7 rtl:left-7">
+            <a
+                href="javascript:"
+                class="feedback-slider-button-prev flex h-8 w-8 items-center justify-center bg-[rgba(8,17,31,0.08)] text-black duration-200 after:hidden hover:bg-black hover:text-white dark:bg-white/80 dark:hover:bg-secondary"
+            >
+                <svg width="9" height="18" viewBox="0 0 9 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="rtl:rotate-180">
+                    <path d="M7 16L1 9L2.5 7.25M7 2L5 4.33333" stroke="currentcolor" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"></path>
+                </svg>
+            </a>
+            <a
+                href="javascript:"
+                class="feedback-slider-button-next flex h-8 w-8 items-center justify-center bg-[rgba(8,17,31,0.08)] text-black duration-200 after:hidden hover:bg-black hover:text-white dark:bg-white/80 dark:hover:bg-secondary"
+            >
+                <svg width="9" height="18" viewBox="0 0 9 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="rtl:rotate-180">
+                    <path d="M2 2L4 4.33333M2 16L8 9L6.5 7.25" stroke="currentcolor" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"></path>
+                </svg>
+            </a>
+        </div>
+    </ng-template>
+</div>

src/app/components/client-slider.ts

@@ -0,0 +1,62 @@
+import { Component, Input } from '@angular/core';
+import SwiperCore, { SwiperOptions, Navigation, Autoplay } from 'swiper';
+
+// install Swiper modules
+SwiperCore.use([Navigation, Autoplay]);
+
+@Component({
+    moduleId: module.id,
+    selector: 'client-slider',
+    templateUrl: './client-slider.html',
+})
+export class ClientSliderComponent {
+    @Input() type: string = 'common';
+    @Input() feedbacks: any = [
+        {
+            id: 1,
+            name: 'amelia smith',
+            role: 'customer',
+            thumbnail: '/assets/images/realestate/customer-avatar.svg',
+            message: ` “It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.”`,
+        },
+    ];
+    config1: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        speed: 1000,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        navigation: {
+            nextEl: '.client-swiper-button-next',
+            prevEl: '.client-swiper-button-prev',
+        },
+        modules: [Autoplay, Navigation],
+        breakpoints: {
+            320: {
+                slidesPerView: 1,
+            },
+            600: {
+                slidesPerView: 2,
+            },
+        },
+    };
+    config2: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        speed: 1000,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        navigation: {
+            prevEl: '.feedback-slider-button-prev',
+            nextEl: '.feedback-slider-button-next',
+        },
+        modules: [Navigation, Autoplay],
+    };
+    constructor() {}
+}

src/app/components/contactus-component.html

@@ -0,0 +1,285 @@
+<section class="relative overflow-x-hidden border-t-2 border-transparent bg-gradient-to-b from-white/40 to-transparent px-4 py-12 dark:border-gray/20 dark:bg-none">
+    <div class="items-center justify-center lg:flex">
+        <div class="text-center" [attr.data-aos]="storeData.direction === 'rtl' ? 'fade-left' : 'fade-right'" data-aos-duration="1000">
+            <img src="/assets/images/contact-text.png" alt="contact-text" class="mx-auto xl:mx-0" />
+        </div>
+        <div [attr.data-aos]="storeData.direction === 'rtl' ? 'fade-right' : 'fade-left'" data-aos-duration="1000">
+            <svg width="320" height="282" viewBox="0 0 320 282" fill="none" xmlns="http://www.w3.org/2000/svg" class="mx-auto my-8 w-[90%] sm:w-auto">
+                <path
+                    d="M254.182 123.52L203.127 119.709C198.183 119.334 193.219 120.151 188.656 122.091L175.076 127.872C173.249 131.184 171.005 134.248 168.397 136.989C161.845 143.977 136.719 156.969 123.457 159.701C120.332 160.256 117.111 159.694 114.361 158.113C108.352 162.928 102.056 167.373 95.5072 171.426C95.5072 171.426 107.911 206.717 154.095 186.768L190.829 170.854L182.782 190.136C183.005 201.158 183.069 215.611 182.337 225.245C190.961 227.868 200.16 227.956 208.832 225.497C212.297 201.991 214.937 164.889 205.968 150.88L249.86 150.467C255.391 140.518 254.904 134.861 254.182 123.52Z"
+                    fill="#B476E5"
+                ></path>
+                <path
+                    d="M172.633 109.862L177.977 86.3878C178.096 85.8739 178.003 85.3342 177.724 84.8875C177.443 84.4406 176.996 84.1235 176.482 84.0054C175.968 83.8876 175.427 83.9785 174.98 84.2585C174.532 84.5386 174.215 84.9845 174.097 85.4984L167.799 113.166"
+                    fill="#B476E5"
+                ></path>
+                <path
+                    d="M172.633 109.862L177.977 86.3878C178.096 85.8739 178.003 85.3342 177.724 84.8875C177.443 84.4406 176.996 84.1235 176.482 84.0054C175.968 83.8876 175.427 83.9785 174.98 84.2585C174.532 84.5386 174.215 84.9845 174.097 85.4984L167.799 113.166C168.591 116.084 170.719 119.996 172.633 109.862Z"
+                    fill="#B476E5"
+                ></path>
+                <path
+                    d="M168.499 20.9169C168.499 24.8561 167.329 28.7067 165.138 31.982C162.946 35.2574 159.832 37.8102 156.189 39.3177C152.545 40.8252 148.535 41.2196 144.667 40.451C140.799 39.6826 137.245 37.7857 134.457 35.0003C131.668 32.2148 129.768 28.6659 128.999 24.8024C128.23 20.9389 128.625 16.9343 130.134 13.295C131.643 9.65572 134.199 6.54505 137.478 4.35659C140.758 2.16813 144.613 1 148.557 1C153.845 1.00318 158.916 3.10253 162.655 6.83696C166.393 10.5714 168.495 15.6356 168.499 20.9169Z"
+                    fill="#B476E5"
+                ></path>
+                <path
+                    d="M272.632 126.031C268.973 134.696 263.804 142.644 257.366 149.506C260.896 150.046 264.427 150.843 267.448 151.316C270.595 149.945 273.546 148.163 276.223 146.015C284.593 139.281 301.834 130.926 305.61 126.161C298.772 125.173 282.043 125.84 272.632 126.031Z"
+                    fill="#47BDFF"
+                ></path>
+                <path
+                    d="M207.937 244.834C199.124 241.511 190.97 236.649 183.861 230.475C183.447 234.002 182.811 237.56 182.43 240.609C183.921 243.702 185.814 246.586 188.059 249.186C195.089 257.254 204.09 274.154 208.983 277.775C209.75 270.914 208.479 254.237 207.937 244.834Z"
+                    fill="#47BDFF"
+                ></path>
+                <path
+                    d="M98.7515 144.136C98.1154 144.454 97.4475 144.739 96.7796 145.025C93.6602 141.364 90.7292 137.548 87.9982 133.59C88.2844 134.259 97.0625 153.221 111.629 160.368C112.583 159.606 113.505 158.875 114.364 158.144C108.922 155.19 103.268 149.472 98.7515 144.136Z"
+                    fill="#47BDFF"
+                ></path>
+                <path d="M182.398 174.472C182.398 174.472 182.684 181.174 182.843 190.1L190.826 170.851L182.398 174.472Z" fill="#47BDFF"></path>
+                <path
+                    d="M96.7478 60.7848C96.7478 60.7848 91.1787 50.3641 78.0785 56.7189C64.9784 63.0736 67.5194 88.6112 67.5194 88.6112C67.5194 88.6112 55.8772 94.1702 49.6753 103.541C40.0703 118.058 44.9063 139.976 74.7742 139.976C73.3503 133.718 72.8574 127.286 73.3112 120.885C74.1063 109.608 78.2091 99.2844 81.8348 88.7065C86.4582 75.0324 85.4656 76.1258 87.0826 71.1085C83.2325 67.4555 87.8141 63.0719 89.8814 66.628C90.7569 68.0658 90.9661 68.1226 91.6658 68.3416C95.4556 69.527 102.332 70.8494 106.062 69.6156C106.067 69.5186 106.385 60.7848 96.7478 60.7848Z"
+                    fill="#47BDFF"
+                ></path>
+                <path
+                    d="M89.6872 93.1215L86.2843 84.6084C87.4194 86.1276 88.757 87.4848 90.2599 88.6426C89.9802 90.1228 89.789 91.6185 89.6872 93.1215Z"
+                    fill="#47BDFF"
+                ></path>
+                <path
+                    d="M134.69 237.37C134.911 238.445 134.807 239.56 134.392 240.575C133.978 241.59 133.271 242.459 132.362 243.074C131.452 243.688 130.381 244.019 129.283 244.025C128.185 244.03 127.11 243.711 126.194 243.108C125.278 242.504 124.562 241.641 124.136 240.632C123.71 239.62 123.594 238.507 123.802 237.43C124.01 236.353 124.534 235.362 125.305 234.583C126.077 233.804 127.063 233.27 128.139 233.05C128.853 232.899 129.59 232.893 130.307 233.03C131.025 233.167 131.708 233.443 132.317 233.846C132.926 234.247 133.45 234.765 133.857 235.37C134.264 235.976 134.548 236.654 134.69 237.37Z"
+                    fill="#47BDFF"
+                ></path>
+                <path
+                    d="M168.499 20.9169C168.499 24.8561 167.329 28.7067 165.137 31.9821C162.946 35.2574 159.832 37.8101 156.188 39.3177C152.545 40.8252 148.535 41.2196 144.667 40.451C140.799 39.6826 137.245 37.7857 134.457 35.0003C131.668 32.2148 129.768 28.6659 128.999 24.8024C128.229 20.9389 128.624 16.9343 130.134 13.295C131.643 9.65572 134.199 6.54505 137.478 4.35659C140.758 2.16813 144.613 1 148.557 1C153.845 1.00318 158.915 3.10253 162.655 6.83696C166.393 10.5714 168.495 15.6356 168.499 20.9169Z"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                ></path>
+                <path
+                    d="M212.103 186.067L228.546 194.357C231.921 196.054 235.833 196.345 239.421 195.167C243.012 193.988 245.987 191.435 247.694 188.068L266.522 150.839"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M278.449 127.269L290.058 104.335C291.757 100.964 292.048 97.0577 290.868 93.4729C289.688 89.8879 287.132 86.917 283.76 85.2119L167.571 26.584M101.709 102.88L135.419 36.1878"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M290.599 92.5821L193.561 108.211L157.692 38.6367"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M140.392 191.371C133.153 199.321 124.384 205.732 114.61 210.223C104.836 214.715 94.2565 217.194 83.5022 217.514C72.7479 217.833 62.0394 215.986 52.0153 212.082C41.9913 208.178 32.8572 202.298 25.1578 194.793C17.4584 187.287 11.3514 178.31 7.20105 168.396C3.05076 158.482 0.942231 147.834 1.0012 137.089C1.06018 126.343 3.28546 115.72 7.54432 105.852C11.8032 95.9836 18.0084 87.0734 25.7897 79.6523"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M89.6867 95.7573C89.5973 93.3497 89.802 90.94 90.296 88.5817C94.1728 91.1714 97.3767 89.5614 99.7286 86.211C102.745 81.3349 104.294 75.6948 104.19 69.9639"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M87.998 133.591C90.728 137.549 93.6577 141.365 96.7761 145.026C101.788 142.928 106.405 139.991 110.429 136.343C113.409 133.64 116.083 130.619 118.403 127.333C112.915 120.166 107.83 112.7 103.17 104.97C100.901 101.2 97.4947 98.2448 93.4399 96.5273C91.7007 95.8524 89.8227 95.6125 87.9695 95.8285C86.5932 96.1891 85.1515 96.221 83.7604 95.9219C82.3696 95.6228 81.0688 95.0009 79.9631 94.1064"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M254.436 125.998C258.762 126.157 267.349 126.125 272.597 126.03C268.948 134.692 263.79 142.64 257.364 149.504C255.742 149.25 252.307 148.901 250.749 148.806"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M305.608 126.157C307.421 126.411 308.586 126.826 308.725 127.396C309.606 131.004 290.701 139.768 282.2 146.614C279.728 148.63 276.963 150.259 273.998 151.442C271.835 151.839 269.616 151.797 267.47 151.315C270.622 149.948 273.576 148.166 276.255 146.014C284.601 139.293 301.825 130.954 305.608 126.157Z"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M272.632 126.03C282.047 125.839 298.776 125.172 305.609 126.157C301.824 130.922 284.593 139.284 276.221 146.01C273.545 148.162 270.593 149.946 267.443 151.315C264.422 150.839 260.891 150.044 257.361 149.504C263.801 142.643 268.971 134.695 272.632 126.03Z"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M207.555 225.869C207.269 230.634 207.555 237.654 207.937 244.865C199.135 241.535 190.995 236.673 183.892 230.507C184.083 228.887 184.21 227.267 184.242 225.742"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M208.986 277.775C208.795 279.614 208.449 280.768 207.873 280.952C204.326 282.08 194.828 263.389 187.677 255.158C185.558 252.759 183.82 250.049 182.524 247.122C182.059 244.977 182.026 242.76 182.429 240.602C183.915 243.698 185.809 246.582 188.058 249.178C195.089 257.282 204.088 274.154 208.986 277.775Z"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M207.936 244.833C208.477 254.236 209.749 270.914 208.986 277.769C204.088 274.148 195.066 257.267 188.062 249.18C185.814 246.582 183.92 243.698 182.432 240.604C182.814 237.554 183.45 233.995 183.864 230.469C190.971 236.645 199.123 241.508 207.936 244.833Z"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M111.632 160.368C97.0654 153.221 88.2873 134.257 87.9977 133.59"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M98.7515 144.136C103.271 149.472 108.932 155.217 114.368 158.179C117.125 159.741 120.343 160.291 123.464 159.736C136.738 157.061 161.852 144.012 168.403 137.024C180.268 124.368 179.294 114.726 178.263 98.6194C177.844 92.0757 177.021 92.2329 176.037 95.2756C174.572 99.8164 172.724 110.824 171.202 115.161C171.06 115.597 170.767 115.969 170.375 116.209C169.204 116.878 168.465 115.415 167.864 113.35C167.227 111.158 166.771 108.239 166.179 106.495C165.139 103.421 163.018 100.619 162.68 109.64C162.483 114.945 162.469 124.082 156.701 127.429C152.212 129.984 147.533 132.193 142.707 134.036C137.715 135.989 132.485 137.271 127.155 137.848C124.26 138.002 120.38 134.703 116.691 129.589"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M172.633 109.861L177.976 86.3868C178.095 85.8729 178.003 85.3332 177.724 84.8865C177.442 84.4396 176.996 84.1225 176.482 84.0045C175.968 83.8866 175.427 83.9775 174.98 84.2576C174.531 84.5376 174.215 84.9835 174.096 85.4974L167.799 113.165"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M182.407 174.502C187.369 172.374 190.834 170.851 190.834 170.851L182.843 190.1"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M114.367 158.176C108.359 162.976 102.061 167.401 95.5071 171.426C84.8217 163.977 77.4015 152.721 74.7738 139.975"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M175.051 127.872L189.967 121.551C193.661 119.992 197.672 119.328 201.671 119.613L254.182 123.52C255.364 134.496 255.223 140.809 249.857 150.457L206.028 150.87"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M96.7477 60.7838C96.7477 60.7838 91.1786 50.3631 78.0784 56.7179C64.9782 63.0726 67.5193 88.6103 67.5193 88.6103C67.5193 88.6103 55.8771 94.1692 49.6752 103.54C40.0702 118.057 44.9062 139.975 74.7741 139.975C73.3502 133.718 72.8573 127.285 73.3111 120.884C74.1062 109.607 78.209 99.2834 81.8347 88.7056C82.6616 86.2596 84.6335 80.2877 85.3014 77.8084C85.9057 75.4912 86.1919 73.8695 87.0825 71.1076C83.2324 67.4546 87.814 63.0709 89.8813 66.627C90.7936 68.1317 90.971 68.0447 91.9703 68.3741C94.4444 69.1866 101.11 71.0307 106.07 69.5444C106.066 69.5494 106.385 60.7838 96.7477 60.7838Z"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M33.9636 66.246C22.6885 71.6778 12.08 78.3937 2.34976 86.2598C2.07591 86.43 1.84746 86.6639 1.68402 86.9416C1.52058 87.2193 1.42704 87.5324 1.41141 87.8541C1.39575 88.1757 1.45851 88.4966 1.59425 88.7886C1.72999 89.0809 1.93468 89.3359 2.19074 89.5316L9.44224 95.2811C13.8363 89.5249 19.7938 84.6598 25.7798 79.6342C21.1723 85.5872 17.1371 91.9607 13.7275 98.67L21.5297 104.843C21.7814 105.042 22.0776 105.178 22.3931 105.24C22.7086 105.301 23.0342 105.286 23.3427 105.196C23.6512 105.106 23.9336 104.943 24.1659 104.721C24.3983 104.499 24.5741 104.225 24.6783 103.921L36.9533 68.6066C37.0965 68.2107 37.1116 67.7797 36.9963 67.3748C36.8808 66.9699 36.6407 66.6114 36.3101 66.3505C35.9794 66.0893 35.5748 65.9387 35.1536 65.92C34.7326 65.9012 34.3161 66.0153 33.9636 66.246Z"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M249.602 5.70256C243.273 2.55613 236.181 7.04005 237.199 13.6439L234.241 16.374L238.312 16.6917C241.906 22.7589 251.034 23.0147 254.023 17.0411C254.937 14.9513 254.984 12.5853 254.156 10.4605C253.327 8.33574 251.69 6.6251 249.602 5.70256Z"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M287.259 189.242C286.298 188.746 285.248 188.443 284.172 188.351C283.094 188.259 282.008 188.38 280.977 188.707C279.947 189.035 278.99 189.562 278.164 190.259C277.337 190.956 276.656 191.809 276.159 192.768C276.159 192.768 270.784 203.252 266.268 202.933L288.722 214.527C285.828 211.033 290.789 200.33 290.789 200.33C291.286 199.37 291.591 198.322 291.681 197.245C291.773 196.169 291.653 195.085 291.325 194.056C290.997 193.026 290.469 192.071 289.771 191.245C289.073 190.419 288.22 189.739 287.259 189.242Z"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M281.184 210.653C280.679 211.631 279.803 212.366 278.754 212.701C277.704 213.033 276.566 212.936 275.587 212.432C274.608 211.927 273.871 211.052 273.536 210.004C273.203 208.956 273.3 207.819 273.806 206.841"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path d="M311.749 67.8984L305.801 88.3553" stroke="#7780A1" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M319 81.0817L298.518 75.1416" stroke="#7780A1" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path
+                    d="M182.875 214.75C191.909 216.235 201.112 216.403 210.195 215.252"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M242.033 122.694C243.466 132.224 241.922 141.963 237.612 150.584"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M134.691 237.37C134.911 238.445 134.807 239.56 134.392 240.575C133.978 241.59 133.271 242.459 132.362 243.074C131.452 243.688 130.381 244.019 129.283 244.025C128.185 244.03 127.111 243.711 126.194 243.108C125.278 242.504 124.562 241.641 124.136 240.632C123.71 239.62 123.595 238.507 123.803 237.43C124.011 236.353 124.534 235.362 125.306 234.583C126.078 233.804 127.064 233.27 128.139 233.05C128.853 232.899 129.591 232.893 130.308 233.03C131.025 233.167 131.708 233.443 132.317 233.846C132.926 234.247 133.45 234.765 133.857 235.37C134.265 235.976 134.548 236.654 134.691 237.37Z"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M132.178 219.993C134.31 218.002 136.986 216.686 139.867 216.215C142.748 215.742 145.704 216.133 148.362 217.338C151.02 218.544 153.261 220.51 154.8 222.988C156.34 225.464 157.11 228.342 157.012 231.257C156.914 234.171 155.953 236.989 154.251 239.358C152.548 241.727 150.181 243.538 147.448 244.563C144.715 245.588 141.739 245.78 138.896 245.116C136.054 244.452 133.472 242.961 131.478 240.831C128.806 237.974 127.378 234.176 127.51 230.267C127.641 226.36 129.32 222.665 132.178 219.993Z"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M95.5071 171.426C95.5071 171.426 107.911 206.717 154.095 186.769L182.407 174.502C182.759 187.847 183.499 210.432 182.374 225.235C190.998 227.858 200.195 227.946 208.867 225.489C212.334 201.981 215.014 164.874 206.037 150.87C194.406 132.726 158.648 144.358 158.648 144.358"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+                <path
+                    d="M90.2964 88.5822C88.7639 87.4911 87.4176 86.1605 86.3091 84.6416L89.6871 93.1213"
+                    stroke="#7780A1"
+                    stroke-width="0.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                ></path>
+            </svg>
+        </div>
+    </div>
+    <div class="absolute bottom-20 ltr:left-0 rtl:right-0">
+        <svg width="171" height="216" viewBox="0 0 171 216" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path opacity="0.06" d="M160.487 10.9038L47.9038 205.904L-64.6795 10.9038L160.487 10.9038Z" stroke="#7780A1" stroke-width="20"></path>
+        </svg>
+    </div>
+    <div class="text-center">
+        <a routerLink="/contact-us" class="btn inline-flex items-center gap-3 bg-secondary text-white sm:text-lg">
+            <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clip-path="url(#clip0_549_4797)">
+                    <path
+                        d="M26.25 20.525V24.945C26.2501 25.2615 26.1302 25.5662 25.9145 25.7977C25.6987 26.0293 25.4032 26.1703 25.0875 26.1925C24.5413 26.23 24.095 26.25 23.75 26.25C12.7038 26.25 3.75 17.2963 3.75 6.25C3.75 5.905 3.76875 5.45875 3.8075 4.9125C3.82965 4.59681 3.97073 4.30126 4.20225 4.08551C4.43378 3.86976 4.73853 3.74986 5.055 3.75H9.475C9.63005 3.74984 9.77962 3.80732 9.89466 3.91128C10.0097 4.01523 10.082 4.15823 10.0975 4.3125C10.1263 4.6 10.1525 4.82875 10.1775 5.0025C10.4259 6.73615 10.935 8.42229 11.6875 10.0038C11.8063 10.2538 11.7288 10.5525 11.5037 10.7125L8.80625 12.64C10.4556 16.4831 13.5182 19.5457 17.3612 21.195L19.2863 18.5025C19.3649 18.3925 19.4797 18.3136 19.6106 18.2796C19.7415 18.2455 19.8802 18.2585 20.0025 18.3162C21.5838 19.0673 23.2695 19.5751 25.0025 19.8225C25.1763 19.8475 25.405 19.875 25.69 19.9025C25.844 19.9183 25.9867 19.9907 26.0904 20.1057C26.1941 20.2207 26.2514 20.3701 26.2512 20.525H26.25Z"
+                        fill="currentColor"
+                    />
+                </g>
+                <defs>
+                    <clipPath id="clip0_549_4797">
+                        <rect width="30" height="30" fill="white" />
+                    </clipPath>
+                </defs>
+            </svg>
+            <span class="capitalize">Contact us now</span>
+        </a>
+    </div>
+</section>

src/app/components/contactus-component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+    moduleId: module.id,
+    selector: 'contactus-component',
+    templateUrl: './contactus-component.html',
+})
+export class ContactusComponent {
+    storeData: any;
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/components/counter.html

@@ -0,0 +1,184 @@
+<div class="container">
+    <div class="heading text-center">
+        <h6 [ngClass]="{ hidden: !showTitle }">Company Facts</h6>
+        <h4>We are proud of our team</h4>
+    </div>
+    <div class="grid gap-[30px] sm:grid-cols-2 lg:grid-cols-4">
+        <div data-aos="fade-up" data-aos-duration="1000">
+            <div
+                class="group flex cursor-pointer items-baseline rounded-3xl border border-white bg-white py-8 px-6 transition duration-500 hover:border-secondary hover:bg-secondary/10 dark:border-transparent dark:bg-gray-dark dark:hover:bg-secondary"
+            >
+                <div>
+                    <svg
+                        width="26"
+                        height="26"
+                        viewBox="0 0 26 26"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="text-secondary transition dark:group-hover:text-black"
+                    >
+                        <g clip-path="url(#clip0_6_2530)">
+                            <path
+                                opacity="0.3"
+                                d="M9.26505 23.1907C8.867 22.5979 9.34238 21.8701 10.0565 21.8701H15.3123C16.0264 21.8701 16.5018 22.5979 16.1038 23.1907C15.3466 24.3185 14.3 25.2316 13.0656 25.8283C12.8248 25.9448 12.544 25.9448 12.3032 25.8283C11.0688 25.2316 10.0222 24.3185 9.26505 23.1907Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M19.7602 15.3657C19.7602 15.6093 19.8491 15.8444 20.0102 16.0271L21.8688 18.1348C22.0299 18.3175 22.1188 18.5527 22.1188 18.7962V19.6908C22.1188 20.2431 21.6711 20.6908 21.1188 20.6908H4.25C3.69772 20.6908 3.25 20.2431 3.25 19.6908V18.7962C3.25 18.5527 3.33888 18.3175 3.49997 18.1348L5.35863 16.0271C5.51971 15.8444 5.6086 15.6093 5.6086 15.3657V8.89781C5.6086 4.89015 8.41975 1.46516 12.3859 0.0983C12.5792 0.0316815 12.7896 0.0316814 12.9829 0.0982998C16.949 1.46516 19.7602 4.89015 19.7602 8.89781V15.3657ZM12.6844 11.2564C13.3099 11.2564 13.9098 11.0079 14.3522 10.5656C14.7945 10.1233 15.043 9.52335 15.043 8.89781C15.043 8.27227 14.7945 7.67235 14.3522 7.23003C13.9098 6.78771 13.3099 6.53921 12.6844 6.53921C12.0589 6.53921 11.4589 6.78771 11.0166 7.23003C10.5743 7.67235 10.3258 8.27227 10.3258 8.89781C10.3258 9.52335 10.5743 10.1233 11.0166 10.5656C11.4589 11.0079 12.0589 11.2564 12.6844 11.2564Z"
+                                fill="currentColor"
+                            />
+                        </g>
+                        <defs>
+                            <clipPath id="clip0_6_2530">
+                                <rect width="26" height="26" fill="white" />
+                            </clipPath>
+                        </defs>
+                    </svg>
+                </div>
+                <div class="ltr:pl-4 rtl:pr-4">
+                    <div
+                        [countUp]="10"
+                        [options]="{startVal :0 ,duration: 10,suffix: '+',enableScrollSpy:true,scrollSpyOnce : true}"
+                        [reanimateOnClick]="false"
+                        class="pb-2.5 text-4xl font-black leading-none transition dark:text-white dark:group-hover:text-black"
+                    >
+                        {{0}}
+                    </div>
+                    <span class="font-bold text-black transition dark:text-gray dark:group-hover:text-black">Year in Business</span>
+                </div>
+            </div>
+        </div>
+        <div data-aos="fade-up" data-aos-duration="1000">
+            <div
+                class="group flex cursor-pointer items-baseline rounded-3xl border border-white bg-white py-8 px-6 transition duration-500 hover:border-secondary hover:bg-secondary/10 dark:border-transparent dark:bg-gray-dark dark:hover:bg-secondary"
+            >
+                <div>
+                    <svg
+                        width="26"
+                        height="26"
+                        viewBox="0 0 26 26"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="text-secondary transition dark:group-hover:text-black"
+                    >
+                        <g clip-path="url(#clip0_6_2631)">
+                            <path
+                                opacity="0.3"
+                                d="M4.2757 15.6078C4.27493 15.6078 4.27425 15.6084 4.27403 15.6091C4.06737 16.3065 3.94528 17.0263 3.9104 17.7528L3.9 18.2V25C3.9 25.5523 3.45228 26 2.9 26H1C0.447715 26 1.18712e-07 25.5523 1.18712e-07 25V20.15C-0.000255849 19.0289 0.413437 17.9471 1.16173 17.1122C1.91001 16.2773 2.94021 15.7481 4.0547 15.626L4.2757 15.6078ZM22.0225 17.0047C21.9324 16.3161 22.4694 15.6613 23.1157 15.9157C23.7351 16.1595 24.299 16.5384 24.7632 17.0317C25.5575 17.8757 25.9998 18.991 26 20.15V25.0001C26 25.5523 25.5523 26 25 26H23.1C22.5477 26 22.1 25.5523 22.1 25V18.2C22.1 17.7948 22.0737 17.3958 22.0225 17.0047ZM4.55 7.80005C5.41195 7.80005 6.2386 8.14246 6.8481 8.75195C7.45759 9.36145 7.8 10.1881 7.8 11.05C7.8 11.912 7.45759 12.7387 6.8481 13.3481C6.2386 13.9576 5.41195 14.3 4.55 14.3C3.68805 14.3 2.8614 13.9576 2.2519 13.3481C1.64241 12.7387 1.3 11.912 1.3 11.05C1.3 10.1881 1.64241 9.36145 2.2519 8.75195C2.8614 8.14246 3.68805 7.80005 4.55 7.80005ZM21.45 7.80005C22.312 7.80005 23.1386 8.14246 23.7481 8.75195C24.3576 9.36145 24.7 10.1881 24.7 11.05C24.7 11.912 24.3576 12.7387 23.7481 13.3481C23.1386 13.9576 22.312 14.3 21.45 14.3C20.588 14.3 19.7614 13.9576 19.1519 13.3481C18.5424 12.7387 18.2 11.912 18.2 11.05C18.2 10.1881 18.5424 9.36145 19.1519 8.75195C19.7614 8.14246 20.588 7.80005 21.45 7.80005Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M13 11.7C14.7239 11.7 16.3772 12.3848 17.5962 13.6038C18.8152 14.8228 19.5 16.4761 19.5 18.2V25C19.5 25.5523 19.0523 26 18.5 26H7.5C6.94772 26 6.5 25.5523 6.5 25V18.2C6.5 16.4761 7.18482 14.8228 8.40381 13.6038C9.62279 12.3848 11.2761 11.7 13 11.7ZM13 0C14.3791 0 15.7018 0.547856 16.677 1.52304C17.6521 2.49823 18.2 3.82087 18.2 5.2C18.2 6.57913 17.6521 7.90177 16.677 8.87696C15.7018 9.85214 14.3791 10.4 13 10.4C11.6209 10.4 10.2982 9.85214 9.32304 8.87696C8.34786 7.90177 7.8 6.57913 7.8 5.2C7.8 3.82087 8.34786 2.49823 9.32304 1.52304C10.2982 0.547856 11.6209 0 13 0Z"
+                                fill="currentColor"
+                            />
+                        </g>
+                        <defs>
+                            <clipPath id="clip0_6_2631">
+                                <rect width="26" height="26" fill="white" />
+                            </clipPath>
+                        </defs>
+                    </svg>
+                </div>
+                <div class="ltr:pl-4 rtl:pr-4">
+                    <div
+                        [countUp]="345"
+                        [options]="{startVal :0 ,duration: 10,suffix: '+',enableScrollSpy:true,scrollSpyOnce : true}"
+                        [reanimateOnClick]="false"
+                        class="pb-2.5 text-4xl font-black leading-none transition dark:text-white dark:group-hover:text-black"
+                    >
+                        {{0}}
+                    </div>
+                    <span class="font-bold text-black transition dark:text-gray dark:group-hover:text-black">Team Members</span>
+                </div>
+            </div>
+        </div>
+        <div data-aos="fade-up" data-aos-duration="1000">
+            <div
+                class="group flex cursor-pointer items-baseline rounded-3xl border border-white bg-white py-8 px-6 transition duration-500 hover:border-secondary hover:bg-secondary/10 dark:border-transparent dark:bg-gray-dark dark:hover:bg-secondary"
+            >
+                <div>
+                    <svg
+                        width="26"
+                        height="26"
+                        viewBox="0 0 26 26"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="text-secondary transition dark:group-hover:text-black"
+                    >
+                        <g clip-path="url(#clip0_6_2641)">
+                            <path
+                                opacity="0.3"
+                                d="M13 26C5.8201 26 0 20.1799 0 13C0 5.8201 5.8201 0 13 0C20.1799 0 26 5.8201 26 13C26 20.1799 20.1799 26 13 26Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M6.49998 14.3C6.49998 16.024 7.18479 17.6773 8.40378 18.8962C9.62277 20.1152 11.2761 20.8 13 20.8C14.7239 20.8 16.3772 20.1152 17.5962 18.8962C18.8152 17.6773 19.5 16.024 19.5 14.3H16.9C16.9 15.3344 16.4891 16.3264 15.7577 17.0578C15.0263 17.7892 14.0343 18.2 13 18.2C11.9656 18.2 10.9736 17.7892 10.2423 17.0578C9.51087 16.3264 9.09998 15.3344 9.09998 14.3H6.49998ZM7.79998 11.7C8.31715 11.7 8.81314 11.4946 9.17883 11.1289C9.54453 10.7632 9.74998 10.2672 9.74998 9.75005C9.74998 9.23288 9.54453 8.73689 9.17883 8.37119C8.81314 8.00549 8.31715 7.80005 7.79998 7.80005C7.2828 7.80005 6.78681 8.00549 6.42112 8.37119C6.05542 8.73689 5.84998 9.23288 5.84998 9.75005C5.84998 10.2672 6.05542 10.7632 6.42112 11.1289C6.78681 11.4946 7.2828 11.7 7.79998 11.7ZM18.2 11.7C18.7171 11.7 19.2131 11.4946 19.5788 11.1289C19.9445 10.7632 20.15 10.2672 20.15 9.75005C20.15 9.23288 19.9445 8.73689 19.5788 8.37119C19.2131 8.00549 18.7171 7.80005 18.2 7.80005C17.6828 7.80005 17.1868 8.00549 16.8211 8.37119C16.4554 8.73689 16.25 9.23288 16.25 9.75005C16.25 10.2672 16.4554 10.7632 16.8211 11.1289C17.1868 11.4946 17.6828 11.7 18.2 11.7Z"
+                                fill="currentColor"
+                            />
+                        </g>
+                        <defs>
+                            <clipPath id="clip0_6_2641">
+                                <rect width="26" height="26" fill="white" />
+                            </clipPath>
+                        </defs>
+                    </svg>
+                </div>
+                <div class="ltr:pl-4 rtl:pr-4">
+                    <div
+                        [countUp]="350"
+                        [options]="{startVal :0 ,duration: 10,suffix: '+',enableScrollSpy:true,scrollSpyOnce : true}"
+                        [reanimateOnClick]="false"
+                        class="pb-2.5 text-4xl font-black leading-none transition dark:text-white dark:group-hover:text-black"
+                    >
+                        {{0}}
+                    </div>
+                    <span class="font-bold text-black transition dark:text-gray dark:group-hover:text-black">Happy Clients</span>
+                </div>
+            </div>
+        </div>
+        <div data-aos="fade-up" data-aos-duration="1000">
+            <div
+                class="group flex cursor-pointer items-baseline rounded-3xl border border-white bg-white py-8 px-6 transition duration-500 hover:border-secondary hover:bg-secondary/10 dark:border-transparent dark:bg-gray-dark dark:hover:bg-secondary"
+            >
+                <div>
+                    <svg
+                        width="26"
+                        height="26"
+                        viewBox="0 0 26 26"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="text-secondary transition dark:group-hover:text-black"
+                    >
+                        <g clip-path="url(#clip0_6_2651)">
+                            <path
+                                d="M1.31194 8.73474H24.6881C24.8695 8.73466 25.049 8.77223 25.2151 8.84507C25.3813 8.91791 25.5305 9.02444 25.6534 9.15792C25.7763 9.29141 25.8702 9.44894 25.929 9.62055C25.9879 9.79216 26.0105 9.97413 25.9955 10.1549L24.9018 23.2684C24.8745 23.5961 24.7251 23.9016 24.4832 24.1243C24.2413 24.347 23.9245 24.4708 23.5957 24.4709H2.40429C2.07547 24.4708 1.75871 24.347 1.5168 24.1243C1.27489 23.9016 1.12548 23.5961 1.09819 23.2684L0.00452488 10.1549C-0.010534 9.97413 0.0120899 9.79216 0.0709658 9.62055C0.129842 9.44894 0.223688 9.29141 0.346571 9.15792C0.469454 9.02444 0.618698 8.91791 0.784866 8.84507C0.951034 8.77223 1.13051 8.73466 1.31194 8.73474Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                opacity="0.3"
+                                d="M14.5614 3.1965C14.7489 3.38404 15.0033 3.4894 15.2685 3.4894H23.4908C23.8386 3.4894 24.1722 3.62756 24.4181 3.87348C24.664 4.11941 24.8022 4.45296 24.8022 4.80075V5.1121C24.8022 5.66438 24.3545 6.1121 23.8022 6.1121H2.19788C1.64559 6.1121 1.19788 5.66438 1.19788 5.1121V2.17805C1.19788 1.83026 1.33604 1.49671 1.58196 1.25078C1.82789 1.00486 2.16143 0.866699 2.50923 0.866699H11.8174C12.0826 0.866699 12.3369 0.972056 12.5245 1.15959L14.5614 3.1965Z"
+                                fill="currentColor"
+                            />
+                        </g>
+                        <defs>
+                            <clipPath id="clip0_6_2651">
+                                <rect width="26" height="26" fill="white" />
+                            </clipPath>
+                        </defs>
+                    </svg>
+                </div>
+                <div class="ltr:pl-4 rtl:pr-4">
+                    <div
+                        [countUp]="1254"
+                        [options]="{startVal :0 ,duration: 10,suffix: '+',enableScrollSpy:true,scrollSpyOnce : true}"
+                        [reanimateOnClick]="false"
+                        class="pb-2.5 text-4xl font-black leading-none transition dark:text-white dark:group-hover:text-black"
+                    >
+                        {{0}}
+                    </div>
+                    <span class="font-bold text-black transition dark:text-gray dark:group-hover:text-black">Project Done</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/components/counter.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'counter',
+    templateUrl: './counter.html',
+})
+export class CounterComponent {
+    @Input() showTitle: boolean = true;
+    constructor() {}
+}

src/app/components/faq-component.html

@@ -0,0 +1,41 @@
+<div class="container">
+    <div class="heading text-center">
+        <h6 [ngClass]="{ hidden :  !showTitle,'!text-secondary': type.toLowerCase() === 'modern-saas'  }">FAQs</h6>
+        <h4>Frequently Asked Questions</h4>
+        <p class="mt-5 text-lg font-bold">Have questions? We’re help you.</p>
+    </div>
+    <div class="mx-auto lg:w-[730px]">
+        <ng-template ngFor let-faq [ngForOf]="queries" let-i="index">
+            <div class="accordion mt-6 border-0 border-b-2 border-gray/20 bg-transparent">
+                <button
+                    type="button"
+                    class="relative !flex w-full items-center justify-between gap-2 py-2.5 text-lg font-bold text-black ltr:text-left rtl:text-right dark:text-white"
+                    (click)="toggleAccordion($event,i+1)"
+                >
+                    <div>{{faq.question}}</div>
+                    <div
+                        class="grid h-6 w-6 flex-shrink-0 place-content-center rounded-full border-2 border-gray text-gray transition"
+                        [ngClass]="{ '!border-black !text-black dark:!border-white dark:!text-white': index === i+1 }"
+                    >
+                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                *ngIf="index !== i+1"
+                                d="M6.09961 0.500977C6.65189 0.500977 7.09961 0.948692 7.09961 1.50098L7.09961 10.501C7.09961 11.0533 6.65189 11.501 6.09961 11.501H5.89961C5.34732 11.501 4.89961 11.0533 4.89961 10.501L4.89961 1.50098C4.89961 0.948692 5.34732 0.500977 5.89961 0.500977H6.09961Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M0.5 5.90039C0.5 5.34811 0.947715 4.90039 1.5 4.90039H10.5C11.0523 4.90039 11.5 5.34811 11.5 5.90039V6.10039C11.5 6.65268 11.0523 7.10039 10.5 7.10039H1.5C0.947715 7.10039 0.5 6.65268 0.5 6.10039V5.90039Z"
+                                fill="currentColor"
+                            />
+                        </svg>
+                    </div>
+                </button>
+                <div class="accordion-content">
+                    <div class="lg:w-4/5">
+                        <p class="px-0 pb-5 pt-0 text-sm font-bold leading-[18px] text-gray">{{faq.answer}}</p>
+                    </div>
+                </div>
+            </div>
+        </ng-template>
+    </div>
+</div>

src/app/components/faq-component.ts

@@ -0,0 +1,73 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'faq-component',
+    templateUrl: './faq-component.html',
+})
+export class FaqAccordionComponent {
+    @Input() showTitle: boolean = true;
+    @Input() queries: any = [
+        {
+            id: 1,
+            question: 'How long is this site live?',
+            answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        },
+        {
+            id: 2,
+            question: 'How do I create an account?',
+            answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        },
+        {
+            id: 3,
+            question: 'What protections does Strategic Systems use to protect our data?',
+            answer: "For now it is limited to 100MB per instance. We'll offer expansion options soon.",
+        },
+        {
+            id: 4,
+            question: 'What type of support is included with this Service?',
+            answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        },
+        {
+            id: 5,
+            question: 'Do you have premium plans for products?',
+            answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        },
+        {
+            id: 6,
+            question: 'Who else is using plurk SaaS tool?',
+            answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        },
+    ];
+    @Input() type: string = 'faq';
+
+    index: number = 0;
+    ngOnInit() {
+        setTimeout(() => {
+            const ele = document.querySelectorAll<HTMLElement>('.accordion button');
+            if (ele.length) {
+                ele[0].click();
+            }
+        });
+    }
+    toggleAccordion(event: any, i: number) {
+        const isOpen = this.index === i;
+        const ele = document.querySelectorAll<HTMLElement>('.accordion-content');
+        for (let i = 0; i < ele.length; i++) {
+            ele[i].style.maxHeight = '';
+        }
+
+        const element = event.currentTarget;
+        element.classList.toggle('active');
+        const panel = element.nextElementSibling;
+        if (panel) {
+            if (isOpen) {
+                this.index = 0;
+                panel.style.maxHeight = '';
+            } else {
+                this.index = i;
+                panel.style.maxHeight = panel.scrollHeight + 'px';
+            }
+        }
+    }
+}

src/app/components/logo-slider.html

@@ -0,0 +1,26 @@
+<div [ngClass]="mainClass">
+    <h3 *ngIf="title" class="mb-10 text-center text-2xl font-bold text-black dark:text-white lg:mb-14" [innerHTML]="title"></h3>
+    <swiper [config]="config">
+        <ng-template swiperSlide>
+            <a href="javascript:"><img src="/assets/images/logo-1.svg" alt="" class="mx-auto transition hover:scale-110" /></a>
+        </ng-template>
+        <ng-template swiperSlide>
+            <a href="javascript:"><img src="/assets/images/logo-2.svg" alt="" class="mx-auto transition hover:scale-110" /></a>
+        </ng-template>
+        <ng-template swiperSlide>
+            <a href="javascript:"><img src="/assets/images/logo-3.svg" alt="" class="mx-auto transition hover:scale-110" /></a>
+        </ng-template>
+        <ng-template swiperSlide>
+            <a href="javascript:"><img src="/assets/images/logo-4.svg" alt="" class="mx-auto transition hover:scale-110" /></a>
+        </ng-template>
+        <ng-template swiperSlide>
+            <a href="javascript:"><img src="/assets/images/logo-5.svg" alt="" class="mx-auto transition hover:scale-110" /></a>
+        </ng-template>
+        <ng-template swiperSlide>
+            <a href="javascript:"><img src="/assets/images/logo-6.svg" alt="" class="mx-auto transition hover:scale-110" /></a>
+        </ng-template>
+        <ng-template swiperSlide>
+            <a href="javascript:"><img src="/assets/images/logo-7.svg" alt="" class="mx-auto transition hover:scale-110" /></a>
+        </ng-template>
+    </swiper>
+</div>

src/app/components/logo-slider.ts

@@ -0,0 +1,41 @@
+import { Component, Input } from '@angular/core';
+import SwiperCore, { SwiperOptions, Autoplay } from 'swiper';
+
+// install Swiper modules
+SwiperCore.use([Autoplay]);
+
+@Component({
+    moduleId: module.id,
+    selector: 'logo-slider',
+    templateUrl: './logo-slider.html',
+})
+export class LogoSliderComponent {
+    @Input() mainClass: string = '';
+    @Input() title: string = '';
+    config: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        speed: 2500,
+        autoplay: {
+            delay: 0,
+            disableOnInteraction: false,
+        },
+        breakpoints: {
+            320: {
+                slidesPerView: 1.7,
+            },
+            600: {
+                slidesPerView: 3,
+            },
+            1000: {
+                slidesPerView: 5,
+            },
+            1600: {
+                slidesPerView: 7,
+            },
+        },
+        modules: [Autoplay],
+    };
+    constructor() {}
+}

src/app/components/modal-dialog.html

@@ -0,0 +1,30 @@
+<div
+    [hidden]="!(opened || openOnServerSide)"
+    class="fixed inset-0 z-[999] h-full w-full overflow-y-auto overflow-x-hidden bg-[#343434]/60"
+    (click)="closeByBackdrop()"
+    [ngClass]="{'modal-show' : opened || openOnServerSide}"
+>
+    <div
+        class="modal-popup-container animated absolute inset-0 h-full w-full text-center before:inline-block before:h-full before:align-middle"
+        [ngClass]="[full ? 'px-0 sm:px-3' : 'px-3']"
+    >
+        <div class="inline-block w-full text-left align-middle">
+            <div
+                class="relative mx-auto max-w-full overflow-hidden rounded bg-white p-8 text-sm text-gray shadow-lg"
+                [ngClass]="[full ? 'my-0 sm:my-8' : 'my-8', contentClass]"
+                [ngStyle]="{ width: width + 'px' }"
+                (click)="$event.stopPropagation()"
+            >
+                <button
+                    *ngIf="closeBtn"
+                    class="absolute top-2.5 right-2.5 z-10 flex h-8 w-8 items-center justify-center text-base text-black !no-underline opacity-100 hover:opacity-70"
+                    [ngClass]="[closeBtnClass]"
+                    (click)="close()"
+                >
+                    ✕
+                </button>
+                <ng-content></ng-content>
+            </div>
+        </div>
+    </div>
+</div>

src/app/components/modal-dialog.ts

@@ -0,0 +1,78 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    host: {
+        '[attr.id]': 'id',
+    },
+    selector: 'modal-dialog',
+    templateUrl: './modal-dialog.html',
+})
+export class ModalDialog {
+    storeData: any;
+    id: any = Math.random();
+    opened = false;
+    @Input() full: boolean = false;
+    @Input() closeBtn: boolean = false;
+    @Input() modal: boolean = false;
+    @Input() width: string = '550';
+    @Input() isOpen: boolean = false;
+    @Input() openOnServerSide: boolean = false;
+    @Input() contentClass: string = '';
+    @Input() closeBtnClass: string = '';
+    @Output() public onclose: EventEmitter<any> = new EventEmitter();
+    @Output() public onopen: EventEmitter<any> = new EventEmitter();
+    ngAfterViewInit() {
+        setTimeout(() => {
+            const ele = document.querySelector("modal-dialog[id='" + this.id + "']");
+            if (ele) {
+                document.body.appendChild(ele);
+            }
+            if (this.isOpen) {
+                this.open();
+            }
+        });
+    }
+    ngOnDestroy() {
+        const ele = document.querySelector("modal-dialog[id='" + this.id + "']");
+        if (ele) {
+            document.body.removeChild(ele);
+        }
+    }
+    scrollbarWidth() {
+        const scrollDiv = document.createElement('div');
+        scrollDiv.style.cssText = 'width:100px;height:100px;overflow:scroll !important;position:absolute;top:-9999px';
+        document.body.appendChild(scrollDiv);
+        const result = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+        document.body.removeChild(scrollDiv);
+        return result;
+    }
+
+    open() {
+        const ele = document.querySelector('html');
+        if (ele) {
+            ele.classList.add('overflow-hidden');
+            ele.style.marginRight = this.scrollbarWidth() + 'px';
+        }
+
+        this.opened = true;
+
+        this.onopen.emit();
+    }
+    closeByBackdrop() {
+        if (!this.modal) {
+            this.close();
+        }
+    }
+    close() {
+        const ele = document.querySelector('html');
+        if (ele) {
+            ele.style.marginRight = '';
+            ele.classList.remove('overflow-hidden');
+        }
+
+        this.opened = false;
+
+        this.onclose.emit();
+    }
+}

src/app/components/office-swiper.html

@@ -0,0 +1,184 @@
+<section class="bg-gradient-to-t from-white/[54%] to-transparent py-14 dark:bg-none lg:py-[100px]">
+    <div class="container">
+        <div class="flex flex-col items-center justify-center lg:flex-row lg:justify-between">
+            <div class="heading text-center md:w-1/2 ltr:lg:text-left rtl:lg:text-right">
+                <h6>Our Offices</h6>
+                <h4>Come to visit our offices throughout the globe</h4>
+            </div>
+            <div class="flex items-center justify-end gap-4">
+                <a href="javascript:" class="text-sm font-extrabold text-black transition hover:text-secondary dark:text-white dark:hover:text-secondary"
+                    >View All</a
+                >
+                <button
+                    type="button"
+                    class="ofc-slider-button-prev flex h-10 w-10 items-center justify-center rounded-full bg-black/5 transition hover:bg-secondary dark:bg-white/5 dark:hover:bg-secondary"
+                >
+                    <svg
+                        width="7"
+                        height="12"
+                        viewBox="0 0 7 12"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="text-black rtl:rotate-180 dark:text-white"
+                    >
+                        <path
+                            d="M5.95007 1.2002L1.48924 5.3424C1.06317 5.73803 1.06317 6.41236 1.48924 6.80799L5.95007 10.9502"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                        ></path>
+                    </svg>
+                </button>
+                <button
+                    type="button"
+                    class="ofc-slider-button-next text-p flex h-10 w-10 items-center justify-center rounded-full bg-black/5 transition hover:bg-secondary dark:bg-white/5 dark:hover:bg-secondary"
+                >
+                    <svg
+                        width="7"
+                        height="12"
+                        viewBox="0 0 7 12"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="text-black rtl:rotate-180 dark:text-white"
+                    >
+                        <path
+                            d="M1.05005 10.7998L5.51089 6.6576C5.93695 6.26197 5.93695 5.58764 5.51089 5.19201L1.05005 1.0498"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                        ></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+        <swiper
+            [config]="config"
+            class="rounded-[32px] drop-shadow-[5px_10px_80px_rgba(119,128,161,0.15)] dark:drop-shadow-none"
+        >
+            <ng-template swiperSlide>
+                <div class="mt-10 rounded-[32px] bg-white dark:bg-gray-dark md:grid md:grid-cols-2 lg:mt-0">
+                    <img src="/assets/images/ofc.png" alt="office" class="h-full w-full rounded-r-[32px] rounded-l-[32px] object-cover md:rounded-r-none" />
+                    <div class="py-10 px-5 sm:px-8">
+                        <div>
+                            <svg width="40" height="20" viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <g clip-path="url(#clip0_267_1200)">
+                                    <path d="M0 0H10L10.4125 0.4125H29.5875L30 0H40V20H30L29.5875 19.5875H10.4125L10 20H0V0Z" fill="#FF0000" />
+                                    <path
+                                        d="M10 0H30V20H10V0ZM20.375 18.4583L20.1875 14.8625C20.1848 14.8034 20.1953 14.7444 20.2184 14.6899C20.2415 14.6354 20.2766 14.5867 20.3209 14.5475C20.3653 14.5084 20.4179 14.4796 20.4749 14.4635C20.5318 14.4473 20.5917 14.4441 20.65 14.4542L24.2292 15.0833L23.7458 13.75C23.7262 13.6969 23.7237 13.6391 23.7387 13.5845C23.7536 13.53 23.7853 13.4815 23.8292 13.4458L27.75 10.2708L26.8667 9.85833C26.807 9.83014 26.7597 9.78114 26.7336 9.72053C26.7075 9.65992 26.7045 9.59187 26.725 9.52917L27.5 7.14583L25.2417 7.625C25.1805 7.63776 25.1168 7.62896 25.0613 7.6001C25.0059 7.57124 24.9621 7.5241 24.9375 7.46667L24.5 6.4375L22.7375 8.32917C22.6972 8.37167 22.6442 8.39997 22.5865 8.40981C22.5287 8.41965 22.4693 8.41051 22.4172 8.38375C22.3651 8.357 22.3231 8.31407 22.2975 8.26141C22.2718 8.20874 22.2639 8.14919 22.275 8.09167L23.125 3.70833L21.7625 4.49583C21.7305 4.51458 21.695 4.52656 21.6582 4.53103C21.6214 4.5355 21.5841 4.53237 21.5485 4.52182C21.513 4.51127 21.48 4.49354 21.4516 4.46972C21.4231 4.4459 21.3999 4.41649 21.3833 4.38333L20 1.66667L18.6167 4.38333C18.6001 4.41649 18.5769 4.4459 18.5484 4.46972C18.52 4.49354 18.487 4.51127 18.4515 4.52182C18.4159 4.53237 18.3786 4.5355 18.3418 4.53103C18.305 4.52656 18.2695 4.51458 18.2375 4.49583L16.875 3.70833L17.725 8.09167C17.7361 8.14919 17.7282 8.20874 17.7025 8.26141C17.6769 8.31407 17.6349 8.357 17.5828 8.38375C17.5307 8.41051 17.4713 8.41965 17.4135 8.40981C17.3558 8.39997 17.3028 8.37167 17.2625 8.32917L15.5 6.4375L15.0625 7.46667C15.0379 7.5241 14.9941 7.57124 14.9387 7.6001C14.8832 7.62896 14.8195 7.63776 14.7583 7.625L12.5 7.14583L13.275 9.52917C13.2955 9.59187 13.2925 9.65992 13.2664 9.72053C13.2403 9.78114 13.193 9.83014 13.1333 9.85833L12.25 10.2708L16.1708 13.4458C16.2147 13.4815 16.2464 13.53 16.2613 13.5845C16.2763 13.6391 16.2738 13.6969 16.2542 13.75L15.7708 15.0833L19.35 14.4542C19.4083 14.4441 19.4682 14.4473 19.5251 14.4635C19.5821 14.4796 19.6347 14.5084 19.6791 14.5475C19.7234 14.5867 19.7585 14.6354 19.7816 14.6899C19.8047 14.7444 19.8152 14.8034 19.8125 14.8625L19.625 18.4583H20.375Z"
+                                        fill="white"
+                                    />
+                                </g>
+                                <defs>
+                                    <clipPath id="clip0_267_1200">
+                                        <rect width="40" height="20" rx="2" fill="white" />
+                                    </clipPath>
+                                </defs>
+                            </svg>
+                        </div>
+                        <ul class="space-y-4 pt-10">
+                            <li class="flex gap-3">
+                                <div class="pt-1">
+                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            fill-rule="evenodd"
+                                            clip-rule="evenodd"
+                                            d="M1 8.45529C1 3.77836 4.8292 0 9.53659 0C14.244 0 18.0732 3.77836 18.0732 8.45529C18.0732 11.3641 16.3769 14.235 14.5791 16.3248C13.6693 17.3823 12.7037 18.2751 11.852 18.9101C11.4268 19.227 11.0181 19.4886 10.6492 19.6744C10.3034 19.8485 9.90853 20 9.53659 20C9.16464 20 8.76974 19.8485 8.42394 19.6744C8.05506 19.4886 7.6464 19.227 7.22121 18.9101C6.36948 18.2751 5.40386 17.3823 4.49409 16.3248C2.69631 14.235 1 11.3641 1 8.45529ZM9.53661 10.9748C7.92017 10.9748 6.60978 9.66437 6.60978 8.04792C6.60978 6.43148 7.92017 5.12109 9.53661 5.12109C11.1531 5.12109 12.4634 6.43148 12.4634 8.04792C12.4634 9.66437 11.1531 10.9748 9.53661 10.9748Z"
+                                            fill="#FFBD11"
+                                        />
+                                    </svg>
+                                </div>
+                                <div class="text-sm font-bold sm:text-lg">151 Yonge Street, 11th Floor, Toronto, Ontario, Canada</div>
+                            </li>
+                            <li class="flex items-center gap-3">
+                                <div>
+                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M17.0621 18.2183C15.1077 20.1726 10.1028 18.3363 5.88327 14.1167C1.66372 9.89718 -0.172609 4.89227 1.7817 2.93795L3.06847 1.65118C3.9568 0.762856 5.42054 0.786338 6.33784 1.70363L8.33092 3.69672C9.24822 4.61401 9.2717 6.07776 8.38337 6.96609L8.10699 7.24247C7.62737 7.72209 7.58045 8.49581 8.0261 9.03587C8.45597 9.55679 8.9194 10.0756 9.42188 10.5781C9.92435 11.0806 10.4432 11.544 10.9641 11.9739C11.5042 12.4196 12.2779 12.3726 12.7575 11.893L13.0339 11.6166C13.9222 10.7283 15.386 10.7518 16.3033 11.6691L18.2964 13.6622C19.2137 14.5795 19.2371 16.0432 18.3488 16.9315L17.0621 18.2183Z"
+                                            fill="#45B649"
+                                        />
+                                    </svg>
+                                </div>
+                                <a href="tel:+15193726595" class="text-sm font-bold hover:text-secondary sm:text-lg">+1 519 372 6595</a>
+                            </li>
+                            <li class="flex items-center gap-3">
+                                <div>
+                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            fill-rule="evenodd"
+                                            clip-rule="evenodd"
+                                            d="M0 7.34884C0 4.39476 2.39476 2 5.34884 2H14.6512C17.6052 2 20 4.39476 20 7.34884V12.9302C20 15.8843 17.6052 18.2791 14.6512 18.2791H5.34884C2.39476 18.2791 0 15.8843 0 12.9302V7.34884ZM4.8686 6.74884C4.53723 6.50031 4.06713 6.56747 3.8186 6.89884C3.57008 7.23021 3.63723 7.70031 3.9686 7.94884L8.35 11.2349C9.32778 11.9682 10.6722 11.9682 11.65 11.2349L16.0314 7.94884C16.3628 7.70031 16.4299 7.23021 16.1814 6.89884C15.9329 6.56747 15.4628 6.50031 15.1314 6.74884L10.75 10.0349C10.3056 10.3682 9.69444 10.3682 9.25 10.0349L4.8686 6.74884Z"
+                                            fill="#FF709D"
+                                        />
+                                    </svg>
+                                </div>
+                                <a href="mailto:info@plurk.com" class="text-sm font-bold hover:text-secondary sm:text-lg">info@plurk.com</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </ng-template>
+            <ng-template swiperSlide>
+                <div class="mt-10 rounded-[32px] bg-white dark:bg-gray-dark md:grid md:grid-cols-2 lg:mt-0">
+                    <img src="/assets/images/ofc.png" alt="office" class="h-full w-full rounded-r-[32px] rounded-l-[32px] object-cover md:rounded-r-none" />
+                    <div class="py-10 px-5 sm:px-8">
+                        <div>
+                            <svg width="40" height="20" viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <g clip-path="url(#clip0_267_1200)">
+                                    <path d="M0 0H10L10.4125 0.4125H29.5875L30 0H40V20H30L29.5875 19.5875H10.4125L10 20H0V0Z" fill="#FF0000" />
+                                    <path
+                                        d="M10 0H30V20H10V0ZM20.375 18.4583L20.1875 14.8625C20.1848 14.8034 20.1953 14.7444 20.2184 14.6899C20.2415 14.6354 20.2766 14.5867 20.3209 14.5475C20.3653 14.5084 20.4179 14.4796 20.4749 14.4635C20.5318 14.4473 20.5917 14.4441 20.65 14.4542L24.2292 15.0833L23.7458 13.75C23.7262 13.6969 23.7237 13.6391 23.7387 13.5845C23.7536 13.53 23.7853 13.4815 23.8292 13.4458L27.75 10.2708L26.8667 9.85833C26.807 9.83014 26.7597 9.78114 26.7336 9.72053C26.7075 9.65992 26.7045 9.59187 26.725 9.52917L27.5 7.14583L25.2417 7.625C25.1805 7.63776 25.1168 7.62896 25.0613 7.6001C25.0059 7.57124 24.9621 7.5241 24.9375 7.46667L24.5 6.4375L22.7375 8.32917C22.6972 8.37167 22.6442 8.39997 22.5865 8.40981C22.5287 8.41965 22.4693 8.41051 22.4172 8.38375C22.3651 8.357 22.3231 8.31407 22.2975 8.26141C22.2718 8.20874 22.2639 8.14919 22.275 8.09167L23.125 3.70833L21.7625 4.49583C21.7305 4.51458 21.695 4.52656 21.6582 4.53103C21.6214 4.5355 21.5841 4.53237 21.5485 4.52182C21.513 4.51127 21.48 4.49354 21.4516 4.46972C21.4231 4.4459 21.3999 4.41649 21.3833 4.38333L20 1.66667L18.6167 4.38333C18.6001 4.41649 18.5769 4.4459 18.5484 4.46972C18.52 4.49354 18.487 4.51127 18.4515 4.52182C18.4159 4.53237 18.3786 4.5355 18.3418 4.53103C18.305 4.52656 18.2695 4.51458 18.2375 4.49583L16.875 3.70833L17.725 8.09167C17.7361 8.14919 17.7282 8.20874 17.7025 8.26141C17.6769 8.31407 17.6349 8.357 17.5828 8.38375C17.5307 8.41051 17.4713 8.41965 17.4135 8.40981C17.3558 8.39997 17.3028 8.37167 17.2625 8.32917L15.5 6.4375L15.0625 7.46667C15.0379 7.5241 14.9941 7.57124 14.9387 7.6001C14.8832 7.62896 14.8195 7.63776 14.7583 7.625L12.5 7.14583L13.275 9.52917C13.2955 9.59187 13.2925 9.65992 13.2664 9.72053C13.2403 9.78114 13.193 9.83014 13.1333 9.85833L12.25 10.2708L16.1708 13.4458C16.2147 13.4815 16.2464 13.53 16.2613 13.5845C16.2763 13.6391 16.2738 13.6969 16.2542 13.75L15.7708 15.0833L19.35 14.4542C19.4083 14.4441 19.4682 14.4473 19.5251 14.4635C19.5821 14.4796 19.6347 14.5084 19.6791 14.5475C19.7234 14.5867 19.7585 14.6354 19.7816 14.6899C19.8047 14.7444 19.8152 14.8034 19.8125 14.8625L19.625 18.4583H20.375Z"
+                                        fill="white"
+                                    />
+                                </g>
+                                <defs>
+                                    <clipPath id="clip0_267_1200">
+                                        <rect width="40" height="20" rx="2" fill="white" />
+                                    </clipPath>
+                                </defs>
+                            </svg>
+                        </div>
+                        <ul class="space-y-4 pt-10">
+                            <li class="flex gap-3">
+                                <div class="pt-1">
+                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            fill-rule="evenodd"
+                                            clip-rule="evenodd"
+                                            d="M1 8.45529C1 3.77836 4.8292 0 9.53659 0C14.244 0 18.0732 3.77836 18.0732 8.45529C18.0732 11.3641 16.3769 14.235 14.5791 16.3248C13.6693 17.3823 12.7037 18.2751 11.852 18.9101C11.4268 19.227 11.0181 19.4886 10.6492 19.6744C10.3034 19.8485 9.90853 20 9.53659 20C9.16464 20 8.76974 19.8485 8.42394 19.6744C8.05506 19.4886 7.6464 19.227 7.22121 18.9101C6.36948 18.2751 5.40386 17.3823 4.49409 16.3248C2.69631 14.235 1 11.3641 1 8.45529ZM9.53661 10.9748C7.92017 10.9748 6.60978 9.66437 6.60978 8.04792C6.60978 6.43148 7.92017 5.12109 9.53661 5.12109C11.1531 5.12109 12.4634 6.43148 12.4634 8.04792C12.4634 9.66437 11.1531 10.9748 9.53661 10.9748Z"
+                                            fill="#FFBD11"
+                                        />
+                                    </svg>
+                                </div>
+                                <div class="text-sm font-bold sm:text-lg">151 Yonge Street, 11th Floor, Toronto, Ontario, Canada</div>
+                            </li>
+                            <li class="flex items-center gap-3">
+                                <div>
+                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M17.0621 18.2183C15.1077 20.1726 10.1028 18.3363 5.88327 14.1167C1.66372 9.89718 -0.172609 4.89227 1.7817 2.93795L3.06847 1.65118C3.9568 0.762856 5.42054 0.786338 6.33784 1.70363L8.33092 3.69672C9.24822 4.61401 9.2717 6.07776 8.38337 6.96609L8.10699 7.24247C7.62737 7.72209 7.58045 8.49581 8.0261 9.03587C8.45597 9.55679 8.9194 10.0756 9.42188 10.5781C9.92435 11.0806 10.4432 11.544 10.9641 11.9739C11.5042 12.4196 12.2779 12.3726 12.7575 11.893L13.0339 11.6166C13.9222 10.7283 15.386 10.7518 16.3033 11.6691L18.2964 13.6622C19.2137 14.5795 19.2371 16.0432 18.3488 16.9315L17.0621 18.2183Z"
+                                            fill="#45B649"
+                                        />
+                                    </svg>
+                                </div>
+                                <a href="tel:+15193726595" class="text-sm font-bold hover:text-secondary sm:text-lg">+1 519 372 6595</a>
+                            </li>
+                            <li class="flex items-center gap-3">
+                                <div>
+                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            fill-rule="evenodd"
+                                            clip-rule="evenodd"
+                                            d="M0 7.34884C0 4.39476 2.39476 2 5.34884 2H14.6512C17.6052 2 20 4.39476 20 7.34884V12.9302C20 15.8843 17.6052 18.2791 14.6512 18.2791H5.34884C2.39476 18.2791 0 15.8843 0 12.9302V7.34884ZM4.8686 6.74884C4.53723 6.50031 4.06713 6.56747 3.8186 6.89884C3.57008 7.23021 3.63723 7.70031 3.9686 7.94884L8.35 11.2349C9.32778 11.9682 10.6722 11.9682 11.65 11.2349L16.0314 7.94884C16.3628 7.70031 16.4299 7.23021 16.1814 6.89884C15.9329 6.56747 15.4628 6.50031 15.1314 6.74884L10.75 10.0349C10.3056 10.3682 9.69444 10.3682 9.25 10.0349L4.8686 6.74884Z"
+                                            fill="#FF709D"
+                                        />
+                                    </svg>
+                                </div>
+                                <a href="mailto:info@plurk.com" class="text-sm font-bold hover:text-secondary sm:text-lg">info@plurk.com</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </ng-template>
+        </swiper>
+    </div>
+</section>

src/app/components/office-swiper.ts

@@ -0,0 +1,30 @@
+import { Component, Input } from '@angular/core';
+import SwiperCore, { SwiperOptions, Navigation, Autoplay } from 'swiper';
+
+// install Swiper modules
+SwiperCore.use([Navigation, Autoplay]);
+
+@Component({
+    moduleId: module.id,
+    selector: 'office-swiper',
+    templateUrl: './office-swiper.html',
+})
+export class OfficeSwiperComponent {
+    @Input() mainClass: string = '';
+    @Input() showTitle: boolean = true;
+    config: SwiperOptions = {
+        slidesPerView: 'auto',
+        loop: true,
+        spaceBetween: 30,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        navigation: {
+            nextEl: '.ofc-slider-button-next',
+            prevEl: '.ofc-slider-button-prev',
+        },
+        modules: [Navigation, Autoplay],
+    };
+    constructor() {}
+}

src/app/components/project-slider.html

@@ -0,0 +1,128 @@
+<div>
+    <div class="container">
+        <div class="mb-10 flex flex-col items-center justify-center gap-5 lg:mb-14 lg:flex-row lg:justify-between">
+            <ng-content select="[title]"></ng-content>
+            <div class="flex items-center justify-end gap-4">
+                <a routerLink="/portfolio" class="text-sm font-extrabold text-black transition hover:text-secondary dark:text-white dark:hover:text-secondary"
+                    >View All</a
+                >
+                <button
+                    type="button"
+                    class="project-slider-button-prev flex h-10 w-10 items-center justify-center rounded-full bg-black/5 transition hover:bg-secondary dark:bg-white/5 dark:hover:bg-secondary"
+                >
+                    <svg
+                        width="7"
+                        height="12"
+                        viewBox="0 0 7 12"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="text-black rtl:rotate-180 dark:text-white"
+                    >
+                        <path
+                            d="M5.95007 1.2002L1.48924 5.3424C1.06317 5.73803 1.06317 6.41236 1.48924 6.80799L5.95007 10.9502"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                        ></path>
+                    </svg>
+                </button>
+                <button
+                    type="button"
+                    class="project-slider-button-next text-p flex h-10 w-10 items-center justify-center rounded-full bg-black/5 transition hover:bg-secondary dark:bg-white/5 dark:hover:bg-secondary"
+                >
+                    <svg
+                        width="7"
+                        height="12"
+                        viewBox="0 0 7 12"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="text-black rtl:rotate-180 dark:text-white"
+                    >
+                        <path
+                            d="M1.05005 10.7998L5.51089 6.6576C5.93695 6.26197 5.93695 5.58764 5.51089 5.19201L1.05005 1.0498"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                        ></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+        <!-- <div class="overflow-x-auto">
+                    <ul class="flex gap-8 lg:gap-10 font-bold mb-10 mt-10 lg:mt-0 w-[700px] md:w-auto">
+                        <li class="text-secondary"><button type="button">All Work</button></li>
+                        <li><button type="button" class="hover:text-secondary transition">Design</button></li>
+                        <li><button type="button" class="hover:text-secondary transition">Website</button></li>
+                        <li><button type="button" class="hover:text-secondary transition">Mobile App</button></li>
+                        <li><button type="button" class="hover:text-secondary transition">Web Application</button></li>
+                        <li><button type="button" class="hover:text-secondary transition">Ecommerce</button></li>
+                    </ul>
+                </div> -->
+    </div>
+
+    <swiper
+        [config]="config"
+        class="px-6"
+    >
+        <ng-template swiperSlide>
+            <div
+                class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+            >
+                <a routerLink="/portfolio-detail" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                <img src="/assets/images/project-2.png" alt="project-2" class="h-52 w-full rounded-t-3xl object-cover" />
+                <div class="p-5 text-sm font-bold">
+                    <h6 class="mb-1 text-black line-clamp-1 dark:text-white">Crypto Game - UX Interface</h6>
+                    <p>Website, App</p>
+                </div>
+            </div>
+        </ng-template>
+        <ng-template swiperSlide>
+            <div
+                class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+            >
+                <a routerLink="/portfolio-detail" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                <img src="/assets/images/project-3.png" alt="project-3" class="h-52 w-full rounded-t-3xl object-cover" />
+                <div class="p-5 text-sm font-bold">
+                    <h6 class="mb-1 text-black line-clamp-1 dark:text-white">Looking for a quiet place</h6>
+                    <p>Website</p>
+                </div>
+            </div>
+        </ng-template>
+        <ng-template swiperSlide>
+            <div
+                class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+            >
+                <a routerLink="/portfolio-detail" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                <img src="/assets/images/project-4.png" alt="project-4" class="h-52 w-full rounded-t-3xl object-cover" />
+                <div class="p-5 text-sm font-bold">
+                    <h6 class="mb-1 text-black line-clamp-1 dark:text-white">WeTour - Travel Hero Illustration</h6>
+                    <p>Website</p>
+                </div>
+            </div>
+        </ng-template>
+        <ng-template swiperSlide>
+            <div
+                class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+            >
+                <a routerLink="/portfolio-detail" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                <img src="/assets/images/project-5.png" alt="project-5" class="h-52 w-full rounded-t-3xl object-cover" />
+                <div class="p-5 text-sm font-bold">
+                    <h6 class="mb-1 text-black line-clamp-1 dark:text-white">Digital Art Guide</h6>
+                    <p>Branding</p>
+                </div>
+            </div>
+        </ng-template>
+        <ng-template swiperSlide>
+            <div
+                class="relative rounded-3xl border border-transparent bg-white transition duration-500 hover:border-secondary hover:bg-secondary/20 dark:bg-gray-dark"
+            >
+                <a routerLink="/portfolio-detail" class="absolute top-0 h-full w-full ltr:left-0 rtl:right-0"></a>
+                <img src="/assets/images/project-6.png" alt="project-6" class="h-52 w-full rounded-t-3xl object-cover" />
+                <div class="p-5 text-sm font-bold">
+                    <h6 class="mb-1 text-black line-clamp-1 dark:text-white">Frozeverse - 3D and motion design</h6>
+                    <p>Branding, Website, App</p>
+                </div>
+            </div>
+        </ng-template>
+    </swiper>
+</div>

src/app/components/project-slider.ts

@@ -0,0 +1,44 @@
+import { Component, Input } from '@angular/core';
+import SwiperCore, { SwiperOptions, Navigation, Autoplay } from 'swiper';
+
+// install Swiper modules
+SwiperCore.use([Navigation, Autoplay]);
+
+@Component({
+    moduleId: module.id,
+    selector: 'project-slider',
+    templateUrl: './project-slider.html',
+})
+export class ProjectSliderComponent {
+    @Input() mainClass: string = '';
+    @Input() showTitle: boolean = true;
+    config: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        autoplay: {
+            delay: 2500,
+            disableOnInteraction: false,
+        },
+        navigation: {
+            nextEl: '.project-slider-button-next',
+            prevEl: '.project-slider-button-prev',
+        },
+        modules: [Navigation, Autoplay],
+        breakpoints: {
+            600: {
+                slidesPerView: 2,
+            },
+            768: {
+                slidesPerView: 3,
+            },
+            1000: {
+                slidesPerView: 4,
+            },
+            1200: {
+                slidesPerView: 5,
+            },
+        },
+    };
+    constructor() {}
+}

src/app/components/testimonial.html

@@ -0,0 +1,433 @@
+<section class="relative bg-black dark:bg-transparent" [ngClass]="mainClass">
+    <div *ngIf="type.toLowerCase() === 'marketing'; else elseBlock">
+        <swiper [config]="config">
+            <ng-template swiperSlide *ngFor="let feedback of feedbacks">
+                <div class="flex flex-col items-center gap-7 pb-3 sm:pb-[70px] lg:flex-row xl:gap-12">
+                    <div class="relative pl-10 pt-[30px] rtl:rotate-y-180">
+                        <span class="absolute top-0 left-0">
+                            <img src="/assets/images/testimonial-shadow.svg" alt="" />
+                        </span>
+                        <div class="w-full max-w-[347px] overflow-hidden rounded-b-3xl rounded-tl-[200px]">
+                            <img src="/assets/images/testimonial2.png" alt="" />
+                        </div>
+                        <span class="absolute -bottom-5 -right-5">
+                            <svg width="42" height="47" viewBox="0 0 42 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M1 45.2263C12.6553 45.2263 24.325 39.9256 30.3725 29.8141C35.6466 20.9958 37.7394 10.8446 40.2006 1"
+                                    stroke="url(#paint0_linear_134_9118)"
+                                    stroke-width="2"
+                                    stroke-linecap="round"
+                                />
+                                <defs>
+                                    <linearGradient id="paint0_linear_134_9118" x1="40" y1="6" x2="-2" y2="39.5" gradientUnits="userSpaceOnUse">
+                                        <stop stop-color="#B476E5" />
+                                        <stop offset="1" stop-color="#B476E5" stop-opacity="0" />
+                                    </linearGradient>
+                                </defs>
+                            </svg>
+                        </span>
+                        <span class="absolute top-0 -right-6 hidden md:block">
+                            <img src="/assets/images/blue-quote.png" alt="blue-quote" class="" />
+                        </span>
+                    </div>
+                    <div class="w-full max-w-[570px] lg:mt-[150px]">
+                        <div class="rounded-3xl bg-gray-dark p-6">
+                            <div class="pb-8">
+                                <svg width="96" height="16" viewBox="0 0 96 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M86.2864 2.84744C87.0637 1.5558 88.9363 1.5558 89.7136 2.84744L90.1964 3.64962C90.4756 4.11365 90.9311 4.44459 91.4587 4.56678L92.3708 4.77803C93.8395 5.11816 94.4181 6.8991 93.4299 8.03752L92.8162 8.74454C92.4612 9.15352 92.2872 9.68898 92.334 10.2285L92.4149 11.1613C92.5453 12.6631 91.0303 13.7638 89.6423 13.1757L88.7802 12.8105C88.2815 12.5993 87.7185 12.5993 87.2198 12.8105L86.3577 13.1757C84.9697 13.7638 83.4547 12.6631 83.5851 11.1613L83.666 10.2285C83.7128 9.68899 83.5388 9.15352 83.1838 8.74454L82.5701 8.03752C81.5819 6.89911 82.1605 5.11816 83.6292 4.77803L84.5413 4.56678C85.0689 4.44459 85.5244 4.11365 85.8036 3.64962L86.2864 2.84744Z"
+                                        fill="#7780A1"
+                                    />
+                                    <path
+                                        d="M66.2864 2.84744C67.0637 1.5558 68.9363 1.5558 69.7136 2.84744L70.1964 3.64962C70.4756 4.11365 70.9311 4.44459 71.4587 4.56678L72.3708 4.77803C73.8395 5.11816 74.4181 6.8991 73.4299 8.03752L72.8162 8.74454C72.4612 9.15352 72.2872 9.68898 72.334 10.2285L72.4149 11.1613C72.5453 12.6631 71.0303 13.7638 69.6423 13.1757L68.7802 12.8105C68.2815 12.5993 67.7185 12.5993 67.2198 12.8105L66.3577 13.1757C64.9697 13.7638 63.4547 12.6631 63.5851 11.1613L63.666 10.2285C63.7128 9.68899 63.5388 9.15352 63.1838 8.74454L62.5701 8.03752C61.5819 6.89911 62.1605 5.11816 63.6292 4.77803L64.5413 4.56678C65.0689 4.44459 65.5244 4.11365 65.8036 3.64962L66.2864 2.84744Z"
+                                        fill="#FFBD11"
+                                    />
+                                    <path
+                                        d="M46.2864 2.84744C47.0637 1.5558 48.9363 1.5558 49.7136 2.84744L50.1964 3.64962C50.4756 4.11365 50.9311 4.44459 51.4587 4.56678L52.3708 4.77803C53.8395 5.11816 54.4181 6.8991 53.4299 8.03752L52.8162 8.74454C52.4612 9.15352 52.2872 9.68898 52.334 10.2285L52.4149 11.1613C52.5453 12.6631 51.0303 13.7638 49.6423 13.1757L48.7802 12.8105C48.2815 12.5993 47.7185 12.5993 47.2198 12.8105L46.3577 13.1757C44.9697 13.7638 43.4547 12.6631 43.5851 11.1613L43.666 10.2285C43.7128 9.68899 43.5388 9.15352 43.1838 8.74454L42.5701 8.03752C41.5819 6.89911 42.1605 5.11816 43.6292 4.77803L44.5413 4.56678C45.0689 4.44459 45.5244 4.11365 45.8036 3.64962L46.2864 2.84744Z"
+                                        fill="#FFBD11"
+                                    />
+                                    <path
+                                        d="M26.2864 2.84744C27.0637 1.5558 28.9363 1.5558 29.7136 2.84744L30.1964 3.64962C30.4756 4.11365 30.9311 4.44459 31.4587 4.56678L32.3708 4.77803C33.8395 5.11816 34.4181 6.8991 33.4299 8.03752L32.8162 8.74454C32.4612 9.15352 32.2872 9.68898 32.334 10.2285L32.4149 11.1613C32.5453 12.6631 31.0303 13.7638 29.6423 13.1757L28.7802 12.8105C28.2815 12.5993 27.7185 12.5993 27.2198 12.8105L26.3577 13.1757C24.9697 13.7638 23.4547 12.6631 23.5851 11.1613L23.666 10.2285C23.7128 9.68899 23.5388 9.15352 23.1838 8.74454L22.5701 8.03752C21.5819 6.89911 22.1605 5.11816 23.6292 4.77803L24.5413 4.56678C25.0689 4.44459 25.5244 4.11365 25.8036 3.64962L26.2864 2.84744Z"
+                                        fill="#FFBD11"
+                                    />
+                                    <path
+                                        d="M6.28638 2.84744C7.0637 1.5558 8.9363 1.5558 9.71362 2.84744L10.1964 3.64962C10.4756 4.11365 10.9311 4.44459 11.4587 4.56678L12.3708 4.77803C13.8395 5.11816 14.4181 6.8991 13.4299 8.03752L12.8162 8.74454C12.4612 9.15352 12.2872 9.68898 12.334 10.2285L12.4149 11.1613C12.5453 12.6631 11.0303 13.7638 9.64225 13.1757L8.78018 12.8105C8.28151 12.5993 7.71849 12.5993 7.21982 12.8105L6.35775 13.1757C4.96968 13.7638 3.45472 12.6631 3.58506 11.1613L3.66601 10.2285C3.71283 9.68899 3.53885 9.15352 3.18383 8.74454L2.57009 8.03752C1.58187 6.89911 2.16054 5.11816 3.62916 4.77803L4.54126 4.56678C5.06887 4.44459 5.52437 4.11365 5.80362 3.64962L6.28638 2.84744Z"
+                                        fill="#FFBD11"
+                                    />
+                                </svg>
+                            </div>
+                            <p class="font-medium italic text-white">{{feedback.message}}</p>
+                            <div class="relative mt-12">
+                                <h5 class="font-extrabold text-primary">{{feedback.name}}</h5>
+                                <h6 class="text-sm font-bold italic">{{ feedback.role}}</h6>
+                                <span class="absolute right-0 bottom-0">
+                                    <svg width="100" height="73" viewBox="0 0 100 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <g opacity="0.05">
+                                            <path
+                                                d="M79.5222 0C85.1084 0 89.8948 2.12795 93.8833 6.1167C98.1392 10.1054 100 14.8935 100 20.2128C100 25.2666 98.4045 29.7875 94.9462 33.7764C91.4881 38.0323 85.9039 38.8302 81.3825 39.0952C82.1803 45.7443 85.9037 52.6589 89.3619 57.4472C89.8944 58.245 90.425 59.0427 91.2246 59.5752C92.2876 60.6382 92.2876 62.2356 91.2246 63.2986L83.5126 71.543C82.4495 72.8732 80.3216 72.606 79.2567 71.543C76.0657 68.0849 72.8731 63.831 70.2144 59.5751C62.7675 47.6072 59.044 35.6393 59.044 23.669C59.044 16.7544 61.1719 10.9032 65.1606 6.64734C69.1493 2.39334 74.2029 0.000144939 79.5217 0.000144939L79.5222 0Z"
+                                                fill="#93A2B2"
+                                            />
+                                            <path
+                                                d="M20.4783 0C26.0645 0 30.8509 2.12795 34.8394 6.1167C39.0952 10.1054 40.9561 14.8935 40.9561 20.2128C40.9561 25.2666 39.3606 29.7875 35.9023 33.7764C32.4442 38.0323 26.86 38.8302 22.3386 39.0952C23.1363 45.7443 26.8597 52.6589 30.318 57.4472C30.8504 58.245 31.381 59.0427 32.1806 59.5752C33.2437 60.6382 33.2437 62.2356 32.1806 63.2986L24.4686 71.543C23.4056 72.8732 21.2776 72.606 20.2128 71.543C17.0218 68.0849 13.8292 63.831 11.1705 59.5751C3.72351 47.6072 7.62939e-06 35.6393 7.62939e-06 23.669C7.62939e-06 16.7544 2.12797 10.9032 6.11671 6.64734C10.1054 2.39334 14.8921 0.000144939 20.4778 0.000144939L20.4783 0Z"
+                                                fill="#93A2B2"
+                                            />
+                                        </g>
+                                    </svg>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </ng-template>
+        </swiper>
+        <div class="bottom-0 z-[1] mt-5 flex items-center justify-end gap-4 ltr:right-28 rtl:left-28 sm:absolute sm:mt-0 sm:justify-end">
+            <a href="javascript:" class="text-sm font-extrabold text-white transition hover:text-secondary dark:hover:text-secondary">View All</a>
+
+            <button
+                type="button"
+                class="testimonial-swiper-button-prev static mt-0 flex h-10 w-10 items-center justify-center rounded-full bg-white/5 transition after:text-[0px] hover:bg-secondary rtl:rotate-180"
+            >
+                <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M5.95007 1.2002L1.48924 5.3424C1.06317 5.73803 1.06317 6.41236 1.48924 6.80799L5.95007 10.9502"
+                        stroke="white"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                    />
+                </svg>
+            </button>
+
+            <button
+                type="button"
+                class="testimonial-swiper-button-next static mt-0 flex h-10 w-10 items-center justify-center rounded-full bg-white/5 transition after:text-[0px] hover:bg-secondary rtl:rotate-180"
+            >
+                <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M1.05005 10.7998L5.51089 6.6576C5.93695 6.26197 5.93695 5.58764 5.51089 5.19201L1.05005 1.0498"
+                        stroke="white"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                    />
+                </svg>
+            </button>
+        </div>
+    </div>
+    <ng-template #elseBlock>
+        <div *ngIf="type.toLowerCase() === 'common'" class="absolute top-0 ltr:right-0 rtl:left-0 rtl:-rotate-180">
+            <svg width="758" height="741" viewBox="0 0 758 741" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g opacity="0.03">
+                    <ellipse
+                        opacity="0.1"
+                        cx="752"
+                        cy="370.646"
+                        rx="750"
+                        ry="749.646"
+                        stroke="white"
+                        stroke-width="3"
+                        stroke-miterlimit="4.62023"
+                        stroke-linecap="round"
+                        stroke-dasharray="35 50 15 15"
+                    />
+                    <path
+                        opacity="0.1"
+                        d="M1443.13 370.646C1443.13 752.153 1133.7 1061.43 752 1061.43C370.296 1061.43 60.8655 752.153 60.8655 370.646C60.8655 -10.8606 370.296 -320.134 752 -320.134C1133.7 -320.134 1443.13 -10.8606 1443.13 370.646Z"
+                        stroke="white"
+                        stroke-width="3"
+                    />
+                    <ellipse
+                        opacity="0.2"
+                        cx="752"
+                        cy="370.646"
+                        rx="634.561"
+                        ry="634.207"
+                        stroke="white"
+                        stroke-width="3"
+                        stroke-miterlimit="4.62023"
+                        stroke-linecap="round"
+                        stroke-dasharray="35 50 15 15"
+                    />
+                    <path
+                        opacity="0.3"
+                        d="M1328.4 370.646C1328.4 688.789 1070.34 946.696 752 946.696C433.66 946.696 175.596 688.789 175.596 370.646C175.596 52.5037 433.66 -205.403 752 -205.403C1070.34 -205.403 1328.4 52.5037 1328.4 370.646Z"
+                        stroke="white"
+                        stroke-width="3"
+                    />
+                    <ellipse
+                        opacity="0.4"
+                        cx="752"
+                        cy="370.646"
+                        rx="519.83"
+                        ry="519.476"
+                        stroke="white"
+                        stroke-width="3"
+                        stroke-miterlimit="4.62023"
+                        stroke-linecap="round"
+                        stroke-dasharray="35 50 15 15"
+                    />
+                    <path
+                        opacity="0.5"
+                        d="M1211.55 370.646C1211.55 624.251 1005.8 829.84 752 829.84C498.197 829.84 292.452 624.251 292.452 370.646C292.452 117.041 498.197 -88.5479 752 -88.5479C1005.8 -88.5479 1211.55 117.041 1211.55 370.646Z"
+                        stroke="white"
+                        stroke-width="3"
+                    />
+                    <path
+                        opacity="0.6"
+                        d="M1155.6 370.646C1155.6 593.351 974.903 773.891 752 773.891C529.097 773.891 348.401 593.351 348.401 370.646C348.401 147.942 529.097 -32.5986 752 -32.5986C974.903 -32.5986 1155.6 147.942 1155.6 370.646Z"
+                        stroke="white"
+                        stroke-width="3"
+                    />
+                    <ellipse
+                        opacity="0.7"
+                        cx="752"
+                        cy="370.646"
+                        rx="350.567"
+                        ry="350.212"
+                        stroke="white"
+                        stroke-width="3"
+                        stroke-miterlimit="4.62023"
+                        stroke-linecap="round"
+                        stroke-dasharray="35 50 15 15"
+                    />
+                    <path
+                        opacity="0.8"
+                        d="M1040.16 370.647C1040.16 529.596 911.148 658.453 752 658.453C592.852 658.453 463.84 529.596 463.84 370.647C463.84 211.698 592.852 82.8408 752 82.8408C911.148 82.8408 1040.16 211.698 1040.16 370.647Z"
+                        stroke="white"
+                        stroke-width="3"
+                    />
+                    <ellipse
+                        opacity="0.9"
+                        cx="752"
+                        cy="370.646"
+                        rx="223.088"
+                        ry="222.734"
+                        stroke="white"
+                        stroke-width="3"
+                        stroke-miterlimit="4.62023"
+                        stroke-linecap="round"
+                        stroke-dasharray="35 50 15 15"
+                    />
+                    <path
+                        d="M909.848 370.646C909.848 457.624 839.18 528.14 752 528.14C664.82 528.14 594.152 457.624 594.152 370.646C594.152 283.667 664.82 213.151 752 213.151C839.18 213.151 909.848 283.667 909.848 370.646Z"
+                        stroke="white"
+                        stroke-width="3"
+                    />
+                    <ellipse
+                        cx="752"
+                        cy="370.646"
+                        rx="106.941"
+                        ry="106.586"
+                        stroke="white"
+                        stroke-width="3"
+                        stroke-miterlimit="4.62023"
+                        stroke-linecap="round"
+                        stroke-dasharray="35 50 15 15"
+                    />
+                </g>
+            </svg>
+        </div>
+
+        <div *ngIf="type.toLowerCase() === 'modern-saas'" class="absolute top-0 ltr:left-1/4 rtl:right-1/4 rtl:rotate-y-180">
+            <svg width="191" height="66" viewBox="0 0 191 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M170.824 61.5578C175.418 60.5885 180.185 59.2256 183.479 57.6552C184.495 57.171 185.331 56.6855 185.965 56.2111C186.611 55.7268 186.962 55.3161 187.121 55.0099C187.253 54.7559 187.246 54.6023 187.185 54.4414C187.098 54.215 186.83 53.8109 186.087 53.2803C181.964 50.3354 179.058 47.674 177.124 44.6091C175.171 41.5143 174.287 38.1331 173.982 33.8874C173.922 33.0611 174.544 32.343 175.37 32.2835C176.196 32.224 176.914 32.8456 176.974 33.6719C177.257 37.5995 178.051 40.4569 179.661 43.0082C181.29 45.5892 183.83 47.9812 187.831 50.8392L187.112 51.845L187.831 50.8392C188.828 51.5512 189.61 52.3819 189.988 53.3725C190.39 54.4286 190.26 55.4742 189.784 56.3918C189.335 57.2571 188.593 57.9902 187.763 58.6121C186.92 59.2438 185.896 59.8267 184.77 60.3633C180.303 62.4927 173.608 64.1814 168.027 65.1505L168.027 65.1506C166.756 65.371 165.708 64.6347 165.345 63.6195C164.986 62.6159 165.315 61.396 166.397 60.7379L166.397 60.7378L174.882 55.5806C152.61 51.8672 140.004 40.8181 133.482 27.8829C127.159 15.3435 126.631 1.19667 128.247 -9.40786C106.166 13.6399 88.6882 19.9881 73.8366 17.1671C59.2682 14.3999 47.7799 2.8588 37.4629 -8.53095C30.7044 21.1799 11.7482 31.9735 2.43129 33.5822C1.61495 33.7232 0.838896 33.1757 0.697937 32.3593C0.556977 31.543 1.10449 30.7669 1.92083 30.626C10.0533 29.2217 28.4196 19.199 34.7432 -10.1243C35.1562 -12.0396 37.6201 -12.8334 39.0166 -11.2858L39.0167 -11.2857C49.61 0.455029 60.6479 11.6083 74.3964 14.2198C87.9663 16.7974 104.76 11.1066 127.019 -12.4698L127.019 -12.47C127.903 -13.4061 129.149 -13.4012 130.003 -12.992C130.862 -12.5804 131.659 -11.593 131.431 -10.2917C129.624 0.024426 129.93 14.1773 136.16 26.5322C142.345 38.7973 154.454 49.4712 176.659 52.8253C177.798 52.9972 178.531 53.8584 178.738 54.7623C178.948 55.6773 178.65 56.8003 177.626 57.4234L177.626 57.4238L170.824 61.5578ZM128.476 -10.8096C128.476 -10.8095 128.476 -10.8095 128.476 -10.8094ZM176.211 55.7916C176.211 55.7917 176.211 55.7917 176.211 55.7917Z"
+                    fill="url(#paint0_linear_823_12546)"
+                    fill-opacity="0.5"
+                />
+                <defs>
+                    <linearGradient id="paint0_linear_823_12546" x1="180" y1="51.5" x2="34" y2="-15.5" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#B476E5" />
+                        <stop offset="1" stop-color="#B476E5" stop-opacity="0" />
+                    </linearGradient>
+                </defs>
+            </svg>
+        </div>
+        <div *ngIf="type.toLowerCase() === 'modern-saas'" class="absolute top-1/4 hidden ltr:right-4 rtl:left-4 rtl:rotate-y-180 lg:block">
+            <svg width="301" height="322" viewBox="0 0 301 322" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M284.743 4C284.743 1.79086 282.952 0 280.743 0C278.534 0 276.743 1.79086 276.743 4V11.0115C276.743 13.2206 278.534 15.0115 280.743 15.0115C282.952 15.0115 284.743 13.2206 284.743 11.0115V4ZM280.743 28.7715C282.952 28.7715 284.743 30.5623 284.743 32.7715V96.6719H296.066C298.275 96.6719 300.066 98.4627 300.066 100.672C300.066 102.881 298.275 104.672 296.066 104.672H284.743V115.228C284.743 117.437 282.952 119.228 280.743 119.228C278.534 119.228 276.743 117.437 276.743 115.228V104.672H213.361V185.877H225.432C227.641 185.877 229.432 187.668 229.432 189.877C229.432 192.086 227.641 193.877 225.432 193.877H213.361V204.621C213.361 206.831 211.571 208.621 209.361 208.621C207.152 208.621 205.361 206.831 205.361 204.621V193.877H122.547V249.516H134.616C136.826 249.516 138.616 251.306 138.616 253.516C138.616 255.725 136.826 257.516 134.616 257.516H122.547V267.699C122.547 269.908 120.756 271.699 118.547 271.699C116.337 271.699 114.547 269.908 114.547 267.699V257.516H8V317.341C8 319.55 6.20914 321.341 4 321.341C1.79086 321.341 0 319.55 0 317.341V249.516H114.547V185.877H205.361V96.6719H276.743V32.7715C276.743 30.5623 278.534 28.7715 280.743 28.7715Z"
+                    fill="url(#paint0_linear_823_12555)"
+                    fill-opacity="0.3"
+                />
+                <defs>
+                    <linearGradient id="paint0_linear_823_12555" x1="177" y1="146" x2="218.5" y2="201.5" gradientUnits="userSpaceOnUse">
+                        <stop stop-color="#47BDFF" />
+                        <stop offset="1" stop-color="#47BDFF" stop-opacity="0" />
+                    </linearGradient>
+                </defs>
+            </svg>
+        </div>
+        <div class="container">
+            <div [ngClass]="{ hidden: !showTitle }" class="heading text-center ltr:lg:text-left rtl:lg:text-right">
+                <h6>Testimonial</h6>
+                <h4 class="!text-white">Feedback from our clients</h4>
+            </div>
+            <div class="mx-auto" [ngClass]="{ 'lg:w-11/12': type.toLowerCase() === 'common' }">
+                <div class="relative sm:py-12 md:py-0">
+                    <swiper [config]="config">
+                        <ng-container *ngIf="type.toLowerCase() === 'common'">
+                            <ng-template swiperSlide *ngFor="let feedback of feedbacks">
+                                <div class="items-center gap-4 sm:grid sm:grid-cols-3">
+                                    <div class="col-span-2">
+                                        <div class="relative rounded-3xl bg-white/[0.02] p-6">
+                                            <img
+                                                src="/assets/images/blue-quote.png"
+                                                alt="blue-quote"
+                                                class="absolute top-0 ltr:right-0 rtl:left-0 sm:-top-6 ltr:sm:-right-6 rtl:sm:-left-6"
+                                            />
+                                            <div class="pb-8">
+                                                <svg width="96" height="16" viewBox="0 0 96 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                    <path
+                                                        d="M86.2864 2.84744C87.0637 1.5558 88.9363 1.5558 89.7136 2.84744L90.1964 3.64962C90.4756 4.11365 90.9311 4.44459 91.4587 4.56678L92.3708 4.77803C93.8395 5.11816 94.4181 6.8991 93.4299 8.03752L92.8162 8.74454C92.4612 9.15352 92.2872 9.68898 92.334 10.2285L92.4149 11.1613C92.5453 12.6631 91.0303 13.7638 89.6423 13.1757L88.7802 12.8105C88.2815 12.5993 87.7185 12.5993 87.2198 12.8105L86.3577 13.1757C84.9697 13.7638 83.4547 12.6631 83.5851 11.1613L83.666 10.2285C83.7128 9.68899 83.5388 9.15352 83.1838 8.74454L82.5701 8.03752C81.5819 6.89911 82.1605 5.11816 83.6292 4.77803L84.5413 4.56678C85.0689 4.44459 85.5244 4.11365 85.8036 3.64962L86.2864 2.84744Z"
+                                                        fill="#7780A1"
+                                                    />
+                                                    <path
+                                                        d="M66.2864 2.84744C67.0637 1.5558 68.9363 1.5558 69.7136 2.84744L70.1964 3.64962C70.4756 4.11365 70.9311 4.44459 71.4587 4.56678L72.3708 4.77803C73.8395 5.11816 74.4181 6.8991 73.4299 8.03752L72.8162 8.74454C72.4612 9.15352 72.2872 9.68898 72.334 10.2285L72.4149 11.1613C72.5453 12.6631 71.0303 13.7638 69.6423 13.1757L68.7802 12.8105C68.2815 12.5993 67.7185 12.5993 67.2198 12.8105L66.3577 13.1757C64.9697 13.7638 63.4547 12.6631 63.5851 11.1613L63.666 10.2285C63.7128 9.68899 63.5388 9.15352 63.1838 8.74454L62.5701 8.03752C61.5819 6.89911 62.1605 5.11816 63.6292 4.77803L64.5413 4.56678C65.0689 4.44459 65.5244 4.11365 65.8036 3.64962L66.2864 2.84744Z"
+                                                        fill="#FFBD11"
+                                                    />
+                                                    <path
+                                                        d="M46.2864 2.84744C47.0637 1.5558 48.9363 1.5558 49.7136 2.84744L50.1964 3.64962C50.4756 4.11365 50.9311 4.44459 51.4587 4.56678L52.3708 4.77803C53.8395 5.11816 54.4181 6.8991 53.4299 8.03752L52.8162 8.74454C52.4612 9.15352 52.2872 9.68898 52.334 10.2285L52.4149 11.1613C52.5453 12.6631 51.0303 13.7638 49.6423 13.1757L48.7802 12.8105C48.2815 12.5993 47.7185 12.5993 47.2198 12.8105L46.3577 13.1757C44.9697 13.7638 43.4547 12.6631 43.5851 11.1613L43.666 10.2285C43.7128 9.68899 43.5388 9.15352 43.1838 8.74454L42.5701 8.03752C41.5819 6.89911 42.1605 5.11816 43.6292 4.77803L44.5413 4.56678C45.0689 4.44459 45.5244 4.11365 45.8036 3.64962L46.2864 2.84744Z"
+                                                        fill="#FFBD11"
+                                                    />
+                                                    <path
+                                                        d="M26.2864 2.84744C27.0637 1.5558 28.9363 1.5558 29.7136 2.84744L30.1964 3.64962C30.4756 4.11365 30.9311 4.44459 31.4587 4.56678L32.3708 4.77803C33.8395 5.11816 34.4181 6.8991 33.4299 8.03752L32.8162 8.74454C32.4612 9.15352 32.2872 9.68898 32.334 10.2285L32.4149 11.1613C32.5453 12.6631 31.0303 13.7638 29.6423 13.1757L28.7802 12.8105C28.2815 12.5993 27.7185 12.5993 27.2198 12.8105L26.3577 13.1757C24.9697 13.7638 23.4547 12.6631 23.5851 11.1613L23.666 10.2285C23.7128 9.68899 23.5388 9.15352 23.1838 8.74454L22.5701 8.03752C21.5819 6.89911 22.1605 5.11816 23.6292 4.77803L24.5413 4.56678C25.0689 4.44459 25.5244 4.11365 25.8036 3.64962L26.2864 2.84744Z"
+                                                        fill="#FFBD11"
+                                                    />
+                                                    <path
+                                                        d="M6.28638 2.84744C7.0637 1.5558 8.9363 1.5558 9.71362 2.84744L10.1964 3.64962C10.4756 4.11365 10.9311 4.44459 11.4587 4.56678L12.3708 4.77803C13.8395 5.11816 14.4181 6.8991 13.4299 8.03752L12.8162 8.74454C12.4612 9.15352 12.2872 9.68898 12.334 10.2285L12.4149 11.1613C12.5453 12.6631 11.0303 13.7638 9.64225 13.1757L8.78018 12.8105C8.28151 12.5993 7.71849 12.5993 7.21982 12.8105L6.35775 13.1757C4.96968 13.7638 3.45472 12.6631 3.58506 11.1613L3.66601 10.2285C3.71283 9.68899 3.53885 9.15352 3.18383 8.74454L2.57009 8.03752C1.58187 6.89911 2.16054 5.11816 3.62916 4.77803L4.54126 4.56678C5.06887 4.44459 5.52437 4.11365 5.80362 3.64962L6.28638 2.84744Z"
+                                                        fill="#FFBD11"
+                                                    />
+                                                </svg>
+                                            </div>
+                                            <p class="relative font-medium italic text-white">
+                                                {{feedback.message}}
+                                                <span class="absolute -left-2 -top-2">
+                                                    <svg width="100" height="73" viewBox="0 0 100 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                        <g opacity="0.05">
+                                                            <path
+                                                                d="M79.5222 0C85.1084 0 89.8948 2.12795 93.8833 6.1167C98.1392 10.1054 100 14.8935 100 20.2128C100 25.2666 98.4045 29.7875 94.9462 33.7764C91.4881 38.0323 85.9039 38.8302 81.3825 39.0952C82.1803 45.7443 85.9037 52.6589 89.3619 57.4472C89.8944 58.245 90.425 59.0427 91.2246 59.5752C92.2876 60.6382 92.2876 62.2356 91.2246 63.2986L83.5126 71.543C82.4495 72.8732 80.3216 72.606 79.2567 71.543C76.0657 68.0849 72.8731 63.831 70.2144 59.5751C62.7675 47.6072 59.044 35.6393 59.044 23.669C59.044 16.7544 61.1719 10.9032 65.1606 6.64734C69.1493 2.39334 74.2029 0.000144939 79.5217 0.000144939L79.5222 0Z"
+                                                                fill="#93A2B2"
+                                                            />
+                                                            <path
+                                                                d="M20.4783 0C26.0645 0 30.8509 2.12795 34.8394 6.1167C39.0952 10.1054 40.9561 14.8935 40.9561 20.2128C40.9561 25.2666 39.3606 29.7875 35.9023 33.7764C32.4442 38.0323 26.86 38.8302 22.3386 39.0952C23.1363 45.7443 26.8597 52.6589 30.318 57.4472C30.8504 58.245 31.381 59.0427 32.1806 59.5752C33.2437 60.6382 33.2437 62.2356 32.1806 63.2986L24.4686 71.543C23.4056 72.8732 21.2776 72.606 20.2128 71.543C17.0218 68.0849 13.8292 63.831 11.1705 59.5751C3.72351 47.6072 7.62939e-06 35.6393 7.62939e-06 23.669C7.62939e-06 16.7544 2.12797 10.9032 6.11671 6.64734C10.1054 2.39334 14.8921 0.000144939 20.4778 0.000144939L20.4783 0Z"
+                                                                fill="#93A2B2"
+                                                            />
+                                                        </g>
+                                                    </svg>
+                                                </span>
+                                            </p>
+                                            <div class="mt-12">
+                                                <h5 class="font-extrabold text-primary">{{feedback.name}}</h5>
+                                                <h6 class="text-sm font-bold italic">{{ feedback.role}}</h6>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <!-- <img
+                                    [src]="feedback.thumbnail"
+                                    alt="testimonial"
+                                    class="mx-auto mt-4 h-20 w-20 rounded-full object-cover object-top ltr:ml-auto rtl:mr-auto sm:mt-0 sm:h-auto sm:w-auto sm:rounded-[150px] sm:object-scale-down ltr:sm:mr-0 rtl:sm:ml-0"
+                                /> -->
+                                    <div
+                                        class="mx-auto mt-4 h-20 w-20 max-w-[255px] overflow-hidden rounded-full bg-white ltr:ml-auto rtl:mr-auto dark:bg-gray-dark sm:mt-0 sm:h-auto sm:w-auto sm:rounded-[150px] ltr:sm:mr-0 rtl:sm:ml-0"
+                                    >
+                                        <img [src]="feedback.thumbnail" alt="testimonial" class="h-full w-full object-cover object-top" />
+                                    </div>
+                                </div>
+                            </ng-template>
+                        </ng-container>
+                        <ng-container *ngIf="type.toLowerCase() === 'modern-saas'">
+                            <ng-template swiperSlide *ngFor="let feedback of feedbacks">
+                                <div class="mb-6 flex flex-col items-center justify-between gap-6 md:mb-14 md:flex-row">
+                                    <div class="relative rounded-3xl bg-white/[0.02] p-6 md:w-2/3 lg:w-1/2">
+                                        <div class="absolute right-4 top-4">
+                                            <svg width="90" height="73" viewBox="0 0 90 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                <g opacity="0.05">
+                                                    <path
+                                                        d="M69.4343 72.4434C75.0205 72.4434 79.8069 70.3154 83.7954 66.3267C88.0513 62.338 89.9121 57.5499 89.9121 52.2306C89.9121 47.1768 88.3166 42.6559 84.8583 38.6669C81.4002 34.4111 75.816 33.6131 71.2946 33.3481C72.0924 26.699 75.8158 19.7844 79.274 14.9962C79.8065 14.1984 80.3371 13.4007 81.1367 12.8682C82.1997 11.8052 82.1997 10.2078 81.1367 9.1448L73.4247 0.900398C72.3616 -0.429802 70.2337 -0.162651 69.1688 0.900398C65.9779 4.3585 62.7852 8.6124 60.1266 12.8683C52.6796 24.8362 48.9561 36.8041 48.9561 48.7743C48.9561 55.6889 51.084 61.5401 55.0728 65.796C59.0615 70.05 64.1151 72.4432 69.4339 72.4432L69.4343 72.4434Z"
+                                                        fill="#93A2B2"
+                                                    />
+                                                    <path
+                                                        d="M20.4783 72.4434C26.0645 72.4434 30.8509 70.3154 34.8394 66.3267C39.0952 62.338 40.9561 57.5499 40.9561 52.2306C40.9561 47.1768 39.3606 42.6559 35.9023 38.6669C32.4442 34.4111 26.86 33.6131 22.3386 33.3481C23.1363 26.699 26.8597 19.7844 30.318 14.9962C30.8504 14.1984 31.381 13.4007 32.1806 12.8682C33.2437 11.8052 33.2437 10.2078 32.1806 9.1448L24.4686 0.900398C23.4056 -0.429802 21.2776 -0.162651 20.2128 0.900398C17.0218 4.3585 13.8292 8.6124 11.1705 12.8683C3.72351 24.8362 7.62939e-06 36.8041 7.62939e-06 48.7743C7.62939e-06 55.6889 2.12797 61.5401 6.11671 65.796C10.1054 70.05 14.8921 72.4432 20.4778 72.4432L20.4783 72.4434Z"
+                                                        fill="#93A2B2"
+                                                    />
+                                                </g>
+                                            </svg>
+                                        </div>
+                                        <div class="pb-8">
+                                            <svg width="96" height="16" viewBox="0 0 96 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                <path
+                                                    d="M86.2864 2.84744C87.0637 1.5558 88.9363 1.5558 89.7136 2.84744L90.1964 3.64962C90.4756 4.11365 90.9311 4.44459 91.4587 4.56678L92.3708 4.77803C93.8395 5.11816 94.4181 6.8991 93.4299 8.03752L92.8162 8.74454C92.4612 9.15352 92.2872 9.68898 92.334 10.2285L92.4149 11.1613C92.5453 12.6631 91.0303 13.7638 89.6423 13.1757L88.7802 12.8105C88.2815 12.5993 87.7185 12.5993 87.2198 12.8105L86.3577 13.1757C84.9697 13.7638 83.4547 12.6631 83.5851 11.1613L83.666 10.2285C83.7128 9.68899 83.5388 9.15352 83.1838 8.74454L82.5701 8.03752C81.5819 6.89911 82.1605 5.11816 83.6292 4.77803L84.5413 4.56678C85.0689 4.44459 85.5244 4.11365 85.8036 3.64962L86.2864 2.84744Z"
+                                                    fill="#7780A1"
+                                                />
+                                                <path
+                                                    d="M66.2864 2.84744C67.0637 1.5558 68.9363 1.5558 69.7136 2.84744L70.1964 3.64962C70.4756 4.11365 70.9311 4.44459 71.4587 4.56678L72.3708 4.77803C73.8395 5.11816 74.4181 6.8991 73.4299 8.03752L72.8162 8.74454C72.4612 9.15352 72.2872 9.68898 72.334 10.2285L72.4149 11.1613C72.5453 12.6631 71.0303 13.7638 69.6423 13.1757L68.7802 12.8105C68.2815 12.5993 67.7185 12.5993 67.2198 12.8105L66.3577 13.1757C64.9697 13.7638 63.4547 12.6631 63.5851 11.1613L63.666 10.2285C63.7128 9.68899 63.5388 9.15352 63.1838 8.74454L62.5701 8.03752C61.5819 6.89911 62.1605 5.11816 63.6292 4.77803L64.5413 4.56678C65.0689 4.44459 65.5244 4.11365 65.8036 3.64962L66.2864 2.84744Z"
+                                                    fill="#FFBD11"
+                                                />
+                                                <path
+                                                    d="M46.2864 2.84744C47.0637 1.5558 48.9363 1.5558 49.7136 2.84744L50.1964 3.64962C50.4756 4.11365 50.9311 4.44459 51.4587 4.56678L52.3708 4.77803C53.8395 5.11816 54.4181 6.8991 53.4299 8.03752L52.8162 8.74454C52.4612 9.15352 52.2872 9.68898 52.334 10.2285L52.4149 11.1613C52.5453 12.6631 51.0303 13.7638 49.6423 13.1757L48.7802 12.8105C48.2815 12.5993 47.7185 12.5993 47.2198 12.8105L46.3577 13.1757C44.9697 13.7638 43.4547 12.6631 43.5851 11.1613L43.666 10.2285C43.7128 9.68899 43.5388 9.15352 43.1838 8.74454L42.5701 8.03752C41.5819 6.89911 42.1605 5.11816 43.6292 4.77803L44.5413 4.56678C45.0689 4.44459 45.5244 4.11365 45.8036 3.64962L46.2864 2.84744Z"
+                                                    fill="#FFBD11"
+                                                />
+                                                <path
+                                                    d="M26.2864 2.84744C27.0637 1.5558 28.9363 1.5558 29.7136 2.84744L30.1964 3.64962C30.4756 4.11365 30.9311 4.44459 31.4587 4.56678L32.3708 4.77803C33.8395 5.11816 34.4181 6.8991 33.4299 8.03752L32.8162 8.74454C32.4612 9.15352 32.2872 9.68898 32.334 10.2285L32.4149 11.1613C32.5453 12.6631 31.0303 13.7638 29.6423 13.1757L28.7802 12.8105C28.2815 12.5993 27.7185 12.5993 27.2198 12.8105L26.3577 13.1757C24.9697 13.7638 23.4547 12.6631 23.5851 11.1613L23.666 10.2285C23.7128 9.68899 23.5388 9.15352 23.1838 8.74454L22.5701 8.03752C21.5819 6.89911 22.1605 5.11816 23.6292 4.77803L24.5413 4.56678C25.0689 4.44459 25.5244 4.11365 25.8036 3.64962L26.2864 2.84744Z"
+                                                    fill="#FFBD11"
+                                                />
+                                                <path
+                                                    d="M6.28638 2.84744C7.0637 1.5558 8.9363 1.5558 9.71362 2.84744L10.1964 3.64962C10.4756 4.11365 10.9311 4.44459 11.4587 4.56678L12.3708 4.77803C13.8395 5.11816 14.4181 6.8991 13.4299 8.03752L12.8162 8.74454C12.4612 9.15352 12.2872 9.68898 12.334 10.2285L12.4149 11.1613C12.5453 12.6631 11.0303 13.7638 9.64225 13.1757L8.78018 12.8105C8.28151 12.5993 7.71849 12.5993 7.21982 12.8105L6.35775 13.1757C4.96968 13.7638 3.45472 12.6631 3.58506 11.1613L3.66601 10.2285C3.71283 9.68899 3.53885 9.15352 3.18383 8.74454L2.57009 8.03752C1.58187 6.89911 2.16054 5.11816 3.62916 4.77803L4.54126 4.56678C5.06887 4.44459 5.52437 4.11365 5.80362 3.64962L6.28638 2.84744Z"
+                                                    fill="#FFBD11"
+                                                />
+                                            </svg>
+                                        </div>
+                                        <p class="relative font-medium italic text-white">{{feedback.message}}</p>
+                                        <div class="mt-12">
+                                            <h5 class="font-extrabold text-primary">{{feedback.name}}</h5>
+                                            <h6 class="text-sm font-bold italic">{{ feedback.role}}</h6>
+                                        </div>
+                                    </div>
+                                    <div class="mx-auto w-40 flex-1 md:mx-0 md:w-full md:max-w-sm">
+                                        <img [src]="feedback.thumbnail" alt="testimonial" class="h-full w-full rounded-[30px] object-cover" />
+                                    </div>
+                                </div>
+                            </ng-template>
+                        </ng-container>
+                    </swiper>
+                    <div
+                        class="bottom-0 z-[1] mt-5 flex items-center justify-center gap-4"
+                        [ngClass]="{'ltr:right-1/3 rtl:left-1/3 sm:absolute sm:mt-0 sm:justify-end': type.toLowerCase() === 'common',
+                    'ltr:left-0 rtl:right-0 md:absolute md:mt-0 md:justify-end': type.toLowerCase() === 'modern-saas'}"
+                    >
+                        <a href="javascript:" class="text-sm font-extrabold text-white transition hover:text-secondary dark:hover:text-secondary">View All</a>
+                        <button
+                            type="button"
+                            class="testimonial-swiper-button-prev static mt-0 flex h-10 w-10 items-center justify-center rounded-full bg-white/5 transition after:text-[0px] hover:bg-secondary rtl:rotate-180"
+                        >
+                            <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M5.95007 1.2002L1.48924 5.3424C1.06317 5.73803 1.06317 6.41236 1.48924 6.80799L5.95007 10.9502"
+                                    stroke="white"
+                                    stroke-width="2"
+                                    stroke-linecap="round"
+                                />
+                            </svg>
+                        </button>
+                        <button
+                            type="button"
+                            class="testimonial-swiper-button-next static mt-0 flex h-10 w-10 items-center justify-center rounded-full bg-white/5 transition after:text-[0px] hover:bg-secondary rtl:rotate-180"
+                        >
+                            <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M1.05005 10.7998L5.51089 6.6576C5.93695 6.26197 5.93695 5.58764 5.51089 5.19201L1.05005 1.0498"
+                                    stroke="white"
+                                    stroke-width="2"
+                                    stroke-linecap="round"
+                                />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ng-template>
+</section>

src/app/components/testimonial.ts

@@ -0,0 +1,42 @@
+import { Component, Input } from '@angular/core';
+import SwiperCore, { SwiperOptions, Navigation, Autoplay } from 'swiper';
+
+// install Swiper modules
+SwiperCore.use([Navigation, Autoplay]);
+
+@Component({
+    moduleId: module.id,
+    selector: 'testimonial',
+    templateUrl: './testimonial.html',
+})
+export class TestimonialComponent {
+    @Input() mainClass: string = '';
+    @Input() showTitle: boolean = true;
+    @Input() type: string = 'common';
+    @Input() feedbacks: any = [
+        {
+            id: 1,
+            name: 'Allan Branch',
+            role: 'CEO of Lifted',
+            thumbnail: '/assets/images/testimonial.png',
+            message:
+                "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.",
+        },
+    ];
+    config: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        speed: 1000,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        navigation: {
+            nextEl: '.testimonial-swiper-button-next',
+            prevEl: '.testimonial-swiper-button-prev',
+        },
+        modules: [Navigation, Autoplay],
+    };
+    constructor() {}
+}

src/app/construction.html

@@ -0,0 +1,570 @@
+<div>
+    <section class="bg-black bg-[url(/assets/images/construction/banner-frame.png)] bg-bottom bg-no-repeat">
+        <div class="container">
+            <div class="flex flex-col items-center gap-10 py-40 lg:flex-row">
+                <div class="text-center text-white ltr:lg:text-left rtl:lg:text-right">
+                    <h2 class="text-3xl font-black sm:text-6xl">
+                        WE TAKE YOUR <span class="text-primary">DREAM HOME</span> & <span class="text-secondary">MAKE IT REAL</span>
+                    </h2>
+                    <p class="mt-5 text-lg font-semibold">
+                        Nisi nec a enim, velit potenti nunc interdum facilisis Pharetra integer viverra et scelerisque egestas.
+                    </p>
+                    <a routerLink="/contact-us" class="btn mt-5 rounded-md bg-white">Contact Us</a>
+                </div>
+                <div>
+                    <img src="/assets/images/construction/banner-img.png" data-aos="fade-up" data-aos-duration="1000" alt="" />
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-[url(/assets/images/construction/services-bg-img.png)] bg-cover bg-center bg-no-repeat py-12 lg:py-24">
+        <div class="container">
+            <div class="heading text-center">
+                <h4 class="!font-black">OUR <span class="text-primary">SERVICES</span></h4>
+                <h6 class="mx-auto mt-2 max-w-[663px] !font-medium !text-gray dark:!text-white">
+                    Duis sed odio sit amet nibh vulputate cursus a sit amet mauris morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a
+                    ornare odio.
+                </h6>
+            </div>
+            <div class="grid grid-cols-1 justify-between gap-10 sm:grid-cols-2 md:gap-16 lg:grid-cols-3" data-aos="fade-up" data-aos-duration="1000">
+                <div>
+                    <span>
+                        <svg class="h-[60px] w-[60px]" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g clip-path="url(#clip0_189_777)">
+                                <path
+                                    d="M20.4 2.40002C16.4391 2.40002 13.2 5.63909 13.2 9.60002C13.2 11.9813 14.3719 14.1 16.1625 15.4125C15.2016 15.8953 14.325 16.5188 13.575 17.2875C12.7031 16.9782 11.775 16.8 10.8 16.8C6.17343 16.8 2.4 20.5735 2.4 25.2C2.4 28.1391 3.92343 30.75 6.225 32.25C2.55937 33.9844 -3.54272e-06 37.6969 -3.54272e-06 42V47.4C-0.00469104 47.7844 0.178121 48.1453 0.487496 48.375C0.487496 48.375 1.33593 48.975 2.9625 49.4625C4.58906 49.95 7.10156 50.4 10.8 50.4C14.4984 50.4 17.0109 49.95 18.6375 49.4625C18.8484 49.4016 19.0172 49.3407 19.2 49.275V54.6C19.1953 54.9844 19.3781 55.3453 19.6875 55.575C19.6875 55.575 20.5359 56.175 22.1625 56.6625C23.7891 57.15 26.3016 57.6 30 57.6C33.6984 57.6 36.2109 57.15 37.8375 56.6625C39.4641 56.175 40.3125 55.575 40.3125 55.575C40.6219 55.3453 40.8047 54.9844 40.8 54.6V49.275C40.9828 49.3407 41.1516 49.4016 41.3625 49.4625C42.9891 49.95 45.5016 50.4 49.2 50.4C52.8984 50.4 55.4109 49.95 57.0375 49.4625C58.6641 48.975 59.5125 48.375 59.5125 48.375C59.8219 48.1453 60.0047 47.7844 60 47.4V42C60 37.6969 57.4406 33.9844 53.775 32.25C56.0766 30.75 57.6 28.1391 57.6 25.2C57.6 20.5735 53.8266 16.8 49.2 16.8C48.1547 16.8 47.1609 17.011 46.2375 17.3625C45.4828 16.5703 44.5922 15.9094 43.6125 15.4125C45.4031 14.1 46.575 11.9813 46.575 9.60002C46.575 5.63909 43.3359 2.40002 39.375 2.40002C35.4141 2.40002 32.175 5.63909 32.175 9.60002C32.175 11.9813 33.3469 14.1 35.1375 15.4125C32.3812 16.7719 30.3656 19.3875 29.8875 22.5375C29.4094 19.3828 27.3984 16.7672 24.6375 15.4125C26.4281 14.1 27.6 11.9813 27.6 9.60002C27.6 5.63909 24.3609 2.40002 20.4 2.40002ZM20.4 4.80002C23.0672 4.80002 25.2 6.93284 25.2 9.60002C25.2 12.2672 23.0672 14.4 20.4 14.4C17.7328 14.4 15.6 12.2672 15.6 9.60002C15.6 6.93284 17.7328 4.80002 20.4 4.80002ZM39.375 4.80002C42.0422 4.80002 44.175 6.93284 44.175 9.60002C44.175 12.2672 42.0422 14.4 39.375 14.4C36.7078 14.4 34.575 12.2672 34.575 9.60002C34.575 6.93284 36.7078 4.80002 39.375 4.80002ZM20.4 16.8C24.4453 16.8 27.6 19.9547 27.6 24V24.375C24.15 25.4203 21.6 28.6172 21.6 32.4C21.6 35.3391 23.1234 37.95 25.425 39.45C23.9203 40.1625 22.6312 41.2078 21.6 42.4875V42C21.6 37.6969 19.0406 33.9844 15.375 32.25C17.6766 30.75 19.2 28.1391 19.2 25.2C19.2 22.4625 17.8641 20.025 15.825 18.4875C17.0719 17.4235 18.6187 16.8 20.4 16.8ZM39.375 16.8C41.2078 16.8 42.8016 17.4422 44.0625 18.5625C42.0844 20.1 40.8 22.5141 40.8 25.2C40.8 28.1391 42.3234 30.75 44.625 32.25C40.9594 33.9844 38.4 37.6969 38.4 42V42.4875C37.3687 41.2078 36.0797 40.1625 34.575 39.45C36.8766 37.95 38.4 35.3391 38.4 32.4C38.4 28.5328 35.7469 25.2657 32.175 24.3V24C32.175 19.9547 35.3297 16.8 39.375 16.8ZM10.8 19.2C11.7328 19.2 12.6 19.425 13.3875 19.8C15.4031 20.7657 16.8 22.8047 16.8 25.2C16.8 28.5282 14.1281 31.2 10.8 31.2C7.47187 31.2 4.8 28.5282 4.8 25.2C4.8 21.8719 7.47187 19.2 10.8 19.2ZM49.2 19.2C52.5281 19.2 55.2 21.8719 55.2 25.2C55.2 28.5282 52.5281 31.2 49.2 31.2C45.8719 31.2 43.2 28.5282 43.2 25.2C43.2 22.9828 44.3859 21.0657 46.1625 20.025C46.1719 20.0203 46.1906 20.0297 46.2 20.025C46.3781 19.9875 46.5422 19.9125 46.6875 19.8C46.7297 19.7813 46.7578 19.7438 46.8 19.725C46.8234 19.7157 46.8516 19.7016 46.875 19.6875C47.5922 19.3828 48.3703 19.2 49.2 19.2ZM30 26.4C33.3281 26.4 36 29.0719 36 32.4C36 35.7282 33.3281 38.4 30 38.4C26.6719 38.4 24 35.7282 24 32.4C24 29.0719 26.6719 26.4 30 26.4ZM10.8 33.6C15.4266 33.6 19.2 37.3735 19.2 42V46.6125C19.0219 46.7203 18.9516 46.8422 17.9625 47.1375C16.5891 47.55 14.3016 48 10.8 48C7.29843 48 5.01093 47.55 3.6375 47.1375C2.64843 46.8422 2.57812 46.7203 2.4 46.6125V42C2.4 37.3735 6.17343 33.6 10.8 33.6ZM49.2 33.6C53.8266 33.6 57.6 37.3735 57.6 42V46.6125C57.4219 46.7203 57.3516 46.8422 56.3625 47.1375C54.9891 47.55 52.7016 48 49.2 48C45.6984 48 43.4109 47.55 42.0375 47.1375C41.0484 46.8422 40.9781 46.7203 40.8 46.6125V42C40.8 37.3735 44.5734 33.6 49.2 33.6ZM30 40.8C34.6266 40.8 38.4 44.5735 38.4 49.2V53.8125C38.2219 53.9203 38.1516 54.0422 37.1625 54.3375C35.7891 54.75 33.5016 55.2 30 55.2C26.4984 55.2 24.2109 54.75 22.8375 54.3375C21.8484 54.0422 21.7781 53.9203 21.6 53.8125V49.2C21.6 44.5735 25.3734 40.8 30 40.8Z"
+                                    fill="#47BDFF"
+                                />
+                            </g>
+                            <defs>
+                                <clipPath id="clip0_189_777">
+                                    <rect width="60" height="60" fill="white" />
+                                </clipPath>
+                            </defs>
+                        </svg>
+                    </span>
+                    <a
+                        href="javascript:"
+                        class="relative inline-block py-5 text-2xl font-bold text-secondary transition line-clamp-1 hover:text-primary sm:py-8"
+                    >
+                        Over 15 years experience
+                        <span
+                            class="absolute top-1/2 -translate-y-1/2 text-[64px] font-extrabold text-black/[0.05] ltr:left-0 rtl:right-0 dark:text-white/[0.05]"
+                            >01</span
+                        >
+                    </a>
+                    <p class="text-lg font-medium">Lorem ipsum dolot amet, consectetur adipiscing elit, sed do eiusmod tempor ever since the 1500s.</p>
+                </div>
+                <div>
+                    <span>
+                        <svg class="h-[60px] w-[60px]" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g clip-path="url(#clip0_189_771)">
+                                <path
+                                    d="M15.6 2.40002C13.6266 2.40002 12 4.02659 12 6.00002C12 6.15471 12.0282 6.3094 12.0891 6.45471C11.311 6.16409 10.4766 6.00002 9.60002 6.00002C5.63909 6.00002 2.40002 9.23909 2.40002 13.2C2.40002 17.9344 6.30471 22.2094 9.9469 25.8938C11.7703 27.736 13.5703 29.4188 14.8688 30.825C15.5203 31.5235 16.0453 32.161 16.3735 32.6625C16.7063 33.1688 16.8 33.5391 16.8 33.6C16.8 34.2797 16.2797 34.8 15.6 34.8C15.1688 34.7953 14.7656 35.0203 14.5453 35.3953C14.3297 35.7703 14.3297 36.2297 14.5453 36.6047C14.7656 36.9797 15.1688 37.2047 15.6 37.2C16.8844 37.2 18.0141 36.5016 18.6516 35.475C19.8891 38.8782 21.3516 41.8266 23.1 44.025C23.7469 44.8453 24.4547 45.5625 25.2 46.1625V50.4H21.6C18.3 50.4 15.6 53.1 15.6 56.4V57.6H43.2V55.2L44.4 56.4C44.4 53.1 41.7 50.4 38.4 50.4H34.8V46.0969C35.5172 45.5157 36.1922 44.8266 36.825 44.0438C38.5875 41.836 40.0735 38.8688 41.3297 35.4422C41.9625 36.4875 43.1016 37.2 44.4 37.2C44.8313 37.2047 45.2344 36.9797 45.4547 36.6047C45.6703 36.2297 45.6703 35.7703 45.4547 35.3953C45.2344 35.0203 44.8313 34.7953 44.4 34.8C43.7203 34.8 43.2 34.2797 43.2 33.6C43.2 33.5391 43.2938 33.1688 43.6266 32.6625C43.9547 32.161 44.4797 31.5235 45.1313 30.825C46.4297 29.4188 48.2297 27.736 50.0532 25.8938C53.6953 22.2094 57.6 17.9344 57.6 13.2C57.6 9.23909 54.361 6.00002 50.4 6.00002C49.5235 6.00002 48.6891 6.16409 47.911 6.45471C47.9719 6.3094 48 6.15471 48 6.00002C48 4.02659 46.3735 2.40002 44.4 2.40002H15.6ZM15.6 4.80002H44.4C45.0797 4.80002 45.6 5.32034 45.6 6.00002C45.6 6.67971 45.0797 7.20003 44.4 7.20003H15.6C14.9203 7.20003 14.4 6.67971 14.4 6.00002C14.4 5.32034 14.9203 4.80002 15.6 4.80002ZM9.60002 8.40002C12.2578 8.40002 14.386 10.5235 14.4 13.1766C14.4 13.2 14.4 13.2235 14.4 13.2469C14.4047 13.2797 14.4047 13.3078 14.4047 13.336C14.7235 18.8203 15.5391 24.3657 16.8 29.386C16.7391 29.3203 16.6922 29.2594 16.6313 29.1938C15.2297 27.6844 13.4297 26.0063 11.6532 24.2063C8.09534 20.611 4.80002 16.5047 4.80002 13.2C4.80002 10.5375 6.93752 8.40002 9.60002 8.40002ZM50.4 8.40002C53.0625 8.40002 55.2 10.5375 55.2 13.2C55.2 16.5047 51.9047 20.611 48.3469 24.2063C46.5703 26.0063 44.7703 27.6844 43.3688 29.1938C43.2985 29.2688 43.2422 29.3391 43.1719 29.4188C44.4375 24.4172 45.2672 18.886 45.586 13.4063C45.5953 13.336 45.6 13.2703 45.6 13.2C45.6 10.5375 47.7375 8.40002 50.4 8.40002ZM16.7438 9.60002H43.2563C43.1297 18 41.761 26.9672 39.361 33.8578C38.1094 37.4625 36.5907 40.4953 34.95 42.5438C33.3094 44.5922 31.6407 45.6 29.9578 45.6C28.2703 45.6 26.611 44.5875 24.975 42.5297C23.3438 40.4766 21.8344 37.4344 20.5922 33.8203C18.2156 26.9203 16.8657 17.9532 16.7438 9.60002ZM29.6297 15.6C29.5266 16.275 28.7672 18.4735 25.4391 18.4735V20.836H28.8938V30H32.4V15.6H29.6297ZM32.4 47.5219V50.4H27.6V47.55C28.3547 47.8313 29.1375 48 29.9578 48C30.8063 48 31.6172 47.8219 32.4 47.5219ZM21.6 52.8H26.1985C26.3297 52.8235 26.461 52.8235 26.5875 52.8H33.3985C33.5297 52.8235 33.661 52.8235 33.7875 52.8H38.4C39.9328 52.8 40.9828 53.8641 41.5078 55.2H18.4922C19.0172 53.8641 20.0672 52.8 21.6 52.8Z"
+                                    fill="#47BDFF"
+                                />
+                            </g>
+                            <defs>
+                                <clipPath id="clip0_189_771">
+                                    <rect width="60" height="60" fill="white" />
+                                </clipPath>
+                            </defs>
+                        </svg>
+                    </span>
+                    <a
+                        href="javascript:"
+                        class="relative inline-block py-5 text-2xl font-bold text-secondary transition line-clamp-1 hover:text-primary sm:py-8"
+                    >
+                        Consecutive award winning
+                        <span
+                            class="absolute top-1/2 -translate-y-1/2 text-[64px] font-extrabold text-black/[0.05] ltr:left-0 rtl:right-0 dark:text-white/[0.05]"
+                            >02</span
+                        >
+                    </a>
+                    <p class="text-lg font-medium">Lorem ipsum dolot amet, consectetur adipiscing elit, sed do eiusmod tempor ever since the 1500s.</p>
+                </div>
+                <div>
+                    <span>
+                        <svg class="h-[60px] w-[60px]" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g clip-path="url(#clip0_189_765)">
+                                <path
+                                    d="M55.2 4.80005H4.79998H4.6781H4.56091C3.96091 4.92192 3.59998 5.40005 3.59998 6.00005V54C3.59998 54.7219 4.0781 55.2 4.79998 55.2H55.2C55.9218 55.2 56.4 54.7219 56.4 54V6.00005C56.4 5.27817 55.9218 4.80005 55.2 4.80005ZM5.99998 31.2H20.4V40.8H5.99998V31.2ZM28.8 28.8H14.4V19.2H28.8V28.8ZM22.8 31.2H37.2V40.8H22.8V31.2ZM31.2 28.8V19.2H45.6V28.8H31.2ZM54 28.8H48V19.2H54V28.8ZM39.6 7.20005H54V16.8H39.6V7.20005ZM22.8 7.20005H37.2V16.8H22.8V7.20005ZM5.99998 7.20005H20.4V16.8H5.99998V7.20005ZM5.99998 19.2H12V28.8H5.99998V19.2ZM12 52.8H5.99998V43.2H12V52.8ZM28.8 52.8H14.4V43.2H28.8V52.8ZM45.6 52.8H31.2V43.2H45.6V52.8ZM54 52.8H48V43.2H54V52.8ZM54 40.8H39.6V31.2H54V40.8Z"
+                                    fill="#47BDFF"
+                                />
+                            </g>
+                            <defs>
+                                <clipPath id="clip0_189_765">
+                                    <rect width="60" height="60" fill="white" />
+                                </clipPath>
+                            </defs>
+                        </svg>
+                    </span>
+                    <a
+                        href="javascript:"
+                        class="relative inline-block py-5 text-2xl font-bold text-secondary transition line-clamp-1 hover:text-primary sm:py-8"
+                    >
+                        Heigh quality products
+                        <span
+                            class="absolute top-1/2 -translate-y-1/2 text-[64px] font-extrabold text-black/[0.05] ltr:left-0 rtl:right-0 dark:text-white/[0.05]"
+                            >03</span
+                        >
+                    </a>
+                    <p class="text-lg font-medium">Lorem ipsum dolot amet, consectetur adipiscing elit, sed do eiusmod tempor ever since the 1500s.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-black py-12 dark:bg-gray-dark md:py-[75px]">
+        <div class="container">
+            <div class="flex flex-col items-center justify-between gap-7 text-center sm:flex-row ltr:sm:text-left rtl:sm:text-right">
+                <p class="flex-1 text-2xl font-bold text-white md:text-3xl">An innovative company working with the latest technologies</p>
+                <button type="button" class="btn flex-none rounded-md text-white shadow-[10px_15px_30px_rgba(119,128,161,0.2)]">Get A Quote</button>
+            </div>
+        </div>
+    </section>
+
+    <section class="py-12 lg:py-24">
+        <div class="container">
+            <div class="heading text-center">
+                <h4 class="!font-black">ULTRA <span class="text-secondary">PERFORMANCE</span></h4>
+                <h5 class="mx-auto mt-2 max-w-[507px] !font-medium !text-gray dark:!text-white">
+                    Proin gravida nibh vel velit auctor aliquet aenean sollicitudin, lorem quis bibendum auctor, nisi elit cuat ipsum.
+                </h5>
+            </div>
+            <div class="grid gap-8 lg:grid-cols-2" data-aos="zoom-in-up" data-aos-duration="1000">
+                <div>
+                    <div class="flex items-center justify-between text-black dark:text-white">
+                        <p class="text-xl font-bold">BUILDINGS</p>
+                        <p class="text-xl font-bold">95%</p>
+                    </div>
+                    <div class="relative mt-2.5 h-[15px] rounded-[15px] bg-gray/20">
+                        <div class="absolute h-[15px] rounded-[15px] bg-primary px-40 sm:px-60"></div>
+                    </div>
+                </div>
+                <div>
+                    <div class="flex items-center justify-between text-black dark:text-white">
+                        <p class="text-xl font-bold">ARCHITECTURE</p>
+                        <p class="text-xl font-bold">60%</p>
+                    </div>
+                    <div class="relative mt-2.5 h-[15px] rounded-[15px] bg-gray/20">
+                        <div class="absolute h-[15px] rounded-[15px] bg-primary px-28 sm:px-40"></div>
+                    </div>
+                </div>
+                <div>
+                    <div class="flex items-center justify-between text-black dark:text-white">
+                        <p class="text-xl font-bold">CONSTRUCTIONS</p>
+                        <p class="text-xl font-bold">70%</p>
+                    </div>
+                    <div class="relative mt-2.5 h-[15px] rounded-[15px] bg-gray/20">
+                        <div class="absolute h-[15px] rounded-[15px] bg-primary px-32 sm:px-[180px]"></div>
+                    </div>
+                </div>
+                <div>
+                    <div class="flex items-center justify-between text-black dark:text-white">
+                        <p class="text-xl font-bold">PLANNING</p>
+                        <p class="text-xl font-bold">40%</p>
+                    </div>
+                    <div class="relative mt-2.5 h-[15px] rounded-[15px] bg-gray/20">
+                        <div class="absolute h-[15px] rounded-[15px] bg-primary px-20 sm:px-32"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-white pt-12 dark:bg-gray-dark lg:pt-24">
+        <div class="container">
+            <div class="heading text-center">
+                <h4 class="!font-black">SOME OF <span class="text-primary">OUR ESTEEMED PROJECTS</span></h4>
+                <h6 class="mx-auto mt-2 max-w-[507px] !font-medium !text-gray dark:!text-white">
+                    Proin gravida nibh vel velit auctor aliquet aenean sollicitudin, lorem quis bibendum auctor, nisi elit cuat ipsum.
+                </h6>
+            </div>
+        </div>
+        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
+            <div class="group">
+                <div class="relative overflow-hidden">
+                    <img src="/assets/images/construction/project1.jpg" class="duration-200 group-hover:rotate-2 group-hover:scale-110" alt="" />
+                    <div
+                        class="absolute inset-0 m-auto flex scale-0 items-center justify-center bg-black/60 text-white transition duration-700 group-hover:scale-100"
+                    >
+                        <a
+                            href="javascript:"
+                            class="flex h-[60px] w-[60px] items-center justify-center border border-white text-white"
+                            (click)="open('project1.jpg')"
+                        >
+                            <svg class="h-8 w-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M16 6.66663V25.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                <path d="M6.66667 16H25.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+                <div class="space-y-2.5 p-3 text-center sm:p-5 ltr:sm:text-left rtl:sm:text-right">
+                    <a
+                        href="javascript:"
+                        class="text-lg font-bold text-black duration-200 group-hover:text-secondary dark:text-white dark:group-hover:text-secondary md:text-2xl"
+                        >The Atmosphere</a
+                    >
+                    <p class="text-base font-semibold">Chicago, USA</p>
+                </div>
+            </div>
+            <div class="group">
+                <div class="relative overflow-hidden">
+                    <img src="/assets/images/construction/project2.jpg" class="duration-200 group-hover:rotate-2 group-hover:scale-110" alt="" />
+                    <div
+                        class="absolute inset-0 m-auto flex scale-0 items-center justify-center bg-black/60 text-white transition duration-700 group-hover:scale-100"
+                    >
+                        <a
+                            href="javascript:"
+                            class="flex h-[60px] w-[60px] items-center justify-center border border-white text-white"
+                            (click)="open('project2.jpg')"
+                        >
+                            <svg class="h-8 w-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M16 6.66663V25.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                <path d="M6.66667 16H25.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+                <div class="space-y-2.5 p-3 text-center sm:p-5 ltr:sm:text-left rtl:sm:text-right">
+                    <a
+                        href="javascript:"
+                        class="text-lg font-bold text-black duration-200 group-hover:text-secondary dark:text-white dark:group-hover:text-secondary md:text-2xl"
+                        >Wavelength Structure</a
+                    >
+                    <p class="text-base font-semibold">Madrid, Spain</p>
+                </div>
+            </div>
+            <div class="group">
+                <div class="relative overflow-hidden">
+                    <img src="/assets/images/construction/project3.jpg" class="duration-200 group-hover:rotate-2 group-hover:scale-110" alt="" />
+                    <div
+                        class="absolute inset-0 m-auto flex scale-0 items-center justify-center bg-black/60 text-white transition duration-700 group-hover:scale-100"
+                    >
+                        <a
+                            href="javascript:"
+                            class="flex h-[60px] w-[60px] items-center justify-center border border-white text-white"
+                            (click)="open('project3.jpg')"
+                        >
+                            <svg class="h-8 w-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M16 6.66663V25.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                <path d="M6.66667 16H25.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+                <div class="space-y-2.5 p-3 text-center sm:p-5 ltr:sm:text-left rtl:sm:text-right">
+                    <a
+                        href="javascript:"
+                        class="text-lg font-bold text-black duration-200 group-hover:text-secondary dark:text-white dark:group-hover:text-secondary md:text-2xl"
+                        >Greenhouse Garden</a
+                    >
+                    <p class="text-base font-semibold">Bali, Indonesia</p>
+                </div>
+            </div>
+            <div class="group">
+                <div class="relative overflow-hidden">
+                    <img src="/assets/images/construction/project4.jpg" class="duration-200 group-hover:rotate-2 group-hover:scale-110" alt="" />
+                    <div
+                        class="absolute inset-0 m-auto flex scale-0 items-center justify-center bg-black/60 text-white transition duration-700 group-hover:scale-100"
+                    >
+                        <a
+                            href="javascript:"
+                            class="flex h-[60px] w-[60px] items-center justify-center border border-white text-white"
+                            (click)="open('project4.jpg')"
+                        >
+                            <svg class="h-8 w-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M16 6.66663V25.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                <path d="M6.66667 16H25.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+                <div class="space-y-2.5 p-3 text-center sm:p-5 ltr:sm:text-left rtl:sm:text-right">
+                    <a
+                        href="javascript:"
+                        class="text-lg font-bold text-black duration-200 group-hover:text-secondary dark:text-white dark:group-hover:text-secondary md:text-2xl"
+                        >Industrial Hub</a
+                    >
+                    <p class="text-base font-semibold">Beijing, China</p>
+                </div>
+            </div>
+            <div class="group">
+                <div class="relative overflow-hidden">
+                    <img src="/assets/images/construction/project5.jpg" class="duration-200 group-hover:rotate-2 group-hover:scale-110" alt="" />
+                    <div
+                        class="absolute inset-0 m-auto flex scale-0 items-center justify-center bg-black/60 text-white transition duration-700 group-hover:scale-100"
+                    >
+                        <a
+                            href="javascript:"
+                            class="flex h-[60px] w-[60px] items-center justify-center border border-white text-white"
+                            (click)="open('project5.jpg')"
+                        >
+                            <svg class="h-8 w-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M16 6.66663V25.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                <path d="M6.66667 16H25.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+                <div class="space-y-2.5 p-3 text-center sm:p-5 ltr:sm:text-left rtl:sm:text-right">
+                    <a
+                        href="javascript:"
+                        class="text-lg font-bold text-black duration-200 group-hover:text-secondary dark:text-white dark:group-hover:text-secondary md:text-2xl"
+                        >Corporate Headquarters</a
+                    >
+                    <p class="text-base font-semibold">California, USA</p>
+                </div>
+            </div>
+            <div class="group">
+                <div class="relative overflow-hidden">
+                    <img src="/assets/images/construction/project6.jpg" class="duration-200 group-hover:rotate-2 group-hover:scale-110" alt="" />
+                    <div
+                        class="absolute inset-0 m-auto flex scale-0 items-center justify-center bg-black/60 text-white transition duration-700 group-hover:scale-100"
+                    >
+                        <a
+                            href="javascript:"
+                            class="flex h-[60px] w-[60px] items-center justify-center border border-white text-white"
+                            (click)="open('project6.jpg')"
+                        >
+                            <svg class="h-8 w-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M16 6.66663V25.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                <path d="M6.66667 16H25.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+                <div class="space-y-2.5 p-3 text-center sm:p-5 ltr:sm:text-left rtl:sm:text-right">
+                    <a
+                        href="javascript:"
+                        class="text-lg font-bold text-black duration-200 group-hover:text-secondary dark:text-white dark:group-hover:text-secondary md:text-2xl"
+                        >Space Station</a
+                    >
+                    <p class="text-base font-semibold">Moscow, Russia</p>
+                </div>
+            </div>
+            <div class="group">
+                <div class="relative overflow-hidden">
+                    <img src="/assets/images/construction/project7.jpg" class="duration-200 group-hover:rotate-2 group-hover:scale-110" alt="" />
+                    <div
+                        class="absolute inset-0 m-auto flex scale-0 items-center justify-center bg-black/60 text-white transition duration-700 group-hover:scale-100"
+                    >
+                        <a
+                            href="javascript:"
+                            class="flex h-[60px] w-[60px] items-center justify-center border border-white text-white"
+                            (click)="open('project7.jpg')"
+                        >
+                            <svg class="h-8 w-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M16 6.66663V25.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                <path d="M6.66667 16H25.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+                <div class="space-y-2.5 p-3 text-center sm:p-5 ltr:sm:text-left rtl:sm:text-right">
+                    <a
+                        href="javascript:"
+                        class="text-lg font-bold text-black duration-200 group-hover:text-secondary dark:text-white dark:group-hover:text-secondary md:text-2xl"
+                        >Bent Architecture</a
+                    >
+                    <p class="text-base font-semibold">Melbourne, Australia</p>
+                </div>
+            </div>
+            <div class="group">
+                <div class="relative overflow-hidden">
+                    <img src="/assets/images/construction/project8.jpg" class="duration-200 group-hover:rotate-2 group-hover:scale-110" alt="" />
+                    <div
+                        class="absolute inset-0 m-auto flex scale-0 items-center justify-center bg-black/60 text-white transition duration-700 group-hover:scale-100"
+                    >
+                        <a
+                            href="javascript:"
+                            class="flex h-[60px] w-[60px] items-center justify-center border border-white text-white"
+                            (click)="open('project8.jpg')"
+                        >
+                            <svg class="h-8 w-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M16 6.66663V25.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                <path d="M6.66667 16H25.3333" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+                <div class="space-y-2.5 p-3 text-center sm:p-5 ltr:sm:text-left rtl:sm:text-right">
+                    <a
+                        href="javsacript:"
+                        class="text-lg font-bold text-black duration-200 group-hover:text-secondary dark:text-white dark:group-hover:text-secondary md:text-2xl"
+                        >Lakeview Center</a
+                    >
+                    <p class="text-base font-semibold">Auckland, New Zealand</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="mt-12 bg-black py-[50px] dark:bg-gray-dark lg:mt-24 overflow-hidden">
+        <div class="container">
+            <div class="grid grid-cols-2 justify-between gap-7 text-center sm:grid-cols-4" data-aos="fade-up" data-aos-duration="1000">
+                <div>
+                    <div
+                        class="text-[40px] font-black leading-[50px] text-white"
+                        [countUp]="8350"
+                        [options]="{startVal :0 ,duration: 10,enableScrollSpy:true,scrollSpyOnce : true}"
+                        [reanimateOnClick]="false"
+                    >
+                        {{0}}
+                    </div>
+                    <p class="mt-2 text-lg font-semibold">Hours of Works</p>
+                </div>
+                <div>
+                    <div
+                        class="text-[40px] font-black leading-[50px] text-white"
+                        [countUp]="240"
+                        [options]="{startVal :0 ,duration: 10,enableScrollSpy:true,scrollSpyOnce : true}"
+                        [reanimateOnClick]="false"
+                    >
+                        {{0}}
+                    </div>
+                    <p class="mt-2 text-lg font-semibold">Projects Complete</p>
+                </div>
+                <div>
+                    <div
+                        class="text-[40px] font-black leading-[50px] text-white"
+                        [countUp]="120"
+                        [options]="{startVal :0 ,duration: 10,enableScrollSpy:true,scrollSpyOnce : true}"
+                        [reanimateOnClick]="false"
+                    >
+                        {{0}}
+                    </div>
+                    <p class="mt-2 text-lg font-semibold">Feedback Received</p>
+                </div>
+                <div>
+                    <div
+                        class="text-[40px] font-black leading-[50px] text-white"
+                        [countUp]="20"
+                        [options]="{startVal :0 ,duration: 10,enableScrollSpy:true,scrollSpyOnce : true}"
+                        [reanimateOnClick]="false"
+                    >
+                        {{0}}
+                    </div>
+                    <p class="mt-2 text-lg font-semibold">Awards Winning</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="py-12 lg:py-24">
+        <div class="container">
+            <div class="heading text-center">
+                <h4 class="!font-black">MEET <span class="text-secondary">OUR TEAM</span></h4>
+                <h6 class="mx-auto mt-[18px] max-w-[663px] !font-medium !text-gray dark:!text-white">
+                    Duis sed odio sit amet nibh vulputate cursus a sit amet mauris morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a
+                    ornare odio.
+                </h6>
+            </div>
+        </div>
+        <div class="container relative px-16">
+            <div
+                class="team-swiper-button-prev absolute left-2 top-1/2 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full border-2 border-primary text-primary duration-200 hover:bg-primary hover:text-white cursor-pointer"
+            >
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M10.5892 14.4111L9.41083 15.5895L3.82167 10.0003L9.41083 4.41113L10.5892 5.58947L7.01167 9.16697H15V10.8336H7.01167L10.5892 14.4111Z"
+                        fill="currentcolor"
+                    />
+                </svg>
+            </div>
+            <div
+                class="team-swiper-button-next absolute right-2 top-1/2 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full border-2 border-primary text-primary duration-200 hover:bg-primary hover:text-white cursor-pointer"
+            >
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M9.41083 14.4111L10.5892 15.5895L16.1783 10.0003L10.5892 4.41113L9.41083 5.58947L12.9883 9.16697H5V10.8336H12.9883L9.41083 14.4111Z"
+                        fill="currentcolor"
+                    />
+                </svg>
+            </div>
+            <swiper [config]="config" class="swiper team-member text-center" >
+                <ng-template swiperSlide class="relative">
+                    <div class="overflow-hidden rounded-3xl">
+                        <img src="/assets/images/construction/team1.jpg" class="h-full w-full object-cover" alt="" />
+                    </div>
+                    <h3 class="mt-2 text-xl font-extrabold text-black dark:text-white">Oscar Helman</h3>
+                    <p class="mt-2.5 text-sm font-semibold">Founder & CEO</p>
+                </ng-template>
+                <ng-template swiperSlide class="relative">
+                    <div class="overflow-hidden rounded-3xl">
+                        <img src="/assets/images/construction/team2.jpg" class="h-full w-full object-cover" alt="" />
+                    </div>
+                    <h3 class="mt-2 text-xl font-extrabold text-black dark:text-white">James Hoult</h3>
+                    <p class="mt-2.5 text-sm font-semibold">Founder & CEO'</p>
+                </ng-template>
+                <ng-template swiperSlide class="relative">
+                    <div class="overflow-hidden rounded-3xl">
+                        <img src="/assets/images/construction/team3.jpg" class="h-full w-full object-cover" alt="" />
+                    </div>
+                    <h3 class="mt-2 text-xl font-extrabold text-black dark:text-white">Steve johnson</h3>
+                    <p class="mt-2.5 text-sm font-semibold">Project Manager</p>
+                </ng-template>
+                <ng-template swiperSlide class="relative">
+                    <div class="overflow-hidden rounded-3xl">
+                        <img src="/assets/images/construction/team4.jpg" class="h-full w-full object-cover" alt="" />
+                    </div>
+                    <h3 class="mt-2 text-xl font-extrabold text-black dark:text-white">Amy reacher</h3>
+                    <p class="mt-2.5 text-sm font-semibold">Dentist</p>
+                </ng-template>
+            </swiper>
+        </div>
+    </section>
+
+    <section class="bg-black/[0.05] py-12 dark:bg-gray-dark lg:py-24">
+        <div class="container">
+            <div class="mx-auto lg:w-[730px]">
+                <faq-component type="construction"></faq-component>
+            </div>
+        </div>
+    </section>
+
+    <section class="overflow-hidden py-12 lg:py-24">
+        <div class="container">
+            <div class="heading text-center">
+                <h4 class="!font-black">RECENT <span class="text-secondary">NEWS</span></h4>
+                <h5 class="mt-2 !font-medium !text-gray dark:!text-white">Check out our latest blog posts</h5>
+            </div>
+            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3" data-aos="fade-up" data-aos-duration="1000">
+                <div class="group relative overflow-hidden rounded-xl border-2 border-transparent duration-200 hover:border-secondary">
+                    <a href="javascript:" class="absolute inset-0 h-full w-full"></a>
+                    <img src="/assets/images/construction/news1.jpg" alt="" />
+                    <div class="space-y-[14px] bg-white px-4 py-5 group-hover:bg-secondary/20 dark:bg-gray-dark">
+                        <p class="text-base font-semibold">November 28, 2022</p>
+                        <h5 class="text-xl font-extrabold text-black hover:text-secondary dark:text-white">FUTURE PROOFING HOSPITALS</h5>
+                        <p class="text-base font-medium">Lorem ipsum dolor amet consectetur adipisicing elit eiusm tempor incididunt...</p>
+                    </div>
+                </div>
+                <div class="group relative overflow-hidden rounded-xl border-2 border-transparent duration-200 hover:border-secondary">
+                    <a href="javascript:" class="absolute inset-0 h-full w-full"></a>
+                    <img src="/assets/images/construction/news2.jpg" alt="" />
+                    <div class="space-y-[14px] bg-white p-5 group-hover:bg-secondary/20 dark:bg-gray-dark">
+                        <p class="text-base font-semibold">November 28, 2022</p>
+                        <h5 class="text-xl font-extrabold text-black dark:text-white">BIKE PARTS WAREHOUSE, DE</h5>
+                        <p class="text-base font-medium">Lorem ipsum dolor amet consectetur adipisicing elit eiusm tempor incididunt...</p>
+                    </div>
+                </div>
+                <div class="group relative overflow-hidden rounded-xl border-2 border-transparent duration-200 hover:border-secondary">
+                    <a href="javascript:" class="absolute inset-0 h-full w-full"></a>
+                    <img src="/assets/images/construction/news3.jpg" alt="" />
+                    <div class="space-y-[14px] bg-white p-5 group-hover:bg-secondary/20 dark:bg-gray-dark">
+                        <p class="text-base font-semibold">November 28, 2022</p>
+                        <h5 class="text-xl font-extrabold text-black dark:text-white">JOY HOTEL & CASINO</h5>
+                        <p class="text-base font-medium">Lorem ipsum dolor amet consectetur adipisicing elit eiusm tempor incididunt...</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-black dark:bg-gray-dark py-14 lg:py-[100px] overflow-hidden">
+        <testimonial [feedbacks]="feedbacks"></testimonial>
+    </section>
+</div>

src/app/construction.ts

@@ -0,0 +1,90 @@
+import { Component, Input } from '@angular/core';
+import { Store } from '@ngrx/store';
+import SwiperCore, { SwiperOptions, Navigation, Autoplay } from 'swiper';
+import { Lightbox, LightboxConfig } from 'ngx-lightbox';
+
+// install Swiper modules
+SwiperCore.use([Navigation, Autoplay]);
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './construction.html',
+})
+export class ConstructionComponent {
+    items = [
+        { src: '/assets/images/construction/project1.jpg', thumb: '/assets/images/construction/project1.jpg', },
+        { src: '/assets/images/construction/project2.jpg', thumb: '/assets/images/construction/project2.jpg', },
+        { src: '/assets/images/construction/project3.jpg', thumb: '/assets/images/construction/project3.jpg', },
+        { src: '/assets/images/construction/project4.jpg', thumb: '/assets/images/construction/project4.jpg', },
+        { src: '/assets/images/construction/project5.jpg', thumb: '/assets/images/construction/project5.jpg', },
+        { src: '/assets/images/construction/project6.jpg', thumb: '/assets/images/construction/project6.jpg', },
+        { src: '/assets/images/construction/project7.jpg', thumb: '/assets/images/construction/project7.jpg', },
+        { src: '/assets/images/construction/project8.jpg', thumb: '/assets/images/construction/project8.jpg', },
+    ];
+    constructor(public store: Store<any>, private _lightbox: Lightbox, private _lightboxConfig: LightboxConfig) {
+        this.initStore();
+        _lightboxConfig.enableTransition = false;
+        _lightboxConfig.wrapAround = true;
+        _lightboxConfig.showImageNumberLabel = true;
+        _lightboxConfig.showZoom = true;
+        _lightboxConfig.showRotate = true;
+        _lightboxConfig.albumLabel = '%1 of %2';
+        _lightboxConfig.positionFromTop = 0;
+        _lightboxConfig.disableScrolling = true;
+    }
+    open(img: string): void {
+        // open lightbox
+        const index = this.items.findIndex((d) => d.src.toLowerCase().includes(img.toLowerCase()));
+        this._lightbox.open(this.items, index);
+    }
+
+    storeData: any;
+    activeTab = 'all';
+    config: SwiperOptions = {
+        loop:true,
+        slidesPerView:4,
+        spaceBetween:30,
+        autoplay:{
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        breakpoints:{
+            320: {
+                slidesPerView: 1,
+            },
+            600: {
+                slidesPerView: 2,
+            },
+            1000: {
+                slidesPerView: 3,
+            },
+            1600: {
+                slidesPerView: 4,
+            },
+        },
+        navigation:{
+            nextEl: '.team-swiper-button-next',
+            prevEl: '.team-swiper-button-prev',
+        },
+        modules:[Navigation, Autoplay],
+    };
+
+    @Input() feedbacks: any = [
+        {
+            id: 1,
+            name: 'Jack danver',
+            role: 'Patient of cancer',
+            thumbnail: '/assets/images/testimonial3.png',
+            message:
+                'I had a great experience with doctor ralph Edward. His surgery technique is very good. i satisfied with his team members. Thank you!!',
+        },
+    ];
+
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/consulting.html

@@ -0,0 +1,704 @@
+<div>
+    <section class="bg-[url(/assets/images/consulting/banner-bg.jpg)] bg-cover bg-center bg-no-repeat pt-[82px] text-white lg:pt-[106px]">
+        <div class="container">
+            <div class="flex flex-col gap-7 pt-6 md:flex-row md:gap-0">
+                <div class="space-y-5 pt-24 pb-10 text-center ltr:md:text-left rtl:md:text-right">
+                    <h5 class="text-xl font-bold">We are professionals for</h5>
+                    <h2 class="text-4xl font-black uppercase sm:text-6xl sm:leading-tight">Grow Your <span class="text-secondary">Business!</span></h2>
+                    <p class="text-lg font-semibold">
+                        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
+                    </p>
+                    <div class="flex items-center justify-center gap-5 md:justify-start">
+                        <div class="flex h-[60px] w-[60px] items-center justify-center rounded-full bg-primary/50 duration-200 hover:bg-black">
+                            <img src="/assets/images/consulting/banner-icon1.svg" alt="" />
+                        </div>
+                        <div class="flex h-[60px] w-[60px] items-center justify-center rounded-full bg-primary/50 duration-200 hover:bg-black">
+                            <img src="/assets/images/consulting/banner-icon2.svg" alt="" />
+                        </div>
+                        <a
+                            href="javascript:"
+                            class="flex h-[60px] w-[60px] items-center justify-center rounded-full bg-primary/50 duration-200 hover:bg-black"
+                        >
+                            <img src="/assets/images/consulting/banner-icon3.svg" alt="" />
+                        </a>
+                    </div>
+                    <a routerLink="/contact-us" class="btn rounded-md bg-white">Contact us</a>
+                </div>
+                <div class="mx-auto w-full max-w-[435px]">
+                    <img src="/assets/images/consulting/banner-img.png" data-aos="fade-up" data-aos-duration="1000" alt="" />
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="border-b border-gray/30 py-[50px] dark:bg-black">
+        <logo-slider></logo-slider>
+    </section>
+
+    <section class="py-12 dark:bg-black lg:py-24">
+        <div class="container">
+            <div class="flex flex-col items-center gap-5 lg:flex-row" data-aos="fade-up" data-aos-duration="1000">
+                <div class="flex-none lg:max-w-[130px]">
+                    <div class="grid grid-cols-3 gap-3 sm:gap-5 lg:grid-cols-1">
+                        <div class="rounded-[10px] bg-white py-4 px-6 text-center shadow-[0_0_20px_rgba(0,0,0,0.1)] dark:bg-white/10 sm:py-[19px]">
+                            <span>
+                                <img src="/assets/images/consulting/about-icon1.svg" class="mx-auto" alt="" />
+                            </span>
+                            <p class="text-b mt-2 font-semibold text-black dark:text-white sm:text-xl">Vision</p>
+                        </div>
+                        <div class="rounded-[10px] bg-white py-4 px-6 text-center shadow-[0_0_20px_rgba(0,0,0,0.1)] dark:bg-white/10 sm:py-[19px]">
+                            <span>
+                                <img src="/assets/images/consulting/about-icon2.svg" class="mx-auto" alt="" />
+                            </span>
+                            <p class="mt-2 font-semibold text-black dark:text-white sm:text-xl">Missions</p>
+                        </div>
+                        <div class="rounded-[10px] bg-white py-4 px-6 text-center shadow-[0_0_20px_rgba(0,0,0,0.1)] dark:bg-white/10 sm:py-[19px]">
+                            <span>
+                                <img src="/assets/images/consulting/about-icon3.svg" class="mx-auto" alt="" />
+                            </span>
+                            <p class="mt-2 font-semibold text-black dark:text-white sm:text-xl">Goals</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="grid flex-1 grid-cols-1 items-center gap-10 md:grid-cols-2">
+                    <div>
+                        <img src="/assets/images/consulting/about-img.png" class="mx-auto" alt="" />
+                    </div>
+                    <div class="space-y-4 text-center ltr:md:text-left rtl:md:text-right">
+                        <h3 class="text-3xl font-black uppercase text-black dark:text-white sm:text-[40px] sm:leading-[60px]">
+                            Benefits of <span class="text-secondary">wellbein</span> and positive <span class="text-primary">employee</span>
+                        </h3>
+                        <p class="text-lg font-medium">
+                            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
+                        </p>
+                        <button type="button" class="btn rounded-md text-white shadow-[10px_15px_30px_rgba(119,128,161,0.2)]">Register</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="relative bg-black py-12 dark:bg-white/5 lg:py-24">
+        <div class="absolute bottom-0 ltr:right-0 rtl:left-0">
+            <img src="/assets/images/consulting/bg-icon.svg" class="rtl:rotate-y-180" alt="" />
+        </div>
+        <div class="container relative z-[1]">
+            <div class="heading text-center text-white">
+                <h4 class="mb-2 !font-black uppercase !text-white">What <span class="text-secondary">we do</span></h4>
+                <p class="text-lg">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+            </div>
+            <div class="mt-10 grid grid-cols-1 gap-[30px] sm:grid-cols-2 lg:grid-cols-3" data-aos="flip-left" data-aos-duration="1000">
+                <div class="group">
+                    <div class="overflow-hidden">
+                        <img src="/assets/images/consulting/services1.jpg" class="w-full duration-200 group-hover:rotate-2 group-hover:scale-110" alt="" />
+                    </div>
+                    <div class="relative mx-4 -mt-10 space-y-2.5 bg-gray-dark px-4 pt-[22px] text-center dark:bg-black md:px-[26px]">
+                        <h5 class="text-2xl font-bold text-primary group-hover:text-secondary">Tax Planning</h5>
+                        <div class="mx-auto h-1 w-[50px] bg-secondary duration-200 group-hover:bg-primary"></div>
+                        <p class="pb-[60px] text-lg font-semibold">
+                            It is a long established fact that a reader will be distracted by the readable content.
+                        </p>
+                        <span class="absolute bottom-0 opacity-20 ltr:right-0 rtl:left-0">
+                            <img src="/assets/images/consulting/services-icon1.svg" alt="" />
+                        </span>
+                    </div>
+                </div>
+                <div class="group">
+                    <div class="overflow-hidden">
+                        <img src="/assets/images/consulting/services2.jpg" class="w-full duration-200 group-hover:rotate-2 group-hover:scale-110" alt="" />
+                    </div>
+                    <div class="relative mx-4 -mt-10 space-y-2.5 bg-gray-dark px-4 pt-[22px] text-center dark:bg-black md:px-[26px]">
+                        <h5 class="text-2xl font-bold text-primary group-hover:text-secondary">Business Planning</h5>
+                        <div class="mx-auto h-1 w-[50px] bg-secondary duration-200 group-hover:bg-primary"></div>
+                        <p class="pb-[60px] text-lg font-semibold">
+                            It is a long established fact that a reader will be distracted by the readable content.
+                        </p>
+                        <span class="absolute bottom-0 opacity-20 ltr:right-0 rtl:left-0">
+                            <img src="/assets/images/consulting/services-icon2.svg" alt="" />
+                        </span>
+                    </div>
+                </div>
+                <div class="group">
+                    <div class="overflow-hidden">
+                        <img src="/assets/images/consulting/services3.jpg" class="w-full duration-200 group-hover:rotate-2 group-hover:scale-110" alt="" />
+                    </div>
+                    <div class="relative mx-4 -mt-10 space-y-2.5 bg-gray-dark px-4 pt-[22px] text-center dark:bg-black md:px-[26px]">
+                        <h5 class="text-2xl font-bold text-primary group-hover:text-secondary">Insutance & Family</h5>
+                        <div class="mx-auto h-1 w-[50px] bg-secondary duration-200 group-hover:bg-primary"></div>
+                        <p class="pb-[60px] text-lg font-semibold">
+                            It is a long established fact that a reader will be distracted by the readable content.
+                        </p>
+                        <span class="absolute bottom-0 opacity-20 ltr:right-0 rtl:left-0">
+                            <img src="/assets/images/consulting/services-icon3.svg" alt="" />
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="overflow-hidden py-12 lg:py-24">
+        <div class="container">
+            <div class="heading mb-8 text-center lg:mb-12">
+                <h4 class="!font-black uppercase">Pricing <span class="text-primary">Plan</span></h4>
+                <p class="mt-2 !text-lg !font-medium">Innovative solutions satisfied clients for tax consulting</p>
+            </div>
+            <div class="mb-5 flex justify-center space-x-4 text-center text-base font-semibold rtl:space-x-reverse md:mb-16">
+                <span>Monthly</span>
+                <label class="relative h-6 w-12">
+                    <input
+                        id="custom_switch_checkbox1"
+                        type="checkbox"
+                        class="custom_switch peer absolute top-0 z-10 h-full w-full cursor-pointer opacity-0 ltr:left-0 rtl:right-0"
+                        x-model="yearlyPrice"
+                    />
+                    <span
+                        for="custom_switch_checkbox1"
+                        class="outline_checkbox bg-icon dark:border-white-dark dark:before:bg-white-dark block h-full rounded-full border-2 border-gray before:absolute before:bottom-1 before:h-4 before:w-4 before:rounded-full before:bg-gray before:bg-[url(/assets/images/consulting/close.svg)] before:bg-center before:bg-no-repeat before:transition-all before:duration-300 peer-checked:border-primary peer-checked:before:bg-primary peer-checked:before:bg-[url(/assets/images/consulting/checked.svg)] ltr:before:left-1 ltr:peer-checked:before:left-7 rtl:before:right-1 rtl:peer-checked:before:right-7"
+                    ></span>
+                </label>
+                <span>Yearly</span>
+            </div>
+            <div class="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-0 lg:mt-16 lg:grid-cols-3">
+                <div
+                    class="flex flex-col rounded-l-[4px] border border-gray/30 bg-white p-8 dark:bg-white/[0.05]"
+                    data-aos="fade-up"
+                    data-aos-duration="1000"
+                >
+                    <h5 class="text-xl font-semibold text-black dark:text-white">Premium</h5>
+                    <p class="mt-6 text-sm font-normal">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+                    <h3 class="mt-[38px] text-center text-3xl font-bold text-black dark:text-white">
+                        $25 <span class="text-lg font-normal">/ monthly</span>
+                    </h3>
+                    <p class="mt-[38px] text-[15px] font-bold text-black dark:text-white">Cloud Hosting Features</p>
+                    <ul class="mt-2.5 mb-5 space-y-2.5">
+                        <li>Single Domain</li>
+                        <li>50 GB SSD</li>
+                        <li>1 TB Premium Bandwidth</li>
+                    </ul>
+                    <button type="button" class="mt-auto w-full rounded-md bg-gray py-4 uppercase text-white duration-200 hover:bg-primary">
+                        Get a Free Consulting
+                    </button>
+                </div>
+                <div
+                    class="relative mt-5 flex flex-col border border-gray/30 bg-white p-8 dark:bg-white/[0.05] sm:mt-0 lg:border-x-0 lg:border-y"
+                    data-aos="fade-up"
+                    data-aos-duration="1000"
+                >
+                    <p class="absolute inset-x-0 -top-6 w-full rounded-t-[6px] bg-secondary py-2.5 text-center font-bold text-white">Most Popular</p>
+                    <h5 class="text-xl font-semibold text-black dark:text-white">Plus</h5>
+                    <p class="mt-6 text-sm font-normal">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+                    <h3 class="mt-[38px] text-center text-3xl font-bold text-secondary">
+                        $70 <span class="text-lg font-normal text-black dark:text-white">/ monthly</span>
+                    </h3>
+                    <p class="mt-[38px] text-[15px] font-bold text-black dark:text-white">VPS Hosting Features</p>
+                    <ul class="mt-2.5 mb-5 space-y-2.5">
+                        <li>5 Domains</li>
+                        <li>100 GB SSD</li>
+                        <li>2 TB Premium Bandwidth</li>
+                    </ul>
+                    <button type="button" class="mt-auto w-full rounded-md bg-secondary py-4 uppercase text-white duration-200 hover:bg-primary">
+                        Get a Free Consulting
+                    </button>
+                </div>
+                <div
+                    class="flex flex-col rounded-r-[4px] border border-gray/30 bg-white p-8 dark:bg-white/[0.05]"
+                    data-aos="fade-up"
+                    data-aos-duration="1000"
+                >
+                    <h5 class="text-xl font-semibold text-black dark:text-white">Business</h5>
+                    <p class="mt-6 text-sm font-normal">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+                    <h3 class="mt-[38px] text-center text-3xl font-bold text-black dark:text-white">
+                        $115 <span class="text-lg font-normal">/ monthly</span>
+                    </h3>
+                    <p class="mt-[38px] text-[15px] font-bold text-black dark:text-white">Business Hosting Features</p>
+                    <ul class="mt-2.5 mb-5 space-y-2.5">
+                        <li>Unlimited Domains</li>
+                        <li>1 TB SSD</li>
+                        <li>5 TB Premium Bandwidth</li>
+                    </ul>
+                    <button type="button" class="mt-auto w-full rounded-md bg-gray py-4 uppercase text-white duration-200 hover:bg-primary">
+                        Get a Free Consulting
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="relative bg-black py-14 dark:bg-gray-dark lg:py-[100px]">
+        <div class="absolute bottom-0 ltr:left-0 rtl:right-0">
+            <img src="/assets/images/consulting/bg-icon.svg" class="rotate-y-180 rtl:rotate-0" alt="" />
+        </div>
+        <div class="container">
+            <div class="heading text-center ltr:lg:text-left rtl:lg:text-right">
+                <h6>Testimonial</h6>
+                <h4 class="!text-white">Feedback from our clients</h4>
+            </div>
+            <div class="relative mx-auto lg:w-11/12">
+                <swiper [config]="config"  class="sm:py-12 md:py-0">
+                    <ng-template swiperSlide>
+                        <div class="items-center gap-4 sm:grid sm:grid-cols-3">
+                            <div class="col-span-2">
+                                <div class="relative rounded-3xl bg-gray-dark p-6 dark:bg-black">
+                                    <img
+                                        src="/assets/images/blue-quote.png"
+                                        alt="blue-quote"
+                                        class="absolute top-0 ltr:right-0 rtl:left-0 sm:-top-6 ltr:sm:-right-6 rtl:sm:-left-6"
+                                    />
+                                    <div class="pb-8">
+                                        <svg width="96" height="16" viewBox="0 0 96 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path
+                                                d="M86.2864 2.84744C87.0637 1.5558 88.9363 1.5558 89.7136 2.84744L90.1964 3.64962C90.4756 4.11365 90.9311 4.44459 91.4587 4.56678L92.3708 4.77803C93.8395 5.11816 94.4181 6.8991 93.4299 8.03752L92.8162 8.74454C92.4612 9.15352 92.2872 9.68898 92.334 10.2285L92.4149 11.1613C92.5453 12.6631 91.0303 13.7638 89.6423 13.1757L88.7802 12.8105C88.2815 12.5993 87.7185 12.5993 87.2198 12.8105L86.3577 13.1757C84.9697 13.7638 83.4547 12.6631 83.5851 11.1613L83.666 10.2285C83.7128 9.68899 83.5388 9.15352 83.1838 8.74454L82.5701 8.03752C81.5819 6.89911 82.1605 5.11816 83.6292 4.77803L84.5413 4.56678C85.0689 4.44459 85.5244 4.11365 85.8036 3.64962L86.2864 2.84744Z"
+                                                fill="#7780A1"
+                                            />
+                                            <path
+                                                d="M66.2864 2.84744C67.0637 1.5558 68.9363 1.5558 69.7136 2.84744L70.1964 3.64962C70.4756 4.11365 70.9311 4.44459 71.4587 4.56678L72.3708 4.77803C73.8395 5.11816 74.4181 6.8991 73.4299 8.03752L72.8162 8.74454C72.4612 9.15352 72.2872 9.68898 72.334 10.2285L72.4149 11.1613C72.5453 12.6631 71.0303 13.7638 69.6423 13.1757L68.7802 12.8105C68.2815 12.5993 67.7185 12.5993 67.2198 12.8105L66.3577 13.1757C64.9697 13.7638 63.4547 12.6631 63.5851 11.1613L63.666 10.2285C63.7128 9.68899 63.5388 9.15352 63.1838 8.74454L62.5701 8.03752C61.5819 6.89911 62.1605 5.11816 63.6292 4.77803L64.5413 4.56678C65.0689 4.44459 65.5244 4.11365 65.8036 3.64962L66.2864 2.84744Z"
+                                                fill="#FFBD11"
+                                            />
+                                            <path
+                                                d="M46.2864 2.84744C47.0637 1.5558 48.9363 1.5558 49.7136 2.84744L50.1964 3.64962C50.4756 4.11365 50.9311 4.44459 51.4587 4.56678L52.3708 4.77803C53.8395 5.11816 54.4181 6.8991 53.4299 8.03752L52.8162 8.74454C52.4612 9.15352 52.2872 9.68898 52.334 10.2285L52.4149 11.1613C52.5453 12.6631 51.0303 13.7638 49.6423 13.1757L48.7802 12.8105C48.2815 12.5993 47.7185 12.5993 47.2198 12.8105L46.3577 13.1757C44.9697 13.7638 43.4547 12.6631 43.5851 11.1613L43.666 10.2285C43.7128 9.68899 43.5388 9.15352 43.1838 8.74454L42.5701 8.03752C41.5819 6.89911 42.1605 5.11816 43.6292 4.77803L44.5413 4.56678C45.0689 4.44459 45.5244 4.11365 45.8036 3.64962L46.2864 2.84744Z"
+                                                fill="#FFBD11"
+                                            />
+                                            <path
+                                                d="M26.2864 2.84744C27.0637 1.5558 28.9363 1.5558 29.7136 2.84744L30.1964 3.64962C30.4756 4.11365 30.9311 4.44459 31.4587 4.56678L32.3708 4.77803C33.8395 5.11816 34.4181 6.8991 33.4299 8.03752L32.8162 8.74454C32.4612 9.15352 32.2872 9.68898 32.334 10.2285L32.4149 11.1613C32.5453 12.6631 31.0303 13.7638 29.6423 13.1757L28.7802 12.8105C28.2815 12.5993 27.7185 12.5993 27.2198 12.8105L26.3577 13.1757C24.9697 13.7638 23.4547 12.6631 23.5851 11.1613L23.666 10.2285C23.7128 9.68899 23.5388 9.15352 23.1838 8.74454L22.5701 8.03752C21.5819 6.89911 22.1605 5.11816 23.6292 4.77803L24.5413 4.56678C25.0689 4.44459 25.5244 4.11365 25.8036 3.64962L26.2864 2.84744Z"
+                                                fill="#FFBD11"
+                                            />
+                                            <path
+                                                d="M6.28638 2.84744C7.0637 1.5558 8.9363 1.5558 9.71362 2.84744L10.1964 3.64962C10.4756 4.11365 10.9311 4.44459 11.4587 4.56678L12.3708 4.77803C13.8395 5.11816 14.4181 6.8991 13.4299 8.03752L12.8162 8.74454C12.4612 9.15352 12.2872 9.68898 12.334 10.2285L12.4149 11.1613C12.5453 12.6631 11.0303 13.7638 9.64225 13.1757L8.78018 12.8105C8.28151 12.5993 7.71849 12.5993 7.21982 12.8105L6.35775 13.1757C4.96968 13.7638 3.45472 12.6631 3.58506 11.1613L3.66601 10.2285C3.71283 9.68899 3.53885 9.15352 3.18383 8.74454L2.57009 8.03752C1.58187 6.89911 2.16054 5.11816 3.62916 4.77803L4.54126 4.56678C5.06887 4.44459 5.52437 4.11365 5.80362 3.64962L6.28638 2.84744Z"
+                                                fill="#FFBD11"
+                                            />
+                                        </svg>
+                                    </div>
+                                    <p class="relative font-medium italic text-white">
+                                        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.
+                                        <span class="absolute -left-2 -top-2">
+                                            <svg width="100" height="73" viewBox="0 0 100 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                <g opacity="0.05">
+                                                    <path
+                                                        d="M79.5222 0C85.1084 0 89.8948 2.12795 93.8833 6.1167C98.1392 10.1054 100 14.8935 100 20.2128C100 25.2666 98.4045 29.7875 94.9462 33.7764C91.4881 38.0323 85.9039 38.8302 81.3825 39.0952C82.1803 45.7443 85.9037 52.6589 89.3619 57.4472C89.8944 58.245 90.425 59.0427 91.2246 59.5752C92.2876 60.6382 92.2876 62.2356 91.2246 63.2986L83.5126 71.543C82.4495 72.8732 80.3216 72.606 79.2567 71.543C76.0657 68.0849 72.8731 63.831 70.2144 59.5751C62.7675 47.6072 59.044 35.6393 59.044 23.669C59.044 16.7544 61.1719 10.9032 65.1606 6.64734C69.1493 2.39334 74.2029 0.000144939 79.5217 0.000144939L79.5222 0Z"
+                                                        fill="#93A2B2"
+                                                    />
+                                                    <path
+                                                        d="M20.4783 0C26.0645 0 30.8509 2.12795 34.8394 6.1167C39.0952 10.1054 40.9561 14.8935 40.9561 20.2128C40.9561 25.2666 39.3606 29.7875 35.9023 33.7764C32.4442 38.0323 26.86 38.8302 22.3386 39.0952C23.1363 45.7443 26.8597 52.6589 30.318 57.4472C30.8504 58.245 31.381 59.0427 32.1806 59.5752C33.2437 60.6382 33.2437 62.2356 32.1806 63.2986L24.4686 71.543C23.4056 72.8732 21.2776 72.606 20.2128 71.543C17.0218 68.0849 13.8292 63.831 11.1705 59.5751C3.72351 47.6072 7.62939e-06 35.6393 7.62939e-06 23.669C7.62939e-06 16.7544 2.12797 10.9032 6.11671 6.64734C10.1054 2.39334 14.8921 0.000144939 20.4778 0.000144939L20.4783 0Z"
+                                                        fill="#93A2B2"
+                                                    />
+                                                </g>
+                                            </svg>
+                                        </span>
+                                    </p>
+                                    <div class="mt-12">
+                                        <h5 class="font-extrabold text-primary">Allan Branch</h5>
+                                        <h6 class="text-sm font-bold italic">CEO of Lifted</h6>
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                class="mx-auto mt-4 h-20 w-20 max-w-[255px] overflow-hidden rounded-full bg-white ltr:ml-auto rtl:mr-auto dark:bg-gray-dark sm:mt-0 sm:h-auto sm:w-auto sm:rounded-[150px] ltr:sm:mr-0 rtl:sm:ml-0"
+                            >
+                                <img src="/assets/images/testimonial.png" alt="testimonial" class="h-full w-full object-cover object-top" />
+                            </div>
+                        </div>
+                    </ng-template>
+                </swiper>
+                <div class="bottom-0 z-[1] mt-5 flex items-center justify-center gap-4 ltr:right-1/3 rtl:left-1/3 sm:absolute sm:mt-0 sm:justify-end">
+                    <a href="javascript:" class="text-sm font-extrabold text-white transition hover:text-secondary dark:hover:text-secondary">View All</a>
+                    <button
+                        type="button"
+                        class="testimonial-swiper-button-prev static mt-0 flex h-10 w-10 items-center justify-center rounded-full bg-white/[0.04] transition after:text-[0px] hover:bg-secondary rtl:rotate-180"
+                    >
+                        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M5.95007 1.2002L1.48924 5.3424C1.06317 5.73803 1.06317 6.41236 1.48924 6.80799L5.95007 10.9502"
+                                stroke="white"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                            />
+                        </svg>
+                    </button>
+                    <button
+                        type="button"
+                        class="testimonial-swiper-button-next static mt-0 flex h-10 w-10 items-center justify-center rounded-full bg-white/[0.04] transition after:text-[0px] hover:bg-secondary rtl:rotate-180"
+                    >
+                        <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M1.05005 10.7998L5.51089 6.6576C5.93695 6.26197 5.93695 5.58764 5.51089 5.19201L1.05005 1.0498"
+                                stroke="white"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                            />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="py-12 lg:py-24">
+        <div class="container">
+            <div class="heading text-center">
+                <h4 class="!font-black uppercase">Most Asked <span class="text-secondary">Questions</span></h4>
+                <h6 class="mx-auto mt-2 max-w-[520px] !font-medium !text-gray">
+                    Lorem Ipsum Dolor Sit Amet Consectetur Adipisicing Elit. Sunt, Architecto Cupiditate Odio Rerum Est
+                </h6>
+            </div>
+            <div class="flex flex-col items-center gap-5 sm:gap-10 lg:flex-row">
+                <div class="w-full max-w-[552px] flex-none">
+                    <img src="/assets/images/consulting/question-img.png" class="rtl:rotate-y-180" alt="" />
+                </div>
+                <div class="accordion-container flex-1">
+                    <ng-template ngFor let-faq [ngForOf]="queries" let-i="index">
+                        <div class="accordion mt-6 bg-transparent">
+                            <button
+                                type="button"
+                                class="relative flex w-full items-center justify-between gap-2 !bg-gray/30 px-5 py-2.5 !font-mulish text-lg font-bold text-black ltr:text-left rtl:text-right dark:!text-white sm:text-xl"
+                                (click)="toggleAccordion($event,i+1)"
+                            >
+                                <div>{{faq.question}}</div>
+                                <div
+                                    class="grid h-6 w-6 place-content-center rounded-full border-2 border-gray text-black transition dark:text-white"
+                                    [ngClass]="{ '!border-black !text-black dark:!border-white dark:!text-white': index === i+1 }"
+                                >
+                                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            *ngIf="index !== i+1"
+                                            d="M6.09961 0.500977C6.65189 0.500977 7.09961 0.948692 7.09961 1.50098L7.09961 10.501C7.09961 11.0533 6.65189 11.501 6.09961 11.501H5.89961C5.34732 11.501 4.89961 11.0533 4.89961 10.501L4.89961 1.50098C4.89961 0.948692 5.34732 0.500977 5.89961 0.500977H6.09961Z"
+                                            fill="currentColor"
+                                        />
+                                        <path
+                                            d="M0.5 5.90039C0.5 5.34811 0.947715 4.90039 1.5 4.90039H10.5C11.0523 4.90039 11.5 5.34811 11.5 5.90039V6.10039C11.5 6.65268 11.0523 7.10039 10.5 7.10039H1.5C0.947715 7.10039 0.5 6.65268 0.5 6.10039V5.90039Z"
+                                            fill="currentColor"
+                                        />
+                                    </svg>
+                                </div>
+                            </button>
+                            <div class="accordion-content">
+                                <div class="bg-white p-5 font-mulish text-base font-medium text-gray dark:bg-white/5">
+                                    <p>{{faq.answer}}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </ng-template>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-black bg-[url(/assets/images/consulting/business-img.png)] bg-cover bg-center bg-no-repeat py-12 lg:py-24">
+        <div class="container">
+            <div class="grid grid-cols-1 gap-12 text-center lg:grid-cols-2 lg:gap-20 ltr:lg:text-left rtl:lg:text-right">
+                <div>
+                    <h3 class="text-3xl font-black uppercase text-white sm:text-[40px] sm:leading-[50px]">
+                        We Help <span class="text-primary">Growing Business</span>
+                    </h3>
+                    <p class="mt-[18px] text-lg">
+                        We help managing asset, provide financial advise. leave money issue with us and focus on your core business.
+                    </p>
+                    <div class="mt-[18px] flex justify-center gap-6 lg:justify-start">
+                        <div>
+                            <a
+                                routerLink="/contact-us"
+                                class="btn rounded-md bg-secondary text-white shadow-[10px_15px_30px_rgba(199,128,161,0.2)] hover:bg-primary"
+                                >Contact us</a>
+                        </div>
+                        <button type="button" class="group flex items-center gap-2.5" (click)="modal?.open()">
+                            <span>
+                                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M15 27.5C21.9036 27.5 27.5 21.9036 27.5 15C27.5 8.09644 21.9036 2.5 15 2.5"
+                                        stroke="#47BDFF"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                    />
+                                    <path
+                                        d="M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5"
+                                        stroke="#47BDFF"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                        stroke-dasharray="4 3"
+                                    />
+                                    <path
+                                        d="M17.3595 12.4185C18.7032 13.5146 19.375 14.0626 19.375 15C19.375 15.9374 18.7032 16.4854 17.3595 17.5815C16.9886 17.8841 16.6207 18.169 16.2826 18.4064C15.9861 18.6146 15.6502 18.83 15.3024 19.0415C13.9619 19.8567 13.2917 20.2643 12.6905 19.813C12.0894 19.3617 12.0347 18.4171 11.9255 16.5277C11.8946 15.9934 11.875 15.4696 11.875 15C11.875 14.5304 11.8946 14.0066 11.9255 13.4723C12.0347 11.5829 12.0894 10.6383 12.6905 10.187C13.2917 9.73574 13.9619 10.1433 15.3024 10.9585C15.6502 11.17 15.9861 11.3854 16.2826 11.5936C16.6207 11.831 16.9886 12.1159 17.3595 12.4185Z"
+                                        stroke="#47BDFF"
+                                        stroke-width="2"
+                                    />
+                                </svg>
+                            </span>
+                            <span class="uppercase text-white duration-200 group-hover:text-primary">Watch Videos</span>
+                        </button>
+                    </div>
+                </div>
+                <div class="grid grid-cols-2 items-center gap-3 sm:gap-7" data-aos="flip-left" data-aos-duration="1000">
+                    <div class="border border-transparent bg-gray/20 py-10 px-5 text-center duration-200 hover:border-secondary sm:py-[52px]">
+                        <div
+                            class="text-[34px] font-black text-white"
+                            [countUp]="100"
+                            [options]="{startVal :0 ,duration: 10,suffix: '+',enableScrollSpy:true,scrollSpyOnce : true}"
+                            [reanimateOnClick]="false"
+                        >
+                            {{0}}
+                        </div>
+                        <p class="mt-2.5 font-bold">Satisfied customers</p>
+                    </div>
+                    <div class="border border-transparent bg-gray/20 py-10 px-5 text-center duration-200 hover:border-secondary sm:py-[52px]">
+                        <div
+                            class="text-[34px] font-black text-white"
+                            [countUp]="12"
+                            [options]="{startVal :0 ,duration: 10,suffix: '+',enableScrollSpy:true,scrollSpyOnce : true}"
+                            [reanimateOnClick]="false"
+                        >
+                            {{0}}
+                        </div>
+                        <p class="mt-2.5 font-bold">Years project experince</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <modal-dialog
+        #modal
+        contentClass="pt-8 px-0 pb-0 !bg-transparent"
+        width="960"
+        [closeBtn]="true"
+        [closeBtnClass]="'!top-0 ltr:!right-0 rtl:!right-auto rtl:!left-0 !text-white !text-3xl'"
+    >
+        <div class="bg-black !p-4 dark:bg-gray-dark">
+            <div class="relative">
+                <div class="aspect-video">
+                    <iframe
+                        class="absolute top-0 left-0 h-full w-full"
+                        src="https://www.youtube.com/embed/D0UnqGm_miA"
+                        frameborder="0"
+                        allowfullscreen
+                        allow="autoplay"
+                    ></iframe>
+                </div>
+            </div>
+        </div>
+    </modal-dialog>
+
+    <section class="overflow-hidden py-12 dark:bg-black lg:py-24">
+        <div class="container">
+            <div class="heading mb-10 text-center">
+                <h4 class="!font-black uppercase">Knowledge <span class="text-secondary">Center</span></h4>
+                <h6 class="mt-2 !font-medium !text-gray">Lorem ipsum dolor amet consectetur adipisicing elit eiusm tempor incididunt...</h6>
+            </div>
+            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+                <div class="group rounded-xl border-2 border-transparent duration-200 hover:border-secondary" data-aos="fade-up" data-aos-duration="1000">
+                    <div class="overflow-hidden rounded-t-xl">
+                        <img src="/assets/images/consulting/knowledge1.jpg" class="rtl:rotate-y-180" alt="" />
+                    </div>
+                    <div class="overflow-hidden rounded-b-xl bg-white px-5 group-hover:bg-secondary/20 dark:bg-white/10">
+                        <h5 class="pt-[14px] text-lg font-extrabold text-black dark:text-white">
+                            Shifting Toward Innovation: How CIOs Can Accelerate Enterprise Success
+                        </h5>
+                        <p class="mt-[14px] pb-5 text-base">
+                            The CIO has always played an important role in businesses successes. Today, with a digital transformation
+                        </p>
+                    </div>
+                </div>
+                <div class="group rounded-xl border-2 border-transparent duration-200 hover:border-secondary" data-aos="fade-up" data-aos-duration="1000">
+                    <div class="overflow-hidden rounded-t-xl">
+                        <img src="/assets/images/consulting/knowledge2.jpg" class="rtl:rotate-y-180" alt="" />
+                    </div>
+                    <div class="overflow-hidden rounded-b-xl bg-white px-5 group-hover:bg-secondary/20 dark:bg-white/10">
+                        <h5 class="pt-[14px] text-lg font-extrabold text-black dark:text-white">Digital Transformation Success: 3 Things to Consider</h5>
+                        <p class="mt-10 pb-5 text-base">
+                            New innovations are emerging each day and challenging businesses in industries across the globe to adopt
+                        </p>
+                    </div>
+                </div>
+                <div class="group rounded-xl border-2 border-transparent duration-200 hover:border-secondary" data-aos="fade-up" data-aos-duration="1000">
+                    <div class="overflow-hidden rounded-t-xl">
+                        <img src="/assets/images/consulting/knowledge3.jpg" class="rtl:rotate-y-180" alt="" />
+                    </div>
+                    <div class="overflow-hidden rounded-b-xl bg-white px-5 group-hover:bg-secondary/20 dark:bg-white/10">
+                        <h5 class="pt-[14px] text-lg font-extrabold text-black dark:text-white">Top IT Predictions for CIOs in the New Decade</h5>
+                        <p class="mt-10 pb-5 text-base">As we just stepped into a new decade, many enterprises are taking time to look back</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-gradient-to-t from-transparent to-white py-14 dark:bg-gray-dark dark:to-transparent lg:py-[100px]">
+        <div class="container">
+            <div class="relative z-10 lg:flex">
+                <div class="heading text-center lg:mb-0 lg:w-1/3 ltr:lg:pr-10 ltr:lg:text-left rtl:lg:pl-10 rtl:lg:text-right">
+                    <h6>Get In Touch.</h6>
+                    <h4 class="mb-6 sm:!leading-[50px]">Ready to Get Started?</h4>
+                    <img
+                        src="/assets/images/form-light-img.svg"
+                        alt="form-img"
+                        class="mx-auto block dark:hidden"
+                        data-aos="fade-right"
+                        data-aos-duration="1000"
+                    />
+                    <img
+                        src="/assets/images/form-dark-img.svg"
+                        alt="form-img"
+                        class="mx-auto hidden dark:block"
+                        data-aos="fade-right"
+                        data-aos-duration="1000"
+                    />
+                </div>
+                <form action="" class="rounded-3xl bg-white px-4 py-12 dark:bg-[#101626] lg:w-2/3 lg:px-8">
+                    <div class="grid gap-10 sm:grid-cols-2">
+                        <div class="relative">
+                            <input
+                                type="text"
+                                name="name"
+                                class="w-full rounded-2xl border-2 border-gray/20 bg-transparent p-4 font-bold outline-none transition focus:border-secondary ltr:pr-12 rtl:pl-12"
+                            />
+                            <label for="" class="absolute -top-3 bg-white px-2 font-bold ltr:left-6 rtl:right-6 dark:bg-[#101626] dark:text-white"
+                                >Full Name</label
+                            >
+                            <svg
+                                width="20"
+                                height="22"
+                                viewBox="0 0 20 22"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 dark:text-white"
+                            >
+                                <path
+                                    d="M5.42855 5.57875C5.42855 8.10348 7.47525 10.1502 9.99998 10.1502C12.5247 10.1502 14.5714 8.10348 14.5714 5.57875C14.5714 3.05402 12.5247 1.00732 9.99998 1.00732"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M2 16.9328C2 15.9495 2.61812 15.0724 3.5441 14.7417V14.7417C7.71891 13.2507 12.2811 13.2507 16.4559 14.7417V14.7417C17.3819 15.0724 18 15.9495 18 16.9328V18.7014C18 19.9185 16.922 20.8535 15.7172 20.6813L13.8184 20.4101C11.2856 20.0483 8.71435 20.0483 6.18162 20.4101L4.28284 20.6813C3.07798 20.8535 2 19.9185 2 18.7014V16.9328Z"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                />
+                            </svg>
+                        </div>
+                        <div class="relative">
+                            <input
+                                type="email"
+                                name="email"
+                                class="w-full rounded-2xl border-2 border-gray/20 bg-transparent p-4 font-bold outline-none transition focus:border-secondary ltr:pr-12 rtl:pl-12"
+                            />
+                            <label for="" class="absolute -top-3 bg-white px-2 font-bold ltr:left-6 rtl:right-6 dark:bg-[#101626] dark:text-white"
+                                >Email Address</label
+                            >
+                            <svg
+                                width="22"
+                                height="21"
+                                viewBox="0 0 22 21"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 dark:text-white"
+                            >
+                                <path
+                                    d="M1 8.00732V7.00732C1 4.2459 3.23858 2.00732 6 2.00732H16C18.7614 2.00732 21 4.2459 21 7.00732V13.0073C21 15.7687 18.7614 18.0073 16 18.0073H6C3.23858 18.0073 1 15.7687 1 13.0073V12.0073"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M5 7.00732L9.8 10.6073C10.5111 11.1407 11.4889 11.1407 12.2 10.6073L17 7.00732"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                        </div>
+                        <div class="relative">
+                            <input
+                                type="text"
+                                name="mobile"
+                                class="w-full rounded-2xl border-2 border-gray/20 bg-transparent p-4 font-bold outline-none transition focus:border-secondary ltr:pr-12 rtl:pl-12"
+                            />
+                            <label for="" class="absolute -top-3 bg-white px-2 font-bold ltr:left-6 rtl:right-6 dark:bg-[#101626] dark:text-white"
+                                >Mobile Number</label
+                            >
+                            <svg
+                                width="22"
+                                height="22"
+                                viewBox="0 0 22 22"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 dark:text-white"
+                            >
+                                <path
+                                    d="M6.45241 1.40806C5.45292 0.783702 4.14202 0.887138 3.2983 1.73086L1.86856 3.1606C-0.302899 5.33207 1.73747 10.8931 6.42586 15.5815C11.1142 20.2699 16.6753 22.3102 18.8467 20.1388L20.2765 18.709C21.2635 17.722 21.2374 16.0956 20.2182 15.0764L18.0036 12.8619C16.9844 11.8426 15.358 11.8165 14.371 12.8036L14.0639 13.1107C13.531 13.6436 12.6713 13.6957 12.0713 13.2005C11.4925 12.7229 10.9159 12.208 10.3576 11.6497C9.79933 11.0914 9.28441 10.5149 8.80678 9.93607C8.31161 9.33601 8.36374 8.47631 8.89666 7.9434L9.20375 7.63631C9.98187 6.85819 10.1303 5.68271 9.65898 4.72062"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                />
+                            </svg>
+                        </div>
+                        <div class="relative">
+                            <input
+                                type="text"
+                                name="city"
+                                class="w-full rounded-2xl border-2 border-gray/20 bg-transparent p-4 font-bold outline-none transition focus:border-secondary ltr:pr-12 rtl:pl-12"
+                            />
+                            <label for="" class="absolute -top-3 bg-white px-2 font-bold ltr:left-6 rtl:right-6 dark:bg-[#101626] dark:text-white"
+                                >City</label
+                            >
+                            <svg
+                                width="20"
+                                height="22"
+                                viewBox="0 0 20 22"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 dark:text-white"
+                            >
+                                <path
+                                    d="M5.89416 2.31259C7.20149 1.48625 8.75475 1.00732 10.4211 1.00732C15.0719 1.00732 18.8421 4.73828 18.8421 9.34066C18.8421 15.0541 12.1053 21.0073 10.4211 21.0073C8.73684 21.0073 2 15.0541 2 9.34066C2 7.87581 2.38193 6.49924 3.05263 5.30315"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M13.4571 9.77392C13.5365 9.49702 13.579 9.20456 13.579 8.90216C13.579 7.15811 12.1651 5.74427 10.4211 5.74427C8.67702 5.74427 7.26318 7.15811 7.26318 8.90216C7.26318 10.6462 8.67702 12.0601 10.4211 12.0601C10.6633 12.0601 10.8991 12.0328 11.1256 11.9812"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                />
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="relative mt-10">
+                        <input
+                            type="text"
+                            name="message"
+                            class="w-full rounded-2xl border-2 border-gray/20 bg-transparent p-4 font-bold outline-none transition focus:border-secondary ltr:pr-12 rtl:pl-12"
+                        />
+                        <label for="" class="absolute -top-3 bg-white px-2 font-bold ltr:left-6 rtl:right-6 dark:bg-[#101626] dark:text-white"
+                            >Message</label
+                        >
+                        <svg
+                            width="22"
+                            height="22"
+                            viewBox="0 0 22 22"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 dark:text-white"
+                        >
+                            <path
+                                d="M1 11.467V18.9267C1 19.7652 1.96993 20.2314 2.6247 19.7076L5.45217 17.4456C5.8068 17.1619 6.24742 17.0073 6.70156 17.0073H16C18.7614 17.0073 21 14.7687 21 12.0073V6.00732C21 3.2459 18.7614 1.00732 16 1.00732H6C3.23858 1.00732 1 3.2459 1 6.00732V7.62225"
+                                stroke="currentColor"
+                                stroke-width="1.8"
+                                stroke-linecap="round"
+                            />
+                            <circle cx="6.05005" cy="9.05713" r="1.25" fill="currentColor" />
+                            <circle cx="11.05" cy="9.05713" r="1.25" fill="currentColor" />
+                            <circle cx="16.05" cy="9.05713" r="1.25" fill="currentColor" />
+                        </svg>
+                    </div>
+                    <div class="mt-10 text-center ltr:lg:text-right rtl:lg:text-left">
+                        <button type="button" class="btn bg-gray px-12 capitalize text-white dark:bg-white dark:text-black dark:hover:bg-secondary">
+                            Send Message
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </section>
+</div>

src/app/consulting.ts

@@ -0,0 +1,96 @@
+import { Component, Input } from '@angular/core';
+import SwiperCore, { SwiperOptions, Navigation, Autoplay } from 'swiper';
+import { Store } from '@ngrx/store';
+
+// install Swiper modules
+SwiperCore.use([Navigation, Autoplay]);
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './consulting.html',
+})
+export class ConsultingComponent {
+    storeData: any;
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+
+    config: SwiperOptions = {
+        loop:true,
+        slidesPerView: 1,
+        spaceBetween: 30,
+        speed: 1000,
+        autoplay:{
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        navigation: {
+            nextEl: '.testimonial-swiper-button-next',
+            prevEl: '.testimonial-swiper-button-prev',
+        },
+        modules: [Navigation, Autoplay],
+    };
+
+    @Input() showTitle: boolean = true;
+    @Input() queries: any = [
+        {
+            id: 1,
+            question: 'Are your service easy to use?',
+            answer: 'mhmd, Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table.',
+        },
+        {
+            id: 2,
+            question: 'Will i receive future updates?',
+            answer: 'mhmd, Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.',
+        },
+        {
+            id: 3,
+            question: 'Is this services work in my country?',
+            answer: ' mhmd, Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.',
+        },
+        {
+            id: 4,
+            question: 'How much I will pay?',
+            answer: 'mhmd, Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod',
+        },
+    ];
+    @Input() type: string = 'faq';
+
+    index: number = 0;
+    ngOnInit() {
+        setTimeout(() => {
+            const ele = document.querySelectorAll<HTMLElement>('.accordion button');
+            if (ele.length) {
+                ele[0].click();
+            }
+        });
+    }
+    toggleAccordion(event: any, i: number) {
+        const isOpen = this.index === i;
+        const ele = document.querySelectorAll<HTMLElement>('.accordion-content');
+        for (let i = 0; i < ele.length; i++) {
+            ele[i].style.maxHeight = '';
+        }
+
+        const element = event.currentTarget;
+        element.classList.toggle('active');
+        const panel = element.nextElementSibling;
+        if (panel) {
+            if (isOpen) {
+                this.index = 0;
+                panel.style.maxHeight = '';
+            } else {
+                this.index = i;
+                panel.style.maxHeight = panel.scrollHeight + 'px';
+            }
+        }
+    }
+
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/contact-us.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './contact-us.html',
+})
+export class ContactUsComponent {
+    storeData: any;
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/creative-agency.html

@@ -0,0 +1,549 @@
+<div>
+    <div class="h-20 bg-black lg:h-[104px]"></div>
+    <section class="bg-white bg-[url(/assets/images/creative/banner-img.png)] bg-bottom bg-no-repeat rtl:rotate-y-180 dark:bg-black">
+        <div class="py-24 dark:bg-gradient-to-r dark:from-[#B476E5]/10 dark:to-[#47BDFF]/10 lg:py-40">
+            <div class="container">
+                <div class="mx-auto max-w-[1028px] text-center rtl:rotate-y-180">
+                    <h2 class="text-4xl font-black text-black dark:text-white sm:text-6xl lg:text-[100px] lg:leading-[125px]">
+                        One <span class="text-color">brilliant</span> idea can change your life.
+                    </h2>
+                    <p class="mt-5 text-lg font-bold">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
+                    <div class="mt-8 flex justify-center gap-2.5">
+                        <div>
+                            <img src="/assets/images/creative/avatar-1.svg" alt="" />
+                        </div>
+                        <div>
+                            <img src="/assets/images/creative/avatar-2.svg" alt="" />
+                        </div>
+                        <div>
+                            <img src="/assets/images/creative/avatar-3.svg" alt="" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-gray py-[50px] text-center dark:bg-gray-dark">
+        <swiper [config]="config">
+            <ng-template swiperSlide>
+                <h5 class="inline-block text-[22px] font-extrabold text-white">BRANDING</h5>
+            </ng-template>
+            <ng-template swiperSlide>
+                <h5 class="inline-block text-[22px] font-extrabold text-white">TYPHOGRAPHY</h5>
+            </ng-template>
+            <ng-template swiperSlide>
+                <h5 class="inline-block text-[22px] font-extrabold text-white">AGENCY</h5>
+            </ng-template>
+            <ng-template swiperSlide>
+                <h5 class="inline-block text-[22px] font-extrabold text-white">DESIGN</h5>
+            </ng-template>
+            <ng-template swiperSlide>
+                <h5 class="inline-block text-[22px] font-extrabold text-white">INTERACTION</h5>
+            </ng-template>
+            <ng-template swiperSlide>
+                <h5 class="inline-block text-[22px] font-extrabold text-white">INNOVATION</h5>
+            </ng-template>
+            <ng-template swiperSlide>
+                <h5 class="inline-block text-[22px] font-extrabold text-white">ELEMENT</h5>
+            </ng-template>
+            <ng-template swiperSlide>
+                <h5 class="inline-block text-[22px] font-extrabold text-white">DIGITAL SOLUTION</h5>
+            </ng-template>
+        </swiper>
+    </section>
+
+    <section class="bg-black bg-[url(/assets/images/creative/Line.png)] py-12 lg:py-20">
+        <div class="container">
+            <div class="grid grid-cols-1 items-center gap-8 lg:grid-cols-2">
+                <div>
+                    <div class="inline-flex items-center gap-2.5 bg-white p-2.5">
+                        <span>
+                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M4.09106 0.922891C4.26412 0.0268889 5.36879 -0.310967 6.01328 0.335155L8.72195 3.05047C8.88268 3.21162 9.08805 3.32082 9.31153 3.36366L13.0771 4.09131C13.9731 4.26422 14.3109 5.36877 13.6648 6.01338L10.9497 8.72186C10.7886 8.88263 10.6793 9.08815 10.6362 9.31148L9.9089 13.0771C9.73584 13.9731 8.63117 14.311 7.98668 13.6648L5.27801 10.9499C5.11728 10.7888 4.91191 10.6796 4.68842 10.6363L0.922825 9.90907C0.0268234 9.73578 -0.310912 8.63124 0.335135 7.98663L3.05025 5.27815C3.2114 5.11738 3.32061 4.91186 3.36376 4.68853L4.09106 0.922891Z"
+                                    fill="#B476E5"
+                                />
+                            </svg>
+                        </span>
+                        <p class="text-lg font-extrabold text-black">WHO WE ARE?</p>
+                        <span>
+                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M4.091 0.922891C4.26406 0.0268889 5.36872 -0.310967 6.01322 0.335155L8.72189 3.05047C8.88262 3.21162 9.08799 3.32082 9.31147 3.36366L13.0771 4.09131C13.9731 4.26422 14.3108 5.36877 13.6648 6.01338L10.9496 8.72186C10.7885 8.88263 10.6793 9.08815 10.6361 9.31148L9.90883 13.0771C9.73578 13.9731 8.63111 14.311 7.98662 13.6648L5.27795 10.9499C5.11721 10.7888 4.91185 10.6796 4.68836 10.6363L0.922764 9.90907C0.0267624 9.73578 -0.310973 8.63124 0.335074 7.98663L3.05019 5.27815C3.21134 5.11738 3.32055 4.91186 3.3637 4.68853L4.091 0.922891Z"
+                                    fill="#47BDFF"
+                                />
+                            </svg>
+                        </span>
+                    </div>
+                    <h3 class="mt-7 text-3xl font-extrabold text-white md:text-[50px] md:leading-[70px]">
+                        We are dynamic team of creative design and development
+                    </h3>
+                    <p class="mt-2.5 text-lg font-medium">we ensure that you’ll embark on a perfectly planned, safe vacation at a price you can afford.</p>
+                    <div class="mt-8 flex items-center gap-5">
+                        <a href="javascript:" class="text-lg font-bold text-white duration-200 hover:text-secondary">Explore Us</a>
+                        <span>
+                            <svg width="59" height="53" viewBox="0 0 59 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <circle opacity="0.1" cx="32" cy="26.5" r="25" stroke="url(#paint0_linear_153_569)" stroke-width="3" />
+                                <path
+                                    d="M28.0739 27.3557L20.7465 25.3923L21.2641 23.4608L31.889 26.3077L29.0421 36.9327L27.1105 36.4151L29.0739 29.0877L1.21209 45.1737L0.21209 43.4417L28.0739 27.3557Z"
+                                    fill="url(#paint1_linear_153_569)"
+                                />
+                                <defs>
+                                    <linearGradient id="paint0_linear_153_569" x1="32" y1="1.5" x2="32" y2="51.5" gradientUnits="userSpaceOnUse">
+                                        <stop stop-color="white" />
+                                        <stop offset="1" stop-color="white" stop-opacity="0" />
+                                    </linearGradient>
+                                    <linearGradient
+                                        id="paint1_linear_153_569"
+                                        x1="-3.17691"
+                                        y1="37.5718"
+                                        x2="28.4836"
+                                        y2="19.9431"
+                                        gradientUnits="userSpaceOnUse"
+                                    >
+                                        <stop stop-color="#B476E5" />
+                                        <stop offset="1" stop-color="#47BDFF" />
+                                    </linearGradient>
+                                </defs>
+                            </svg>
+                        </span>
+                    </div>
+                </div>
+                <div class="mx-auto max-w-[540px]" data-aos="fade-up" data-aos-duration="1000">
+                    <img src="/assets/images/creative/about-img1.png" class="rtl:rotate-y-180" alt="" />
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="py-12 dark:bg-gray-dark lg:py-20">
+        <div class="container">
+            <div class="text-center ltr:md:text-left rtl:md:text-right">
+                <div class="mx-auto inline-flex items-center gap-2.5 bg-black p-2.5">
+                    <span>
+                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M4.09106 0.922891C4.26412 0.0268889 5.36879 -0.310967 6.01328 0.335155L8.72195 3.05047C8.88268 3.21162 9.08805 3.32082 9.31153 3.36366L13.0771 4.09131C13.9731 4.26422 14.3109 5.36877 13.6648 6.01338L10.9497 8.72186C10.7886 8.88263 10.6793 9.08815 10.6362 9.31148L9.9089 13.0771C9.73584 13.9731 8.63117 14.311 7.98668 13.6648L5.27801 10.9499C5.11728 10.7888 4.91191 10.6796 4.68842 10.6363L0.922825 9.90907C0.0268234 9.73578 -0.310912 8.63124 0.335135 7.98663L3.05025 5.27815C3.2114 5.11738 3.32061 4.91186 3.36376 4.68853L4.09106 0.922891Z"
+                                fill="#B476E5"
+                            />
+                        </svg>
+                    </span>
+                    <p class="text-lg font-extrabold text-white">FEATURES</p>
+                    <span>
+                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M4.091 0.922891C4.26406 0.0268889 5.36872 -0.310967 6.01322 0.335155L8.72189 3.05047C8.88262 3.21162 9.08799 3.32082 9.31147 3.36366L13.0771 4.09131C13.9731 4.26422 14.3108 5.36877 13.6648 6.01338L10.9496 8.72186C10.7885 8.88263 10.6793 9.08815 10.6361 9.31148L9.90883 13.0771C9.73578 13.9731 8.63111 14.311 7.98662 13.6648L5.27795 10.9499C5.11721 10.7888 4.91185 10.6796 4.68836 10.6363L0.922764 9.90907C0.0267624 9.73578 -0.310973 8.63124 0.335074 7.98663L3.05019 5.27815C3.21134 5.11738 3.32055 4.91186 3.3637 4.68853L4.091 0.922891Z"
+                                fill="#47BDFF"
+                            />
+                        </svg>
+                    </span>
+                </div>
+            </div>
+            <h3 class="mt-7 text-center text-3xl font-extrabold text-black dark:text-white md:text-[50px] md:leading-[70px] ltr:md:text-left rtl:md:text-right">
+                The Best Features
+            </h3>
+            <p class="mt-2.5 text-center text-lg font-medium ltr:md:text-left rtl:md:text-right">
+                Contrary to popular belief, Lorem Ipsum is not simply random text.
+            </p>
+            <div
+                class="mt-12 grid gap-[30px] text-center sm:grid-cols-2 ltr:sm:text-left rtl:sm:text-right md:grid-cols-3"
+                data-aos="fade-up"
+                data-aos-duration="1000"
+            >
+                <div>
+                    <span>
+                        <svg class="mx-auto h-[42px] w-[42px] sm:mx-0" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M34.6467 17.9156C33.7341 12.2984 28.9628 8.11945 23.2743 7.95494C23.0038 7.94435 22.7402 8.04173 22.5416 8.22562C22.343 8.40952 22.2256 8.66485 22.2155 8.93533V9.02684L22.856 18.6084C22.898 19.2534 23.4525 19.7438 24.0978 19.7065L33.7056 19.066C33.9763 19.046 34.2279 18.9188 34.4045 18.7127C34.5812 18.5066 34.6683 18.2385 34.6467 17.9679V17.9156Z"
+                                stroke="#47BDFF"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M16.6207 13.6542C17.2318 13.5129 17.8573 13.8256 18.1109 14.3993C18.1774 14.5344 18.2173 14.6807 18.2285 14.8308C18.3592 16.687 18.6338 20.7522 18.7907 22.9483C18.8174 23.344 19.0008 23.7125 19.3 23.9726C19.5994 24.2326 19.99 24.3627 20.3854 24.3339L28.4507 23.8373C28.8107 23.8155 29.1637 23.9436 29.4261 24.1912C29.6885 24.4387 29.837 24.7837 29.8364 25.1444C29.5095 30.0147 26.0103 34.0863 21.2444 35.1417C16.4787 36.197 11.5877 33.9834 9.23515 29.7064C8.53289 28.4754 8.08815 27.1146 7.92797 25.7065C7.85949 25.2743 7.83322 24.8365 7.84954 24.3993C7.86341 19.1981 11.5162 14.7167 16.6076 13.6542"
+                                stroke="#47BDFF"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </span>
+                    <h5 class="mt-5 text-lg font-extrabold text-black dark:text-white">Marketing Strategy</h5>
+                    <p class="mt-2.5 text-[15px] font-semibold">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
+                </div>
+                <div>
+                    <span>
+                        <svg class="mx-auto h-[42px] w-[42px] sm:mx-0" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M16.0695 25.1136L18.2253 18.2253L25.1135 16.0696L22.9578 22.958L16.0695 25.1136Z"
+                                stroke="#47BDFF"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M20.5915 33.6C27.7759 33.6 33.6 27.7759 33.6 20.5916C33.6 13.4072 27.7759 7.58313 20.5915 7.58313C13.4072 7.58313 7.5831 13.4072 7.5831 20.5916C7.5831 27.7759 13.4072 33.6 20.5915 33.6Z"
+                                stroke="#47BDFF"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </span>
+                    <h5 class="mt-5 text-lg font-extrabold text-black dark:text-white">SEO-optimization</h5>
+                    <p class="mt-2.5 text-[15px] font-semibold">There are many variations of passages of Lorem Ipsum available, but the majority.</p>
+                </div>
+                <div>
+                    <span>
+                        <svg class="mx-auto h-[42px] w-[42px] sm:mx-0" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M19.9054 8.10138H14.833C10.6615 8.10138 8.0459 11.0547 8.0459 15.2357V26.5146C8.0459 30.6957 10.6492 33.6491 14.833 33.6491H26.8038C30.9889 33.6491 33.5922 30.6957 33.5922 26.5146V21.0502"
+                                stroke="#47BDFF"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M16.2906 19.1332L26.4286 8.99531C27.6917 7.73366 29.7387 7.73366 31.0018 8.99531L32.6528 10.6463C33.9157 11.9093 33.9157 13.9578 32.6528 15.2194L22.466 25.4062C21.9138 25.9583 21.165 26.269 20.3835 26.269H15.3018L15.4292 21.141C15.4482 20.3867 15.7562 19.6678 16.2906 19.1332Z"
+                                stroke="#47BDFF"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path d="M24.888 10.5616L31.0823 16.7559" stroke="#47BDFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                    </span>
+                    <h5 class="mt-5 text-lg font-extrabold text-black dark:text-white">Design</h5>
+                    <p class="mt-2.5 text-[15px] font-semibold">All the Lorem Ipsum generators on the Internet tend to repeat chunks as necessary.</p>
+                </div>
+                <div>
+                    <span>
+                        <svg class="mx-auto h-[42px] w-[42px] sm:mx-0" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M34.258 14.4234L33.3153 12.7876C32.5178 11.4033 30.7504 10.9259 29.3644 11.72C28.7046 12.1087 27.9173 12.219 27.1761 12.0265C26.435 11.8342 25.8008 11.3547 25.4135 10.6942C25.1643 10.2744 25.0303 9.79614 25.0253 9.30792C25.0477 8.52519 24.7525 7.76669 24.2066 7.2052C23.6608 6.64372 22.911 6.32707 22.1279 6.32739H20.2287C19.4615 6.32738 18.726 6.63308 18.1848 7.17684C17.6437 7.72061 17.3415 8.4576 17.3453 9.22474C17.3225 10.8086 16.0319 12.0807 14.4479 12.0805C13.9596 12.0755 13.4815 11.9416 13.0616 11.6923C11.6755 10.8981 9.90813 11.3756 9.11062 12.7598L8.09863 14.4234C7.30208 15.8058 7.77309 17.572 9.15221 18.3743C10.0487 18.8918 10.6009 19.8484 10.6009 20.8835C10.6009 21.9186 10.0487 22.8751 9.15221 23.3927C7.77484 24.1895 7.30332 25.9515 8.09863 27.3297L9.05517 28.9794C9.42884 29.6537 10.0558 30.1512 10.7972 30.3619C11.5387 30.5727 12.3337 30.4792 13.0061 30.1023C13.6671 29.7166 14.4548 29.611 15.1942 29.8088C15.9335 30.0066 16.5631 30.4916 16.9432 31.1559C17.1924 31.5757 17.3262 32.054 17.3314 32.5422C17.3314 34.1424 18.6286 35.4395 20.2287 35.4395H22.1279C23.7226 35.4395 25.0176 34.1508 25.0253 32.556C25.0216 31.7865 25.3257 31.0474 25.8698 30.5033C26.414 29.959 27.1531 29.655 27.9226 29.6587C28.4096 29.6718 28.8859 29.8051 29.309 30.0468C30.6914 30.8434 32.4576 30.3724 33.2599 28.9933L34.258 27.3297C34.6443 26.6666 34.7504 25.8768 34.5527 25.1352C34.3548 24.3936 33.8696 23.7615 33.2043 23.3788C32.5392 22.9961 32.054 22.364 31.8561 21.6224C31.6584 20.8809 31.7645 20.091 32.1508 19.4279C32.402 18.9892 32.7658 18.6256 33.2043 18.3743C34.5752 17.5725 35.0451 15.8165 34.258 14.4372V14.4234Z"
+                                stroke="#B476E5"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M21.1852 24.876C23.3902 24.876 25.1777 23.0885 25.1777 20.8835C25.1777 18.6784 23.3902 16.8909 21.1852 16.8909C18.9802 16.8909 17.1927 18.6784 17.1927 20.8835C17.1927 23.0885 18.9802 24.876 21.1852 24.876Z"
+                                stroke="#B476E5"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </span>
+                    <h5 class="mt-5 text-lg font-extrabold text-black dark:text-white">Marketing Strategy</h5>
+                    <p class="mt-2.5 text-[15px] font-semibold">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
+                </div>
+                <div>
+                    <span>
+                        <svg class="mx-auto h-[42px] w-[42px] sm:mx-0" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M19.5967 31.4439C26.1745 31.4439 31.5069 26.1115 31.5069 19.5337C31.5069 12.9558 26.1745 7.62341 19.5967 7.62341C13.0188 7.62341 7.68642 12.9558 7.68642 19.5337C7.68642 26.1115 13.0188 31.4439 19.5967 31.4439Z"
+                                stroke="#B476E5"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path d="M27.8805 28.4361L32.55 33.0935" stroke="#B476E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                    </span>
+                    <h5 class="mt-5 text-lg font-extrabold text-black dark:text-white">Research</h5>
+                    <p class="mt-2.5 text-[15px] font-semibold">It has survived not only five centuries, but also the leap into electronic typesetting,</p>
+                </div>
+                <div>
+                    <span>
+                        <svg class="mx-auto h-[42px] w-[42px] sm:mx-0" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M22.5883 9.04291L26.0436 15.8373C26.2166 16.18 26.5508 16.4192 26.9387 16.4746L34.6742 17.5669C34.9875 17.6078 35.2694 17.7681 35.4619 18.0132C35.823 18.4726 35.7677 19.1229 35.335 19.5182L29.7286 24.8178C29.4436 25.0803 29.3167 25.4653 29.3914 25.8401L30.734 33.3185C30.8281 33.9382 30.3954 34.5187 29.7614 34.6194C29.4988 34.6587 29.2302 34.6179 28.9916 34.5027L22.102 30.972C21.7559 30.7882 21.3412 30.7882 20.9951 30.972L14.0548 34.5216C13.4744 34.8104 12.7642 34.596 12.448 34.0404C12.3271 33.8158 12.2853 33.5605 12.3271 33.3112L13.6698 25.8329C13.7369 25.4595 13.6102 25.0759 13.3327 24.8119L7.69631 19.5139C7.23681 19.0676 7.23383 18.3413 7.69184 17.8921L7.69631 17.8862C7.88579 17.7186 8.11852 17.6063 8.37065 17.5625L16.1076 16.4702C16.494 16.4105 16.8267 16.1742 17.0028 15.8315L20.4549 9.04291C20.5937 8.76728 20.8399 8.55582 21.1383 8.45957C21.4381 8.36186 21.7663 8.3852 22.0483 8.52373C22.2795 8.63603 22.469 8.81832 22.5883 9.04291Z"
+                                stroke="#B476E5"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </span>
+                    <h5 class="mt-5 text-lg font-extrabold text-black dark:text-white">Social Media Promotion</h5>
+                    <p class="mt-2.5 text-[15px] font-semibold">It was popularised in the 1960s with the release of Letraset sheets containing.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-secondary bg-[url(/assets/images/creative/numbers.png)] bg-center bg-no-repeat py-12 lg:py-20">
+        <div class="container">
+            <div class="border-[8px] border-white/10">
+                <div class="grid grid-cols-2 gap-7 divide-x-2 divide-double divide-gray/[0.15] bg-white py-[54px] px-2 text-center md:grid-cols-4">
+                    <div>
+                        <div
+                            class="text-[34px] font-black leading-10 text-primary"
+                            [countUp]="1540"
+                            [options]="{startVal :0 ,duration: 10,enableScrollSpy:true,scrollSpyOnce : true}"
+                            [reanimateOnClick]="false"
+                        >
+                            {{0}}
+                        </div>
+                        <p class="mt-2 text-lg font-bold text-black">Projects Executed</p>
+                    </div>
+                    <div>
+                        <div
+                            class="text-[34px] font-black leading-10 text-primary"
+                            [countUp]="120"
+                            [options]="{startVal :0 ,duration: 10,enableScrollSpy:true,scrollSpyOnce : true}"
+                            [reanimateOnClick]="false"
+                        >
+                            {{0}}
+                        </div>
+                        <p class="mt-2 text-lg font-bold text-black">Global Awards</p>
+                    </div>
+                    <div>
+                        <div
+                            class="text-[34px] font-black leading-10 text-primary"
+                            [countUp]="165"
+                            [options]="{startVal :0 ,duration: 10,enableScrollSpy:true,scrollSpyOnce : true}"
+                            [reanimateOnClick]="false"
+                        >
+                            {{0}}
+                        </div>
+                        <p class="mt-2 text-lg font-bold text-black">Active Clients</p>
+                    </div>
+                    <div>
+                        <div
+                            class="text-[34px] font-black leading-10 text-primary"
+                            [countUp]="1500"
+                            [options]="{startVal :0 ,duration: 10,enableScrollSpy:true,scrollSpyOnce : true}"
+                            [reanimateOnClick]="false"
+                        >
+                            {{0}}
+                        </div>
+                        <p class="mt-2 text-lg font-bold text-black">Ongoing Contracts</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="py-12 dark:bg-gradient-to-r dark:from-[#B476E5]/10 dark:to-[#47BDFF]/10 lg:py-24">
+        <div class="container">
+            <div class="inline-flex items-center gap-2.5 bg-black p-2.5">
+                <span>
+                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M4.09106 0.922891C4.26412 0.0268889 5.36879 -0.310967 6.01328 0.335155L8.72195 3.05047C8.88268 3.21162 9.08805 3.32082 9.31153 3.36366L13.0771 4.09131C13.9731 4.26422 14.3109 5.36877 13.6648 6.01338L10.9497 8.72186C10.7886 8.88263 10.6793 9.08815 10.6362 9.31148L9.9089 13.0771C9.73584 13.9731 8.63117 14.311 7.98668 13.6648L5.27801 10.9499C5.11728 10.7888 4.91191 10.6796 4.68842 10.6363L0.922825 9.90907C0.0268234 9.73578 -0.310912 8.63124 0.335135 7.98663L3.05025 5.27815C3.2114 5.11738 3.32061 4.91186 3.36376 4.68853L4.09106 0.922891Z"
+                            fill="#B476E5"
+                        />
+                    </svg>
+                </span>
+                <p class="text-lg font-extrabold uppercase text-white">Check our Work</p>
+                <span>
+                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M4.091 0.922891C4.26406 0.0268889 5.36872 -0.310967 6.01322 0.335155L8.72189 3.05047C8.88262 3.21162 9.08799 3.32082 9.31147 3.36366L13.0771 4.09131C13.9731 4.26422 14.3108 5.36877 13.6648 6.01338L10.9496 8.72186C10.7885 8.88263 10.6793 9.08815 10.6361 9.31148L9.90883 13.0771C9.73578 13.9731 8.63111 14.311 7.98662 13.6648L5.27795 10.9499C5.11721 10.7888 4.91185 10.6796 4.68836 10.6363L0.922764 9.90907C0.0267624 9.73578 -0.310973 8.63124 0.335074 7.98663L3.05019 5.27815C3.21134 5.11738 3.32055 4.91186 3.3637 4.68853L4.091 0.922891Z"
+                            fill="#47BDFF"
+                        />
+                    </svg>
+                </span>
+            </div>
+            <h5 class="mt-7 text-3xl font-extrabold text-black dark:text-white md:text-[50px] md:leading-[70px]">Some of our recent case studies</h5>
+            <div class="mt-12 grid grid-cols-2 gap-3 md:gap-[30px]" data-aos="flip-left" data-aos-duration="1000">
+                <div class="group overflow-hidden border-[8px] border-white">
+                    <img
+                        src="/assets/images/creative/work1.jpg"
+                        alt=""
+                        class="h-full w-full object-cover transition duration-500 group-hover:rotate-6 group-hover:scale-125"
+                    />
+                </div>
+                <div class="group overflow-hidden border-[8px] border-white md:mt-5">
+                    <img
+                        src="/assets/images/creative/work2.jpg"
+                        alt=""
+                        class="h-full w-full object-cover transition duration-500 group-hover:rotate-6 group-hover:scale-125"
+                    />
+                </div>
+                <div class="group overflow-hidden border-[8px] border-white">
+                    <img
+                        src="/assets/images/creative/work3.jpg"
+                        alt=""
+                        class="h-full w-full object-cover transition duration-500 group-hover:rotate-6 group-hover:scale-125"
+                    />
+                </div>
+                <div class="group overflow-hidden border-[8px] border-white md:mt-5">
+                    <img
+                        src="/assets/images/creative/work4.jpg"
+                        alt=""
+                        class="h-full w-full object-cover transition duration-500 group-hover:rotate-6 group-hover:scale-125"
+                    />
+                </div>
+                <div class="group overflow-hidden border-[8px] border-white">
+                    <img
+                        src="/assets/images/creative/work5.jpg"
+                        alt=""
+                        class="h-full w-full object-cover transition duration-500 group-hover:rotate-6 group-hover:scale-125"
+                    />
+                </div>
+                <div class="group overflow-hidden border-[8px] border-white md:mt-5">
+                    <img
+                        src="/assets/images/creative/work6.jpg"
+                        alt=""
+                        class="h-full w-full object-cover transition duration-500 group-hover:rotate-6 group-hover:scale-125"
+                    />
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-white/50 py-12 dark:bg-transparent dark:bg-gradient-to-t dark:from-white/[0.02] dark:to-transparent lg:py-24">
+        <div class="container">
+            <div class="inline-flex items-center gap-2.5 bg-black p-2.5">
+                <span>
+                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M4.09106 0.922891C4.26412 0.0268889 5.36879 -0.310967 6.01328 0.335155L8.72195 3.05047C8.88268 3.21162 9.08805 3.32082 9.31153 3.36366L13.0771 4.09131C13.9731 4.26422 14.3109 5.36877 13.6648 6.01338L10.9497 8.72186C10.7886 8.88263 10.6793 9.08815 10.6362 9.31148L9.9089 13.0771C9.73584 13.9731 8.63117 14.311 7.98668 13.6648L5.27801 10.9499C5.11728 10.7888 4.91191 10.6796 4.68842 10.6363L0.922825 9.90907C0.0268234 9.73578 -0.310912 8.63124 0.335135 7.98663L3.05025 5.27815C3.2114 5.11738 3.32061 4.91186 3.36376 4.68853L4.09106 0.922891Z"
+                            fill="#B476E5"
+                        />
+                    </svg>
+                </span>
+                <p class="text-lg font-extrabold uppercase text-white">out team</p>
+                <span>
+                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M4.091 0.922891C4.26406 0.0268889 5.36872 -0.310967 6.01322 0.335155L8.72189 3.05047C8.88262 3.21162 9.08799 3.32082 9.31147 3.36366L13.0771 4.09131C13.9731 4.26422 14.3108 5.36877 13.6648 6.01338L10.9496 8.72186C10.7885 8.88263 10.6793 9.08815 10.6361 9.31148L9.90883 13.0771C9.73578 13.9731 8.63111 14.311 7.98662 13.6648L5.27795 10.9499C5.11721 10.7888 4.91185 10.6796 4.68836 10.6363L0.922764 9.90907C0.0267624 9.73578 -0.310973 8.63124 0.335074 7.98663L3.05019 5.27815C3.21134 5.11738 3.32055 4.91186 3.3637 4.68853L4.091 0.922891Z"
+                            fill="#47BDFF"
+                        />
+                    </svg>
+                </span>
+            </div>
+            <h5 class="mt-[30px] text-3xl font-extrabold text-black dark:text-white md:text-[50px] md:leading-[70px] xl:w-4/5">
+                Our agency it’s about the people and for the people
+            </h5>
+            <p class="mt-2.5 text-lg font-medium xl:w-1/2">
+                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
+            </p>
+
+            <div class="mt-12 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4" data-aos="fade-up" data-aos-duration="1000">
+                <div>
+                    <div class="rounded-t-full bg-gradient-to-b from-gray/10 to-transparent p-1">
+                        <div class="rounded-t-full bg-gradient-to-b from-white to-transparent p-1 dark:bg-gray-dark dark:from-transparent">
+                            <div class="h-72 rounded-t-full bg-gray/10 pt-6">
+                                <img src="/assets/images/creative/team-img1.png" class="h-full w-full object-contain" alt="" />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="relative z-[1] mx-4 -mt-5 bg-secondary py-4 text-center text-white">
+                        <h5 class="text-lg font-bold">Aditya Patel</h5>
+                        <p class="mt-2.5 text-sm font-bold">Chief Executive Officer</p>
+                    </div>
+                </div>
+                <div>
+                    <div class="rounded-t-full bg-gradient-to-b from-gray/10 to-transparent p-1">
+                        <div class="rounded-t-full bg-gradient-to-b from-white to-transparent p-1 dark:bg-gray-dark dark:from-transparent">
+                            <div class="h-72 rounded-t-full bg-gray/10 pt-6">
+                                <img src="/assets/images/creative/team-img2.png" class="h-full w-full object-contain" alt="" />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="relative z-[1] mx-4 -mt-5 bg-secondary py-4 text-center text-white">
+                        <h5 class="text-lg font-bold">Audrey Ramirez</h5>
+                        <p class="mt-2.5 text-sm font-bold">Chief Operating Officer</p>
+                    </div>
+                </div>
+                <div>
+                    <div class="rounded-t-full bg-gradient-to-b from-gray/10 to-transparent p-1">
+                        <div class="rounded-t-full bg-gradient-to-b from-white to-transparent p-1 dark:bg-gray-dark dark:from-transparent">
+                            <div class="h-72 rounded-t-full bg-gray/10 pt-6">
+                                <img src="/assets/images/creative/team-img3.png" class="h-full w-full object-contain" alt="" />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="relative z-[1] mx-4 -mt-5 bg-secondary py-4 text-center text-white">
+                        <h5 class="text-lg font-bold">James Robinson</h5>
+                        <p class="mt-2.5 text-sm font-bold">Chief Financial Officer</p>
+                    </div>
+                </div>
+                <div>
+                    <div class="rounded-t-full bg-gradient-to-b from-gray/10 to-transparent p-1">
+                        <div class="rounded-t-full bg-gradient-to-b from-white to-transparent p-1 dark:bg-gray-dark dark:from-transparent">
+                            <div class="h-72 rounded-t-full bg-gray/10 pt-6">
+                                <img src="/assets/images/creative/team-img4.png" class="h-full w-full object-contain" alt="" />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="relative z-[1] mx-4 -mt-5 bg-secondary py-4 text-center text-white">
+                        <h5 class="text-lg font-bold">Daniel Allen</h5>
+                        <p class="mt-2.5 text-sm font-bold">Chief Marketing Officer</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-gradient-to-b from-transparent to-white/50 py-12 dark:to-white/[0.02] lg:py-24">
+        <div class="container">
+            <div class="inline-flex items-center gap-2.5 bg-black p-2.5">
+                <span>
+                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M4.09106 0.922891C4.26412 0.0268889 5.36879 -0.310967 6.01328 0.335155L8.72195 3.05047C8.88268 3.21162 9.08805 3.32082 9.31153 3.36366L13.0771 4.09131C13.9731 4.26422 14.3109 5.36877 13.6648 6.01338L10.9497 8.72186C10.7886 8.88263 10.6793 9.08815 10.6362 9.31148L9.9089 13.0771C9.73584 13.9731 8.63117 14.311 7.98668 13.6648L5.27801 10.9499C5.11728 10.7888 4.91191 10.6796 4.68842 10.6363L0.922825 9.90907C0.0268234 9.73578 -0.310912 8.63124 0.335135 7.98663L3.05025 5.27815C3.2114 5.11738 3.32061 4.91186 3.36376 4.68853L4.09106 0.922891Z"
+                            fill="#B476E5"
+                        />
+                    </svg>
+                </span>
+                <p class="text-lg font-extrabold uppercase text-white">CLIENT STORIES</p>
+                <span>
+                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M4.091 0.922891C4.26406 0.0268889 5.36872 -0.310967 6.01322 0.335155L8.72189 3.05047C8.88262 3.21162 9.08799 3.32082 9.31147 3.36366L13.0771 4.09131C13.9731 4.26422 14.3108 5.36877 13.6648 6.01338L10.9496 8.72186C10.7885 8.88263 10.6793 9.08815 10.6361 9.31148L9.90883 13.0771C9.73578 13.9731 8.63111 14.311 7.98662 13.6648L5.27795 10.9499C5.11721 10.7888 4.91185 10.6796 4.68836 10.6363L0.922764 9.90907C0.0267624 9.73578 -0.310973 8.63124 0.335074 7.98663L3.05019 5.27815C3.21134 5.11738 3.32055 4.91186 3.3637 4.68853L4.091 0.922891Z"
+                            fill="#47BDFF"
+                        />
+                    </svg>
+                </span>
+            </div>
+            <h5 class="mt-[30px] text-3xl font-extrabold text-black dark:text-white md:text-[50px] md:leading-[70px] xl:w-3/5">
+                Check the success story of our clients
+            </h5>
+            <p class="mt-2.5 text-lg font-medium xl:w-1/2">
+                Velit integer nisl quis eget sedusce sed vulputate ac accumsan, odio amet. Sit varius pharetra donec.
+            </p>
+
+            <client-slider [feedbacks]="feedbacks" type="creative-agency"></client-slider>
+        </div>
+    </section>
+
+    <section class="bg-black py-6 dark:bg-gray-dark">
+        <swiper [config]="config1">
+            <ng-template swiperSlide>
+                <div class="flex items-center gap-7">
+                    <h5 class="text-xl font-extralight text-white sm:text-[28px]">Let’s work together</h5>
+                    <a href="javascript:" class="btn rounded-none bg-secondary text-white hover:bg-primary">Get started</a>
+                </div>
+            </ng-template>
+            <ng-template swiperSlide>
+                <div class="flex items-center gap-7">
+                    <h5 class="text-xl font-extralight text-white sm:text-[28px]">Let’s work together</h5>
+                    <a href="javascript:" class="btn rounded-none bg-secondary text-white hover:bg-primary">Get started</a>
+                </div>
+            </ng-template>
+            <ng-template swiperSlide>
+                <div class="flex items-center gap-7">
+                    <h5 class="text-xl font-extralight text-white sm:text-[28px]">Let’s work together</h5>
+                    <a href="javascript:" class="btn rounded-none bg-secondary text-white hover:bg-primary">Get started</a>
+                </div>
+            </ng-template>
+        </swiper>
+    </section>
+</div>

src/app/creative-agency.ts

@@ -0,0 +1,96 @@
+import { Component, Input } from '@angular/core';
+import SwiperCore, { SwiperOptions, Autoplay } from 'swiper';
+import { Store } from '@ngrx/store';
+
+// install Swiper modules
+SwiperCore.use([Autoplay]);
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './creative-agency.html',
+})
+export class CreativeComponent {
+    storeData: any;
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+
+    config: SwiperOptions = {
+        loop: true,
+        slidesPerView: "auto",
+        spaceBetween: 30,
+        speed: 2500,
+        autoplay:{
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        breakpoints:{
+            320: {
+                slidesPerView: 1.7,
+            },
+            600: {
+                slidesPerView: 3,
+            },
+            1000: {
+                slidesPerView: 5,
+            },
+            1600: {
+                slidesPerView: 8,
+            },
+        },
+        modules: [ Autoplay],
+    };
+
+    config1: SwiperOptions = {
+        loop: true,
+        slidesPerView: "auto",
+        spaceBetween: 30,
+        speed: 2500,
+        autoplay:{
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        breakpoints:{
+            450: {
+                slidesPerView: 1.2,
+            },
+            700: {
+                slidesPerView: 1.6,
+            },
+            1000: {
+                slidesPerView: 2,
+            },
+            1600: {
+                slidesPerView: 3.5,
+            },
+        },
+        modules: [ Autoplay],
+    };
+
+    @Input() feedbacks: any = [
+        {
+            id: 1,
+            name: 'Marvin McKinney',
+            role: 'Founder of Triple IT',
+            thumbnail: '/assets/images/creative/client-img1.png',
+            message:
+                "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by alteration in some form, injected humour, or randomised words which don't look even slightly believable.",
+        },
+        {
+            id: 2,
+            name: 'Leslie Alexander',
+            role: 'Founder of Dope tech',
+            thumbnail: '/assets/images/creative/client-img2.png',
+            message:
+                " There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by alteration in some form, injected humour, or randomised words which don't look even slightly believable.",
+        },
+    ];
+
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/crypto.ts

@@ -0,0 +1,163 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './crypto.html',
+})
+export class CryptoComponent {
+    storeData: any;
+    // success chart
+    successChartOptions: any = {
+        chart: {
+            height: 55,
+            type: 'area',
+            sparkline: {
+                enabled: true,
+            },
+        },
+        stroke: {
+            width: 2,
+            curve: 'smooth',
+        },
+        markers: {
+            size: 0,
+        },
+        colors: ['#12AF97'],
+        fill: {
+            opacity: 1,
+            type: 'gradient',
+            gradient: {
+                shadeIntensity: 1,
+                inverseColors: !1,
+                opacityFrom: 0.3,
+                opacityTo: 0.05,
+                stops: [50, 100],
+            },
+        },
+        grid: {
+            padding: {
+                top: 0,
+                bottom: 0,
+                left: 0,
+            },
+        },
+        tooltip: {
+            x: {
+                show: false,
+            },
+            y: {
+                title: {
+                    formatter: () => {
+                        return '';
+                    },
+                },
+            },
+        },
+        responsive: [
+            {
+                breakPoint: 576,
+                options: {
+                    chart: {
+                        height: 95,
+                    },
+                    grid: {
+                        padding: {
+                            top: 45,
+                            bottom: 0,
+                            left: 0,
+                        },
+                    },
+                },
+            },
+        ],
+    };
+
+    successChartSeries = [
+        {
+            data: [9, 36, 12, 59, 41, 66],
+        },
+    ];
+
+    // danger chart
+    dangerChartOptions: any = {
+        chart: {
+            height: 55,
+            type: 'area',
+            sparkline: {
+                enabled: true,
+            },
+        },
+        stroke: {
+            width: 2,
+            curve: 'smooth',
+        },
+        markers: {
+            size: 0,
+        },
+        colors: ['#FF0000'],
+        fill: {
+            opacity: 1,
+            type: 'gradient',
+            gradient: {
+                shadeIntensity: 1,
+                inverseColors: !1,
+                opacityFrom: 0.3,
+                opacityTo: 0.05,
+                stops: [50, 100],
+            },
+        },
+        grid: {
+            padding: {
+                top: 0,
+                bottom: 0,
+                left: 0,
+            },
+        },
+        tooltip: {
+            x: {
+                show: false,
+            },
+            y: {
+                title: {
+                    formatter: () => {
+                        return '';
+                    },
+                },
+            },
+        },
+        responsive: [
+            {
+                breakPoint: 576,
+                options: {
+                    chart: {
+                        height: 95,
+                    },
+                    grid: {
+                        padding: {
+                            top: 45,
+                            bottom: 0,
+                            left: 0,
+                        },
+                    },
+                },
+            },
+        ],
+    };
+
+    dangerChartSeries = [
+        {
+            data: [55, 41, 69, 20, 44, 19],
+        },
+    ];
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/data.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DataService } from './data.service';
+
+describe('DataService', () => {
+  let service: DataService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DataService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/data.service.ts

@@ -0,0 +1,389 @@
+import { Injectable } from "@angular/core";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { Observable } from "rxjs";
+
+@Injectable({
+  providedIn: "root",
+})
+export class DataService {
+  private url = "https://api.wrdpwd.com/soap/callWebService";
+  // private url =
+  //   "https://clin.CMCVellore.ac.in/newconference/ConferencePay.asmx";
+  prod_cred = {
+    userName: "UMRCETS",
+    password: "us8FaGH5",
+    program: "TSURCME",
+  };
+
+  private test_url =
+    "https://clin.CMCVellore.ac.in/TestConference/ConferencePay.asmx";
+  test_cred = {
+    userName: "UMRESTC",
+    password: "zEVjHc9Y",
+    program: "TSURCME",
+  };
+
+  constructor(private httpClient: HttpClient) {}
+
+  // Method to send the SOAP request
+  sendSOAPRequestForStatus(formData: any): Observable<any> {
+    const headers = new HttpHeaders({
+      "Content-Type": "application/soap+xml; charset=utf-8",
+      SOAPAction: "http://www.cmch-vellore.edu/CONFONLINEPAYSTATUS",
+    });
+
+    const soapBody = this.generateSOAPBodyForStatus(this.prod_cred, formData);
+
+    console.log(soapBody);
+
+    return this.httpClient.post(this.url, soapBody, {
+      headers,
+      responseType: "text",
+    });
+  }
+
+
+
+  // Method to send the SOAP request
+  sendSOAPRequest(formData: any): Observable<any> {
+    const headers = new HttpHeaders({
+      "Content-Type": "application/soap+xml; charset=utf-8",
+      SOAPAction: "http://www.cmch-vellore.edu/NEWCONFONLINEPAYSAVE",
+    });
+
+    const soapBody = this.generateSOAPBody(this.prod_cred, formData);
+
+    console.log(soapBody);
+
+    return this.httpClient.post(this.url, soapBody, {
+      headers,
+      responseType: "text",
+    });
+  }
+
+  // Generate the SOAP body from form data
+  private generateSOAPBodyForStatus(userDetails: any, formData: any): string {
+
+    const soapXML = `
+    <x:Envelope xmlns:x="http://schemas.xmlsoap.org/soap/envelope/" xmlns:www="http://www.cmch-vellore.edu/">
+      <x:Header>
+        <www:UserDetails>
+        <www:userName>${userDetails.userName}</www:userName>
+        <www:password>${userDetails.password}</www:password>
+        <www:program>${userDetails.program}</www:program>
+      </www:UserDetails>
+      </x:Header>
+      <x:Body>
+        <www:CONFONLINEPAYSTATUS>
+          ${this.generateFieldsXML(formData)}
+        </www:CONFONLINEPAYSTATUS>
+      </x:Body>
+    </x:Envelope>
+  `;
+
+    return soapXML;
+  }
+  // Generate the SOAP body from form data
+  private generateSOAPBody(userDetails: any, formData: any): string {
+    const soapXML = `
+    <x:Envelope xmlns:x="http://schemas.xmlsoap.org/soap/envelope/" xmlns:www="http://www.cmch-vellore.edu/">
+      <x:Header>
+        <www:UserDetails>
+        <www:userName>${userDetails.userName}</www:userName>
+        <www:password>${userDetails.password}</www:password>
+        <www:program>${userDetails.program}</www:program>
+      </www:UserDetails>
+      </x:Header>
+      <x:Body>
+        <www:NEWCONFONLINEPAYSAVE>
+          ${this.generateFieldsXML(formData)}
+        </www:NEWCONFONLINEPAYSAVE>
+      </x:Body>
+    </x:Envelope>
+  `;
+
+    return soapXML;
+  }
+
+  // Generate the fields in SOAP XML format from form data
+  private generateFieldsXML(formData: any): string {
+    let fieldsXML = "";
+
+    // Iterate through form data and generate XML for each field
+    for (const key in formData) {
+      if (formData.hasOwnProperty(key)) {
+        fieldsXML += `<www:${key}>${formData[key]}</www:${key}>`;
+      }
+    }
+
+    return fieldsXML;
+  }
+
+  events = [
+    {
+      id: 1,
+      code: "TSURCME",
+      year: "2023",
+      subject: "CME on ",
+      title: " Advances in Chest Trauma Management ",
+      subTitle : "ACTraM 2023",
+      date: "13 & 14, October - 2023",
+      venue: [
+        {
+          title: "Symposium (Hybrid/ In person) ",
+          date: "13.10.2023",
+          address: "Conference Hall 7th floor, A-Block, CMC Vellore Ranipet Campus",
+        },
+        {
+          title: "Cadaveric Workshop ",
+          date: "14.10.2023",
+          address: "Antomy Dissection Hall, CMC Vellore Bagayam Campus",
+          info: "Limited seats & in person only",
+        },
+      ],
+      highlights: [
+        "Keynote lectures by eminent national and international faculty",
+        "Sessions oriented towards understanding the intricacies of multidisciplinary care that is needed in the management of chest trauma patients. ",
+        "Challenging cases discussions ",
+        "Specific focus on intercostal drainage, minimally invasive chest surgery in trauma, thoracic rib fixation, pain relief medications in trauma and critical care management.",
+        "Hands-on cadaveric training on the basic principles of surgical rib fixation",
+      ],
+      orgnisers: [
+        "Dr. Sukria Nayak - Organising Chairperson",
+        "Dr. Joses Dany James- Convener ",
+        "Dr. Vijayan P -Convener",
+        "Dr. Srujan Lam Sharma -Convener",
+        "Ms. Nithya.A- Manager",
+        "Mr. Prabhu - Manager",
+      ],
+
+      fee: [
+        { desc: "Online (ISTAC Members only) - ₹500", cost: 500 },
+        { desc: "Symposium (In-person)  - ₹1000", cost: 1000 },
+        { desc: "Workshop (Only)  - ₹3500", cost: 3500 },
+        { desc: "Symposium & Workshop ₹4500", cost: 5310 },
+        { desc: "* (+18% GST)", cost: 5310 },
+        
+      ],
+
+      phone: "04172 – 224627 ",
+      email: "traumasurg.academic@cmcvellore.ac.in",
+      isActive: true,
+      doctors: [
+        {
+          name: "Dr. Amit Gupta",
+          prof: "Professor",
+          at: "Division of Trauma Surgery JPNATC, AIIMS New Delhi",
+          id: 3,
+          image: "3.jpg",
+        },
+        {
+          name: "Dr. Subodh Kumar",
+          prof: "Professor",
+          at: "Division of Trauma Surgery,  JPNATC, AIIMS New Delhi",
+          id: 2,
+          image: "2.jpg",
+        },
+        {
+          
+          name: "Dr. Kajal Jain ",
+          prof: "Professor",
+          at: "Trauma Anaesthesia PGIMER, Chandigarh.",
+          id: 1,
+          image: "1.jpg",
+        },
+        {
+          name: "Dr. Krishnan Raghavendran ",
+          prof: "Professor",
+          at: " Division of Trauma and Acute Care Surgery, University Hospital, Ann Arbor Hospital Michigan",
+          id: 4,
+          image: "4.jpg",
+        },
+        {
+          name: "Dr. Balasubramoniam",
+          at: "Consultant Thoracic Surgeon, Yashoda group of Hospitals, Hyderabad",
+          id: 5,
+          image: "5.jpg",
+        },
+        {
+          name: "Dr. Niladri Banerjee",
+          prof: "Assistant Professor",
+          at: "Department of Surgery, AIIMS Jodhpur",
+          id: 8,
+          image: "8.jpg",
+        },
+        {
+          name: "Dr. Sukria Nayak",
+          prof: "Professor & Head",
+          at: " Department of Trauma Surgery, CMC Vellore",
+          id: 6,
+          image: "6.jpg",
+        },
+        {
+          name: "Dr. Ekta Rai",
+          prof: "Professor ",
+          at: "Department of Anesthesia,CMC Vellore",
+          id: 16,
+          image: "16.jpg",
+        },
+        {
+          name: "Dr.Madhu Andrew Philip",
+          at: "Prof & Head, Department of Cardiothoracic Surgery,CMC Vellore",
+          id: 17,
+          image: "17.jpg",
+        },
+        {
+          name: "Dr. Balasubramani",
+          prof: "Professor ",
+          at: "Department of  Surgical ICU, CMC Vellore",
+          id: 18,
+          image: "18.jpg",
+        },
+        {
+          name: "Dr. Susheel Sudheesh",
+          prof: "Assistant Professor",
+          at: "Department of Anaesthesia, CMC Vellore",
+          id: 10,
+          image: "10.jpg",
+        },
+        {
+          name: "Dr. Srujan Lam Sharma",
+          prof: "Assistant Professor",
+          at: "Department of Trauma Surgery, CMC Vellore",
+          id: 12,
+          image: "12.jpg",
+        },
+        {
+          name: "Dr. Vinay M Rao ",
+          prof: "Associate Professor",
+          at: "Department of Cardiothoracic, Surgery CMC Vellore",
+          id: 7,
+          image: "7.jpg",
+        },
+        {
+          name: "Dr. Santhosh R Benjamin",
+          prof: "Associate Professor",
+          at: "Department of Cardiothoracic, Surgery,CMC Vellore",
+          id: 9,
+          image: "9.jpg",
+        },
+        {
+          name: "Dr. Kirthi Sathyakumar ",
+          prof: "Associate Professor",
+          at: "Emergency Radiology, CMC Vellore",
+          id: 11,
+          image: "11.jpg",
+        },
+        {
+          name: "Dr. Joses Dany James",
+          prof: "Assistant Professor",
+          at: "Department of Trauma Surgery, CMC Vellore",
+          id: 14,
+          image: "14.jpg",
+        },
+         {
+          name: "Dr. Vijayan P",
+          prof: "Associate Professor",
+          at: "Department of Trauma Surgery, CMC Vellore",
+          id: 13,
+          image: "13.jpg",
+        },
+        {
+          name: "Dr. Vignesh Kumar",
+          prof: "Associate Professor",
+          at: "Department of General Surgery, PIMS, Puducherry",
+          id: 15,
+          image: "15.jpg",
+        },
+
+      ],
+    },
+  ];
+
+  getAllConferenceData(): Observable<any> {
+    const url = "https://api.wrdpwd.com/soap/getAllConferenceData";
+    return this.httpClient.get(url);
+  }
+
+  // Create a method to send data via POST request
+  insertConferenceData(data: any): Observable<any> {
+    const url = "https://api.wrdpwd.com/soap/insertConferenceData";
+    // Define headers if needed (adjust as necessary)
+    const headers = new HttpHeaders({
+      "Content-Type": "application/json",
+    });
+
+    // Send the POST request
+    return this.httpClient.post(url, data, { headers });
+  }
+
+  // Create a method to send data via POST request
+  updateConferenceData(id, data: any): Observable<any> {
+    const url = "https://api.wrdpwd.com/soap/updateConferenceData/" + id;
+    // Define headers if needed (adjust as necessary)
+    const headers = new HttpHeaders({
+      "Content-Type": "application/json",
+    });
+
+    // Send the POST request
+    return this.httpClient.put(url, data, { headers });
+  }
+
+  partialUpdateConferenceData(id, data: any): Observable<any> {
+    const url = "https://api.wrdpwd.com/soap/partialUpdateConferenceData/" + id;
+    // Define headers if needed (adjust as necessary)
+    const headers = new HttpHeaders({
+      "Content-Type": "application/json",
+    });
+
+    // Send the POST request
+    return this.httpClient.patch(url, data, { headers });
+  }
+
+
+  getConferenceDataByRegno(id){
+    const url = "https://api.wrdpwd.com/soap/getConferenceDataByRegno/" + id;
+    // Define headers if needed (adjust as necessary)
+    const headers = new HttpHeaders({
+      "Content-Type": "application/json",
+    });
+
+    // Send the POST request
+    return this.httpClient.get(url,  { headers });
+  }
+  
+
+  getConferenceDataByPhone(id){
+    const url = "https://api.wrdpwd.com/soap/getConferenceDataByPhone/" + id;
+    // Define headers if needed (adjust as necessary)
+    const headers = new HttpHeaders({
+      "Content-Type": "application/json",
+    });
+
+    // Send the POST request
+    return this.httpClient.get(url,  { headers });
+  }
+
+
+  // Create a method to send data via POST request
+  deleteConferenceData(id): Observable<any> {
+    const url = "https://api.wrdpwd.com/soap/deleteConferenceData/" + id;
+    // Define headers if needed (adjust as necessary)
+    const headers = new HttpHeaders({
+      "Content-Type": "application/json",
+    });
+
+    // Send the POST request
+    return this.httpClient.delete(url,  { headers });
+  }
+
+
+}
+
+export class PaymentInfo {
+  Registration: string;
+  Transid: string;
+  ResultCode: string;
+  Result: string;
+  URL: string;
+}

src/app/dto/custom-http-response.ts

@@ -0,0 +1,7 @@
+export interface CustomHttpResponse {
+  timestamp: Date;
+  httpStatusCode: number;
+  httpStatus: string;
+  reason: string;
+  message: string;
+}

src/app/dto/user-login.spec.ts

@@ -0,0 +1,7 @@
+import {UserLogin} from './user-login';
+
+describe('UserLogin', () => {
+  it('should create an instance', () => {
+    expect(new UserLogin()).toBeTruthy();
+  });
+});

src/app/dto/user-login.ts

@@ -0,0 +1,4 @@
+export class UserLogin {
+  username: string;
+  password: string;
+}

src/app/enum/WorkingStatus.ts

@@ -0,0 +1,6 @@
+
+export enum WorkingStatus {
+  ACTIVE = 'ACTIVE',
+  ON_LEAVE = 'ON_LEAVE',
+  RETIRED = 'RETIRED'
+}

src/app/enum/header-type.enum.ts

@@ -0,0 +1,4 @@
+export enum HeaderType {
+  AUTHORIZATION = 'Authorization',
+  JWT_TOKEN = 'Jwt-Token'
+}

src/app/enum/role.enum.ts

@@ -0,0 +1,9 @@
+export enum Role {
+
+  SUPER_ADMIN = 'ROLE_SUPER_ADMIN',
+  ADMIN = 'ROLE_ADMIN',
+  MANAGER = 'ROLE_MANAGER',
+  HR = 'ROLE_HR',
+  USER = 'ROLE_USER'
+
+}

src/app/error.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+@Component({
+    template: `
+        <div class="pt-[82px] lg:pt-[106px]">
+            <div class="flex min-h-[500px] items-center justify-center">
+                <div class="p-5 text-center font-semibold">
+                    <h2 class="mb-8 text-[50px] font-bold leading-none md:text-[80px]">404</h2>
+                    <h4 class="mb-5 text-xl font-semibold text-primary sm:text-5xl">Ooops!</h4>
+                    <p class="text-base">The page you requested was not found!</p>
+                    <a routerLink="/" class="btn mx-auto mt-10 w-max cursor-pointer">Back To Home</a>
+                </div>
+            </div>
+        </div>
+    `,
+})
+export class ErrorComponent {
+    constructor() {}
+}

src/app/event-concert.ts

@@ -0,0 +1,74 @@
+import { Component } from '@angular/core';
+import SwiperCore, { SwiperOptions, Autoplay } from 'swiper';
+import { Store } from '@ngrx/store';
+import { Lightbox, LightboxConfig } from 'ngx-lightbox';
+
+// install Swiper modules
+SwiperCore.use([Autoplay]);
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './event-concert.html',
+})
+export class EventComponent {
+    storeData: any;
+    activeTab = 'all-events';
+    items = [
+        { src: '/assets/images/event-concert/gallery1.jpg', thumb: '/assets/images/event-concert/gallery1.jpg' },
+        { src: '/assets/images/event-concert/gallery2.jpg', thumb: '/assets/images/event-concert/gallery2.jpg' },
+        { src: '/assets/images/event-concert/gallery3.jpg', thumb: '/assets/images/event-concert/gallery3.jpg' },
+        { src: '/assets/images/event-concert/gallery4.jpg', thumb: '/assets/images/event-concert/gallery4.jpg' },
+        { src: '/assets/images/event-concert/gallery5.jpg', thumb: '/assets/images/event-concert/gallery5.jpg' },
+        { src: '/assets/images/event-concert/gallery6.jpg', thumb: '/assets/images/event-concert/gallery6.jpg' },
+    ];
+    constructor(public store: Store<any>, private _lightbox: Lightbox, private _lightboxConfig: LightboxConfig) {
+        this.initStore();
+        _lightboxConfig.enableTransition = false;
+        _lightboxConfig.wrapAround = true;
+        _lightboxConfig.showImageNumberLabel = true;
+        _lightboxConfig.showZoom = true;
+        _lightboxConfig.showRotate = true;
+        _lightboxConfig.albumLabel = '%1 of %2';
+        _lightboxConfig.positionFromTop = 0;
+        _lightboxConfig.disableScrolling = true;
+    }
+    open(img: string): void {
+        // open lightbox
+        const index = this.items.findIndex((d) => d.src.toLowerCase().includes(img.toLowerCase()));
+        this._lightbox.open(this.items, index);
+    }
+
+    config: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        speed: 2500,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        breakpoints: {
+            320: {
+                slidesPerView: 2,
+            },
+            600: {
+                slidesPerView: 3,
+            },
+            1000: {
+                slidesPerView: 4,
+            },
+            1600: {
+                slidesPerView: 6,
+            },
+        },
+        modules: [Autoplay],
+    };
+
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/faq.html

@@ -0,0 +1,556 @@
+<div>
+    <div class="bg-[url(/assets/images/inner-page-hero-bg.png)] bg-cover bg-bottom bg-no-repeat pt-[82px] lg:pt-[106px]">
+        <div class="relative">
+            <div class="container">
+                <div class="items-center justify-between py-10 md:flex md:h-[400px] md:py-0">
+                    <div class="heading relative mb-0 text-center ltr:md:text-left rtl:md:text-right">
+                        <h6>FAQs</h6>
+                        <h4 class="!text-white">Frequently Asked Questions</h4>
+                    </div>
+                    <div class="relative mt-6 md:mt-0" [attr.data-aos]="storeData.direction === 'rtl' ? 'fade-right' : 'fade-left'" data-aos-duration="1000">
+                        <svg
+                            width="250"
+                            height="282"
+                            viewBox="0 0 250 282"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="mx-auto rtl:rotate-y-180 md:mx-0"
+                        >
+                            <path
+                                d="M198.032 126.833L168.578 155.646C160.904 132.685 152.14 126.386 148.276 124.677C144.387 127.633 125.215 131.835 115.322 133.106L93.258 176.589C92.0979 178.888 91.4404 181.408 91.3294 183.981C91.2183 186.555 91.6563 189.122 92.614 191.513C99.5521 208.314 108.015 224.445 117.898 239.702C129.992 238.022 140.212 233.094 146.26 222.594C135.704 207.894 126.856 193.95 120.698 181.266L130.664 164.888L130.246 148.814C136.348 161.416 146.99 174.182 155.248 182.974C157.846 185.728 161.385 187.404 165.162 187.668C168.937 187.933 172.676 186.767 175.632 184.402C189.996 172.95 203.744 160.994 217.408 149.034C216.291 144.009 213.932 139.344 210.548 135.466C207.163 131.588 202.86 128.62 198.032 126.833Z"
+                                fill="#B476E5"
+                            />
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M76.5731 48.9946L65.4306 44.5883C62.5929 46.4706 59.4318 47.8126 56.1066 48.5466C39.8387 52.1866 23.5781 41.1591 23.4308 25.3907C23.2996 12.0628 35.0183 1.1487 49.6342 1.00133C64.2222 0.862808 76.1678 11.5308 76.3211 24.8941C76.3598 29.56 74.9404 34.1217 72.2611 37.942L76.5731 48.9946ZM54.284 20.0233C54.6707 20.1836 55.0222 20.4185 55.3179 20.7147C55.6141 21.0107 55.8492 21.362 56.0094 21.7488C56.1697 22.1355 56.2522 22.5501 56.2522 22.9687C56.2522 23.3874 56.1697 23.8019 56.0094 24.1886C55.8492 24.5755 55.6141 24.9268 55.3179 25.2227L49.9979 30.5147L44.678 25.2227C44.0802 24.6248 43.7444 23.8142 43.7444 22.9687C43.7444 22.1233 44.0802 21.3125 44.678 20.7147C45.2758 20.117 46.0867 19.7812 46.932 19.7812C47.7774 19.7812 48.5882 20.117 49.1859 20.7147L49.9979 21.5267L50.8099 20.7147C51.1059 20.4185 51.4573 20.1836 51.844 20.0233C52.2307 19.863 52.6453 19.7804 53.0639 19.7804C53.4826 19.7804 53.8971 19.863 54.284 20.0233Z"
+                                fill="#B476E5"
+                            />
+                            <path
+                                d="M14.7449 124.118L15.9769 126.61L18.7208 127.002L16.7328 128.934L17.2088 131.677L14.7449 130.389L12.3089 131.677L12.7569 128.934L10.7969 127.002L13.5409 126.61L14.7449 124.118Z"
+                                fill="#B476E5"
+                            />
+                            <path
+                                d="M25.4428 124.118L26.6748 126.61L29.4188 127.002L27.4308 128.934L27.9068 131.677L25.4428 130.389L23.0068 131.677L23.4548 128.934L21.4668 127.002L24.2108 126.61L25.4428 124.118Z"
+                                fill="#B476E5"
+                            />
+                            <path
+                                d="M36.14 124.118L37.372 126.61L40.116 127.002L38.128 128.934L38.604 131.677L36.14 130.389L33.6761 131.677L34.1521 128.934L32.1641 127.002L34.9081 126.61L36.14 124.118Z"
+                                fill="#B476E5"
+                            />
+                            <path
+                                d="M46.8354 124.118L48.0674 126.61L50.8113 127.002L48.8234 128.934L49.2713 131.677L46.8354 130.389L44.3714 131.677L44.8474 128.934L42.8594 127.002L45.6034 126.61L46.8354 124.118Z"
+                                fill="#B476E5"
+                            />
+                            <path
+                                d="M57.5307 124.118L58.7347 126.61L61.4787 127.002L59.4907 128.934L59.9667 131.677L57.5307 130.389L55.0667 131.677L55.5427 128.934L53.5547 127.002L56.2987 126.61L57.5307 124.118Z"
+                                fill="#B476E5"
+                            />
+                            <path
+                                d="M226.534 228.416L216.23 226.932L211.638 217.608L207.046 226.932L196.742 228.416L204.19 235.696L202.426 245.944L211.638 241.1L220.85 245.944L219.086 235.696L226.534 228.416Z"
+                                fill="#B476E5"
+                            />
+                            <path
+                                d="M118.934 68.0625C119.066 68.7074 119.132 69.3642 119.13 70.0225L120.668 67.0545C120.12 67.4394 119.54 67.7767 118.934 68.0625Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M114.931 131.145C114.175 134.897 112.103 133.469 110.535 129.493C111.965 130.134 113.433 130.686 114.931 131.145Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M112.746 116.084C112.055 116.256 111.336 116.286 110.632 116.17C109.93 116.054 109.258 115.795 108.658 115.41C109.302 111.822 111.15 112.528 112.746 116.084Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M94.8256 76.9664L86.9578 89.8463C86.8916 89.9465 86.868 90.069 86.8919 90.1866C86.9159 90.3042 86.9855 90.4076 87.0854 90.4741C87.1855 90.5405 87.3076 90.5647 87.4254 90.5413C87.5431 90.5177 87.6469 90.4486 87.7138 90.3488L96.5897 78.1423C96.6743 78.0268 96.7346 77.8952 96.767 77.7557C96.7994 77.6161 96.8033 77.4715 96.7782 77.3305C96.7532 77.1893 96.7 77.0549 96.6216 76.935C96.5432 76.815 96.4412 76.7123 96.322 76.6329C96.2029 76.5533 96.0688 76.4989 95.9279 76.4725C95.7872 76.4463 95.6425 76.4488 95.5026 76.48C95.3627 76.5111 95.2307 76.5704 95.1144 76.6539C94.998 76.7375 94.8999 76.8437 94.8256 76.9664Z"
+                                fill="#7780A1"
+                            />
+                            <path
+                                d="M115.182 65.2344C115.194 65.6015 115.348 65.9496 115.612 66.2051C115.875 66.4606 116.228 66.6034 116.596 66.6034C116.963 66.6034 117.316 66.4606 117.58 66.2051C117.844 65.9496 117.998 65.6015 118.01 65.2344C117.998 64.8673 117.844 64.5192 117.58 64.2637C117.316 64.0081 116.963 63.8653 116.596 63.8653C116.228 63.8653 115.875 64.0081 115.612 64.2637C115.348 64.5192 115.194 64.8673 115.182 65.2344Z"
+                                fill="#47BDFF"
+                            />
+                            <path d="M135.117 157.521L130.637 164.857L130.217 148.785C131.699 151.779 133.334 154.695 135.117 157.521Z" fill="#47BDFF" />
+                            <path
+                                d="M203.072 124.061L199.936 127.646C205.82 130.23 210.718 134.637 213.907 140.217C216.046 138.682 218.433 137.527 220.963 136.801C229.396 133.49 237.411 129.205 244.847 124.033C236.671 121.318 211.5 123.333 203.072 124.061Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M138.841 231.384C133.808 235.301 127.897 237.935 121.619 239.056L122.629 240.652C124.449 243.48 124.673 246.588 124.951 249.948C125.987 258.951 128.064 267.803 131.141 276.327C135.901 269.106 140.409 244.267 141.865 235.923L138.841 231.384Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M139.704 42.5266C139.704 36.5906 135.562 29.0306 129.598 29.0306C123.66 29.0306 118.51 34.7986 117.78 40.5946C117.593 42.1045 117.818 43.637 118.433 45.0289C116.663 45.219 115.001 45.9742 113.694 47.1827C112.386 48.3912 111.502 49.9887 111.174 51.7385L111.9 51.7105C111.694 53.6912 111.599 55.6818 111.614 57.673C112.816 46.9889 118.942 51.0164 120.832 55.1825C121.274 52.9985 122.4 51.4585 123.718 51.4585H127.664C128.092 51.4743 128.503 51.6209 128.843 51.8785C128.803 51.6943 128.761 51.519 128.716 51.3451C134.607 51.2861 139.704 48.4021 139.704 42.5266Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M139.704 42.5266C139.704 36.5906 135.562 29.0306 129.598 29.0306C123.66 29.0306 118.51 34.7986 117.78 40.5946C117.593 42.1045 117.818 43.637 118.433 45.0289C116.663 45.219 115.001 45.9742 113.694 47.1827C112.386 48.3912 111.502 49.9887 111.174 51.7385L111.9 51.7105C111.694 53.6912 111.599 55.6818 111.614 57.673C112.816 46.9889 118.942 51.0164 120.832 55.1825C121.274 52.9985 122.4 51.4585 123.718 51.4585H127.664C128.092 51.4743 128.503 51.6209 128.843 51.8785C128.803 51.6943 128.761 51.519 128.716 51.3451C134.607 51.2861 139.704 48.4021 139.704 42.5266Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M112.215 230.516C93.3882 227.833 75.9498 219.083 62.543 205.596"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M211.641 154.049C209.427 172.652 201.314 190.059 188.492 203.719C175.668 217.378 158.809 226.573 140.381 229.956"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M202.598 103.734C205.236 108.859 207.356 114.234 208.926 119.78"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M39.3589 168.217V139.405H62.0948C63.1501 139.405 64.1621 138.985 64.9084 138.239C65.6545 137.493 66.0737 136.481 66.0737 135.426V120.338C66.0737 119.816 65.9707 119.3 65.7706 118.818C65.5703 118.336 65.2771 117.899 64.9073 117.531C64.5377 117.162 64.0989 116.871 63.6162 116.673C63.1336 116.474 62.6166 116.374 62.0948 116.376H10.183C9.65959 116.376 9.1413 116.48 8.65793 116.681C8.17456 116.882 7.73556 117.176 7.36625 117.547C6.9968 117.918 6.70428 118.358 6.50548 118.843C6.30653 119.327 6.20514 119.846 6.20706 120.369V135.429C6.20706 136.484 6.62632 137.496 7.37244 138.242C8.11871 138.988 9.13069 139.408 10.186 139.408H32.9189V170.622"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path d="M39.3594 185.8V179.024" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+                            <path
+                                d="M32.9199 189.231V205.652H39.3599V187.173"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M39.3598 153.232H61.6477C64.2022 153.232 66.6522 154.248 68.4585 156.053C70.2648 157.86 71.2797 160.31 71.2797 162.864V195.988C71.2804 198.545 70.2664 200.996 68.4602 202.805C66.6541 204.613 64.2038 205.632 61.6477 205.635H10.632C9.36769 205.636 8.1155 205.389 6.94717 204.905C5.77869 204.423 4.71691 203.715 3.82224 202.821C2.92772 201.928 2.21799 200.867 1.73374 199.7C1.24949 198.532 1.00015 197.28 1 196.016V162.858C1 160.304 2.01477 157.854 3.82106 156.047C5.62735 154.242 8.07734 153.226 10.632 153.226H32.9197"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M36.3061 184.18C39.6366 183.917 39.7221 179.863 36.5021 179.896C34.0941 179.921 32.4141 180.009 30.5101 180.092C27.3182 180.239 27.3476 184.488 29.9782 184.6C32.0933 184.569 34.2054 184.427 36.3061 184.18Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M33.8244 170.653C32.672 170.625 31.8129 170.625 30.7297 170.625C27.6777 170.597 27.5657 174.853 30.0857 175.105C31.3541 175.189 32.6268 175.189 33.8952 175.105"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M37.0627 188.748C40.2812 188.397 40.2827 184.492 37.1747 184.604C34.8507 184.688 33.2267 184.831 31.3787 184.968C28.2987 185.196 28.4107 189.299 30.9587 189.336C33.0023 189.247 35.0398 189.051 37.0627 188.748Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M33.9063 175.19C32.695 175.22 31.6442 175.33 30.4564 175.357C27.2143 175.441 27.1539 179.758 29.8404 179.925C31.4615 180.024 33.1724 179.813 36.2804 179.645C36.7443 179.658 37.2 179.52 37.5787 179.252C37.9576 178.983 38.2392 178.6 38.3811 178.158C38.5232 177.716 38.518 177.24 38.3664 176.801C38.2148 176.363 37.925 175.984 37.5404 175.725"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M71.279 173.369C69.683 173.565 54.0869 173.958 45.799 173.845C43.923 173.818 44.0851 170.825 43.5884 170.065C42.2621 168.032 41.8524 168.044 37.8765 168.296C33.2005 168.591 33.6309 168.8 33.9846 176.808C34.0716 178.768 37.4846 178.992 38.1286 172.776C37.5966 177.564 39.7806 180.84 43.0006 181.876"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M71.2792 190.112C67.2473 190 49.8873 189.888 39.3594 189.692"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M14.7449 124.118L15.9769 126.61L18.7208 127.002L16.7329 128.934L17.2088 131.677L14.7449 130.389L12.3089 131.677L12.7569 128.934L10.7969 127.002L13.5409 126.61L14.7449 124.118Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M25.4428 124.118L26.6748 126.61L29.4188 127.002L27.4308 128.934L27.9068 131.677L25.4428 130.389L23.0068 131.677L23.4548 128.934L21.4668 127.002L24.2108 126.61L25.4428 124.118Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M36.14 124.118L37.372 126.61L40.116 127.002L38.128 128.934L38.604 131.677L36.14 130.389L33.6761 131.677L34.1521 128.934L32.1641 127.002L34.908 126.61L36.14 124.118Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M46.8354 124.118L48.0674 126.61L50.8113 127.002L48.8234 128.934L49.2713 131.677L46.8354 130.389L44.3714 131.677L44.8474 128.934L42.8594 127.002L45.6034 126.61L46.8354 124.118Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M57.5307 124.118L58.7347 126.61L61.4787 127.002L59.4907 128.934L59.9667 131.677L57.5307 130.389L55.0667 131.677L55.5427 128.934L53.5547 127.002L56.2987 126.61L57.5307 124.118Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M210.351 89.9864C207.019 89.87 206.739 85.8424 209.959 85.7304C212.367 85.6464 214.047 85.6744 215.979 85.6744C219.171 85.6744 219.337 89.9481 216.707 90.1544C215.111 90.2826 213.431 90.094 210.351 89.9864Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M210.634 94.3263C207.415 93.9741 207.414 90.0704 210.522 90.1824C212.846 90.2664 213.126 90.2413 214.943 90.3784C218.023 90.6083 217.911 94.708 215.363 94.7463C213.779 94.7208 212.197 94.5804 210.634 94.3263Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M199.516 87.9145C204.163 88.504 207.439 82.3705 205.479 78.0305C205.479 78.0305 205.255 74.3625 204.471 68.7626C203.687 63.1626 200.607 62.7706 200.691 64.1146C200.775 65.4586 199.74 72.8771 198.62 75.0625C197.416 77.4131 193.748 77.4602 191.788 77.4705C186.132 77.4985 167.932 76.3785 167.932 76.3785"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M168.102 96.0064C173.73 95.8384 210.857 95.1944 214.973 94.7744"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M210.717 81.1945C207.497 81.4701 206.738 77.6444 209.821 77.1625C212.119 76.803 213.741 76.6276 215.589 76.4065C218.669 76.0381 219.335 80.0701 216.821 80.6065C214.798 80.907 212.761 81.1033 210.717 81.1945Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M210.183 85.6744C206.941 85.7039 206.487 81.8119 209.623 81.5864C211.947 81.4184 215.37 81.3108 217.211 81.2504C220.291 81.1473 220.656 85.2411 218.107 85.5344C216.568 85.7112 213.151 85.6464 210.183 85.6744Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M205.004 73.0184C205.368 77.3024 205.564 76.9974 215.588 76.4079"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M228.581 58.7105C231.135 58.7105 233.586 59.7253 235.392 61.5317C237.198 63.338 238.213 65.7879 238.213 68.3425V94.0744C238.214 96.6303 237.199 99.0821 235.394 100.891C233.587 102.699 231.136 103.717 228.581 103.72H177.565C176.301 103.722 175.048 103.474 173.878 102.992C172.709 102.51 171.647 101.802 170.751 100.909C169.855 100.016 169.145 98.955 168.658 97.7872C168.172 96.6193 167.921 95.3672 167.92 94.1024V68.3484C167.918 67.0843 168.166 65.8322 168.648 64.6637C169.131 63.4953 169.839 62.4335 170.732 61.539C171.625 60.6443 172.686 59.9346 173.853 59.4503C175.022 58.9661 176.273 58.7166 177.537 58.7164L228.581 58.7105Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M118.934 68.0625C119.544 67.7847 120.125 67.4471 120.668 67.0545L119.13 70.0225"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M124.111 62.9385C124.239 65.3339 124.799 67.6863 125.763 69.8825C126.686 72.0438 128.237 73.8779 130.215 75.1465C132.536 76.5509 140.772 76.433 144.047 82.4265C147.016 87.857 150.345 105.554 151.857 115.914C152.164 118.019 151.735 120.165 150.643 121.99C149.551 123.815 147.864 125.209 145.865 125.935C135.417 129.614 124.583 132.093 113.574 133.324"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M120.841 55.1826C118.91 50.9266 112.871 46.3051 111.882 57.8706C111.576 60.3279 111.69 62.8196 112.218 65.2389C113.449 69.7749 116.866 69.0469 118.938 68.0669C119.071 68.7118 119.136 69.3686 119.134 70.0269C119.231 71.2679 118.908 72.5057 118.218 73.5414C117.527 74.5772 116.509 75.351 115.326 75.7389C113.475 76.377 105.452 77.105 101.522 86.7429C100.23 89.9054 99.4501 93.7148 97.9941 96.7108"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M129.656 97.9103L131.952 109.474L110.029 113.058"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M112.746 116.084C111.5 116.345 110.204 116.197 109.05 115.662C107.09 114.402 105.66 111.207 104.122 106.982C101.911 100.958 101.602 103.51 101.35 105.803C101.121 106.944 101.845 113.635 99.0818 112.075C95.5343 108.826 91.6804 105.928 87.5738 103.422C82.3275 100.697 82.0033 102.187 86.0058 105.858C87.2358 106.979 88.4042 108.166 89.5058 109.414C90.8467 110.92 92.0905 112.51 93.2298 114.174C94.9245 116.897 98.0458 122.04 101.854 124.646C105.888 127.411 110.289 129.597 114.93 131.14"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M97.5988 120.59C95.9188 117.734 90.8464 114.769 88.4207 112.559C86.7658 111.05 83.6269 108.875 81.8128 107.295C81.3633 106.904 81.5328 105.839 84.9767 107.351C85.7416 107.69 88.3736 108.863 89.5569 109.473"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M88.2197 112.379C87.614 112.214 87.0938 112.084 86.8182 112.022C83.1782 111.098 83.1768 112.192 83.6822 112.498C85.7218 113.736 89.2041 115.4 91.0742 116.614C93.8197 118.199 96.424 120.016 98.8582 122.046"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M108.662 115.382C109.184 112.52 110.482 112.422 111.798 114.351C114.392 118.14 116.219 128.407 114.598 132.297C113.676 134.518 111.91 132.991 110.534 129.497"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M108.071 128.318L109.835 133.861L84.131 126.834L69.9629 85.8144L96.7308 92.7303L101.295 107.066"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M81.721 88.8664L80.293 83.6864L84.353 84.6664L85.277 89.7904"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M122.041 62.0425C120.859 63.1725 119.471 64.0659 117.953 64.6745"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M106.671 93.8503C106.671 93.8503 106.115 101.618 109.247 107.261L112.271 112.693"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M115.277 133.139L93.2309 176.561C92.0693 178.86 91.411 181.38 91.3001 183.953C91.189 186.527 91.6277 189.094 92.5869 191.485C99.5154 208.29 107.979 224.423 117.871 239.674C129.965 237.994 140.185 233.066 146.233 222.566C135.677 207.866 126.829 193.922 120.671 181.238L135.113 157.522C141.019 166.612 147.76 175.133 155.245 182.974C157.843 185.727 161.381 187.402 165.158 187.666C168.934 187.932 172.672 186.766 175.628 184.402C189.987 172.943 203.74 160.994 217.404 149.034C216.293 144.007 213.937 139.34 210.553 135.461C207.168 131.582 202.864 128.615 198.033 126.833L168.543 155.624C160.88 132.682 152.113 126.385 148.249 124.677"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M130.636 164.857L130.244 148.785C131.706 151.785 133.331 154.702 135.116 157.521"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M203.072 124.061C211.472 123.336 236.478 121.333 244.777 124.03"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M199.908 127.646L206.488 120.17C219.872 117.902 241.516 117.426 248.93 121.094C240.807 127.032 230.362 133.461 220.958 136.801C218.428 137.527 216.042 138.682 213.902 140.217"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M138.785 231.356L144.749 240.232C143.517 253.756 138.421 274.812 132.96 281C128.884 271.064 126.19 260.616 124.952 249.948C124.676 246.588 124.449 243.48 122.629 240.652L121.598 239.031"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M84.9707 88.0263C84.9707 88.0263 89.4507 86.7383 93.1187 91.8063"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M110.954 77.0505C110.636 77.253 110.392 77.5517 110.258 77.9031C110.123 78.2544 110.104 78.6398 110.204 79.0024C110.304 79.3652 110.518 79.6862 110.814 79.9185C111.111 80.1507 111.473 80.2819 111.85 80.2926C112.162 80.2912 112.468 80.2042 112.734 80.0414C113.001 79.8785 113.218 79.6458 113.362 79.3686C112.35 78.8471 111.513 78.0413 110.954 77.0505Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M113.276 80.0745C113.275 80.4754 113.415 80.864 113.672 81.1717C113.929 81.4795 114.286 81.6869 114.681 81.7573C115.075 81.8278 115.482 81.7567 115.83 81.5568C116.177 81.3568 116.443 81.0407 116.58 80.664C115.501 80.2978 114.444 79.8676 113.416 79.376C113.317 79.595 113.269 79.834 113.276 80.0745Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M116.5 81.1694C116.499 81.5914 116.653 81.999 116.933 82.3146C117.214 82.6301 117.6 82.8312 118.02 82.8797C118.439 82.9282 118.861 82.8206 119.206 82.5775C119.551 82.3342 119.794 81.9725 119.89 81.5614C118.77 81.3447 117.667 81.0547 116.586 80.6934C116.528 80.8453 116.499 81.0068 116.5 81.1694Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M119.773 81.8104C119.757 82.2582 119.919 82.6942 120.223 83.0231C120.528 83.3519 120.95 83.5468 121.398 83.5652C121.845 83.5838 122.282 83.4244 122.613 83.1217C122.943 82.8191 123.141 82.3981 123.162 81.9504C122.033 81.895 120.911 81.7545 119.804 81.5304C119.808 81.6114 119.773 81.7264 119.773 81.8104Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M123.191 81.9504C123.191 82.3912 123.364 82.8142 123.673 83.1286C123.982 83.4428 124.403 83.623 124.843 83.6304C125.073 83.6327 125.3 83.5869 125.512 83.4958C125.723 83.4047 125.912 83.2704 126.068 83.1015C126.223 82.9326 126.342 82.7329 126.416 82.5154C126.489 82.2977 126.516 82.0671 126.495 81.8384C125.399 81.9595 124.294 81.9969 123.191 81.9504Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M128.256 83.2325C128.521 83.2316 128.782 83.1694 129.02 83.0511C129.257 82.9326 129.463 82.7609 129.624 82.5496C129.783 82.3382 129.892 82.0927 129.942 81.8323C129.991 81.5721 129.979 81.3037 129.908 81.0485C128.826 81.4154 127.709 81.6687 126.576 81.8045C126.642 82.2022 126.849 82.5636 127.155 82.8248C127.463 83.0861 127.852 83.2304 128.256 83.2325Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M131.477 82.1465C131.776 82.1468 132.069 82.0689 132.327 81.9202C132.587 81.7716 132.802 81.5575 132.952 81.2996C133.102 81.0417 133.182 80.7487 133.183 80.4502C133.185 80.1518 133.108 79.8581 132.961 79.5985C131.988 80.1992 130.957 80.6966 129.881 81.0825C130.015 81.3957 130.237 81.6632 130.52 81.8521C130.803 82.041 131.136 82.1433 131.477 82.1465Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M135.033 76.7704C135.428 76.8914 135.765 77.1489 135.986 77.4968C136.207 77.8446 136.297 78.2599 136.24 78.6681C136.184 79.0765 135.982 79.4509 135.674 79.7243C135.364 79.9977 134.97 80.1521 134.557 80.1599C134.267 80.1839 133.975 80.1465 133.699 80.05C133.424 79.9536 133.173 79.8002 132.961 79.5999C133.895 78.8614 134.611 77.8837 135.033 76.7704Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path d="M186.971 33.2867V48.0986" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M194.392 40.6787H179.58" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+                            <path
+                                d="M125.736 61.6226C127.739 64.6937 130.776 62.1266 130.776 57.2016C130.776 52.3016 127.72 49.7123 125.736 52.7805C125.008 54.1403 124.627 55.6591 124.627 57.2016C124.627 58.7441 125.008 60.2627 125.736 61.6226Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M127.696 51.4306H123.75C122.036 51.4306 120.666 54.0214 120.67 57.1986C120.674 60.3759 122.042 62.946 123.75 62.946H127.447"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M111.15 51.7666C109.806 51.8226 108.546 54.4826 108.712 57.6466C108.882 60.6706 110.282 63.0992 111.876 63.2186C111.431 59.4038 111.449 55.5491 111.931 51.7386L111.15 51.7666Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M111.627 51.5707C111.904 49.9862 112.752 48.5583 114.012 47.5573C115.27 46.5562 116.853 46.0516 118.459 46.1387C120.077 46.0886 121.666 46.5829 122.97 47.5422C124.274 48.5016 125.219 49.8708 125.653 51.4307"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M55.3198 20.6866C55.0239 20.3904 54.6724 20.1555 54.2857 19.9952C53.899 19.8349 53.4845 19.7523 53.0658 19.7523C52.6471 19.7523 52.2326 19.8349 51.8457 19.9952C51.459 20.1555 51.1076 20.3904 50.8118 20.6866L49.9998 21.5266L49.1878 20.6866C48.5899 20.0889 47.7791 19.7531 46.9338 19.7531C46.0884 19.7531 45.2775 20.0889 44.6798 20.6866C44.0819 21.2844 43.7461 22.0952 43.7461 22.9406C43.7461 23.7861 44.0819 24.5969 44.6798 25.1946L49.9998 30.5146L55.3198 25.1946C55.6158 24.8987 55.8509 24.5474 56.0112 24.1605C56.1714 23.7739 56.2539 23.3593 56.2539 22.9406C56.2539 22.522 56.1714 22.1074 56.0112 21.7207C55.8509 21.3339 55.6158 20.9826 55.3198 20.6866Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M65.4306 44.5883L76.5731 48.9946L72.2611 37.942C74.9404 34.1218 76.3598 29.56 76.3211 24.8941C76.1678 11.5308 64.2222 0.862808 49.6342 1.00133C35.0183 1.1487 23.2996 12.0628 23.4308 25.3907C23.5781 41.159 39.8387 52.1866 56.1066 48.5466C59.4318 47.8126 62.5929 46.4706 65.4306 44.5883Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M226.534 228.416L216.23 226.932L211.638 217.608L207.046 226.932L196.742 228.416L204.19 235.696L202.426 245.944L211.638 241.1L220.85 245.944L219.086 235.696L226.534 228.416Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M130.775 56.3306C143.848 57.2233 156.551 61.0618 167.931 67.5585"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M41.3477 116.39C46.2687 101.448 55.1167 88.1033 66.965 77.7536C78.8134 67.4042 93.2263 60.4304 108.695 57.5626"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path d="M207.497 132.461L191.537 147.385" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M137.075 232.448L125.203 214.08" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+                            <path
+                                d="M138.449 133.105C140.605 134.672 143.057 135.784 145.657 136.371C148.257 136.958 150.949 137.009 153.569 136.521"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path d="M46.834 219.092V222.352" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M53.1758 225.435H49.916" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M46.834 231.776V228.516" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M40.4922 225.435H43.7534" stroke="white" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
+                            <path
+                                d="M49.9168 225.435C49.512 225.435 49.111 225.355 48.7369 225.201C48.3627 225.046 48.0227 224.819 47.7365 224.533C47.4503 224.246 47.2234 223.907 47.0688 223.532C46.9141 223.158 46.8348 222.757 46.8354 222.352C46.8361 222.757 46.757 223.158 46.6024 223.532C46.4479 223.907 46.221 224.247 45.9347 224.533C45.6485 224.819 45.3083 225.047 44.9342 225.202C44.56 225.357 44.1589 225.435 43.7539 225.435C44.1587 225.435 44.5597 225.513 44.9339 225.668C45.3079 225.823 45.6479 226.05 45.9342 226.337C46.2204 226.623 46.4473 226.962 46.6021 227.336C46.7567 227.71 46.836 228.111 46.8354 228.516C46.8351 228.111 46.9145 227.71 47.0691 227.336C47.2238 226.963 47.4508 226.623 47.7371 226.337C48.0233 226.051 48.3631 225.824 48.7371 225.669C49.1112 225.515 49.512 225.435 49.9168 225.435Z"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M141.865 235.92C140.415 244.233 135.935 268.914 131.195 276.243"
+                                stroke="white"
+                                stroke-width="0.75"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <section class="bg-gradient-to-t from-white to-transparent py-14 dark:bg-none lg:py-[100px]">
+        <faq-component></faq-component>
+    </section>
+
+    <contactus-component></contactus-component>
+
+    <testimonial mainClass="py-14 lg:py-[100px]"></testimonial>"
+</div>

src/app/faq.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './faq.html',
+})
+export class FaqComponent {
+    storeData: any;
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/generate.yml

@@ -0,0 +1,36 @@
+
+ng generate module pages/xyz --routing
+ng generate component pages/xyz/header
+ng generate component pages/xyz/navbar
+ng generate component pages/xyz/mobile-nav
+ng generate component pages/xyz/dropdown-menu
+ng generate component pages/xyz/logo
+ng generate component pages/xyz/sidebar-modal
+ng generate component pages/xyz/responsive-menu-toggle
+ng generate component pages/xyz/home
+ng generate component pages/xyz/home-two
+ng generate component pages/xyz/home-three
+ng generate component pages/xyz/home-four
+ng generate component pages/xyz/home-five
+ng generate component pages/xyz/graduate-admission
+ng generate component pages/xyz/campus-life
+ng generate component pages/xyz/alumni
+ng generate component pages/xyz/academics
+ng generate component pages/xyz/academics-details
+ng generate component pages/xyz/latest-news
+ng generate component pages/xyz/news-details
+ng generate component pages/xyz/faq
+ng generate component pages/xyz/login
+ng generate component pages/xyz/register
+ng generate component pages/xyz/recover-password
+ng generate component pages/xyz/privacy-policy
+ng generate component pages/xyz/terms-conditions
+ng generate component pages/xyz/coming-soon
+ng generate component pages/xyz/not-found
+ng generate component pages/xyz/courses
+ng generate component pages/xyz/courses-details
+ng generate component pages/xyz/health-care
+ng generate component pages/xyz/health-care-details
+ng generate component pages/xyz/events
+ng generate component pages/xyz/events-details
+ng generate component pages/xyz/contact-us

src/app/gym.html

@@ -0,0 +1,439 @@
+<div>
+    <div class="relative overflow-hidden bg-black pt-[106px]">
+        <div class="absolute bottom-0 z-[1] h-4 w-[calc(100%_+_100px)] bg-secondary xl:-bottom-44 xl:h-80 ltr:xl:-rotate-6 rtl:xl:rotate-6"></div>
+        <img src="/assets/images/gym/fitness-text.svg" alt="" class="absolute top-32 hidden h-4/5 ltr:left-0 rtl:right-0 xl:block" />
+        <div class="container">
+            <div class="relative pb-14 pt-10 md:pt-16 xl:pb-52">
+                <img src="/assets/images/gym/banner-gradiant.svg" alt="" class="absolute top-0 ltr:-left-80 rtl:-right-80" />
+                <div class="relative z-[1] text-center xl:w-3/5 xl:ltr:text-left xl:rtl:text-right">
+                    <h2 class="text-border-white pr-3 text-3xl font-black uppercase italic tracking-[0.06em] sm:text-5xl sm:leading-normal lg:text-[80px]">
+                        <span>Nothing but </span>
+                        <span class="bg-gradient-to-r from-secondary to-primary bg-clip-text text-transparent">gains here.</span>
+                    </h2>
+                    <p class="text-lg leading-8">
+                        Accumsan vulputate sed id blandit duis pellentesque nullam diam purus. Quisque diam pharetra, tristique non arcu eu. Integer.
+                    </p>
+                    <div class="mt-10 flex items-center justify-center gap-8 xl:justify-start">
+                        <a
+                            href="javascript:"
+                            class="rounded-full border-2 border-white py-4 px-6 text-sm font-extrabold uppercase tracking-[4px] text-white transition hover:bg-white hover:text-black"
+                            >start now</a
+                        >
+                        <a href="javascript:" class="group flex items-center gap-2.5 text-sm font-extrabold text-white">
+                            <span>LEARN MORE</span>
+                            <span class="relative transition-all ltr:left-0 ltr:group-hover:left-2 rtl:right-0 rtl:group-hover:right-2">
+                                <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
+                                    <path d="M2 11.0001L11.0909 1.90918" stroke="white" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="round" />
+                                    <path d="M4.61365 1H12V8.38636" stroke="white" stroke-width="1.8" stroke-linecap="square" />
+                                </svg>
+                            </span>
+                        </a>
+                    </div>
+                    <div class="mt-12 uppercase text-white xl:mt-20">
+                        <h4 class="text-xl font-extrabold tracking-[1px]">what you get</h4>
+                        <div class="mt-7 grid gap-4 text-xs leading-5 tracking-[1px] sm:grid-cols-2 md:grid-cols-3">
+                            <div class="flex items-center gap-4 rounded-full bg-gray-dark py-4 px-6">
+                                <img src="/assets/images/gym/customized-icon.svg" alt="" />
+                                <p>Customised fitness plan</p>
+                            </div>
+                            <div class="flex items-center gap-4 rounded-full bg-gray-dark py-4 px-6">
+                                <img src="/assets/images/gym/bettery-icon.svg" alt="" />
+                                <p>keep you feet and strong</p>
+                            </div>
+                            <div class="flex items-center gap-4 rounded-full bg-gray-dark py-4 px-6">
+                                <img src="/assets/images/gym/training-icon.svg" alt="" />
+                                <p>High Intensity Training</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bottom-0 z-[1] mx-auto mt-10 h-[93%] ltr:-right-56 rtl:-left-56 rtl:rotate-y-180 sm:w-1/2 xl:absolute xl:mx-0 xl:mt-0 xl:w-auto">
+                    <img src="/assets/images/gym/runner-girl.png" alt="" class="h-full" data-aos="fade-left" data-aos-duration="1000" />
+                </div>
+                <div class="absolute top-0 hidden h-full w-[690px] ltr:-right-52 rtl:-left-52 rtl:rotate-y-180 xl:block">
+                    <img src="/assets/images/gym/banner-line.png" alt="" class="h-full w-full" />
+                </div>
+            </div>
+        </div>
+    </div>
+    <section class="bg-white py-14 dark:bg-gray-dark md:py-24">
+        <div class="container">
+            <div class="flex flex-col justify-between gap-x-4 lg:flex-row">
+                <div class="font-semibold uppercase italic lg:w-1/2">
+                    <img src="/assets/images/gym/01.svg" alt="" data-aos="fade-down" data-aos-duration="1500" />
+                    <h2 class="mb-3 -mt-6 text-4xl font-black md:-mt-10 md:text-6xl md:leading-normal">
+                        <span class="text-black dark:text-white">our </span>
+                        <span class="text-border-gray tracking-wider">popular </span>
+                        <span class="bg-gradient-to-r from-secondary to-primary bg-clip-text pr-4 text-transparent">classes</span>
+                    </h2>
+                    <p class="leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
+                </div>
+                <div class="mt-10 text-center lg:mt-20 lg:ltr:text-left lg:rtl:text-right">
+                    <a
+                        href="javascript:"
+                        class="rounded-full border-2 border-black py-4 px-6 text-sm font-extrabold uppercase tracking-[4px] text-black transition hover:bg-black hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-black"
+                        >more services</a
+                    >
+                </div>
+            </div>
+            <div class="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+                <div class="group">
+                    <div class="overflow-hidden rounded-t-full bg-gradient-to-b from-gray/20 to-transparent p-1 pb-0 sm:h-96">
+                        <img
+                            src="/assets/images/gym/service1.jpg"
+                            alt=""
+                            class="h-full w-full rounded-t-full object-cover transition duration-500 group-hover:scale-110"
+                        />
+                    </div>
+                    <div class="mt-5 italic">
+                        <h5 class="text-lg font-black text-black dark:text-white">Pilates Training</h5>
+                        <p class="mb-4 mt-2 font-semibold line-clamp-2">Controlled movements that enhance your balance, core strength, flexibility.</p>
+                        <a href="javascript:" class="text-sm font-extrabold uppercase text-secondary transition hover:text-primary">read more</a>
+                    </div>
+                </div>
+                <div class="group">
+                    <div class="overflow-hidden rounded-t-full bg-gradient-to-b from-gray/20 to-transparent p-1 pb-0 sm:h-96">
+                        <img
+                            src="/assets/images/gym/service2.jpg"
+                            alt=""
+                            class="h-full w-full rounded-t-full object-cover transition duration-500 group-hover:scale-110"
+                        />
+                    </div>
+                    <div class="mt-5 italic">
+                        <h5 class="text-lg font-black text-black dark:text-white">Aerobic Training</h5>
+                        <p class="mb-4 mt-2 font-semibold line-clamp-2">Physical activity that increases the heart rate and the body's use of oxygen.</p>
+                        <a href="javascript:" class="text-sm font-extrabold uppercase text-secondary transition hover:text-primary">read more</a>
+                    </div>
+                </div>
+                <div class="group">
+                    <div class="overflow-hidden rounded-t-full bg-gradient-to-b from-gray/20 to-transparent p-1 pb-0 sm:h-96">
+                        <img
+                            src="/assets/images/gym/service3.jpg"
+                            alt=""
+                            class="h-full w-full rounded-t-full object-cover transition duration-500 group-hover:scale-110"
+                        />
+                    </div>
+                    <div class="mt-5 italic">
+                        <h5 class="text-lg font-black text-black dark:text-white">CrossFit Workout</h5>
+                        <p class="mb-4 mt-2 font-semibold line-clamp-2">Strength and conditioning workout that is made up of functional movement.</p>
+                        <a href="javascript:" class="text-sm font-extrabold uppercase text-secondary transition hover:text-primary">read more</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="py-14 dark:bg-black md:py-20">
+        <div class="container">
+            <div class="grid items-center gap-5 lg:grid-cols-2">
+                <div class="group overflow-hidden lg:order-2 lg:h-[500px]" data-aos="fade-left" data-aos-duration="1000">
+                    <img
+                        src="/assets/images/gym/02-image.jpg"
+                        alt=""
+                        class="h-full w-full object-cover transition duration-500 group-hover:rotate-6 group-hover:scale-125"
+                    />
+                </div>
+                <div class="mt-8 lg:mt-0">
+                    <div class="font-semibold uppercase italic">
+                        <img src="/assets/images/gym/02.svg" alt="" data-aos="fade-down" data-aos-duration="1500" />
+                        <h2 class="mb-3 -mt-6 text-4xl font-black md:-mt-10 md:text-6xl md:leading-normal">
+                            <span class="text-black dark:text-white">why </span>
+                            <span class="text-border-gray tracking-wider">choose </span>
+                            <span class="bg-gradient-to-r from-secondary to-primary bg-clip-text pr-4 text-transparent">plurk</span>
+                        </h2>
+                        <p class="leading-loose">
+                            It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+                            publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                        </p>
+                    </div>
+                    <div class="mt-10">
+                        <a
+                            href="javascript:"
+                            class="rounded-full border-2 border-black py-4 px-6 text-sm font-extrabold uppercase tracking-[4px] text-black transition hover:bg-black hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-black"
+                            >learn more</a
+                        >
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-[url(/assets/images/gym/features-bg.png)] bg-cover bg-center bg-no-repeat py-14 md:py-20">
+        <div class="container">
+            <div class="grid lg:grid-cols-2">
+                <div class="relative h-[350px]" data-aos="fade-up" data-aos-duration="1000">
+                    <span class="absolute inset-0 bg-gradient-to-t from-primary to-transparent"></span>
+                    <img src="/assets/images/gym/coaches.jpg" alt="" class="h-full w-full object-cover" />
+                    <h5 class="absolute bottom-5 text-2xl font-black uppercase italic text-white ltr:left-7 rtl:right-7">best coaches</h5>
+                </div>
+                <div class="relative h-[350px]" data-aos="fade-up" data-aos-duration="1000">
+                    <span class="absolute inset-0 bg-gradient-to-t from-secondary to-transparent"></span>
+                    <img src="/assets/images/gym/prices.jpg" alt="" class="h-full w-full object-cover" />
+                    <h5 class="absolute bottom-5 text-2xl font-black uppercase italic text-white ltr:left-7 rtl:right-7">nice prices</h5>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="overflow-x-hidden bg-white dark:bg-black">
+        <div class="grid items-center lg:grid-cols-2">
+            <div class="h-full lg:order-2 xl:h-[640px]" data-aos="fade-left" data-aos-duration="1500">
+                <img src="/assets/images/gym/journey.jpg" alt="" class="h-full w-full object-cover" />
+            </div>
+            <div class="px-4 py-10 ltr:xl:mr-24 rtl:xl:ml-24">
+                <div class="font-semibold uppercase italic lg:max-w-[610px] ltr:lg:ml-auto rtl:lg:mr-auto">
+                    <img src="/assets/images/gym/03.svg" alt="" data-aos="fade-down" data-aos-duration="1500" />
+                    <h2 class="mb-3 -mt-6 text-4xl font-black md:-mt-10 md:text-6xl md:leading-normal">
+                        <span class="text-black dark:text-white">JUMPSTART </span>
+                        <span class="text-border-gray tracking-wider">YOUR </span>
+                        <span class="bg-gradient-to-r from-secondary to-primary bg-clip-text pr-4 text-transparent">JOURNEY</span>
+                    </h2>
+                    <p class="leading-loose line-clamp-5">
+                        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+                        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="grid items-center lg:grid-cols-2">
+            <div class="order-2 px-4 py-10 ltr:xl:ml-24 rtl:xl:mr-24">
+                <div class="font-semibold uppercase italic lg:max-w-[610px]">
+                    <img src="/assets/images/gym/04.svg" alt="" data-aos="fade-down" data-aos-duration="1500" />
+                    <h2 class="mb-3 -mt-6 text-4xl font-black md:-mt-10 md:text-6xl md:leading-normal">
+                        <span class="text-black dark:text-white">TRANSFORM </span>
+                        <span class="text-border-gray tracking-wider">YOUR </span>
+                        <span class="bg-gradient-to-r from-secondary to-primary bg-clip-text pr-4 text-transparent">FITNESS</span>
+                    </h2>
+                    <p class="leading-loose line-clamp-5">
+                        4 rooms, 5 unique workouts, 1 location. plurk offers unrivaled fitness programming. Personal workout stations allow for a safe and
+                        comfortable experience. Small class sizes offer a greater level of instructor and group engagement.
+                    </p>
+                </div>
+            </div>
+            <div class="h-full xl:h-[640px]" data-aos="fade-right" data-aos-duration="1500">
+                <img src="/assets/images/gym/fitness.jpg" alt="" class="h-full w-full object-cover" />
+            </div>
+        </div>
+        <div class="grid items-center lg:grid-cols-2">
+            <div class="h-full lg:order-2 xl:h-[640px]" data-aos="fade-left" data-aos-duration="1500">
+                <img src="/assets/images/gym/evolve-togather.jpg" alt="" class="h-full w-full object-cover" />
+            </div>
+            <div class="px-4 py-10 ltr:xl:mr-24 rtl:xl:ml-24">
+                <div class="font-semibold uppercase italic lg:max-w-[610px] ltr:lg:ml-auto rtl:lg:mr-auto">
+                    <img src="/assets/images/gym/05.svg" alt="" data-aos="fade-down" data-aos-duration="1500" />
+                    <h2 class="mb-3 -mt-6 text-4xl font-black md:-mt-10 md:text-6xl md:leading-normal">
+                        <span class="text-black dark:text-white">EVOLVE </span>
+                        <span class="text-border-gray tracking-wider">TO</span
+                        ><span class="bg-gradient-to-r from-secondary to-primary bg-clip-text pr-4 text-transparent">GETHER</span>
+                    </h2>
+                    <p class="leading-loose line-clamp-5">
+                        You can push yourself further with plurk. Our coaches are passionate and supportive, and our studio is outfitted with innovative
+                        lighting and sound systems to fuel your workout.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="py-14 uppercase italic dark:bg-gray-dark md:py-20">
+        <div class="container">
+            <div class="font-semibold">
+                <img src="/assets/images/gym/06.svg" alt="" data-aos="fade-down" data-aos-duration="1500" />
+                <h2 class="mb-3 -mt-6 text-4xl font-black md:-mt-10 md:text-6xl md:leading-normal">
+                    <span class="text-black dark:text-white">OUR </span>
+                    <span class="text-border-gray tracking-wider">FITNESS </span>
+                    <span class="bg-gradient-to-r from-secondary to-primary bg-clip-text pr-4 text-transparent">COACHES</span>
+                </h2>
+                <p class="leading-loose xl:w-1/2">plurk is more than another workout, it's a comprehensive approach to fitness.</p>
+            </div>
+            <div class="mt-12 grid gap-7 sm:grid-cols-2 lg:grid-cols-4">
+                <div
+                    class="group relative flex h-[300px] items-end justify-center overflow-hidden bg-[rgba(119,128,161,0.1)] px-4 pt-6"
+                    data-aos="fade-up"
+                    data-aos-duration="1000"
+                >
+                    <img src="/assets/images/gym/coach-1.png" alt="" class="h-full object-cover object-top transition group-hover:scale-105" />
+                    <div class="absolute bottom-0 w-4/5 bg-black py-2.5 px-5 ltr:left-0 rtl:right-0">
+                        <h3 class="font-black text-white">harlan hagen</h3>
+                        <span class="text-sm font-bold">Gym Fitness</span>
+                    </div>
+                </div>
+                <div
+                    class="group relative flex h-[300px] items-end justify-center overflow-hidden bg-[rgba(119,128,161,0.1)] px-4 pt-6"
+                    data-aos="fade-up"
+                    data-aos-duration="1000"
+                >
+                    <img src="/assets/images/gym/coach-2.png" alt="" class="h-full object-cover object-top transition group-hover:scale-105" />
+                    <div class="absolute bottom-0 w-4/5 bg-black py-2.5 px-5 ltr:left-0 rtl:right-0">
+                        <h3 class="font-black text-white">Susan Bonilla</h3>
+                        <span class="text-sm font-bold">Aerobics</span>
+                    </div>
+                </div>
+                <div
+                    class="group relative flex h-[300px] items-end justify-center overflow-hidden bg-[rgba(119,128,161,0.1)] px-4 pt-6"
+                    data-aos="fade-up"
+                    data-aos-duration="1000"
+                >
+                    <img src="/assets/images/gym/coach-3.png" alt="" class="h-full object-cover object-top transition group-hover:scale-105" />
+                    <div class="absolute bottom-0 w-4/5 bg-black py-2.5 px-5 ltr:left-0 rtl:right-0">
+                        <h3 class="font-black text-white">Mike Gipson</h3>
+                        <span class="text-sm font-bold">Pilates & Stretching</span>
+                    </div>
+                </div>
+                <div
+                    class="group relative flex h-[300px] items-end justify-center overflow-hidden bg-[rgba(119,128,161,0.1)] px-4 pt-6"
+                    data-aos="fade-up"
+                    data-aos-duration="1000"
+                >
+                    <img src="/assets/images/gym/coach-4.png" alt="" class="h-full object-cover object-top transition group-hover:scale-105" />
+                    <div class="absolute bottom-0 w-4/5 bg-black py-2.5 px-5 ltr:left-0 rtl:right-0">
+                        <h3 class="font-black text-white">Judy Chu</h3>
+                        <span class="text-sm font-bold">Weight Loss</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-black bg-[url(/assets/images/gym/counter-bg.png)] bg-cover bg-center bg-no-repeat py-14 md:py-20">
+        <div class="container">
+            <div class="grid gap-y-10 gap-x-4 uppercase italic sm:grid-cols-2 lg:grid-cols-4">
+                <div class="space-y-5 text-center">
+                    <div
+                        class="text-5xl font-black text-white"
+                        [countUp]="10"
+                        [options]="{startVal :0 ,duration: 10,enableScrollSpy:true,scrollSpyOnce : true}"
+                        [reanimateOnClick]="false"
+                    >
+                        {{0}}
+                    </div>
+                    <p class="text-lg font-semibold">Years of Expertise</p>
+                </div>
+                <div class="space-y-5 text-center">
+                    <div
+                        class="text-5xl font-black text-white"
+                        [countUp]="15"
+                        [options]="{startVal :0 ,duration: 10,enableScrollSpy:true,scrollSpyOnce : true}"
+                        [reanimateOnClick]="false"
+                    >
+                        {{0}}
+                    </div>
+                    <p class="text-lg font-semibold">Professional Coaches</p>
+                </div>
+                <div class="space-y-5 text-center">
+                    <div
+                        class="text-5xl font-black text-white"
+                        [countUp]="20"
+                        [options]="{startVal :0 ,duration: 10,enableScrollSpy:true,scrollSpyOnce : true}"
+                        [reanimateOnClick]="false"
+                    >
+                        {{0}}
+                    </div>
+                    <p class="text-lg font-semibold">Different Classes</p>
+                </div>
+                <div class="space-y-5 text-center">
+                    <div
+                        class="text-5xl font-black text-white"
+                        [countUp]="535"
+                        [options]="{startVal :0 ,duration: 10,enableScrollSpy:true,scrollSpyOnce : true}"
+                        [reanimateOnClick]="false"
+                    >
+                        {{0}}
+                    </div>
+                    <p class="text-lg font-semibold">Club Members</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-gradient-to-t from-white/50 to-transparent py-14 italic dark:bg-gray-dark dark:from-transparent md:py-20">
+        <div class="container">
+            <div class="font-semibold uppercase">
+                <img src="/assets/images/gym/07.svg" alt="" data-aos="fade-down" data-aos-duration="1500" />
+                <h2 class="mb-3 -mt-6 text-4xl font-black md:-mt-10 md:text-6xl md:leading-normal">
+                    <span class="text-black dark:text-white">TOGETHER </span>
+                    <span class="text-border-gray tracking-wider">we </span>
+                    <span class="bg-gradient-to-r from-secondary to-primary bg-clip-text pr-4 text-transparent">SUCCEED</span>
+                </h2>
+                <p class="leading-loose xl:w-2/3">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                </p>
+            </div>
+
+            <client-slider [feedbacks]="feedbacks" type="creative-agency"></client-slider>
+        </div>
+    </section>
+
+    <section class="overflow-hidden py-14 dark:bg-black md:py-20">
+        <div class="container">
+            <div class="font-semibold uppercase italic">
+                <img src="/assets/images/gym/08.svg" alt="" data-aos="fade-down" data-aos-duration="1500" />
+                <h2 class="mb-3 -mt-6 text-4xl font-black md:-mt-10 md:text-6xl md:leading-normal">
+                    <span class="text-black dark:text-white">Articles </span>
+                    <span class="text-border-gray tracking-wider">& </span>
+                    <span class="bg-gradient-to-r from-secondary to-primary bg-clip-text pr-4 text-transparent">news</span>
+                </h2>
+                <p class="leading-loose xl:w-1/2">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
+            </div>
+            <div class="mt-8 grid gap-y-10 gap-x-7 italic sm:grid-cols-2 md:mt-12 lg:grid-cols-3">
+                <div class="group" data-aos="fade-up" data-aos-duration="1000">
+                    <div class="overflow-hidden sm:h-64">
+                        <img src="/assets/images/gym/news1.jpg" alt="" class="h-full w-full object-cover transition duration-500 group-hover:scale-110" />
+                    </div>
+                    <div class="pt-5 font-extrabold">
+                        <div class="inline-block bg-gray/10 p-2.5 text-sm font-bold">December 25, 2022</div>
+                        <a href="javascript:" class="my-3 block text-[22px] leading-9 text-black transition line-clamp-2 hover:text-secondary dark:text-white"
+                            >How to brace and breathe properly for weightlifting</a
+                        >
+                        <p class="mb-5 font-semibold line-clamp-3">
+                            It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
+                        </p>
+                        <a href="javascript:" class="text-secondary transition hover:text-primary">Read More</a>
+                    </div>
+                </div>
+                <div class="group" data-aos="fade-up" data-aos-duration="1000">
+                    <div class="overflow-hidden sm:h-64">
+                        <img src="/assets/images/gym/news2.jpg" alt="" class="h-full w-full object-cover transition duration-500 group-hover:scale-110" />
+                    </div>
+                    <div class="pt-5 font-extrabold">
+                        <div class="inline-block bg-gray/10 p-2.5 text-sm font-bold">December 25, 2022</div>
+                        <a href="javascript:" class="my-3 block text-[22px] leading-9 text-black transition line-clamp-2 hover:text-secondary dark:text-white"
+                            >How to brace and breathe properly for weightlifting</a
+                        >
+                        <p class="mb-5 font-semibold line-clamp-3">
+                            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
+                        </p>
+                        <a href="javascript:" class="text-secondary transition hover:text-primary">Read More</a>
+                    </div>
+                </div>
+                <div class="group" data-aos="fade-up" data-aos-duration="1000">
+                    <div class="overflow-hidden sm:h-64">
+                        <img src="/assets/images/gym/news3.jpg" alt="" class="h-full w-full object-cover transition duration-500 group-hover:scale-110" />
+                    </div>
+                    <div class="pt-5 font-extrabold">
+                        <div class="inline-block bg-gray/10 p-2.5 text-sm font-bold">December 25, 2022</div>
+                        <a href="javascript:" class="my-3 block text-[22px] leading-9 text-black transition line-clamp-2 hover:text-secondary dark:text-white"
+                            >How to brace and breathe properly for weightlifting</a
+                        >
+                        <p class="mb-5 font-semibold line-clamp-3">
+                            Various versions have evolved over the years, sometimes by accident, sometimes on purpose.
+                        </p>
+                        <a href="javascript:" class="text-secondary transition hover:text-primary">Read More</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>
+<style scoped>
+    .text-border-gray {
+        -webkit-text-fill-color: transparent;
+        -webkit-text-stroke-width: 2px;
+        -webkit-text-stroke-color: #7780a1;
+    }
+    .text-border-white {
+        -webkit-text-fill-color: transparent;
+        -webkit-text-stroke-width: 2px;
+        -webkit-text-stroke-color: #ffffff;
+    }
+</style>

src/app/gym.ts

@@ -0,0 +1,40 @@
+import { Component, Input } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './gym.html',
+})
+export class GymComponent {
+    storeData: any;
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+
+    @Input() feedbacks: any = [
+        {
+            id: 1,
+            name: 'Marvin McKinney',
+            role: 'Founder of Triple IT',
+            thumbnail: '/assets/images/creative/client-img1.png',
+            message:
+                "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by alteration in some form, injected humour, or randomised words which don't look even slightly believable.",
+        },
+        {
+            id: 2,
+            name: 'Leslie Alexander',
+            role: 'Founder of Dope tech',
+            thumbnail: '/assets/images/creative/client-img2.png',
+            message:
+                " There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by alteration in some form, injected humour, or randomised words which don't look even slightly believable.",
+        },
+    ];
+
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/healthcare.ts

@@ -0,0 +1,82 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import SwiperCore, { SwiperOptions,Navigation, Autoplay } from 'swiper';
+
+// install Swiper modules
+SwiperCore.use([Navigation,Autoplay]);
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './healthcare.html',
+})
+export class HealthcareComponent {
+    storeData: any;
+    feedbacks: any = [
+        {
+            id: 1,
+            name: 'Jack danver',
+            role: 'Patient of cancer',
+            thumbnail: '/assets/images/testimonial3.png',
+            message: 'I had a great experience with doctor ralph Edward. His surgery technique is very good. i satisfied with his team members. Thank you!!',
+        },
+    ];
+    config: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        speed: 2500,
+        autoplay: {
+            delay: 0,
+            disableOnInteraction: false,
+        },
+        modules: [Autoplay],
+        breakpoints: {
+            320: {
+                slidesPerView: 1.7,
+            },
+            600: {
+                slidesPerView: 3,
+            },
+            1000: {
+                slidesPerView: 5,
+            },
+            1600: {
+                slidesPerView: 8,
+            },
+        },
+    };
+    teamSliderConfig: SwiperOptions = {
+        loop: true,
+        slidesPerView: 4,
+        spaceBetween: 30,
+        breakpoints: {
+            320: {
+                slidesPerView: 1,
+            },
+            600: {
+                slidesPerView: 2,
+            },
+            1000: {
+                slidesPerView: 3,
+            },
+            1600: {
+                slidesPerView: 4,
+            },
+        },
+        navigation: {
+            nextEl: '.team-swiper-button-next',
+            prevEl: '.team-swiper-button-prev',
+        },
+        modules: [Navigation],
+    };
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/hotel-resort.ts

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { Lightbox, LightboxConfig } from 'ngx-lightbox';
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './hotel-resort.html',
+})
+export class HotelResortComponent {
+    activeTab = 'cozy-room';
+    items = [
+        { src: '/assets/images/hotel-resort/room1.jpg', thumb: '/assets/images/hotel-resort/room1.jpg', type: 'delux-room' },
+        { src: '/assets/images/hotel-resort/room2.jpg', thumb: '/assets/images/hotel-resort/room2.jpg', type: 'delux-room' },
+        { src: '/assets/images/hotel-resort/room3.jpg', thumb: '/assets/images/hotel-resort/room3.jpg', type: 'cozy-room' },
+        { src: '/assets/images/hotel-resort/room4.jpg', thumb: '/assets/images/hotel-resort/room4.jpg', type: 'family-suit' },
+        { src: '/assets/images/hotel-resort/room5.jpg', thumb: '/assets/images/hotel-resort/room5.jpg', type: 'family-suit' },
+        { src: '/assets/images/hotel-resort/room6.jpg', thumb: '/assets/images/hotel-resort/room6.jpg', type: 'modern-room' },
+    ];
+    constructor(private _lightbox: Lightbox, private _lightboxConfig: LightboxConfig) {
+        _lightboxConfig.enableTransition = false;
+        _lightboxConfig.wrapAround = true;
+        _lightboxConfig.showImageNumberLabel = true;
+        _lightboxConfig.showZoom = true;
+        _lightboxConfig.showRotate = true;
+        _lightboxConfig.albumLabel = '%1 of %2';
+        _lightboxConfig.positionFromTop = 0;
+        _lightboxConfig.disableScrolling = true;
+    }
+    open(img: string): void {
+        // open lightbox
+        const index = this.getItems().findIndex((d) => d.src.toLowerCase().includes(img.toLowerCase()));
+        this._lightbox.open(this.getItems(), index);
+    }
+    getItems() {
+        if (this.activeTab.toLowerCase() === 'cozy-room') {
+            return this.items;
+        }
+        const imgs = this.items.filter((d) => d.type.toLowerCase() === this.activeTab.toLowerCase()) || [];
+        return imgs;
+    }
+}

src/app/index.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './index.html',
+})
+export class IndexComponent {
+    storeData: any;
+    activeTab = 'all';
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/insurance.html

@@ -0,0 +1,876 @@
+<div>
+    <div class="relative overflow-hidden bg-black bg-[url(/assets/images/insurance/banner_line.png)] bg-cover bg-center bg-no-repeat">
+        <img src="/assets/images/insurance/banner_shap.png" alt="" class="absolute inset-y-0 right-0 object-cover" />
+        <div class="container relative z-[1]">
+            <div class="flex flex-col md:flex-row">
+                <div
+                    class="flex-1 space-y-5 py-24 text-center text-white ltr:md:text-left rtl:md:text-right lg:py-40 xl:py-52"
+                    data-aos="fade-right"
+                    data-aos-duration="1000"
+                >
+                    <h2 class="text-4xl font-extrabold uppercase lg:text-6xl lg:leading-[75px]">
+                        Get Insurance<br />
+                        <span class="text-primary">Policy</span> and<br />
+                        <span class="inline-flex text-secondary">Save&nbsp;</span>
+                        <span
+                            class="relative before:absolute before:inset-x-0 before:bottom-0 before:h-0.5 before:bg-gradient-to-r before:from-gray before:to-transparent lg:before:h-[5px]"
+                            >20%!</span
+                        >
+                    </h2>
+
+                    <p class="font-semibold lg:text-lg">
+                        Lorem Ipsum is simply dummy text of the printing and typesetting industry and uses Latin words combined with a handful of model words.
+                    </p>
+
+                    <a
+                        href="javascript:"
+                        class="group inline-flex items-center justify-center gap-4 rounded-full bg-secondary p-1 font-bold uppercase leading-none text-white duration-300 hover:bg-primary ltr:pl-5 rtl:pr-5"
+                    >
+                        Get a quote
+                        <span class="flex h-10 w-10 items-center justify-center rounded-full bg-white text-secondary group-hover:text-primary">
+                            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M19.5 12L14.5 7M19.5 12L14.5 17M19.5 12L13 12M9.5 12C7.83333 12 4.5 13 4.5 17"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                        </span>
+                    </a>
+                </div>
+                <div class="flex flex-1 items-end" data-aos="fade-left" data-aos-duration="1000">
+                    <img src="/assets/images/insurance/banner_img.png" alt="" class="w-full max-w-[688px] xl:ml-60" />
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <section class="py-10 lg:py-20" data-aos="fade-up" data-aos-duration="1000">
+        <div class="container">
+            <div class="flex flex-col gap-7 lg:flex-row">
+                <div
+                    class="mx-auto h-[450px] w-full max-w-[380px] flex-none overflow-hidden rounded-b-[160px] rounded-tl-[200px] rounded-tr-[20px] border-[10px] border-white dark:border-gray-dark"
+                >
+                    <img src="/assets/images/insurance/about_img.jpg" alt="" class="h-full w-full object-cover" />
+                </div>
+
+                <div class="flex flex-1 flex-col justify-between text-center ltr:md:text-left rtl:md:text-right">
+                    <div>
+                        <p class="mb-2.5 text-lg font-semibold text-gray">know more</p>
+
+                        <h2 class="mb-4 text-2xl font-extrabold text-black dark:text-white md:text-3xl lg:text-[40px] lg:leading-tight">
+                            <span class="text-secondary">About</span>
+                            Company
+                        </h2>
+
+                        <p class="mb-5 lg:text-lg">
+                            Invest in your drivers, improve their safety and reduce the risk of incidents with our compre hensive courses and seminars tailored
+                            to the needs of your organisation. With a choice of full or half-day sessions, all are flexible to fit with.
+                        </p>
+
+                        <p class="lg:text-lg">
+                            From lost luggage to unexpected medical expenses, we’re there to help when things don’t go to plan. With basic cover from only $2.84
+                            a day 1, Real Travel Insurance can give you affordable peace of mind when you’re travelling.
+                        </p>
+                    </div>
+
+                    <div class="mt-4 grid gap-4 rounded-[10px] bg-white p-5 dark:bg-gray-dark sm:grid-cols-3 ltr:lg:-ml-60 rtl:lg:-mr-60 xl:gap-[72px]">
+                        <div class="flex items-center gap-4">
+                            <div class="grid h-14 w-14 flex-none place-content-center rounded-[150px] rounded-br-[20px] bg-primary text-white lg:h-20 lg:w-20">
+                                <svg class="h-6 w-6 lg:h-9 lg:w-9" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M30.625 10.2084V9.79841C30.625 6.60478 30.625 5.00796 29.5936 4.13423C28.5622 3.2605 26.9857 3.52325 23.8327 4.04875L22.295 4.30503C19.903 4.7037 18.707 4.90303 17.5 4.90303C16.293 4.90303 15.097 4.7037 12.705 4.30503L11.1673 4.04875C8.01432 3.52325 6.43781 3.2605 5.40641 4.13423C4.375 5.00796 4.375 6.60478 4.375 9.79841V17.5C4.375 25.5068 10.5568 29.3923 14.4354 31.0422C15.4875 31.4897 16.0136 31.7135 17.5 31.7135C18.9864 31.7135 19.5125 31.4897 20.5646 31.0422C24.4432 29.3923 30.625 25.5068 30.625 17.5V16.0417"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                    />
+                                    <path
+                                        d="M9.47919 13.125C9.90374 12.2753 11.0493 11.6666 12.3959 11.6666C13.7424 11.6666 14.888 12.2753 15.3125 13.125"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                    />
+                                    <path
+                                        d="M19.6875 13.125C20.1121 12.2753 21.2576 11.6666 22.6042 11.6666C23.9507 11.6666 25.0963 12.2753 25.5208 13.125"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                    />
+                                    <path
+                                        d="M12.3958 20.4166C12.3958 20.4166 13.9271 21.875 17.5 21.875C21.0729 21.875 22.6041 20.4166 22.6041 20.4166"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                    />
+                                </svg>
+                            </div>
+
+                            <div>
+                                <h3 class="mb-1 text-lg font-bold text-black dark:text-white lg:text-2xl">
+                                    <div
+                                        class="inline-flex text-secondary"
+                                        [countUp]="12"
+                                        [options]="{startVal :0 ,duration: 10,suffix: '+',enableScrollSpy:true,scrollSpyOnce : true}"
+                                        [reanimateOnClick]="false"
+                                    >
+                                        {{0}}
+                                    </div>
+                                    Happy
+                                </h3>
+                                <p class="text-sm font-semibold text-gray lg:text-xl">Customers</p>
+                            </div>
+                        </div>
+
+                        <div class="flex items-center gap-4">
+                            <div class="grid h-14 w-14 flex-none place-content-center rounded-[150px] rounded-br-[20px] bg-primary text-white lg:h-20 lg:w-20">
+                                <svg class="h-6 w-6 lg:h-9 lg:w-9" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M13.125 20.7598V24.7916C13.125 27.7817 14.9247 30.3514 17.5 31.4766M21.7034 32.0833C24.4549 32.0833 26.7742 30.2327 27.4845 27.7083"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                    />
+                                    <path
+                                        d="M17.9167 4.375H18.0504C18.5067 4.375 18.7348 4.375 18.9271 4.39201C21.039 4.57875 22.713 6.25279 22.8997 8.36463C22.9167 8.55694 22.9168 8.78506 22.9168 9.24131V10.5515C22.9168 11.9834 22.6219 13.3465 22.0896 14.5833M7.91675 4.375H7.78306C7.32681 4.375 7.09869 4.375 6.90638 4.39201C4.79454 4.57875 3.1205 6.25279 2.93375 8.36463C2.91675 8.55694 2.91675 8.78506 2.91675 9.24131V10.9681C2.91675 16.3759 7.30063 20.7598 12.7084 20.7598C14.2741 20.7598 15.7574 20.4073 17.0834 19.7774"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                    />
+                                    <circle cx="27.7083" cy="23.3334" r="4.375" stroke="currentColor" stroke-width="2" />
+                                    <path d="M17.5 2.91663V5.83329" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                                    <path d="M8.75 2.91663V5.83329" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                                </svg>
+                            </div>
+
+                            <div>
+                                <h3 class="mb-1 text-lg font-bold text-black dark:text-white lg:text-2xl">
+                                    <div
+                                        class="inline-flex text-secondary"
+                                        [countUp]="25"
+                                        [options]="{startVal :0 ,duration: 10,suffix: '+',enableScrollSpy:true,scrollSpyOnce : true}"
+                                        [reanimateOnClick]="false"
+                                    >
+                                        {{0}}
+                                    </div>
+                                    Offers
+                                </h3>
+                                <p class="text-sm font-semibold text-gray lg:text-xl">Of Insurance</p>
+                            </div>
+                        </div>
+
+                        <div class="flex items-center gap-4">
+                            <div class="grid h-14 w-14 flex-none place-content-center rounded-[150px] rounded-br-[20px] bg-primary text-white lg:h-20 lg:w-20">
+                                <svg class="h-6 w-6 lg:h-9 lg:w-9" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <circle cx="17.5" cy="23.3334" r="4.375" stroke="currentColor" stroke-width="2" />
+                                    <path
+                                        d="M17.5 28.0874L14.2 31.2512C13.7274 31.7043 13.4911 31.9308 13.291 32.0092C12.835 32.1878 12.3291 32.035 12.0892 31.646C11.984 31.4753 11.9512 31.1674 11.8856 30.5517C11.8485 30.204 11.83 30.0302 11.7738 29.8846C11.6479 29.5587 11.3835 29.3051 11.0435 29.1844C10.8916 29.1306 10.7103 29.1128 10.3477 29.0773C9.70538 29.0144 9.38425 28.9829 9.20621 28.882C8.8005 28.652 8.64104 28.1671 8.82738 27.7299C8.90915 27.5381 9.14545 27.3115 9.61805 26.8584L11.7738 24.7917L13.291 23.2745"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    />
+                                    <path
+                                        d="M17.5 28.0873L20.8 31.2511C21.2726 31.7042 21.5089 31.9307 21.709 32.0091C22.165 32.1878 22.6709 32.0349 22.9108 31.6459C23.016 31.4753 23.0488 31.1674 23.1144 30.5516C23.1515 30.204 23.17 30.0301 23.2262 29.8845C23.3521 29.5586 23.6165 29.305 23.9565 29.1844C24.1084 29.1305 24.2897 29.1127 24.6523 29.0772C25.2946 29.0143 25.6157 28.9829 25.7938 28.882C26.1995 28.652 26.359 28.167 26.1726 27.7299C26.0909 27.538 25.8546 27.3115 25.382 26.8584L23.2262 24.7916L21.875 23.4404"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    />
+                                    <path
+                                        d="M25.2578 26.2437C28.1343 26.2132 29.7375 26.0329 30.8019 24.9685C32.0833 23.6871 32.0833 21.6247 32.0833 17.5V13.125M10.2083 26.2474C7.03638 26.2298 5.31859 26.0891 4.19803 24.9685C2.91663 23.6871 2.91663 21.6247 2.91663 17.5L2.91663 11.6666C2.91663 7.54184 2.91663 5.47944 4.19803 4.19803C5.47944 2.91663 7.54184 2.91663 11.6666 2.91663L23.3333 2.91663C27.4581 2.91663 29.5205 2.91663 30.8019 4.19803C31.5163 4.91245 31.8324 5.86963 31.9723 7.29163"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                    />
+                                    <path d="M13.125 8.75L21.875 8.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                                    <path d="M10.2084 13.8541H13.125M24.7917 13.8541H18.2292" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                                </svg>
+                            </div>
+
+                            <div>
+                                <h3 class="mb-1 text-lg font-bold text-black dark:text-white lg:text-2xl">
+                                    <div
+                                        class="inline-flex text-secondary"
+                                        [countUp]="10"
+                                        [options]="{startVal :0 ,duration: 10,suffix: '+',enableScrollSpy:true,scrollSpyOnce : true}"
+                                        [reanimateOnClick]="false"
+                                    >
+                                        {{0}}
+                                    </div>
+                                    Years
+                                </h3>
+                                <p class="text-sm font-semibold text-gray lg:text-xl">Of Experiences</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-black bg-[url(/assets/images/insurance/why-bg.svg)] bg-left-top bg-no-repeat py-10 dark:bg-gray-dark lg:py-20">
+        <div class="container">
+            <div class="flex flex-col items-center gap-8 text-center ltr:md:text-left rtl:md:text-right lg:flex-row">
+                <div class="w-full max-w-[500px] flex-none space-y-8" data-aos="fade-right" data-aos-duration="1000">
+                    <h2 class="text-2xl font-extrabold text-white md:text-3xl lg:text-[40px] lg:leading-tight">Why Choose Insurers Insurance...?</h2>
+                    <div class="space-y-5">
+                        <p class="text-lg">
+                            Client satisfaction is our mission. It is a long established fact that a reader will be distracted by the readable content of a
+                            creative page It is a long established fact that a creative page It is a long established.
+                        </p>
+
+                        <p class="text-lg">
+                            We always try our clients to give the best support. a reader will be distracted by the readable content of a creative page It is a
+                            long established
+                        </p>
+                    </div>
+
+                    <div class="grid gap-8">
+                        <div>
+                            <h4 class="mb-1.5 flex items-center justify-between font-bold text-white">Client Satisfy <span>85%</span></h4>
+                            <div class="h-1.5 w-full bg-gray-dark dark:bg-black"><span class="block h-1.5 w-[85%] bg-secondary"></span></div>
+                        </div>
+
+                        <div>
+                            <h4 class="mb-1.5 flex items-center justify-between font-bold text-white">
+                                Skill
+                                <span>68%</span>
+                            </h4>
+                            <div class="h-1.5 w-full bg-gray-dark dark:bg-black"><span class="block h-1.5 w-[68%] bg-secondary"></span></div>
+                        </div>
+
+                        <div>
+                            <h4 class="mb-1.5 flex items-center justify-between font-bold text-white">Experience<span>93%</span></h4>
+                            <div class="h-1.5 w-full bg-gray-dark dark:bg-black"><span class="block h-1.5 w-[93%] bg-secondary"></span></div>
+                        </div>
+                    </div>
+
+                    <a
+                        href="javascript:"
+                        class="group inline-flex items-center justify-center gap-4 rounded-full bg-primary p-1 font-bold uppercase leading-none text-white duration-300 hover:bg-secondary ltr:pl-5 rtl:pr-5"
+                        >Know More
+                        <span class="flex h-10 w-10 items-center justify-center rounded-full bg-white text-primary group-hover:text-secondary">
+                            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M19.5 12L14.5 7M19.5 12L14.5 17M19.5 12L13 12M9.5 12C7.83333 12 4.5 13 4.5 17"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                        </span>
+                    </a>
+                </div>
+
+                <div class="max-w-[500px] flex-1 lg:max-w-none" data-aos="fade-left" data-aos-duration="1000">
+                    <div class="relative p-10 md:p-16 xl:p-28 ltr:xl:pr-0 rtl:xl:pl-0">
+                        <div
+                            class="absolute top-0 grid h-[150px] w-[150px] place-content-center bg-gray-dark p-2 text-center text-lg font-black uppercase text-white ltr:left-0 rtl:right-0 dark:bg-black lg:h-[200px] lg:w-[200px] lg:p-4 lg:text-2xl lg:leading-10"
+                        >
+                            24 years Of Insurers Insurence
+                        </div>
+                        <div class="h-[350px] shadow-[10px_-10px_0_#47BDFF] md:h-[450px] xl:h-[650px]">
+                            <img src="/assets/images/insurance/why-img1.jpg" alt="" class="h-full w-full object-cover" />
+                        </div>
+                        <div
+                            class="absolute bottom-0 h-[200px] w-[200px] shadow-[-10px_10px_0_#B476E5] ltr:right-0 rtl:left-0 xl:h-[300px] xl:w-[300px] ltr:xl:-right-36 rtl:xl:-left-36"
+                        >
+                            <img src="/assets/images/insurance/why-small-img.jpg" alt="" class="h-full w-full object-cover" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="relative py-10 lg:py-20">
+        <img src="/assets/images/insurance/focus-bg.svg" alt="" class="absolute inset-y-0 left-0 opacity-50" />
+
+        <div class="container relative z-[1]">
+            <div class="flex flex-col items-center gap-10 md:flex-row">
+                <div class="flex-1" data-aos="fade-right" data-aos-duration="1000">
+                    <img src="/assets/images/insurance/health-img.png" alt="" />
+                </div>
+
+                <div class="flex-1 text-center ltr:md:text-left rtl:md:text-right" data-aos="fade-left" data-aos-duration="1000">
+                    <div class="mb-2.5 text-primary">
+                        <svg class="h-12 w-12 ltr:md:ml-0 rtl:md:mr-0 rtl:md:ml-auto" viewBox="0 0 50 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M4.88733 23.9377C4.42617 22.5555 4.16663 21.1671 4.16663 19.7926C4.16663 7.47812 15.6253 1.88049 25 11.9558C34.3746 1.88049 45.8333 7.47773 45.8333 19.7925C45.8333 21.167 45.5737 22.5555 45.1126 23.9377H38.8251L38.5919 23.9374C37.4549 23.9356 36.4452 23.9339 35.5263 24.3431C34.6074 24.7524 33.933 25.5042 33.1735 26.3509L33.0176 26.5245L30.8733 28.907C30.7136 29.0845 30.5832 29.2293 30.4682 29.3527C30.3588 29.2247 30.235 29.0748 30.0835 28.8911L22.6851 19.9233C22.3944 19.5707 22.0834 19.1934 21.7791 18.9133C21.4247 18.5872 20.9009 18.2204 20.1686 18.1765C19.4363 18.1325 18.8724 18.4339 18.4815 18.7153C18.1459 18.9569 17.792 19.2942 17.4611 19.6095L14.2744 22.6446C13.2915 23.5806 13.0864 23.7401 12.8719 23.8259C12.6574 23.9117 12.3989 23.9377 11.0416 23.9377H4.88733Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M6.25915 27.0627C9.13619 32.4 14.4381 37.4045 18.6702 40.8557C21.4452 43.1186 22.8327 44.25 25 44.25C27.1672 44.25 28.5547 43.1186 31.3297 40.8557C35.5619 37.4046 40.8638 32.4 43.7408 27.0627H38.8251C37.3163 27.0627 37.0303 27.0942 36.7977 27.1978C36.5651 27.3014 36.3502 27.4931 35.3404 28.615L33.1429 31.0567C32.8139 31.4225 32.4663 31.809 32.1323 32.0891C31.7466 32.4125 31.1723 32.7752 30.3949 32.7585C29.6178 32.7418 29.0599 32.3551 28.6883 32.0154C28.3667 31.7213 28.0363 31.3205 27.7236 30.9412L20.3226 21.9703C20.1819 21.7997 20.0674 21.6611 19.9664 21.5427C19.852 21.6482 19.7217 21.7721 19.5616 21.9246L16.278 25.0521C15.5364 25.7605 14.8784 26.3891 14.0325 26.7274C13.1866 27.0658 12.2767 27.0644 11.2511 27.0629L6.25915 27.0627Z"
+                                fill="currentColor"
+                            />
+                        </svg>
+                    </div>
+
+                    <h2 class="mb-2 text-2xl font-extrabold text-black dark:text-white md:text-3xl lg:text-[40px] lg:leading-tight">Health Insurance</h2>
+
+                    <p class="mb-5 text-lg font-semibold">
+                        Lorem ipsum dolor sit amet consectetur adipiscing elit sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ad minim
+                        veniam, quis nostrud exercitation commodo consequat.
+                    </p>
+
+                    <a
+                        href="javascript:"
+                        class="group inline-flex items-center justify-center gap-4 rounded-full bg-secondary p-1 font-bold uppercase leading-none text-white duration-300 hover:bg-primary ltr:pl-5 rtl:pr-5"
+                    >
+                        Get a quote
+                        <span class="flex h-10 w-10 items-center justify-center rounded-full bg-white text-secondary group-hover:text-primary">
+                            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M19.5 12L14.5 7M19.5 12L14.5 17M19.5 12L13 12M9.5 12C7.83333 12 4.5 13 4.5 17"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                        </span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="px-4">
+        <div
+            class="relative mx-auto max-w-[1440px] rounded-[32px] bg-black bg-[url(/assets/images/insurance/call-bg.svg)] bg-left-top bg-no-repeat py-10 dark:bg-gray-dark lg:py-20"
+        >
+            <div class="container">
+                <div class="flex flex-col items-center justify-between gap-5 md:flex-row">
+                    <div class="flex-1 text-center ltr:md:text-left rtl:md:text-right xl:max-w-[580px]">
+                        <h2 class="mb-3.5 text-2xl font-extrabold text-white md:text-3xl lg:text-[40px] lg:leading-tight">
+                            Find an Insurance agent Call us anytime
+                        </h2>
+
+                        <p class="text-lg font-semibold">
+                            Lorem ipsum dolor sit amet consectetur adipiscing elit sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ad minim
+                            veniam, quis nostrud exercitation commodo consequat.
+                        </p>
+                    </div>
+
+                    <div class="float-none max-w-[350px] text-center">
+                        <h2 class="mb-8 text-2xl font-extrabold text-primary md:text-3xl lg:text-[40px] lg:leading-tight">Toll Free</h2>
+
+                        <a
+                            href="tel:+88994455819"
+                            class="mb-8 inline-flex cursor-pointer rounded-[10px] bg-gradient-to-l from-primary/20 to-secondary/20 px-8 py-6 text-2xl font-extrabold text-white duration-300 hover:text-gray md:text-3xl lg:text-[40px] lg:leading-tight"
+                            >+88994455819</a
+                        >
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="relative overflow-hidden py-10 lg:py-20">
+        <img src="/assets/images/insurance/focus-bg.svg" alt="" class="absolute inset-y-0 right-0 opacity-50 rotate-y-180" />
+
+        <div class="container relative z-[1]">
+            <div class="flex flex-col items-center gap-10 md:flex-row">
+                <div class="flex-1 text-center ltr:md:text-left rtl:md:text-right" data-aos="fade-right" data-aos-duration="1000">
+                    <div class="mb-2.5 text-secondary">
+                        <svg
+                            class="mx-auto h-12 w-12 ltr:md:ml-0 rtl:md:mr-0 rtl:md:ml-auto"
+                            viewBox="0 0 50 51"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M13.2826 41.0252C12.2876 40.6695 11.4703 40.1719 10.7741 39.4757C8.74427 37.4458 8.40253 34.3871 8.34499 28.8956H41.655C41.5975 34.3871 41.2558 37.4458 39.2259 39.4757C38.5298 40.1718 37.7127 40.6693 36.718 41.025L38.8979 45.3847C39.2838 46.1565 38.971 47.0951 38.1991 47.481C37.4273 47.8669 36.4887 47.5541 36.1028 46.7822L33.5529 41.6825C31.3688 41.9165 28.5958 41.9165 25 41.9165C21.4045 41.9165 18.6317 41.9165 16.4477 41.6825L13.8979 46.7822C13.512 47.5541 12.5734 47.8669 11.8016 47.481C11.0297 47.0951 10.7169 46.1565 11.1028 45.3847L13.2826 41.0252ZM30.7292 33.5831C30.7292 32.7202 31.4287 32.0206 32.2917 32.0206H35.4167C36.2796 32.0206 36.9792 32.7202 36.9792 33.5831C36.9792 34.4461 36.2796 35.1456 35.4167 35.1456H32.2917C31.4287 35.1456 30.7292 34.4461 30.7292 33.5831ZM14.5833 32.0206C13.7204 32.0206 13.0208 32.7202 13.0208 33.5831C13.0208 34.4461 13.7204 35.1456 14.5833 35.1456H17.7083C18.5713 35.1456 19.2708 34.4461 19.2708 33.5831C19.2708 32.7202 18.5713 32.0206 17.7083 32.0206H14.5833Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M41.6667 25.7706V21.0831C41.6667 13.2264 41.6667 9.29802 39.2259 6.85724C37.3949 5.02623 34.7267 4.5688 30.191 4.45452C29.6282 4.44034 29.1667 4.89525 29.1667 5.45813C29.1667 7.75932 27.3012 9.6248 25 9.6248C22.6988 9.6248 20.8333 7.75932 20.8333 5.45813C20.8333 4.89525 20.3718 4.44034 19.8091 4.45452C15.2733 4.5688 12.6051 5.02623 10.7741 6.85724C8.33334 9.29802 8.33334 13.2264 8.33334 21.0831V25.7706H41.6667Z"
+                                fill="currentColor"
+                            />
+                        </svg>
+                    </div>
+
+                    <h2 class="mb-2 text-2xl font-extrabold text-black dark:text-white md:text-3xl lg:text-[40px] lg:leading-tight">Travel Insurance</h2>
+
+                    <p class="mb-5 text-lg font-semibold">
+                        Lorem ipsum dolor sit amet consectetur adipiscing elit sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ad minim
+                        veniam, quis nostrud exercitation commodo consequat.
+                    </p>
+
+                    <a
+                        href="javascript:"
+                        class="group inline-flex items-center justify-center gap-4 rounded-full bg-primary p-1 font-bold uppercase leading-none text-white duration-300 hover:bg-secondary ltr:pl-5 rtl:pr-5"
+                    >
+                        Get a quote
+                        <span class="flex h-10 w-10 items-center justify-center rounded-full bg-white text-primary group-hover:text-secondary">
+                            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M19.5 12L14.5 7M19.5 12L14.5 17M19.5 12L13 12M9.5 12C7.83333 12 4.5 13 4.5 17"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                        </span>
+                    </a>
+                </div>
+
+                <div class="flex-1" data-aos="fade-left" data-aos-duration="1000">
+                    <img src="/assets/images/insurance/traval-img.png" alt="" />
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="py-[60px] px-5 dark:bg-gray-dark">
+        <testimonial mainClass="mx-auto max-w-[1440px] py-14 dark:!bg-black md:py-20 rounded-[32px]" type="modern-saas" [feedbacks]="feedbacks"> </testimonial>
+    </section>
+
+    <section class="py-10 lg:py-20">
+        <div class="container">
+            <div class="grid gap-14 md:grid-cols-3" data-aos="fade-up" data-aos-duration="1000">
+                <div class="grid gap-3.5 text-center">
+                    <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-primary/20">
+                        <img src="/assets/images/insurance/icon1.svg" alt="" />
+                    </div>
+
+                    <h3 class="text-2xl font-bold text-black dark:text-white">Reliable partner</h3>
+
+                    <p class="text-lg font-semibold">Lorem ipsum dolor sit amet nam sed do eiusmod tempor</p>
+                </div>
+
+                <div class="grid gap-3.5 text-center">
+                    <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-primary/20">
+                        <img src="/assets/images/insurance/icon2.svg" alt="" />
+                    </div>
+
+                    <h3 class="text-2xl font-bold text-black dark:text-white">Tailored Plans</h3>
+
+                    <p class="text-lg font-semibold">Lorem ipsum dolor sit amet nam sed do eiusmod tempor</p>
+                </div>
+
+                <div class="grid gap-3.5 text-center">
+                    <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-primary/20">
+                        <img src="/assets/images/insurance/icon3.svg" alt="" />
+                    </div>
+
+                    <h3 class="text-2xl font-bold text-black dark:text-white">Best-in-class services</h3>
+
+                    <p class="text-lg font-semibold">Lorem ipsum dolor sit amet nam sed do eiusmod tempor</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-black py-12 dark:bg-gray-dark lg:py-20">
+        <div class="container">
+            <div class="flex flex-col items-center justify-center lg:flex-row lg:justify-between">
+                <div class="heading text-center ltr:lg:text-left rtl:lg:text-right">
+                    <h6>Blog</h6>
+                    <h4 class="!text-white">Unlock the latest trends/news</h4>
+                </div>
+                <div class="mb-8 flex items-center justify-end gap-4 lg:mb-0">
+                    <a routerLink="/blog" class="text-sm font-extrabold text-white transition hover:text-secondary dark:text-white dark:hover:text-secondary">
+                        View All
+                    </a>
+                    <button
+                        type="button"
+                        class="blog-slider-button-prev flex h-10 w-10 items-center justify-center rounded-full bg-white/5 transition hover:bg-secondary"
+                    >
+                        <svg
+                            width="7"
+                            height="12"
+                            viewBox="0 0 7 12"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="text-white rtl:rotate-180 dark:text-white"
+                        >
+                            <path
+                                d="M5.95007 1.2002L1.48924 5.3424C1.06317 5.73803 1.06317 6.41236 1.48924 6.80799L5.95007 10.9502"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                            ></path>
+                        </svg>
+                    </button>
+                    <button
+                        type="button"
+                        class="blog-slider-button-next text-p flex h-10 w-10 items-center justify-center rounded-full bg-white/5 transition hover:bg-secondary"
+                    >
+                        <svg
+                            width="7"
+                            height="12"
+                            viewBox="0 0 7 12"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="text-white rtl:rotate-180 dark:text-white"
+                        >
+                            <path
+                                d="M1.05005 10.7998L5.51089 6.6576C5.93695 6.26197 5.93695 5.58764 5.51089 5.19201L1.05005 1.0498"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                            ></path>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+            <swiper [config]="config">
+                <ng-template swiperSlide>
+                    <div class="rounded-3xl bg-gray-dark dark:bg-black">
+                        <img src="/assets/images/insurance/blog1.jpg" alt="blog-3" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <span class="rounded bg-primary/10 py-1 px-2 text-sm font-extrabold text-primary">Design</span>
+                            <a
+                            routerLink="blog-details"
+                                class="my-[10px] block text-lg font-extrabold leading-[23px] text-white transition line-clamp-2 hover:text-secondary dark:hover:text-secondary"
+                            >
+                                3 experiments to improve your mobile app funnel
+                            </a>
+                            <p class="line-clamp-3">
+                                Funnels don’t just provide you with conversion numbers, they provide you with insight into how your users behave.
+                            </p>
+                            <div class="mt-6 flex items-center justify-between text-secondary">
+                                <span>Dec 15, 2022</span>
+                                <a routerLink="blog-details" class="text-primary transition hover:text-secondary">
+                                    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M25.4091 13.0009C25.4091 19.8539 19.8531 25.41 13 25.41C6.14699 25.41 0.590937 19.8539 0.590937 13.0009C0.590937 6.14785 6.14699 0.591797 13 0.591797C19.8531 0.591797 25.4091 6.14785 25.4091 13.0009ZM12.7226 7.55043C12.6336 7.63872 12.5628 7.74368 12.5144 7.85931C12.466 7.97495 12.4408 8.09899 12.4403 8.22436C12.4398 8.34973 12.464 8.47398 12.5115 8.58999C12.559 8.70601 12.6289 8.81153 12.7172 8.90052L15.8386 12.0463H7.86935C7.61618 12.0463 7.37339 12.1469 7.19438 12.3259C7.01537 12.5049 6.9148 12.7477 6.9148 13.0009C6.9148 13.254 7.01537 13.4968 7.19438 13.6759C7.37339 13.8549 7.61618 13.9554 7.86935 13.9554H15.8386L12.7172 17.1013C12.6289 17.1903 12.5591 17.2959 12.5116 17.412C12.4641 17.5281 12.4399 17.6524 12.4405 17.7778C12.441 17.9033 12.4663 18.0273 12.5148 18.143C12.5633 18.2587 12.6341 18.3636 12.7232 18.4519C12.8123 18.5402 12.9179 18.6101 13.034 18.6576C13.1501 18.7051 13.2744 18.7292 13.3998 18.7287C13.5252 18.7281 13.6493 18.7029 13.765 18.6544C13.8806 18.6059 13.9856 18.5351 14.0739 18.446L18.8102 13.6732C18.9876 13.4944 19.0872 13.2528 19.0872 13.0009C19.0872 12.749 18.9876 12.5073 18.8102 12.3285L14.0739 7.5558C13.9856 7.46661 13.8806 7.39571 13.7648 7.34716C13.6491 7.29861 13.5249 7.27336 13.3994 7.27286C13.2739 7.27236 13.1495 7.29662 13.0333 7.34425C12.9172 7.39188 12.8116 7.46194 12.7226 7.55043Z"
+                                            fill="currentColor"
+                                        />
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </ng-template>
+                <ng-template swiperSlide>
+                    <div class="rounded-3xl bg-gray-dark dark:bg-black">
+                        <img src="/assets/images/insurance/blog2.jpg" alt="blog-3" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <span class="rounded bg-primary/10 py-1 px-2 text-sm font-extrabold text-primary">Marketing</span>
+                            <a
+                            routerLink="blog-details"
+                                class="my-[10px] block text-lg font-extrabold leading-[23px] text-white transition line-clamp-2 hover:text-secondary dark:hover:text-secondary"
+                            >
+                                What’s growth hacking? 8 great books to learn more about it
+                            </a>
+                            <p class="line-clamp-3">
+                                The use of resource-light and cost-effective digital marketing tactics to help grow and retain an active user base, sell
+                                products and...
+                            </p>
+                            <div class="mt-6 flex items-center justify-between text-secondary">
+                                <span>Dec 25, 2022</span>
+                                <a routerLink="blog-details" class="text-primary transition hover:text-secondary">
+                                    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M25.4091 13.0009C25.4091 19.8539 19.8531 25.41 13 25.41C6.14699 25.41 0.590937 19.8539 0.590937 13.0009C0.590937 6.14785 6.14699 0.591797 13 0.591797C19.8531 0.591797 25.4091 6.14785 25.4091 13.0009ZM12.7226 7.55043C12.6336 7.63872 12.5628 7.74368 12.5144 7.85931C12.466 7.97495 12.4408 8.09899 12.4403 8.22436C12.4398 8.34973 12.464 8.47398 12.5115 8.58999C12.559 8.70601 12.6289 8.81153 12.7172 8.90052L15.8386 12.0463H7.86935C7.61618 12.0463 7.37339 12.1469 7.19438 12.3259C7.01537 12.5049 6.9148 12.7477 6.9148 13.0009C6.9148 13.254 7.01537 13.4968 7.19438 13.6759C7.37339 13.8549 7.61618 13.9554 7.86935 13.9554H15.8386L12.7172 17.1013C12.6289 17.1903 12.5591 17.2959 12.5116 17.412C12.4641 17.5281 12.4399 17.6524 12.4405 17.7778C12.441 17.9033 12.4663 18.0273 12.5148 18.143C12.5633 18.2587 12.6341 18.3636 12.7232 18.4519C12.8123 18.5402 12.9179 18.6101 13.034 18.6576C13.1501 18.7051 13.2744 18.7292 13.3998 18.7287C13.5252 18.7281 13.6493 18.7029 13.765 18.6544C13.8806 18.6059 13.9856 18.5351 14.0739 18.446L18.8102 13.6732C18.9876 13.4944 19.0872 13.2528 19.0872 13.0009C19.0872 12.749 18.9876 12.5073 18.8102 12.3285L14.0739 7.5558C13.9856 7.46661 13.8806 7.39571 13.7648 7.34716C13.6491 7.29861 13.5249 7.27336 13.3994 7.27286C13.2739 7.27236 13.1495 7.29662 13.0333 7.34425C12.9172 7.39188 12.8116 7.46194 12.7226 7.55043Z"
+                                            fill="currentColor"
+                                        />
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </ng-template>
+                <ng-template swiperSlide>
+                    <div class="rounded-3xl bg-gray-dark dark:bg-black">
+                        <img src="/assets/images/insurance/blog3.jpg" alt="blog-3" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <span class="rounded bg-primary/10 py-1 px-2 text-sm font-extrabold text-primary">Integration</span>
+                            <a
+                            routerLink="blog-details"
+                                class="my-[10px] block text-lg font-extrabold leading-[23px] text-white transition line-clamp-2 hover:text-secondary dark:hover:text-secondary"
+                            >
+                                6 new interesting mobile apps to grow your audience on
+                            </a>
+                            <p class="line-clamp-3">
+                                Before I get into the advice, here’s a bit about my background and experience with growing audiences for creative work.
+                            </p>
+                            <div class="mt-6 flex items-center justify-between text-secondary">
+                                <span>Nov 06, 2022</span>
+                                <a routerLink="blog-details" class="text-primary transition hover:text-secondary">
+                                    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M25.4091 13.0009C25.4091 19.8539 19.8531 25.41 13 25.41C6.14699 25.41 0.590937 19.8539 0.590937 13.0009C0.590937 6.14785 6.14699 0.591797 13 0.591797C19.8531 0.591797 25.4091 6.14785 25.4091 13.0009ZM12.7226 7.55043C12.6336 7.63872 12.5628 7.74368 12.5144 7.85931C12.466 7.97495 12.4408 8.09899 12.4403 8.22436C12.4398 8.34973 12.464 8.47398 12.5115 8.58999C12.559 8.70601 12.6289 8.81153 12.7172 8.90052L15.8386 12.0463H7.86935C7.61618 12.0463 7.37339 12.1469 7.19438 12.3259C7.01537 12.5049 6.9148 12.7477 6.9148 13.0009C6.9148 13.254 7.01537 13.4968 7.19438 13.6759C7.37339 13.8549 7.61618 13.9554 7.86935 13.9554H15.8386L12.7172 17.1013C12.6289 17.1903 12.5591 17.2959 12.5116 17.412C12.4641 17.5281 12.4399 17.6524 12.4405 17.7778C12.441 17.9033 12.4663 18.0273 12.5148 18.143C12.5633 18.2587 12.6341 18.3636 12.7232 18.4519C12.8123 18.5402 12.9179 18.6101 13.034 18.6576C13.1501 18.7051 13.2744 18.7292 13.3998 18.7287C13.5252 18.7281 13.6493 18.7029 13.765 18.6544C13.8806 18.6059 13.9856 18.5351 14.0739 18.446L18.8102 13.6732C18.9876 13.4944 19.0872 13.2528 19.0872 13.0009C19.0872 12.749 18.9876 12.5073 18.8102 12.3285L14.0739 7.5558C13.9856 7.46661 13.8806 7.39571 13.7648 7.34716C13.6491 7.29861 13.5249 7.27336 13.3994 7.27286C13.2739 7.27236 13.1495 7.29662 13.0333 7.34425C12.9172 7.39188 12.8116 7.46194 12.7226 7.55043Z"
+                                            fill="currentColor"
+                                        />
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </ng-template>
+                <ng-template swiperSlide>
+                    <div class="rounded-3xl bg-gray-dark dark:bg-black">
+                        <img src="/assets/images/insurance/blog1.jpg" alt="blog-3" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <span class="rounded bg-primary/10 py-1 px-2 text-sm font-extrabold text-primary">Design</span>
+                            <a
+                            routerLink="blog-details"
+                                class="my-[10px] block text-lg font-extrabold leading-[23px] text-white transition line-clamp-2 hover:text-secondary dark:hover:text-secondary"
+                            >
+                                3 experiments to improve your mobile app funnel
+                            </a>
+                            <p class="line-clamp-3">
+                                Funnels don’t just provide you with conversion numbers, they provide you with insight into how your users behave.
+                            </p>
+                            <div class="mt-6 flex items-center justify-between text-secondary">
+                                <span>Dec 15, 2022</span>
+                                <a routerLink="blog-details" class="text-primary transition hover:text-secondary">
+                                    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M25.4091 13.0009C25.4091 19.8539 19.8531 25.41 13 25.41C6.14699 25.41 0.590937 19.8539 0.590937 13.0009C0.590937 6.14785 6.14699 0.591797 13 0.591797C19.8531 0.591797 25.4091 6.14785 25.4091 13.0009ZM12.7226 7.55043C12.6336 7.63872 12.5628 7.74368 12.5144 7.85931C12.466 7.97495 12.4408 8.09899 12.4403 8.22436C12.4398 8.34973 12.464 8.47398 12.5115 8.58999C12.559 8.70601 12.6289 8.81153 12.7172 8.90052L15.8386 12.0463H7.86935C7.61618 12.0463 7.37339 12.1469 7.19438 12.3259C7.01537 12.5049 6.9148 12.7477 6.9148 13.0009C6.9148 13.254 7.01537 13.4968 7.19438 13.6759C7.37339 13.8549 7.61618 13.9554 7.86935 13.9554H15.8386L12.7172 17.1013C12.6289 17.1903 12.5591 17.2959 12.5116 17.412C12.4641 17.5281 12.4399 17.6524 12.4405 17.7778C12.441 17.9033 12.4663 18.0273 12.5148 18.143C12.5633 18.2587 12.6341 18.3636 12.7232 18.4519C12.8123 18.5402 12.9179 18.6101 13.034 18.6576C13.1501 18.7051 13.2744 18.7292 13.3998 18.7287C13.5252 18.7281 13.6493 18.7029 13.765 18.6544C13.8806 18.6059 13.9856 18.5351 14.0739 18.446L18.8102 13.6732C18.9876 13.4944 19.0872 13.2528 19.0872 13.0009C19.0872 12.749 18.9876 12.5073 18.8102 12.3285L14.0739 7.5558C13.9856 7.46661 13.8806 7.39571 13.7648 7.34716C13.6491 7.29861 13.5249 7.27336 13.3994 7.27286C13.2739 7.27236 13.1495 7.29662 13.0333 7.34425C12.9172 7.39188 12.8116 7.46194 12.7226 7.55043Z"
+                                            fill="currentColor"
+                                        />
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </ng-template>
+                <ng-template swiperSlide>
+                    <div class="rounded-3xl bg-gray-dark dark:bg-black">
+                        <img src="/assets/images/insurance/blog2.jpg" alt="blog-3" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <span class="rounded bg-primary/10 py-1 px-2 text-sm font-extrabold text-primary">Marketing</span>
+                            <a
+                            routerLink="blog-details"
+                                class="my-[10px] block text-lg font-extrabold leading-[23px] text-white transition line-clamp-2 hover:text-secondary dark:hover:text-secondary"
+                            >
+                                What’s growth hacking? 8 great books to learn more about it
+                            </a>
+                            <p class="line-clamp-3">
+                                The use of resource-light and cost-effective digital marketing tactics to help grow and retain an active user base, sell
+                                products and...
+                            </p>
+                            <div class="mt-6 flex items-center justify-between text-secondary">
+                                <span>Dec 25, 2022</span>
+                                <a routerLink="blog-details" class="text-primary transition hover:text-secondary">
+                                    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M25.4091 13.0009C25.4091 19.8539 19.8531 25.41 13 25.41C6.14699 25.41 0.590937 19.8539 0.590937 13.0009C0.590937 6.14785 6.14699 0.591797 13 0.591797C19.8531 0.591797 25.4091 6.14785 25.4091 13.0009ZM12.7226 7.55043C12.6336 7.63872 12.5628 7.74368 12.5144 7.85931C12.466 7.97495 12.4408 8.09899 12.4403 8.22436C12.4398 8.34973 12.464 8.47398 12.5115 8.58999C12.559 8.70601 12.6289 8.81153 12.7172 8.90052L15.8386 12.0463H7.86935C7.61618 12.0463 7.37339 12.1469 7.19438 12.3259C7.01537 12.5049 6.9148 12.7477 6.9148 13.0009C6.9148 13.254 7.01537 13.4968 7.19438 13.6759C7.37339 13.8549 7.61618 13.9554 7.86935 13.9554H15.8386L12.7172 17.1013C12.6289 17.1903 12.5591 17.2959 12.5116 17.412C12.4641 17.5281 12.4399 17.6524 12.4405 17.7778C12.441 17.9033 12.4663 18.0273 12.5148 18.143C12.5633 18.2587 12.6341 18.3636 12.7232 18.4519C12.8123 18.5402 12.9179 18.6101 13.034 18.6576C13.1501 18.7051 13.2744 18.7292 13.3998 18.7287C13.5252 18.7281 13.6493 18.7029 13.765 18.6544C13.8806 18.6059 13.9856 18.5351 14.0739 18.446L18.8102 13.6732C18.9876 13.4944 19.0872 13.2528 19.0872 13.0009C19.0872 12.749 18.9876 12.5073 18.8102 12.3285L14.0739 7.5558C13.9856 7.46661 13.8806 7.39571 13.7648 7.34716C13.6491 7.29861 13.5249 7.27336 13.3994 7.27286C13.2739 7.27236 13.1495 7.29662 13.0333 7.34425C12.9172 7.39188 12.8116 7.46194 12.7226 7.55043Z"
+                                            fill="currentColor"
+                                        />
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </ng-template>
+                <ng-template swiperSlide>
+                    <div class="rounded-3xl bg-gray-dark dark:bg-black">
+                        <img src="/assets/images/insurance/blog3.jpg" alt="blog-3" class="h-52 w-full rounded-t-3xl object-cover" />
+                        <div class="p-5 text-sm font-bold">
+                            <span class="rounded bg-primary/10 py-1 px-2 text-sm font-extrabold text-primary">Integration</span>
+                            <a
+                            routerLink="blog-details"
+                                class="my-[10px] block text-lg font-extrabold leading-[23px] text-white transition line-clamp-2 hover:text-secondary dark:hover:text-secondary"
+                            >
+                                6 new interesting mobile apps to grow your audience on
+                            </a>
+                            <p class="line-clamp-3">
+                                Before I get into the advice, here’s a bit about my background and experience with growing audiences for creative work.
+                            </p>
+                            <div class="mt-6 flex items-center justify-between text-secondary">
+                                <span>Nov 06, 2022</span>
+                                <a routerLink="blog-details" class="text-primary transition hover:text-secondary">
+                                    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M25.4091 13.0009C25.4091 19.8539 19.8531 25.41 13 25.41C6.14699 25.41 0.590937 19.8539 0.590937 13.0009C0.590937 6.14785 6.14699 0.591797 13 0.591797C19.8531 0.591797 25.4091 6.14785 25.4091 13.0009ZM12.7226 7.55043C12.6336 7.63872 12.5628 7.74368 12.5144 7.85931C12.466 7.97495 12.4408 8.09899 12.4403 8.22436C12.4398 8.34973 12.464 8.47398 12.5115 8.58999C12.559 8.70601 12.6289 8.81153 12.7172 8.90052L15.8386 12.0463H7.86935C7.61618 12.0463 7.37339 12.1469 7.19438 12.3259C7.01537 12.5049 6.9148 12.7477 6.9148 13.0009C6.9148 13.254 7.01537 13.4968 7.19438 13.6759C7.37339 13.8549 7.61618 13.9554 7.86935 13.9554H15.8386L12.7172 17.1013C12.6289 17.1903 12.5591 17.2959 12.5116 17.412C12.4641 17.5281 12.4399 17.6524 12.4405 17.7778C12.441 17.9033 12.4663 18.0273 12.5148 18.143C12.5633 18.2587 12.6341 18.3636 12.7232 18.4519C12.8123 18.5402 12.9179 18.6101 13.034 18.6576C13.1501 18.7051 13.2744 18.7292 13.3998 18.7287C13.5252 18.7281 13.6493 18.7029 13.765 18.6544C13.8806 18.6059 13.9856 18.5351 14.0739 18.446L18.8102 13.6732C18.9876 13.4944 19.0872 13.2528 19.0872 13.0009C19.0872 12.749 18.9876 12.5073 18.8102 12.3285L14.0739 7.5558C13.9856 7.46661 13.8806 7.39571 13.7648 7.34716C13.6491 7.29861 13.5249 7.27336 13.3994 7.27286C13.2739 7.27236 13.1495 7.29662 13.0333 7.34425C12.9172 7.39188 12.8116 7.46194 12.7226 7.55043Z"
+                                            fill="currentColor"
+                                        />
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </ng-template>
+            </swiper>
+        </div>
+    </section>
+
+    <section class="py-10 lg:py-20">
+        <logo-slider></logo-slider>
+    </section>
+
+    <section class="bg-gradient-to-t from-transparent to-white py-12 dark:bg-gray-dark dark:to-transparent lg:py-24">
+        <div class="container">
+            <div class="relative z-10 lg:flex">
+                <div class="heading text-center lg:mb-0 lg:w-1/3 ltr:lg:pr-10 ltr:lg:text-left rtl:lg:pl-10 rtl:lg:text-right">
+                    <h6>Get In Touch.</h6>
+                    <h4 class="sm:!leading-[50px]">Ready to Get Started?</h4>
+                    <div class="mx-auto mt-5 overflow-hidden">
+                        <img
+                            src="/assets/images/form-light-img.svg"
+                            alt="form-img"
+                            class="mx-auto block dark:hidden"
+                            data-aos="fade-right"
+                            data-aos-duration="1000"
+                        />
+                        <img
+                            src="/assets/images/form-dark-img.svg"
+                            alt="form-img"
+                            class="mx-auto hidden dark:block"
+                            data-aos="fade-right"
+                            data-aos-duration="1000"
+                        />
+                    </div>
+                </div>
+                <form action="" class="rounded-3xl bg-white px-4 py-12 dark:bg-[#101626] lg:w-2/3 lg:px-8">
+                    <div class="grid gap-10 sm:grid-cols-2">
+                        <div class="relative">
+                            <input
+                                type="text"
+                                name="name"
+                                class="w-full rounded-2xl border-2 border-gray/20 bg-transparent p-4 font-bold outline-none transition focus:border-secondary ltr:pr-12 rtl:pl-12"
+                            />
+                            <label for="" class="absolute -top-3 bg-white px-2 font-bold ltr:left-6 rtl:right-6 dark:bg-[#101626] dark:text-white"
+                                >Full Name</label
+                            >
+                            <svg
+                                width="20"
+                                height="22"
+                                viewBox="0 0 20 22"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 dark:text-white"
+                            >
+                                <path
+                                    d="M5.42855 5.57875C5.42855 8.10348 7.47525 10.1502 9.99998 10.1502C12.5247 10.1502 14.5714 8.10348 14.5714 5.57875C14.5714 3.05402 12.5247 1.00732 9.99998 1.00732"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M2 16.9328C2 15.9495 2.61812 15.0724 3.5441 14.7417V14.7417C7.71891 13.2507 12.2811 13.2507 16.4559 14.7417V14.7417C17.3819 15.0724 18 15.9495 18 16.9328V18.7014C18 19.9185 16.922 20.8535 15.7172 20.6813L13.8184 20.4101C11.2856 20.0483 8.71435 20.0483 6.18162 20.4101L4.28284 20.6813C3.07798 20.8535 2 19.9185 2 18.7014V16.9328Z"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                />
+                            </svg>
+                        </div>
+                        <div class="relative">
+                            <input
+                                type="email"
+                                name="email"
+                                class="w-full rounded-2xl border-2 border-gray/20 bg-transparent p-4 font-bold outline-none transition focus:border-secondary ltr:pr-12 rtl:pl-12"
+                            />
+                            <label for="" class="absolute -top-3 bg-white px-2 font-bold ltr:left-6 rtl:right-6 dark:bg-[#101626] dark:text-white"
+                                >Email Address</label
+                            >
+                            <svg
+                                width="22"
+                                height="21"
+                                viewBox="0 0 22 21"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 dark:text-white"
+                            >
+                                <path
+                                    d="M1 8.00732V7.00732C1 4.2459 3.23858 2.00732 6 2.00732H16C18.7614 2.00732 21 4.2459 21 7.00732V13.0073C21 15.7687 18.7614 18.0073 16 18.0073H6C3.23858 18.0073 1 15.7687 1 13.0073V12.0073"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M5 7.00732L9.8 10.6073C10.5111 11.1407 11.4889 11.1407 12.2 10.6073L17 7.00732"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                        </div>
+                        <div class="relative">
+                            <input
+                                type="text"
+                                name="mobile"
+                                class="w-full rounded-2xl border-2 border-gray/20 bg-transparent p-4 font-bold outline-none transition focus:border-secondary ltr:pr-12 rtl:pl-12"
+                            />
+                            <label for="" class="absolute -top-3 bg-white px-2 font-bold ltr:left-6 rtl:right-6 dark:bg-[#101626] dark:text-white"
+                                >Mobile Number</label
+                            >
+                            <svg
+                                width="22"
+                                height="22"
+                                viewBox="0 0 22 22"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 dark:text-white"
+                            >
+                                <path
+                                    d="M6.45241 1.40806C5.45292 0.783702 4.14202 0.887138 3.2983 1.73086L1.86856 3.1606C-0.302899 5.33207 1.73747 10.8931 6.42586 15.5815C11.1142 20.2699 16.6753 22.3102 18.8467 20.1388L20.2765 18.709C21.2635 17.722 21.2374 16.0956 20.2182 15.0764L18.0036 12.8619C16.9844 11.8426 15.358 11.8165 14.371 12.8036L14.0639 13.1107C13.531 13.6436 12.6713 13.6957 12.0713 13.2005C11.4925 12.7229 10.9159 12.208 10.3576 11.6497C9.79933 11.0914 9.28441 10.5149 8.80678 9.93607C8.31161 9.33601 8.36374 8.47631 8.89666 7.9434L9.20375 7.63631C9.98187 6.85819 10.1303 5.68271 9.65898 4.72062"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                />
+                            </svg>
+                        </div>
+                        <div class="relative">
+                            <input
+                                type="text"
+                                name="city"
+                                class="w-full rounded-2xl border-2 border-gray/20 bg-transparent p-4 font-bold outline-none transition focus:border-secondary ltr:pr-12 rtl:pl-12"
+                            />
+                            <label for="" class="absolute -top-3 bg-white px-2 font-bold ltr:left-6 rtl:right-6 dark:bg-[#101626] dark:text-white">City</label>
+                            <svg
+                                width="20"
+                                height="22"
+                                viewBox="0 0 20 22"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 dark:text-white"
+                            >
+                                <path
+                                    d="M5.89416 2.31259C7.20149 1.48625 8.75475 1.00732 10.4211 1.00732C15.0719 1.00732 18.8421 4.73828 18.8421 9.34066C18.8421 15.0541 12.1053 21.0073 10.4211 21.0073C8.73684 21.0073 2 15.0541 2 9.34066C2 7.87581 2.38193 6.49924 3.05263 5.30315"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M13.4571 9.77392C13.5365 9.49702 13.579 9.20456 13.579 8.90216C13.579 7.15811 12.1651 5.74427 10.4211 5.74427C8.67702 5.74427 7.26318 7.15811 7.26318 8.90216C7.26318 10.6462 8.67702 12.0601 10.4211 12.0601C10.6633 12.0601 10.8991 12.0328 11.1256 11.9812"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                />
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="relative mt-10">
+                        <input
+                            type="text"
+                            name="message"
+                            class="w-full rounded-2xl border-2 border-gray/20 bg-transparent p-4 font-bold outline-none transition focus:border-secondary ltr:pr-12 rtl:pl-12"
+                        />
+                        <label for="" class="absolute -top-3 bg-white px-2 font-bold ltr:left-6 rtl:right-6 dark:bg-[#101626] dark:text-white">Message</label>
+                        <svg
+                            width="22"
+                            height="22"
+                            viewBox="0 0 22 22"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 dark:text-white"
+                        >
+                            <path
+                                d="M1 11.467V18.9267C1 19.7652 1.96993 20.2314 2.6247 19.7076L5.45217 17.4456C5.8068 17.1619 6.24742 17.0073 6.70156 17.0073H16C18.7614 17.0073 21 14.7687 21 12.0073V6.00732C21 3.2459 18.7614 1.00732 16 1.00732H6C3.23858 1.00732 1 3.2459 1 6.00732V7.62225"
+                                stroke="currentColor"
+                                stroke-width="1.8"
+                                stroke-linecap="round"
+                            />
+                            <circle cx="6.05005" cy="9.05713" r="1.25" fill="currentColor" />
+                            <circle cx="11.05" cy="9.05713" r="1.25" fill="currentColor" />
+                            <circle cx="16.05" cy="9.05713" r="1.25" fill="currentColor" />
+                        </svg>
+                    </div>
+                    <div class="mt-10 text-center ltr:lg:text-right rtl:lg:text-left">
+                        <button type="button" class="btn bg-gray px-12 capitalize text-white dark:bg-white dark:text-black dark:hover:bg-secondary">
+                            Send Message
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </section>
+</div>

src/app/insurance.ts

@@ -0,0 +1,59 @@
+import { Component, Input } from '@angular/core';
+import SwiperCore, { SwiperOptions, Autoplay, Navigation } from 'swiper';
+import { Store } from '@ngrx/store';
+
+// install Swiper modules
+SwiperCore.use([Autoplay]);
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './insurance.html',
+})
+export class InsuranceComponent {
+    storeData: any;
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+
+    config: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        breakpoints: {
+            640: {
+                slidesPerView: 2,
+            },
+            1024: {
+                slidesPerView: 3,
+            },
+        },
+        navigation: {
+            nextEl: '.blog-slider-button-next',
+            prevEl: '.blog-slider-button-prev',
+        },
+        modules: [Navigation, Autoplay],
+    };
+
+    @Input() feedbacks: any = [
+        {
+            id: 1,
+            name: 'Allan Branch',
+            role: 'CEO of Lifted',
+            thumbnail: '/assets/images/modern-saas/client-1.png',
+            message:
+                "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.",
+        },
+    ];
+
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/job-placement.html

@@ -0,0 +1,844 @@
+<div>
+    <section class="relative bg-black pt-[137px] ltr:rounded-bl-[50px] rtl:rounded-bl-[50px] ltr:sm:rounded-bl-[200px] rtl:sm:rounded-br-[200px]">
+        <div class="absolute top-0 ltr:right-0 rtl:left-0 rtl:rotate-y-180">
+            <svg width="758" height="741" viewBox="0 0 758 741" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g opacity="0.03">
+                    <ellipse
+                        opacity="0.1"
+                        cx="752"
+                        cy="370.646"
+                        rx="750"
+                        ry="749.646"
+                        stroke="white"
+                        stroke-width="3"
+                        stroke-miterlimit="4.62023"
+                        stroke-linecap="round"
+                        stroke-dasharray="35 50 15 15"
+                    />
+                    <path
+                        opacity="0.1"
+                        d="M1443.13 370.646C1443.13 752.153 1133.7 1061.43 752 1061.43C370.296 1061.43 60.8655 752.153 60.8655 370.646C60.8655 -10.8606 370.296 -320.134 752 -320.134C1133.7 -320.134 1443.13 -10.8606 1443.13 370.646Z"
+                        stroke="white"
+                        stroke-width="3"
+                    />
+                    <ellipse
+                        opacity="0.2"
+                        cx="752"
+                        cy="370.646"
+                        rx="634.561"
+                        ry="634.207"
+                        stroke="white"
+                        stroke-width="3"
+                        stroke-miterlimit="4.62023"
+                        stroke-linecap="round"
+                        stroke-dasharray="35 50 15 15"
+                    />
+                    <path
+                        opacity="0.3"
+                        d="M1328.4 370.646C1328.4 688.789 1070.34 946.696 752 946.696C433.66 946.696 175.596 688.789 175.596 370.646C175.596 52.5037 433.66 -205.403 752 -205.403C1070.34 -205.403 1328.4 52.5037 1328.4 370.646Z"
+                        stroke="white"
+                        stroke-width="3"
+                    />
+                    <ellipse
+                        opacity="0.4"
+                        cx="752"
+                        cy="370.646"
+                        rx="519.83"
+                        ry="519.476"
+                        stroke="white"
+                        stroke-width="3"
+                        stroke-miterlimit="4.62023"
+                        stroke-linecap="round"
+                        stroke-dasharray="35 50 15 15"
+                    />
+                    <path
+                        opacity="0.5"
+                        d="M1211.55 370.646C1211.55 624.251 1005.8 829.84 752 829.84C498.197 829.84 292.452 624.251 292.452 370.646C292.452 117.041 498.197 -88.5479 752 -88.5479C1005.8 -88.5479 1211.55 117.041 1211.55 370.646Z"
+                        stroke="white"
+                        stroke-width="3"
+                    />
+                    <path
+                        opacity="0.6"
+                        d="M1155.6 370.646C1155.6 593.351 974.903 773.891 752 773.891C529.097 773.891 348.401 593.351 348.401 370.646C348.401 147.942 529.097 -32.5986 752 -32.5986C974.903 -32.5986 1155.6 147.942 1155.6 370.646Z"
+                        stroke="white"
+                        stroke-width="3"
+                    />
+                    <ellipse
+                        opacity="0.7"
+                        cx="752"
+                        cy="370.646"
+                        rx="350.567"
+                        ry="350.212"
+                        stroke="white"
+                        stroke-width="3"
+                        stroke-miterlimit="4.62023"
+                        stroke-linecap="round"
+                        stroke-dasharray="35 50 15 15"
+                    />
+                    <path
+                        opacity="0.8"
+                        d="M1040.16 370.647C1040.16 529.596 911.148 658.453 752 658.453C592.852 658.453 463.84 529.596 463.84 370.647C463.84 211.698 592.852 82.8408 752 82.8408C911.148 82.8408 1040.16 211.698 1040.16 370.647Z"
+                        stroke="white"
+                        stroke-width="3"
+                    />
+                    <ellipse
+                        opacity="0.9"
+                        cx="752"
+                        cy="370.646"
+                        rx="223.088"
+                        ry="222.734"
+                        stroke="white"
+                        stroke-width="3"
+                        stroke-miterlimit="4.62023"
+                        stroke-linecap="round"
+                        stroke-dasharray="35 50 15 15"
+                    />
+                    <path
+                        d="M909.848 370.646C909.848 457.624 839.18 528.14 752 528.14C664.82 528.14 594.152 457.624 594.152 370.646C594.152 283.667 664.82 213.151 752 213.151C839.18 213.151 909.848 283.667 909.848 370.646Z"
+                        stroke="white"
+                        stroke-width="3"
+                    />
+                    <ellipse
+                        cx="752"
+                        cy="370.646"
+                        rx="106.941"
+                        ry="106.586"
+                        stroke="white"
+                        stroke-width="3"
+                        stroke-miterlimit="4.62023"
+                        stroke-linecap="round"
+                        stroke-dasharray="35 50 15 15"
+                    />
+                </g>
+            </svg>
+        </div>
+        <div class="container">
+            <div class="flex flex-col gap-8 lg:flex-row lg:gap-0">
+                <div class="text-center text-white lg:mt-40 ltr:lg:text-left rtl:lg:text-right">
+                    <h2 class="text-4xl font-black sm:text-6xl sm:leading-[75px]">Get Your <span class="text-secondary">Developers</span> Job With Plurk.</h2>
+                    <p class="mt-5 text-lg font-semibold lg:max-w-[493px]">
+                        Jobs is a curated job board of the best jobs for developers, designers and marketers in the tech industry.
+                    </p>
+                    <div class="relative mx-auto w-full max-w-[525px] space-y-4 sm:space-y-0 lg:mx-0">
+                        <div class="mt-5 flex items-center gap-3 rounded-md bg-white py-1 text-base font-semibold">
+                            <span class="ltr:pl-6 rtl:pr-6">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M18.5 18.5L22 22" stroke="#7780A1" stroke-width="1.5" stroke-linecap="round" />
+                                    <path
+                                        d="M6.75 3.27093C8.14732 2.46262 9.76964 2 11.5 2C16.7467 2 21 6.25329 21 11.5C21 16.7467 16.7467 21 11.5 21C6.25329 21 2 16.7467 2 11.5C2 9.76964 2.46262 8.14732 3.27093 6.75"
+                                        stroke="#7780A1"
+                                        stroke-width="1.5"
+                                        stroke-linecap="round"
+                                    />
+                                </svg>
+                            </span>
+                            <input
+                                type="text"
+                                placeholder="example@gmail.com*"
+                                class="h-14 flex-1 border-0 text-black outline-0 ltr:pr-4 rtl:pl-4 sm:ltr:pr-40 sm:rtl:pl-40"
+                            />
+                        </div>
+                        <div class="top-1/2 ltr:right-2 rtl:left-2 sm:absolute sm:-translate-y-1/2">
+                            <button type="button" class="btn rounded-md text-white">Search Job</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="mx-auto w-full max-w-[482px]">
+                    <img src="/assets/images/job/bannerimg.png" class="rtl:rotate-y-180" data-aos="fade-up" data-aos-duration="1000" alt="" />
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="py-14 lg:py-28">
+        <div class="container">
+            <div class="space-y-14">
+                <h5 class="mb-12 text-center text-2xl font-extrabold text-black dark:text-white">These companies work with us to make us grow.</h5>
+                <swiper [config]="config">
+                    <ng-template swiperSlide>
+                        <a href="javascript:" class="flex items-center gap-3">
+                            <div>
+                                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <g clip-path="url(#clip0_298_1769)">
+                                        <mask id="mask0_298_1769" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="30" height="30">
+                                            <circle cx="15" cy="15" r="15" fill="#C4C4C4" />
+                                        </mask>
+                                        <g mask="url(#mask0_298_1769)">
+                                            <circle cx="7.86398" cy="-2.66231" r="12.4449" transform="rotate(-22 7.86398 -2.66231)" fill="#47BDFF" />
+                                            <circle cx="22.1375" cy="32.6639" r="12.4449" transform="rotate(-22 22.1375 32.6639)" fill="#47BDFF" />
+                                            <circle cx="-2.6629" cy="22.1365" r="12.4449" transform="rotate(-22 -2.6629 22.1365)" fill="#B476E5" />
+                                            <circle cx="32.337" cy="7.05449" r="12.4449" transform="rotate(-22 32.337 7.05449)" fill="#B476E5" />
+                                        </g>
+                                    </g>
+                                    <defs>
+                                        <clipPath id="clip0_298_1769">
+                                            <rect width="30" height="30" fill="white" />
+                                        </clipPath>
+                                    </defs>
+                                </svg>
+                            </div>
+                            <span class="text-xl font-bold text-black dark:text-white">Camera</span>
+                        </a>
+                    </ng-template>
+                    <ng-template swiperSlide>
+                        <a href="javascript:" class="flex items-center gap-3">
+                            <div>
+                                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M2 12.7576C2 6.26406 7.26406 1 13.7576 1V17.2417C13.7576 23.7352 8.49355 28.9993 2 28.9993V12.7576Z"
+                                        fill="#FFBD11"
+                                    />
+                                    <path
+                                        d="M15.4633 7.38899C15.4633 3.86045 18.3237 1 21.8522 1C25.3808 1 28.2412 3.86045 28.2412 7.38899V7.75786C28.2412 11.2864 25.3808 14.1469 21.8522 14.1469C18.3237 14.1469 15.4633 11.2864 15.4633 7.75786V7.38899Z"
+                                        fill="#47BDFF"
+                                    />
+                                    <path
+                                        d="M15.4633 22.2425C15.4633 18.714 18.3237 15.8535 21.8522 15.8535C25.3808 15.8535 28.2412 18.714 28.2412 22.2425V22.6114C28.2412 26.1399 25.3808 29.0004 21.8522 29.0004C18.3237 29.0004 15.4633 26.1399 15.4633 22.6114V22.2425Z"
+                                        fill="#B476E5"
+                                    />
+                                </svg>
+                            </div>
+                            <span class="text-xl font-bold text-black dark:text-white">Startup</span>
+                        </a>
+                    </ng-template>
+                    <ng-template swiperSlide>
+                        <a href="javascript:" class="flex items-center gap-3">
+                            <div>
+                                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <g clip-path="url(#clip0_301_1299)">
+                                        <rect x="5.55554" y="5.55469" width="18.8889" height="18.8889" rx="8" fill="#47BDFF" />
+                                        <rect x="9.42285" width="2.88247" height="4.44444" rx="1.44123" fill="#B476E5" />
+                                        <rect x="13.559" width="2.88247" height="4.44444" rx="1.44123" fill="#B476E5" />
+                                        <rect x="17.696" width="2.88247" height="4.44444" rx="1.44123" fill="#B476E5" />
+                                        <rect y="20.5762" width="2.88247" height="4.44444" rx="1.44123" transform="rotate(-90 0 20.5762)" fill="#B476E5" />
+                                        <rect y="16.4395" width="2.88247" height="4.44444" rx="1.44123" transform="rotate(-90 0 16.4395)" fill="#B476E5" />
+                                        <rect y="12.3047" width="2.88247" height="4.44444" rx="1.44123" transform="rotate(-90 0 12.3047)" fill="#B476E5" />
+                                        <rect
+                                            x="25.5558"
+                                            y="20.5762"
+                                            width="2.88247"
+                                            height="4.44444"
+                                            rx="1.44123"
+                                            transform="rotate(-90 25.5558 20.5762)"
+                                            fill="#B476E5"
+                                        />
+                                        <rect
+                                            x="25.5558"
+                                            y="16.4395"
+                                            width="2.88247"
+                                            height="4.44444"
+                                            rx="1.44123"
+                                            transform="rotate(-90 25.5558 16.4395)"
+                                            fill="#B476E5"
+                                        />
+                                        <rect
+                                            x="25.5558"
+                                            y="12.3047"
+                                            width="2.88247"
+                                            height="4.44444"
+                                            rx="1.44123"
+                                            transform="rotate(-90 25.5558 12.3047)"
+                                            fill="#B476E5"
+                                        />
+                                        <rect x="9.42285" y="25.5547" width="2.88247" height="4.44444" rx="1.44123" fill="#B476E5" />
+                                        <rect x="13.559" y="25.5547" width="2.88247" height="4.44444" rx="1.44123" fill="#B476E5" />
+                                        <rect x="17.696" y="25.5547" width="2.88247" height="4.44444" rx="1.44123" fill="#B476E5" />
+                                    </g>
+                                    <defs>
+                                        <clipPath id="clip0_301_1299">
+                                            <rect width="30" height="30" fill="white" />
+                                        </clipPath>
+                                    </defs>
+                                </svg>
+                            </div>
+                            <span class="text-xl font-bold text-black dark:text-white">Software</span>
+                        </a>
+                    </ng-template>
+                    <ng-template swiperSlide>
+                        <a href="javascript:" class="flex items-center gap-3">
+                            <div>
+                                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M16.7705 5.24752C16.7705 3.4509 18.9554 2.56542 20.2062 3.85514L29.1466 13.0738C29.5085 13.4469 29.7109 13.9463 29.7109 14.4661V25.0644C29.7109 26.861 27.526 27.7465 26.2752 26.4568L17.3348 17.2381C16.9729 16.865 16.7705 16.3656 16.7705 15.8457V5.24752Z"
+                                        fill="#47BDFF"
+                                    />
+                                    <path
+                                        d="M8.75098 4.93502C8.75098 3.1384 10.9359 2.25292 12.1867 3.54264L21.1271 12.7613C21.489 13.1344 21.6914 13.6338 21.6914 14.1536V24.7519C21.6914 26.5485 19.5064 27.434 18.2556 26.1443L9.31526 16.9256C8.95337 16.5525 8.75098 16.0531 8.75098 15.5332V4.93502Z"
+                                        fill="#FFBD11"
+                                    />
+                                    <path
+                                        d="M1 5.24752C1 3.4509 3.18492 2.56542 4.43571 3.85514L13.3761 13.0738C13.738 13.4469 13.9404 13.9463 13.9404 14.4661V25.0644C13.9404 26.861 11.7555 27.7465 10.5047 26.4568L1.56429 17.2381C1.20239 16.865 1 16.3656 1 15.8457V5.24752Z"
+                                        fill="#B476E5"
+                                    />
+                                </svg>
+                            </div>
+                            <span class="text-xl font-bold text-black dark:text-white">Techlify</span>
+                        </a>
+                    </ng-template>
+                    <ng-template swiperSlide>
+                        <a href="javascript:" class="flex items-center gap-3">
+                            <div>
+                                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <mask id="mask0_301_1325" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="28" height="30">
+                                        <path
+                                            d="M12.0903 0.695468C13.6964 -0.231822 15.6753 -0.231823 17.2814 0.695467L25.7762 5.59995C27.3823 6.52724 28.3717 8.24094 28.3717 10.0955V19.9045C28.3717 21.7591 27.3823 23.4728 25.7762 24.4001L17.2814 29.3045C15.6753 30.2318 13.6964 30.2318 12.0903 29.3045L3.59552 24.4001C1.98941 23.4728 1 21.7591 1 19.9045V10.0955C1 8.24094 1.98941 6.52724 3.59552 5.59995L12.0903 0.695468Z"
+                                            fill="#C4C4C4"
+                                        />
+                                    </mask>
+                                    <g mask="url(#mask0_301_1325)">
+                                        <rect width="17.3224" height="17.3224" transform="matrix(0.866025 0.5 -0.866025 0.5 14.686 -1.06055)" fill="#B476E5" />
+                                        <rect width="15.939" height="15.939" transform="matrix(0.866025 0.5 -2.20305e-08 1 0.881958 7.72656)" fill="#47BDFF" />
+                                        <rect width="15.939" height="15.939" transform="matrix(0.866025 -0.5 2.20305e-08 1 14.686 15.6973)" fill="#FFBD11" />
+                                    </g>
+                                </svg>
+                            </div>
+                            <span class="text-xl font-bold text-black dark:text-white">Blockly</span>
+                        </a>
+                    </ng-template>
+                    <ng-template swiperSlide>
+                        <a href="javascript:" class="flex items-center gap-3">
+                            <div>
+                                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M12.7673 26.3704C12.5926 26.3704 12.4091 26.3529 12.2256 26.3005C11.0285 26.0034 10.2946 24.7888 10.5916 23.5918L15.0653 5.69711C15.3711 4.50006 16.5857 3.77484 17.7827 4.06318C18.9798 4.36899 19.705 5.58353 19.4079 6.78058L14.9342 24.6753C14.6809 25.6888 13.7721 26.3704 12.7673 26.3704Z"
+                                        fill="#47BDFF"
+                                    />
+                                    <path
+                                        d="M23.2896 21.8976C22.7129 21.8976 22.1449 21.6791 21.7081 21.2422C20.8343 20.3685 20.8343 18.953 21.7081 18.0792L24.6002 15.1871L21.7081 12.2949C20.8343 11.4211 20.8343 10.0056 21.7081 9.13189C22.5818 8.25812 23.9973 8.25812 24.8711 9.13189L29.3448 13.6056C30.2185 14.4793 30.2185 15.8948 29.3448 16.7686L24.8711 21.2422C24.4342 21.6791 23.8663 21.8976 23.2896 21.8976Z"
+                                        fill="#B476E5"
+                                    />
+                                    <path
+                                        d="M6.7105 21.8976C6.13382 21.8976 5.56587 21.6791 5.12899 21.2422L0.655323 16.7686C-0.218441 15.8948 -0.218441 14.4793 0.655323 13.6056L5.12899 9.13189C6.00275 8.25812 7.41825 8.25812 8.29201 9.13189C9.16578 10.0056 9.16578 11.4211 8.29201 12.2949L5.39986 15.1871L8.29201 18.0792C9.16578 18.953 9.16578 20.3685 8.29201 21.2422C7.85513 21.6791 7.28718 21.8976 6.7105 21.8976Z"
+                                        fill="#B476E5"
+                                    />
+                                </svg>
+                            </div>
+                            <span class="text-xl font-bold text-black dark:text-white">Codelify</span>
+                        </a>
+                    </ng-template>
+                    <ng-template swiperSlide>
+                        <a href="javascript:" class="flex items-center gap-3">
+                            <div>
+                                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <rect y="3" width="28.5828" height="24.7945" rx="2" fill="#47BDFF" />
+                                    <path
+                                        d="M28.0001 10.8555H15.9614C14.8569 10.8555 13.9614 11.7509 13.9614 12.8555V17.9394C13.9614 19.044 14.8569 19.9394 15.9614 19.9394H28.0001C29.1046 19.9394 30.0001 19.044 30.0001 17.9394V12.8555C30.0001 11.7509 29.1046 10.8555 28.0001 10.8555Z"
+                                        fill="#B476E5"
+                                    />
+                                    <circle cx="18.3508" cy="15.3979" r="2.27099" fill="white" />
+                                </svg>
+                            </div>
+                            <span class="text-xl font-bold text-black dark:text-white">Financely</span>
+                        </a>
+                    </ng-template>
+                    <ng-template swiperSlide>
+                        <a href="javascript:" class="flex items-center gap-3">
+                            <div>
+                                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M14.4159 6.37499C14.4159 3.95781 12.8496 2 10.9159 2C8.98433 2 7.41589 3.95781 7.41589 6.37499C7.41589 8.78998 8.98433 10.75 10.9159 10.75C12.8496 10.75 14.4159 8.78998 14.4159 6.37499Z"
+                                        fill="#B476E5"
+                                    />
+                                    <path
+                                        d="M7.99998 12.791C7.99998 10.3738 6.43373 8.41602 4.49999 8.41602C2.56625 8.41602 1 10.3738 1 12.791C1 15.2082 2.56625 17.166 4.49999 17.166C6.43373 17.166 7.99998 15.2082 7.99998 12.791Z"
+                                        fill="#B476E5"
+                                    />
+                                    <path
+                                        d="M29 12.791C29 10.3738 27.4337 8.41602 25.5 8.41602C23.5662 8.41602 22 10.3738 22 12.791C22 15.2082 23.5662 17.166 25.5 17.166C27.4337 17.166 29 15.2082 29 12.791Z"
+                                        fill="#B476E5"
+                                    />
+                                    <path
+                                        d="M22.5841 6.37499C22.5841 3.95781 21.0157 2 19.0841 2C17.1504 2 15.5841 3.95781 15.5841 6.37499C15.5841 8.78998 17.1504 10.75 19.0841 10.75C21.0157 10.75 22.5841 8.78998 22.5841 6.37499Z"
+                                        fill="#B476E5"
+                                    />
+                                    <path
+                                        d="M24.8808 23.0331C24.7561 21.8825 24.3864 20.7712 23.7958 19.7759C23.5267 19.3362 23.2708 18.9009 23.017 18.4787C20.928 14.9569 19.1255 11.9141 14.9999 11.9141C10.8743 11.9141 9.08052 14.9569 6.99147 18.4787C6.73991 18.9031 6.48178 19.3362 6.21272 19.7781C5.6221 20.7712 5.25022 21.8825 5.12772 23.0331C4.9571 24.4922 5.41866 25.9556 6.39647 27.0537C7.40709 28.1846 8.85303 28.8321 10.3711 28.83H19.6374C21.1555 28.8321 22.6014 28.1846 23.612 27.0537C24.5877 25.9556 25.0492 24.4922 24.8808 23.0331Z"
+                                        fill="#47BDFF"
+                                    />
+                                </svg>
+                            </div>
+                            <span class="text-xl font-bold text-black dark:text-white">Veterinary</span>
+                        </a>
+                    </ng-template>
+                </swiper>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-white py-14 dark:bg-gray-dark lg:py-24">
+        <div class="container">
+            <h3 class="mb-12 text-center text-3xl font-black text-black dark:text-white sm:text-[40px]">
+                FIND YOUR <span class="text-secondary">CAREER</span>
+            </h3>
+            <div class="grid grid-cols-2 gap-3 sm:gap-5 md:grid-cols-4" data-aos="fade-up" data-aos-duration="1000">
+                <div class="rounded-xl border-[1px] border-dashed border-gray/40 py-7 text-center dark:bg-black">
+                    <span>
+                        <svg class="mx-auto h-[60px] w-[60px]" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <circle cx="30.5" cy="15" r="10" fill="#47BDFF" />
+                            <ellipse cx="30.5" cy="42.5" rx="17.5" ry="10" fill="#47BDFF" />
+                        </svg>
+                    </span>
+                    <div
+                        class="mt-5 text-4xl font-bold text-secondary"
+                        [countUp]="675"
+                        [options]="{startVal :0 ,duration: 10,suffix: 'k+',enableScrollSpy:true,scrollSpyOnce : true}"
+                        [reanimateOnClick]="false"
+                    >
+                        {{0}}
+                    </div>
+                    <p class="mt-4 text-xl font-semibold">Active workers</p>
+                </div>
+                <div class="rounded-xl border-[1px] border-dashed border-gray/40 py-7 text-center dark:bg-black">
+                    <span>
+                        <svg class="mx-auto h-[60px] w-[60px]" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M53.625 21.25C53.625 17.7388 53.625 15.9833 52.7823 14.7221C52.4176 14.1762 51.9488 13.7074 51.4029 13.3427C50.2998 12.6056 48.8184 12.5132 46.1149 12.5017C46.1252 13.2301 46.1251 13.9914 46.125 14.7763L46.125 15V18.125H48.625C49.6605 18.125 50.5 18.9645 50.5 20C50.5 21.0355 49.6605 21.875 48.625 21.875H46.125V25.625H48.625C49.6605 25.625 50.5 26.4645 50.5 27.5C50.5 28.5355 49.6605 29.375 48.625 29.375H46.125V33.125H48.625C49.6605 33.125 50.5 33.9645 50.5 35C50.5 36.0355 49.6605 36.875 48.625 36.875H46.125V53.125H42.375V15C42.375 10.286 42.375 7.92893 40.9105 6.46447C39.4461 5 37.089 5 32.375 5H27.375C22.661 5 20.3039 5 18.8395 6.46447C17.375 7.92893 17.375 10.286 17.375 15V53.125H13.625V36.875H11.125C10.0895 36.875 9.25 36.0355 9.25 35C9.25 33.9645 10.0895 33.125 11.125 33.125H13.625V29.375H11.125C10.0895 29.375 9.25 28.5355 9.25 27.5C9.25 26.4645 10.0895 25.625 11.125 25.625H13.625V21.875H11.125C10.0895 21.875 9.25 21.0355 9.25 20C9.25 18.9645 10.0895 18.125 11.125 18.125H13.625V15L13.625 14.7763C13.6249 13.9914 13.6248 13.2301 13.6351 12.5017C10.9316 12.5132 9.45021 12.6056 8.34715 13.3427C7.8012 13.7074 7.33244 14.1762 6.96765 14.7221C6.125 15.9833 6.125 17.7388 6.125 21.25V53.125H4.875C3.83947 53.125 3 53.9645 3 55C3 56.0355 3.83947 56.875 4.875 56.875H54.875C55.9105 56.875 56.75 56.0355 56.75 55C56.75 53.9645 55.9105 53.125 54.875 53.125H53.625V21.25ZM23 29.375C23 28.3395 23.8395 27.5 24.875 27.5H34.875C35.9105 27.5 36.75 28.3395 36.75 29.375C36.75 30.4105 35.9105 31.25 34.875 31.25H24.875C23.8395 31.25 23 30.4105 23 29.375ZM23 36.875C23 35.8395 23.8395 35 24.875 35H34.875C35.9105 35 36.75 35.8395 36.75 36.875C36.75 37.9105 35.9105 38.75 34.875 38.75H24.875C23.8395 38.75 23 37.9105 23 36.875ZM29.875 45.625C30.9105 45.625 31.75 46.4645 31.75 47.5V53.125H28V47.5C28 46.4645 28.8395 45.625 29.875 45.625ZM23 15.625C23 14.5895 23.8395 13.75 24.875 13.75H34.875C35.9105 13.75 36.75 14.5895 36.75 15.625C36.75 16.6605 35.9105 17.5 34.875 17.5H24.875C23.8395 17.5 23 16.6605 23 15.625ZM23 23.125C23 22.0895 23.8395 21.25 24.875 21.25H34.875C35.9105 21.25 36.75 22.0895 36.75 23.125C36.75 24.1605 35.9105 25 34.875 25H24.875C23.8395 25 23 24.1605 23 23.125Z"
+                                fill="#47BDFF"
+                            />
+                        </svg>
+                    </span>
+                    <div
+                        class="mt-5 text-4xl font-bold text-secondary"
+                        [countUp]="145"
+                        [options]="{startVal :0 ,duration: 10,suffix: '+',enableScrollSpy:true,scrollSpyOnce : true}"
+                        [reanimateOnClick]="false"
+                    >
+                        {{0}}
+                    </div>
+                    <p class="mt-4 text-xl font-semibold">Companies</p>
+                </div>
+                <div class="rounded-xl border-[1px] border-dashed border-gray/40 py-7 text-center dark:bg-black">
+                    <span>
+                        <svg class="mx-auto h-[60px] w-[60px]" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M45.5 39.375C42.3934 39.375 39.875 41.8934 39.875 45C39.875 48.1066 42.3934 50.625 45.5 50.625C48.6066 50.625 51.125 48.1066 51.125 45C51.125 41.8934 48.6066 39.375 45.5 39.375ZM36.125 45C36.125 39.8223 40.3223 35.625 45.5 35.625C50.6777 35.625 54.875 39.8223 54.875 45C54.875 46.9108 54.3034 48.688 53.3218 50.1701L56.8258 53.6742C57.5581 54.4064 57.5581 55.5936 56.8258 56.3258C56.0936 57.0581 54.9064 57.0581 54.1742 56.3258L50.6701 52.8218C49.188 53.8034 47.4108 54.375 45.5 54.375C40.3223 54.375 36.125 50.1777 36.125 45Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M19.875 6.25C19.875 5.21447 19.0355 4.375 18 4.375C16.9645 4.375 16.125 5.21447 16.125 6.25V10.1981C12.5267 10.4863 10.1644 11.1934 8.42893 12.9289C6.69344 14.6644 5.98628 17.0267 5.69814 20.625H55.3019C55.0137 17.0267 54.3066 14.6644 52.5711 12.9289C50.8356 11.1934 48.4733 10.4863 44.875 10.1981V6.25C44.875 5.21447 44.0355 4.375 43 4.375C41.9645 4.375 41.125 5.21447 41.125 6.25V10.0323C39.4618 10 37.5976 10 35.5 10H25.5C23.4024 10 21.5382 10 19.875 10.0323V6.25Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M55.5 30V35C55.5 35.5132 55.5 36.0124 55.4995 36.4981C53.0921 33.6694 49.5056 31.875 45.5 31.875C38.2513 31.875 32.375 37.7513 32.375 45C32.375 49.0056 34.1694 52.5921 36.9981 54.9995C36.5124 55 36.0132 55 35.5 55H25.5C16.0719 55 11.3579 55 8.42893 52.0711C5.5 49.1421 5.5 44.4281 5.5 35V30C5.5 27.9024 5.5 26.0382 5.53226 24.375H55.4677C55.5 26.0382 55.5 27.9024 55.5 30Z"
+                                fill="#47BDFF"
+                            />
+                        </svg>
+                    </span>
+                    <div
+                        class="mt-5 text-4xl font-bold text-secondary"
+                        [countUp]="245"
+                        [options]="{startVal :0 ,duration: 10,suffix: '+',enableScrollSpy:true,scrollSpyOnce : true}"
+                        [reanimateOnClick]="false"
+                    >
+                        {{0}}
+                    </div>
+                    <p class="mt-4 text-xl font-semibold">Jobs posted</p>
+                </div>
+                <div class="rounded-xl border-[1px] border-dashed border-gray/40 py-7 text-center dark:bg-black">
+                    <span>
+                        <svg class="mx-auto h-[60px] w-[60px]" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M5.56958 28.125C6.52839 15.1936 17.3239 5 30.5003 5C28.4232 5 26.5738 5.91052 25.0523 7.30282C23.5385 8.68813 22.2593 10.6219 21.2246 12.9079C20.1838 15.2073 19.3753 17.8967 18.8281 20.8153C18.3895 23.1549 18.1226 25.6213 18.0336 28.125H5.56958ZM5.56958 31.875H18.0336C18.1226 34.3787 18.3895 36.8451 18.8281 39.1847C19.3753 42.1033 20.1838 44.7927 21.2246 47.0921C22.2593 49.3781 23.5385 51.3119 25.0523 52.6972C26.5738 54.0895 28.4232 55 30.5003 55C17.3239 55 6.52839 44.8064 5.56958 31.875Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M30.5003 8.48837C29.8128 8.48837 28.9246 8.78091 27.8918 9.72604C26.8514 10.6782 25.8098 12.1704 24.8896 14.2034C23.9755 16.223 23.2332 18.661 22.7224 21.3855C22.3202 23.531 22.0706 25.8055 21.983 28.125H39.0176C38.9301 25.8055 38.6805 23.5311 38.2782 21.3855C37.7674 18.661 37.0252 16.223 36.111 14.2034C35.1908 12.1704 34.1492 10.6782 33.1088 9.72604C32.076 8.78091 31.1878 8.48837 30.5003 8.48837Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M22.7224 38.6145C23.2332 41.339 23.9755 43.777 24.8896 45.7966C25.8098 47.8296 26.8514 49.3218 27.8918 50.274C28.9246 51.2191 29.8128 51.5116 30.5003 51.5116C31.1878 51.5116 32.076 51.2191 33.1088 50.274C34.1492 49.3218 35.1908 47.8296 36.111 45.7966C37.0252 43.777 37.7674 41.339 38.2782 38.6145C38.6805 36.469 38.9301 34.1945 39.0176 31.875H21.983C22.0706 34.1945 22.3202 36.4689 22.7224 38.6145Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M30.5003 5C32.5775 5 34.4269 5.91052 35.9483 7.30282C37.4621 8.68814 38.7414 10.6219 39.7761 12.9079C40.8169 15.2073 41.6253 17.8967 42.1725 20.8153C42.6112 23.1549 42.8781 25.6213 42.9671 28.125H55.4311C54.4723 15.1936 43.6767 5 30.5003 5Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M42.1725 39.1847C41.6253 42.1033 40.8169 44.7927 39.7761 47.0921C38.7414 49.3781 37.4621 51.3119 35.9483 52.6972C34.4269 54.0895 32.5775 55 30.5003 55C43.6767 55 54.4723 44.8064 55.4311 31.875H42.9671C42.8781 34.3787 42.6112 36.8451 42.1725 39.1847Z"
+                                fill="#47BDFF"
+                            />
+                        </svg>
+                    </span>
+                    <div
+                        class="mt-5 text-4xl font-bold text-secondary"
+                        [countUp]="35"
+                        [options]="{startVal :0 ,duration: 10,suffix: '+',enableScrollSpy:true,scrollSpyOnce : true}"
+                        [reanimateOnClick]="false"
+                    >
+                        {{0}}
+                    </div>
+                    <p class="mt-4 text-xl font-semibold">Countries</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="py-14 lg:py-24">
+        <div class="container">
+            <div class="heading text-center">
+                <h4>FEATURED <span class="text-primary">JOBS</span></h4>
+                <h6 class="!font-medium !text-gray">Know your worth and find the job that qualify your life</h6>
+            </div>
+            <ul class="filters portfolio-filter mb-14 flex flex-row gap-6 overflow-auto whitespace-nowrap pb-2.5 font-bold md:justify-center">
+                <li class="filter" [ngClass]="{ active: activeTab === 'all-jobs' }">
+                    <button type="button" class="bg-gray/[0.08] py-4 px-5 transition hover:bg-secondary hover:text-white" (click)="activeTab = 'all-jobs'">
+                        All Jobs
+                    </button>
+                </li>
+                <li class="filter" [ngClass]="{ active: activeTab === 'technology' }">
+                    <button type="button" class="bg-gray/[0.08] py-4 px-5 transition hover:bg-secondary hover:text-white" (click)="activeTab = 'technology'">
+                        Technology
+                    </button>
+                </li>
+                <li class="filter" [ngClass]="{ active: activeTab === 'transportation' }">
+                    <button
+                        type="button"
+                        class="bg-gray/[0.08] py-4 px-5 transition hover:bg-secondary hover:text-white"
+                        (click)="activeTab = 'transportation'"
+                    >
+                        Transportation
+                    </button>
+                </li>
+                <li class="filter" [ngClass]="{ active: activeTab === 'sales' }">
+                    <button type="button" class="bg-gray/[0.08] py-4 px-5 transition hover:bg-secondary hover:text-white" (click)="activeTab = 'sales'">
+                        Sales
+                    </button>
+                </li>
+                <li class="filter" [ngClass]="{ active: activeTab === 'marketing' }">
+                    <button type="button" class="bg-gray/[0.08] py-4 px-5 transition hover:bg-secondary hover:text-white" (click)="activeTab = 'marketing'">
+                        Marketing
+                    </button>
+                </li>
+            </ul>
+            <div class="projects mt-12 grid grid-cols-1 gap-[15px] sm:grid-cols-2 lg:grid-cols-3" data-aos="flip-left" data-aos-duration="1000">
+                <div
+                    class="project relative rounded-xl bg-white py-9 text-center dark:bg-white/10"
+                    [ngClass]="activeTab === 'all-jobs' || activeTab === 'technology' || activeTab === 'sales' || activeTab === 'marketing' ? 'block' : 'hidden'"
+                >
+                    <img src="/assets/images/job/dribbble.svg" class="mx-auto" alt="" />
+                    <h5 class="mt-[14px] text-base font-medium text-black dark:text-white">Dribbble</h5>
+                    <h3 class="mt-5 text-xl font-bold text-secondary">Customer Support Agent</h3>
+                    <p class="mt-[14px] text-base font-semibold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet.</p>
+                    <button type="button" class="btn mt-5 rounded-md bg-gray text-white">Apply For Job</button>
+                    <p class="absolute top-3 right-3 inline-block bg-secondary px-2.5 text-sm font-semibold text-white">Full Time</p>
+                </div>
+
+                <div
+                    class="project relative rounded-xl bg-white py-9 text-center dark:bg-white/10"
+                    [ngClass]="activeTab === 'all-jobs' || activeTab === 'technology' ? 'block' : 'hidden'"
+                >
+                    <img src="/assets/images/job/dell.svg" class="mx-auto" alt="" />
+                    <h5 class="mt-[14px] text-base font-medium text-black dark:text-white">Dell</h5>
+                    <h3 class="mt-5 text-xl font-bold text-secondary">Software Engineer</h3>
+                    <p class="mt-[14px] text-base font-semibold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet.</p>
+                    <button type="button" class="btn mt-5 rounded-md bg-gray text-white">Apply For Job</button>
+                    <p class="absolute top-3 right-3 inline-block bg-secondary px-2.5 text-sm font-semibold text-white">Full Time</p>
+                </div>
+                <div
+                    class="project relative rounded-xl bg-white py-9 text-center dark:bg-white/10"
+                    [ngClass]="activeTab === 'all-jobs' || activeTab === 'technology' || activeTab === 'transportation' || activeTab === 'marketing' ? 'block' : 'hidden'"
+                >
+                    <img src="/assets/images/job/apple.svg" class="mx-auto" alt="" />
+                    <h5 class="mt-[14px] text-base font-medium text-black dark:text-white">Apple</h5>
+                    <h3 class="mt-5 text-xl font-bold text-secondary">Senior Product Designer</h3>
+                    <p class="mt-[14px] text-base font-semibold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet.</p>
+                    <button type="button" class="btn mt-5 rounded-md bg-gray text-white">Apply For Job</button>
+                    <p class="absolute top-3 right-3 inline-block bg-primary px-2.5 text-sm font-semibold text-white">Part Time</p>
+                </div>
+            </div>
+            <div class="mt-12 text-center">
+                <a href="javascript:" class="btn rounded-md text-white">View more jobs</a>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-white py-14 dark:bg-gray-dark/50 lg:py-24">
+        <div class="container">
+            <div class="grid flex-col items-center gap-x-5 gap-y-10 lg:grid-cols-2 lg:flex-row">
+                <div class="space-y-6">
+                    <h3 class="text-3xl font-black uppercase text-black dark:text-white md:text-[40px] md:leading-[50px]">
+                        Make the most of <span class="text-primary">growth opportunities</span>
+                    </h3>
+                    <p class="text-lg font-medium">
+                        Our have to be burning with an idea, or a problem, or a wrong that you want to right. If you're not passionate enough from the start,
+                        you'll never stick it out.
+                    </p>
+                    <ul class="space-y-5 text-lg font-medium">
+                        <li class="flex items-center gap-3">
+                            <img src="/assets/images/job/right-arrow.svg" alt="" class="rtl:rotate-y-180" />
+                            <span>Donec bibendum nulla vehicula.</span>
+                        </li>
+                        <li class="flex items-center gap-3">
+                            <img src="/assets/images/job/right-arrow.svg" alt="" class="rtl:rotate-y-180" />
+                            <span>Proin congue nisl, quis pellentesque.</span>
+                        </li>
+                        <li class="flex items-center gap-3">
+                            <img src="/assets/images/job/right-arrow.svg" alt="" class="rtl:rotate-y-180" />
+                            <span>Ut accumsan dignissim gravida</span>
+                        </li>
+                        <li class="flex items-center gap-3">
+                            <img src="/assets/images/job/right-arrow.svg" alt="" class="rtl:rotate-y-180" />
+                            <span>Mauris faucibus a augue.</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="mx-auto grid items-center gap-4 sm:grid-cols-2">
+                    <div class="space-y-4">
+                        <div class="group h-[225px] overflow-hidden rounded-xl">
+                            <img src="/assets/images/job/growth1.jpg" class="h-full w-full object-cover transition group-hover:scale-110" alt="" />
+                        </div>
+                        <div class="group h-[225px] overflow-hidden rounded-xl">
+                            <img src="/assets/images/job/growth2.jpg" class="h-full w-full object-cover transition group-hover:scale-110" alt="" />
+                        </div>
+                    </div>
+                    <div class="group h-[345px] overflow-hidden rounded-xl">
+                        <img src="/assets/images/job/growth3.jpg" class="h-full w-full object-cover transition group-hover:scale-110" alt="" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-black py-14 dark:bg-gray-dark lg:py-24">
+        <div class="container">
+            <div class="flex flex-col gap-5 lg:flex-row" data-aos="fade-up" data-aos-duration="1000">
+                <div class="relative rounded-xl bg-primary">
+                    <img src="/assets/images/job/card1.png" class="h-[300px] sm:h-auto" alt="" />
+                    <div class="absolute top-1/2 left-6 right-6 -translate-y-1/2 sm:left-14 sm:right-[74px]">
+                        <h5 class="text-2xl font-bold text-white sm:text-[40px] sm:leading-[50px]">Post a featured job</h5>
+                        <p class="mt-[14px] text-base font-semibold text-white">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt sit venenatis, vulputate tristique fringilla ut. Vitae pulvina.
+                        </p>
+                        <a href="javascript:" class="btn mt-4 rounded-md bg-secondary text-white">Post a featured job</a>
+                    </div>
+                </div>
+                <div class="relative rounded-xl bg-secondary">
+                    <img src="/assets/images/job/card2.png" class="h-[300px] sm:h-auto" alt="" />
+                    <div class="absolute top-1/2 left-6 right-6 -translate-y-1/2 sm:left-14 sm:right-[74px]">
+                        <h5 class="text-2xl font-bold text-white sm:text-[40px] sm:leading-[50px]">Post a free job</h5>
+                        <p class="mt-[14px] text-base font-semibold text-white">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt sit venenatis, vulputate tristique fringilla ut. Vitae pulvina.
+                        </p>
+                        <a href="javascript:" class="btn mt-4 rounded-md bg-primary text-white">Post a free job</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="py-14 lg:py-24">
+        <div class="container">
+            <div class="flex flex-col items-center justify-between gap-y-5 sm:flex-row">
+                <div class="heading mb-0 space-y-5 text-center sm:text-left">
+                    <h4>FROM <span class="text-secondary">BLOG</span></h4>
+                    <h6 class="mb-0 !font-medium !text-gray">Check out our latest blog posts</h6>
+                </div>
+                <a href="javascript:" class="btn rounded-md bg-secondary text-white hover:bg-primary">View All Post</a>
+            </div>
+            <div class="mt-12 grid gap-5 md:grid-cols-2">
+                <div class="relative overflow-hidden rounded-[10px] md:h-[545px]">
+                    <img src="/assets/images/job/blog1.jpg" alt="" class="h-full w-full object-cover" />
+                    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-[#000]"></div>
+                    <div class="absolute bottom-12 px-4 text-center text-white">
+                        <p class="text-[12px] font-semibold">April 30, 2020 / Announcement</p>
+                        <h3 class="mt-[14px] text-2xl font-black sm:text-[32px] sm:leading-10">Why your client needs a responsive website</h3>
+                        <a href="javascript:" class="btn mt-[14px] rounded-md text-white">Reade more</a>
+                    </div>
+                </div>
+                <div class="relative overflow-hidden rounded-[10px] md:h-[545px]">
+                    <img src="/assets/images/job/blog2.jpg" alt="" class="h-full w-full object-cover" />
+                    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-[#000]"></div>
+                    <div class="absolute bottom-12 px-4 text-center text-white">
+                        <p class="text-[12px] font-semibold">April 30, 2020 / Announcement</p>
+                        <h3 class="mt-[14px] text-2xl font-black sm:text-[32px] sm:leading-10">Why your client needs a responsive website</h3>
+                        <a href="javascript:" class="btn mt-[14px] rounded-md text-white">Reade more</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="py-12 dark:bg-gray-dark lg:py-24">
+        <div class="container">
+            <div class="relative z-10 lg:flex">
+                <div class="heading text-center lg:mb-0 lg:w-1/3 ltr:lg:pr-10 ltr:lg:text-left rtl:lg:pl-10 rtl:lg:text-right">
+                    <h6>Get In Touch.</h6>
+                    <h4 class="sm:!leading-[50px]">Ready to Get Started?</h4>
+                    <div class="mx-auto mt-5 overflow-hidden">
+                        <img
+                            src="/assets/images/form-light-img.svg"
+                            alt="form-img"
+                            class="mx-auto block dark:hidden"
+                            data-aos="fade-right"
+                            data-aos-duration="1000"
+                        />
+                        <img
+                            src="/assets/images/form-dark-img.svg"
+                            alt="form-img"
+                            class="mx-auto hidden dark:block"
+                            data-aos="fade-right"
+                            data-aos-duration="1000"
+                        />
+                    </div>
+                </div>
+                <form action="" class="rounded-3xl bg-white px-4 py-12 dark:bg-[#101626] lg:w-2/3 lg:px-8">
+                    <div class="grid gap-10 sm:grid-cols-2">
+                        <div class="relative">
+                            <input
+                                type="text"
+                                name="name"
+                                class="w-full rounded-2xl border-2 border-gray/20 bg-transparent p-4 font-bold outline-none transition focus:border-secondary ltr:pr-12 rtl:pl-12"
+                            />
+                            <label for="" class="absolute -top-3 bg-white px-2 font-bold ltr:left-6 rtl:right-6 dark:bg-[#101626] dark:text-white"
+                                >Full Name</label
+                            >
+                            <svg
+                                width="20"
+                                height="22"
+                                viewBox="0 0 20 22"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 dark:text-white"
+                            >
+                                <path
+                                    d="M5.42855 5.57875C5.42855 8.10348 7.47525 10.1502 9.99998 10.1502C12.5247 10.1502 14.5714 8.10348 14.5714 5.57875C14.5714 3.05402 12.5247 1.00732 9.99998 1.00732"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M2 16.9328C2 15.9495 2.61812 15.0724 3.5441 14.7417V14.7417C7.71891 13.2507 12.2811 13.2507 16.4559 14.7417V14.7417C17.3819 15.0724 18 15.9495 18 16.9328V18.7014C18 19.9185 16.922 20.8535 15.7172 20.6813L13.8184 20.4101C11.2856 20.0483 8.71435 20.0483 6.18162 20.4101L4.28284 20.6813C3.07798 20.8535 2 19.9185 2 18.7014V16.9328Z"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                />
+                            </svg>
+                        </div>
+                        <div class="relative">
+                            <input
+                                type="email"
+                                name="email"
+                                class="w-full rounded-2xl border-2 border-gray/20 bg-transparent p-4 font-bold outline-none transition focus:border-secondary ltr:pr-12 rtl:pl-12"
+                            />
+                            <label for="" class="absolute -top-3 bg-white px-2 font-bold ltr:left-6 rtl:right-6 dark:bg-[#101626] dark:text-white"
+                                >Email Address</label
+                            >
+                            <svg
+                                width="22"
+                                height="21"
+                                viewBox="0 0 22 21"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 dark:text-white"
+                            >
+                                <path
+                                    d="M1 8.00732V7.00732C1 4.2459 3.23858 2.00732 6 2.00732H16C18.7614 2.00732 21 4.2459 21 7.00732V13.0073C21 15.7687 18.7614 18.0073 16 18.0073H6C3.23858 18.0073 1 15.7687 1 13.0073V12.0073"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M5 7.00732L9.8 10.6073C10.5111 11.1407 11.4889 11.1407 12.2 10.6073L17 7.00732"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </svg>
+                        </div>
+                        <div class="relative">
+                            <input
+                                type="text"
+                                name="mobile"
+                                class="w-full rounded-2xl border-2 border-gray/20 bg-transparent p-4 font-bold outline-none transition focus:border-secondary ltr:pr-12 rtl:pl-12"
+                            />
+                            <label for="" class="absolute -top-3 bg-white px-2 font-bold ltr:left-6 rtl:right-6 dark:bg-[#101626] dark:text-white"
+                                >Mobile Number</label
+                            >
+                            <svg
+                                width="22"
+                                height="22"
+                                viewBox="0 0 22 22"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 dark:text-white"
+                            >
+                                <path
+                                    d="M6.45241 1.40806C5.45292 0.783702 4.14202 0.887138 3.2983 1.73086L1.86856 3.1606C-0.302899 5.33207 1.73747 10.8931 6.42586 15.5815C11.1142 20.2699 16.6753 22.3102 18.8467 20.1388L20.2765 18.709C21.2635 17.722 21.2374 16.0956 20.2182 15.0764L18.0036 12.8619C16.9844 11.8426 15.358 11.8165 14.371 12.8036L14.0639 13.1107C13.531 13.6436 12.6713 13.6957 12.0713 13.2005C11.4925 12.7229 10.9159 12.208 10.3576 11.6497C9.79933 11.0914 9.28441 10.5149 8.80678 9.93607C8.31161 9.33601 8.36374 8.47631 8.89666 7.9434L9.20375 7.63631C9.98187 6.85819 10.1303 5.68271 9.65898 4.72062"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                />
+                            </svg>
+                        </div>
+                        <div class="relative">
+                            <input
+                                type="text"
+                                name="city"
+                                class="w-full rounded-2xl border-2 border-gray/20 bg-transparent p-4 font-bold outline-none transition focus:border-secondary ltr:pr-12 rtl:pl-12"
+                            />
+                            <label for="" class="absolute -top-3 bg-white px-2 font-bold ltr:left-6 rtl:right-6 dark:bg-[#101626] dark:text-white">City</label>
+                            <svg
+                                width="20"
+                                height="22"
+                                viewBox="0 0 20 22"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 dark:text-white"
+                            >
+                                <path
+                                    d="M5.89416 2.31259C7.20149 1.48625 8.75475 1.00732 10.4211 1.00732C15.0719 1.00732 18.8421 4.73828 18.8421 9.34066C18.8421 15.0541 12.1053 21.0073 10.4211 21.0073C8.73684 21.0073 2 15.0541 2 9.34066C2 7.87581 2.38193 6.49924 3.05263 5.30315"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                />
+                                <path
+                                    d="M13.4571 9.77392C13.5365 9.49702 13.579 9.20456 13.579 8.90216C13.579 7.15811 12.1651 5.74427 10.4211 5.74427C8.67702 5.74427 7.26318 7.15811 7.26318 8.90216C7.26318 10.6462 8.67702 12.0601 10.4211 12.0601C10.6633 12.0601 10.8991 12.0328 11.1256 11.9812"
+                                    stroke="currentColor"
+                                    stroke-width="1.8"
+                                    stroke-linecap="round"
+                                />
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="relative mt-10">
+                        <input
+                            type="text"
+                            name="message"
+                            class="w-full rounded-2xl border-2 border-gray/20 bg-transparent p-4 font-bold outline-none transition focus:border-secondary ltr:pr-12 rtl:pl-12"
+                        />
+                        <label for="" class="absolute -top-3 bg-white px-2 font-bold ltr:left-6 rtl:right-6 dark:bg-[#101626] dark:text-white">Message</label>
+                        <svg
+                            width="22"
+                            height="22"
+                            viewBox="0 0 22 22"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 dark:text-white"
+                        >
+                            <path
+                                d="M1 11.467V18.9267C1 19.7652 1.96993 20.2314 2.6247 19.7076L5.45217 17.4456C5.8068 17.1619 6.24742 17.0073 6.70156 17.0073H16C18.7614 17.0073 21 14.7687 21 12.0073V6.00732C21 3.2459 18.7614 1.00732 16 1.00732H6C3.23858 1.00732 1 3.2459 1 6.00732V7.62225"
+                                stroke="currentColor"
+                                stroke-width="1.8"
+                                stroke-linecap="round"
+                            />
+                            <circle cx="6.05005" cy="9.05713" r="1.25" fill="currentColor" />
+                            <circle cx="11.05" cy="9.05713" r="1.25" fill="currentColor" />
+                            <circle cx="16.05" cy="9.05713" r="1.25" fill="currentColor" />
+                        </svg>
+                    </div>
+                    <div class="mt-10 text-center ltr:lg:text-right rtl:lg:text-left">
+                        <button type="button" class="btn bg-gray px-12 capitalize text-white dark:bg-white dark:text-black dark:hover:bg-secondary">
+                            Send Message
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </section>
+</div>

src/app/job-placement.ts

@@ -0,0 +1,53 @@
+import { Component, Input } from '@angular/core';
+import SwiperCore, { SwiperOptions, Autoplay } from 'swiper';
+import { Store } from '@ngrx/store';
+
+// install Swiper modules
+SwiperCore.use([Autoplay]);
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './job-placement.html',
+})
+export class JobPlacementComponent {
+    storeData: any;
+
+    activeTab = 'all-jobs';
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+
+    config: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        speed: 2500,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        breakpoints: {
+            320: {
+                slidesPerView: 2,
+            },
+            600: {
+                slidesPerView: 3,
+            },
+            1000: {
+                slidesPerView: 4,
+            },
+            1600: {
+                slidesPerView: 6,
+            },
+        },
+        modules: [Autoplay],
+    };
+
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/layout/footer.html

@@ -0,0 +1,153 @@
+<div class="container">
+    <div class="grid gap-y-10 gap-x-4 py-14 sm:grid-cols-3 lg:grid-cols-5 lg:py-[100px]">
+        <div class="relative">
+            <!-- <img src="/assets/images/logo.png" alt="plurk" class="h-7" /> -->
+            <!-- <ul class="mt-12 flex items-center gap-8">
+                <li>
+                    <a href="javascript:">
+                        <svg
+                            width="10"
+                            height="20"
+                            viewBox="0 0 10 20"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="transition hover:scale-110 hover:text-secondary"
+                        >
+                            <path
+                                d="M8.0733 3.29509H9.88498V0.139742C9.57242 0.0967442 8.49748 0 7.2456 0C4.6335 0 2.84415 1.643 2.84415 4.66274V7.44186H-0.0383301V10.9693H2.84415V19.845H6.37821V10.9701H9.1441L9.58317 7.44269H6.37738V5.01251C6.37821 3.99297 6.65273 3.29509 8.0733 3.29509Z"
+                                fill="currentColor"
+                            />
+                        </svg>
+                    </a>
+                </li>
+                <li>
+                    <a href="javascript:">
+                        <svg
+                            width="23"
+                            height="18"
+                            viewBox="0 0 23 18"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="transition hover:scale-110 hover:text-secondary"
+                        >
+                            <path
+                                d="M22.8849 2.11613C22.0668 2.475 21.1951 2.71288 20.2862 2.82838C21.2212 2.27013 21.9348 1.39287 22.2703 0.3355C21.3986 0.85525 20.4361 1.22238 19.4103 1.42725C18.5826 0.545875 17.4028 0 16.1158 0C13.6188 0 11.6086 2.02675 11.6086 4.51137C11.6086 4.86888 11.6388 5.21263 11.7131 5.53988C7.96345 5.357 4.64557 3.55988 2.4167 0.82225C2.02757 1.49738 1.79932 2.27012 1.79932 3.102C1.79932 4.664 2.6037 6.04862 3.8027 6.85025C3.07807 6.8365 2.3672 6.62613 1.76495 6.29475C1.76495 6.3085 1.76495 6.32638 1.76495 6.34425C1.76495 8.536 3.32832 10.3565 5.37845 10.7759C5.01132 10.8763 4.6112 10.9244 4.19595 10.9244C3.9072 10.9244 3.6157 10.9079 3.34207 10.8474C3.92645 12.6335 5.5847 13.9466 7.55645 13.9893C6.02195 15.1896 4.07357 15.9129 1.96432 15.9129C1.59445 15.9129 1.2397 15.8964 0.884949 15.851C2.88282 17.1394 5.25057 17.875 7.80395 17.875C16.1034 17.875 20.6409 11 20.6409 5.04075C20.6409 4.84137 20.6341 4.64887 20.6244 4.45775C21.5196 3.8225 22.2717 3.02913 22.8849 2.11613Z"
+                                fill="currentColor"
+                            />
+                        </svg>
+                    </a>
+                </li>
+                <li>
+                    <a href="javascript:">
+                        <svg
+                            width="23"
+                            height="22"
+                            viewBox="0 0 23 22"
+                            fill="currentColor"
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="transition hover:scale-110 hover:text-secondary"
+                        >
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M7.75995 0H16.0099C19.8063 0 22.8849 3.07862 22.8849 6.875V15.125C22.8849 18.9214 19.8063 22 16.0099 22H7.75995C3.96357 22 0.884949 18.9214 0.884949 15.125V6.875C0.884949 3.07862 3.96357 0 7.75995 0ZM16.0099 19.9375C18.6637 19.9375 20.8224 17.7787 20.8224 15.125V6.875C20.8224 4.22125 18.6637 2.0625 16.0099 2.0625H7.75995C5.1062 2.0625 2.94745 4.22125 2.94745 6.875V15.125C2.94745 17.7787 5.1062 19.9375 7.75995 19.9375H16.0099Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M6.38495 11C6.38495 7.96263 8.84757 5.5 11.8849 5.5C14.9223 5.5 17.3849 7.96263 17.3849 11C17.3849 14.0374 14.9223 16.5 11.8849 16.5C8.84757 16.5 6.38495 14.0374 6.38495 11ZM8.44745 11C8.44745 12.8948 9.9902 14.4375 11.8849 14.4375C13.7797 14.4375 15.3224 12.8948 15.3224 11C15.3224 9.10388 13.7797 7.5625 11.8849 7.5625C9.9902 7.5625 8.44745 9.10388 8.44745 11Z"
+                                fill="currentColor"
+                            />
+                            <circle cx="17.7975" cy="5.08737" r="0.732875" fill="currentColor" />
+                        </svg>
+                    </a>
+                </li>
+            </ul> -->
+            <img src="/assets/images/footer-shape.png" alt="footer-shape" class="absolute bottom-0 right-0 sm:left-0" />
+            <img src="/assets/images/footer-shape-dark.png" alt="footer-shape-dark" class="absolute bottom-0 right-0 hidden dark:block sm:left-0" />
+        </div>
+        <div>
+            <ul class="flex flex-col gap-3 font-bold">
+                <li class="mb-3 text-lg font-extrabold text-black dark:text-white">Quick Menu</li>
+                <li>
+                    <a routerLink="/" class="inline-block transition hover:scale-110 hover:text-secondary">Home</a>
+                </li>
+                <!-- <li>
+                    <a routerLink="/portfolio" class="inline-block transition hover:scale-110 hover:text-secondary">Portfolio</a>
+                </li> -->
+                <!-- <li>
+                    <a routerLink="/services" class="inline-block transition hover:scale-110 hover:text-secondary">Service</a>
+                </li> -->
+                <li>
+                    <a routerLink="/staff" class="inline-block transition hover:scale-110 hover:text-secondary">Staff</a>
+                </li>
+                <li>
+                    <a routerLink="/aboutUs" class="inline-block transition hover:scale-110 hover:text-secondary">About Us</a>
+                </li>
+                <!-- <li>
+                    <a routerLink="/career" class="inline-block transition hover:scale-110 hover:text-secondary">Career</a>
+                </li> -->
+            </ul>
+        </div>
+        <div>
+            <ul class="flex flex-col gap-3 font-bold">
+                <li class="mb-3 text-lg font-extrabold text-black dark:text-white">Services</li>
+                <li>
+                    <a routerLink="/contactUs" class="inline-block transition hover:scale-110 hover:text-secondary">Contact Us</a>
+                </li>
+                <!-- <li>
+                    <a routerLink="/services-detail" class="inline-block transition hover:scale-110 hover:text-secondary">Web Development</a>
+                </li>
+                <li>
+                    <a routerLink="/services-detail" class="inline-block transition hover:scale-110 hover:text-secondary">Digital Marketing</a>
+                </li>
+                <li>
+                    <a routerLink="/services-detail" class="inline-block transition hover:scale-110 hover:text-secondary">App Development</a>
+                </li> -->
+            </ul>
+        </div>
+        <div>
+            <ul class="flex flex-col gap-3 font-bold">
+                <li class="mb-3 text-lg font-extrabold text-black dark:text-white">Legal</li>
+                <li>
+                    <a routerLink="/" class="inline-block transition hover:scale-110 hover:text-secondary">Terms & Conditions</a>
+                </li>
+                <li>
+                    <a routerLink="/" class="inline-block transition hover:scale-110 hover:text-secondary">Privacy Policy</a>
+                </li>
+                <li>
+                    <a routerLink="/" class="inline-block transition hover:scale-110 hover:text-secondary">FAQs</a>
+                </li>
+                <li>
+                    <a routerLink="/blogs" class="inline-block transition hover:scale-110 hover:text-secondary">Blog</a>
+                </li>
+            </ul>
+        </div>
+        <div>
+            <ul class="flex flex-col gap-3 font-bold">
+                <li class="mb-3 text-lg font-extrabold text-black dark:text-white">Information</li>
+                <li>Christian Medical College, IDA Scudder Rd, Vellore, Tamil Nadu 632004
+                </li>
+                <li>
+                    <a href="tel:04172  224627" class="inline-block transition hover:scale-110 hover:text-secondary">04172 – 224627 / 224626
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+<div class="bg-gradient-to-r from-[#FCF1F4] to-[#EDFBF9] py-5 dark:border-t-2 dark:border-white/5 dark:bg-none">
+    <div class="container">
+        <div class="flex flex-col items-center justify-between text-center font-bold dark:text-white md:flex-row">
+            <div>
+                Copyright© {{ currYear }}
+                <a href="https://rootxwire.com" class="text-primary transition hover:text-secondary">rootxwire Technologies Pvt. Ltd.</a>
+            </div>
+            <div>
+                Need help? Visit the
+                <a routerLink="/contactUs" class="text-secondary transition hover:text-primary">Contact Us</a>
+            </div>
+        </div>
+    </div>
+</div>

src/app/layout/footer.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'footer',
+    templateUrl: './footer.html',
+})
+export class FooterComponent {
+    currYear: number = new Date().getFullYear();
+    constructor() {}
+    ngOnInit() {}
+}

src/app/layout/header.html

@@ -0,0 +1,287 @@
+<div class="container">
+    <div class="flex items-center justify-between py-5 lg:py-0">
+        <a routerLink="/"><img src="/assets/images/logo.png" alt="logo" class="h-10" /></a>
+        <div class="flex items-center">
+            <div (click)="toggleMenu()" class="overlay fixed inset-0 z-[51] bg-black/60 lg:hidden" [ngClass]="{ hidden: !showMenu }"></div>
+            <div class="menus" [ngClass]="{'overflow-y-auto ltr:!right-0 rtl:!left-0': showMenu }">
+                <div class="border-b border-gray/10 ltr:text-right rtl:text-left lg:hidden">
+                    <button (click)="toggleMenu()" type="button" class="p-4">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="1.5"
+                            stroke="currentColor"
+                            class="h-6 w-6 text-black dark:text-white"
+                        >
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+                <ul (click)="showMenu = false">
+                    <li>
+                        <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"> Home </a>
+                    </li>
+                    <!-- <li class="group relative" (click)="$event.stopPropagation()">
+                        <a
+                            href="javascript:;"
+                            [ngClass]="{ active: router.url === '/crypto'
+                            || router.url === '/modern-saas'
+                            || router.url === '/real-estate'
+                            || router.url === '/healthcare'
+                            || router.url === '/marketing'
+                            || router.url === '/application'
+                            || router.url === '/hotel-resort'
+                            || router.url === '/nft'
+                            || router.url === '/online-courses'
+                            || router.url === '/restaurant'
+                            || router.url === '/consulting'
+                            || router.url === '/creative-agency'
+                            || router.url === '/insurance'
+                            || router.url === '/photography'
+                            || router.url === '/construction'
+                            || router.url === '/blog-landing'
+                            || router.url === '/event-concert'
+                            || router.url === '/gym'
+                            || router.url === '/job-placement'
+                            || router.url === '/online-payments'
+                            || router.url === '/personal-portfolio'
+                            || router.url === '/portfolio-landing'
+                        }"
+                        >
+                            Landing
+                            <div class="transition duration-500 group-hover:rotate-180 ltr:ml-2 rtl:mr-2">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M19 9L12 15L10.25 13.5M5 9L7.33333 11"
+                                        stroke="currentColor"
+                                        stroke-width="1.5"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </div>
+                        </a>
+                        <div class="submenu" (click)="showMenu = false">
+                            <a routerLink="/crypto" routerLinkActive="active">Crypto Currency</a>
+                            <a routerLink="/modern-saas" routerLinkActive="active"> Modern Saas </a>
+                            <a routerLink="/real-estate" routerLinkActive="active"> Real Estate </a>
+                            <a routerLink="/healthcare" routerLinkActive="active"> Health Care </a>
+                            <a routerLink="/marketing" routerLinkActive="active"> Sales Marketing </a>
+                            <a routerLink="/application" routerLinkActive="active"> Application </a>
+                            <a routerLink="/hotel-resort" routerLinkActive="active"> Hotel & Resort </a>
+                            <a routerLink="/nft" routerLinkActive="active"> NFT Marketplace </a>
+                            <a routerLink="/online-courses" routerLinkActive="active"> Online Courses </a>
+                            <a routerLink="/restaurant" routerLinkActive="active"> Restaurant </a>
+                            <a routerLink="/consulting" routerLinkActive="active"> Consulting </a>
+                            <a routerLink="/creative-agency" routerLinkActive="active"> Creative Agency </a>
+                            <a routerLink="/insurance" routerLinkActive="active"> Insurance </a>
+                            <a routerLink="/photography" routerLinkActive="active"> Photography </a>
+                            <a routerLink="/construction" routerLinkActive="active"> Construction </a>
+                            <a routerLink="/blog-landing" routerLinkActive="active"> Blog </a>
+                            <a routerLink="/event-concert" routerLinkActive="active">
+                                Event Concert
+                                <span
+                                    class="ml-1 whitespace-nowrap rounded bg-gradient-to-r from-[#ef4444] to-[#f97316] px-1.5 py-0.5 text-[10px] font-bold uppercase text-white"
+                                >
+                                    New
+                                </span>
+                            </a>
+                            <a routerLink="/gym" routerLinkActive="active">
+                                GYM
+                                <span
+                                    class="ml-1 whitespace-nowrap rounded bg-gradient-to-r from-[#ef4444] to-[#f97316] px-1.5 py-0.5 text-[10px] font-bold uppercase text-white"
+                                >
+                                    New
+                                </span>
+                            </a>
+                            <a routerLink="/job-placement" routerLinkActive="active">
+                                Job Placement
+                                <span
+                                    class="ml-1 whitespace-nowrap rounded bg-gradient-to-r from-[#ef4444] to-[#f97316] px-1.5 py-0.5 text-[10px] font-bold uppercase text-white"
+                                >
+                                    New
+                                </span>
+                            </a>
+                            <a routerLink="/online-payments" routerLinkActive="active">
+                                Online Payments
+                                <span
+                                    class="ml-1 whitespace-nowrap rounded bg-gradient-to-r from-[#ef4444] to-[#f97316] px-1.5 py-0.5 text-[10px] font-bold uppercase text-white"
+                                >
+                                    New
+                                </span>
+                            </a>
+                            <a routerLink="/personal-portfolio" routerLinkActive="active">
+                                Personal Portfolio
+                                <span
+                                    class="ml-1 whitespace-nowrap rounded bg-gradient-to-r from-[#ef4444] to-[#f97316] px-1.5 py-0.5 text-[10px] font-bold uppercase text-white"
+                                >
+                                    New
+                                </span>
+                            </a>
+                            <a routerLink="/portfolio-landing" routerLinkActive="active">
+                                Portfolio
+                                <span
+                                    class="ml-1 whitespace-nowrap rounded bg-gradient-to-r from-[#ef4444] to-[#f97316] px-1.5 py-0.5 text-[10px] font-bold uppercase text-white"
+                                >
+                                    New
+                                </span>
+                            </a>
+                        </div>
+                    </li> -->
+                    <li>
+                        <a routerLink="/root-events" routerLinkActive="active" [ngClass]="{ active: router.url === '/portfolio-detail' }"> Events </a>
+                    </li>
+                    <!-- <li>
+                        <a routerLink="/portfolio" routerLinkActive="active" [ngClass]="{ active: router.url === '/portfolio-detail' }"> Portfolio </a>
+                    </li> -->
+                    <!-- <li>
+                        <a routerLink="/services" routerLinkActive="active" [ngClass]="{ active: router.url === '/services-detail' }"> Service </a>
+                    </li> -->
+                    <li>
+                        <a routerLink="/blogs" routerLinkActive="active" [ngClass]="{ active: router.url === '/services-detail' }"> Blogs </a>
+                    </li>
+                    <li>
+                        <a routerLink="/staff" routerLinkActive="active"> Staff </a>
+                    </li>
+                    <!-- <li>
+                        <a routerLink="/team" routerLinkActive="active"> Team </a>
+                    </li> -->
+                    <li>
+                        <a routerLink="/aboutUs" routerLinkActive="active"> About Us </a>
+                    </li>
+                    <!-- <li>
+                        <a routerLink="/about-us" routerLinkActive="active"> About Us </a>
+                    </li> -->
+                    <!-- <li>
+                        <a routerLink="/career" routerLinkActive="active"> Career </a>
+                    </li> -->
+                    <li>
+                        <a routerLink="/contactUs" routerLinkActive="active"> Contact Us </a>
+                    </li>
+                    <li
+                        class="relative hidden items-center before:absolute before:top-1/2 before:h-[30px] before:w-[2px] before:-translate-y-1/2 before:bg-gray/30 ltr:pl-9 ltr:before:-left-[2px] rtl:pr-9 rtl:before:-right-[2px] lg:inline-flex"
+                    >
+                        <button type="button" (click)="toggleSearch()" class="text-white hover:text-primary">
+                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M18.7363 17.4637L14.6512 13.3785C15.6799 12.0753 16.3 10.4347 16.3 8.65C16.3 4.4317 12.8683 1 8.65 1C4.4317 1 1 4.4317 1 8.65C1 12.8683 4.4317 16.3 8.65 16.3C10.4356 16.3 12.0754 15.6808 13.3786 14.6512L17.4637 18.7363C17.6392 18.9118 17.8696 19 18.1 19C18.3304 19 18.5608 18.9118 18.7363 18.7363C19.0882 18.3844 19.0882 17.8156 18.7363 17.4637ZM2.8 8.65C2.8 5.4244 5.4244 2.8 8.65 2.8C11.8756 2.8 14.5 5.4244 14.5 8.65C14.5 11.8756 11.8756 14.5 8.65 14.5C5.4244 14.5 2.8 11.8756 2.8 8.65Z"
+                                    fill="currentColor"
+                                />
+                            </svg>
+                        </button>
+                    </li>
+                    <li
+                        class="search-bar absolute hidden w-0 overflow-hidden bg-black transition-all duration-500 ltr:right-0 rtl:left-0 lg:block"
+                        [ngClass]="{'!w-full': showSearch }"
+                    >
+                        <form action="" class="relative">
+                            <input
+                                type="text"
+                                placeholder="Search"
+                                class="w-full border-b border-white bg-transparent py-1 outline-none ltr:pl-2 ltr:pr-8 rtl:pr-2 rtl:pl-8"
+                            />
+                            <button type="button" class="absolute top-1/2 -translate-y-1/2 hover:text-primary ltr:right-0 rtl:left-0" (click)="toggleSearch()">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    stroke-width="1.5"
+                                    stroke="currentColor"
+                                    class="h-6 w-6"
+                                >
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        </form>
+                    </li>
+                </ul>
+            </div>
+            <ul class="flex items-center gap-5 ltr:pr-5 rtl:pl-5 ltr:lg:pl-5 ltr:lg:pr-0 rtl:lg:pr-5 rtl:lg:pl-0">
+                <!-- <li>
+                    <button
+                        type="button"
+                        class="flex h-5 w-5 items-center text-white hover:text-primary rtl:text-primary"
+                        (click)="store.dispatch({ type: 'toggleDirection', payload: storeData?.direction === 'rtl' ? 'ltr' : 'rtl' })"
+                    >
+                        <svg width="17" height="22" viewBox="0 0 17 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M16 18.9439H7.72074" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
+                            <path
+                                d="M13.8571 21L16 18.9439L13.8571 16.8879"
+                                stroke="currentColor"
+                                stroke-width="1.4"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path d="M1 16.4206H9.27926" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
+                            <path
+                                d="M3.14287 18.4766L1 16.4206L3.14287 14.3645"
+                                stroke="currentColor"
+                                stroke-width="1.4"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path
+                                d="M12.7855 1H5.82118C4.82662 1 3.87279 1.37909 3.16952 2.05387C2.46626 2.72865 2.07117 3.64385 2.07117 4.59813C2.07117 5.55242 2.46626 6.46761 3.16952 7.14239C3.87279 7.81717 4.82662 8.19626 5.82118 8.19626H6.3569"
+                                stroke="currentColor"
+                                stroke-width="1.4"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                            <path d="M10.6426 12.3084V1" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M6.3573 12.3084V1" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                    </button>
+                </li> -->
+                <li>
+                    <button
+                        type="button"
+                        class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-dark text-white hover:text-primary"
+                        (click)="store.dispatch({ type: 'toggleTheme', payload: storeData?.theme === 'dark' ? 'light' : 'dark' })"
+                    >
+                        <svg
+                            width="20"
+                            height="20"
+                            viewBox="0 0 20 20"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            [ngClass]="{ hidden: storeData?.theme === 'dark' }"
+                        >
+                            <path
+                                d="M8 4C8 8.4 11.6 12 16 12C17.4 12 18.8 11.6 20 11C19.5 16.1 15.2 20 10 20C4.5 20 0 15.5 0 10C0 4.8 4 0.5 9 0C8.4 1.2 8 2.6 8 4ZM2 10C2 14.4 5.6 18 10 18C12.9 18 15.5 16.5 17 14C16.7 14 16.4 14 16 14C10.5 14 6 9.5 6 4C6 3.7 6 3.4 6 3C3.6 4.4 2 7.1 2 10Z"
+                                fill="currentColor"
+                            />
+                        </svg>
+                        <svg
+                            width="20"
+                            height="20"
+                            viewBox="0 0 20 20"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            [ngClass]="{ hidden: storeData?.theme === 'light' }"
+                        >
+                            <path
+                                d="M10 15C8.67392 15 7.40215 14.4732 6.46447 13.5355C5.52678 12.5979 5 11.3261 5 10C5 8.67392 5.52678 7.40215 6.46447 6.46447C7.40215 5.52678 8.67392 5 10 5C11.3261 5 12.5979 5.52678 13.5355 6.46447C14.4732 7.40215 15 8.67392 15 10C15 11.3261 14.4732 12.5979 13.5355 13.5355C12.5979 14.4732 11.3261 15 10 15ZM10 13.3333C10.8841 13.3333 11.7319 12.9821 12.357 12.357C12.9821 11.7319 13.3333 10.8841 13.3333 10C13.3333 9.11595 12.9821 8.2681 12.357 7.64298C11.7319 7.01786 10.8841 6.66667 10 6.66667C9.11595 6.66667 8.2681 7.01786 7.64298 7.64298C7.01786 8.2681 6.66667 9.11595 6.66667 10C6.66667 10.8841 7.01786 11.7319 7.64298 12.357C8.2681 12.9821 9.11595 13.3333 10 13.3333Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M9.09091 0.909092C9.09091 0.407014 9.49792 0 10 0C10.5021 0 10.9091 0.407014 10.9091 0.909092V1.81818C10.9091 2.32026 10.5021 2.72727 10 2.72727C9.49792 2.72727 9.09091 2.32026 9.09091 1.81818V0.909092ZM9.09091 18.1818C9.09091 17.6797 9.49792 17.2727 10 17.2727C10.5021 17.2727 10.9091 17.6797 10.9091 18.1818V19.0909C10.9091 19.593 10.5021 20 10 20C9.49792 20 9.09091 19.593 9.09091 19.0909V18.1818ZM2.92909 4.21455C2.57412 3.85958 2.57412 3.28406 2.92909 2.92909C3.28406 2.57412 3.85958 2.57412 4.21455 2.92909L4.85727 3.57182C5.21224 3.92679 5.21224 4.5023 4.85727 4.85727C4.5023 5.21224 3.92679 5.21224 3.57182 4.85727L2.92909 4.21455ZM15.1427 16.4282C14.7878 16.0732 14.7878 15.4977 15.1427 15.1427C15.4977 14.7878 16.0732 14.7878 16.4282 15.1427L17.0709 15.7855C17.4259 16.1404 17.4259 16.7159 17.0709 17.0709C16.7159 17.4259 16.1404 17.4259 15.7855 17.0709L15.1427 16.4282ZM15.7851 2.92886C16.1402 2.57358 16.7161 2.57361 17.0712 2.92894C17.4261 3.28403 17.4259 3.85951 17.071 4.21447L16.4283 4.8572C16.0732 5.21221 15.4977 5.21221 15.1427 4.8572C14.7877 4.50225 14.7876 3.92678 15.1425 3.57174L15.7851 2.92886ZM3.57182 15.1427C3.92679 14.7878 4.5023 14.7878 4.85727 15.1427C5.21224 15.4977 5.21224 16.0732 4.85727 16.4282L4.21455 17.0709C3.85958 17.4259 3.28406 17.4259 2.92909 17.0709C2.57412 16.7159 2.57412 16.1404 2.92909 15.7855L3.57182 15.1427ZM19.0909 9.09091C19.593 9.09091 20 9.49792 20 10C20 10.5021 19.593 10.9091 19.0909 10.9091H18.1818C17.6797 10.9091 17.2727 10.5021 17.2727 10C17.2727 9.49792 17.6797 9.09091 18.1818 9.09091H19.0909ZM1.81818 9.09091C2.32026 9.09091 2.72727 9.49792 2.72727 10C2.72727 10.5021 2.32026 10.9091 1.81818 10.9091H0.909092C0.407014 10.9091 0 10.5021 0 10C0 9.49792 0.407014 9.09091 0.909092 9.09091H1.81818Z"
+                                fill="currentColor"
+                            />
+                        </svg>
+                    </button>
+                </li>
+            </ul>
+            <button type="button" class="flex h-10 w-10 items-center justify-center rounded-full bg-primary lg:hidden" (click)="toggleMenu()">
+                <svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-white">
+                    <path
+                        d="M2 15H11C11.552 15 12 15.447 12 16C12 16.553 11.552 17 11 17H2C1.448 17 1 16.553 1 16C1 15.447 1.448 15 2 15Z"
+                        fill="currentColor"
+                    />
+                    <path d="M2 8H20C20.552 8 21 8.447 21 9C21 9.553 20.552 10 20 10H2C1.448 10 1 9.553 1 9C1 8.447 1.448 8 2 8Z" fill="currentColor" />
+                    <path d="M21 2C21 1.447 20.552 1 20 1H7C6.448 1 6 1.447 6 2C6 2.553 6.448 3 7 3H20C20.552 3 21 2.553 21 2Z" fill="currentColor" />
+                </svg>
+            </button>
+        </div>
+    </div>
+</div>

src/app/layout/header.ts

@@ -0,0 +1,38 @@
+import { Component, Input } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Router } from '@angular/router';
+
+@Component({
+    moduleId: module.id,
+    selector: 'header',
+    templateUrl: './header.html',
+})
+export class HeaderComponent {
+    storeData: any;
+    showMenu = false;
+    showSearch = false;
+    constructor(public store: Store<any>, public router: Router) {
+        this.initStore();
+    }
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+
+    // Mobile menu js
+    toggleMenu() {
+        if (window.innerWidth < 1024) {
+            this.showMenu = !this.showMenu;
+        } else {
+            this.showMenu = false;
+        }
+    }
+
+    // Search Bar - Header
+    toggleSearch() {
+        this.showSearch = !this.showSearch;
+    }
+}

src/app/marketing.ts

@@ -0,0 +1,84 @@
+import { Component, Input } from '@angular/core';
+import { Store } from '@ngrx/store';
+import SwiperCore, { SwiperOptions, Navigation, Autoplay } from 'swiper';
+
+// install Swiper modules
+SwiperCore.use([Navigation, Autoplay]);
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './marketing.html',
+})
+export class MarketingComponent {
+    storeData: any;
+    activeTab = 'all';
+    @Input() feedbacks: any = [
+        {
+            id: 1,
+            name: 'Allan Branch',
+            role: 'CEO of Lifted',
+            thumbnail: '/assets/images/testimonial2.png',
+            message:
+                'An amazing services. We have a great business relationship with this agency, They help bring our vision to life in a way that makes sense. SEO work execute really well. great & phenomenal experience.',
+        },
+    ];
+    config1: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        speed: 2500,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        modules: [Autoplay],
+        breakpoints: {
+            320: {
+                slidesPerView: 2,
+            },
+            600: {
+                slidesPerView: 3,
+            },
+            1000: {
+                slidesPerView: 4,
+            },
+            1600: {
+                slidesPerView: 6,
+            },
+        },
+    };
+    config2: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        navigation: {
+            nextEl: '.swiper-button-next1',
+            prevEl: '.swiper-button-prev2',
+        },
+        modules: [Navigation],
+        breakpoints: {
+            320: {
+                slidesPerView: 1,
+            },
+            600: {
+                slidesPerView: 2,
+            },
+            1000: {
+                slidesPerView: 3,
+            },
+            1600: {
+                slidesPerView: 4,
+            },
+        },
+    };
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/model/Professor.ts

@@ -0,0 +1,17 @@
+
+import { WorkingStatus } from "../enum/WorkingStatus";
+
+export class Professor {
+    // id : number;
+    professorId: string; // UUID
+    firstName: string;
+    lastName: string;
+    email: string;
+    department: string;
+    position: string;
+    officeLocation: string;
+    status: WorkingStatus; // Assuming status is represented as a string in the DTO
+    joinDate: Date; // LocalDateTime as a string
+    profileImageUrl?: string; // Optional, URL to the profile image
+    // profileImage?: File; // Optional, used for uploading profile images
+  }

src/app/model/file-upload.status.spec.ts

@@ -0,0 +1,7 @@
+import {FileUploadStatus} from './file-upload.status';
+
+describe('FileUpload.Status', () => {
+  it('should create an instance', () => {
+    expect(new FileUploadStatus()).toBeTruthy();
+  });
+});

src/app/model/file-upload.status.ts

@@ -0,0 +1,6 @@
+export class FileUploadStatus {
+
+  public status: string = '';
+  public percentage: number = 0;
+
+}

src/app/model/user.spec.ts

@@ -0,0 +1,7 @@
+import {User} from './user';
+
+describe('User', () => {
+  it('should create an instance', () => {
+    expect(new User()).toBeTruthy();
+  });
+});

src/app/model/user.ts

@@ -0,0 +1,16 @@
+import {Role} from "../enum/role.enum";
+
+export class User {
+  userId: string;
+  firstName: string;
+  lastName: string;
+  username: string;
+  email: string;
+  profileImageUrl: string;
+  lastLoginDateDisplay: Date;
+  joinDate: Date;
+  role: Role; //ROLE_USER, ROLE_ADMIN
+  authorities: string[];
+  active: boolean;
+  notLocked: boolean;
+}

src/app/modern-saas.html

@@ -0,0 +1,552 @@
+<div class="overflow-x-hidden">
+    <section class="bg-black bg-[url(/assets/images/modern-saas/banner-bg.png)] bg-cover bg-top bg-no-repeat pt-[82px] lg:pt-[106px]">
+        <div class="container lg:pt-7">
+            <div class="relative">
+                <div class="pt-14 pb-8 text-center text-white lg:w-3/5 lg:py-20 ltr:lg:text-left rtl:lg:text-right">
+                    <div class="mb-10 inline-flex items-center gap-3 rounded-xl bg-white/5 px-4 py-3.5">
+                        <div class="inline-flex items-center gap-1">
+                            <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.31233 11.0019C6.57598 10.8428 6.90609 10.8428 7.16975 11.0019L9.88155 12.6387C10.5099 13.0179 11.285 12.4546 11.1182 11.7399L10.3985 8.65535C10.3285 8.35543 10.4304 8.04142 10.6632 7.83976L13.0602 5.76327C13.6149 5.28274 13.3184 4.37155 12.5871 4.30953L9.43297 4.04202C9.12635 4.01602 8.8593 3.82243 8.73921 3.53911L7.5049 0.626969C7.21901 -0.0475323 6.26307 -0.0475302 5.97718 0.626969L4.74286 3.53911C4.62277 3.82243 4.35573 4.01602 4.04911 4.04202L0.894962 4.30953C0.163677 4.37155 -0.13286 5.28273 0.421853 5.76327L2.81888 7.83976C3.05166 8.04142 3.15358 8.35543 3.0836 8.65535L2.36388 11.7399C2.19712 12.4546 2.97221 13.0179 3.60053 12.6387L6.31233 11.0019Z"
+                                    fill="#FDB52A"
+                                />
+                            </svg>
+                            <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.31233 11.0019C6.57598 10.8428 6.90609 10.8428 7.16975 11.0019L9.88155 12.6387C10.5099 13.0179 11.285 12.4546 11.1182 11.7399L10.3985 8.65535C10.3285 8.35543 10.4304 8.04142 10.6632 7.83976L13.0602 5.76327C13.6149 5.28274 13.3184 4.37155 12.5871 4.30953L9.43297 4.04202C9.12635 4.01602 8.8593 3.82243 8.73921 3.53911L7.5049 0.626969C7.21901 -0.0475323 6.26307 -0.0475302 5.97718 0.626969L4.74286 3.53911C4.62277 3.82243 4.35573 4.01602 4.04911 4.04202L0.894962 4.30953C0.163677 4.37155 -0.13286 5.28273 0.421853 5.76327L2.81888 7.83976C3.05166 8.04142 3.15358 8.35543 3.0836 8.65535L2.36388 11.7399C2.19712 12.4546 2.97221 13.0179 3.60053 12.6387L6.31233 11.0019Z"
+                                    fill="#FDB52A"
+                                />
+                            </svg>
+                            <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.31233 11.0019C6.57598 10.8428 6.90609 10.8428 7.16975 11.0019L9.88155 12.6387C10.5099 13.0179 11.285 12.4546 11.1182 11.7399L10.3985 8.65535C10.3285 8.35543 10.4304 8.04142 10.6632 7.83976L13.0602 5.76327C13.6149 5.28274 13.3184 4.37155 12.5871 4.30953L9.43297 4.04202C9.12635 4.01602 8.8593 3.82243 8.73921 3.53911L7.5049 0.626969C7.21901 -0.0475323 6.26307 -0.0475302 5.97718 0.626969L4.74286 3.53911C4.62277 3.82243 4.35573 4.01602 4.04911 4.04202L0.894962 4.30953C0.163677 4.37155 -0.13286 5.28273 0.421853 5.76327L2.81888 7.83976C3.05166 8.04142 3.15358 8.35543 3.0836 8.65535L2.36388 11.7399C2.19712 12.4546 2.97221 13.0179 3.60053 12.6387L6.31233 11.0019Z"
+                                    fill="#FDB52A"
+                                />
+                            </svg>
+                            <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.31233 11.0019C6.57598 10.8428 6.90609 10.8428 7.16975 11.0019L9.88155 12.6387C10.5099 13.0179 11.285 12.4546 11.1182 11.7399L10.3985 8.65535C10.3285 8.35543 10.4304 8.04142 10.6632 7.83976L13.0602 5.76327C13.6149 5.28274 13.3184 4.37155 12.5871 4.30953L9.43297 4.04202C9.12635 4.01602 8.8593 3.82243 8.73921 3.53911L7.5049 0.626969C7.21901 -0.0475323 6.26307 -0.0475302 5.97718 0.626969L4.74286 3.53911C4.62277 3.82243 4.35573 4.01602 4.04911 4.04202L0.894962 4.30953C0.163677 4.37155 -0.13286 5.28273 0.421853 5.76327L2.81888 7.83976C3.05166 8.04142 3.15358 8.35543 3.0836 8.65535L2.36388 11.7399C2.19712 12.4546 2.97221 13.0179 3.60053 12.6387L6.31233 11.0019Z"
+                                    fill="#FDB52A"
+                                />
+                            </svg>
+                            <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.31233 11.0019C6.57598 10.8428 6.90609 10.8428 7.16975 11.0019L9.88155 12.6387C10.5099 13.0179 11.285 12.4546 11.1182 11.7399L10.3985 8.65535C10.3285 8.35543 10.4304 8.04142 10.6632 7.83976L13.0602 5.76327C13.6149 5.28274 13.3184 4.37155 12.5871 4.30953L9.43297 4.04202C9.12635 4.01602 8.8593 3.82243 8.73921 3.53911L7.5049 0.626969C7.21901 -0.0475323 6.26307 -0.0475302 5.97718 0.626969L4.74286 3.53911C4.62277 3.82243 4.35573 4.01602 4.04911 4.04202L0.894962 4.30953C0.163677 4.37155 -0.13286 5.28273 0.421853 5.76327L2.81888 7.83976C3.05166 8.04142 3.15358 8.35543 3.0836 8.65535L2.36388 11.7399C2.19712 12.4546 2.97221 13.0179 3.60053 12.6387L6.31233 11.0019Z"
+                                    fill="#FDB52A"
+                                />
+                            </svg>
+                        </div>
+                        <span><b>4.9 / 5 </b>ratings</span>
+                    </div>
+                    <h2 class="text-3xl font-extrabold leading-normal sm:text-5xl lg:text-[70px] lg:leading-[90px]">
+                        <span class="text-secondary">Your website, </span>
+                        <span class="text-primary">growth reimagined</span>
+                    </h2>
+                    <p class="my-8 text-lg lg:w-3/4">Plurk is fully equipped with everything you need to build a high performing website for your SaaS.</p>
+                    <a href="javascript:" class="btn mx-auto mt-2 block w-fit bg-white lg:mx-0 lg:rtl:ml-auto">Free trial</a>
+                </div>
+                <div
+                    class="top-[70px] w-full pb-7 ltr:right-0 rtl:left-0 rtl:right-auto lg:absolute lg:max-w-[630px] lg:pb-0 xl:ltr:-right-52 xl:rtl:-left-52"
+                    [attr.data-aos]="storeData.direction === 'rtl' ? 'fade-right' : 'fade-left'"
+                    data-aos-duration="1000"
+                >
+                    <img src="/assets/images/modern-saas/banner-img.png" alt="" />
+                </div>
+            </div>
+        </div>
+    </section>
+    <div class="py-14 dark:bg-gray-dark lg:py-[100px]">
+        <logo-slider title='Used and <span class="text-secondary">loved</span> by industry leaders'></logo-slider>
+    </div>
+
+    <section class="bg-gradient-to-b from-white/[55%] to-transparent py-14 dark:bg-none lg:py-20">
+        <div class="container">
+            <div class="lg:w-1/2">
+                <div class="heading mb-5 text-center ltr:lg:text-left rtl:lg:text-right">
+                    <h6 class="!text-secondary">OUR FEATURES</h6>
+                    <h4>A robust set of features</h4>
+                    <p class="mt-4 text-lg font-semibold">
+                        We will help a client's problems to develop the products they have with high quality Change the appearance.
+                    </p>
+                </div>
+            </div>
+            <div class="mt-16 grid gap-x-7 gap-y-12 text-lg font-semibold sm:grid-cols-2 lg:grid-cols-3 lg:gap-y-20">
+                <div class="flex gap-5" data-aos="fade-up" data-aos-duration="1000">
+                    <div class="h-10 w-10 flex-none text-black dark:text-white">
+                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M9.25175 22.8926H2.67813C1.58662 22.8926 0.701782 23.7774 0.701782 24.8689V36.8477C0.701782 37.9392 1.58662 38.8241 2.67813 38.8241H9.25175C10.3433 38.8241 11.2281 37.9392 11.2281 36.8477V24.8689C11.2281 23.7774 10.3433 22.8926 9.25175 22.8926Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M22.936 12.0098H16.3623C15.2708 12.0098 14.386 12.8946 14.386 13.9861V36.8482C14.386 37.9397 15.2708 38.8245 16.3623 38.8245H22.936C24.0275 38.8245 24.9123 37.9397 24.9123 36.8482V13.9861C24.9123 12.8946 24.0275 12.0098 22.936 12.0098Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M36.6202 0.929688H30.0465C28.955 0.929688 28.0702 1.81453 28.0702 2.90604V36.8481C28.0702 37.9396 28.955 38.8244 30.0465 38.8244H36.6202C37.7117 38.8244 38.5965 37.9396 38.5965 36.8481V2.90604C38.5965 1.81453 37.7117 0.929688 36.6202 0.929688Z"
+                                fill="#B476E5"
+                            />
+                        </svg>
+                    </div>
+                    <div class="flex-1">
+                        <h3 class="mb-6 text-[22px] font-extrabold text-black dark:text-white">Realtime analytics</h3>
+                        <p class="line-clamp-3">Real-time analytics is the discipline that applies logic and mathematics to data....</p>
+                    </div>
+                </div>
+                <div class="flex gap-5" data-aos="fade-up" data-aos-duration="1000">
+                    <div class="h-10 w-10 flex-none text-black dark:text-white">
+                        <svg width="34" height="37" viewBox="0 0 34 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M5.01127 0.318359H0.938767C0.4203 0.318359 0 0.738659 0 1.25713V35.0798C0 35.5983 0.4203 36.0186 0.938767 36.0186H5.01127C5.52973 36.0186 5.95003 35.5983 5.95003 35.0798V1.25713C5.95003 0.738659 5.52973 0.318359 5.01127 0.318359Z"
+                                fill="#B476E5"
+                            />
+                            <mask id="mask0_733_15588" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="7" y="0" width="28" height="23">
+                                <path
+                                    d="M31.1839 0.318359H10.4664C8.91096 0.318359 7.65005 1.57926 7.65005 3.13466V19.6022C7.65005 21.1576 8.91096 22.4185 10.4664 22.4185H31.1839C32.7393 22.4185 34.0002 21.1576 34.0002 19.6022V3.13466C34.0002 1.57926 32.7393 0.318359 31.1839 0.318359Z"
+                                    fill="#01B969"
+                                />
+                            </mask>
+                            <g mask="url(#mask0_733_15588)">
+                                <path
+                                    d="M31.1839 0.318359H10.4664C8.91096 0.318359 7.65005 1.57926 7.65005 3.13466V19.6022C7.65005 21.1576 8.91096 22.4185 10.4664 22.4185H31.1839C32.7393 22.4185 34.0002 21.1576 34.0002 19.6022V3.13466C34.0002 1.57926 32.7393 0.318359 31.1839 0.318359Z"
+                                    fill="#47BDFF"
+                                />
+                                <path d="M34.2428 10.6993L22.2819 22.6602L34.2428 34.621L46.2036 22.6602L34.2428 10.6993Z" fill="currentColor" />
+                            </g>
+                        </svg>
+                    </div>
+                    <div class="flex-1">
+                        <h3 class="mb-6 text-[22px] font-extrabold text-black dark:text-white">User journey</h3>
+                        <p class="line-clamp-3">A customer journey map is a visual representation of a customer’s experience with a company.</p>
+                    </div>
+                </div>
+                <div class="flex gap-5" data-aos="fade-up" data-aos-duration="1000">
+                    <div class="h-10 w-10 flex-none text-black dark:text-white">
+                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M22.1366 3.02539C22.5757 3.02539 22.9135 3.38362 22.9135 3.8101V9.30304C22.9135 12.4248 25.4639 14.9836 28.5547 15.0007C29.8384 15.0007 30.8518 15.0178 31.6287 15.0178L31.9165 15.0165C32.4357 15.0125 33.1347 15.0007 33.7399 15.0007C34.1622 15.0007 34.5 15.3418 34.5 15.7683V29.4836C34.5 33.7142 31.1051 37.143 26.9164 37.143H13.4721C9.08067 37.143 5.5 33.5436 5.5 29.1083V10.7189C5.5 6.48833 8.91173 3.02539 13.1173 3.02539H22.1366ZM23.9438 25.0312H14.7557C14.0632 25.0312 13.4889 25.5942 13.4889 26.2936C13.4889 26.993 14.0632 27.573 14.7557 27.573H23.9438C24.6363 27.573 25.2105 26.993 25.2105 26.2936C25.2105 25.5942 24.6363 25.0312 23.9438 25.0312ZM20.4645 16.5018H14.7557C14.0632 16.5018 13.4889 17.0818 13.4889 17.7812C13.4889 18.4807 14.0632 19.0436 14.7557 19.0436H20.4645C21.1569 19.0436 21.7312 18.4807 21.7312 17.7812C21.7312 17.0818 21.1569 16.5018 20.4645 16.5018ZM25.3747 4.57092C25.3747 3.83568 26.2581 3.47062 26.7631 4.00116C28.5889 5.91856 31.7794 9.27064 33.5629 11.1437C34.0561 11.6606 33.6947 12.5186 32.9836 12.5203C31.5953 12.5254 29.9587 12.5203 28.7814 12.5084C26.9134 12.5084 25.3747 10.9543 25.3747 9.06764V4.57092Z"
+                                fill="#B476E5"
+                            />
+                            <path
+                                d="M20.4648 16.502H14.756C14.0635 16.502 13.4893 17.082 13.4893 17.7814C13.4893 18.4808 14.0635 19.0438 14.756 19.0438H20.4648C21.1573 19.0438 21.7315 18.4808 21.7315 17.7814C21.7315 17.082 21.1573 16.502 20.4648 16.502Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M23.9441 25.0312H14.756C14.0635 25.0312 13.4893 25.5942 13.4893 26.2937C13.4893 26.9931 14.0635 27.573 14.756 27.573H23.9441C24.6366 27.573 25.2109 26.9931 25.2109 26.2937C25.2109 25.5942 24.6366 25.0312 23.9441 25.0312Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M26.7627 4.00153C26.2577 3.471 25.3743 3.83606 25.3743 4.57129V9.068C25.3743 10.9547 26.913 12.5087 28.7811 12.5087C29.9583 12.5207 31.5949 12.5258 32.9833 12.5207C33.6943 12.519 34.0558 11.6609 33.5626 11.1441C32.6721 10.2089 31.4309 8.905 30.1839 7.59513C28.9333 6.28142 27.6769 4.96162 26.7627 4.00153Z"
+                                fill="#47BDFF"
+                            />
+                        </svg>
+                    </div>
+                    <div class="flex-1">
+                        <h3 class="mb-6 text-[22px] font-extrabold text-black dark:text-white">Automated reports</h3>
+                        <p class="line-clamp-3">Let’s take a deeper look into what report automation is, why your agency should automate its..</p>
+                    </div>
+                </div>
+                <div class="flex gap-5" data-aos="fade-up" data-aos-duration="1000">
+                    <div class="h-10 w-10 flex-none">
+                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M35.4885 2.06836H5.20114C3.85481 2.06836 2.75861 3.16457 2.75861 4.51089V7.52888C2.75861 9.7887 3.77665 11.8864 5.5509 13.2844L14.8765 20.6316H25.8122L35.1378 13.2844C36.9129 11.8864 37.931 9.78774 37.931 7.52888V4.51089C37.931 3.16457 36.8348 2.06836 35.4885 2.06836Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                d="M15.46 23.5625V35.7752C15.46 36.3242 15.7668 36.8274 16.2543 37.0785C16.4664 37.187 16.696 37.2407 16.9255 37.2407C17.2255 37.2407 17.5244 37.1488 17.7775 36.9681L24.6166 32.0831C25.0015 31.8075 25.2302 31.363 25.2302 30.8901V23.5625H15.46Z"
+                                fill="#B476E5"
+                            />
+                        </svg>
+                    </div>
+                    <div class="flex-1">
+                        <h3 class="mb-6 text-[22px] font-extrabold text-black dark:text-white">Funnel optimization</h3>
+                        <p class="line-clamp-3">Real-time analytics is the discipline that applies logic and mathematics to data....</p>
+                    </div>
+                </div>
+                <div class="flex gap-5" data-aos="fade-up" data-aos-duration="1000">
+                    <div class="h-10 w-10 flex-none text-black dark:text-white">
+                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M20.0335 14.25H7.50748C4.44768 14.25 1.96722 16.7305 1.96722 19.7903V32.3163C1.96722 35.3761 4.44768 37.8566 7.50748 37.8566H20.0335C23.0933 37.8566 25.5738 35.3761 25.5738 32.3163V19.7903C25.5738 16.7305 23.0933 14.25 20.0335 14.25Z"
+                                fill="#B476E5"
+                            />
+                            <path
+                                d="M31.8368 2.44531H19.3108C16.251 2.44531 13.7705 4.92577 13.7705 7.98557V20.5116C13.7705 23.5714 16.251 26.0519 19.3108 26.0519H31.8368C34.8966 26.0519 37.3771 23.5714 37.3771 20.5116V7.98557C37.3771 4.92577 34.8966 2.44531 31.8368 2.44531Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M25.5738 26.0533H19.3108C16.251 26.0533 13.7705 23.5728 13.7705 20.513V14.25H20.0335C23.0933 14.25 25.5738 16.7305 25.5738 19.7903V26.0533Z"
+                                fill="currentColor"
+                            />
+                        </svg>
+                    </div>
+                    <div class="flex-1">
+                        <h3 class="mb-6 text-[22px] font-extrabold text-black dark:text-white">A/B Testing</h3>
+                        <p class="line-clamp-3">A customer journey map is a visual representation of a customer’s experience with a company.</p>
+                    </div>
+                </div>
+                <div class="flex gap-5" data-aos="fade-up" data-aos-duration="1000">
+                    <div class="h-10 w-10 flex-none text-black dark:text-white">
+                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M23.5351 15.8717C23.2033 15.3029 22.5943 14.9531 21.9358 14.9531H11.102C10.4434 14.9531 9.83448 15.3029 9.50267 15.8717L4.10235 25.1294C3.76606 25.706 3.76606 26.4188 4.10235 26.9953L9.50267 36.253C9.83448 36.8218 10.4434 37.1716 11.102 37.1716H21.9358C22.5943 37.1716 23.2033 36.8218 23.5351 36.253L28.9354 26.9953C29.2717 26.4188 29.2717 25.706 28.9354 25.1294L23.5351 15.8717ZM16.5189 31.2741C19.4351 31.2741 21.7992 28.91 21.7992 25.9938C21.7992 23.0776 19.4351 20.7135 16.5189 20.7135C13.6027 20.7135 11.2386 23.0776 11.2386 25.9938C11.2386 28.91 13.6027 31.2741 16.5189 31.2741Z"
+                                fill="#47BDFF"
+                            />
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M30.6374 3.67673C30.386 3.25889 29.9245 3.00195 29.4255 3.00195H21.2154C20.7164 3.00195 20.2549 3.25889 20.0034 3.67673L15.911 10.4771C15.6561 10.9006 15.6561 11.4242 15.911 11.8477L20.0034 18.6481C20.2549 19.066 20.7164 19.3229 21.2154 19.3229H29.4255C29.9245 19.3229 30.386 19.066 30.6374 18.6481L34.7299 11.8477C34.9847 11.4242 34.9847 10.9006 34.7299 10.4771L30.6374 3.67673ZM25.3205 14.9908C27.5304 14.9908 29.3219 13.2542 29.3219 11.1121C29.3219 8.96989 27.5304 7.23331 25.3205 7.23331C23.1105 7.23331 21.3189 8.96989 21.3189 11.1121C21.3189 13.2542 23.1105 14.9908 25.3205 14.9908Z"
+                                fill="#B476E5"
+                            />
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M25.5491 19.3244L23.5351 15.8717C23.2032 15.3029 22.5943 14.9531 21.9358 14.9531H17.7791L20.0036 18.6496C20.255 19.0675 20.7165 19.3244 21.2155 19.3244H25.5491Z"
+                                fill="currentColor"
+                            />
+                        </svg>
+                    </div>
+                    <div class="flex-1">
+                        <h3 class="mb-6 text-[22px] font-extrabold text-black dark:text-white">Integrations</h3>
+                        <p class="text-lg font-semibold line-clamp-3">
+                            Let’s take a deeper look into what report automation is, why your agency should automate its..
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-gradient-to-t from-white/[55%] to-transparent py-8 dark:bg-white/[0.03] dark:bg-none lg:py-20 px-7">
+        <div class="relative mx-auto max-w-[1440px] bg-black pt-14 rounded-[32px]">
+            <img src="/assets/images/modern-saas/perfomance-design.svg" alt="" class="absolute bottom-0 ltr:right-0 rtl:left-0" />
+            <img src="/assets/images/modern-saas/dollers-icon.svg" alt="" class="absolute top-0 ltr:right-14 rtl:left-14" />
+            <div class="container">
+                <div class="relative">
+                    <img src="/assets/images/modern-saas/perfomance-doller-icon.svg" alt="" class="absolute bottom-0 ltr:left-0 rtl:right-0" />
+                    <div class="grid gap-4 lg:grid-cols-2">
+                        <div class="pt-28 lg:pb-10 lg:pt-0">
+                            <div class="heading mb-12 ltr:lg:text-left rtl:lg:text-right">
+                                <h6 class="!text-secondary">WHAT WE DO</h6>
+                                <h4 class="pb-4 leading-normal !text-white lg:!leading-[50px]">Increase your performance</h4>
+                                <p class="text-lg font-semibold xl:w-11/12">
+                                    We take step wise for your every platform. We helping to client with our talented expert.
+                                </p>
+                            </div>
+                            <ul class="space-y-8 text-lg font-semibold text-white">
+                                <li class="flex items-center gap-3.5">
+                                    <div class="flex h-5 w-5 items-center justify-center rounded-full bg-primary">
+                                        <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path
+                                                d="M4.60002 5.79922L2.42502 3.62422C2.24169 3.44089 2.01669 3.34922 1.75002 3.34922C1.48336 3.34922 1.25002 3.44922 1.05002 3.64922C0.866691 3.83255 0.775024 4.06589 0.775024 4.34922C0.775024 4.63255 0.866691 4.86589 1.05002 5.04922L3.90002 7.89922C4.08336 8.08255 4.31669 8.17422 4.60002 8.17422C4.88336 8.17422 5.11669 8.08255 5.30002 7.89922L10.975 2.22422C11.1584 2.04089 11.25 1.81589 11.25 1.54922C11.25 1.28255 11.15 1.04922 10.95 0.849219C10.7667 0.665886 10.5334 0.574219 10.25 0.574219C9.96669 0.574219 9.73336 0.665886 9.55002 0.849219L4.60002 5.79922Z"
+                                                fill="white"
+                                            />
+                                        </svg>
+                                    </div>
+                                    <p>Grow your product</p>
+                                </li>
+                                <li class="flex items-center gap-3.5">
+                                    <div class="flex h-5 w-5 items-center justify-center rounded-full bg-secondary">
+                                        <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path
+                                                d="M4.60002 5.79922L2.42502 3.62422C2.24169 3.44089 2.01669 3.34922 1.75002 3.34922C1.48336 3.34922 1.25002 3.44922 1.05002 3.64922C0.866691 3.83255 0.775024 4.06589 0.775024 4.34922C0.775024 4.63255 0.866691 4.86589 1.05002 5.04922L3.90002 7.89922C4.08336 8.08255 4.31669 8.17422 4.60002 8.17422C4.88336 8.17422 5.11669 8.08255 5.30002 7.89922L10.975 2.22422C11.1584 2.04089 11.25 1.81589 11.25 1.54922C11.25 1.28255 11.15 1.04922 10.95 0.849219C10.7667 0.665886 10.5334 0.574219 10.25 0.574219C9.96669 0.574219 9.73336 0.665886 9.55002 0.849219L4.60002 5.79922Z"
+                                                fill="white"
+                                            />
+                                        </svg>
+                                    </div>
+                                    <p>Organize your workflow</p>
+                                </li>
+                                <li class="flex items-center gap-3.5">
+                                    <div class="flex h-5 w-5 items-center justify-center rounded-full bg-primary">
+                                        <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path
+                                                d="M4.60002 5.79922L2.42502 3.62422C2.24169 3.44089 2.01669 3.34922 1.75002 3.34922C1.48336 3.34922 1.25002 3.44922 1.05002 3.64922C0.866691 3.83255 0.775024 4.06589 0.775024 4.34922C0.775024 4.63255 0.866691 4.86589 1.05002 5.04922L3.90002 7.89922C4.08336 8.08255 4.31669 8.17422 4.60002 8.17422C4.88336 8.17422 5.11669 8.08255 5.30002 7.89922L10.975 2.22422C11.1584 2.04089 11.25 1.81589 11.25 1.54922C11.25 1.28255 11.15 1.04922 10.95 0.849219C10.7667 0.665886 10.5334 0.574219 10.25 0.574219C9.96669 0.574219 9.73336 0.665886 9.55002 0.849219L4.60002 5.79922Z"
+                                                fill="white"
+                                            />
+                                        </svg>
+                                    </div>
+                                    <p>Discover a new way with us.</p>
+                                </li>
+                                <li class="flex items-center gap-3.5">
+                                    <div class="flex h-5 w-5 items-center justify-center rounded-full bg-secondary">
+                                        <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path
+                                                d="M4.60002 5.79922L2.42502 3.62422C2.24169 3.44089 2.01669 3.34922 1.75002 3.34922C1.48336 3.34922 1.25002 3.44922 1.05002 3.64922C0.866691 3.83255 0.775024 4.06589 0.775024 4.34922C0.775024 4.63255 0.866691 4.86589 1.05002 5.04922L3.90002 7.89922C4.08336 8.08255 4.31669 8.17422 4.60002 8.17422C4.88336 8.17422 5.11669 8.08255 5.30002 7.89922L10.975 2.22422C11.1584 2.04089 11.25 1.81589 11.25 1.54922C11.25 1.28255 11.15 1.04922 10.95 0.849219C10.7667 0.665886 10.5334 0.574219 10.25 0.574219C9.96669 0.574219 9.73336 0.665886 9.55002 0.849219L4.60002 5.79922Z"
+                                                fill="white"
+                                            />
+                                        </svg>
+                                    </div>
+                                    <p>Embedded Analytics</p>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="pb-20 lg:pt-20 lg:pb-8" data-aos="fade-up" data-aos-duration="1000">
+                            <img src="/assets/images/modern-saas/perfomance-img.png" alt="" class="w-full" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="py-14 dark:bg-gradient-to-t dark:from-white/[0.02] dark:to-transparent lg:py-20">
+        <div class="container">
+            <div class="relative">
+                <div class="lg:w-2/3">
+                    <div class="heading mb-5 text-center ltr:lg:text-left rtl:lg:text-right">
+                        <h6 class="!text-secondary">THOUSANDS OF BENIFITS</h6>
+                        <h4 class="">We make it easy to track all user analytics</h4>
+                        <p class="mt-4 text-lg font-semibold">
+                            We analyze step wise for your every platform. You will get best reports and analytics. We helping to client with our talented
+                            expert.
+                        </p>
+                    </div>
+                    <ul class="mt-14 space-y-14 lg:w-2/3">
+                        <li class="flex gap-5 sm:gap-8">
+                            <div class="flex h-12 w-12 flex-none items-center justify-center rounded-2xl bg-primary p-2 sm:h-[72px] sm:w-[72px]">
+                                <img src="/assets/images/modern-saas/tracking-icon.svg" alt="" />
+                            </div>
+                            <div class="flex-1">
+                                <h4 class="text-[22px] font-extrabold text-black dark:text-white">Advanced tracking</h4>
+                                <p class="pt-4 text-lg font-semibold">
+                                    Use our analytics, reporting, and AI-assisted optimization tools to monitor trends, track.
+                                </p>
+                            </div>
+                        </li>
+                        <li class="flex gap-5 sm:gap-8">
+                            <div class="flex h-12 w-12 flex-none items-center justify-center rounded-2xl bg-secondary p-2 sm:h-[72px] sm:w-[72px]">
+                                <img src="/assets/images/modern-saas/monitoring-icon.svg" alt="" />
+                            </div>
+                            <div class="flex-1">
+                                <h4 class="text-[22px] font-extrabold text-black dark:text-white">In-depth monitoring</h4>
+                                <p class="pt-4 text-lg font-semibold">Time Tracking is never been easier. Just let the stopwatch run.</p>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <img
+                    src="/assets/images/modern-saas/benifits-img.png"
+                    alt=""
+                    class="top-0 mx-auto mt-10 h-full ltr:-right-[125px] rtl:-left-[125px] lg:absolute lg:mt-0"
+                />
+            </div>
+        </div>
+    </section>
+
+    <section class="py-14 lg:py-20">
+        <div class="container">
+            <div class="relative grid items-center gap-y-10 lg:grid-cols-2 lg:gap-4">
+                <img
+                    src="/assets/images/modern-saas/analysis-icon.svg"
+                    alt=""
+                    class="absolute top-0 block w-32 ltr:right-0 rtl:left-0 dark:hidden sm:w-72 lg:-top-16 lg:ltr:right-36 lg:rtl:left-36"
+                />
+                <img
+                    src="/assets/images/modern-saas/analysis-icon-dark.svg"
+                    alt=""
+                    class="absolute top-0 hidden w-32 ltr:right-0 rtl:left-0 dark:block sm:w-72 lg:-top-16 lg:ltr:right-36 lg:rtl:left-36"
+                />
+                <div class="ltr:pr-24 rtl:pl-24 sm:ltr:pr-60 sm:rtl:pl-60 lg:ltr:pr-24 lg:rtl:pl-24" data-aos="fade-up" data-aos-duration="1000">
+                    <img src="/assets/images/modern-saas/integration-img.png" alt="" />
+                </div>
+                <div class="heading mb-5 text-center ltr:lg:text-right rtl:lg:text-left">
+                    <h6 class="!text-secondary">INTEGRATIONS</h6>
+                    <h4 class="">Integrated with all tools you already know and love</h4>
+                    <p class="mt-4 text-lg font-semibold">
+                        Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster
+                        collaborative thinking
+                    </p>
+                    <a
+                        href="javascript:"
+                        class="mt-8 inline-flex items-center gap-4 text-lg font-extrabold text-primary transition hover:text-secondary md:mt-12"
+                    >
+                        <span>Learn More</span>
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M20.0398 3.96094C18.4495 2.36891 16.4227 1.28435 14.2158 0.844459C12.0089 0.404569 9.7212 0.629129 7.64196 1.48972C5.56274 2.35031 3.7855 3.80827 2.53506 5.67914C1.28462 7.55001 0.617188 9.7497 0.617188 12C0.617188 14.2503 1.28462 16.45 2.53506 18.3209C3.7855 20.1917 5.56274 21.6497 7.64196 22.5103C9.7212 23.3709 12.0089 23.5954 14.2158 23.1556C16.4227 22.7157 18.4495 21.6311 20.0398 20.0391C21.0961 18.9837 21.934 17.7305 22.5057 16.3511C23.0775 14.9717 23.3717 13.4932 23.3717 12C23.3717 10.5068 23.0775 9.0283 22.5057 7.64891C21.934 6.26952 21.0961 5.01632 20.0398 3.96094ZM15.9382 14.1875C15.9382 14.4196 15.8461 14.6421 15.682 14.8062C15.5179 14.9703 15.2953 15.0625 15.0632 15.0625C14.8312 15.0625 14.6086 14.9703 14.4445 14.8062C14.2804 14.6421 14.1882 14.4196 14.1882 14.1875V11.0484L9.5617 15.6859C9.3925 15.8446 9.1702 15.9344 8.9382 15.9375C8.7059 15.9365 8.4828 15.8465 8.3148 15.6859C8.1505 15.52 8.0583 15.296 8.0583 15.0625C8.0583 14.829 8.1505 14.605 8.3148 14.4391L12.9523 9.8125H9.8132C9.5812 9.8125 9.3586 9.7203 9.1945 9.5562C9.0304 9.3921 8.9382 9.1696 8.9382 8.9375C8.9382 8.7054 9.0304 8.4829 9.1945 8.3188C9.3586 8.1547 9.5812 8.0625 9.8132 8.0625H15.0632C15.1759 8.0622 15.2875 8.0845 15.3914 8.1281C15.6074 8.2155 15.7803 8.3845 15.8726 8.5984C15.9155 8.7064 15.9377 8.8214 15.9382 8.9375V14.1875Z"
+                                fill="currentColor"
+                            />
+                        </svg>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="bg-white/50 py-14 dark:bg-white/[0.03] lg:py-20">
+        <div class="container">
+            <div class="heading mb-5 text-center">
+                <h6 class="!text-secondary">Drive more lead with Plurk</h6>
+                <h4 class="">Our response management having automatically track customer sentiment</h4>
+            </div>
+            <div
+                class="mt-14 grid gap-4 rounded-2xl py-8 px-4 sm:p-10 lg:mt-20 lg:grid-cols-2"
+                style="background: radial-gradient(193.33% 779.99% at 81.67% -6.05%, rgba(71, 189, 255, 0.3) 0%, rgba(71, 189, 255, 0) 100%)"
+            >
+                <div class="heading mb-5 text-center ltr:lg:text-left rtl:lg:text-right">
+                    <h4 class="">Tenancy Optimization</h4>
+                    <p class="mt-6 text-lg font-semibold">
+                        Optimize your SaaS solutions’ tenancy by leveraging our deep understanding of the unit economics of SaaS products. We can take existing
+                        single-tenant applications and securely deliver a cost optimized multi-tenant solution.
+                    </p>
+                    <a
+                        href="javascript:"
+                        class="mt-8 inline-flex items-center gap-4 text-lg font-extrabold text-primary transition hover:text-secondary lg:mt-14"
+                    >
+                        <span>Learn More</span>
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M20.0398 3.96094C18.4495 2.36891 16.4227 1.28435 14.2158 0.844459C12.0089 0.404569 9.7212 0.629129 7.64196 1.48972C5.56274 2.35031 3.7855 3.80827 2.53506 5.67914C1.28462 7.55001 0.617188 9.7497 0.617188 12C0.617188 14.2503 1.28462 16.45 2.53506 18.3209C3.7855 20.1917 5.56274 21.6497 7.64196 22.5103C9.7212 23.3709 12.0089 23.5954 14.2158 23.1556C16.4227 22.7157 18.4495 21.6311 20.0398 20.0391C21.0961 18.9837 21.934 17.7305 22.5057 16.3511C23.0775 14.9717 23.3717 13.4932 23.3717 12C23.3717 10.5068 23.0775 9.0283 22.5057 7.64891C21.934 6.26952 21.0961 5.01632 20.0398 3.96094ZM15.9382 14.1875C15.9382 14.4196 15.8461 14.6421 15.682 14.8062C15.5179 14.9703 15.2953 15.0625 15.0632 15.0625C14.8312 15.0625 14.6086 14.9703 14.4445 14.8062C14.2804 14.6421 14.1882 14.4196 14.1882 14.1875V11.0484L9.5617 15.6859C9.3925 15.8446 9.1702 15.9344 8.9382 15.9375C8.7059 15.9365 8.4828 15.8465 8.3148 15.6859C8.1505 15.52 8.0583 15.296 8.0583 15.0625C8.0583 14.829 8.1505 14.605 8.3148 14.4391L12.9523 9.8125H9.8132C9.5812 9.8125 9.3586 9.7203 9.1945 9.5562C9.0304 9.3921 8.9382 9.1696 8.9382 8.9375C8.9382 8.7054 9.0304 8.4829 9.1945 8.3188C9.3586 8.1547 9.5812 8.0625 9.8132 8.0625H15.0632C15.1759 8.0622 15.2875 8.0845 15.3914 8.1281C15.6074 8.2155 15.7803 8.3845 15.8726 8.5984C15.9155 8.7064 15.9377 8.8214 15.9382 8.9375V14.1875Z"
+                                fill="currentColor"
+                            />
+                        </svg>
+                    </a>
+                </div>
+                <div class="lg:ltr:pl-24 lg:rtl:pr-24">
+                    <img src="/assets/images/modern-saas/optimization.png" alt="" class="rounded-2xl" />
+                </div>
+            </div>
+            <div
+                class="mt-10 grid gap-4 rounded-2xl py-8 px-4 sm:p-10 lg:mt-16 lg:grid-cols-2"
+                style="background: radial-gradient(193.33% 779.99% at 81.67% -6.05%, rgba(180, 118, 229, 0.3) 0%, rgba(180, 118, 229, 0) 100%)"
+            >
+                <div class="heading mb-5 text-center ltr:lg:text-left rtl:lg:text-right">
+                    <h4 class="">Migrate and Modernize</h4>
+                    <p class="mt-6 text-lg font-semibold">
+                        Migrating a legacy system involves taking your old infrastructure and transferring it to the cloud. This does provide potential cost and
+                        efficiency benefits. However, it fails to give your application a growth perspective.
+                    </p>
+                    <a
+                        href="javascript:"
+                        class="mt-8 inline-flex items-center gap-4 text-lg font-extrabold text-secondary transition hover:text-primary lg:mt-14"
+                    >
+                        <span>Learn More</span>
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M20.0398 3.96094C18.4495 2.36891 16.4227 1.28435 14.2158 0.844459C12.0089 0.404569 9.7212 0.629129 7.64196 1.48972C5.56274 2.35031 3.7855 3.80827 2.53506 5.67914C1.28462 7.55001 0.617188 9.7497 0.617188 12C0.617188 14.2503 1.28462 16.45 2.53506 18.3209C3.7855 20.1917 5.56274 21.6497 7.64196 22.5103C9.7212 23.3709 12.0089 23.5954 14.2158 23.1556C16.4227 22.7157 18.4495 21.6311 20.0398 20.0391C21.0961 18.9837 21.934 17.7305 22.5057 16.3511C23.0775 14.9717 23.3717 13.4932 23.3717 12C23.3717 10.5068 23.0775 9.0283 22.5057 7.64891C21.934 6.26952 21.0961 5.01632 20.0398 3.96094ZM15.9382 14.1875C15.9382 14.4196 15.8461 14.6421 15.682 14.8062C15.5179 14.9703 15.2953 15.0625 15.0632 15.0625C14.8312 15.0625 14.6086 14.9703 14.4445 14.8062C14.2804 14.6421 14.1882 14.4196 14.1882 14.1875V11.0484L9.5617 15.6859C9.3925 15.8446 9.1702 15.9344 8.9382 15.9375C8.7059 15.9365 8.4828 15.8465 8.3148 15.6859C8.1505 15.52 8.0583 15.296 8.0583 15.0625C8.0583 14.829 8.1505 14.605 8.3148 14.4391L12.9523 9.8125H9.8132C9.5812 9.8125 9.3586 9.7203 9.1945 9.5562C9.0304 9.3921 8.9382 9.1696 8.9382 8.9375C8.9382 8.7054 9.0304 8.4829 9.1945 8.3188C9.3586 8.1547 9.5812 8.0625 9.8132 8.0625H15.0632C15.1759 8.0622 15.2875 8.0845 15.3914 8.1281C15.6074 8.2155 15.7803 8.3845 15.8726 8.5984C15.9155 8.7064 15.9377 8.8214 15.9382 8.9375V14.1875Z"
+                                fill="currentColor"
+                            />
+                        </svg>
+                    </a>
+                </div>
+                <div class="lg:ltr:pl-24 lg:rtl:pr-24">
+                    <img src="/assets/images/modern-saas/migrate-modernize.png" alt="" class="rounded-2xl" />
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="py-14 text-center lg:py-20">
+        <div class="container">
+            <div class="heading mb-12 lg:mb-20">
+                <h6 class="!text-secondary">Our Services</h6>
+                <h4 class="">The Best Solutions To Your Business</h4>
+            </div>
+            <div class="grid gap-14 sm:grid-cols-2 lg:grid-cols-3">
+                <div data-aos="fade-up" data-aos-duration="1000">
+                    <div class="mb-10">
+                        <img src="/assets/images/modern-saas/modern-design.svg" alt="" class="mx-auto w-24" />
+                    </div>
+                    <h4 class="text-[22px] font-extrabold text-black dark:text-white">Modern Design</h4>
+                    <p class="mt-6 mb-8 text-lg font-semibold line-clamp-4">
+                        Design and user experience are among the essential aspects of SaaS. Even if you are just entering the market and no one knows you,
+                    </p>
+                    <a routerLink="/services-detail" class="text-lg font-extrabold text-secondary transition hover:text-primary">Read More +</a>
+                </div>
+                <div data-aos="fade-up" data-aos-duration="1000">
+                    <div class="mb-10">
+                        <img src="/assets/images/modern-saas/magic-pagebuilder.svg" alt="" class="mx-auto w-24" />
+                    </div>
+                    <h4 class="text-[22px] font-extrabold text-black dark:text-white">Magic Pagebuilder</h4>
+                    <p class="mt-6 mb-8 text-lg font-semibold line-clamp-4">
+                        Design and simplicity are at the core of our website builder. Easily create, customize, and promote a stunning website that's search...
+                    </p>
+                    <a routerLink="/services-detail" class="text-lg font-extrabold text-primary transition hover:text-secondary">Read More +</a>
+                </div>
+                <div data-aos="fade-up" data-aos-duration="1000">
+                    <div class="mb-10">
+                        <img src="/assets/images/modern-saas/support-icon.svg" alt="" class="mx-auto w-24" />
+                    </div>
+                    <h4 class="text-[22px] font-extrabold text-black dark:text-white">Support 24/7</h4>
+                    <p class="mt-6 mb-8 text-lg font-semibold line-clamp-4">
+                        24/7 support model ensures that a customer is able to get their issue resolved no matter what day or time it is.
+                    </p>
+                    <a routerLink="/services-detail" class="text-lg font-extrabold text-secondary transition hover:text-primary">Read More +</a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="py-[60px] dark:bg-gray-dark px-5">
+        <testimonial mainClass="mx-auto max-w-[1440px] py-14 dark:!bg-black md:py-20 rounded-[32px]" type="modern-saas" [feedbacks]="feedbacks">
+        </testimonial>
+    </section>
+
+    <section class="bg-gradient-to-t from-white/[55%] to-transparent py-14 dark:bg-none lg:py-20">
+        <faq-component type="modern-saas" [queries]="faqs"></faq-component>
+    </section>
+
+    <blog-slider
+        mainClass="dark:bg-white/[0.03] lg:py-20"
+        type="modern-saas"
+        [blogs]="blogs"
+        title="Blog"
+        subTitle="Unlock the latest trends/news"
+    ></blog-slider>
+
+    <section class="relative bg-black py-14 lg:py-24">
+        <img src="/assets/images/modern-saas/newsletter.svg" alt="" class="absolute right-0 bottom-0 hidden xl:inline-block" />
+        <img src="/assets/images/modern-saas/email.svg" alt="" class="absolute left-40 bottom-0 hidden md:left-1/2 xl:inline-block" />
+        <div class="container">
+            <div class="flex flex-col justify-between gap-8 md:flex-row">
+                <div class="relative text-center md:w-1/2 ltr:md:text-left rtl:md:text-right xl:pr-12">
+                    <img src="/assets/images/modern-saas/icon-1.svg" alt="" class="absolute -left-12 -top-12" />
+                    <h2 class="relative mb-3 text-3xl font-black text-white md:text-4xl xl:text-6xl">
+                        Email Newsletter
+                        <img src="/assets/images/modern-saas/icon-2.svg" alt="" class="absolute right-8 -bottom-5" />
+                    </h2>
+                    <p class="text-2xl font-semibold">get updates & more</p>
+                    <form class="relative mt-14">
+                        <div class="absolute top-1/2 -translate-y-1/2 ltr:pl-4 rtl:pr-4">
+                            <svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M24 10.4091C24 14.8446 24 17.0623 22.6527 18.4403C21.3054 19.8182 19.1369 19.8182 14.8 19.8182H10.2C5.86308 19.8182 3.69462 19.8182 2.34731 18.4403C1 17.0623 1 14.8446 1 10.4091C1 5.9736 1 3.75586 2.34731 2.37793C3.69462 1 5.86308 1 10.2 1H14.8C19.1369 1 21.3054 1 22.6527 2.37793C23.4038 3.14616 23.7362 4.17543 23.8833 5.70455"
+                                    stroke="#08111F"
+                                    stroke-width="2"
+                                    stroke-linecap="square"
+                                />
+                                <path
+                                    d="M19.3999 5.70508L16.9172 7.82104C14.8051 9.62115 13.749 10.5212 12.4999 10.5212C11.7532 10.5212 11.0755 10.1996 10.1999 9.55627M5.59991 5.70508L6.63491 6.58718L7.66991 7.46928"
+                                    stroke="#08111F"
+                                    stroke-width="2"
+                                    stroke-linecap="square"
+                                />
+                            </svg>
+                        </div>
+                        <input
+                            type="email"
+                            placeholder="your email"
+                            class="w-full rounded-xl py-4 font-semibold outline-0 ltr:pl-14 ltr:pr-32 rtl:pr-14 rtl:pl-32 lg:py-6 lg:text-lg"
+                        />
+                        <button
+                            type="button"
+                            class="absolute top-1/2 -translate-y-1/2 rounded-md bg-secondary px-3 py-1.5 font-bold text-white transition hover:bg-primary ltr:right-4 rtl:left-4 lg:py-2 lg:text-lg"
+                        >
+                            subscribe
+                        </button>
+                    </form>
+                </div>
+                <div [attr.data-aos]="storeData.direction === 'rtl' ? 'fade-right' : 'fade-left'" data-aos-duration="1000">
+                    <img src="/assets/images/modern-saas/oc-target.svg" alt="" class="mx-auto w-52 rtl:rotate-y-180 lg:w-80" />
+                </div>
+            </div>
+        </div>
+    </section>
+</div>

src/app/modern-saas.ts

@@ -0,0 +1,88 @@
+import { Component, Input } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './modern-saas.html',
+})
+export class ModernSaasComponent {
+    storeData: any;
+    @Input() feedbacks: any = [
+        {
+            id: 1,
+            name: 'Allan Branch',
+            role: 'CEO of Lifted',
+            thumbnail: '/assets/images/modern-saas/client-1.png',
+            message:
+                "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.",
+        },
+    ];
+    @Input() faqs: any = [
+        {
+            id: 1,
+            question: 'Do you offer a free trial?',
+            answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        },
+        {
+            id: 2,
+            question: 'How do I create an account?',
+            answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        },
+        {
+            id: 3,
+            question: 'What protections does Strategic Systems use to protect our data?',
+            answer: "For now it is limited to 100MB per instance. We'll offer expansion options soon.",
+        },
+        {
+            id: 4,
+            question: 'What type of support is included with this Service?',
+            answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        },
+        {
+            id: 5,
+            question: 'Do you have premium plans for products?',
+            answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        },
+        {
+            id: 6,
+            question: 'Who else is using plurk SaaS tool?',
+            answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        },
+    ];
+    blogs = [
+        {
+            id: 1,
+            thumbnail: '/assets/images/modern-saas/design.png',
+            title: '3 experiments to improve your mobile app funnel',
+            excerpt: 'Funnels don’t just provide you with conversion numbers, they provide you with insight into how your users behave.',
+            date: 'Dec 15, 2022',
+            tag: 'Design',
+        },
+        {
+            id: 2,
+            thumbnail: '/assets/images/modern-saas/marketing.png',
+            title: 'What’s growth hacking? 8 great books to learn more about it',
+            excerpt: 'The use of resource-light and cost-effective digital marketing tactics to help grow and retain an active user base, sell products and...',
+            date: 'Dec 25, 2022',
+            tag: 'Marketing',
+        },
+        {
+            id: 3,
+            thumbnail: '/assets/images/modern-saas/integration.png',
+            title: '6 new interesting mobile apps to grow your audience on',
+            excerpt: 'Before I get into the advice, here’s a bit about my background and experience with growing audiences for creative work.',
+            date: 'Nov 06, 2022',
+            tag: 'Integration',
+        },
+    ];
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}

src/app/nft.ts

@@ -0,0 +1,88 @@
+import { Component } from '@angular/core';
+import { config } from 'rxjs';
+import SwiperCore, { SwiperOptions, Navigation, Autoplay, Thumbs } from 'swiper';
+
+// install Swiper modules
+SwiperCore.use([Navigation, Autoplay,Thumbs]);
+@Component({
+    moduleId: module.id,
+    templateUrl: './nft.html',
+})
+export class NftComponent {
+    activeTab = 'all';
+    thumbsSwiper: any;
+    config1: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 10,
+        speed: 2500,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        modules: [Autoplay],
+        breakpoints: {
+            320: {
+                slidesPerView: 1.7,
+            },
+            600: {
+                slidesPerView: 3,
+            },
+            1000: {
+                slidesPerView: 4,
+            },
+            1600: {
+                slidesPerView: 6,
+            },
+        },
+    };
+    config2: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 10,
+        speed: 2500,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        modules: [Autoplay],
+        breakpoints: {
+            320: {
+                slidesPerView: 1,
+            },
+            520: {
+                slidesPerView: 2,
+            },
+            800: {
+                slidesPerView: 3,
+            },
+            1000: {
+                slidesPerView: 4,
+            },
+            1600: {
+                slidesPerView: 7,
+            },
+        },
+    };
+    config3: SwiperOptions = {
+        direction: 'vertical',
+        mousewheel: true,
+        slidesPerView: 4,
+        loop: true,
+        freeMode: true,
+        watchSlidesProgress: true,
+    };
+    config4: SwiperOptions = {
+        loop: true,
+        spaceBetween: 10,
+        navigation: {
+            nextEl: '.client-slider-button-next',
+            prevEl: '.client-slider-button-prev',
+        },
+        modules: [Navigation, Thumbs],
+    };
+    setThumbsSwiper = (swiper: any) => {
+        this.thumbsSwiper = swiper;
+    };
+    constructor() {}
+}

src/app/online-courses.ts

@@ -0,0 +1,99 @@
+import { Component, Input } from '@angular/core';
+import SwiperCore, { SwiperOptions, Autoplay, Navigation } from 'swiper';
+import { Store } from '@ngrx/store';
+
+// install Swiper modules
+SwiperCore.use([Autoplay]);
+
+@Component({
+    moduleId: module.id,
+    templateUrl: './online-courses.html',
+})
+export class OnlineCoursesComponent {
+    storeData: any;
+
+    activeTab = 'all';
+    constructor(public store: Store<any>) {
+        this.initStore();
+    }
+
+    config: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        speed: 2500,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        breakpoints: {
+            320: {
+                slidesPerView: 1.7,
+            },
+            600: {
+                slidesPerView: 3,
+            },
+            1000: {
+                slidesPerView: 4,
+            },
+            1600: {
+                slidesPerView: 6,
+            },
+        },
+        modules: [Autoplay],
+    };
+
+    config1: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        speed: 1000,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        navigation:{
+            nextEl: '.course-slider-button-next',
+            prevEl: '.course-slider-button-prev',
+        },
+        breakpoints: {
+            320: {
+                slidesPerView: 1,
+            },
+            600: {
+                slidesPerView: 1,
+            },
+            1000: {
+                slidesPerView: 2,
+            },
+            1600: {
+                slidesPerView: 2,
+            },
+        },
+        modules: [Navigation, Autoplay],
+    };
+
+    config2: SwiperOptions = {
+        loop: true,
+        slidesPerView: 'auto',
+        spaceBetween: 30,
+        speed: 1000,
+        autoplay: {
+            delay: 3000,
+            disableOnInteraction: false,
+        },
+        navigation:{
+            nextEl: '.testimonial-swiper-button-next',
+            prevEl: '.testimonial-swiper-button-prev',
+        },
+        modules: [Navigation, Autoplay],
+    };
+
+    async initStore() {
+        this.store
+            .select((d) => d.index)
+            .subscribe((d) => {
+                this.storeData = d;
+            });
+    }
+}