feat(grid, layout, responsive, stackoverflow): add material cards with routing for improved navigation and layout presentation (#91)

Author: DuncanFaulkner

projects/apps/updated-demo/src/app/pages/grid/grid.component.ts

@@ -1,11 +1,30 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-grid',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, RouterLink, MatCardModule],
   template: `
     <h1>Grid</h1>
+    <div fxFlexFill>
+      <div fxFlexFill fxLayoutGap="40px" fxLayout="row wrap">
+        <div fxFlex="45%">
+          <mat-card routerLink="/grid">
+            <mat-card-content>
+              <div class="card-content">
+                <div class="card-title">Grid</div>
+                <div class="card-summary">
+                  CSS Grid Layout provides a powerful way to create
+                  two-dimensional layouts. It allows you to arrange elements in
+                  rows and columns with flexible alignment.
+                </div>
+              </div>
+            </mat-card-content>
+          </mat-card>
+        </div>
+      </div>
+    </div>
 
     <router-outlet />
   `,

projects/apps/updated-demo/src/app/pages/layout/layout.component.ts

@@ -1,11 +1,26 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-layout',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, RouterLink, MatCardModule],
   template: `
     <h1>Layout</h1>
+    <div fxFlex="45%">
+      <mat-card routerLink="/layout">
+        <mat-card-content>
+          <div class="card-content">
+            <div class="card-title">Layout</div>
+            <div class="card-summary">
+              Layout in CSS determines how elements are positioned and arranged.
+              Flexbox and Grid are the two main techniques for creating modern
+              layouts.
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
 
     <router-outlet />
   `,

projects/apps/updated-demo/src/app/pages/responsive/responsive.component.ts

@@ -1,11 +1,25 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-responsive',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, RouterLink, MatCardModule],
   template: `
     <h1>Responsive</h1>
+    <div fxFlex="45%">
+      <mat-card routerLink="/responsive">
+        <mat-card-content>
+          <div class="card-content">
+            <div class="card-title">Responsive</div>
+            <div class="card-summary">
+              Responsive design ensures your UI adapts to different screen
+              sizes.
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
 
     <router-outlet />
   `,

projects/apps/updated-demo/src/app/pages/stackoverflow/stackoverflow.component.ts

@@ -1,12 +1,25 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-stackoverflow',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, RouterLink, MatCardModule],
   template: `
     <h1>Stackoverflow</h1>
-
+    <div fxFlex="45%">
+      <mat-card routerLink="/stackoverflow">
+        <mat-card-content>
+          <div class="card-content">
+            <div class="card-title">Other Demos</div>
+            <div class="card-summary">
+              These Layout demos are curated from the AngularJS Material
+              documentation, GitHub Issues, StackOverflow, and CodePen.
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
     <router-outlet />
   `,
   styles: [],