refactor(ui): Improve responsive layout and spacing across components

.vscode/settings.json

@@ -1 +1,2 @@
-{}
+{
+}

app/[locale]/page.tsx

@@ -19,15 +19,15 @@ export default async function Home({
   const t = await getTranslations({ locale, namespace: "home" })
 
   return (
-    <div className="bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 h-screen">
+    <div className="bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 min-h-screen">
-      <div className="container mx-auto h-full px-4 lg:px-8 max-w-[1600px]">
+      <div className="container mx-auto px-4 lg:px-8 max-w-[1600px]">
         <Header />
-        <main className="h-full">
+        <main className="pt-16">
-          <div className="h-[calc(100vh-4rem)] flex flex-col items-center justify-center text-center px-4 relative">
+          <div className="h-[calc(100vh-4rem)] flex flex-col items-center justify-center text-center px-2 relative overflow-hidden">
             <div className="absolute inset-0 -z-10 bg-grid-primary/5" />
-            
+
-            <div className="w-full max-w-3xl mx-auto space-y-12 py-8">
+            <div className="w-full max-w-3xl mx-auto space-y-6 sm:space-y-8 py-4">
-              <div className="space-y-4">
+              <div className="space-y-2 sm:space-y-3">
                 <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-wider">
                   <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-600">
                     {t("title")}
@@ -38,7 +38,7 @@ export default async function Home({
                 </p>
               </div>
 
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-4 sm:px-0">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 px-2 sm:px-0">
                 <FeatureCard
                   icon={<Shield className="w-5 h-5" />}
                   title={t("features.privacy.title")}
@@ -61,7 +61,7 @@ export default async function Home({
                 />
               </div>
 
-              <div className="flex flex-col sm:flex-row items-center justify-center gap-4 px-4 sm:px-0">
+              <div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 px-2 sm:px-0">
                 <ActionButton isLoggedIn={!!session} />
               </div>
             </div>

app/components/auth/sign-button.tsx

@@ -34,7 +34,7 @@ export function SignButton({ size = "default" }: SignButtonProps) {
   }
 
   return (
-    <div className="flex items-center gap-4">
+    <div className="flex items-center gap-y-4 gap-x-3 sm:gap-x-4">
       <Link 
         href={`/${locale}/profile`}
         className="flex items-center gap-2 hover:opacity-80 transition-opacity"
@@ -48,7 +48,7 @@ export function SignButton({ size = "default" }: SignButtonProps) {
             className="rounded-full"
           />
         )}
-        <span className="text-sm">{session.user.name}</span>
+        <span className="hidden sm:inline-block text-sm">{session.user.name}</span>
       </Link>
       <Button onClick={() => signOut({ callbackUrl: `/${locale}` })} variant="outline" className={cn("flex-shrink-0", size === "lg" ? "px-8" : "")} size={size}>
         {t("logout")}

app/components/layout/header.tsx

@@ -9,7 +9,7 @@ export function Header() {
       <div className="container mx-auto h-full px-4">
         <div className="h-full flex items-center justify-between">
           <Logo />
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-y-4 gap-x-3 sm:gap-x-4">
             <LanguageSwitcher />
             <ThemeToggle />
             <SignButton />