Skip to content

Updated Mobile UI #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sutanjoyb wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Updated Mobile UI #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 81 additions & 70 deletions src/Components/Features.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,37 @@ import { motion, useAnimation } from "framer-motion";
import { useEffect, useRef } from "react";

export default function Features() {
const animationControls = {
hidden: { opacity: 0, x: -500 },
visible: { opacity: 1, x: 0 },
const sectionRef = useRef(null);
const sectionControls = useAnimation();

// Detect if screen is mobile to serve optimal layout animations
const isMobile = typeof window !== "undefined" && window.innerWidth < 768;

const animationControlsLeft = {
hidden: { opacity: 0, x: isMobile ? 0 : -100, y: isMobile ? 40 : 0 },
visible: { opacity: 1, x: 0, y: 0 },
};

const sectionRef = useRef(null);
const animationControlsRight = {
hidden: { opacity: 0, x: isMobile ? 0 : 100, y: isMobile ? 40 : 0 },
visible: { opacity: 1, x: 0, y: 0 },
};

useEffect(() => {
const sectionObserver = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// When the section is in the viewport, trigger the animation
animationControls.visible && sectionControls.start("visible");
sectionControls.start("visible");
} else {
// When the section is out of the viewport, reset the animation
animationControls.hidden && sectionControls.start("hidden");
sectionControls.start("hidden");
}
});
},
{
root: null,
rootMargin: "0px",
threshold: 0.5, // Adjust the threshold as needed
threshold: 0.1, // Lower threshold ensures it fires easily on short screens
},
);

Expand All @@ -39,76 +46,80 @@ export default function Features() {
sectionObserver.unobserve(sectionRef.current);
}
};
}, []);

const sectionControls = useAnimation();
}, [sectionControls]);

return (
<>
<div
ref={sectionRef}
className="text-[#f3ead3] bg-[#2A2438] "
>
<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>
</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">
<div
ref={sectionRef}
className="text-[#f3ead3] bg-[#2A2438] py-16 px-4 overflow-hidden"
>
<div className="max-w-6xl mx-auto">
<div className="text-center mb-12">
<h2 className="font-bold text-4xl sm:text-6xl mb-4">
Ready to make some noise?
</h2>
<p className="text-xl sm:text-2xl text-slate-400 font-light">
Bringing Harmony to Your Ears.
</p>
</div>

<div className="flex flex-col lg:flex-row gap-12 lg:gap-16 justify-between items-center">
<motion.div
initial="hidden"
animate={sectionControls}
variants={animationControlsLeft}
transition={{ duration: 0.6, ease: "easeOut" }}
className="gap-6 flex flex-col w-full lg:w-1/2 items-center lg:items-start text-center lg:text-left"
>
<h3 className="text-3xl sm:text-5xl font-semibold text-cyan-400">
Get Started With Beat Bridge
</h3>

<div className="space-y-4">
<ul className="text-xl font-bold list-disc pl-5 inline-block text-left">
<li className="text-xl sm:text-2xl text-[#f3ead3]">
Who are we:
</li>
<ul className="text-base sm:text-lg list-circle pl-5 font-normal text-slate-300">
<li>We are passionate about connecting people with music</li>
</ul>
</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">

<ul className="text-xl list-disc pl-5 inline-block text-left">
<li className="text-xl sm:text-3xl text-[#f3ead3]">
Our Mission:
</li>
<ul className="text-lg sm:text-xl font-bold list-circle pl-5 text-slate-300">
<li className="font-normal text-base sm:text-lg">
To provide a platform that resonates with every music lover
</li>
</ul>
</ul>
<Link to={"/player"}>
<button className="rounded-full font-bold bg-gradient-to-r from-[#2A2438] to-[#5C5470] px-6 py-2 shadow-xl hover:shadow-inner transition-all ease-in duration-200 text-2xl text-[#f3ead3] 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>
</div>

<Link to={"/player"} className="mt-4">
<button className="rounded-full font-bold bg-gradient-to-r from-[#2A2438] to-[#5C5470] px-8 py-3 shadow-xl hover:scale-105 transition-all text-xl text-[#f3ead3] tracking-wide border border-[#f3ead3]/20">
GET STARTED
</button>
</Link>
</motion.div>

<motion.div
initial="hidden"
animate={sectionControls}
variants={animationControlsRight}
transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
className="flex flex-col items-center justify-center w-full lg:w-1/2 relative h-72"
>
<div className="absolute rounded-full w-48 h-48 sm:w-64 sm:h-64 bg-violet-800/40 blur-sm z-0"></div>
<img
src="./guitar.png"
className="w-48 h-48 sm:w-64 sm:h-64 z-10 rounded-full object-cover border-4 border-[#5C5470]/50"
alt="guitar_img"
/>
</motion.div>
</div>
</div>
</>
</div>
);
}
}
13 changes: 7 additions & 6 deletions src/Components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@ import { FaGithub } from "react-icons/fa";

const Footer = () => {
return (
<div className="h-16 flex justify-center items-center bg-gradient-to-r from-[#352F44] to-[#5C5470] text-[#f3ead3] text-2xl">

<Link to="https://github.com/pooranjoyb/BeatBridge" className="mr-2 hover:scale-125 ">
<FaGithub size={30} />
<div className="w-full h-16 flex justify-center items-center gap-4 bg-gradient-to-r from-[#352F44] to-[#5C5470] text-[#f3ead3] text-lg sm:text-2xl shadow-inner px-4 border-t border-white/5">
<Link
to="https://github.com/pooranjoyb/BeatBridge"
className="hover:scale-110 transition-transform p-1"
>
<FaGithub size={28} />
</Link>
<div>&copy; 2023 BeatBridge</div>

<div className="tracking-wide font-light">&copy; 2023 BeatBridge</div>
</div>
);
};
Expand Down
99 changes: 50 additions & 49 deletions src/Components/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,77 +8,78 @@ import Footer from "./Footer";
import { Link } from "react-router-dom";

export default function Home() {
const sectionControls = useAnimation();
const sectionRef = useRef(null);

const animationControls = {
hidden: { opacity: 0, y: 75 },
hidden: { opacity: 0, y: 30 },
visible: { opacity: 1, y: 0 },
};

const sectionRef = useRef(null);

useEffect(() => {
const sectionObserver = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
animationControls.visible && sectionControls.start("visible");
sectionControls.start("visible");
} else {
animationControls.hidden && sectionControls.start("hidden");
sectionControls.start("hidden");
}
});
},
{
root: null,
rootMargin: "0px",
threshold: 0.5,
},
{ threshold: 0.1 },
);

if (sectionRef.current) {
sectionObserver.observe(sectionRef.current);
}
if (sectionRef.current) sectionObserver.observe(sectionRef.current);
return () =>
sectionRef.current && sectionObserver.unobserve(sectionRef.current);
}, [sectionControls]);

return () => {
if (sectionRef.current) {
sectionObserver.unobserve(sectionRef.current);
}
};
}, []);
return (
<div className="flex flex-col min-h-screen bg-[#2A2438] overflow-x-hidden">
<Navbar />

const sectionControls = useAnimation();
{/* Hero Section Container */}
<div className="relative flex-grow flex items-center justify-center min-h-[80vh] md:min-h-screen px-4 py-20 text-center">
{/* Background Image Layer */}
<div className="absolute inset-0 z-0">
<img
src={Background}
alt="background"
className="w-full h-full object-cover opacity-50"
/>
{/* Overlay to ensure text readability */}
<div className="absolute inset-0 bg-black/30"></div>
</div>

return (
<>
<Navbar />
<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"
/>
{/* Content Layer - Centered via Flexbox */}
<motion.div
ref={sectionRef}
initial="hidden"
variants={animationControls}
animate={sectionControls}
transition={{ duration: 0.8, ease: "easeOut" }}
className="relative z-10 w-full max-w-4xl mx-auto flex flex-col items-center justify-center"
>
<p className="font-bold text-lg md:text-3xl tracking-tight text-cyan-400 mb-2 uppercase">
Your Gateway to a World of Rhythm
</p>

<h1 className="text-4xl sm:text-6xl md:text-8xl font-bold tracking-tighter leading-tight text-[#f3ead3]">
Welcome to <span className="block sm:inline">BeatBridge!</span>
</h1>

<Link to="/search" className="mt-8 md:mt-12">
<button className="rounded-full font-bold bg-gradient-to-r from-[#2A2438] to-[#5C5470] px-10 py-4 shadow-2xl hover:scale-105 hover:shadow-inner transition-all duration-300 text-xl md:text-2xl text-[#f3ead3] tracking-wide border border-white/10">
Explore
</button>
</Link>
</motion.div>
</div>
<motion.div
initial="hidden"
variants={animationControls}
animate={sectionControls}
transition={{ duration: 0.5, delay: 0.25 }}
className="absolute inset-0 items-center text-center justify-center mt-48 text-[#f3ead3] z-50"
>
<p className="font-bold text-3xl tracking-tight">
Your Gateway to a World of Rhythm
</p>
<p className="text-8xl font-bold mt-1 tracking-tighter">
Welcome to BeatBridge!
</p>
<Link to='/search'>
<button className="rounded-full mt-20 font-bold bg-gradient-to-r from-[#2A2438] to-[#5C5470] px-6 py-2 shadow-xl hover:shadow-inner transition-all ease-in duration-200 text-2xl text-[#f3ead3] tracking-wide">
Explore
</button>
</Link>
</motion.div>

<Features />
<PageThree />
<Footer />
</>
</div>
);
}
Loading