Merge pull request #2 from Team-ArchItects/groupA

Homepage Banner / Nav merge

app/components/banner/Banner.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import "./banner.css";
+// import banner from './assets/cityphoto';
+import Image from 'next/image';
+
+{/* <div className="banner">
+  <img src={banner} alt="Banner" />
+  <div className="banner-content">
+      <h1>aGuideHub</h1>
+      <p>Welcome To aGuideHub! </p>
+  </div>
+</div> */}
+
+const Banner = () => {
+    return (
+      <div className="bg-[url('/assets/cityphoto.png')] bg-cover bg-center w-screen h-96">
+      <Image src="/assets/banner_content.png" width="500" height="250" alt="Banner" className="mt-16 ml-12"/>
+      <button className="bg-white w-40 flex flex-wrap p-2">
+        Next Event 
+        <Image src="/assets/arrow.png" width="20" height="20" alt="Arrow" className="ml-2 mt-1"/>
+        </button>
+      </div>
+    );
+  }
+
+  export default Banner;

app/components/banner/banner.css

@@ -0,0 +1,30 @@
+.banner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 500 px;
+    background-color: orange;
+  }
+
+  .banner img {
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .banner-content {
+    text-align: center;
+    color: #333;
+  }
+
+  .banner-content h1 {
+    font-size: 3rem;
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .banner-content p {
+    font-size: 1.5rem;
+    margin-top: 0;
+  }

app/page.js

@@ -1,10 +1,11 @@
 import Image from 'next/image'
+import Banner from 'app/components/banner/Banner.js'
 
 
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <p>This is the Homepage</p>
+      <Banner />
     </main>
   )
 }