radziel/spotlightcam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(homepage): improve responsive layout for mobile devices

Browse Source 
Navigation:
- Reduce logo and text size on mobile (w-6 h-6 -> w-8 h-8 on sm+)
- Reduce spacing between nav items (space-x-2 -> space-x-4 on sm+)
- Hide 'Dashboard' text on mobile, show icon only
- Adjust padding and text sizes for all nav buttons
- Add whitespace-nowrap to 'Get Started' button

Hero section:
- Responsive heading sizes (text-3xl -> text-6xl)
- Responsive paragraph sizes (text-base -> text-2xl)
- Responsive padding (py-12 -> py-20)
- Responsive button sizes (px-6/py-3 -> px-8/py-4)
This commit is contained in:
Radosław Gierwiało
2025-12-05 18:42:52 +01:00
parent 00825d56b6
commit e1138c789e
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/pages/HomePage.jsx
View File

@@ -18,22 +18,22 @@ const HomePage = () => {
<nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<div className="flex justify-between items-center">
<div className="flex items-center space-x-2">
<Video className="w-8 h-8 text-white" />
<span className="text-2xl font-bold text-white">spotlight.cam</span>
<Video className="w-6 h-6 sm:w-8 sm:h-8 text-white" />
<span className="text-xl sm:text-2xl font-bold text-white">spotlight.cam</span>
</div>
<div className="flex space-x-4">
<div className="flex space-x-2 sm:space-x-4">
{user ? (
<>
<Link
to="/dashboard"
className="flex items-center space-x-2 px-4 py-2 text-white hover:text-primary-100 transition"
className="flex items-center space-x-1 sm:space-x-2 px-2 sm:px-4 py-2 text-white hover:text-primary-100 transition text-sm sm:text-base"
>
<LayoutDashboard className="w-4 h-4" />
<span>Dashboard</span>
<span className="hidden sm:inline">Dashboard</span>
</Link>
<button
onClick={handleLogout}
className="flex items-center space-x-2 px-6 py-2 bg-white text-primary-600 rounded-lg font-medium hover:bg-primary-50 transition"
className="flex items-center space-x-1 sm:space-x-2 px-3 sm:px-6 py-2 bg-white text-primary-600 rounded-lg font-medium hover:bg-primary-50 transition text-sm sm:text-base"
>
<LogOut className="w-4 h-4" />
<span>Logout</span>
@@ -43,13 +43,13 @@ const HomePage = () => {
<>
<Link
to="/login"
className="px-4 py-2 text-white hover:text-primary-100 transition"
className="px-3 sm:px-4 py-2 text-white hover:text-primary-100 transition text-sm sm:text-base"
>
Sign in
</Link>
<Link
to="/register"
className="px-6 py-2 bg-white text-primary-600 rounded-lg font-medium hover:bg-primary-50 transition"
className="px-4 sm:px-6 py-2 bg-white text-primary-600 rounded-lg font-medium hover:bg-primary-50 transition text-sm sm:text-base whitespace-nowrap"
>
Get Started
</Link>
@@ -59,17 +59,17 @@ const HomePage = () => {
</div>
</nav>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
<h1 className="text-5xl md:text-6xl font-bold text-white mb-6">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16 md:py-20 text-center">
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4 sm:mb-6">
Capture Every Round Together
</h1>
<p className="text-xl md:text-2xl text-primary-100 mb-10 max-w-3xl mx-auto">
<p className="text-base sm:text-lg md:text-xl lg:text-2xl text-primary-100 mb-8 sm:mb-10 max-w-3xl mx-auto px-4">
Connect with competitors, record each other's rounds, and swap videos in seconds.
</p>
<div className="flex justify-center">
<Link
to={user ? "/dashboard" : "/register"}
className="px-8 py-4 bg-white text-primary-600 rounded-lg text-lg font-semibold hover:bg-primary-50 transition shadow-lg"
className="px-6 sm:px-8 py-3 sm:py-4 bg-white text-primary-600 rounded-lg text-base sm:text-lg font-semibold hover:bg-primary-50 transition shadow-lg"
>
{user ? "Go to Dashboard" : "Start Collaborating"}
</Link>