chore: update common page

apps/taiga-lumbermill/public/site.webmanifest

@@ -0,0 +1,11 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {"src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png"},
+        {"src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png"}
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

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

@@ -1,94 +1,78 @@
 <header
-    tuiHeader="l"
-    [style.margin-top]="'1.25rem'"
+    tuiHeader="xxl"
+    class="header"
 >
-    <h2
-        tuiTitle
-        [style.text-align]="'center'"
-    >
+    <h2 tuiTitle>
         Taiga Lumbermill
+        <span tuiSubtitle>
+            A set of comprehensive examples of
+            <a
+                href="https://taiga-ui.dev"
+                target="_blank"
+                tuiLink
+            >
+                Taiga UI
+            </a>
+            use in the wild. Our goal is to provide developers with a robust foundation for quickly creating beautiful
+            and functional web applications.
+        </span>
     </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">
+<a
+    appearance="opposite"
+    href="https://github.com/taiga-family/taiga-lumbermill"
+    size="s"
+    tuiButton
+    type="button"
+    class="action-button"
+>
+    Explore
+</a>
+
+<div class="cards">
     <button
         routerLink="/dashboards"
-        tuiAppearance="whiteblock"
-        tuiCardLarge="normal"
+        tuiCardLarge
         tuiSurface="elevated"
         type="button"
-        class="card"
     >
-        <div>
-            <header tuiHeader>
-                <h2
-                    tuiTitle
-                    [style.text-align]="'center'"
-                >
-                    Dashboards
-                </h2>
-            </header>
+        <tui-avatar
+            appearance="opposite"
+            src="@tui.circle-gauge"
+        />
+        <div tuiTitle>
+            Dashboards
+            <div tuiSubtitle>Examples of complex pages and dashboards</div>
         </div>
     </button>
-    <button
-        routerLink="/theme"
-        tuiAppearance="whiteblock"
-        tuiCardLarge="normal"
+
+    <div
+        tuiCardLarge
         tuiSurface="elevated"
-        type="button"
-        class="card"
     >
-        <div>
-            <header tuiHeader>
-                <h2
-                    tuiTitle
-                    [style.text-align]="'center'"
-                >
-                    Theme generator
-                </h2>
-            </header>
+        <tui-avatar
+            appearance="opposite"
+            src="@tui.panel-top"
+        />
+        <div tuiTitle>
+            Pages
+            <div tuiSubtitle>Some common pages such as login, registration</div>
         </div>
-    </button>
+    </div>
+
     <button
-        routerLink="/login"
-        tuiAppearance="whiteblock"
-        tuiCardLarge="normal"
-        tuiSurface="elevated"
-        type="button"
-        class="card"
-    >
-        <div>
-            <header tuiHeader>
-                <h2
-                    tuiTitle
-                    [style.text-align]="'center'"
-                >
-                    Log in
-                </h2>
-            </header>
-        </div>
-    </button>
-    <button
-        routerLink="/sign-up"
-        tuiAppearance="whiteblock"
-        tuiCardLarge="normal"
+        routerLink="/theme"
+        tuiCardLarge
         tuiSurface="elevated"
         type="button"
-        class="card"
     >
-        <div>
-            <header tuiHeader>
-                <h2
-                    tuiTitle
-                    [style.text-align]="'center'"
-                >
-                    Sign up
-                </h2>
-            </header>
+        <tui-avatar
+            appearance="opposite"
+            src="@tui.palette"
+        />
+        <div tuiTitle>
+            Color generator
+            <div tuiSubtitle>Customize Taiga UI theme</div>
         </div>
     </button>
 </div>

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

@@ -1,27 +1,31 @@
-.description {
-    margin-top: 0.75rem;
-    font-size: 0.9rem;
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto;
-    max-inline-size: 40rem;
+:host {
+    display: grid;
 }
 
-.row {
-    display: flex;
-    margin-top: 1.25rem;
-    gap: 1.25rem;
-    justify-content: space-between;
+.header {
+    padding-top: 10rem;
+    margin: 0 auto;
+    align-items: center;
+    max-inline-size: 40rem;
 
-    @media (max-width: 800px) {
-        flex-direction: column;
+    & > [tuiTitle] {
+        text-align: center;
     }
 }
 
-.card {
-    flex-grow: 1;
+.action-button {
+    margin: 0 auto;
+}
+
+.cards {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    margin-top: 5rem;
+    gap: 1rem;
 
-    @media (max-width: 800px) {
-        inline-size: 100%;
+    [tuiCardLarge] {
+        inline-size: 25rem;
     }
 }

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

@@ -1,7 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
-import {TuiAppearance, TuiSurface, TuiTitle} from '@taiga-ui/core';
+import {TuiAppearance, TuiButton, TuiLink, TuiSurface, TuiTitle} from '@taiga-ui/core';
+import {TuiAvatar} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 
 @Component({
@@ -11,8 +12,11 @@ import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
         CommonModule,
         RouterLink,
         TuiAppearance,
+        TuiAvatar,
+        TuiButton,
         TuiCardLarge,
         TuiHeader,
+        TuiLink,
         TuiSurface,
         TuiTitle,
     ],

apps/taiga-lumbermill/src/components/navigation/navigation.component.html

@@ -57,12 +57,25 @@
         </ng-template>
     </button>
     <span tuiNavigationLogo>
-        <tui-icon icon="@tui.home" />
-        <span tuiFade>Taiga lumbermill</span>
+        <img
+            alt="logo"
+            height="32px"
+            src="/logo-white-transparent.png"
+        />
+        Taiga Lumbermill
     </span>
 
     <hr />
 
+    <a
+        appearance="secondary"
+        href="https://github.com/taiga-family/taiga-lumbermill"
+        iconStart="@tui.github"
+        size="s"
+        target="_blank"
+        tuiIconButton
+        [style.border-radius.%]="100"
+    ></a>
     <button
         appearance="secondary"
         size="s"
@@ -88,7 +101,7 @@
                 type="button"
                 [routerLinkActiveOptions]="{exact: true}"
             >
-                <span tuiFade>Taiga lumbermill</span>
+                <span>Home</span>
             </button>
         </header>
         <tui-aside-group>