Daniyal/title file

src/app/board/page.tsx

@@ -4,7 +4,7 @@ import Board from "@/components/board/Board";
 const Page = () => {
   return (
     <>
-      <Header />
+      <Header title="BOARD" />
       <Board />
     </>
   );

src/app/calendar/page.tsx

@@ -5,7 +5,7 @@ import Header from "@/components/Header";
 const Page = () => {
   return (
     <>
-      <Header />
+      <Header title="CALENDAR" />
       <EventCard />
       <CalendarEvents />
     </>

src/app/events/page.tsx

@@ -6,7 +6,7 @@ import Header from "@/components/Header";
 const Page = () => {
   return (
     <>
-      <Header />
+      <Header title="EVENTS" />
       <FriendshipGames />
       <Banquet />
       <HmongNewYear />

src/app/gallery/page.tsx

@@ -4,7 +4,7 @@ import Header from "@/components/Header";
 const Page = () => {
   return (
     <>
-      <Header />
+      <Header title="GALLERY" />
       <Photos />
     </>
   );

src/app/page.tsx

@@ -3,10 +3,12 @@ import About from "@/components/home/About";
 import Mission from "@/components/home/Mission";
 import Do from "@/components/home/Do";
 import Example from "../components/example";
+import Header from "@/components/Header";
 
 const Home = () => {
   return (
     <div className="">
+      <Header title="About" />
       <Hero />
       <About />
       <Mission />

src/components/Header.tsx

@@ -1,5 +1,24 @@
-const Header = () => {
-  return <div>Header</div>;
+import Image from "next/image";
+import hsa5 from "@/public/assets/hsa5.svg";
+
+type props = {
+  title: string;
+};
+
+const Header = ({ title }: props) => {
+  return (
+    <div className="flex flex-row justify-between border-t-4 border-indigo-600 bg-hsa-gray-100">
+      <div className="mt-12 flex flex-row justify-center">
+        <Image src={hsa5} alt="HSA5" className="w-[35%]" />
+      </div>
+      <div className="ml-5 flex flex-col justify-center">
+        <div className="mb-5 h-5 w-full pr-10 text-4xl">{title}</div>
+      </div>
+      <div className="mb-12 flex flex-row justify-center">
+        <Image src={hsa5} alt="HSA5" className="w-[35%]" />
+      </div>
+    </div>
+  );
 };
 
 export default Header;