bender/bbb628ce-cdf6-4204-8f4f-9c49d48302c9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_22_1781526843122 into main #22

Merged
bender merged 1 commits from version_22_1781526843122 into main 2026-06-15 12:36:49 +00:00
Conversation 0 Commits 1 Files Changed 1 +11 -27
1 changed files with 11 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/pages/HomePage/sections/Products.tsx
View File

@@ -112,34 +112,18 @@ const ProductsInline = () => {
)}
</div>
<div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-6 gap-3">
<div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{items.map((item, index) => (
<ScrollReveal key={item.title} variant="slide-up" delay={staggerDelays[index]} className={cls("col-span-1 group", gridClasses[index])}>
<a href={item.href} className="block relative overflow-hidden rounded">
<div className="h-80 xl:h-100 2xl:h-120 overflow-hidden bg-card">
{item.imageSrc && (
<ImageOrVideo
imageSrc={item.imageSrc}
videoSrc={item.videoSrc}
className="rounded group-hover:scale-105 transition-transform duration-500"
/>
)}
</div>
<div className="absolute -inset-x-px -bottom-px h-2/5 backdrop-blur-xl mask-fade-top-overlay" aria-hidden="true" />
<div className="absolute inset-x-3 bottom-3 2xl:inset-x-4 2xl:bottom-4 z-10">
<div className="relative flex flex-col gap-1 md:gap-0 md:group-hover:gap-1 p-3 2xl:p-4 transition-all duration-400">
<div className="absolute inset-0 -z-10 card rounded translate-y-0 opacity-100 md:translate-y-full md:opacity-0 transition-all duration-400 ease-out md:group-hover:translate-y-0 md:group-hover:opacity-100" />
<h3 className="text-2xl font-semibold leading-snug text-foreground md:text-white transition-colors duration-400 md:group-hover:text-foreground">
{item.title}
</h3>
<div className="grid grid-rows-[1fr] md:grid-rows-[0fr] transition-all duration-400 ease-out md:group-hover:grid-rows-[1fr]">
<p className="overflow-hidden text-base leading-snug text-foreground opacity-100 md:opacity-0 transition-opacity duration-400 md:group-hover:opacity-100">
{item.description}
</p>
</div>
</div>
</div>
</a>
<ScrollReveal key={item.title} variant="slide-up" delay={index * 0.1} className="col-span-1">
<div className="card rounded p-6 md:p-8 flex flex-col gap-4 h-full border border-border shadow-sm">
<h3 className="text-2xl font-semibold text-foreground">
{item.title}
</h3>
<div className="w-full h-px bg-border my-1" />
<p className="text-base leading-relaxed text-muted-foreground break-keep">
{item.description}
</p>
</div>
</ScrollReveal>
))}
</div>