update footer, header and home compoents

src/app/header/header.component.html

@@ -1,3 +1,17 @@
-<header>
+<!-- <header>
   <span>Raghu Chagarlamudi</span>
+  <span class="spacer"></span>
+  <nav>
+    <button mat-flat-button>Basic</button>
+    <button mat-raised-button>Basic</button>
+  </nav>
+</header> -->
+<header class="header">
+  <span class="header__avatar" mat-card-avatar></span>
+  <span class="header__logo">Raghu Ch</span>
+  <span class="header__spacer"></span>
+  <nav class="header__nav">
+    <button class="header__button header__button--flat" mat-flat-button>Basic</button>
+    <button class="header__button header__button--raised" mat-raised-button>Basic</button>
+  </nav>
 </header>

src/app/header/header.component.scss

@@ -0,0 +1,57 @@
+// :host {
+//   color: var(--mat-sys-primary);
+//   background-color: var(--mat-sys-surface);
+//   padding: 8px 16px;
+//   //   color: var(--mat-sys-on-primary);
+//   //   background-color: var(--mat-sys-primary);
+// }
+
+// header {
+//   font-weight: 700;
+//   font-size: 14px;
+//   letter-spacing: 1px;
+//   text-transform: uppercase;
+// }
+
+// .spacer {
+//   flex-grow: 1;
+// }
+
+.header {
+  color: var(--mat-sys-on-primary);
+  background-color: var(--mat-sys-primary);
+  padding: 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+
+  &__avatar {
+    background-image: url('../../assests/images/rc-header-logo.jpeg');
+    background-size: cover;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+  }
+
+  &__logo {
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    letter-spacing: 0.063rem;
+    margin-left: 0.25rem;
+  }
+
+  &__spacer {
+    flex-grow: 1;
+  }
+
+  .header__nav {
+    .header__button {
+
+      &--flat {
+        &:hover {
+          opacity: 1.8; /* Apply opacity change on hover */
+        }
+      }
+    }
+  }
+}

src/app/header/header.component.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
 
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+
 @Component({
   standalone: true,
   selector: 'app-header',
-  imports: [],
+  imports: [MatButtonModule, MatCardModule],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })