ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 4 Pull Requests Releases Activity

fix: adjust spacing in bento card grid layout

Browse Source 
- Increased gap between cards from 4 to 6 for better visual separation
- Added bottom padding to card content area for improved spacing
This commit is contained in:
sasha-astiadi
2025-11-06 20:50:44 +01:00
parent c14c0e92d4
commit d8ce04252a
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/home/HomeTab.tsx
View File

@@ -95,7 +95,7 @@ export function HomeTab() {
Each component can be used on its own or combined into a fully sovereign cloud. Each component can be used on its own or combined into a fully sovereign cloud.
</P> </P>
<div className="mt-8 grid grid-cols-1 gap-4 sm:mt-10 lg:grid-cols-6 lg:grid-rows-3 pb-12"> <div className="mt-8 grid grid-cols-1 gap-6 sm:mt-10 lg:grid-cols-6 lg:grid-rows-3 pb-12">
{bentoCards.map((card) => ( {bentoCards.map((card) => (
<Link to={card.link} key={card.id} className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 cursor-pointer`}> <Link to={card.link} key={card.id} className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 cursor-pointer`}>
<div className={`absolute inset-0 rounded-md bg-white ${card.rounded}`} /> <div className={`absolute inset-0 rounded-md bg-white ${card.rounded}`} />
@@ -105,7 +105,7 @@ export function HomeTab() {
src={card.image} src={card.image}
className="h-50 object-cover object-center" className="h-50 object-cover object-center"
/> />
<div className="px-8 pt-4 pb-0"> <div className="px-8 pt-4 pb-6">
<h3 className="text-sm/4 font-semibold text-cyan-500">{card.eyebrow}</h3> <h3 className="text-sm/4 font-semibold text-cyan-500">{card.eyebrow}</h3>
<p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">{card.title}</p> <p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">{card.title}</p>
<p className="mt-1 max-w-lg text-sm/6 text-gray-600"> <p className="mt-1 max-w-lg text-sm/6 text-gray-600">