michal.cukrowski/j_kedzierski
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): fix Eligibility block unbalanced grid by using single column layout

Browse Source
This commit is contained in:
MichalC
2026-09-04 00:18:02 +02:00
parent f652a41349
commit b683647ee5
1 changed files with 38 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blocks/Eligibility/Component.tsx
+38 -42
View File
@@ -39,8 +39,8 @@ export const EligibilityBlock: React.FC<EligibilityProps> = ({ eyebrow, title,
)} )}
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start"> <div className="flex flex-col gap-6">
{/* Kolumna 1: Kto się kwalifikuje */} {/* 1: Kto się kwalifikuje */}
<div className="bg-card border-2 border-border rounded-2xl p-6 sm:p-8 shadow-sm"> <div className="bg-card border-2 border-border rounded-2xl p-6 sm:p-8 shadow-sm">
<div className="flex items-center gap-3 mb-6 pb-4 border-b border-border"> <div className="flex items-center gap-3 mb-6 pb-4 border-b border-border">
<div className="w-10 h-10 rounded-xl bg-accent/10 text-accent flex items-center justify-center shrink-0"> <div className="w-10 h-10 rounded-xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
@@ -66,49 +66,45 @@ export const EligibilityBlock: React.FC<EligibilityProps> = ({ eyebrow, title,
</ul> </ul>
</div> </div>
{/* Kolumna 2: Ograniczenia i Wykluczenia */} {/* 2: Limit przychodów */}
<div className="flex flex-col gap-6"> <div className="bg-card border border-border rounded-2xl p-6 sm:p-8 shadow-sm">
{/* Limit przychodów */} <div className="flex items-center gap-3 mb-4">
<div className="bg-card border border-border rounded-2xl p-6 sm:p-8 shadow-sm"> <div className="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-500 flex items-center justify-center shrink-0">
<div className="flex items-center gap-3 mb-4"> <AlertTriangle size={22} />
<div className="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-500 flex items-center justify-center shrink-0">
<AlertTriangle size={22} />
</div>
<h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground">
{limitationsTitle}
</h3>
</div> </div>
<p className="text-foreground/80 leading-relaxed text-sm sm:text-base"> <h3 className="font-heading text-xl sm:text-2xl font-bold text-foreground">
{limitationsText} {limitationsTitle}
</p> </h3>
</div>
<p className="text-foreground/80 leading-relaxed text-sm sm:text-base">
{limitationsText}
</p>
</div>
{/* 3: Wykluczenia - czerwony kolor ostrzegawczy dla bezpieczeństwa prawnego klienta */}
<div className="bg-red-500/5 border-2 border-red-500/30 rounded-2xl p-6 sm:p-8 shadow-sm">
<div className="flex items-center gap-3 mb-4 pb-3 border-b border-red-500/20">
<div className="w-10 h-10 rounded-xl bg-red-500/15 text-red-600 flex items-center justify-center shrink-0">
<XCircle size={22} />
</div>
<h3 className="font-heading text-xl sm:text-2xl font-bold text-red-950 dark:text-red-200">
{excludedTitle}
</h3>
</div> </div>
{/* Wykluczenia - świadomy wyjątek kolorystyczny (czerwony) dla bezpieczeństwa prawnego klienta */} <ul className="space-y-3">
{/* Świadomy wyjątek: czerwony kolor ostrzegawczy dla wykluczeń prawnych (poza paletą motywu) */} {(excludedItems || []).map((item, idx) => (
<div className="bg-red-500/5 border-2 border-red-500/30 rounded-2xl p-6 sm:p-8 shadow-sm"> <li key={item.id || idx} className="flex items-start gap-3">
<div className="flex items-center gap-3 mb-4 pb-3 border-b border-red-500/20"> <XCircle
<div className="w-10 h-10 rounded-xl bg-red-500/15 text-red-600 flex items-center justify-center shrink-0"> size={18}
<XCircle size={22} /> className="text-red-500 shrink-0 mt-0.5"
</div> />
<h3 className="font-heading text-xl sm:text-2xl font-bold text-red-950 dark:text-red-200"> <span className="text-foreground/90 font-medium text-sm sm:text-base leading-relaxed">
{excludedTitle} {item.text}
</h3> </span>
</div> </li>
))}
<ul className="space-y-3"> </ul>
{(excludedItems || []).map((item, idx) => (
<li key={item.id || idx} className="flex items-start gap-3">
<XCircle
size={18}
className="text-red-500 shrink-0 mt-0.5"
/>
<span className="text-foreground/90 font-medium text-sm sm:text-base leading-relaxed">
{item.text}
</span>
</li>
))}
</ul>
</div>
</div> </div>
</div> </div>