fix(home): equal-height service tiles + dedupe services
Service section on home page had two issues: 1. Tiles were different heights (longer content = taller tile) because .bento-tile had no min-height 2. Two service tiles showed the same title (AI Consult + Automation Consult) because src/content/services/ has 4 old + 4 -new mdx files; .slice(0, 4) grabbed the first 4 alphabetically which contained duplicate base slugs Fixes: - Add min-height: 380px + flex column to BentoTile so all tiles in a row are visually equal regardless of content length - Add dedupedServices helper in index.astro that groups services by base slug and prefers the -new version when both exist - Use dedupedServices.slice(0, 4) instead of services.slice(0, 4) Result: 4 unique services (ai-consult-new, automation-new, marketing-new, webdev-new) at equal height, filling the row. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -67,6 +67,9 @@ const revealClass = reveal ? 'reveal' : '';
|
||||
overflow: hidden;
|
||||
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
|
||||
transform-style: preserve-3d;
|
||||
min-height: 380px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.bento-tile:hover {
|
||||
transform: translateY(-4px);
|
||||
|
||||
Reference in New Issue
Block a user