From e1138c789e034527cd985bebe181357d67529b7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rados=C5=82aw=20Gierwia=C5=82o?= <github@radziel.com>
Date: Fri, 5 Dec 2025 18:42:52 +0100
Subject: [PATCH] fix(homepage): improve responsive layout for mobile devices

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)
---
 frontend/src/pages/HomePage.jsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
index 8a8ee9a..5cf19bd 100644
--- a/frontend/src/pages/HomePage.jsx
+++ b/frontend/src/pages/HomePage.jsx
@@ -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>