From 0fdf7966560a2e1b9802c00f264ed2928cad0742 Mon Sep 17 00:00:00 2001
From: dyzulk <66510723+dyzulk@users.noreply.github.com>
Date: Thu, 8 Jan 2026 13:42:15 +0700
Subject: [PATCH] Refactor: Improve Install Guide card layout

---
 src/app/(public)/HomeClient.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/app/(public)/HomeClient.tsx b/src/app/(public)/HomeClient.tsx
index 751fa49..7d17c7f 100644
--- a/src/app/(public)/HomeClient.tsx
+++ b/src/app/(public)/HomeClient.tsx
@@ -152,19 +152,21 @@ function OsGuideContent({ title, steps, selectedOs, certificates, t, linuxDistro
 
             {/* Global Bundle Section (Recommendations) */}
             <div className="pt-8 border-t border-dashed border-gray-100 dark:border-gray-700">
-                <div className="bg-brand-500/5 dark:bg-brand-400/5 rounded-2xl p-6 border border-brand-500/10 dark:border-brand-400/10">
-                    <div className="flex items-start gap-4">
-                        <div className="w-10 h-10 rounded-xl bg-brand-500 text-white flex items-center justify-center flex-shrink-0 shadow-lg shadow-brand-500/20">
+                <div className="relative bg-brand-500/5 dark:bg-brand-400/5 rounded-2xl p-6 border border-brand-500/10 dark:border-brand-400/10">
+                    <div className="absolute top-4 right-4">
+                         <Badge variant="brand">{t('recommended')}</Badge>
+                    </div>
+                    <div className="flex flex-col sm:flex-row items-start gap-4">
+                        <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-brand-500 to-brand-600 text-white flex items-center justify-center flex-shrink-0 shadow-lg shadow-brand-500/20">
                             <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                             </svg>
                         </div>
-                        <div className="flex-1">
-                            <h5 className="font-bold text-gray-900 dark:text-white flex items-center gap-2 mb-1">
+                        <div className="flex-1 pt-1">
+                            <h5 className="font-bold text-lg text-gray-900 dark:text-white mb-2 pr-20">
                                 {t('bundle_guide_title')}
-                                <Badge variant="brand">{t('recommended')}</Badge>
                             </h5>
-                            <p className="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">
+                            <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed mb-6 max-w-xl">
                                 {t('bundle_guide_desc')}
                             </p>