ourworld_web/www_mycelium_cloud2
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add row height control to BentoGrid and remove gradient blobs from StackSection

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-18 20:26:37 +02:00
parent cde6c90033
commit bf78cde2d8
3 changed files with 47 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/BentoReviews.tsx
View File

@@ -78,7 +78,8 @@ export function BentoReviews() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: false, margin: '0px 0px -100px 0px' }}
transition={{ duration: 0.8, delay: 0.3 + i * 0.1 }}
className={cn(i === 3 || i === 6 ? "md:col-span-2" : "", "h-full")}
className={cn(i === 3 || i === 6 ? "md:col-span-2" : "")}
rowHeight={i >= 3 ? "h-[22rem]" : ""}
title={item.title}
subtitle={item.subtitle}
description={item.description}

7
src/components/StackSection.tsx
View File

@@ -8,13 +8,6 @@ export function StackSectionPreview() {
return (
<section className="w-full bg-transparent lg:px-0 py-24 px-6 relative">
{/* Gradient Blob Component */}
<div
className="absolute w-[400px] h-[200px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] rounded-full blur-[150px] bottom-[200px] left-[-150px] z-0"
/>
<div
className="absolute w-[200px] h-[100px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] rounded-full blur-[150px] top-[200px] right-[-150px] z-0"
/>
<div className="mx-auto max-w-7xl">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-16 items-center lg:items-start">
{/* Left Column - Text (1/3 width) */}

78
src/components/ui/bento-grid.tsx
View File

@@ -23,45 +23,57 @@ export const BentoGrid = ({
);
};
export const BentoGridItem = React.forwardRef<HTMLDivElement, {
interface BentoGridItemProps {
className?: string;
title?: string | React.ReactNode;
subtitle?: string | React.ReactNode;
description?: string | React.ReactNode;
img?: string;
video?: string;
}>(({ className, title, subtitle, description, img, video }, ref) => {
return (
<div
ref={ref}
className={cn(
"group/bento shadow-input row-span-1 flex flex-col justify-between rounded-xl border border-black bg-black/10 backdrop-blur-md transition-all duration-300 ease-in-out hover:scale-105 hover:border-black hover:bg-black/40",
className,
)}
>
<div className="flex flex-1 w-full h-full min-h-[6rem] bg-transparent overflow-hidden">
{video ? (
<video
src={video}
autoPlay
loop
muted
playsInline
className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
/>
) : img ? (
<Image src={img} alt={title as string} width={300} height={300} className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300" />
) : null}
</div>
<div className="p-4 transition bg-white/5 hover:bg-white/7 backdrop-blur-md duration-200 group-hover/bento:translate-x-2 ">
<CT>{title}</CT>
<CP className="font-medium">{subtitle}</CP>
<CP className="mt-2">{description}</CP>
</div>
</div>
);
});
rowHeight?: string;
}
BentoGridItem.displayName = 'BentoGridItem';
export const BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps>(
({ className, title, subtitle, description, img, video, rowHeight }, ref) => {
return (
<div
ref={ref}
className={cn(
"group/bento shadow-input row-span-1 flex flex-col justify-between rounded-xl border border-black bg-black/10 backdrop-blur-md transition-all duration-300 ease-in-out hover:scale-105 hover:border-black hover:bg-black/40",
rowHeight ? rowHeight : "h-full",
className
)}
>
<div className="flex flex-1 w-full h-full min-h-[6rem] bg-transparent overflow-hidden">
{video ? (
<video
src={video}
autoPlay
loop
muted
playsInline
className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
/>
) : img ? (
<Image
src={img}
alt={title as string}
width={300}
height={300}
className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
/>
) : null}
</div>
<div className="p-4 transition bg-white/5 hover:bg-white/7 backdrop-blur-md duration-200 group-hover/bento:translate-x-2 ">
<CT>{title}</CT>
<CP className="font-medium">{subtitle}</CP>
<CP className="mt-2">{description}</CP>
</div>
</div>
);
}
);
BentoGridItem.displayName = "BentoGridItem";
export const MotionBentoGridItem = motion(BentoGridItem);