Fixed multiple issues (#11, #9, #12) - Subtask 1

README.md

@@ -1,4 +1,117 @@
-# Resonate-Website
+<!-- # Resonate-Website
 Resonate Landing Page 
 
 [![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)
+ -->
+
+
+Here is a sample `README.md` file for the **Resonate-Website** repository:  
+
+```markdown
+# Resonate Website
+
+![Resonate Logo](path/to/logo.png) <!-- Replace with the actual logo path if available -->
+
+The **Resonate Website** is the official platform for Resonate, designed to provide a seamless and informative experience for users. This repository contains the codebase for the website, enabling efficient updates and enhancements.  
+
+---
+
+## Table of Contents
+- [About Resonate](#about-resonate)
+- [Features](#features)
+- [Technologies Used](#technologies-used)
+- [Getting Started](#getting-started)
+- [Contributing](#contributing)
+- [License](#license)
+- [Contact](#contact)
+
+---
+
+## About Resonate
+
+Resonate is an initiative by the [AOSSIE Organization](https://aossie.org), aimed at fostering collaboration, innovation, and knowledge sharing within the open-source community. The website serves as the central hub for information, updates, and resources about Resonate.
+
+---
+
+## Features
+
+- **Modern UI/UX Design:** Intuitive navigation and aesthetically pleasing design.
+- **Dynamic Content:** Real-time updates and interactive sections.
+- **Community Focus:** Dedicated sections for contributors and community members.
+- **Responsiveness:** Optimized for all devices and screen sizes.
+- **Accessibility:** Ensures an inclusive experience for all users.
+
+---
+
+## Technologies Used
+
+The website is built using the following technologies:
+
+- **Frontend:** HTML5, CSS3, JavaScript
+- **Frameworks/Libraries:** React.js, Bootstrap
+- **Backend:** Node.js, Express.js
+- **Database:** MongoDB
+- **Others:** Git, Webpack
+
+---
+
+## Getting Started
+
+Follow the steps below to set up and run the project locally:
+
+### Prerequisites
+- [Node.js](https://nodejs.org/) (v14.x or higher)
+- [Git](https://git-scm.com/)
+- Code editor (e.g., [VS Code](https://code.visualstudio.com/))
+
+### Installation
+1. **Clone the Repository:**
+   ```bash
+   git clone https://github.com/AOSSIE-Org/Resonate-Website.git
+   cd Resonate-Website
+   ```
+
+2. **Install Dependencies:**
+   ```bash
+   npm install
+   ```
+
+3. **Run the Project:**
+   ```bash
+   npm start
+   ```
+
+4. Open the website in your browser at `http://localhost:3000`.
+
+---
+
+## Contributing
+
+We welcome contributions from the community! To contribute:
+
+1. Fork the repository.
+2. Create a new branch (`git checkout -b feature-name`).
+3. Commit your changes (`git commit -m 'Add some feature'`).
+4. Push to the branch (`git push origin feature-name`).
+5. Open a Pull Request.
+
+For detailed contribution guidelines, refer to [CONTRIBUTING.md](CONTRIBUTING.md).  
+
+---
+
+## License
+
+This project is licensed under the [MIT License](LICENSE).  
+
+---
+
+## Contact
+
+For any inquiries or support, please contact us via:
+- [GitHub Issues](https://github.com/AOSSIE-Org/Resonate-Website/issues)
+- [AOSSIE Website](https://aossie.org)
+
+We appreciate your interest in contributing to and supporting the Resonate Website!  
+```  
+
+Let me know if you want any further customization!

package.json

@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.1"
   }
 }

src/App.js

@@ -1,23 +1,22 @@
-import logo from './logo.svg';
-import './App.css';
+import Navbar from "./components/navbar";
+import Hero from "./components/hero";
+import Frames from "./components/frames";
+import TechBanner from "./components/techBanner";
+import AOBanner from "./components/aoBanner";
+import Promo from "./components/promo";
+import Footer from "./components/footer";
+
 
 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>
+    <div className="flex flex-col min-h-screen bg-white">
+      <Navbar />
+      <Hero />
+      <Frames />
+      <TechBanner />
+      <AOBanner />
+      <Promo />
+      <Footer />
     </div>
   );
 }

src/components/aoBanner.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const AoBanner = () => {
+    return (
+        <div className="flex flex-col lg:flex-row items-center lg:items-start mt-16 mx-4 lg:mx-20 gap-6 lg:gap-12 w-full min-h-screen">
+            <img src="/assets/aossie.png" alt="Australian Open-Source" className="w-full lg:w-auto h-auto" />
+            <div className="flex flex-col gap-6 lg:gap-12 mt-4 text-center lg:text-left px-4 lg:px-0">
+                <h1 className="text-4xl sm:text-5xl lg:text-6xl font-semibold text-white">
+                    We Innovate <br /> We Educate
+                </h1>
+                <p className="text-lg sm:text-xl lg:text-2xl text-gray-300 w-full mx-2 lg:mx-35 px-4 mt-4">
+                    We are an Australian not-for-profit umbrella organization for
+                    open-source projects. We believe the open-source philosophy provides
+                    a resource-efficient channel to transfer knowledge and achieve
+                    innovation and education.
+                </p>
+                <img src="/assets/socials.png" alt="Social Media" className="w-32 sm:w-40 lg:w-56 mx-auto lg:mx-0" />
+            </div>
+        </div>
+    );
+};
+
+export default AoBanner;

src/components/footer.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const Footer = () => {
+    return (
+        <footer className="bg-black flex flex-col lg:flex-row justify-between mt-16 p-4 lg:p-8">
+            <div className="flex flex-row items-center text-base ml-4 lg:ml-20">
+                <img src="/assets/copyright.png" alt="" />
+            </div>
+
+            <div className="flex flex-row justify-between items-center mx-4 lg:mr-20">
+                <div className="rounded-full bg-yellow-400 p-1 ml-1">
+                    <img src="/assets/instagram.png" alt="" />
+                </div>
+                <div className="rounded-full bg-yellow-400 p-1 ml-1">
+                    <img src="/assets/facebook.png" alt="" />
+                </div>
+                <div className="rounded-full bg-yellow-400 p-1 ml-1">
+                    <img src="/assets/twitter.png" alt="" />
+                </div>
+                <div className="rounded-full bg-yellow-400 p-1 ml-1">
+                    <img src="/assets/linkedin.png" alt="" />
+                </div>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;

src/components/frames.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+const Frames = () => {
+    return (
+        <div className="flex flex-col mt-16 px-4 lg:px-24">
+            {/* Frame 1 */}
+            <div className="flex flex-col lg:flex-row items-center justify-between mx-4 lg:mx-16">
+                <img src="/assets/group.png" alt="" className="w-full lg:w-auto" />
+                <div className="-mt-20 flex flex-col lg:flex-row items-center px-4 lg:px-20">
+                    <p className="text-3xl sm:text-4xl font-bold h-36 mr-4">1.</p>
+                    <p className="text-xl sm:text-2xl lg:text-5xl h-40">
+                        Real-time Audio Communication by joining rooms and talking to
+                        people.
+                    </p>
+                </div>
+            </div>
+
+            {/* Frame 2 */}
+            <div className="flex flex-col lg:flex-row items-center justify-between mx-4 lg:mx-16 mt-16">
+                <div className="-mt-20 flex flex-col lg:flex-row items-center px-4 lg:px-16">
+                    <p className="text-3xl sm:text-4xl font-bold h-36 mr-4">2.</p>
+                    <p className="text-xl sm:text-2xl lg:text-5xl h-40">
+                        Ability to create rooms and moderate speakers and events.
+                    </p>
+                </div>
+                <img src="/assets/group.png" alt="" className="w-full lg:w-auto" />
+            </div>
+
+            {/* Frame 3 */}
+            <div className="flex flex-col lg:flex-row items-center justify-between mx-4 lg:mx-16 mt-16">
+                <img src="/assets/group.png" alt="" className="w-full lg:w-auto" />
+                <div className="-mt-20 flex flex-col lg:flex-row items-center px-4 lg:px-20">
+                    <p className="text-3xl sm:text-4xl font-bold h-36 mr-4">3.</p>
+                    <p className="text-xl sm:text-2xl lg:text-5xl h-40">
+                        Pair chatting to enable users to find random partners to talk to
+                        in the app.
+                    </p>
+                </div>
+            </div>
+
+            {/* Frame 4 */}
+            <div className="flex flex-col lg:flex-row items-center justify-between mx-4 lg:mx-16 mt-16">
+                <div className="-mt-20 flex flex-col lg:flex-row items-center px-4 lg:px-16">
+                    <p className="text-3xl sm:text-4xl font-bold h-36 mr-4">4.</p>
+                    <p className="text-xl sm:text-2xl lg:text-5xl h-40">
+                        Real-time messaging(Coming Soon)
+                    </p>
+                </div>
+                <img src="/assets/group.png" alt="" className="w-full lg:w-auto" />
+            </div>
+        </div>
+    );
+};
+
+export default Frames;