diff --git a/README.md b/README.md index fbe1682..8d54fa4 100644 --- a/README.md +++ b/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. \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index df6212b..b82d0eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,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" } @@ -14707,6 +14708,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", + "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index 7a5c146..c0d267f 100644 --- a/package.json +++ b/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" }, diff --git a/src/App.css b/src/App.css index 74b5e05..1ba58c9 100644 --- a/src/App.css +++ b/src/App.css @@ -14,7 +14,7 @@ } .App-header { - background-color: #282c34; + background-color: white; min-height: 100vh; display: flex; flex-direction: column; diff --git a/src/App.js b/src/App.js index 3784575..912c1e1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,11 @@ import logo from './logo.svg'; import './App.css'; +import Navbar from './components/Navbar/Navbar'; function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
); } diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css new file mode 100644 index 0000000..40f52b1 --- /dev/null +++ b/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; + } +} diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js new file mode 100644 index 0000000..0f52f75 --- /dev/null +++ b/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 ( + + ); +}; + +export default Navbar; diff --git a/src/index.css b/src/index.css index ec2585e..c0402a7 100644 --- a/src/index.css +++ b/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 { diff --git a/src/index.js b/src/index.js index d563c0f..770ee7d 100644 --- a/src/index.js +++ b/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( diff --git a/src/public/Resonate_Logo.png b/src/public/Resonate_Logo.png new file mode 100644 index 0000000..21cae98 Binary files /dev/null and b/src/public/Resonate_Logo.png differ