Skip to content

Commit 48606a2

Browse files
dahliaclaude
andcommitted
Fix hover accent bar alignment on pain point cards
Add overflow-hidden to cards so the accent bar clips to the card's border-radius instead of misaligning. Co-Authored-By: Claude <noreply@anthropic.com>
1 parent b731309 commit 48606a2

1 file changed

Lines changed: 2 additions & 2 deletions

File tree

src/components/PainPointsSection.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const painPoints = [
6161
<div
6262
v-for="(point, index) in painPoints"
6363
:key="point.title"
64-
class="group relative p-6 rounded-2xl bg-white dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700/50 hover:border-slate-300 dark:hover:border-slate-600 transition-all duration-300 hover:shadow-lg"
64+
class="group relative p-6 rounded-2xl bg-white dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700/50 hover:border-slate-300 dark:hover:border-slate-600 transition-all duration-300 hover:shadow-lg overflow-hidden"
6565
:style="{ animationDelay: `${index * 100}ms` }"
6666
>
6767
<!-- Icon -->
@@ -82,7 +82,7 @@ const painPoints = [
8282

8383
<!-- Hover accent -->
8484
<div
85-
class="absolute inset-x-0 bottom-0 h-1 rounded-b-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-r"
85+
class="absolute inset-x-0 bottom-0 h-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-r"
8686
:class="{
8787
'from-red-500 to-orange-500': index === 0,
8888
'from-orange-500 to-amber-500': index === 1,

0 commit comments

Comments
 (0)