From f51bdc21fb0a19ca35ce486d2c34e8356244c768 Mon Sep 17 00:00:00 2001
From: Rasel Hossen <116421413+rasel9t6@users.noreply.github.com>
Date: Thu, 4 Jan 2024 21:42:07 +0600
Subject: [PATCH 1/3] Update Tailwind in Home.jsx

---
 src/Components/Home.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/Components/Home.jsx b/src/Components/Home.jsx
index 13bd9cd..f1eb3be 100644
--- a/src/Components/Home.jsx
+++ b/src/Components/Home.jsx
@@ -49,30 +49,30 @@ export default function Home() {
 
   return (
     <>
-      <div ref={sectionRef} className="bg-cover bg-center font-josh">
+      <div ref={sectionRef} className="bg-cover bg-center font-josh h-screen">
         <img
           src={Background}
           alt="background img"
-          className="mt-[-2%] w-[100%]"
+          className="w-full h-full object-cover"
         />
       </div>
-      <div className="absolute inset-0 items-center text-center justify-center">
+      <div className="absolute inset-0 flex flex-col items-center justify-center">
         <Navbar />
         <motion.div
           initial="hidden"
           variants={animationControls}
           animate={sectionControls}
           transition={{ duration: 0.5, delay: 0.25 }}
-          className="mt-48 text-white"
+          className="mt-8 text-white text-center"
         >
-          <p className="font-bold text-3xl tracking-tight">
+          <p className="font-bold text-2xl sm:text-3xl md:text-4xl lg:text-5xl tracking-tight">
             Your Gateway to a World of Rhythm
           </p>
-          <p className="text-8xl font-bold mt-1 tracking-tighter">
+          <p className="text-4xl sm:text-6xl md:text-8xl lg:text-9xl font-bold mt-1 tracking-tighter">
             Welcome to BeatBridge!
           </p>
           <Link to='/search'>
-            <button className="rounded-full mt-20 font-bold bg-slate-100 px-6 py-2 shadow-xl hover:shadow-inner hover:transition-all ease-in hover:duration-400 text-2xl text-[#9a3412] tracking-wide">
+            <button className="mt-8 px-6 py-3 rounded-full font-bold bg-slate-100 text-2xl text-[#9a3412] hover:bg-slate-200 hover:text-[#9a3412] shadow-xl transition-all ease-in duration-400">
               Explore
             </button>
           </Link>

From e6f354bcd9814b2e680084f12e92fa15ca808412 Mon Sep 17 00:00:00 2001
From: Rasel Hossen <raselhossen052@gmail.com>
Date: Sat, 6 Jan 2024 21:16:57 +0600
Subject: [PATCH 2/3] fixes_Home_page_responsiveness

---
 src/Components/Features.jsx  | 119 ++++++++++++++++++-----------------
 src/Components/Home.jsx      |  19 +++---
 src/Components/Navbar.jsx    |  84 ++++++++++++++-----------
 src/Components/PageThree.jsx |  55 +++-------------
 4 files changed, 129 insertions(+), 148 deletions(-)

diff --git a/src/Components/Features.jsx b/src/Components/Features.jsx
index 42c3869..7658983 100644
--- a/src/Components/Features.jsx
+++ b/src/Components/Features.jsx
@@ -47,66 +47,73 @@ export default function Features() {
     <>
       <div
         ref={sectionRef}
-        className="text-white bg-gradient-to-r from-[#FF86C8] to-[#FBA277]"
+        className="text-white sm:px-20 px-10 py-10 grid grid-cols-2 sm:grid-cols-2 gap-10 bg-gradient-to-r from-[#FF86C8] to-[#FBA277]"
       >
-        <div>
-          <div>
-            <h1 className="flex font-bold justify-center text-7xl pt-20">
-              Ready to make some noise?
-            </h1>
-            <div className="flex text-3xl justify-center items-center">
-              Bringing Harmony to Your Ears.
-            </div>
+        {/* 1st div */}
+        <div className="col-span-2 md:col-span-2 text-center">
+          <h1 className="font-bold text-5xl md:text-7xl ">
+            Ready to make some noise?
+          </h1>
+          <div className="text-2xl mt-2 md:text-3xl">
+            Bringing Harmony to Your Ears.
           </div>
-          <div className="flex gap-16 justify-center items-center">
-            <motion.div
-              initial="hidden"
-              animate={sectionControls}
-              exit="hidden"
-              variants={animationControls}
-              transition={{ duration: 0.5 }}
-              className="gap-[2rem] flex flex-col"
-            >
-              <h1 className="text-6xl p-5">Get Started With Beat Bridge</h1>
-              <ul className="text-xl font-bold list-disc pl-5">
-                <li className="text-2xl">Who are we:</li>
-                <ul className="text-lg list-disc pl-5">
-                  <li>We are passionate about connecting people with music</li>
-                </ul>
+        </div>
+
+        {/* 2nd div */}
+
+        <div className="col-span-2 sm:col-span-1 text-center">
+          <motion.div
+            initial="hidden"
+            animate={sectionControls}
+            exit="hidden"
+            variants={animationControls}
+            transition={{ duration: 0.5 }}
+            className="text-center md:text-left"
+          >
+            <h1 className="text-4xl md:text-6xl">
+              Get Started With Beat Bridge
+            </h1>
+            <ul className="text-lg md:text-xl font-bold list-disc ">
+              <li className="text-2xl my-2">Who are we:</li>
+              <ul className="text-base md:text-lg list-inside ">
+                <li>We are passionate about connecting people with music</li>
               </ul>
-              <ul className="text-xl list-disc pl-5">
-                <li className="text-3xl">Our Mission:</li>
-                <ul className="text-2xl font-bold list-disc pl-5">
-                  <li className="text-xl">
-                    To provide a platform that resonates with every music lover
-                  </li>
-                </ul>
+            </ul>
+            <ul className="text-lg md:text-xl font-bold list-disc">
+              <li className="text-2xl my-2">Our Mission:</li>
+              <ul className="text-base md:text-lg  list-inside">
+                <li className="text-lg">
+                  To provide a platform that resonates with every music lover
+                </li>
               </ul>
-              <Link to={"/player"} className="w-[27%]">
-                <button className="rounded-full font-bold bg-slate-100 px-6 py-2 shadow-xl hover:shadow-inner transition-all ease-in duration-200 text-2xl text-[#9a3412] tracking-wide">
-                  GET STARTED
-                </button>
-              </Link>
-            </motion.div>
-            <motion.div
-              initial="hidden"
-              animate={sectionControls}
-              exit="hidden"
-              variants={{
-                hidden: { opacity: 0, x: 500 },
-                visible: { opacity: 1, x: 0 },
-              }}
-              transition={{ duration: 0.5 }}
-              className="flex flex-col items-center justify-center mb-40"
-            >
-              <img
-                src="./guitar.png"
-                className="relative top-[13rem] right-[1.5rem] w-64 h-64 z-10 rounded-full"
-                alt="guitat_img"
-              />
-              <div className="rounded-full w-64 z-0 h-64 bg-violet-800/60"></div>
-            </motion.div>
-          </div>
+            </ul>
+            <Link to={"/player"} className="w-full md:w-[27%]">
+              <button className="rounded-full my-5 font-bold bg-slate-100 px-4 md:px-6 py-2 md:py-3 shadow-xl hover:shadow-inner transition-all ease-in duration-200 text-xl md:text-2xl text-[#FF86C8] tracking-wide">
+                GET STARTED
+              </button>
+            </Link>
+          </motion.div>
+        </div>
+        {/* 3rd div */}
+        <div className="col-span-2 sm:col-span-1">
+          <motion.div
+            initial="hidden"
+            animate={sectionControls}
+            exit="hidden"
+            variants={{
+              hidden: { opacity: 0, x: 500 },
+              visible: { opacity: 1, x: 0 },
+            }}
+            transition={{ duration: 0.5 }}
+            className="flex justify-center sm:justify-end relative items-center"
+          >
+            <img
+              src="./guitar.png"
+              className=" w-40 h-40 bottom-4  md:w-64 md:h-64 z-10 rounded-full "
+              alt="guitar_img"
+            />
+            <div className="rounded-full absolute right-5 top-3 w-40 h-40 z-0 md:w-64 md:h-64 bg-violet-800/60"></div>
+          </motion.div>
         </div>
       </div>
     </>
diff --git a/src/Components/Home.jsx b/src/Components/Home.jsx
index 13bd9cd..4cfc8ee 100644
--- a/src/Components/Home.jsx
+++ b/src/Components/Home.jsx
@@ -30,7 +30,7 @@ export default function Home() {
         root: null,
         rootMargin: "0px",
         threshold: 0.5,
-      }
+      },
     );
 
     if (sectionRef.current) {
@@ -46,33 +46,32 @@ export default function Home() {
 
   const sectionControls = useAnimation();
 
-
   return (
     <>
-      <div ref={sectionRef} className="bg-cover bg-center font-josh">
+      <div ref={sectionRef} className="bg-cover bg-center font-josh h-screen">
         <img
           src={Background}
           alt="background img"
-          className="mt-[-2%] w-[100%]"
+          className="w-full h-full object-cover"
         />
       </div>
-      <div className="absolute inset-0 items-center text-center justify-center">
+      <div className="absolute inset-0 flex flex-col items-center justify-center">
         <Navbar />
         <motion.div
           initial="hidden"
           variants={animationControls}
           animate={sectionControls}
           transition={{ duration: 0.5, delay: 0.25 }}
-          className="mt-48 text-white"
+          className=" text-white text-center"
         >
-          <p className="font-bold text-3xl tracking-tight">
+          <p className="font-bold text-xl sm:text-2xl md:text-3xl lg:text-4xl tracking-tight">
             Your Gateway to a World of Rhythm
           </p>
-          <p className="text-8xl font-bold mt-1 tracking-tighter">
+          <p className="text-5xl sm:text-6xl lg:text-8xl font-bold mt-1 tracking-tighter">
             Welcome to BeatBridge!
           </p>
-          <Link to='/search'>
-            <button className="rounded-full mt-20 font-bold bg-slate-100 px-6 py-2 shadow-xl hover:shadow-inner hover:transition-all ease-in hover:duration-400 text-2xl text-[#9a3412] tracking-wide">
+          <Link to="/search">
+            <button className="mt-8 px-4 sm:px-6 py-2 sm:py-3 rounded-full font-bold bg-slate-100 text-xl sm:text-2xl text-[#FF86C8] hover:bg-slate-50 hover:text-[#ff34a3] shadow-xl transition-all ease-in duration-400">
               Explore
             </button>
           </Link>
diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx
index 8ded706..169d400 100644
--- a/src/Components/Navbar.jsx
+++ b/src/Components/Navbar.jsx
@@ -32,20 +32,22 @@ export default function Navbar() {
     <>
       <div className="font-bold inset-0 items-center text-center justify-center text-white fixed top-0 z-50 w-full h-16">
         <div
-          className={`pt-1 pb-1 flex flex-row justify-between  backdrop-blur-md ${navbarColor}`}
+          className={`pt-1 pb-1 flex flex-row justify-between  backdrop-blur-3xl ${navbarColor}`}
         >
           <div className="mx-auto flex flex-row mb-2">
             <h1
-              className={`text-4xl inline mt-1 ml-24 pr-2 ${navbarColor === "black" ? "text-black" : "text-white"
-                }`}
+              className={`text-4xl inline mt-1 ml-24 pr-2 ${
+                navbarColor === "black" ? "text-black" : "text-white"
+              }`}
             >
               BEAT{" "}
             </h1>
             <h1
-              className={`inline border-b-4 pt-2  tracking-tight  text-2xl ${navbarColor === "black"
-                ? "text-black border-black"
-                : "text-white border-white"
-                }`}
+              className={`inline border-b-4 pt-2  tracking-tight  text-2xl ${
+                navbarColor === "black"
+                  ? "text-black border-black"
+                  : "text-white border-white"
+              }`}
             >
               Bridge
             </h1>
@@ -67,17 +69,20 @@ export default function Navbar() {
         ></div>
       )}
       <div
-        className={`fixed top-0 right-0 h-full w-64 bg-white shadow-lg transform ${menuOpen ? "translate-x-0" : "translate-x-full"
-          } transition-transform ease-in-out duration-300 z-50 ${navbarColor === "black"
+        className={`fixed top-0 right-0 h-full w-64 bg-white shadow-lg transform ${
+          menuOpen ? "translate-x-0" : "translate-x-full"
+        } transition-transform ease-in-out duration-300 z-50 ${
+          navbarColor === "black"
             ? "text-black bg-gradient-to-r from-pink-400 to-gray-300 "
             : "text-white bg-gradient-to-r from-pink-300 to-orange-300 "
-          }`}
+        }`}
       >
         <div
-          className={`flex justify-end p-2 z-[60]  ${navbarColor === "black"
-            ? "text-black bg-gradient-to-r from-pink-400 to-gray-300 "
-            : "text-white bg-gradient-to-r from-pink-300 to-orange-300 "
-            }`}
+          className={`flex justify-end p-2 z-[60]  ${
+            navbarColor === "black"
+              ? "text-black bg-gradient-to-r from-pink-400 to-gray-300 "
+              : "text-white bg-gradient-to-r from-pink-300 to-orange-300 "
+          }`}
         >
           <button
             className="text-gray-500 hover:text-gray-700"
@@ -101,53 +106,58 @@ export default function Navbar() {
         </div>
 
         <ul className="p-4  text-xl mb-4">
-          <Link to='/'>
+          <Link to="/">
             <li
-              className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${navbarColor === "black"
-                ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
-                : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
-                }`}
+              className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
+                navbarColor === "black"
+                  ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
+                  : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
+              }`}
             >
               <FaHome className="mr-2" />
               Home
             </li>
           </Link>
-          <Link to='/search'>
+          <Link to="/search">
             <li
-              className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${navbarColor === "black"
-                ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
-                : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
-                }`}
+              className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
+                navbarColor === "black"
+                  ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
+                  : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
+              }`}
             >
               <FaGlobe className="mr-2" />
               Discover
             </li>
           </Link>
-          <Link to='/player'>
+          <Link to="/player">
             <li
-              className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${navbarColor === "black"
-                ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
-                : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
-                }`}
+              className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
+                navbarColor === "black"
+                  ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
+                  : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
+              }`}
             >
               <IoIosPlayCircle className="mr-2" />
               Music Player
             </li>
           </Link>
           <li
-            className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${navbarColor === "black"
-              ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
-              : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
-              }`}
+            className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
+              navbarColor === "black"
+                ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
+                : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
+            }`}
           >
             <BsFillPeopleFill className="mr-2" />
             Top Artists
           </li>
           <li
-            className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${navbarColor === "black"
-              ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
-              : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
-              }`}
+            className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
+              navbarColor === "black"
+                ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
+                : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
+            }`}
           >
             {" "}
             <FaHashtag className="mr-2" />
diff --git a/src/Components/PageThree.jsx b/src/Components/PageThree.jsx
index 94f8b16..7320b39 100644
--- a/src/Components/PageThree.jsx
+++ b/src/Components/PageThree.jsx
@@ -25,7 +25,7 @@ export default function PageThree() {
         root: null,
         rootMargin: "0px",
         threshold: 0.5,
-      }
+      },
     );
 
     if (sectionRef.current) {
@@ -43,11 +43,11 @@ export default function PageThree() {
 
   return (
     <div
-      className="relative h-[800px] "
+      className="relative w-full sm:h-[800px] md:h-[530px] h-[260px]"
       style={{ overflow: "hidden" }}
       ref={sectionRef}
     >
-      <img src={page3} alt="bg img" className="absolute w-full" style={{ zIndex: 1 }} />
+      <img src={page3} alt="bg img" className="absolute z-0" />
 
       <motion.div
         initial="hidden"
@@ -55,55 +55,20 @@ export default function PageThree() {
         exit="hidden"
         variants={animationControls}
         transition={{ duration: 0.5 }}
-        className="absolute mt-20"
-        style={{ zIndex: 2, top: "20%", left: "10%" }}
+        className="absolute top-10 left-10 z-10"
       >
-        <p
-          style={{
-            fontSize: "5vw",
-            fontWeight: "600",
-            lineHeight: "70px",
-            textAlign: "center",
-          }}
-        >
-          Wanna
-        </p>
-        <p style={{ fontSize: "5vw", fontWeight: "600", lineHeight: "70px" }}>
-          Contribute to
+        <p className="text-[5vw]  font-semibold flex flex-col ">
+          <span> Wanna</span> <span>Contribute to </span>
+          <span>BeatBridge?</span>
         </p>
-        <p
-          style={{
-            fontSize: "5vw",
-            fontWeight: "600",
-            lineHeight: "70px",
-            textAlign: "center",
-          }}
-        >
-          BeatBridge?
-        </p>
-        <div
-          className="absolute"
-          style={{
-            zIndex: 2,
-            backgroundColor: "#FFFFFF00",
-            border: "2px solid black",
-            textAlign: "center",
-            bottom: "-80%",
-            width: "25vw",
-            height: "70px",
-            borderRadius: "50%",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-          }}
-        >
+
+        <div className="absolute mt-10 font-bold text-2xl hover:bg-black hover:text-white transition ease-in-out transit border-2  border-black text-black py-2 px-10 text-center rounded-full z-10">
           <a
             rel="noreferrer"
             target="_blank"
             href="https://github.com/pooranjoyb/BeatBridge"
-            style={{ fontSize: "1.2vw", fontWeight: "600" }}
           >
-            github.com/pooranjoyb/BeatBridge
+            <span>GitHub</span>
           </a>
         </div>
       </motion.div>

From 14f1e182e72cb6a088ed21936212af86c5df18e2 Mon Sep 17 00:00:00 2001
From: Rasel Hossen <raselhossen052@gmail.com>
Date: Sat, 6 Jan 2024 21:33:54 +0600
Subject: [PATCH 3/3] Fixes/home_page_responsiveness

---
 src/Components/Home.jsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/Components/Home.jsx b/src/Components/Home.jsx
index 15797ce..4cfc8ee 100644
--- a/src/Components/Home.jsx
+++ b/src/Components/Home.jsx
@@ -48,16 +48,13 @@ export default function Home() {
 
   return (
     <>
-      <div ref={sectionRef} className="bg-cover bg-center font-josh h-screen">
       <div ref={sectionRef} className="bg-cover bg-center font-josh h-screen">
         <img
           src={Background}
           alt="background img"
           className="w-full h-full object-cover"
-          className="w-full h-full object-cover"
         />
       </div>
-      <div className="absolute inset-0 flex flex-col items-center justify-center">
       <div className="absolute inset-0 flex flex-col items-center justify-center">
         <Navbar />
         <motion.div