responsiveness check

Author: Trishix

FRONTEND/src/components/ui/FloatingNav.jsx

@@ -58,7 +58,7 @@ export const FloatingNav = ({
                     duration: 0.2,
                 }}
                 className={cn(
-                    "flex max-w-fit fixed top-10 inset-x-0 mx-auto border border-purple-500/20 rounded-full bg-gray-900/80 backdrop-blur-md shadow-glow-purple-subtle z-50 pr-2 pl-8 py-2 items-center justify-center space-x-4",
+                    "flex max-w-fit fixed top-4 sm:top-10 inset-x-0 mx-auto border border-purple-500/20 rounded-full bg-gray-900/80 backdrop-blur-md shadow-glow-purple-subtle z-50 pr-2 pl-4 sm:pl-8 py-2 items-center justify-center space-x-2 sm:space-x-4",
                     className
                 )}>
 

FRONTEND/src/index.css

@@ -5,6 +5,8 @@
 @layer base {
   html {
     scroll-behavior: smooth;
+    touch-action: manipulation;
+    -webkit-text-size-adjust: 100%;
   }
 }
 

FRONTEND/src/pages/login.jsx

@@ -22,7 +22,7 @@ const Login = () => {
         <div className="absolute bottom-[-10%] left-[-10%] w-96 h-96 bg-indigo-600/20 rounded-full blur-3xl"></div>
       </div>
 
-      <div className="max-w-md w-full space-y-8 bg-gray-800/50 p-8 rounded-2xl backdrop-blur-md border border-white/10 relative z-10 shadow-2xl">
+      <div className="max-w-md w-full space-y-8 bg-gray-800/50 p-6 sm:p-8 rounded-2xl backdrop-blur-md border border-white/10 relative z-10 shadow-2xl">
         <div className="text-center">
           <img src={logo} alt="Stringz" className="h-12 mx-auto mb-6" />
           <h2 className="text-3xl font-extrabold text-white">Welcome Back</h2>

FRONTEND/src/pages/signup.jsx

@@ -22,7 +22,7 @@ const Signup = () => {
         <div className="absolute bottom-[-10%] right-[-10%] w-96 h-96 bg-purple-600/20 rounded-full blur-3xl"></div>
       </div>
 
-      <div className="max-w-md w-full space-y-8 bg-gray-800/50 p-8 rounded-2xl backdrop-blur-md border border-white/10 relative z-10 shadow-2xl">
+      <div className="max-w-md w-full space-y-8 bg-gray-800/50 p-6 sm:p-8 rounded-2xl backdrop-blur-md border border-white/10 relative z-10 shadow-2xl">
         <div className="text-center">
           <img src={logo} alt="Stringz" className="h-12 mx-auto mb-6" />
           <h2 className="text-3xl font-extrabold text-white">Create Account</h2>

FRONTEND/tailwind.config.js

@@ -8,4 +8,10 @@ export default {
         extend: {},
     },
     plugins: [],
+    // Standard Breakpoints (Default Tailwind):
+    // sm: 640px  (Large Mobile)
+    // md: 768px  (Tablet)
+    // lg: 1024px (Desktop)
+    // xl: 1280px (Large Desktop)
+    // 2xl: 1536px (Extra Large Screens)
 }