chore(demo): improve home page (#6050)

projects/demo-cypress/cypress/tests/addon-doc/navigation.cy.ts

@@ -27,9 +27,9 @@ describe(`Navigation`, () => {
         });
 
         it(`scroll to \`tui-doc-code\``, () => {
-            cy.tuiVisit(`/getting-started#options`);
+            cy.tuiVisit(`/getting-started#icons`);
 
-            cy.get(`#options`).should(`be.visible`).should(`be.inViewport`);
+            cy.get(`#icons`).should(`be.visible`).should(`be.inViewport`);
         });
 
         it(`scroll after click on link with anchor`, () => {

projects/demo/src/modules/app/home/examples/angular-json-styles.md

@@ -1,9 +1,10 @@
 ```json
 {
   "projects": {
-    "your-app": {
+    "my-project": {
       "architect": {
         "build": {
+          // ...
           "options": {
             "styles": [
               "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",

projects/demo/src/modules/app/home/examples/assets.md

@@ -1,12 +1,20 @@
 ```json
 {
-  //...
-  "assets": [
-    {
-      "glob": "**/*",
-      "input": "node_modules/@taiga-ui/icons/src",
-      "output": "assets/taiga-ui/icons"
+  "projects": {
+    "my-project": {
+      "architect": {
+        "build": {
+          // ...
+          "assets": [
+            {
+              "glob": "**/*",
+              "input": "node_modules/@taiga-ui/icons/src",
+              "output": "assets/taiga-ui/icons"
+            }
+          ]
+        }
+      }
     }
-  ]
+  }
 }
 ```

projects/demo/src/modules/app/home/examples/nx-assets.md

@@ -0,0 +1,18 @@
+```json
+{
+  "targets": {
+    "build": {
+      "options": {
+        // ...
+        "assets": [
+          {
+            "glob": "**/*",
+            "input": "node_modules/@taiga-ui/icons/src",
+            "output": "assets/taiga-ui/icons"
+          }
+        ]
+      }
+    }
+  }
+}
+```

projects/demo/src/modules/app/home/examples/project-json-styles.md

@@ -0,0 +1,16 @@
+```json
+{
+  "targets": {
+    "build": {
+      "options": {
+        // ...
+        "styles": [
+          "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
+          "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less",
+          "src/styles.css"
+        ]
+      }
+    }
+  }
+}
+```

projects/demo/src/modules/app/home/home.component.ts

@@ -11,6 +11,7 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 })
 export class HomeComponent {
     readonly angularJsonStyles = import('./examples/angular-json-styles.md?raw');
+    readonly projectJsonStyles = import('./examples/project-json-styles.md?raw');
     readonly angularJsonGlobalSingleStyles = import(
         './examples/angular-json-global-single-styles.md?raw'
     );
@@ -20,9 +21,9 @@ export class HomeComponent {
     readonly appTemplate = import('./examples/app-template.md?raw');
     readonly appModuleOptional = import('./examples/app-module-optional.md?raw');
     readonly assets = import('./examples/assets.md?raw');
+    readonly nxAssets = import('./examples/nx-assets.md?raw');
     readonly componentsStyles = import('./examples/components-styles.md?raw');
     readonly importLocalLess = import('./examples/import-local-less.md?raw');
-    readonly importLocalScss = import('./examples/import-local-scss.md?raw');
     readonly main = import('./examples/main.md?raw');
     readonly addons = import('./examples/addons.md?raw');
     readonly nxAdd = import('./examples/nx-add.md?raw');

projects/demo/src/modules/app/home/home.module.ts

@@ -1,18 +1,23 @@
+import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiDocCodeModule} from '@taiga-ui/addon-doc';
 import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
-import {TuiAccordionModule} from '@taiga-ui/kit';
+import {TuiIconModule} from '@taiga-ui/experimental';
+import {TuiAccordionModule, TuiTabsModule} from '@taiga-ui/kit';
 
 import {HomeComponent} from './home.component';
 
 @NgModule({
     imports: [
+        CommonModule,
         RouterModule,
         TuiDocCodeModule,
         TuiNotificationModule,
         TuiLinkModule,
         TuiAccordionModule,
+        TuiTabsModule,
+        TuiIconModule,
     ],
     declarations: [HomeComponent],
     exports: [HomeComponent],

projects/demo/src/modules/app/home/home.style.less

@@ -3,3 +3,21 @@
     padding-left: 0.9375rem;
     margin: 1rem 0;
 }
+
+.tabs {
+    z-index: 2;
+}
+
+.tab {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 0.5rem;
+    gap: 0.5rem;
+
+    .icon {
+        width: 1rem;
+        height: 1rem;
+        color: var(--tui-text-01);
+    }
+}