refactor: standardize vertical spacing across feature sections

- Reduced py-10 to py-8 for consistent spacing in feature grids and carousels
- Restructured HomeHosting and HomeTab sections with full-width border layout pattern
- Replaced HomeTab card grid with bento-style component showcase layout
This commit is contained in:
2025-11-06 19:46:09 +01:00
parent 7ee6da68fe
commit ae3e78f75a
12 changed files with 194 additions and 122 deletions

View File

@@ -59,7 +59,7 @@ export default function FeaturesSectionDemo() {
},
];
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 relative z-10 py-10 max-w-7xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 relative z-10 py-8 max-w-7xl mx-auto">
{features.map((feature, index) => (
<Feature key={feature.title} {...feature} index={index} />
))}
@@ -81,7 +81,7 @@ const Feature = ({
return (
<div
className={cn(
"flex flex-col lg:border-r py-10 relative group/feature dark:border-neutral-800",
"flex flex-col lg:border-r py-8 relative group/feature dark:border-neutral-800",
(index === 0 || index === 4) && "lg:border-l dark:border-neutral-800",
index < 4 && "lg:border-b dark:border-neutral-800"
)}

View File

@@ -40,7 +40,7 @@ export default function FeaturesSectionDemo() {
},
];
return (
<div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
<div className="relative z-20 py-8 lg:py-40 max-w-7xl mx-auto">
<div className="px-8">
<h4 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
Packed with thousands of features

View File

@@ -62,7 +62,7 @@ export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => {
return (
<div className="relative w-full">
<div
className="flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-10 [scrollbar-width:none] md:py-20"
className="flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-8 [scrollbar-width:none] md:py-20"
ref={carouselRef}
onScroll={checkScrollability}
>
@@ -135,7 +135,7 @@ export const Card = ({
layoutId={layout ? `card-${card.title}` : undefined}
className="relative z-10 flex h-104 w-80 flex-col justify-between overflow-hidden rounded-3xl p-8 md:h-120 md:w-96"
>
<div className="flex h-2/5 flex-col justify-center py-6 px-4">
<div className="flex h-2/5 flex-col justify-center py-4 px-4">
<motion.p
layoutId={layout ? `category-${card.category}` : undefined}
className="text-left font-sans font-semibold text-cyan-500 uppercase tracking-wider text-xs md:text-sm"