Add services/contact components

Author: username1001

src/app/app.component.html

@@ -2,10 +2,10 @@
   <div class="container mx-auto flex justify-between items-center">
     <a href="#" class="text-white text-2xl font-semibold">Logo</a>
     <ul class="flex space-x-4">
-      <li><a href="#" class="text-white hover:text-gray-300">Home</a></li>
-      <li><a href="#" routerLink="/about" class="text-white hover:text-gray-300">About</a></li>
-      <li><a href="#" class="text-white hover:text-gray-300">Services</a></li>
-      <li><a href="#" class="text-white hover:text-gray-300">Contact</a></li>
+      <li><a href="/" class="text-white hover:text-gray-300">Home</a></li>
+      <li><a href="/about" routerLink="/about" class="text-white hover:text-gray-300">About</a></li>
+      <li><a href="/services" class="text-white hover:text-gray-300">Services</a></li>
+      <li><a href="/contact" class="text-white hover:text-gray-300">Contact</a></li>
     </ul>
   </div>
 </nav>

src/app/app.routes.ts

@@ -1,8 +1,12 @@
 import { Routes } from '@angular/router';
 import { AboutPageComponent } from './about-page/about-page.component';
 import { HomePageComponent } from './home-page/home-page.component';
+import { ServicesPageComponent } from './services-page/services-page.component';
+import { ContactPageComponent } from './contact-page/contact-page.component';
 
 export const routes: Routes = [
     {path: '', component: HomePageComponent},
-    {path: 'about', component: AboutPageComponent}
+    {path: 'about', component: AboutPageComponent},
+    {path: 'services', component: ServicesPageComponent},
+    {path: 'contact', component: ContactPageComponent}
 ];

src/app/contact-page/contact-page.component.css

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

src/app/contact-page/contact-page.component.html

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

src/app/contact-page/contact-page.component.spec.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-contact-page',
+  standalone: true,
+  imports: [],
+  templateUrl: './contact-page.component.html',
+  styleUrl: './contact-page.component.css'
+})
+export class ContactPageComponent {
+
+}

src/app/contact-page/contact-page.component.ts

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

src/app/services-page/services-page.component.css

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

src/app/services-page/services-page.component.html

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-services-page',
+  standalone: true,
+  imports: [],
+  templateUrl: './services-page.component.html',
+  styleUrl: './services-page.component.css'
+})
+export class ServicesPageComponent {
+
+}