bender/67525074-dc51-4fd9-bdbb-b080ccd85265
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3_1776785606217 into main #4

Merged
bender merged 1 commits from version_3_1776785606217 into main 2026-04-21 15:35:19 +00:00
Conversation 0 Commits 1 Files Changed 2 +51 -21
2 changed files with 51 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/sections/product/ProductVariantCards.tsx
View File

@@ -13,11 +13,13 @@ type ProductVariantCardsProps = {
primaryButton?: { text: string; href: string };
secondaryButton?: { text: string; href: string };
products?: {
id?: string;
name: string;
variant: string;
price: string;
imageSrc: string;
onClick?: () => void;
description?: string;
}[];
};
@@ -33,11 +35,13 @@ const ProductVariantCards = ({
const isFromApi = fetchedProducts.length > 0;
const products = isFromApi
? fetchedProducts.map((p) => ({
id: p.id,
name: p.name,
variant: p.variant || "",
price: p.price,
imageSrc: p.imageSrc,
onClick: p.onProductClick,
description: p.description,
}))
: productsProp;
@@ -91,32 +95,49 @@ const ProductVariantCards = ({
>
<GridOrCarousel carouselThreshold={3}>
{products.map((product) => (
<button
key={product.name}
<div
key={product.id || product.name}
onClick={product.onClick}
className="group h-full flex flex-col gap-5 p-5 text-left card rounded cursor-pointer transition-transform duration-300 hover:scale-105"
className="relative group [perspective:1000px] h-full cursor-pointer"
role="button"
tabIndex={0}
onKeyDown={(e) => {
if ((e.key === "Enter" || e.key === " ") && product.onClick) {
e.preventDefault();
product.onClick();
}
}}
>
<div className="relative aspect-square rounded overflow-hidden">
<ImageOrVideo
imageSrc={product.imageSrc}
className="size-full object-cover"
/>
<div className="absolute inset-0 flex items-center justify-center group-hover:bg-background/20 group-hover:backdrop-blur-xs transition-all duration-300">
<div className="flex items-center justify-center size-12 rounded-full primary-button opacity-0 group-hover:opacity-100 scale-75 group-hover:scale-100 transition-all duration-300">
<ArrowUpRight className="size-5 text-primary-cta-text" strokeWidth={2} />
<div className="relative w-full h-full transition-transform duration-700 transform-style-preserve-3d group-hover:rotate-y-180">
{/* Front Face */}
<div className="absolute w-full h-full backface-hidden card rounded flex flex-col gap-5 p-5 text-left">
<div className="relative aspect-square rounded overflow-hidden">
<ImageOrVideo
imageSrc={product.imageSrc}
className="size-full object-cover transition-filter duration-700 group-hover:blur-sm"
/>
<div className="absolute inset-0 flex items-center justify-center group-hover:bg-background/20 group-hover:backdrop-blur-xs transition-all duration-300">
<div className="flex items-center justify-center size-12 rounded-full primary-button opacity-0 group-hover:opacity-100 scale-75 group-hover:scale-100 transition-all duration-300">
<ArrowUpRight className="size-5 text-primary-cta-text" strokeWidth={2} />
</div>
</div>
</div>
<div className="flex items-center justify-between gap-3">
<div className="flex flex-col flex-1 min-w-0">
<h3 className="text-xl font-medium truncate leading-tight text-balance">{product.name}</h3>
<p className="text-sm text-foreground/60">{product.variant}</p>
</div>
<span className="text-xl font-medium shrink-0">{product.price}</span>
</div>
</div>
</div>
<div className="flex items-center justify-between gap-3">
<div className="flex flex-col flex-1 min-w-0">
<h3 className="text-xl font-medium truncate leading-tight text-balance">{product.name}</h3>
<p className="text-sm text-foreground/60">{product.variant}</p>
{/* Back Face */}
<div className="absolute w-full h-full backface-hidden rotate-y-180 card rounded flex items-center justify-center p-4 text-center">
<p className="text-lg">{product.description || "Detailed information about this product."}</p>
</div>
<span className="text-xl font-medium shrink-0">{product.price}</span>
</div>
</button>
</div>
))}
</GridOrCarousel>
</motion.div>

11
src/index.css
View File

@@ -3,6 +3,15 @@
@import "./styles/masks.css";
@import "./styles/animations.css";
@layer utilities {
.transform-style-preserve-3d {
transform-style: preserve-3d;
}
.backface-hidden {
backface-visibility: hidden;
}
}
:root {
/* @colorThemes/lightTheme/grayBlueAccent */
--background: #f6f0e9;
@@ -174,4 +183,4 @@ h6 {
background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-secondary-cta) 80%, transparent), var(--color-secondary-cta));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border: 1px solid var(--color-secondary-cta);
}
}