From 8bdf4dd20cb7f79b32bd716d45db77583a3bb8c5 Mon Sep 17 00:00:00 2001
From: Aryan Ramesh Jain <138214350+jainaryan04@users.noreply.github.com>
Date: Sun, 6 Oct 2024 08:18:59 +0530
Subject: [PATCH] Fixes #8: Responsive landing page and navbar (#15)

---
 frontend/src/appComponents/Herosection.tsx | 56 ++++++++++++++++++++--
 frontend/src/appComponents/Navdar.tsx      |  2 +-
 frontend/src/assets/burger-menu.svg        |  6 +++
 frontend/src/assets/cross-icon.svg         |  4 ++
 4 files changed, 62 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/assets/burger-menu.svg
 create mode 100644 frontend/src/assets/cross-icon.svg

diff --git a/frontend/src/appComponents/Herosection.tsx b/frontend/src/appComponents/Herosection.tsx
index a977499..455101f 100644
--- a/frontend/src/appComponents/Herosection.tsx
+++ b/frontend/src/appComponents/Herosection.tsx
@@ -1,16 +1,25 @@
+"use client";
+
+import { useState } from "react";
 import { Dock, DockIcon } from "@/components/magicui/dock";
+import cross from "../assets/cross-icon.svg";
+import burger from "../assets/burger-menu.svg";
 
-export type IconProps = React.HTMLAttributes<SVGElement>;
 const Hero: React.FC = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
   return (
     <div className="relative z-10 flex flex-col w-full overflow-hidden text-white bg-background md:shadow-xl">
       <div className="flex flex-col items-center justify-start py-24">
-        <h1 className="text-6xl font-semibold leading-none text-center">
+        <h1 className="px-4 text-4xl lg:text-6xl font-semibold leading-none text-center">
           Welcome to dypcetclubs.live
         </h1>
-        <p className="w-2/5 pt-4 text-center md:text-xl">
+        <p className="w-3/4 lg:w-2/5 pt-4 text-center md:text-xl">
           Discover the vibrant community of clubs at our college, where students
-          come together to explore,their passions, learn new skills, and make
+          come together to explore their passions, learn new skills, and make
           lasting connections.
         </p>
         <div className="flex flex-col justify-center gap-4 pt-12 md:flex-row text-slate-200">
@@ -22,12 +31,14 @@ const Hero: React.FC = () => {
           </button>
         </div>
       </div>
+
+      
       <div className="z-20 transform transition-all duration-500 fixed top-8 hover:left-[34%] left-[35%] w-[550px] hover:w-[600px]">
         <Dock
           direction="middle"
           magnification={60}
           distance={100}
-          className="flex items-center w-full text-base border rounded-lg shadow-xl bg-white/10 backdrop-blur-sm border-white/20"
+          className="hidden lg:flex items-center w-full text-base border rounded-lg shadow-xl bg-white/10 backdrop-blur-sm border-white/20"
         >
           <DockIcon>
             <p className="flex items-center font-semibold transition-all duration-300 transform size-full">
@@ -51,6 +62,41 @@ const Hero: React.FC = () => {
           </DockIcon>
         </Dock>
       </div>
+
+      <div className="z-20 transform transition-all duration-500 fixed top-4 right-4 md:hidden">
+        <button onClick={toggleMenu}>
+          <img
+            src={isMenuOpen ? cross : burger}
+            width={50}
+            height={50}
+            alt={isMenuOpen ? "Close Menu" : "Open Menu"}
+          />
+        </button>
+      </div>
+
+     
+     {isMenuOpen && (
+        <div className="fixed inset-0 bg-white flex flex-col items-center justify-center text-6xl font-bold font-pixeboy z-[1001]">
+          <button className="absolute top-5 right-5" onClick={toggleMenu}>
+            <img
+              src={cross}
+              width={75}
+              height={75}
+              alt="Close Menu"
+            />
+          </button>
+        
+          <ul className="flex flex-col gap-8 mt-12 text-black">
+            <li className="hover:underline cursor-pointer text-center ">Home</li>
+            <li className="hover:underline cursor-pointer text-center ">Clubs</li>
+            <li className="hover:underline cursor-pointer text-center ">Events</li>
+            <li className="hover:underline cursor-pointer text-center ">Hiring</li>
+          </ul>
+        </div>
+      )}
+
+
+
     </div>
   );
 };
diff --git a/frontend/src/appComponents/Navdar.tsx b/frontend/src/appComponents/Navdar.tsx
index 645ec65..3e84d1e 100644
--- a/frontend/src/appComponents/Navdar.tsx
+++ b/frontend/src/appComponents/Navdar.tsx
@@ -20,7 +20,7 @@ const Navbar: React.FC<any> = ({ setShowLoginPage }) => {
         onClick={() => {
           setShowLoginPage(true);
         }}
-        className="text-base rounded-md shadow-xl text-black bg-white border-white border p-2 font-semibold cursor-pointer hover:scale-105 transform transition-all duration-500 hover:bg-transparent hover:text-white"
+        className="mr-[15vw] lg:mr-0 text-base rounded-md shadow-xl text-black bg-white border-white border p-2 font-semibold cursor-pointer hover:scale-105 transform transition-all duration-500 hover:bg-transparent hover:text-white"
       >
         Club login
       </div>
diff --git a/frontend/src/assets/burger-menu.svg b/frontend/src/assets/burger-menu.svg
new file mode 100644
index 0000000..cab6d1f
--- /dev/null
+++ b/frontend/src/assets/burger-menu.svg
@@ -0,0 +1,6 @@
+<svg width="19" height="13" viewBox="0 0 19 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.05556 7.38845C1.63852 7.38845 2.11111 6.91587 2.11111 6.3329C2.11111 5.74993 1.63852 5.27734 1.05556 5.27734C0.472588 5.27734 0 5.74993 0 6.3329C0 6.91587 0.472588 7.38845 1.05556 7.38845Z" fill="white"/>
+<path d="M18.0077 5.27734H5.21439C4.6664 5.27734 4.22217 5.72158 4.22217 6.26957V6.39623C4.22217 6.94422 4.6664 7.38845 5.21439 7.38845H18.0077C18.5557 7.38845 18.9999 6.94422 18.9999 6.39623V6.26957C18.9999 5.72158 18.5557 5.27734 18.0077 5.27734Z" fill="white"/>
+<path d="M18.0078 10.5557H0.992222C0.444233 10.5557 0 10.9999 0 11.5479V11.6746C0 12.2225 0.444233 12.6668 0.992222 12.6668H18.0078C18.5558 12.6668 19 12.2225 19 11.6746V11.5479C19 10.9999 18.5558 10.5557 18.0078 10.5557Z" fill="white"/>
+<path d="M18.0078 0H0.992222C0.444233 0 0 0.444233 0 0.992222V1.11889C0 1.66688 0.444233 2.11111 0.992222 2.11111H18.0078C18.5558 2.11111 19 1.66688 19 1.11889V0.992222C19 0.444233 18.5558 0 18.0078 0Z" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/assets/cross-icon.svg b/frontend/src/assets/cross-icon.svg
new file mode 100644
index 0000000..58d4983
--- /dev/null
+++ b/frontend/src/assets/cross-icon.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.99486 7.00636C6.60433 7.39689 6.60433 8.03005 6.99486 8.42058L10.58 12.0057L6.99486 15.5909C6.60433 15.9814 6.60433 16.6146 6.99486 17.0051C7.38538 17.3956 8.01855 17.3956 8.40907 17.0051L11.9942 13.4199L15.5794 17.0051C15.9699 17.3956 16.6031 17.3956 16.9936 17.0051C17.3841 16.6146 17.3841 15.9814 16.9936 15.5909L13.4084 12.0057L16.9936 8.42059C17.3841 8.03007 17.3841 7.3969 16.9936 7.00638C16.603 6.61585 15.9699 6.61585 15.5794 7.00638L11.9942 10.5915L8.40907 7.00636C8.01855 6.61584 7.38538 6.61584 6.99486 7.00636Z" fill="#0F0F0F"/>
+</svg>
\ No newline at end of file