ankhbayar/Assist_Design
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: move carousel badge inline with icon, remove prices

Browse Source
This commit is contained in:
barsa 2026-03-04 14:58:45 +09:00
parent ee85426743
commit 6d3655ac5c
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/portal/src/features/landing-page/components/ServicesCarousel.tsx
View File

@ -20,18 +20,18 @@ function ServiceConversionCard({ card }: { card: ConversionServiceCard }) {
data-service-card data-service-card
className="h-full rounded-2xl bg-card border border-border/60 px-6 py-7 shadow-sm hover:shadow-md hover:border-primary/30 transition-all duration-300 group-hover:-translate-y-1 flex flex-col" className="h-full rounded-2xl bg-card border border-border/60 px-6 py-7 shadow-sm hover:shadow-md hover:border-primary/30 transition-all duration-300 group-hover:-translate-y-1 flex flex-col"
> >
{card.badge && ( {/* Icon + Badge row */}
<span className="inline-flex self-start items-center rounded-full bg-success/10 text-success px-2.5 py-0.5 text-xs font-semibold mb-3"> <div className="flex items-center justify-between mb-4">
{card.badge} <div className="text-primary">{card.icon}</div>
</span> {card.badge && (
)} <span className="inline-flex items-center rounded-full bg-success/10 text-success px-2.5 py-0.5 text-xs font-semibold">
<div className="mb-4 text-primary">{card.icon}</div> {card.badge}
</span>
)}
</div>
<p className="text-sm text-muted-foreground mb-1">{card.problemHook}</p> <p className="text-sm text-muted-foreground mb-1">{card.problemHook}</p>
<h3 className="text-lg font-bold text-foreground mb-1">{card.title}</h3> <h3 className="text-lg font-bold text-foreground mb-1">{card.title}</h3>
<p className="text-sm text-muted-foreground mb-3 flex-grow">{card.keyBenefit}</p> <p className="text-sm text-muted-foreground mb-3 flex-grow">{card.keyBenefit}</p>
{card.priceFrom && (
<p className="text-lg font-bold text-primary mb-4">from {card.priceFrom}</p>
)}
<span className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary group-hover:gap-2.5 transition-all mt-auto"> <span className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary group-hover:gap-2.5 transition-all mt-auto">
{card.ctaLabel} {card.ctaLabel}
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />