From f85f47be04ef3633af4a8e38f10ef66484628b39 Mon Sep 17 00:00:00 2001
From: KGFCH2 <babinbid05@gmail.com>
Date: Fri, 15 May 2026 16:59:28 +0530
Subject: [PATCH] enhancement: improve mobile responsiveness and touch targets

---
 apps/web/src/routes/+page.svelte              | 36 +++++++++++++++++--
 apps/web/src/routes/u/[username]/+page.svelte | 24 +++++++++++--
 2 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index 363a491..db26121 100644
--- a/apps/web/src/routes/+page.svelte
+++ b/apps/web/src/routes/+page.svelte
@@ -300,15 +300,45 @@
   }
 
   @media (max-width: 600px) {
+    .landing {
+      padding: 1rem;
+    }
     h1 {
-      font-size: 2.5rem;
+      font-size: 2.25rem;
+      letter-spacing: -1.5px;
+    }
+    .tagline {
+      font-size: 1.1rem;
+    }
+    .description {
+      font-size: 1rem;
+      margin-top: 1rem;
     }
     .hero {
-      padding: 3rem 0 2rem;
+      padding: 4rem 0 3rem;
     }
     .cta-group {
       flex-direction: column;
-      align-items: center;
+      align-items: stretch;
+      gap: 0.75rem;
+      padding: 0 1rem;
+    }
+    .btn {
+      justify-content: center;
+      padding: 0.875rem;
     }
+    .features {
+      padding: 1.5rem 0;
+      gap: 1rem;
+    }
+    .feature-card {
+      padding: 1.5rem;
+    }
+  }
+
+  /* Active states for better touch feedback */
+  .btn:active, .theme-toggle:active, .feature-card:active {
+    transform: scale(0.98);
+    transition: transform 0.1s ease;
   }
 </style>
diff --git a/apps/web/src/routes/u/[username]/+page.svelte b/apps/web/src/routes/u/[username]/+page.svelte
index f7750ec..28b63a8 100644
--- a/apps/web/src/routes/u/[username]/+page.svelte
+++ b/apps/web/src/routes/u/[username]/+page.svelte
@@ -299,7 +299,27 @@
   }
 
   @media (max-width: 500px) {
-    .profile-page { padding: 1rem 0.75rem; }
-    .display-name { font-size: 1.5rem; }
+    .profile-page { 
+      padding: 1.5rem 0.75rem; 
+    }
+    .display-name { 
+      font-size: 1.5rem; 
+    }
+    .profile-header {
+      padding: 2rem 1.25rem 1rem;
+    }
+    .avatar {
+      width: 72px;
+      height: 72px;
+    }
+    .platform-tile {
+      padding: 1rem;
+    }
+  }
+
+  /* Active states for better touch feedback */
+  .platform-tile:active, .cta-link:active {
+    transform: scale(0.98);
+    transition: transform 0.1s ease;
   }
 </style>