dyzulk/trustlab
1
0
Fork 0
mirror of https://github.com/dyzulk/trustlab.git synced 2026-01-26 05:25:36 +07:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Improve Install Guide card layout

Browse Source
This commit is contained in:
dyzulk
2026-01-08 13:42:15 +07:00
parent a42b544798
commit 0fdf796656
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/(public)/HomeClient.tsx
View File

@@ -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>