Skip to content

Commit

Permalink
Merge pull request #58 from rasel9t6/master
Browse files Browse the repository at this point in the history 
Fixes Home Page Responsiveness
  • Loading branch information
@pooranjoyb
pooranjoyb authored Jan 8, 2024
2 parents 92d9fed + 14f1e18 commit dc9ee90
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 148 deletions.
119 changes: 63 additions & 56 deletions src/Components/Features.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
Expand Down
19 changes: 9 additions & 10 deletions src/Components/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function Home() {
root: null,
rootMargin: "0px",
threshold: 0.5,
}
},
);

if (sectionRef.current) {
Expand All @@ -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>
Expand Down
84 changes: 47 additions & 37 deletions src/Components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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"
Expand All @@ -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" />
Expand Down
Loading

0 comments on commit dc9ee90

Please sign in to comment.