bender/60762bf7-20a9-46cd-9494-58ba5a8cff77
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_6 into main #4

Merged
bender merged 1 commits from version_6 into main 2026-02-27 07:56:37 +00:00
Conversation 0 Commits 1 Files Changed 1 +78 -32
1 changed files with 78 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/sections/testimonial/TestimonialCardOne.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { memo } from "react";
import { memo, useState } from "react";
import CardStack from "@/components/cardStack/CardStack";
import MediaContent from "@/components/shared/MediaContent";
import { cls } from "@/lib/utils";
@@ -18,6 +18,7 @@ type Testimonial = {
videoSrc?: string;
imageAlt?: string;
videoAriaLabel?: string;
backText?: string;
};
interface TestimonialCardOneProps {
@@ -69,6 +70,7 @@ interface TestimonialCardProps {
nameClassName?: string;
roleClassName?: string;
companyClassName?: string;
backTextClassName?: string;
}
const TestimonialCard = memo(({
@@ -80,41 +82,84 @@ const TestimonialCard = memo(({
nameClassName = "",
roleClassName = "",
companyClassName = "",
backTextClassName = "",
}: TestimonialCardProps) => {
return (
<div className={cls("relative h-full rounded-theme-capped overflow-hidden group", cardClassName)}>
<MediaContent
imageSrc={testimonial.imageSrc}
videoSrc={testimonial.videoSrc}
imageAlt={testimonial.imageAlt || testimonial.name}
videoAriaLabel={testimonial.videoAriaLabel || testimonial.name}
imageClassName={cls("relative z-1 w-full h-full object-cover!", imageClassName)}
/>
const [isFlipped, setIsFlipped] = useState(false);
<div className={cls("!absolute z-1 bottom-6 left-6 right-6 card backdrop-blur-xs p-6 flex flex-col gap-3 rounded-theme-capped", overlayClassName)}>
<div className={cls("relative z-1 flex gap-1", ratingClassName)}>
{Array.from({ length: 5 }).map((_, index) => (
<Star
key={index}
className={cls(
"h-5 w-auto text-accent",
index < testimonial.rating ? "fill-accent" : "fill-transparent"
)}
strokeWidth={1.5}
/>
))}
return (
<div
className={cls("relative h-full rounded-theme-capped overflow-hidden group cursor-pointer", cardClassName)}
style={{
perspective: "1000px",
}}
onMouseEnter={() => setIsFlipped(true)}
onMouseLeave={() => setIsFlipped(false)}
>
<div
style={{
transformStyle: "preserve-3d",
transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)",
transition: "transform 0.6s ease-in-out",
width: "100%",
height: "100%",
}}
>
{/* Front side */}
<div
style={{
backfaceVisibility: "hidden",
WebkitBackfaceVisibility: "hidden",
}}
className="w-full h-full"
>
<MediaContent
imageSrc={testimonial.imageSrc}
videoSrc={testimonial.videoSrc}
imageAlt={testimonial.imageAlt || testimonial.name}
videoAriaLabel={testimonial.videoAriaLabel || testimonial.name}
imageClassName={cls("relative z-1 w-full h-full object-cover!", imageClassName)}
/>
<div className={cls("!absolute z-1 bottom-6 left-6 right-6 card backdrop-blur-xs p-6 flex flex-col gap-3 rounded-theme-capped", overlayClassName)}>
<div className={cls("relative z-1 flex gap-1", ratingClassName)}>
{Array.from({ length: 5 }).map((_, index) => (
<Star
key={index}
className={cls(
"h-5 w-auto text-accent",
index < testimonial.rating ? "fill-accent" : "fill-transparent"
)}
strokeWidth={1.5}
/>
))}
</div>
<h3 className={cls("relative z-1 text-2xl font-medium text-foreground leading-[1.1] mt-1", nameClassName)}>
{testimonial.name}
</h3>
<div className="relative z-1 flex flex-col gap-1">
<p className={cls("text-base text-foreground leading-[1.1]", roleClassName)}>
{testimonial.role}
</p>
<p className={cls("text-base text-foreground leading-[1.1]", companyClassName)}>
{testimonial.company}
</p>
</div>
</div>
</div>
<h3 className={cls("relative z-1 text-2xl font-medium text-foreground leading-[1.1] mt-1", nameClassName)}>
{testimonial.name}
</h3>
<div className="relative z-1 flex flex-col gap-1">
<p className={cls("text-base text-foreground leading-[1.1]", roleClassName)}>
{testimonial.role}
</p>
<p className={cls("text-base text-foreground leading-[1.1]", companyClassName)}>
{testimonial.company}
{/* Back side */}
<div
style={{
backfaceVisibility: "hidden",
WebkitBackfaceVisibility: "hidden",
transform: "rotateY(180deg)",
}}
className={cls("absolute inset-0 w-full h-full card backdrop-blur-xs p-6 flex flex-col gap-3 rounded-theme-capped justify-center items-center", backTextClassName)}
>
<p className="text-base text-foreground leading-relaxed text-center">
{testimonial.backText || "Hover to see more"}
</p>
</div>
</div>
@@ -223,6 +268,7 @@ const TestimonialCardOne = ({
nameClassName={nameClassName}
roleClassName={roleClassName}
companyClassName={companyClassName}
backTextClassName=""
/>
))}
</CardStack>