feat: Navbar creation (Subtask -1)

README.md

@@ -1,4 +1,53 @@
 # Resonate-Website
-Resonate Landing Page 
+
+**Resonate Landing Page**  
+
+This repository contains the code for the **Resonate** — a page designed to showcase our platform, provide users with an overview of its features, and direct them to relevant rooms or store listings based on whether they have the app installed or not.
+
+### Figma Design
+
+You can view the [Figma Design](https://www.figma.com/file/b3DxpcvL98arH8Pru0hTEa/Resonate-Landing-Page?type=design&node-id=0%3A1&mode=design&t=IzEKsikv4qAp7jV8-1) for the landing page layout and overall structure.
 
 [![Figma Design](https://img.shields.io/badge/Figma-Design-%23F24E1E?style=for-the-badge&logo=figma&logoColor=white)](https://www.figma.com/file/b3DxpcvL98arH8Pru0hTEa/Resonate-Landing-Page?type=design&node-id=0%3A1&mode=design&t=IzEKsikv4qAp7jV8-1)
+
+### Project Overview
+
+**Resonate** is a platform currently under development, and this landing page serves as the **first touchpoint** for users. The goal of the landing page is to provide clear calls to action based on the user's app status. If the user has the app installed, they will be directed to the relevant rooms. If not, they will be shown a store listing for easy installation.
+
+---
+
+### Technologies Used
+
+- **React** for building the user interface
+- **Figma** for Design
+
+---
+
+### Development Setup
+
+To get started with the development, clone the repository:
+
+```bash
+git clone https://github.com/yourusername/Resonate-Website.git
+cd Resonate-Website
+```
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Run the project locally:
+
+```bash
+npm start
+```
+
+Visit `http://localhost:3000` in your browser.
+
+---
+
+### Contributing
+
+Feel free to contribute to the project. Open issues, fork the repository, and submit pull requests for new features, bug fixes, or improvements.

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.4.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -14,7 +14,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: white;
   min-height: 100vh;
   display: flex;
   flex-direction: column;

src/App.js

@@ -1,23 +1,11 @@
 import logo from './logo.svg';
 import './App.css';
+import Navbar from './components/Navbar/Navbar';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Navbar/>
     </div>
   );
 }

src/components/Navbar/Navbar.css

@@ -0,0 +1,107 @@
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #1c1c1c;
+    padding: 10px 20px;
+    border-radius: 30px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
+    margin: 30px;
+    position: relative;
+}
+
+.navbar-left .app-name {
+    color: white;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.navbar-right {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.icon-link {
+    color: #fff;
+    text-decoration: none;
+    font-size: 16px;
+}
+
+.icon {
+    width: 25px;
+    height: 25px;
+}
+
+.download-button {
+    background-color: #f7cc4d;
+    color: #1c1c1c;
+    border: none;
+    padding: 8px 15px;
+    font-size: 16px;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.download-button:hover {
+    background-color: #e6b645;
+}
+
+.menu {
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 25px;
+    height: 25px;
+    cursor: pointer;
+}
+
+.menu span {
+    height: 0.4rem;
+    width: 100%;
+    background-color: #fff;
+    border-radius: 0.2rem;
+}
+
+@media (max-width: 480px) {
+    .navbar {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .menu {
+        display: flex;
+        position: absolute;
+        right: 20px;
+    }
+
+    .navbar-right {
+        display: none; 
+        flex-direction: column;
+        width: 100%;
+        align-items: center;
+        margin-top: 20px;
+    }
+
+    .navbar-right.open {
+        display: flex;
+    }
+
+    .navbar-right.open a,
+    .navbar-right.open button {
+        text-align: center;
+        margin: 0;
+        width: 100%;
+    }
+
+    .navbar-right.open a {
+        padding: 10px;
+        background-color: #333;
+        border-radius: 5px;
+    }
+
+    .navbar-right.open button {
+        background-color: #f7cc4d;
+    }
+}

src/components/Navbar/Navbar.js

@@ -0,0 +1,45 @@
+import React from "react";
+import "./Navbar.css";
+import Resonate_Logo from "../../public/Resonate_Logo.png";
+import { FaExternalLinkAlt } from "react-icons/fa";
+import { SiGithub } from "react-icons/si";
+import { useState } from "react";
+
+const Navbar = () => {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  return (
+    <nav className="navbar">
+      <div className="navbar-left">
+        <img src={Resonate_Logo} alt="Resonate_Logo" className="icon" />
+        <span className="app-name">Resonate</span>
+      </div>
+
+      {/* Hamburger Menu */}
+      <div className="menu" onClick={() => setMenuOpen(!menuOpen)}>
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+
+      {/* Links */}
+      <div className={`navbar-right ${menuOpen ? "open" : ""}`}>
+        <a href="https://aossie.org/" className="icon-link">
+          AOSSIE
+          <FaExternalLinkAlt color="white" style={{ marginLeft: "5px" }} />
+        </a>
+        <a
+          href="https://github.com/AOSSIE-Org"
+          className="icon-link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <SiGithub color="white" className="icon" />
+        </a>
+        <button className="download-button">Download Now</button>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

src/index.css

@@ -1,10 +1,5 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  background-color: white;
 }
 
 code {

src/index.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />