Css files

angular.json

@@ -24,17 +24,20 @@
               "zone.js"
             ],
             "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
+            "inlineStyleLanguage": "css",
             "assets": [
               {
                 "glob": "**/*",
                 "input": "public"
               }
             ],
             "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.css"
             ],
-            "scripts": [],
+            "scripts": [
+                "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+            ],
             "server": "src/main.server.ts",
             "outputMode": "server",
             "ssr": {
@@ -88,7 +91,7 @@
               "zone.js/testing"
             ],
             "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
+            "inlineStyleLanguage": "css",
             "assets": [
               {
                 "glob": "**/*",

package.json

@@ -21,6 +21,8 @@
     "@angular/platform-server": "^19.2.0",
     "@angular/router": "^19.2.0",
     "@angular/ssr": "^19.2.6",
+    "@ng-bootstrap/ng-bootstrap": "^18.0.0",
+    "bootstrap": "^5.3.6",
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
@@ -41,4 +43,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.7.2"
   }
-}
+}

src/app/app.component.html

@@ -1,3 +1 @@
-<h3>Welcome</h3>
-
 <router-outlet />

src/app/app.routes.ts

@@ -1,21 +1,57 @@
 import { Routes } from '@angular/router';
-import { MasterpageComponent } from './layout/masterpage/masterpage.component';
-import { HomeComponent } from './features/home/pages/home/home.component';
-import { AboutUsComponent } from './features/about-us/pages/about-us/about-us.component';
-import { OurServicesComponent } from './features/our-services/pages/our-services/our-services.component';
-import { ContactUsComponent } from './features/contact-us/pages/contact-us/contact-us.component';
+import { GridComponent } from './layout/grid/grid.component';
 
 export const routes: Routes = [
-     {
+  // { path: '', redirectTo: 'home', pathMatch: 'full' },
+  {
     path: '',
-    component: MasterpageComponent, // Master page
+    component: GridComponent,
     children: [
-      { path: '', component: HomeComponent, title: 'Home' },
-      { path: 'about', component: AboutUsComponent, title: 'About Us' },
-      { path: 'services', component: OurServicesComponent, title: 'Our Services' },
-      { path: 'contactus', component: ContactUsComponent, title: 'Contact Us' },
-      // Add other routes here
-    ]
+      {
+        path: '',
+        loadComponent: () =>
+          import('./features/home/pages/home/home.component').then(
+            (m) => m.HomeComponent
+          ), // Lazy load Home
+        title: 'Home',
+      },
+
+      {
+        path: 'about-us',
+        loadComponent: () =>
+          import('./features/about-us/pages/about-us/about-us.component').then(
+            (m) => m.AboutUsComponent
+          ), // Lazy load about-us
+        title: 'About Us',
+      },
+
+      {
+        path: 'our-services',
+        loadComponent: () =>
+          import(
+            './features/our-services/pages/our-services/our-services.component'
+          ).then((m) => m.OurServicesComponent), // Lazy load our-services
+        title: 'Our Services',
+      },
+
+      {
+        path: 'contact-us',
+        loadComponent: () =>
+          import(
+            './features/contact-us/pages/contact-us/contact-us.component'
+          ).then((m) => m.ContactUsComponent), // Lazy load contact-us
+        title: 'Contact Us',
+      },
+
+      {
+        path: 'page-not-found',
+        loadComponent: () =>
+          import(
+            './features/page-not-found/pages/page-not-found/page-not-found.component'
+          ).then((m) => m.PageNotFoundComponent), // Lazy load page-not-found
+        title: 'Contact Us',
+      },
+    ],
   },
-  { path: '**', redirectTo: '' } // Catch-all route
-];
+  { path: '**', redirectTo: '/page-not-found' }, // Catch-all route
+];

src/app/features/page-not-found/pages/page-not-found/page-not-found.component.html

@@ -0,0 +1 @@
+<p>page-not-found works!</p>

src/app/features/page-not-found/pages/page-not-found/page-not-found.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageNotFoundComponent } from './page-not-found.component';
+
+describe('PageNotFoundComponent', () => {
+  let component: PageNotFoundComponent;
+  let fixture: ComponentFixture<PageNotFoundComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PageNotFoundComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PageNotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/page-not-found/pages/page-not-found/page-not-found.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-not-found',
+  imports: [],
+  templateUrl: './page-not-found.component.html',
+  styleUrl: './page-not-found.component.scss'
+})
+export class PageNotFoundComponent {
+
+}

src/app/layout/grid/grid.component.html

@@ -0,0 +1,32 @@
+    <div class="site-grid site-container">
+
+        <section class="navbar-container">
+            <app-navbar></app-navbar>
+        </section>
+
+        <header class="idetity-container grid-area-common">
+            YOUR PAGE NAME
+        </header>
+
+        <section class="call-to-action-container grid-area-common">
+            CALL TO ACTION
+        </section>
+
+        <section class="page-content-container">
+
+            <section class="page-content-main grid-area-common">
+               <router-outlet/>
+            </section>
+
+            <section class="sidebar-container grid-area-common">
+                SIDE BAR
+            </section>
+
+        </section>
+
+        <footer class="footer-container grid-area-common bg-body-secondary">
+            FOOTER HERE
+        </footer>
+
+    </div>
+

src/app/layout/grid/grid.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GridComponent } from './grid.component';
+
+describe('GridComponent', () => {
+  let component: GridComponent;
+  let fixture: ComponentFixture<GridComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GridComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GridComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/layout/grid/grid.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { NavbarComponent } from '../navbar/navbar.component';
+
+@Component({
+  selector: 'app-grid',
+  imports: [RouterOutlet, NavbarComponent],
+  templateUrl: './grid.component.html',
+  styleUrl: './grid.component.scss'
+})
+export class GridComponent {
+
+}

src/app/layout/masterpage/masterpage.component.html

@@ -1,15 +0,0 @@
-<header>
-    <nav>
-       <app-navbar></app-navbar>
-    </nav>
-    <section class="carousel-container">
-        carousel goes here...
-    </section>
-</header>
-<main>
-
-</main>
-<footer>
-    Footer goes here...
-</footer>
-<router-outlet/>

src/app/layout/navbar/navbar.component.html

@@ -1,3 +1,33 @@
-<a routerLink="/">Home</a>  | 
-<a routerLink="/about-us">About Us</a>
-<router-outlet/>
+<nav class="navbar navbar-expand-sm bg-dark">
+    <div class="container-fluid">
+      <button class="navbar-toggler custom-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" 
+      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a class="nav-link" aria-current="page"routerLink="/">Home</a>
+          </li>
+
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/about-us">About Us</a>
+          </li>
+
+          <li class="nav-item">
+            <a class="nav-link" routerLink="/our-services">Our Services</a>
+          </li>
+
+          <li class="nav-item">
+            <a class="nav-link"  routerLink="/contact-us">Contact Us</a>
+          </li>
+
+          <li class="nav-item">
+            <a class="nav-link"  routerLink="/faq">FAQ</a>
+          </li>
+        </ul>
+
+      </div>
+    </div>
+</nav>

src/app/layout/navbar/navbar.component.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-import { RouterLink, RouterOutlet } from '@angular/router';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-navbar',
-  imports: [RouterLink, RouterOutlet ],
+  imports: [RouterLink ],
   templateUrl: './navbar.component.html',
   styleUrl: './navbar.component.scss'
 })

src/scss/abstracts/_functions.scss

@@ -0,0 +1,2 @@
+
+@use "./variables" as *;

src/scss/abstracts/_index.scss

@@ -1,4 +1,3 @@
 @forward 'variables';
 @forward 'mixins';
-@forward 'functions';
-@forward 'media-query';
+@forward 'functions';

src/scss/abstracts/_mixins.scss

@@ -0,0 +1,51 @@
+@use "./variables" as *;
+
+// Responsive breakpoints mixin
+@mixin respond-to($breakpoint) {
+  @if $breakpoint == sm {
+    @media (min-width: #{$breakpoint-sm}) { @content; }
+  }
+  @if $breakpoint == md {
+    @media (min-width: #{$breakpoint-md}) { @content; }
+  }
+  @if $breakpoint == lg {
+    @media (min-width: #{$breakpoint-lg}) { @content; }
+  }
+  @if $breakpoint == xl {
+    @media (min-width: #{$breakpoint-xl}) { @content; }
+  }
+}
+
+// Button mixin with variants
+@mixin button-variant($bg-color, $text-color: white) {
+  background-color: $bg-color;
+  color: $text-color;
+  border: 2px solid $bg-color;
+
+  &:hover {
+    background-color: darken($bg-color, 10%);
+    border-color: darken($bg-color, 10%);
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba($bg-color, 0.25);
+  }
+}
+
+// Flex center mixin
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Card shadow mixin
+@mixin card-shadow($level: 1) {
+  @if $level == 1 {
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  } @else if $level == 2 {
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+  } @else if $level == 3 {
+    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+  }
+}