New dashboard implemented

src/app/app.component.html

@@ -1,12 +1,16 @@
-<bae-header class="fixed w-full z-50 top-0 start-0"></bae-header>
-<main class="bg-no-repeat bg-right pb-[60px] pt-[75px]">
-    <router-outlet></router-outlet>
+  <bae-header class="fixed w-full z-50 top-0 start-0"></bae-header>
+
+<main
+  class="bg-no-repeat bg-right pb-[60px] pt-[75px]"
+
+>
+  <router-outlet></router-outlet>
 </main>
-@if(providerThemeName=='DOME') {
-    <app-chatbot-widget class="relative z-50"></app-chatbot-widget>
+@if (providerThemeName == "DOME") {
+  <app-chatbot-widget class="relative z-50"></app-chatbot-widget>
 }
 
-<bae-footer  class="fixed w-full z-30 bottom-0 start-0"></bae-footer>
+  <bae-footer class="fixed w-full z-30 bottom-0 start-0"></bae-footer>
 
 @if(isProduction){
     <script type="text/javascript"> _linkedin_partner_id = "8700705"; window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || []; window._linkedin_data_partner_ids.push(_linkedin_partner_id); </script><script type="text/javascript"> (function(l) { if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])}; window.lintrk.q=[]} var s = document.getElementsByTagName("script")[0]; var b = document.createElement("script"); b.type = "text/javascript";b.async = true; b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js"; s.parentNode.insertBefore(b, s);})(window.lintrk); </script> <noscript> <img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=8700705&fmt=gif" /> </noscript>

src/app/app.component.ts

@@ -12,18 +12,20 @@ import { RefreshLoginServiceService } from "src/app/services/refresh-login-servi
 import * as moment from 'moment';
 import {ThemeService} from "./services/theme.service";
 import {environment} from "../environments/environment";
+import { filter } from 'rxjs'; 
 
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'], 
 })
 export class AppComponent implements OnInit {
   title = 'DOME Marketplace';
   showPanel = false;
   providerThemeName=environment.providerThemeName;
   isProduction:boolean = environment.isProduction;
+  showHeaderAndFooter = false;
 
   constructor(private translate: TranslateService,
               private localStorage: LocalStorageService,
@@ -88,11 +90,16 @@ export class AppComponent implements OnInit {
       this.refreshApi.startInterval(((aux.expire - moment().unix())-4)*1000, aux);
       initFlowbite();
     }
-    this.router.events.subscribe(event => {
-      if (event instanceof NavigationEnd) {
+    this.router.events
+      .pipe(
+        filter(
+          (event): event is NavigationEnd => event instanceof NavigationEnd,
+        ),
+      )
+      .subscribe(() => {
         window.scrollTo({ top: 0, behavior: 'smooth' }); // or just window.scrollTo(0, 0);
-      }
-    });
+      });
+
   }
 
   /*checkPanel() {
@@ -104,4 +111,6 @@ export class AppComponent implements OnInit {
       this.localStorage.setItem('is_filter_panel_shown', this.showPanel.toString())
     }
   }*/
+
+
 }

src/app/app.module.ts

@@ -6,8 +6,7 @@ import { FeaturedComponent } from "./offerings/featured/featured.component";
 import { GalleryComponent } from "./offerings/gallery/gallery.component";
 import { ExploreDomeComponent } from "./offerings/explore-dome/explore-dome.component";
 import { PlatformBenefitsComponent } from "./offerings/platform-benefits/platform-benefits.component";
-import { HowItWorksComponent } from "./offerings/how-it-works/how-it-works.component";
-import { DashboardComponent } from "./pages/dashboard/dashboard.component";
+import { HowItWorksComponent } from "./offerings/how-it-works/how-it-works.component"; 
 import { SearchComponent } from "./pages/search/search.component";
 import { ProductDetailsComponent } from "./pages/product-details/product-details.component";
 import { ProductInventoryComponent } from "./pages/product-inventory/product-inventory.component";
@@ -106,7 +105,6 @@ import { OperatorRevenueSharingComponent } from "src/app/pages/admin/operator-re
 @NgModule({
   declarations: [
     AppComponent,
-    DashboardComponent,
     SearchComponent,
     FeaturedComponent,
     GalleryComponent,

src/app/pages/dashboard/dashboard-footer/dashboard-footer.component.css

@@ -0,0 +1,42 @@
+:host {
+  --dome-dashboard-max-w: 1240px;
+}
+
+footer {
+  background: #0c1129;
+  color: #d0d3e2;
+  padding: 3rem 0;
+  margin-top: 1rem;
+}
+
+.footer-cols {
+  max-width: var(--dome-dashboard-max-w);
+  margin: 0 auto;
+  padding: 0 1.5rem;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 2rem;
+}
+
+footer h3 {
+  color: white;
+  font-size: 1rem;
+  margin-bottom: 0.7rem;
+}
+
+footer a {
+  color: #d0d3e2;
+  text-decoration: none;
+  font-size: 0.9rem;
+  display: block;
+  margin-bottom: 0.3rem;
+}
+footer a:hover {
+  color: #fff;
+}
+
+@media (max-width: 700px) {
+  .footer-cols {
+    grid-template-columns: 1fr 1fr;
+  }
+}

src/app/pages/dashboard/dashboard-footer/dashboard-footer.component.html

@@ -0,0 +1,61 @@
+<app-europe-trademark></app-europe-trademark>
+<footer>
+  <div class="footer-cols">
+    <div>
+      <h3>{{ "dashboard.footer.aboutTitle" | translate }}</h3>
+      <a href="/about">{{ "dashboard.footer.about" | translate }}</a>
+      <a href="/governance">{{ "dashboard.footer.governance" | translate }}</a>
+      <a href="https://dome-project.eu/about/#partners">{{
+        "dashboard.footer.partners" | translate
+      }}</a>
+    </div>
+
+    <div>
+      <h3>{{ "dashboard.footer.marketplaceTitle" | translate }}</h3>
+      <a href="/search">{{ "dashboard.footer.browse" | translate }}</a>
+      <a href="#for-customers">{{ "dashboard.nav.forCustomers" | translate }}</a>
+      <a href="#for-providers">{{ "dashboard.nav.forProviders" | translate }}</a>
+    </div>
+
+    <div>
+      <h3>{{ "dashboard.footer.legalTitle" | translate }}</h3>
+      <a href="/assets/documents/terms.pdf">{{
+        "dashboard.footer.terms" | translate
+      }}</a>
+      <a href="/assets/documents/privacy.pdf">{{
+        "dashboard.footer.privacy" | translate
+      }}</a>
+      <a href="/assets/documents/cookies.pdf">{{
+        "dashboard.footer.cookies" | translate
+      }}</a>
+    </div>
+
+    <div>
+      <h3>{{ "dashboard.footer.resourcesTitle" | translate }}</h3>
+      <a href="https://knowledgebase.dome-marketplace-prd.org/">{{
+        "dashboard.footer.documentation" | translate
+      }}</a>
+      <a href="https://dome-marketplace.eu/contact-us">{{
+        "dashboard.footer.support" | translate
+      }}</a>
+      <a href="/faq">{{ "dashboard.footer.faqs" | translate }}</a>
+    </div>
+
+    <div>
+      <h3>{{ "dashboard.footer.follow-us" | translate }}</h3>
+
+      <div
+        class="hidden md:flex justify-start text-gray-500 dark:text-gray-400"
+      >
+        @for (social of socialLinks; track social.url) {
+          <fa-icon
+            (click)="open(social.url!)"
+            [ngClass]="{ 'mr-4': !$last }"
+            class="cursor-pointer"
+            [icon]="social.icon"
+          ></fa-icon>
+        }
+      </div>
+    </div>
+  </div>
+</footer>

src/app/pages/dashboard/dashboard-footer/dashboard-footer.component.ts

@@ -0,0 +1,69 @@
+import { NgClass } from '@angular/common';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import {
+  faLinkedin,
+  faXTwitter,
+  faYoutube,
+} from '@fortawesome/free-brands-svg-icons';
+import { TranslateModule } from '@ngx-translate/core';
+import { Subject, takeUntil } from 'rxjs';
+import { ThemeService } from 'src/app/services/theme.service'; 
+import { EuropeTrademarkComponent } from 'src/app/shared/europe-trademark/europe-trademark.component';
+
+@Component({
+  selector: 'app-dashboard-footer',
+  templateUrl: './dashboard-footer.component.html',
+  styleUrls: ['./dashboard-footer.component.css'],
+  standalone: true,
+  imports: [
+    TranslateModule,
+    EuropeTrademarkComponent,
+    FontAwesomeModule,
+    NgClass,
+  ],
+})
+export class DashboardFooterComponent implements OnInit, OnDestroy {
+  protected readonly faLinkedin = faLinkedin;
+  protected readonly faYoutube = faYoutube;
+  protected readonly faXTwitter = faXTwitter;
+  private unSub = new Subject();
+  constructor(private themeService: ThemeService) {}
+
+  public socialLinks: { icon: any; url: string | undefined }[] = [];
+
+  ngOnInit() {
+    this.themeService.currentTheme$
+      .pipe(takeUntil(this.unSub))
+      .subscribe((theme) => {
+        this.socialLinks = [];
+        if (theme?.links?.linkedin) {
+          this.socialLinks.push({
+            url: theme.links.linkedin,
+            icon: this.faLinkedin,
+          });
+        }
+        if (theme?.links?.twitter) {
+          this.socialLinks.push({
+            url: theme.links.twitter,
+            icon: this.faXTwitter,
+          });
+        }
+        if (theme?.links?.youtube) {
+          this.socialLinks.push({
+            url: theme.links.youtube,
+            icon: this.faYoutube,
+          });
+        }
+      });
+  }
+
+  open(path: string) {
+    window.open(path, '_blank');
+  }
+
+  ngOnDestroy() {
+    this.unSub.complete();
+    this.unSub.unsubscribe();
+  }
+}

src/app/pages/dashboard/dashboard-header/dashboard-header.component.css

@@ -0,0 +1,92 @@
+:host {
+  display: block;
+}
+
+.dd-header {
+  width: 100%;
+  background: #ffffff;
+  border-bottom: 1px solid var(--dome-dashboard-gray-200);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+.header-inner {
+  max-width: var(--dome-dashboard-max-w);
+  margin: 0 auto;
+  padding: 1rem 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.logo {
+  color: var(--dome-dashboard-gray-900);
+  font-size: 1rem;
+  line-height: 1;
+}
+
+/* nav */
+.nav-links {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.nav-links a {
+  text-decoration: none;
+  color: var(--dome-dashboard-gray-700);
+  font-weight: 500;
+  line-height: 1;
+}
+
+.nav-links a:hover {
+  color: var(--dome-dashboard-blue-600);
+}
+
+.header-actions {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.header-link {
+  text-decoration: none;
+  color: var(--dome-dashboard-gray-700);
+  font-weight: 500;
+  line-height: 1;
+}
+
+.header-link:hover {
+  color: var(--dome-dashboard-blue-600);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.6rem 1.2rem;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.95rem;
+  line-height: 1;
+  transition: 0.15s ease;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.btn-primary {
+  background: var(--dome-dashboard-blue-600);
+  color: #fff;
+}
+
+.btn-primary:hover {
+  background: var(--dome-dashboard-blue-700);
+}
+
+@media (max-width: 700px) {
+  .nav-links {
+    display: none;
+  }
+}

src/app/pages/dashboard/dashboard-header/dashboard-header.component.html

@@ -0,0 +1,35 @@
+<header class="dd-header">
+  <div class="header-inner">
+    <div class="logo">
+      <strong>{{ "dashboard.header.logo" | translate }}</strong>
+    </div>
+
+    <nav class="nav-links">
+      <a href="https://onboarding.dome-marketplace.eu/#for-customers">{{
+        "dashboard.nav.forCustomers" | translate
+      }}</a>
+      <a href="https://onboarding.dome-marketplace.eu/#for-providers">{{
+        "dashboard.nav.forProviders" | translate
+      }}</a>
+      <a href="/search">{{ "dashboard.nav.marketplace" | translate }}</a>
+      <a href="/about">{{ "dashboard.nav.about" | translate }}</a>
+      <a href="https://knowledgebase.dome-marketplace-prd.org/">{{
+        "dashboard.nav.resources" | translate
+      }}</a>
+    </nav>
+
+    <div class="header-actions">
+      <a
+        class="header-link"
+        href=""
+        (click)="$event.preventDefault(); onLoginClick()"
+        >{{ "dashboard.header.login" | translate }}</a
+      >
+      <a
+        class="btn btn-primary"
+        href="https://onboarding.dome-marketplace.eu/"
+        >{{ "dashboard.header.getStarted" | translate }}</a
+      >
+    </div>
+  </div>
+</header>