feat: update UI text and structure for improved user experience and localization

Web/public/scss/pages/_frontend.scss

@@ -5,6 +5,8 @@
         width: 100%;
         background-color: var(--mat-sys-background) !important;
         z-index: 9;
+     -webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.2); 
+box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.2);
     }
 }
 
@@ -17,9 +19,7 @@
 }
 
 .tab-header {
-
     .profileTabs {
-
         .mat-mdc-tab {
             padding: 30px 16px;
             height: auto;
@@ -34,7 +34,6 @@
             border-top-width: 0;
         }
     }
-
 }
 
 .home-page .expansion-panel .mat-expansion-panel-body {
@@ -65,7 +64,6 @@
     }
 }
 
-
 .spacing-top-bottom {
     padding: 80px 0;
 }
@@ -140,4 +138,4 @@
     .footer-content .left-side-content {
         padding: 30px !important;
     }
-} 
+}

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

@@ -4,71 +4,40 @@
       <div class="p-24 h-100">
         <app-branding></app-branding>
 
-        <div
+        <div class="align-items-center justify-content-center img-height d-none d-lg-flex">
-          class="align-items-center justify-content-center img-height d-none d-lg-flex"
+          <img src="/assets/images/backgrounds/login-bg.svg" alt="login" style="max-width: 500px" />
-        >
-          <img
-            src="/assets/images/backgrounds/login-bg.svg"
-            alt="login"
-            style="max-width: 500px"
-          />
         </div>
       </div>
     </div>
     <div class="col-lg-5 col-xl-4 p-0">
-      <div
+      <div class="p-32 d-flex align-items-start align-items-lg-center justify-content-center h-100">
-        class="p-32 d-flex align-items-start align-items-lg-center justify-content-center h-100"
-      >
         <div class="row justify-content-center w-100">
           <div class="col-lg-9 max-width-form">
-            <h4 class="f-w-700 f-s-24 m-0">Welcome to Modernize</h4>
+            <h4 class="f-w-700 f-s-24 m-0">Vitajte!</h4>
-            <span class="f-s-14 d-block f-s-14 m-t-8"
+            <span class="f-s-14 d-block f-s-14 m-t-8">Váš uživateľský prístup</span>
-              >Your Admin Dashboard</span
-            >
 
-            <div class="row m-t-24">
+            <div class="row m-t-24 align-items-center">
-              <div class="col-12 col-sm-6">
+              <button mat-stroked-button class="w-100">
-                <button mat-stroked-button class="w-100">
+                <div class="d-flex align-items-center">
+                  <img src="/assets/images/svgs/google-icon.svg" alt="google" width="16" class="m-r-8" />
+                  Prihlásiť sa pomocou Google
+                </div>
+              </button>
+              <!-- <div class="col-12 col-sm-6">
+                <button mat-stroked-button class="w-100 d-flex align-items-center">
                   <div class="d-flex align-items-center">
-                    <img
+                    <img src="/assets/images/svgs/facebook-icon.svg" alt="facebook" width="40" class="m-r-4" />
-                      src="/assets/images/svgs/google-icon.svg"
-                      alt="google"
-                      width="16"
-                      class="m-r-8"
-                    />
-                    Sign in with Google
-                  </div>
-                </button>
-              </div>
-              <div class="col-12 col-sm-6">
-                <button
-                  mat-stroked-button
-                  class="w-100 d-flex align-items-center"
-                >
-                  <div class="d-flex align-items-center">
-                    <img
-                      src="/assets/images/svgs/facebook-icon.svg"
-                      alt="facebook"
-                      width="40"
-                      class="m-r-4"
-                    />
                     Sign in with FB
                   </div>
                 </button>
-              </div>
+              </div> -->
             </div>
 
-            <div class="or-border m-t-30">or sign in with</div>
+            <!-- <div class="or-border m-t-30">or sign in with</div>
 
             <form class="m-t-30" [formGroup]="form" (ngSubmit)="submit()">
-              <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+              <mat-label class="f-s-14 f-w-600 m-b-12 d-block">Username</mat-label>
-                >Username</mat-label
+              <mat-form-field appearance="outline" class="w-100" color="primary">
-              >
-              <mat-form-field
-                appearance="outline"
-                class="w-100"
-                color="primary"
-              >
                 <input matInput formControlName="uname" />
                 @if(f['uname'].touched && f['uname'].invalid) {
                 <mat-hint class="m-b-16 error-msg">
@@ -81,15 +50,9 @@
                 }
               </mat-form-field>
 
-              <!-- password -->
+              <!-- password 
-              <mat-label class="f-s-14 f-w-600 m-b-12 d-block"
+              <mat-label class="f-s-14 f-w-600 m-b-12 d-block">Password</mat-label>
-                >Password</mat-label
+              <mat-form-field appearance="outline" class="w-100" color="primary">
-              >
-              <mat-form-field
-                appearance="outline"
-                class="w-100"
-                color="primary"
-              >
                 <input matInput type="password" formControlName="password" />
                 @if(f['password'].touched && f['password'].invalid) {
                 <mat-hint class="m-b-16 error-msg">
@@ -102,37 +65,23 @@
               </mat-form-field>
 
               <div class="d-flex align-items-center m-b-12">
-                <mat-checkbox color="primary"
+                <mat-checkbox color="primary">Remember this Device</mat-checkbox>
-                  >Remember this Device</mat-checkbox
+                <a [routerLink]="['/authentication/side-forgot-pwd']"
-                >
+                  class="text-primary f-w-600 text-decoration-none m-l-auto f-s-14">Forgot Password ?</a>
-                <a
-                  [routerLink]="['/authentication/side-forgot-pwd']"
-                  class="text-primary f-w-600 text-decoration-none m-l-auto f-s-14"
-                  >Forgot Password ?</a
-                >
               </div>
-              <button
+              <button mat-flat-button color="primary" class="w-100" [disabled]="!form.valid">
-                mat-flat-button
-                color="primary"
-                class="w-100"
-                [disabled]="!form.valid"
-              >
                 Sign In
               </button>
-              <!-- input -->
+              <!-- input
             </form>
-            <span class="d-block f-w-500 d-block m-t-24"
+            <span class="d-block f-w-500 d-block m-t-24">New to Modernize?
-              >New to Modernize?
+              <a [routerLink]="['/authentication/side-register']"
-              <a
+                class="text-decoration-none text-primary f-w-500 f-s-14">
-                [routerLink]="['/authentication/side-register']"
+                Create an account</a>
-                class="text-decoration-none text-primary f-w-500 f-s-14"
+            </span> -->
-              >
-                Create an account</a
-              >
-            </span>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</div>

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

@@ -636,29 +636,32 @@ export const followercardThird: followercards[] = [
 
 export const topcardsGrid = [
   {
-    key: 1, title: 'Personalizácia podpory pomocou umelej inteligencie (AI)', subtitle: 'Obsah a aktivity sa adaptujú na tempo a pokrok každého.',
+    key: 1,
+    title: 'Hlavné prínosy',
+    subtitle: '<ul><li>Personalizácia podpory pomocou umelej inteligencie (AI) – obsah a aktivity sa adaptujú na tempo a pokrok každého používateľa </li><li>Podpora samostatnosti cez IoT – prepojené zariadenia uľahčujú každodenné fungovanie </li><li>Rozhodovanie na základe dát – prehľadné reporty a analýzy optimalizujú intervencie </li><li>Dostupnosť kdekoľvek – online prístup znižuje regionálne rozdiely v dostupnosti služieb </li><li>Škálovateľnosť a prenositeľnosť – riešenie je pripravené aj pre seniorov a ďalšie cieľové skupiny a má globálny dosah</li></ul>',
     img: '/assets/images/svgs/icon-briefcase.svg', color: 'warning'
   },
   {
     key: 2,
-    title: 'Podpora samostatnosti cez IoT', subtitle: 'Prepojené zariadenia uľahčujú každodenné fungovanie.',
+    title: 'Ako to funguje',
+    subtitle: '<ul><li>Hodnotenie a ciele: Systém pomáha definovať ciele podpory a priebežne vyhodnocuje pokrok </li><li>Adaptívny obsah: Modul AI prispôsobuje odporúčania a cvičenia podľa potrieb používateľa </li><li>IoT integrácie: Zariadenia monitorujú a podporujú denné rutiny, bezpečnosť a samostatnosť </li><li>Analytické reporty: Pre odborníkov a rodiny prinášajú prehľadné výstupy pre lepšie rozhodovanie</li></ul>',
     img: '/assets/images/svgs/icon-dd-message-box.svg', color: 'secondary', imgMain: '/assets/images/landingpage/background/feature-apps.png',
   },
   {
     key: 3,
-    title: 'Rozhodovanie na základe dát', subtitle: 'Prehľadné reporty a analýzy optimalizujú intervencie',
+    title: 'Míľniky a kvalita', subtitle: '<ul><li>Hodnotenie dopadov, analýza dát a návrhy aktualizácií zabezpečujú dlhodobú udržateľnosť a efektivitu</li><li>Pravdepodobnosť dosiahnutia kľúčového míľnika je vysoká vďaka implementácii nástrojov na analýzu a monitorovanie; alokovaný rozpočet na tento míľnik je 75 680 € </li></ul>',
     img: '/assets/images/front-pages/logoIcon.svg', color: 'primary', imgMain: '/assets/images/landingpage/background/screen1.png'
   },
   {
     key: 4,
-    title: 'Dostupnosť kdekoľvek', subtitle: 'Online prístup znižuje regionálne rozdiely v dostupnosti služieb.',
+    title: 'Pre koho je projekt určený', subtitle: '<ul><li>Osoby s PAS a ich rodiny</li><li>Školy a špeciálni pedagógovia</li><li>Poskytovatelia sociálnych služieb</li><li>Klinickí odborníci a terapeuti</li><li>Samosprávy a tvorcovia politík</li></ul>',
     img: '/assets/images/front-pages/icon-speech-bubble.svg', color: 'success'
   },
-  {
+  // {
-    key: 5,
+  //   key: 5,
-    title: 'Škálovateľnosť a prenositeľnosť', subtitle: 'Riešenie je pripravené aj pre seniorov a ďalšie cieľové skupiny a má globálny dosah.',
+  //   title: 'Škálovateľnosť a prenositeľnosť', subtitle: 'Riešenie je pripravené aj pre seniorov a ďalšie cieľové skupiny a má globálny dosah.',
-    img: '/assets/images/front-pages/icon-favorites.svg', color: 'error'
+  //   img: '/assets/images/front-pages/icon-favorites.svg', color: 'error'
-  },
+  // },
 ];
 
 export const setupCards: setupCards[] = [

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

@@ -89,8 +89,6 @@
           </p>
         </div>
       </div>
-      <h2 class="f-s-40 lh-lg section-sub-title text-center">Hlavné prínosy</h2>
-
 
       <!--new-->
       <!-- DESKTOP VIEW -->
@@ -101,11 +99,11 @@
         <div class="col-md-4">
           <div>
             <!-- @if (topcard.title === 'Light & Dark Color Schemes' || topcard.title.includes('12+')) { -->
-            <mat-card class="shadow-none text-center rounded-12 bg-light-{{ topcard.color }} card-box p-x-30 p-y-44">
+            <mat-card class="shadow-none text-justify rounded-12 bg-light-{{ topcard.color }} card-box p-x-30 p-y-44">
               <mat-card-content>
-                <img [src]="topcard.img" alt="icon" width="40" />
+                <div class="text-center"><img [src]="topcard.img" alt="icon" width="40" /></div>
-                <h6 class="f-s-16 m-t-16">{{ topcard.title }}</h6>
+                <h6 class="f-s-16 m-t-16 text-center">{{ topcard.title }}</h6>
-                <p class="f-s-14 m-t-16">{{ topcard.subtitle }}</p>
+                <p class="f-s-14 m-t-16" [innerHTML]="topcard.subtitle"></p>
               </mat-card-content>
             </mat-card>
             <!-- } -->
@@ -157,17 +155,11 @@
       <div class="grid-container m-t-24 m-x-0">
         @for (topcard of topcards; track topcard.title) {
         @if (!topcard.title.includes('New Demos')) {
-        <mat-card class="shadow-none text-center rounded-12 bg-light-{{ topcard.color }} card-box p-x-24 p-y-32">
+        <mat-card class="shadow-none text-justify rounded-12 bg-light-{{ topcard.color }} card-box p-x-24 p-y-32">
           <mat-card-content>
-            @if (!topcard.title.includes('12+')) {
+            <div class="text-center"><img [src]="topcard.img" alt="icon" width="40" /></div>
-            <img [src]="topcard.img" alt="icon" width="40" />
+            <h6 class="f-s-16 m-t-16 text-center">{{ topcard.title }}</h6>
-            }
+            <div class="f-s-14 m-t-16 text-justify" [innerHTML]="topcard.subtitle"></div>
-            <h6 class="f-s-16 m-t-16">{{ topcard.title }}</h6>
-            <p class="f-s-14 m-t-16">{{ topcard.subtitle }}</p>
-
-            @if (topcard.title.includes('12+')) {
-            <img [src]="topcard.imgMain" alt="image" class="img-fluid w-100 m-t-16" />
-            }
           </mat-card-content>
         </mat-card>
         }
@@ -230,7 +222,7 @@
 
       <!-- Tab content shown BELOW the tab group -->
 
-      <div class="row tab-header-content p-y-66 align-items-center">
+      <!-- <div class="row tab-header-content p-y-66 align-items-center">
         <div class="col-md-6">
           <div class="tabsimage">
             <img src="assets/images/landingpage/background/accordian1.jpg" alt="slider-group" class="img-fluid w-100" />
@@ -242,7 +234,7 @@
             <h2 class="f-s-40 lh-lg section-sub-title">Defend your focus</h2>
             <div class="m-y-30">
               <mat-accordion multi>
-                <!-- Panel 0 -->
+                 Panel 0 
                 <mat-expansion-panel #panel0 [expanded]="selectedIndex === 0 || selectedIndex === 3" hideToggle
                   class="expansion-panel">
                   <mat-expansion-panel-header>
@@ -259,7 +251,7 @@
                   </div>
                 </mat-expansion-panel>
 
-                <!-- Panel 1 -->
+                 Panel 1 
                 <mat-expansion-panel #panel1 [expanded]="selectedIndex === 1" hideToggle class="expansion-panel">
                   <mat-expansion-panel-header>
                     <div class="d-flex align-items-center justify-content-between w-100">
@@ -275,7 +267,7 @@
                   </div>
                 </mat-expansion-panel>
 
-                <!-- Panel 2 & 3 merged -->
+                 Panel 2 & 3 merged 
                 <mat-expansion-panel #panel2 [expanded]="selectedIndex === 2" hideToggle class="expansion-panel">
                   <mat-expansion-panel-header>
                     <div class="d-flex align-items-center justify-content-between w-100">
@@ -298,13 +290,13 @@
 
 
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 
-  <div class="our-leadership spacing-top p-b-48">
+  <!-- <div class="our-leadership spacing-top p-b-48">
     <app-image-slider></app-image-slider>
-  </div>
+  </div> -->
 
   <div class="toolBar bg-primary p-y-16">
     <div class="container">
@@ -322,280 +314,11 @@
       </div>
     </div>
   </div>
-
+  <div>&nbsp;</div>
-  <div class="template-slider spacing-top-bottom">
-    <div class="custom-container">
-      <div class="bg-light-primary rounded-pill spacing-top-bottom template-slider-content">
-        <div class="spacing-left-right m-b-8">
-          <h2 class="f-s-40 lh-normal section-sub-title">
-            Discover Powerful Dozens of <br> Purpose-Fit Templates
-          </h2>
-        </div>
-        <div class="demo-slider overflow-hidden d-flex gap-30 spacing-bottom">
-          <div>
-            <div class="demo-slide">
-              <a [routerLink]="['/apps/chat']">
-                <img src="assets/images/front-pages/app-chat.jpg" alt="slide" class="img-fluid rounded-7 sliderImg" />
-              </a>
-            </div>
-          </div>
-          <div>
-            <div class="demo-slide">
-              <a (click)="onImageClick('/apps/email/inbox')">
-                <img src="assets/images/front-pages/app-email.jpg" alt="slide" class="img-fluid rounded-7 sliderImg"
-                  [ngClass]="{
-                  'img-border': selectedPath === '/apps/email/inbox'
-                }" />
-              </a>
-            </div>
-          </div>
-          <div>
-            <div class="demo-slide">
-              <a (click)="onImageClick('/dashboards/dashboard1')">
-                <img src="assets/images/front-pages/demo-main.jpg" alt="slide" class="img-fluid rounded-7 sliderImg"
-                  [ngClass]="{
-                  'img-border': selectedPath === '/dashboards/dashboard1'
-                }" />
-              </a>
-            </div>
-          </div>
-          <div>
-            <div class="demo-slide">
-              <img src="assets/images/front-pages/demo-dark.jpg" alt="slide" class="img-fluid rounded-7 sliderImg" />
-            </div>
-          </div>
-          <div>
-            <div class="demo-slide">
-              <a (click)="onImageClick('/front-pages/homepage')">
-                <img src="assets/images/front-pages/demo-horizontal.jpg" alt="slide"
-                  class="img-fluid rounded-7 sliderImg" [ngClass]="{
-                  'img-border': selectedPath === '/front-pages/homepage'
-                }" />
-              </a>
-            </div>
-          </div>
-          <div>
-            <div class="demo-slide">
-              <img src="assets/images/front-pages/demo-rtl.jpg" alt="slide" class="img-fluid rounded-7 sliderImg" />
-            </div>
-          </div>
-          <div>
-            <div class="demo-slide">
-              <img src="assets/images/front-pages/app-chat.jpg" alt="slide" class="img-fluid rounded-7 sliderImg" />
-            </div>
-          </div>
-          <div>
-            <div class="demo-slide">
-              <img src="assets/images/front-pages/app-email.jpg" alt="slide" class="img-fluid rounded-7 sliderImg" />
-            </div>
-          </div>
-        </div>
-        <div class="spacing-left-right">
-          <div class="row">
-            <div class="col-md-4 text-center m-b-30">
-              <h3 class="f-s-18 m-b-16">High Customizability</h3>
-              <p class="f-s-14 m-0">
-                Tailor the dashboard to your exact needs. Customize layouts, color
-                schemes, and widgets effortlessly for a personalized user
-                experience.
-              </p>
-            </div>
-            <div class="col-md-4 text-center m-b-30">
-              <h3 class="f-s-18 m-b-16">Powerful Data Analytics</h3>
-              <p class="f-s-14 m-0">
-                Unlock the true potential of your data with our advanced analytics
-                tools. Gain valuable insights and make data-driven decisions with
-                ease.
-              </p>
-            </div>
-
-            <div class="col-md-4 text-center m-b-30">
-              <h3 class="f-s-18 m-b-16">Interactive Charts</h3>
-              <p class="f-s-14 m-0">
-                Visualize complex data sets beautifully with our interactive
-                graphs and charts. Quickly grasp trends and patterns for smarter
-                analysis.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="features spacing-bottom">
-    <div class="container">
-      <div class="row align-items-center justify-content-between">
-        <!--row-->
-        <div class="col-md-5 m-b-30">
-          <div class="client-margin">
-            <h2 class="lh-normal f-s-40 m-b-16 section-sub-title">
-              What our clients <br> think <img src="assets/images/front-pages/logoIcon.svg" alt="logo" />
-              about us?
-            </h2>
-            <p class="m-0">
-              Our users' feedback is a testament to our commitment to quality
-              and user satisfaction. Read what they have to say about their
-              journey with us.
-            </p>
-          </div>
-        </div>
-        <div class="col-md-5">
-          <mat-card class="cardWithShadow b-1 rounded-8 m-b-0 p-48">
-            <mat-card-content>
-              <mat-card-title class="f-s-24 f-w-600 m-b-24">Features availability</mat-card-title>
-
-              <div class="d-flex align-items-center gap-16 m-b-24">
-                <div>
-                  <img [src]="currentUser().img" [alt]="currentUser().name" class="rounded-circle" width="40" />
-                </div>
-                <h6 class="f-s-14 f-w-600">{{ currentUser().name }}</h6>
-              </div>
-
-              <p class="f-s-14 m-b-16 m-t-0">
-                Our users' feedback is a testament to our commitment to quality
-                and user satisfaction. Read what they have to say about their
-                journey with us.
-              </p>
-
-              <mat-divider></mat-divider>
-
-              <div class="d-flex align-items-center gap-10 m-t-8">
-                <button class="bg-light icon-32 d-flex align-items-center justify-content-center" mat-icon-button
-                  (click)="goPrev()">
-                  <i-tabler name="chevron-left"
-                    class="icon-18 d-flex align-items-center justify-content-center"></i-tabler>
-                </button>
-
-                <span class="f-s-14">{{ displayCount() }}</span>
-
-                <button class="bg-light icon-32 d-flex align-items-center justify-content-center" mat-icon-button
-                  (click)="goNext()">
-                  <i-tabler name="chevron-right"
-                    class="icon-18 d-flex align-items-center justify-content-center"></i-tabler>
-                </button>
-              </div>
-            </mat-card-content>
-          </mat-card>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="exceptional position-relative">
-    <div class="custom-container">
-      <div class="bg-light-primary rounded-8 exceptional-content spacing-top-bottom">
-        <div class="row justify-content-center">
-          <div class="col-md-6">
-            <h2 class="lh-normal text-center f-s-40 m-b-30 section-sub-title">
-              Enjoy unparalleled features & exceptional flexibility.
-            </h2>
-          </div>
-        </div>
-
-        <div class="m-t-0">
-          <div class="demo-slider overflow-hidden d-flex gap-30">
-            <div class="row flex-nowrap overflow-auto gap-20">
-              @for (followercard of followercardsfirst; track followercard.title)
-              {
-              <div class="col-2">
-                <mat-card class="cardWithShadow demo-slide rounded-8">
-                  <mat-card-content>
-                    <div class="d-flex align-items-center justify-content-center x-20">
-                      <img [src]="followercard.imgSrc" alt="icon" />
-                      <h6 class="m-0 f-w-500 f-s-14 m-x-8">
-                        {{ followercard.title }}
-                      </h6>
-                    </div>
-                  </mat-card-content>
-                </mat-card>
-              </div>
-              }
-            </div>
-          </div>
-          <div class="demo-slider overflow-hidden d-flex gap-30 m-t-2">
-            <div class="row flex-nowrap overflow-auto gap-20">
-              @for (followercard of followercardsecond; track followercard.title)
-              {
-              <div class="col-2">
-                <mat-card class="cardWithShadow demo-slide-two rounded-8">
-                  <mat-card-content>
-                    <div class="d-flex align-items-center justify-content-center x-20">
-                      <img [src]="followercard.imgSrc" alt="icon" />
-                      <h6 class="m-0 f-w-500 f-s-14 m-x-8">
-                        {{ followercard.title }}
-                      </h6>
-                    </div>
-                  </mat-card-content>
-                </mat-card>
-              </div>
-              }
-            </div>
-          </div>
-          <div class="demo-slider overflow-hidden d-flex gap-30 m-t-2">
-            <div class="row flex-nowrap overflow-auto gap-20">
-              @for (followercard of followercardthird; track followercard.title) {
-              <div class="col-2">
-                <mat-card class="cardWithShadow demo-slide rounded-8">
-                  <mat-card-content>
-                    <div class="d-flex align-items-center justify-content-center x-20">
-                      <img [src]="followercard.imgSrc" alt="icon" />
-                      <h6 class="m-0 f-w-500 f-s-14 m-x-8">
-                        {{ followercard.title }}
-                      </h6>
-                    </div>
-                  </mat-card-content>
-                </mat-card>
-              </div>
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="asked-questions spacing-top-bottom">
-    <div class="container">
-      <h2 class="f-s-40 text-center lh-normal m-b-48 section-sub-title">Frequently Asked Questions</h2>
-      <div class="row align-items-center justify-content-center">
-        <div class="col-md-8">
-          <mat-accordion multi class="faq-accordion m-b-48 d-block">
-            @for (item of faqList; track item) {
-            <mat-expansion-panel [expanded]="expandedIndex === $index" (opened)="expandedIndex = $index"
-              (closed)="expandedIndex = null" hideToggle class="b-1 expansion-panel m-b-16">
-              <mat-expansion-panel-header>
-                <mat-panel-title class="f-s-18 m-x-0">{{
-                  item.question
-                  }}</mat-panel-title>
-
-                <tabler-icon [name]="expandedIndex === $index ? 'minus' : 'plus'" class="m-s-auto icon-20 m-x-0 p-0">
-                </tabler-icon>
-              </mat-expansion-panel-header>
-
-              <p class="m-0">{{ item.answer }}</p>
-            </mat-expansion-panel>
-            }
-          </mat-accordion>
-        </div>
-      </div>
-      <div class="d-flex justify-content-center">
-        <div class="d-flex align-items-center justify-content-center gap-4 p-y-6 p-x-10 rounded border-dash">
-          <span class="f-s-14">Still have a question?</span>
-          <a target="_blank" href="https://discord.com/invite/XujgB8ww4n"
-            class="text-decoration-underline text-dark f-s-14">Ask on discord</a>
-          <span class="f-s-14">or</span>
-          <a target="_blank" href="https://adminmart.com/support/"
-            class="text-decoration-underline text-dark f-s-14">Submit a ticket</a>
-        </div>
-      </div>
-    </div>
-  </div>
 
   <div class="footer">
     <div>
       <app-footer></app-footer>
     </div>
   </div>
-
 </div>

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

@@ -7,9 +7,7 @@
   }
 
   .home-page-header {
-
     .header-container-content {
-
       .cardPosition {
         .float-image {
           animation: floatUpDown 6s ease-in-out infinite;
@@ -17,7 +15,6 @@
       }
 
       .cardPositionTwo {
-
         .float-image {
           animation: floatUpDown 6s ease-in-out infinite;
         }
@@ -43,9 +40,7 @@
   }
 
   .dashboardCards {
-
     .card-container {
-
       mat-card-content {
         padding: 0px !important;
       }
@@ -64,7 +59,6 @@
         }
       }
     }
-
   }
 
   .template-slider {
@@ -78,7 +72,6 @@
   }
 
   .features {
-
     .cardWithShadow {
       mat-card-content {
         padding: 0px !important;
@@ -146,10 +139,12 @@
       }
     }
   }
+  li {
+    text-align: justify;
+  }
 }
 
 @keyframes floatUpDown {
-
   0%,
   100% {
     transform: translateY(0);
@@ -180,10 +175,8 @@
   }
 }
 
-
-
 @media (max-width: 1199px) {
   .home-page-header {
     padding-bottom: 48px;
   }
-}
+}

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

@@ -46,27 +46,27 @@
     <mat-sidenav class="mobile-sidebar" #customizerRight mode="over" position="start">
 
       <div class="">
-        <div class="branding">
+        <div class="branding" (click)="close()">
           <app-branding></app-branding>
         </div>
         <div class="">
           <mat-list role="list">
             <mat-list-item role="listitem">
               <button mat-button class="text-dark" [routerLink]="['/front-pages/portfolio']"
-                [class.selected]="isActiveRoute('portfolio')">
+                [class.selected]="isActiveRoute('portfolio')" (click)="close()">
                 Novinky
               </button></mat-list-item>
             <mat-list-item role="listitem">
               <button mat-button class="text-dark" [class.selected]="isActiveRoute('blog')"
-                [routerLink]="['/front-pages/blog']">
+                [routerLink]="['/front-pages/blog']" (click)="close()">
                 Blog
                 <span class="bg-light-primary text-primary rounded f-w-600 p-6 p-y-4 f-s-12">
-                  New
+                  Nové
                 </span>
               </button></mat-list-item>
             <mat-list-item role="listitem">
               <button mat-button class="text-dark " [class.selected]="isActiveRoute('contact')"
-                [routerLink]="['/front-pages/contact']">
+                [routerLink]="['/front-pages/contact']" (click)="close()">
                 Kontakty
               </button></mat-list-item>
             <mat-list-item role="listitem" class="w-100">

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

@@ -34,6 +34,11 @@ export class HomepageComponent {
       this.closeSidenavIfNeeded();
     });
   }
+
+  close() {
+    this.customizerRight.close();
+  }
+
   closeSidenavIfNeeded() {
     if (!this.isMobileView && this.customizerRight?.opened) {
       this.customizerRight.close();

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

@@ -11,7 +11,7 @@
   <div class="container">
     <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap m-b-24">
       <div class="d-flex align-items-center gap-8 m-b-10">
-        <h5 class="f-w-500 f-s-20">Portfolio</h5>
+        <h5 class="f-w-500 f-s-20">Novinky</h5>
         <div class="p-x-6 p-y-2 rounded-pill bg-secondary text-white">
           <div class="f-s-14 lh-sm">{{ filteredCount }} </div>
         </div>
@@ -20,7 +20,7 @@
       <!-- Search bar pushed to the right -->
       <mat-form-field appearance="outline" class="search-bar-style hide-hint">
         <mat-icon matPrefix>search</mat-icon>
-        <input matInput placeholder="Search Photos" [(ngModel)]="searchText" (input)="onSearchChange()" />
+        <input matInput placeholder="Vyhľadať" [(ngModel)]="searchText" (input)="onSearchChange()" />
       </mat-form-field>
     </div>
     <div class="row">
@@ -32,6 +32,9 @@
           </a>
           <mat-card-content class="p-b-24 p-t-12 position-relative">
             <mat-card-title class="mat-headline-2 f-s-16 m-b-4">
+              <mat-chip class="m-y-16 bg-light">{{
+                productcard.claim
+                }}</mat-chip>
               <div class="d-flex align-items-center justify-content-between">
                 <!-- Left Side: Text Content -->
                 <div>

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

@@ -3,7 +3,7 @@
 import { Component, OnInit } from '@angular/core';
 import { IconModule } from '../../../icon/icon.module';
 import { MaterialModule } from '../../../material.module';
-import { productcards } from '../front-pagesData';
+import { newscards } from '../front-pagesData';
 import { FooterComponent } from '../footer/footer.component';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -16,7 +16,7 @@ import { FormsModule } from '@angular/forms';
 })
 export class PortfolioComponent implements OnInit {
 
-  filteredCards = productcards;
+  filteredCards = newscards;
 
   searchText: string = '';
 

Web/src/index.html

@@ -3,7 +3,6 @@
 
 <head>
   <meta charset="utf-8">
-  <title>Modernize Angular 20 Admin Template</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">