feat: add common-page

.cspell.json

@@ -31,6 +31,7 @@
         "forecastday",
         "mintemp",
         "maxtemp",
-        "Tiko"
+        "Tiko",
+        "Create"
     ]
 }

apps/taiga-lumbermill/src/components/app/app.routes.ts

@@ -34,5 +34,12 @@ export const appRoutes: Route[] = [
             },
         ],
     },
+    {
+        path: '',
+        loadComponent: async () =>
+            import('../../dashboards/common-page/common-page.component').then(
+                (mod) => mod.CommonPageComponent,
+            ),
+    },
     {path: '**', redirectTo: 'dashboards'},
 ];

apps/taiga-lumbermill/src/dashboards/common-page/common-page.component.html

@@ -0,0 +1,52 @@
+<header
+    tuiHeader="l"
+    [style.margin-top]="'1.25rem'"
+>
+    <h2
+        tuiTitle
+        [style.text-align]="'center'"
+    >
+        Taiga Lumbermill
+    </h2>
+</header>
+<p class="description">
+    This project contains a comprehensive set of ready-made templates, dashboards, and pages built using the Taiga UI
+    component library. Our goal is to provide developers with a robust foundation for quickly creating beautiful and
+    functional web applications.
+</p>
+<div class="row">
+    <div
+        routerLink="/dashboards"
+        tuiAppearance="whiteblock"
+        tuiCardLarge="normal"
+        class="card"
+    >
+        <div>
+            <header tuiHeader>
+                <h2
+                    tuiTitle
+                    [style.text-align]="'center'"
+                >
+                    Dashboards
+                </h2>
+            </header>
+        </div>
+    </div>
+    <div
+        routerLink="/theme"
+        tuiAppearance="whiteblock"
+        tuiCardLarge="normal"
+        class="card"
+    >
+        <div>
+            <header tuiHeader>
+                <h2
+                    tuiTitle
+                    [style.text-align]="'center'"
+                >
+                    Theme generator
+                </h2>
+            </header>
+        </div>
+    </div>
+</div>

apps/taiga-lumbermill/src/dashboards/common-page/common-page.component.less

@@ -0,0 +1,27 @@
+.description {
+    margin-top: 0.75rem;
+    font-size: 0.9rem;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 40rem;
+}
+
+.row {
+    display: flex;
+    margin-top: 1.25rem;
+    gap: 1.25rem;
+    justify-content: space-between;
+
+    @media (max-width: 800px) {
+        flex-direction: column;
+    }
+}
+
+.card {
+    flex-grow: 1;
+
+    @media (max-width: 800px) {
+        width: 100%;
+    }
+}

apps/taiga-lumbermill/src/dashboards/common-page/common-page.component.ts

@@ -0,0 +1,15 @@
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {RouterLink} from '@angular/router';
+import {TuiAppearance, TuiTitle} from '@taiga-ui/core';
+import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
+
+@Component({
+    standalone: true,
+    selector: 'lmb-common-page',
+    imports: [CommonModule, RouterLink, TuiAppearance, TuiCardLarge, TuiHeader, TuiTitle],
+    templateUrl: './common-page.component.html',
+    styleUrl: './common-page.component.less',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CommonPageComponent {}

apps/taiga-lumbermill/src/dashboards/dashboards-list/dashboards-list.component.ts

@@ -10,7 +10,7 @@ interface DashboardsData {
     readonly description: string;
 }
 
-const INITIAL_DATA: DashboardsData[] = [
+export const INITIAL_DATA: DashboardsData[] = [
     {
         title: 'Iot Dashboard',
         link: '/dashboards/iot',

apps/taiga-lumbermill/src/dashboards/dashboards/dashboards.component.html

@@ -2,13 +2,14 @@
     tuiNavigationNav
     [style.position]="'sticky'"
 >
-    <a routerLink="/dashboards">
+    @let title = (data$ | async) ?? '';
+    <a [routerLink]="title ? '/dashboards' : '/'">
         <tui-icon icon="@tui.chevron-left" />
         Back
     </a>
     /
     <span tuiNavigationLogo>
-        <span tuiFade>{{ (data$ | async) ?? '' }} dashboard</span>
+        <span tuiFade>{{ title }} dashboard</span>
     </span>
     <hr />
 </nav>