From 664c39a5613b0cff29a028469b87300d43f0bc94 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 27 Nov 2023 12:36:08 +0300
Subject: [PATCH] Fixed build

---
 .../pages/landing/landing.component.html      | 395 +++++++++++-------
 1 file changed, 239 insertions(+), 156 deletions(-)

diff --git a/src/app/showcase/pages/landing/landing.component.html b/src/app/showcase/pages/landing/landing.component.html
index a8dae470405..cebedf6b12f 100644
--- a/src/app/showcase/pages/landing/landing.component.html
+++ b/src/app/showcase/pages/landing/landing.component.html
@@ -4,17 +4,21 @@
 
     <section class="landing-hero py-8 px-5 lg:px-8">
         <div class="flex flex-wrap">
-            <div class="w-full xl:w-6 flex flex-column justify-content-center lg:pr-8 align-items-center xl:align-items-stretch">
-                <h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Suite for <span class="font-bold text-primary">Angular.js</span></h1>
+            <div
+                class="w-full xl:w-6 flex flex-column justify-content-center lg:pr-8 align-items-center xl:align-items-stretch">
+                <h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Suite for <span
+                        class="font-bold text-primary">Angular.js</span></h1>
                 <p class="section-detail xl:text-left text-center px-0 mt-0 mb-5">
-                    Elevate your web applications with PrimeNG's comprehensive suite of customizable, feature-rich UI components. With PrimeNG, turning your development vision into reality has never been easier.
+                    Elevate your web applications with PrimeNG's comprehensive suite of customizable, feature-rich UI
+                    components. With PrimeNG, turning your development vision into reality has never been easier.
                 </p>
                 <div class="flex align-items-center gap-3">
                     <a [routerLink]="'installation'" class="linkbox active font-semibold py-3 px-4">
                         <span>Get Started</span>
                         <i class="pi pi-arrow-right ml-3"></i>
                     </a>
-                    <a href="https://github.com/primefaces/primeng" target="_blank" rel="noopener noreferrer" class="linkbox font-semibold py-3 px-4">
+                    <a href="https://github.com/primefaces/primeng" target="_blank" rel="noopener noreferrer"
+                        class="linkbox font-semibold py-3 px-4">
                         <span>Give a Star</span>
                         <i class="pi pi-star-fill ml-3 text-yellow-500"></i>
                     </a>
@@ -26,17 +30,21 @@ <h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Sui
                         <div class="box p-4 fadein animation-duration-500">
                             <span class="text-secondary font-medium block mb-3">Balance</span>
                             <div class="flex flex-wrap lg:flex-nowrap justify-content-start gap-3">
-                                <p-inputNumber [(ngModel)]="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputStyleClass="lg:w-6" />
-                                <p-inputNumber [(ngModel)]="value2" mode="currency" currency="USD" locale="en-US" class="w-full" inputStyleClass="lg:w-6" />
+                                <p-inputNumber [(ngModel)]="value1" mode="currency" currency="USD" locale="en-US"
+                                    class="w-full" inputStyleClass="lg:w-6" />
+                                <p-inputNumber [(ngModel)]="value2" mode="currency" currency="USD" locale="en-US"
+                                    class="w-full" inputStyleClass="lg:w-6" />
                             </div>
                             <span class="text-secondary font-medium block mt-5 mb-3">Category</span>
                             <div class="flex flex-wrap gap-3">
                                 <div class="flex align-items-center">
-                                    <p-radioButton id="category1" [(ngModel)]="radioValue" value="C" name="radiovalue" />
+                                    <p-radioButton id="category1" [(ngModel)]="radioValue" value="C"
+                                        name="radiovalue" />
                                     <label for="category1" class="ml-2 font-medium">Clothing</label>
                                 </div>
                                 <div class="flex align-items-center">
-                                    <p-radioButton id="category2" [(ngModel)]="radioValue" value="E" name="radiovalue" />
+                                    <p-radioButton id="category2" [(ngModel)]="radioValue" value="E"
+                                        name="radiovalue" />
                                     <label for="category2" class="ml-2 font-medium">Electronics</label>
                                 </div>
                             </div>
@@ -53,7 +61,8 @@ <h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Sui
                                 <p-inputSwitch [(ngModel)]="switchValue" class="ml-auto"></p-inputSwitch>
                             </div>
                             <div class="mt-5 flex justify-content-center">
-                                <p-selectButton [(ngModel)]="selectButtonValue" [options]="selectButtonOptions" optionLabel="label" />
+                                <p-selectButton [(ngModel)]="selectButtonValue" [options]="selectButtonOptions"
+                                    optionLabel="label" />
                             </div>
                             <div class="mt-5">
                                 <p-slider [(ngModel)]="rangeValues" range="true" class="w-full" />
@@ -63,7 +72,8 @@ <h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Sui
                     <div class="flex flex-column w-6 gap-5 pl-3">
                         <div class="box p-4 fadein animation-duration-500">
                             <div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'">
-                                <img src="https://primefaces.org/cdn/primeng/images/landing/air-jordan.png" alt="Watch" class="w-14rem" />
+                                <img src="https://primefaces.org/cdn/primeng/images/landing/air-jordan.png" alt="Watch"
+                                    class="w-14rem" />
                             </div>
                             <div class="flex align-items-center mb-4">
                                 <div class="flex flex-column">
@@ -72,13 +82,15 @@ <h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Sui
                                 </div>
                                 <span class="font-medium text-xl ml-auto">$990</span>
                             </div>
-                            <p-button label="Add to Cart" icon="pi pi-shopping-cart" outlined="true" styleClass="w-full"></p-button>
+                            <p-button label="Add to Cart" icon="pi pi-shopping-cart" outlined="true"
+                                styleClass="w-full"></p-button>
                         </div>
                         <div class="box p-4 fadein animation-duration-500">
                             <ul class="list-none p-0 m-0">
                                 <li class="flex align-items-center mb-3">
                                     <span class="mr-3">
-                                        <img src="https://primefaces.org/cdn/primevue/images/landing/avatar.png" alt="Avatar" class="w-3rem h-3rem" />
+                                        <img src="https://primefaces.org/cdn/primevue/images/landing/avatar.png"
+                                            alt="Avatar" class="w-3rem h-3rem" />
                                     </span>
                                     <div class="flex flex-column">
                                         <span class="font-bold mb-1">Amanda Williams</span>
@@ -86,7 +98,8 @@ <h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Sui
                                     </div>
                                 </li>
                                 <li class="flex">
-                                    <a class="flex align-items-center p-3 border-round w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
+                                    <a class="flex align-items-center p-3 border-round w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer"
+                                        style="border-radius: '10px'">
                                         <i class="pi pi-home text-xl mr-3"></i>
                                         <span class="flex flex-column">
                                             <span class="font-bold mb-1">Dashboard</span>
@@ -95,7 +108,8 @@ <h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Sui
                                     </a>
                                 </li>
                                 <li class="flex">
-                                    <a class="flex align-items-center p-3 border-round w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'">
+                                    <a class="flex align-items-center p-3 border-round w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer"
+                                        style="border-radius: '10px'">
                                         <i class="pi pi-envelope text-xl mr-3"></i>
                                         <span class="flex flex-column">
                                             <span class="font-bold mb-1">Inbox</span>
@@ -118,67 +132,81 @@ <h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Sui
     <section class="landing-features py-8">
         <div class="section-header">Features</div>
         <p class="section-detail">PrimeNG is the most complete solution for your UI requirements.</p>
-        <div
-            class="mt-7 px-3 lg:px-8"
-            [style]="{ 'background-size': 'cover' }"
-            [ngStyle]="{ 'background-image': isDarkMode ? 'url(https://primefaces.org/cdn/primeng/images/landing/wave-dark-alt.svg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/wave-light-alt.svg)' }"
-        >
+        <div class="mt-7 px-3 lg:px-8" [style]="{ 'background-size': 'cover' }"
+            [ngStyle]="{ 'background-image': isDarkMode ? 'url(https://primefaces.org/cdn/primeng/images/landing/wave-dark-alt.svg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/wave-light-alt.svg)' }">
             <div class="features-container">
                 <div class="grid">
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
                         <div class="box p-4 w-full">
-                            <img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-components.svg" width="30" height="25" class="block mb-3" alt="components icon" />
+                            <img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-components.svg"
+                                width="30" height="25" class="block mb-3" alt="components icon" />
                             <div class="font-semibold mb-3 text-lg">90+ UI Components</div>
-                            <p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 90+ impressive Angular Components.</p>
+                            <p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you
+                                with 90+ impressive Angular Components.</p>
                         </div>
                     </div>
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
                         <div class="box p-4 w-full">
-                            <img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-community.svg" width="30" height="25" alt="components icon" class="block mb-3" />
+                            <img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-community.svg"
+                                width="30" height="25" alt="components icon" class="block mb-3" />
                             <div class="font-semibold mb-3 text-lg">Community</div>
-                            <p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
+                            <p class="m-0 text-secondary font-medium">Connect with the other open source community
+                                members, collaborate and have a voice in the project roadmap.</p>
                         </div>
                     </div>
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
                         <div class="box p-4 w-full">
-                            <img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-productivity.svg" width="30" height="25" alt="components icon" class="block mb-3" />
+                            <img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-productivity.svg"
+                                width="30" height="25" alt="components icon" class="block mb-3" />
                             <div class="font-semibold mb-3 text-lg">Productivity</div>
-                            <p class="m-0 text-secondary font-medium">Boost your productivity by achieving more in less time and accomplish amazing results.</p>
+                            <p class="m-0 text-secondary font-medium">Boost your productivity by achieving more in less
+                                time and accomplish amazing results.</p>
                         </div>
                     </div>
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
                         <div class="box p-4 w-full">
-                            <img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3" />
+                            <img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-accessibility.svg"
+                                alt="components icon" class="block mb-3" />
                             <div class="font-semibold mb-3 text-lg">Accessibility</div>
-                            <p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 90+ impressive Angular Components.</p>
+                            <p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you
+                                with 90+ impressive Angular Components.</p>
                         </div>
                     </div>
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
                         <div class="box p-4 w-full">
-                            <img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-support.svg" alt="components icon" width="30" height="25" class="block mb-3" />
+                            <img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-support.svg"
+                                alt="components icon" width="30" height="25" class="block mb-3" />
                             <div class="font-semibold mb-3 text-lg">Enterprise Support</div>
-                            <p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
+                            <p class="m-0 text-secondary font-medium">Exceptional support service featuring response
+                                within 1 business day and option to request enhancements and new features for the
+                                library.</p>
                         </div>
                     </div>
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
                         <div class="box p-4 w-full">
-                            <img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-mobile.svg" width="30" height="25" alt="components icon" class="block mb-3" />
+                            <img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-mobile.svg"
+                                width="30" height="25" alt="components icon" class="block mb-3" />
                             <div class="font-semibold mb-3 text-lg">Mobile</div>
-                            <p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
+                            <p class="m-0 text-secondary font-medium">First class support for responsive design led by
+                                touch optimized elements.</p>
                         </div>
                     </div>
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
                         <div class="box p-4 w-full">
-                            <img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-theme.svg" width="30" height="25" alt="components icon" class="block mb-3" />
+                            <img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-theme.svg"
+                                width="30" height="25" alt="components icon" class="block mb-3" />
                             <div class="font-semibold mb-3 text-lg">Themes</div>
-                            <p class="m-0 text-secondary font-medium">Built on a design-agnostic api, choose from a vast amount of themes such as Material, Bootstrap, custom or develop your own.</p>
+                            <p class="m-0 text-secondary font-medium">Built on a design-agnostic api, choose from a vast
+                                amount of themes such as Material, Bootstrap, custom or develop your own.</p>
                         </div>
                     </div>
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
                         <div class="box p-4 w-full">
-                            <img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-ts.svg" width="30" height="25" alt="components icon" class="block mb-3" />
+                            <img src="https://primefaces.org/cdn/primeng/images/landing/features/icon-ts.svg" width="30"
+                                height="25" alt="components icon" class="block mb-3" />
                             <div class="font-semibold mb-3 text-lg">Typescript</div>
-                            <p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
+                            <p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and
+                                tooling assistance.</p>
                         </div>
                     </div>
                 </div>
@@ -189,91 +217,98 @@ <h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Sui
     <section class="landing-users py-8 px-3 lg:px-8">
         <div class="section-header">Who Uses</div>
         <p class="section-detail">
-            PrimeTek libraries have reached over<span class="font-semibold animated-text relative white-space-nowrap"><span>150 Million Downloads</span></span>on npm! Join the PrimeLand community and experience the difference yourself.
+            PrimeTek libraries have reached over<span
+                class="font-semibold animated-text relative white-space-nowrap"><span>150 Million
+                    Downloads</span></span>on npm! Join the PrimeLand community and experience the difference yourself.
         </p>
         <div class="logo-section relative w-full md:w-8 mt-6 users-container">
-            <div class="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2" style="background: linear-gradient(to right, var(--home-bg), transparent)"></div>
+            <div class="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2"
+                style="background: linear-gradient(to right, var(--home-bg), transparent)"></div>
             <div class="marquee-wrapper overflow-hidden flex">
                 <div class="marquee">
                     <div class="w-full" *ngFor="let user of usersData.slice(0, 6)">
-                        <img src="https://primefaces.org/cdn/primeng/images/landing/whouses/{{ user.name }}-{{ isDarkMode ? 'light' : 'dark' }}.svg" [width]="user.width" [height]="user.height" [alt]="user.name" />
+                        <img src="https://primefaces.org/cdn/primeng/images/landing/whouses/{{ user.name }}-{{ isDarkMode ? 'light' : 'dark' }}.svg"
+                            [width]="user.width" [height]="user.height" [alt]="user.name" />
                     </div>
                 </div>
                 <div class="marquee">
                     <div class="w-full" *ngFor="let user of usersData.slice(0, 6)">
-                        <img src="https://primefaces.org/cdn/primeng/images/landing/whouses/{{ user.name }}-{{ isDarkMode ? 'light' : 'dark' }}.svg" [width]="user.width" [height]="user.height" [alt]="user.name" />
+                        <img src="https://primefaces.org/cdn/primeng/images/landing/whouses/{{ user.name }}-{{ isDarkMode ? 'light' : 'dark' }}.svg"
+                            [width]="user.width" [height]="user.height" [alt]="user.name" />
                     </div>
                 </div>
                 <div class="marquee">
                     <div class="w-full" *ngFor="let user of usersData.slice(0, 6)">
-                        <img src="https://primefaces.org/cdn/primeng/images/landing/whouses/{{ user.name }}-{{ isDarkMode ? 'light' : 'dark' }}.svg" [width]="user.width" [height]="user.height" [alt]="user.name" />
+                        <img src="https://primefaces.org/cdn/primeng/images/landing/whouses/{{ user.name }}-{{ isDarkMode ? 'light' : 'dark' }}.svg"
+                            [width]="user.width" [height]="user.height" [alt]="user.name" />
                     </div>
                 </div>
             </div>
-            <div class="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2" style="background: linear-gradient(to left, var(--home-bg), transparent)"></div>
+            <div class="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2"
+                style="background: linear-gradient(to left, var(--home-bg), transparent)"></div>
         </div>
         <div class="logo-section relative w-full md:w-8 mt-2 users-container">
-            <div class="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2" style="background: linear-gradient(to right, var(--home-bg), transparent)"></div>
+            <div class="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2"
+                style="background: linear-gradient(to right, var(--home-bg), transparent)"></div>
             <div class="marquee-wrapper overflow-hidden flex">
                 <div class="marquee marquee-reverse">
                     <div class="w-full" *ngFor="let user of usersData.slice(6)">
-                        <img src="https://primefaces.org/cdn/primeng/images/landing/whouses/{{ user.name }}-{{ isDarkMode ? 'light' : 'dark' }}.svg" [width]="user.width" [height]="user.height" [alt]="user.name" />
+                        <img src="https://primefaces.org/cdn/primeng/images/landing/whouses/{{ user.name }}-{{ isDarkMode ? 'light' : 'dark' }}.svg"
+                            [width]="user.width" [height]="user.height" [alt]="user.name" />
                     </div>
                 </div>
                 <div class="marquee marquee-reverse">
                     <div class="w-full" *ngFor="let user of usersData.slice(6)">
-                        <img src="https://primefaces.org/cdn/primeng/images/landing/whouses/{{ user.name }}-{{ isDarkMode ? 'light' : 'dark' }}.svg" [width]="user.width" [height]="user.height" [alt]="user.name" />
+                        <img src="https://primefaces.org/cdn/primeng/images/landing/whouses/{{ user.name }}-{{ isDarkMode ? 'light' : 'dark' }}.svg"
+                            [width]="user.width" [height]="user.height" [alt]="user.name" />
                     </div>
                 </div>
                 <div class="marquee marquee-reverse">
                     <div class="w-full" *ngFor="let user of usersData.slice(6)">
-                        <img src="https://primefaces.org/cdn/primeng/images/landing/whouses/{{ user.name }}-{{ isDarkMode ? 'light' : 'dark' }}.svg" [width]="user.width" [height]="user.height" [alt]="user.name" />
+                        <img src="https://primefaces.org/cdn/primeng/images/landing/whouses/{{ user.name }}-{{ isDarkMode ? 'light' : 'dark' }}.svg"
+                            [width]="user.width" [height]="user.height" [alt]="user.name" />
                     </div>
                 </div>
             </div>
-            <div class="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2" style="background: linear-gradient(to left, var(--home-bg), transparent)"></div>
+            <div class="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2"
+                style="background: linear-gradient(to left, var(--home-bg), transparent)"></div>
         </div>
     </section>
 
     <section class="landing-themes py-8">
         <div class="section-header">Themes</div>
-        <p class="section-detail">Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as Material, Bootstrap, Tailwind, PrimeOne or develop your own.</p>
+        <p class="section-detail">Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such
+            as Material, Bootstrap, Tailwind, PrimeOne or develop your own.</p>
         <div class="flex flex-wrap justify-content-center">
-            <button type="button" class="font-medium linkbox mr-3 mt-4" [ngClass]="{ active: tableTheme.startsWith('lara') }" (click)="changeTableTheme(isDarkMode ? 'lara-dark-blue' : 'lara-light-blue')">PrimeOne</button>
-            <button type="button" class="font-medium linkbox mr-3 mt-4" [ngClass]="{ active: tableTheme.startsWith('md') }" (click)="changeTableTheme(isDarkMode ? 'md-dark-indigo' : 'md-light-indigo')">Material</button>
-            <button type="button" class="font-medium linkbox mr-3 mt-4" [ngClass]="{ active: tableTheme.startsWith('bootstrap') }" (click)="changeTableTheme(isDarkMode ? 'bootstrap4-dark-blue' : 'bootstrap4-light-blue')">Bootstrap</button>
-            <a type="button" class="font-medium p-link linkbox mt-4" href="https://designer.primeng.org" target="_blank">more...</a>
+            <button type="button" class="font-medium linkbox mr-3 mt-4"
+                [ngClass]="{ active: tableTheme.startsWith('lara') }"
+                (click)="changeTableTheme(isDarkMode ? 'lara-dark-blue' : 'lara-light-blue')">PrimeOne</button>
+            <button type="button" class="font-medium linkbox mr-3 mt-4"
+                [ngClass]="{ active: tableTheme.startsWith('md') }"
+                (click)="changeTableTheme(isDarkMode ? 'md-dark-indigo' : 'md-light-indigo')">Material</button>
+            <button type="button" class="font-medium linkbox mr-3 mt-4"
+                [ngClass]="{ active: tableTheme.startsWith('bootstrap') }"
+                (click)="changeTableTheme(isDarkMode ? 'bootstrap4-dark-blue' : 'bootstrap4-light-blue')">Bootstrap</button>
+            <a type="button" class="font-medium p-link linkbox mt-4" href="https://designer.primeng.org"
+                target="_blank">more...</a>
         </div>
-        <div
-            class="themes-main flex mt-7 justify-content-center px-5 lg:px-8"
-            [style]="{ 'background-size': 'cover' }"
-            [ngStyle]="{ 'background-image': isDarkMode ? 'url(https://primefaces.org/cdn/primeng/images/landing/wave-dark-alt.svg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/wave-light-alt.svg)' }"
-        >
+        <div class="themes-main flex mt-7 justify-content-center px-5 lg:px-8" [style]="{ 'background-size': 'cover' }"
+            [ngStyle]="{ 'background-image': isDarkMode ? 'url(https://primefaces.org/cdn/primeng/images/landing/wave-dark-alt.svg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/wave-light-alt.svg)' }">
             <div class="box overflow-hidden z-1 p-5 table-container">
-                <p-table
-                    #dt
-                    [value]="customers"
-                    [(selection)]="selectedCustomers"
-                    dataKey="id"
-                    styleClass="p-datatable-customers"
-                    [rowHover]="true"
-                    [rows]="5"
-                    [showCurrentPageReport]="true"
-                    [rowsPerPageOptions]="[5, 10, 15]"
-                    [loading]="loading"
-                    responsiveLayout="scroll"
-                    [paginator]="true"
+                <p-table #dt [value]="customers" [(selection)]="selectedCustomers" dataKey="id"
+                    styleClass="p-datatable-customers" [rowHover]="true" [rows]="5" [showCurrentPageReport]="true"
+                    [rowsPerPageOptions]="[5, 10, 15]" [loading]="loading" responsiveLayout="scroll" [paginator]="true"
                     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                     [globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
-                    paginatorDropdownAppendTo="body"
-                    [totalRecords]="5"
-                >
+                    paginatorDropdownAppendTo="body" [totalRecords]="5">
                     <ng-template pTemplate="caption">
                         <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
                             <h5 class="m-0">Customers</h5>
                             <span class="block mt-2 md:mt-0 p-input-icon-left">
                                 <i class="pi pi-search"></i>
-                                <input class="p-inputtext" type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Search..." />
+                                <input class="p-inputtext" type="text"
+                                    (input)="dt.filterGlobal($event.target.value, 'contains')"
+                                    placeholder="Search..." />
                             </span>
                         </div>
                     </ng-template>
@@ -338,12 +373,16 @@ <h5 class="m-0">Customers</h5>
                             </td>
                             <td style="width: 14%; min-width: 14rem">
                                 <span class="p-column-title">Country</span>
-                                <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30" height="20" alt="country flag" />
+                                <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png"
+                                    [class]="'flag flag-' + customer.country.code" width="30" height="20"
+                                    alt="country flag" />
                                 <span class="ml-2 image-text">{{ customer.country.name }}</span>
                             </td>
                             <td style="width: 14%; min-width: 14rem">
                                 <span class="p-column-title">Representative</span>
-                                <img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" height="32" style="vertical-align: middle" alt="representative" />
+                                <img [alt]="customer.representative.name"
+                                    src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}"
+                                    width="32" height="32" style="vertical-align: middle" alt="representative" />
                                 <span class="ml-2 image-text">{{ customer.representative.name }}</span>
                             </td>
                             <td style="width: 14%; min-width: 8rem">
@@ -359,10 +398,12 @@ <h5 class="m-0">Customers</h5>
                             </td>
                             <td style="width: 14%; min-width: 6rem">
                                 <span class="p-column-title">Activity</span>
-                                <p-progressBar [value]="customer.activity" [showValue]="false" [style]="{ height: '6px' }"></p-progressBar>
+                                <p-progressBar [value]="customer.activity" [showValue]="false"
+                                    [style]="{ height: '6px' }"></p-progressBar>
                             </td>
                             <td style="text-align: center">
-                                <button pButton type="button" class="p-button-text p-button-icon-only" icon="pi pi-cog"></button>
+                                <button pButton type="button" class="p-button-text p-button-icon-only"
+                                    icon="pi pi-cog"></button>
                             </td>
                         </tr>
                     </ng-template>
@@ -380,7 +421,8 @@ <h5 class="m-0">Customers</h5>
         <div class="section-header">PrimeBlocks</div>
         <p class="section-detail">400+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
         <div class="flex justify-content-center mt-4">
-            <a href="https://blocks.primeng.org" target="_blank" class="font-semibold p-3 border-round flex align-items-center linkbox active" style="z-index: 99">
+            <a href="https://blocks.primeng.org" target="_blank"
+                class="font-semibold p-3 border-round flex align-items-center linkbox active" style="z-index: 99">
                 <span>Explore All</span>
                 <i class="pi pi-arrow-right ml-2"></i>
             </a>
@@ -390,7 +432,8 @@ <h5 class="m-0">Customers</h5>
                 <div class="prime-block flex align-self-stretch p-1">
                     <div class="block-sidebar w-1 p-3">
                         <div class="logo">
-                            <img src="https://primefaces.org/cdn/primeng/images/landing/blocks/logo-1.svg" alt="block logo" width="20" height="18" />
+                            <img src="https://primefaces.org/cdn/primeng/images/landing/blocks/logo-1.svg"
+                                alt="block logo" width="20" height="18" />
                         </div>
                         <div class="sidebar-menu mt-5">
                             <div class="bar w-8 my-3"></div>
@@ -483,7 +526,9 @@ <h5 class="m-0">Customers</h5>
                 <div class="prime-block p-1 flex align-self-stretch flex-column">
                     <div class="block-header py-3 px-4 flex justify-content-between align-items-center">
                         <div class="logo pr-5">
-                            <img width="20" height="18" src="https://primefaces.org/cdn/primeng/images/landing/blocks/logo-1.svg" alt="block logo" />
+                            <img width="20" height="18"
+                                src="https://primefaces.org/cdn/primeng/images/landing/blocks/logo-1.svg"
+                                alt="block logo" />
                         </div>
                         <div class="flex-auto sidebar-menu flex">
                             <div class="bar w-2rem mx-2"></div>
@@ -525,7 +570,9 @@ <h5 class="m-0">Customers</h5>
                 <div class="prime-block flex align-self-stretch p-1">
                     <div class="block-sidebar p-3">
                         <div class="logo">
-                            <img width="14" height="16" src="https://primefaces.org/cdn/primeng/images/landing/blocks/logo-2.svg" alt="block logo" />
+                            <img width="14" height="16"
+                                src="https://primefaces.org/cdn/primeng/images/landing/blocks/logo-2.svg"
+                                alt="block logo" />
                         </div>
                         <div class="sidebar-menu mt-5">
                             <div class="circle my-3"></div>
@@ -554,7 +601,8 @@ <h5 class="m-0">Customers</h5>
                                     </div>
                                     <div class="bar bar-button w-4rem mt-4"></div>
                                 </div>
-                                <div class="block-item block-item-active animation-3 mx-3 w-3 flex justify-content-between flex-column">
+                                <div
+                                    class="block-item block-item-active animation-3 mx-3 w-3 flex justify-content-between flex-column">
                                     <div class="bar w-full"></div>
                                     <div class="flex align-items-center mt-3">
                                         <div class="circle circle-small circle-highlight mr-2"></div>
@@ -591,7 +639,8 @@ <h5 class="m-0">Customers</h5>
                 <div class="prime-block flex align-self-stretch p-1">
                     <div class="block-sidebar w-1 p-3">
                         <div class="logo">
-                            <img src="https://primefaces.org/cdn/primeng/images/landing/blocks/logo-1.svg" width="20" height="18" alt="block logo" />
+                            <img src="https://primefaces.org/cdn/primeng/images/landing/blocks/logo-1.svg" width="20"
+                                height="18" alt="block logo" />
                         </div>
                         <div class="sidebar-menu mt-5">
                             <div class="bar w-8 my-3"></div>
@@ -655,7 +704,8 @@ <h5 class="m-0">Customers</h5>
                 <div class="prime-block flex align-self-stretch p-1">
                     <div class="block-sidebar p-3">
                         <div class="logo">
-                            <img src="https://primefaces.org/cdn/primeng/images/landing/blocks/logo-2.svg" width="14" height="16" alt="block logo" />
+                            <img src="https://primefaces.org/cdn/primeng/images/landing/blocks/logo-2.svg" width="14"
+                                height="16" alt="block logo" />
                         </div>
                         <div class="sidebar-menu mt-5">
                             <div class="circle my-3"></div>
@@ -718,7 +768,8 @@ <h5 class="m-0">Customers</h5>
                 <div class="prime-block p-1 flex align-self-stretch flex-column">
                     <div class="block-header py-3 px-4 flex justify-content-between align-items-center">
                         <div class="logo pr-5">
-                            <img src="https://primefaces.org/cdn/primeng/images/landing/blocks/logo-1.svg" width="20" height="18" alt="block logo" />
+                            <img src="https://primefaces.org/cdn/primeng/images/landing/blocks/logo-1.svg" width="20"
+                                height="18" alt="block logo" />
                         </div>
                         <div class="flex-auto sidebar-menu flex">
                             <div class="bar w-2rem mx-2"></div>
@@ -731,9 +782,11 @@ <h5 class="m-0">Customers</h5>
                     </div>
                     <div class="block-content flex-1 p-4 flex flex-column">
                         <div class="block-main h-full flex justify-content-center align-items-center flex-column">
-                            <div class="block-item block-item-active animation-2 mx-3 w-8rem text-center flex flex-column align-items-center overflow-visible">
+                            <div
+                                class="block-item block-item-active animation-2 mx-3 w-8rem text-center flex flex-column align-items-center overflow-visible">
                                 <div class="-mt-4">
-                                    <img src="https://primefaces.org/cdn/primeng/images/landing/blocks/question.svg" width="24" height="24" alt="question mark" />
+                                    <img src="https://primefaces.org/cdn/primeng/images/landing/blocks/question.svg"
+                                        width="24" height="24" alt="question mark" />
                                 </div>
                                 <div class="bar w-2rem mt-2"></div>
                                 <div class="bar w-6rem mt-2"></div>
@@ -752,65 +805,59 @@ <h5 class="m-0">Customers</h5>
 
     <section class="landing-templates theme-dark py-8">
         <div class="section-header relative z-3">Templates</div>
-        <p class="section-detail relative z-3">Professionally designed highly customizable application templates to get started in style.</p>
+        <p class="section-detail relative z-3">Professionally designed highly customizable application templates to get
+            started in style.</p>
         <div class="flex justify-content-center mt-4 relative z-3">
-            <a href="https://www.primefaces.org/store" class="font-semibold p-3 border-round flex align-items-center linkbox active" style="z-index: 99">
+            <a href="https://www.primefaces.org/store"
+                class="font-semibold p-3 border-round flex align-items-center linkbox active" style="z-index: 99">
                 <span>Explore All</span>
                 <i class="pi pi-arrow-right ml-2"></i>
             </a>
         </div>
         <section class="templates templates-animation flex justify-content-center align-items-center flex-column mt-7">
             <div class="flex md:flex-row flex-column gap-4 lg:gap-0">
-                <div
-                    class="template-block block-1 mr-2 lg:mb-0 flex justify-content-center align-items-center"
-                    [ngStyle]="{ 'background-image': config.dark ? 'url(https://primefaces.org/cdn/primeng/images/landing/templates/verona-dark-v17.jpg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/templates/verona-light-v17.jpg)' }"
-                    [style]="{ 'background-size': 'cover' }"
-                >
-                    <a class="templates-btn" href="https://www.primefaces.org/verona-ng" target="_blank">Verona Preview</a>
+                <div class="template-block block-1 mr-2 lg:mb-0 flex justify-content-center align-items-center"
+                    [ngStyle]="{ 'background-image': isDarkMode ? 'url(https://primefaces.org/cdn/primeng/images/landing/templates/verona-dark-v17.jpg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/templates/verona-light-v17.jpg)' }"
+                    [style]="{ 'background-size': 'cover' }">
+                    <a class="templates-btn" href="https://www.primefaces.org/verona-ng" target="_blank">Verona
+                        Preview</a>
                 </div>
-                <div
-                    class="template-block block-2 ml-2 flex justify-content-center align-items-center"
-                    [ngStyle]="{ 'background-image': config.dark ? 'url(https://primefaces.org/cdn/primeng/images/landing/templates/freya-dark-v17.jpg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/templates/freya-light-v17.jpg)' }"
-                    [style]="{ 'background-size': 'cover' }"
-                >
-                    <a class="templates-btn" href="https://www.primefaces.org/freya-ng/" target="_blank">Freya Preview</a>
+                <div class="template-block block-2 ml-2 flex justify-content-center align-items-center"
+                    [ngStyle]="{ 'background-image': isDarkMode ? 'url(https://primefaces.org/cdn/primeng/images/landing/templates/freya-dark-v17.jpg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/templates/freya-light-v17.jpg)' }"
+                    [style]="{ 'background-size': 'cover' }">
+                    <a class="templates-btn" href="https://www.primefaces.org/freya-ng/" target="_blank">Freya
+                        Preview</a>
                 </div>
             </div>
             <div class="flex my-4 md:flex-row flex-column gap-4 lg:gap-0 align-items-center">
-                <div
-                    class="template-block block-3 mr-2 lg:mb-0 flex justify-content-center align-items-center"
-                    [ngStyle]="{ 'background-image': config.dark ? 'url(https://primefaces.org/cdn/primeng/images/landing/templates/atlantis-dark-v17.jpg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/templates/atlantis-light-v17.jpg)' }"
-                    [style]="{ 'background-size': 'cover' }"
-                >
-                    <a class="templates-btn" href="https://www.primefaces.org/atlantis-ng/" target="_blank">Atlantis Preview</a>
+                <div class="template-block block-3 mr-2 lg:mb-0 flex justify-content-center align-items-center"
+                    [ngStyle]="{ 'background-image': isDarkMode ? 'url(https://primefaces.org/cdn/primeng/images/landing/templates/atlantis-dark-v17.jpg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/templates/atlantis-light-v17.jpg)' }"
+                    [style]="{ 'background-size': 'cover' }">
+                    <a class="templates-btn" href="https://www.primefaces.org/atlantis-ng/" target="_blank">Atlantis
+                        Preview</a>
                 </div>
-                <img
-                    class="template-block block-middle border-none box-shadow-none mr-2 hidden lg:flex justify-content-center align-items-center flex-column"
+                <img class="template-block block-middle border-none box-shadow-none mr-2 hidden lg:flex justify-content-center align-items-center flex-column"
                     [style]="{ height: '100%' }"
-                    [src]="config.dark ? 'https://primefaces.org/cdn/primeng/images/landing/templates/templates-text-dark-v17.png' : 'https://primefaces.org/cdn/primeng/images/landing/templates/templates-text-light-v17.png'"
-                />
-                <div
-                    class="template-block block-5 mr-2 flex justify-content-center align-items-center"
-                    [ngStyle]="{ 'background-image': config.dark ? 'url(https://primefaces.org/cdn/primeng/images/landing/templates/apollo-dark-v17.jpg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/templates/apollo-light-v17.jpg)' }"
-                    [style]="{ 'background-size': 'cover' }"
-                >
-                    <a class="templates-btn" href="https://www.primefaces.org/apollo-ng/" target="_blank">Apollo Preview</a>
+                    [src]="isDarkMode ? 'https://primefaces.org/cdn/primeng/images/landing/templates/templates-text-dark-v17.png' : 'https://primefaces.org/cdn/primeng/images/landing/templates/templates-text-light-v17.png'" />
+                <div class="template-block block-5 mr-2 flex justify-content-center align-items-center"
+                    [ngStyle]="{ 'background-image': isDarkMode ? 'url(https://primefaces.org/cdn/primeng/images/landing/templates/apollo-dark-v17.jpg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/templates/apollo-light-v17.jpg)' }"
+                    [style]="{ 'background-size': 'cover' }">
+                    <a class="templates-btn" href="https://www.primefaces.org/apollo-ng/" target="_blank">Apollo
+                        Preview</a>
                 </div>
             </div>
             <div class="flex md:flex-row flex-column gap-4 lg:gap-0">
-                <div
-                    class="template-block block-5 mr-2 lg:mb-0 flex justify-content-center align-items-center"
-                    [ngStyle]="{ 'background-image': config.dark ? 'url(https://primefaces.org/cdn/primeng/images/landing/templates/diamond-dark-v17.jpg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/templates/diamond-light-v17.jpg)' }"
-                    [style]="{ 'background-size': 'cover' }"
-                >
-                    <a class="templates-btn" href="https://www.primefaces.org/diamond-ng/" target="_blank">Diamond Preview</a>
+                <div class="template-block block-5 mr-2 lg:mb-0 flex justify-content-center align-items-center"
+                    [ngStyle]="{ 'background-image': isDarkMode ? 'url(https://primefaces.org/cdn/primeng/images/landing/templates/diamond-dark-v17.jpg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/templates/diamond-light-v17.jpg)' }"
+                    [style]="{ 'background-size': 'cover' }">
+                    <a class="templates-btn" href="https://www.primefaces.org/diamond-ng/" target="_blank">Diamond
+                        Preview</a>
                 </div>
-                <div
-                    class="template-block block-5 mr-2 flex justify-content-center align-items-center"
-                    [ngStyle]="{ 'background-image': config.dark ? 'url(https://primefaces.org/cdn/primeng/images/landing/templates/ultima-dark-v17.jpg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/templates/ultima-light-v17.jpg)' }"
-                    [style]="{ 'background-size': 'cover' }"
-                >
-                    <a class="templates-btn" href="https://www.primefaces.org/ultima-ng/" target="_blank">Ultima Preview</a>
+                <div class="template-block block-5 mr-2 flex justify-content-center align-items-center"
+                    [ngStyle]="{ 'background-image': isDarkMode ? 'url(https://primefaces.org/cdn/primeng/images/landing/templates/ultima-dark-v17.jpg)' : 'url(https://primefaces.org/cdn/primeng/images/landing/templates/ultima-light-v17.jpg)' }"
+                    [style]="{ 'background-size': 'cover' }">
+                    <a class="templates-btn" href="https://www.primefaces.org/ultima-ng/" target="_blank">Ultima
+                        Preview</a>
                 </div>
             </div>
             <div class="lines">
@@ -882,11 +929,15 @@ <h5 class="m-0">Customers</h5>
                         <li class="font-bold mb-5">General</li>
                         <li class="mb-4">
                             <a [routerLink]="['installation']">
-                                <a class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get Started</a>
+                                <a
+                                    class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get
+                                    Started</a>
                             </a>
                         </li>
                         <li class="mb-4">
-                            <a href="https://github.com/primefaces/primeng-examples" target="_blank" rel="noopener noreferrer" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Examples</a>
+                            <a href="https://github.com/primefaces/primeng-examples" target="_blank"
+                                rel="noopener noreferrer"
+                                class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Examples</a>
                         </li>
                     </ul>
                 </div>
@@ -894,14 +945,19 @@ <h5 class="m-0">Customers</h5>
                     <ul class="list-none p-0 m-0">
                         <li class="font-bold mb-5">Support</li>
                         <li class="mb-4">
-                            <a href="https://github.com/orgs/primefaces/discussions" target="_blank" rel="noopener noreferrer" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Forum</a>
+                            <a href="https://github.com/orgs/primefaces/discussions" target="_blank"
+                                rel="noopener noreferrer"
+                                class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Forum</a>
                         </li>
                         <li class="mb-4">
-                            <a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Discord</a>
+                            <a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer"
+                                class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Discord</a>
                         </li>
                         <li class="mb-4">
                             <a [routerLink]="['support']">
-                                <a class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PRO Support</a>
+                                <a
+                                    class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PRO
+                                    Support</a>
                             </a>
                         </li>
                     </ul>
@@ -910,25 +966,35 @@ <h5 class="m-0">Customers</h5>
                     <ul class="list-none p-0 m-0">
                         <li class="font-bold mt-5 lg:mt-0 mb-5">Resources</li>
                         <li class="mb-4">
-                            <a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" target="_blank" rel="noopener noreferrer" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeTV</a>
+                            <a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" target="_blank"
+                                rel="noopener noreferrer"
+                                class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeTV</a>
                         </li>
                         <li class="mb-4">
-                            <a href="https://www.primefaces.org/store/" target="_blank" rel="noopener noreferrer" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Store</a>
+                            <a href="https://www.primefaces.org/store/" target="_blank" rel="noopener noreferrer"
+                                class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Store</a>
                         </li>
                         <li class="mb-4">
-                            <a href="https://github.com/primefaces/primeng" target="_blank" rel="noopener noreferrer" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Source Code</a>
+                            <a href="https://github.com/primefaces/primeng" target="_blank" rel="noopener noreferrer"
+                                class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Source
+                                Code</a>
                         </li>
                         <li class="mb-4">
-                            <a href="https://twitter.com/prime_ng" target="_blank" rel="noopener noreferrer" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Twitter</a>
+                            <a href="https://twitter.com/prime_ng" target="_blank" rel="noopener noreferrer"
+                                class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Twitter</a>
                         </li>
                         <li class="mb-4">
-                            <a href="https://www.primefaces.org/newsletter" target="_blank" rel="noopener noreferrer" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Newsletter</a>
+                            <a href="https://www.primefaces.org/newsletter" target="_blank" rel="noopener noreferrer"
+                                class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Newsletter</a>
                         </li>
                         <li class="mb-4">
-                            <a href="https://gear.primefaces.org/" target="_blank" rel="noopener noreferrer" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeGear</a>
+                            <a href="https://gear.primefaces.org/" target="_blank" rel="noopener noreferrer"
+                                class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeGear</a>
                         </li>
                         <li class="mb-4">
-                            <a href="mailto:contact@primetek.com.tr" target="_blank" rel="noopener noreferrer" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Contact Us</a>
+                            <a href="mailto:contact@primetek.com.tr" target="_blank" rel="noopener noreferrer"
+                                class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Contact
+                                Us</a>
                         </li>
                     </ul>
                 </div>
@@ -937,15 +1003,19 @@ <h5 class="m-0">Customers</h5>
                         <li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
                         <li class="mb-4">
                             <a [routerLink]="['theming']">
-                                <a class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</a>
+                                <a class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150"
+                                    class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</a>
                             </a>
                         </li>
                         <li class="mb-4">
-                            <a href="https://www.primefaces.org/designer/primeng" target="_blank" rel="noopener noreferrer" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a>
+                            <a href="https://www.primefaces.org/designer/primeng" target="_blank"
+                                rel="noopener noreferrer"
+                                class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a>
                         </li>
                         <li class="mb-4">
                             <a [routerLink]="['colors']">
-                                <a class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</a>
+                                <a class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150"
+                                    class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</a>
                             </a>
                         </li>
                     </ul>
@@ -966,7 +1036,8 @@ <h5 class="m-0">Customers</h5>
                         <path
                             d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z"
                             fill="var(--primary-color)" />
-                        <mask id="mask0_1_36" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
+                        <mask id="mask0_1_36" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0"
+                            width="31" height="33">
                             <path
                                 d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z"
                                 fill="var(--primary-color-text)" />
@@ -985,32 +1056,44 @@ <h5 class="m-0">Customers</h5>
                         <path fill-rule="evenodd" clip-rule="evenodd"
                             d="M11.3853 16.9726L12.6739 15.0309L13.4793 15.5163H16.7008L17.5061 15.0309L18.7947 16.9726V24.254L17.8283 25.7103L16.7008 26.843H13.4793L12.3518 25.7103L11.3853 24.254V16.9726Z"
                             fill="var(--primary-color-text)" />
-                        <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z" fill="var(--primary-color-text)" />
-                        <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z" fill="var(--primary-color-text)" />
+                        <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z"
+                            fill="var(--primary-color-text)" />
+                        <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z"
+                            fill="var(--primary-color-text)" />
                         <path fill-rule="evenodd" clip-rule="evenodd"
                             d="M13.0167 5.68861L11.7244 8.7568L13.8244 14.8932H14.7936V5.68861H13.0167ZM15.4397 5.68861V14.8932H16.5706L18.5091 8.7568L17.2167 5.68861H15.4397Z"
                             fill="var(--primary-color-text)" />
-                        <path d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z" fill="var(--primary-color-text)" />
-                        <path d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z" fill="var(--primary-color-text)" />
-                        <path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z" fill="var(--primary-color-text)" />
-                        <path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z" fill="var(--primary-color-text)" />
+                        <path
+                            d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z"
+                            fill="var(--primary-color-text)" />
+                        <path
+                            d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z"
+                            fill="var(--primary-color-text)" />
+                        <path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z"
+                            fill="var(--primary-color-text)" />
+                        <path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z"
+                            fill="var(--primary-color-text)" />
                     </svg>
                 </span>
                 <div class="flex align-items-center gap-2">
-                    <a href="https://twitter.com/prime_ng" target="_blank" rel="noopener noreferrer" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
+                    <a href="https://twitter.com/prime_ng" target="_blank" rel="noopener noreferrer"
+                        class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
                         <i class="pi pi-twitter"></i>
                     </a>
-                    <a href="https://github.com/primefaces/primeng" target="_blank" rel="noopener noreferrer" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
+                    <a href="https://github.com/primefaces/primeng" target="_blank" rel="noopener noreferrer"
+                        class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
                         <i class="pi pi-github"></i>
                     </a>
-                    <a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
+                    <a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer"
+                        class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
                         <i class="pi pi-discord"></i>
                     </a>
-                    <a href="https://github.com/orgs/primefaces/discussions" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
+                    <a href="https://github.com/orgs/primefaces/discussions"
+                        class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
                         <i class="pi pi-comments"></i>
                     </a>
                 </div>
             </div>
         </div>
     </section>
-</div>
+</div>
\ No newline at end of file