development/0b1f4792-64cd-483a-8739-3d5dadeaa175
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bob AI: make the features section show only 2 features

Browse Source
This commit is contained in:
kudindmitriy
2026-02-09 16:14:31 +02:00
parent b3b6ce6cb5
commit e725595192
1 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/sections/feature/FeatureCardTwentyFive.tsx
View File

@@ -130,40 +130,40 @@ const FeatureCardTwentyFive = ({
buttonTextClassName={textBoxButtonTextClassName} buttonTextClassName={textBoxButtonTextClassName}
ariaLabel={ariaLabel} ariaLabel={ariaLabel}
> >
{features.map((feature, index) => { {features.slice(0, 2).map((feature, index) => {
const IconComponent = feature.icon; const IconComponent = feature.icon;
return ( return (
<div <div
key={`${feature.title}-${index}`} key={`${feature.title}-${index}`}
className={cls("card flex flex-col gap-5 p-5 rounded-theme-capped min-h-0 h-full", cardClassName)} className={cls("card flex flex-col gap-5 p-5 rounded-theme-capped min-h-0 h-full", cardClassName)}
> >
<div className="relative z-1 flex flex-col gap-1"> <div className="relative z-1 flex flex-col gap-1">
<div className={cls("h-15 w-[3.75rem] mb-1 aspect-square rounded-theme primary-button flex items-center justify-center", cardIconWrapperClassName)}> <div className={cls("h-15 w-[3.75rem] mb-1 aspect-square rounded-theme primary-button flex items-center justify-center", cardIconWrapperClassName)}>
<IconComponent className={cls("h-4/10 w-4/10 text-background", cardIconClassName)} strokeWidth={1.5} /> <IconComponent className={cls("h-4/10 w-4/10 text-background", cardIconClassName)} strokeWidth={1.5} />
</div> </div>
<h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}> <h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
{feature.title} {feature.title}
</h3> </h3>
<p className={cls("text-base leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}> <p className={cls("text-base leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
{feature.description} {feature.description}
</p> </p>
</div> </div>
<div className="mt-auto flex-1 min-h-0 grid grid-cols-2 gap-5 overflow-hidden"> <div className="mt-auto flex-1 min-h-0 grid grid-cols-2 gap-5 overflow-hidden">
{feature.mediaItems.map((item, mediaIndex) => ( {feature.mediaItems.map((item, mediaIndex) => (
<div key={mediaIndex} className="overflow-hidden rounded-theme-capped"> <div key={mediaIndex} className="overflow-hidden rounded-theme-capped">
<MediaContent <MediaContent
imageSrc={item.imageSrc} imageSrc={item.imageSrc}
videoSrc={item.videoSrc} videoSrc={item.videoSrc}
imageAlt={item.imageAlt || "Feature image"} imageAlt={item.imageAlt || "Feature image"}
videoAriaLabel={item.videoAriaLabel || "Feature video"} videoAriaLabel={item.videoAriaLabel || "Feature video"}
imageClassName={cls("relative z-1 h-full w-full object-cover", mediaClassName)} imageClassName={cls("relative z-1 h-full w-full object-cover", mediaClassName)}
/> />
</div>
))}
</div>
</div> </div>
); ))}
})} </div>
</div>
);
})}
</CardStack> </CardStack>
); );
}; };