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}
ariaLabel={ariaLabel}
>
{features.map((feature, index) => {
const IconComponent = feature.icon;
return (
<div
key={`${feature.title}-${index}`}
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={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} />
</div>
<h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
{feature.title}
</h3>
<p className={cls("text-base leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
{feature.description}
</p>
</div>
<div className="mt-auto flex-1 min-h-0 grid grid-cols-2 gap-5 overflow-hidden">
{feature.mediaItems.map((item, mediaIndex) => (
<div key={mediaIndex} className="overflow-hidden rounded-theme-capped">
<MediaContent
imageSrc={item.imageSrc}
videoSrc={item.videoSrc}
imageAlt={item.imageAlt || "Feature image"}
videoAriaLabel={item.videoAriaLabel || "Feature video"}
imageClassName={cls("relative z-1 h-full w-full object-cover", mediaClassName)}
/>
</div>
))}
</div>
{features.slice(0, 2).map((feature, index) => {
const IconComponent = feature.icon;
return (
<div
key={`${feature.title}-${index}`}
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={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} />
</div>
<h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
{feature.title}
</h3>
<p className={cls("text-base leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
{feature.description}
</p>
</div>
<div className="mt-auto flex-1 min-h-0 grid grid-cols-2 gap-5 overflow-hidden">
{feature.mediaItems.map((item, mediaIndex) => (
<div key={mediaIndex} className="overflow-hidden rounded-theme-capped">
<MediaContent
imageSrc={item.imageSrc}
videoSrc={item.videoSrc}
imageAlt={item.imageAlt || "Feature image"}
videoAriaLabel={item.videoAriaLabel || "Feature video"}
imageClassName={cls("relative z-1 h-full w-full object-cover", mediaClassName)}
/>
</div>
);
})}
))}
</div>
</div>
);
})}
</CardStack>
);
};