Minor UI changes

pooranjoyb · Dec 30, 2023 · 2f23497 · 2f23497
1 parent 4c771ad
commit 2f23497
Show file tree

Hide file tree

Showing 8 changed files with 421 additions and 124 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,8 +1,10 @@
-@import url("https://fonts.googleapis.com/css2?family=Jost&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Raleway:wght@300&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 body{
     overflow-x: hidden;
+    font-family: 'Raleway', sans-serif;
 }
diff --git a/src/Components/Features.jsx b/src/Components/Features.jsx
@@ -51,14 +51,14 @@ export default function Features() {
       >
         <div>
           <div>
-            <h1 className="flex font-josh font-bold justify-center text-7xl pt-20">
+            <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 font-josh">
+            <div className="flex text-3xl justify-center items-center">
               Bringing Harmony to Your Ears.
             </div>
           </div>
-          <div className="flex gap-16 justify-center items-center font-josh">
+          <div className="flex gap-16 justify-center items-center">
             <motion.div
               initial="hidden"
               animate={sectionControls}

diff --git a/src/Components/Home.jsx b/src/Components/Home.jsx
@@ -5,6 +5,7 @@ import PageThree from "./PageThree";
 import Features from "./Features";
 import Navbar from "./Navbar";
 import Footer from "./Footer";
+import { Link } from "react-router-dom";
 
 export default function Home() {
   const animationControls = {
@@ -19,18 +20,16 @@ export default function Home() {
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            // When the section is in the viewport, trigger the animation
             animationControls.visible && sectionControls.start("visible");
           } else {
-            // When the section is out of the viewport, reset the animation
             animationControls.hidden && sectionControls.start("hidden");
           }
         });
       },
       {
         root: null,
         rootMargin: "0px",
-        threshold: 0.5, // Adjust the threshold as needed
+        threshold: 0.5,
       }
     );
 
@@ -72,15 +71,17 @@ export default function Home() {
           <p className="text-8xl font-bold mt-1 tracking-tighter">
             Welcome to BeatBridge!
           </p>
-          <button className="rounded-full mt-20 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">
-            Explore
-          </button>
+          <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">
+              Explore
+            </button>
+          </Link>
         </motion.div>
       </div>
 
       <Features />
       <PageThree />
-      <Footer/>
+      <Footer />
     </>
   );
 }
diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx
@@ -1,10 +1,11 @@
 import { FaHome } from "react-icons/fa";
-import { GrGallery } from "react-icons/gr";
 import { BsFillPeopleFill } from "react-icons/bs";
 import { FaHashtag } from "react-icons/fa";
 import Hamburger from "/hamburger.png";
 import { useState, useEffect } from "react";
-import { BiImages } from "react-icons/bi";
+import { IoIosPlayCircle } from "react-icons/io";
+import { Link } from "react-router-dom";
+
 export default function Navbar() {
   const [menuOpen, setMenuOpen] = useState(false);
   const [navbarColor, setNavbarColor] = useState("transparent");
@@ -28,24 +29,22 @@ export default function Navbar() {
 
   return (
     <>
-      <div className="inset-0 items-center text-center justify-center text-white fixed top-0 z-50 w-full h-16">
+      <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}`}
         >
           <div className="mx-auto flex flex-row mb-2">
             <h1
-              className={`font-normal 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 font-serif tracking-tight  text-2xl ${
-                navbarColor === "black"
+              className={`inline border-b-4 pt-2  tracking-tight  text-2xl ${navbarColor === "black"
                   ? "text-black border-black"
                   : "text-white border-white"
-              }`}
+                }`}
             >
               Bridge
             </h1>
@@ -59,7 +58,6 @@ export default function Navbar() {
             />
           </div>
         </div>
-        {/* <hr className="border-y-[1px]" /> */}
       </div>
       {menuOpen && (
         <div
@@ -68,20 +66,17 @@ 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"
+          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"
@@ -104,43 +99,43 @@ export default function Navbar() {
           </button>
         </div>
 
-        <ul className="p-4 font-serif text-xl mb-4">
+        <ul className="p-4  text-xl mb-4">
           <li
-            className={`py-2 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
-              navbarColor === "black"
+            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" />
-            Discover
+            <Link to='/search'>
+              Discover
+            </Link>
           </li>
           <li
-            className={`py-2 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
-              navbarColor === "black"
+            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 "
-            }`}
+              }`}
           >
-            <BiImages className="mr-2" />
-            Around You
+            <IoIosPlayCircle className="mr-2" />
+            <Link to='/player'>
+            Music Player
+            </Link>
           </li>
           <li
-            className={`py-2 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
-              navbarColor === "black"
+            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-2 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
-              navbarColor === "black"
+            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
@@ -15,18 +15,16 @@ export default function PageThree() {
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            // When the section is in the viewport, trigger the animation
             animationControls.visible && sectionControls.start("visible");
           } else {
-            // When the section is out of the viewport, reset the animation
             animationControls.hidden && sectionControls.start("hidden");
           }
         });
       },
       {
         root: null,
         rootMargin: "0px",
-        threshold: 0.5, // Adjust the threshold as needed
+        threshold: 0.5,
       }
     );
 
@@ -45,7 +43,7 @@ export default function PageThree() {
 
   return (
     <div
-      className="relative h-[800px] font-josh"
+      className="relative h-[800px] "
       style={{ overflow: "hidden" }}
       ref={sectionRef}
     >

diff --git a/src/main.jsx b/src/main.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import App from "./App.jsx";
 import Home from "./Components/Home.jsx";
 import ReactDOM from "react-dom/client";
+import SongSearch from "./Components/SongSearch.jsx";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import "./index.css";
 import "./App.css";
@@ -15,6 +16,10 @@ const MyApp = createBrowserRouter([
     path: "/player",
     element: <App />,
   },
+  {
+    path: "/search",
+    element: <SongSearch />,
+  },
 ]);
 
 ReactDOM.createRoot(document.getElementById("root")).render(