Updated the navbar.jsx code file and updated few typos in the README.md file.

CONTRIBUTING.md

@@ -0,0 +1,46 @@
+# Contributing to landing-page-WIP
+
+First off, thanks for taking the time to contribute! 🎉
+
+The following is a set of guidelines for contributing to landing-page-WIP. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request.
+
+## How Can I Contribute?
+
+### Reporting Bugs
+
+This section guides you through submitting a bug report for landing-page-WIP. Following these guidelines helps maintainers and the community understand your report, reproduce the behavior, and find related reports.
+
+- **Ensure the bug was not already reported** by searching on GitHub under Issues.
+- If you're unable to find an open issue addressing the problem, open a new one. Be sure to include a **title and clear description**, as much relevant information as possible, and a **code sample** or an **executable test case** demonstrating the expected behavior that is not occurring.
+
+### Suggesting Enhancements
+
+This section guides you through submitting an enhancement suggestion for landing-page-WIP, including completely new features and minor improvements to existing functionality.
+
+- **Ensure the enhancement was not already suggested** by searching on GitHub under Issues.
+- If you find an enhancement that matches your suggestion, feel free to add your comments to the existing issue.
+- If you don't find an existing issue, you can open a new one. Be sure to include a **title and clear description**, as much relevant information as possible, and a **code sample** or an **executable test case** demonstrating the expected behavior.
+
+### Pull Requests
+
+The process described here has several goals:
+
+- Maintain landing-page-WIP's quality
+- Fix problems that are important to users
+- Engage the community in working toward the best possible landing-page-WIP
+
+Please follow these steps to have your contribution considered by the maintainers:
+
+1. **Fork** the repository.
+2. **Clone** your fork: `git clone https://github.com/vignesh1507/landing-page-WIP.git`
+3. **Create a branch** for your changes: `git checkout -b my-new-feature`
+4. **Make your changes**.
+5. **Commit your changes**: `git commit -am 'Add some feature'`
+6. **Push to the branch**: `git push origin my-new-feature`
+7. **Create a new Pull Request**.
+
+### Code of Conduct
+
+This project and everyone participating in it is governed by the landing-page-WIP Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to [email protected].
+
+Thank you for contributing to landing-page-WIP!

README.md

@@ -14,6 +14,6 @@ pnpm dev
 bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
 
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `app/page.js`. This page auto-updates as you edit the file.

src/components/updated_Navbar.jsx

@@ -0,0 +1,100 @@
+import { useEffect, useState } from "react";
+import Image from "next/image";
+
+const Navbar = () => {
+  const [visible, setVisible] = useState(false); // Start hidden
+  const [scrollPosition, setScrollPosition] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollPos = window.scrollY;
+
+      // Show when scrolling up, hide when scrolling down
+      if (currentScrollPos < scrollPosition) {
+        setVisible(true); // Scrolling up, show navbar
+      } else if (currentScrollPos > scrollPosition) {
+        setVisible(false); // Scrolling down, hide navbar
+      }
+
+      setScrollPosition(currentScrollPos);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [scrollPosition]);
+
+  return (
+    <nav
+      className={`fixed w-full z-20 top-0 transition-transform duration-300 ease-in-out ${
+        visible ? "transform translate-y-0" : "transform -translate-y-full"
+      }`}
+    >
+      <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+        <a href="#" className="flex items-center space-x-3">
+          <Image
+            src="https://flowbite.com/docs/images/logo.svg"
+            alt="Flowbite Logo"
+            width={32}
+            height={32}
+          />
+          <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
+            Flowbite
+          </span>
+        </a>
+        <div className="flex md:order-2 space-x-3">
+          <button
+            type="button"
+            className="text-white hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+          >
+            Get started
+          </button>
+        </div>
+        <div
+          className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
+          id="navbar-sticky"
+        >
+          <ul className="flex flex-col p-4 md:p-0 mt-4 font-medium md:space-x-8 md:flex-row">
+            <li>
+              <a
+                href="#"
+                className="block py-2 px-3 text-white rounded md:bg-transparent md:text-blue-700 md:p-0"
+                aria-current="page"
+              >
+                Home
+              </a>
+            </li>
+            <li>
+              <a
+                href="#"
+                className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0"
+              >
+                About
+              </a>
+            </li>
+            <li>
+              <a
+                href="#"
+                className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0"
+              >
+                Services
+              </a>
+            </li>
+            <li>
+              <a
+                href="#"
+                className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0"
+              >
+                Contact
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;