Merge pull request #1 from Team-ArchItects/groupB

Header added footer started

app/components/Footer.js

@@ -1,7 +1,29 @@
+import socLogo from "../../images/original.png"
+import Image from 'next/image'
+
 export default function Footer() {
     return (
-      <section className="flex width-screen h-4 flex-col items-center justify-between p-24 bg-white">
-        <p>This is the footer</p>
+      <section className="flex flex-col gap-4 width-screen h-4 justify-between p-16 bg-navy text-white">
+        <div className="flex justify-center space-x-2 items-center">
+        <Image  
+        src={socLogo}
+        width={150}
+        height={150}
+        alt="School of Code logo"
+      />
+        <Image  
+        src={socLogo}
+        width={150}
+        height={150}
+        alt="School of Code logo"
+      />
+        </div>
+        <div>
+        <p>This is the contact button</p>
+        </div>
+        <div>
+        <p>This is the copyright notice</p>
+        </div>
       </section>
     )
   }

app/components/Header.js

@@ -1,7 +1,71 @@
+import Image from 'next/image'
+import logo from "../../images/[email protected]"
+import meetupLogo from "../../images/meetup_white.svg"
+import linkedinLogo from "../../images/linkedin_icon_white.svg"
+import discordLogo from "../../images/discord_icon_black.svg"
+import xingLogo from "../../images/X_logo_2023_(white).png"
+import instagramLogo from "../../images/instagram_icon_black.svg"
+import githubLogo from "../../images/github-mark-white.png"
+import Link from 'next/link'
+
 export default function Header() {
     return (
-      <section className="flex width-screen h-4 flex-col items-center justify-between p-24 bg-white">
-        <p>This is the header</p>
+      <section className="grid grid-cols-3 gap-4 place-content-evenly items-center width-screen h-4 justify-between p-8 bg-navy text-white">
+      <div className="flex justify-start ">
+      <p>Menu</p>
+      <p>Page Section</p>
+      <p>Page Section</p>
+      </div>
+      <div className="flex justify-center">
+      <Image  
+        src={logo}
+        width={100}
+        height={100}
+        alt="Brumai Logo in orange"
+      />
+      </div>
+      <div className="flex justify-end space-x-2 items-center">
+      <a href='https://www.meetup.com/brum-ai/' target="_blank" rel="noopener noreferrer"> 
+      <Image  
+        src={meetupLogo}
+        width={25}
+        height={25}
+        alt="LinkedIn logo linking to the BRUM AI LinkedIn page"
+      />
+      </a>
+      <a href='https://www.linkedin.com/company/brumai/' target="_blank" rel="noopener noreferrer"> 
+      <Image  
+        src={linkedinLogo}
+        width={25}
+        height={25}
+        alt="meetup logo linking to the BRUM AI meetup page"
+      />
+      </a>
+      <a href='https://discord.gg/RJSU67kZcJ' target="_blank" rel="noopener noreferrer"> 
+      <Image  
+        src={discordLogo}
+        width={25}
+        height={25}
+        alt="Discord logo linking to the BRUM AI discord group"
+      />
+      </a>
+      <a href='https://x.com/brum_AI' target="_blank" rel="noopener noreferrer"> 
+      <Image  
+        src={xingLogo}
+        width={25}
+        height={25}
+        alt="X logo linking to the BRUM AI X page"
+      />
+      </a>
+      <a href='https://www.linkedin.com/company/brumai/' target="_blank" rel="noopener noreferrer"> 
+      <Image  
+        src={instagramLogo}
+        width={25}
+        height={25}
+        alt="Instagram logo linking to the BRUM AI instagram page"
+      />
+      </a>
+      </div>
       </section>
     )
   }

tailwind.config.js

@@ -12,6 +12,12 @@ module.exports = {
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      colors: {
+        "navy": "#171D41",
+        "magenta": "#E708FF",
+        "citrus": "#FF822E",
+        "aqua": "#00CCCC",
+      },
     },
   },
   plugins: [],