feat(navbar): Implement navigation bar and add images

- Implemented navigation bar with desktop and mobile views.
- Added images: `public/images/hackclub-logo.png`, `public/images/maranatha-logo.png`.
- Added Hack Club Flag to the home page.

.prettierrc

@@ -1,5 +1,6 @@
 {
   "semi": true,
   "singleQuote": true,
-  "tabWidth": 2
+  "tabWidth": 2,
+  "jsxSingleQuote": true
 }

components/navbar.jsx

@@ -0,0 +1,116 @@
+/**
+ * @fileoverview Navbar Component
+ * @description The navigation bar of the website.
+ */
+
+import Link from 'next/link';
+import { useState } from 'react';
+import Image from 'next/image';
+
+export default function Navbar() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <header className='fixed top-0 w-full bg-dark-500 text-white shadow-md z-50'>
+      <div className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
+        <div className='flex justify-between items-center h-16'>
+          <div className='flex items-center'>
+            {/* Maranatha High School Logo */}
+            <div className='flex-shrink-0'>
+              <Image
+                src='/images/maranatha-logo.png'
+                alt='School Logo'
+                width={60}
+                height={40}
+                className='object-contain'
+              />
+            </div>
+
+            {/* Slash separator */}
+            <div className='flex-shrink-0'>
+              <svg
+                height='55'
+                width='55'
+                viewBox='0 0 32 32'
+                className='stroke-current text-white'
+              >
+                <path
+                  d='M22 5L9 28'
+                  stroke='currentColor'
+                  strokeWidth='1'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                ></path>
+              </svg>
+            </div>
+
+            {/* Cloud Coders Logo */}
+            <div className='flex-shrink-0'>
+              <Image
+                src='/images/logo-l.png'
+                alt='Cloud Coders Logo'
+                width={200}
+                height={40}
+                className='object-contain'
+              />
+            </div>
+          </div>
+
+          {/* Desktop Navigation */}
+          <nav className='hidden md:flex space-x-6'>
+            <Link href='/' className='hover:text-accent-300'>
+              Home
+            </Link>
+            <Link href='/about' className='hover:text-accent-300'>
+              About
+            </Link>
+            <Link href='/events' className='hover:text-accent-300'>
+              Events
+            </Link>
+            <Link href='/projects' className='hover:text-accent-300'>
+              Projects
+            </Link>
+            <Link href='/contact' className='hover:text-accent-300'>
+              Contact
+            </Link>
+          </nav>
+
+          {/* Mobile Menu Button */}
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className='md:hidden text-white focus:outline-none'
+          >
+            {isOpen ? (
+              <span>&#10005;</span> // Close icon
+            ) : (
+              <span>&#9776;</span> // Hamburger icon
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Navigation */}
+      {isOpen && (
+        <nav className='md:hidden bg-primary-600'>
+          <div className='flex flex-col space-y-4 p-4'>
+            <Link href='/' className='hover:text-accent-300'>
+              Home
+            </Link>
+            <Link href='/about' className='hover:text-accent-300'>
+              About
+            </Link>
+            <Link href='/events' className='hover:text-accent-300'>
+              Events
+            </Link>
+            <Link href='/projects' className='hover:text-accent-300'>
+              Projects
+            </Link>
+            <Link href='/contact' className='hover:text-accent-300'>
+              Contact
+            </Link>
+          </div>
+        </nav>
+      )}
+    </header>
+  );
+}

eslint.config.mjs

@@ -1,5 +1,6 @@
 export default [
   {
+    ignores: ['.next/**/*'],
     rules: {
       semi: ['error', 'always'],
       quotes: ['error', 'single'],

pages/_document.jsx

@@ -36,16 +36,16 @@ const org = {
 
 export default function Document() {
   return (
-    <Html lang="en">
+    <Html lang='en'>
       <Head>
         <meta
-          name="description"
-          content="Cloud Coders is a student-led coding club at Maranatha High School, part of Hack Club, focused on learning, creating, and building projects in tech."
+          name='description'
+          content='Cloud Coders is a student-led coding club at Maranatha High School, part of Hack Club, focused on learning, creating, and building projects in tech.'
         />
-        <meta name="author" content="Cloud Coders" />
-        <link rel="icon" href="/favicon.ico" />
+        <meta name='author' content='Cloud Coders' />
+        <link rel='icon' href='/favicon.ico' />
         <script
-          type="application/ld+json"
+          type='application/ld+json'
           dangerouslySetInnerHTML={{ __html: JSON.stringify(org) }}
         />
       </Head>

pages/index.jsx

@@ -0,0 +1,31 @@
+/**
+ * @fileoverview Home Page
+ * @description The home page of the website.
+ */
+
+import Navbar from '../components/navbar';
+
+export default function Home() {
+  return (
+    <>
+      {/* Hack Club Flag */}
+      <a href='https://hackclub.com/'>
+        <img
+          style={{
+            position: 'fixed',
+            top: 64,
+            left: '10px',
+            border: 0,
+            width: '100px',
+            zIndex: 999,
+          }}
+          src='https://assets.hackclub.com/flag-orpheus-top.svg'
+          alt='Hack Club'
+        />
+      </a>
+
+      {/* Navbar component */}
+      <Navbar />
+    </>
+  );
+}