update

angular.json

@@ -91,7 +91,7 @@
                 "input": "public"
               }
             ],
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles.scss", "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"],
             "scripts": []
           }
         }

src/app/+home/feature/home.component.html

-<nz-layout>
-  <nz-sider nzCollapsible nzWidth="200px">
-    <div class="logo"></div>
-    <ul nz-menu nzTheme="dark" nzMode="inline">
-      <li nz-menu-item>
-        <span nz-icon nzType="pie-chart"></span>
-        <span>Option 1</span>
-      </li>
-      <li nz-menu-item>
-        <span nz-icon nzType="desktop"></span>
-        <span>Option 2</span>
-      </li>
-      <li nz-submenu nzTitle="User" nzIcon="user">
-        <ul>
-          <li nz-menu-item>Tom</li>
-          <li nz-menu-item>Bill</li>
-          <li nz-menu-item>Alex</li>
-        </ul>
-      </li>
-      <li nz-submenu nzTitle="Team" nzIcon="team">
-        <ul>
-          <li nz-menu-item>Team 1</li>
-          <li nz-menu-item>Team 2</li>
-        </ul>
-      </li>
-      <li nz-menu-item>
-        <span nz-icon nzType="file"></span>
-        <span>File</span>
-      </li>
-    </ul>
-  </nz-sider>
-  <nz-layout>
-    <nz-header></nz-header>
-    <nz-content>
-      <nz-breadcrumb>
-        <nz-breadcrumb-item>User</nz-breadcrumb-item>
-        <nz-breadcrumb-item>Bill</nz-breadcrumb-item>
-      </nz-breadcrumb>
-      <div class="inner-content">Bill is a cat.</div>
-    </nz-content>
-    <nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
-  </nz-layout>
-</nz-layout>
-
+<div>home</div>

src/app/+home/feature/home.component.scss

 .logo {
   height: 32px;
+  background: rgba(255, 255, 255, 0.2);
   margin: 16px;
-  background: rgba(255, 255, 255, 0.3);
+}
+
+.layout {
+  min-height: 100vh;
+}
+
+nz-sider {
+  overflow: auto;
+  height: 100%;
+  position: fixed;
+  left: 0;
+}
+
+.right-layout {
+  margin-left: 200px;
 }
 
 nz-header {
@@ -10,17 +25,14 @@ nz-header {
 }
 
 nz-content {
-  margin: 0 16px;
-}
-
-nz-breadcrumb {
-  margin: 16px 0;
+  margin: 24px 16px 0;
+  overflow: initial;
 }
 
 .inner-content {
   padding: 24px;
   background: #fff;
-  min-height: 360px;
+  text-align: center;
 }
 
 nz-footer {

src/app/+home/feature/home.component.ts

@@ -5,6 +5,10 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
 import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 import { NzMenuModule } from 'ng-zorro-antd/menu';
 import { NzIconModule } from 'ng-zorro-antd/icon';
+import { HeaderComponent } from '../../+shell/ui/components/header/feature/header.component';
+import { FooterComponent } from "../../+shell/ui/components/footer/feature/footer.component";
+
+
 @Component({
   selector: 'meu-home',
   standalone: true,
@@ -14,11 +18,12 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
     NzLayoutModule,
     NzBreadCrumbModule,
     NzMenuModule,
-    NzIconModule
-  ],
+    NzIconModule,
+    HeaderComponent,
+    FooterComponent
+],
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
-  //styleUrl: './home.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HomeComponent {}

src/app/+login/feature/login.component.html

-<div class="tw-h-screen tw-bg-gradient-to-br tw-from-indigo-600 tw-to-purple-600 tw-flex tw-items-center tw-justify-center tw-p-6">
-  <form nz-form [formGroup]="loginForm" class="tw-w-full tw-max-w-md tw-bg-white tw-rounded-lg tw-shadow-xl tw-p-8 tw-space-y-6 tw-backdrop-blur-sm" (ngSubmit)="onSubmit()">
-    <h2 class="tw-text-3xl tw-font-bold tw-text-center tw-text-gray-800">Welcome Back!</h2>
-    <p class="tw-text-center tw-text-1xl tw-text-gray-600">Please log in to your account</p>
-
-    <nz-form-item class="tw-mb-4">
-      <nz-form-label [nzFor]="'userName'" class="tw-text-gray-700 tw-font-bold">Username :</nz-form-label>
+<div class="tw-flex tw-items-center tw-justify-center tw-min-h-screen tw-bg-gray-100">
+  <form nz-form [formGroup]="loginForm" class="tw-login-form tw-bg-white tw-p-8 tw-shadow-lg tw-rounded-lg tw-w-full tw-max-w-md" (ngSubmit)="onSubmit()">
+    <nz-form-text class="tw-text-4xl tw-font-bold tw-text-center tw-mb-6">LOGIN</nz-form-text>
+    <nz-form-item>
       <nz-form-control nzErrorTip="Please input your username!">
-        <nz-input-group class="tw-w-full">
-          <div class="tw-relative tw-w-full">
-            <span class="tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-3 tw-text-gray-400">
-              <i nz-icon nzType="user" class="tw-text-xl"></i>
-            </span>
-            <input
-              type="text"
-              nz-input
-              formControlName="userName"
-              placeholder="Username"
-              class="tw-w-full tw-py-2 tw-pl-10 tw-border tw-border-gray-300 tw-rounded-md tw-focus:border-indigo-500 tw-focus:ring-2 tw-focus:ring-indigo-200 tw-outline-none"
-            />
-          </div>
+        <nz-input-group nzPrefixIcon="user">
+          <input type="text" nz-input formControlName="userName" placeholder="Username" />
         </nz-input-group>
       </nz-form-control>
     </nz-form-item>
-
-
-    <nz-form-item class="tw-mb-4">
-      <nz-form-label [nzFor]="'password'" class="tw-text-gray-700 tw-font-bold ">Password :</nz-form-label>
-      <nz-form-control nzErrorTip="Please input your password!">
-        <nz-input-group class="tw-w-full">
-          <div class="tw-relative tw-w-full">
-            <span class="tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-3 tw-text-gray-400">
-              <i nz-icon nzType="lock" class="tw-text-xl"></i>
-            </span>
-            <input
-              type="password"
-              nz-input
-              formControlName="password"
-              placeholder="Password"
-              class="tw-w-full tw-py-2 tw-pl-10 tw-border tw-border-gray-300 tw-rounded-md tw-focus:border-indigo-500 tw-focus:ring-2 tw-focus:ring-indigo-200 tw-outline-none"
-            />
-          </div>
+    <nz-form-item>
+      <nz-form-control nzErrorTip="Please input your Password!">
+        <nz-input-group nzPrefixIcon="lock">
+          <input type="password" nz-input formControlName="password" placeholder="Password" />
         </nz-input-group>
       </nz-form-control>
     </nz-form-item>
-    <p *ngIf="MgsError" class="text-error tw-mb-4">{{ MgsError }}</p>
-    <button
-      nz-button
-      class="  tw-w-full tw-bg-indigo-600 tw-text-white tw-font-semibold tw-py-2 tw-rounded-md hover:bg-submit tw-transition-colors button-login"
-      [nzType]="'primary'"
-    >
-      Log in
-    </button>
-
-    <p class="tw-text-center tw-text-gray-600 tw-mt-4">
-      Or
-      <a class="tw-text-indigo-600 tw-font-semibold hover:tw-underline cursor-pointer">register now!</a>
-    </p>
+    <div nz-row class="login-form-margin">
+      <div nz-col [nzSpan]="12">
+        <label nz-checkbox formControlName="remember">
+          <span>Remember me</span>
+        </label>
+      </div>
+      <div nz-col [nzSpan]="12">
+        <a class="login-form-forgot">Forgot password</a>
+      </div>
+    </div>
+    <button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">Log in</button>
+    <div class="text-center mt-4">
+      Or <a>register now!</a>
+    </div>
   </form>
 </div>

src/app/+shell/ui/components/footer/feature/footer.component.html

-<footer>
-    <h1>
-        It is a footer
-    </h1>
-</footer>
+<nz-footer>
+  <footer class="tw-bg-gray-900 tw-text-white tw-py-6 tw-text-center">
+    <div class="tw-container tw-mx-auto">
+      <p>© 2024 Meu Solution. All rights reserved.</p>
+      <p>Designed by Meu Solution</p>
\ No newline at end of file
+
+      <div class="tw-flex tw-justify-center tw-space-x-4 tw-mt-4">
+        <a href="#about" class="tw-text-white hover:tw-text-blue-500">About Us</a>
+        <a href="#contact" class="tw-text-white hover:tw-text-blue-500">Contact</a>
+        <a href="#privacy" class="tw-text-white hover:tw-text-blue-500">Privacy Policy</a>
+      </div>
+
+      <div class="tw-flex tw-justify-center tw-space-x-4 tw-mt-4">
+        <a href="#" target="_blank" class="tw-text-white hover:tw-text-blue-500">
+          <i nz-icon nzType="facebook" class="tw-text-2xl"></i>
+        </a>
+        <a href="#" target="_blank" class="tw-text-white hover:tw-text-blue-500">
+          <i nz-icon nzType="twitter" class="tw-text-2xl"></i>
+        </a>
+        <a href="#" target="_blank" class="tw-text-white hover:tw-text-blue-500">
+          <i nz-icon nzType="instagram" class="tw-text-2xl"></i>
+        </a>
+      </div>
+    </div>
+  </footer>
+
+
+
+</nz-footer>

src/app/+shell/ui/components/footer/feature/footer.component.ts

 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzLayoutModule } from 'ng-zorro-antd/layout';
 @Component({
   selector: 'meu-footer',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule,
+    NzLayoutModule,
+    NzIconModule
+  ],
   templateUrl: './footer.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/+shell/ui/components/header/feature/header.component.html

-<header>
-    <h1>
-        It is a header
-    </h1>
-</header>
\ No newline at end of file

src/app/+shell/ui/components/header/feature/header.component.ts

 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { NzLayoutModule } from 'ng-zorro-antd/layout';
 @Component({
   selector: 'meu-header',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule,NzLayoutModule],
   templateUrl: './header.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/+shell/ui/layout.component.html

+<nz-layout>
+  <nz-sider nzCollapsible nzWidth="200px">
+    <div class="logo"></div>
+    <ul nz-menu nzTheme="dark" nzMode="inline">
+      <li nz-menu-item>
+        <span nz-icon nzType="pie-chart"></span>
+        <span>Option 1</span>
+      </li>
+      <li nz-menu-item>
+        <span nz-icon nzType="desktop"></span>
+        <span>Option 2</span>
+      </li>
+      <li nz-submenu nzTitle="User" nzIcon="user">
+        <ul>
+          <li nz-menu-item>Tom</li>
+          <li nz-menu-item>Bill</li>
+          <li nz-menu-item>Alex</li>
+        </ul>
+      </li>
+      <li nz-submenu nzTitle="Team" nzIcon="team">
+        <ul>
+          <li nz-menu-item>Team 1</li>
+          <li nz-menu-item>Team 2</li>
+        </ul>
+      </li>
+      <li nz-menu-item>
+        <span nz-icon nzType="file"></span>
+        <span>File</span>
+      </li>
+    </ul>
+  </nz-sider>
+  <nz-layout>
+    <meu-header></meu-header>
+    <nz-content>
+      <nz-breadcrumb>
+        <nz-breadcrumb-item>User</nz-breadcrumb-item>
+        <nz-breadcrumb-item>Bill</nz-breadcrumb-item>
+      </nz-breadcrumb>
+      <router-outlet></router-outlet>
+    </nz-content>
+    <meu-footer>Ant Design ©2020 Implement By Angular</meu-footer>
+  </nz-layout>
+</nz-layout>

src/app/+shell/ui/layout.component.ts

@@ -12,6 +12,9 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { HeaderComponent } from './components/header/feature/header.component';
 import { FooterComponent } from './components/footer/feature/footer.component';
+import { NzLayoutModule } from 'ng-zorro-antd/layout';
+import { NzMenuModule } from 'ng-zorro-antd/menu';
+import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 
 @Component({
   selector: 'meu-layout',
@@ -25,16 +28,11 @@ import { FooterComponent } from './components/footer/feature/footer.component';
     NzIconModule,
     CommonModule,
     NzToolTipModule,
+    NzLayoutModule,
+    NzBreadCrumbModule,
+    NzMenuModule
   ],
-  template: `
-    <div class="tw-container">
-      <meu-header></meu-header>
-      <div class="tw-relative tw-min-h-[92dvh]">
-        <router-outlet></router-outlet>
-      </div>
-      <meu-footer></meu-footer>
-    </div>
-  `,
+  templateUrl: './layout.component.html',
   animations: [],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/styles.scss

 //tailwind
+@import "ng-zorro-antd/ng-zorro-antd.min.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;