Merge pull request #328 from CivicDataLab/327-bug-need-to-align-homepage-sector-cards-and-add-hover-effect-over-it

Deepthi-Chand · web-flow · commit 587a4352c7c6 · 2025-10-04T15:40:57.000+05:30
Aligned homepage sector cards and added hover effect
diff --git a/app/[locale]/(user)/components/Sectors.tsx b/app/[locale]/(user)/components/Sectors.tsx
@@ -70,7 +70,7 @@ const Sectors = () => {
               href={`/sectors/${sectors.slug}?size=9&page=1&sort=recent&sectors=${capitalizeWords(sectors.slug)}`}
               key={sectors.id}
             >
-              <div className="flex w-full items-center gap-5 rounded-4 bg-surfaceDefault p-7 shadow-card">
+              <div className="flex h-full min-h-[140px]w-full items-center gap-5 rounded-4 bg-surfaceDefault p-7 shadow-card transition-transform duration-300 ease-in-out hover:scale-105 hover:shadow-lg">
                 <div className="flex gap-4">
                   <Image
                     src={`/Sectors/${sectors.name}.svg`}

Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,7 @@ const Sectors = () => {`
`70`	`70`	href={`/sectors/${sectors.slug}?size=9&page=1&sort=recent&sectors=${capitalizeWords(sectors.slug)}`}
`71`	`71`	`key={sectors.id}`
`72`	`72`	`>`
`73`		`- <div className="flex w-full items-center gap-5 rounded-4 bg-surfaceDefault p-7 shadow-card">`
	`73`	`+ <div className="flex h-full min-h-[140px]w-full items-center gap-5 rounded-4 bg-surfaceDefault p-7 shadow-card transition-transform duration-300 ease-in-out hover:scale-105 hover:shadow-lg">`
`74`	`74`	`<div className="flex gap-4">`
`75`	`75`	`<Image`
`76`	`76`	src={`/Sectors/${sectors.name}.svg`}