bender/3120e965-0121-4bc5-9d0e-1c0d8397c7eb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #3

Merged
bender merged 1 commits from version_2 into main 2026-02-27 12:43:16 +00:00
Conversation 0 Commits 1 Files Changed 1 +20 -7
1 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/sections/team/TeamCardFiveFlip.tsx
View File

@@ -4,6 +4,10 @@ import React, { useState } from "react";
import { CardStackTextBox } from "@/components/CardStackTextBox";
import { LucideIcon } from "lucide-react";
interface TitleSegment {
text: string;
}
interface SocialLink {
icon: LucideIcon;
url: string;
@@ -20,18 +24,24 @@ interface TeamMember {
socialLinks?: SocialLink[];
}
interface Button {
label: string;
onClick?: () => void;
href?: string;
}
interface TeamCardFiveFlipProps {
team: TeamMember[];
animationType: "none" | "opacity" | "slide-up" | "scale-rotate" | "blur-reveal";
title: string;
titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
titleSegments?: TitleSegment[];
description: string;
textboxLayout: "default" | "split" | "split-actions" | "split-description" | "inline-image";
textboxLayout: "default" | "centered" | "compact";
useInvertedBackground: boolean;
tag?: string;
tagIcon?: LucideIcon;
tagIcon?: React.ReactNode;
tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
buttons?: Button[];
buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
ariaLabel?: string;
className?: string;
@@ -66,7 +76,8 @@ const TeamCardFiveFlip: React.FC<TeamCardFiveFlipProps> = ({
tagAnimation,
buttons,
buttonAnimation,
ariaLabel = "Team section", className = "", containerClassName = "", textBoxClassName = "", textBoxTitleClassName = "", textBoxTitleImageWrapperClassName = "", textBoxTitleImageClassName = "", textBoxDescriptionClassName = "", textBoxTagClassName = "", textBoxButtonContainerClassName = "", textBoxButtonClassName = "", textBoxButtonTextClassName = "", gridClassName = "", cardClassName = "", mediaWrapperClassName = "", mediaClassName = "", nameClassName = "", roleClassName = ""}) => {
ariaLabel = "Team section", className = "", containerClassName = "", textBoxClassName = "", textBoxTitleClassName = "", textBoxTitleImageWrapperClassName = "", textBoxTitleImageClassName = "", textBoxDescriptionClassName = "", textBoxTagClassName = "", textBoxButtonContainerClassName = "", textBoxButtonClassName = "", textBoxButtonTextClassName = "", gridClassName = "", cardClassName = "", mediaWrapperClassName = "", mediaClassName = "", nameClassName = "", roleClassName = ""
}) => {
const [flipped, setFlipped] = useState<{ [key: string]: boolean }>({});
const toggleFlip = (id: string) => {
@@ -117,7 +128,8 @@ const TeamCardFiveFlip: React.FC<TeamCardFiveFlipProps> = ({
className="relative w-full h-full transition-transform duration-500 transform-gpu"
style={{
transformStyle: "preserve-3d" as any,
transform: flipped[member.id] ? "rotateY(180deg)" : "rotateY(0deg)"}}
transform: flipped[member.id] ? "rotateY(180deg)" : "rotateY(0deg)"
}}
>
{/* Front of card - Photo and name */}
<div
@@ -154,7 +166,8 @@ const TeamCardFiveFlip: React.FC<TeamCardFiveFlipProps> = ({
className="absolute w-full h-full bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg overflow-hidden shadow-lg flex items-center justify-center"
style={{
backfaceVisibility: "hidden" as any,
transform: "rotateY(180deg)"}}
transform: "rotateY(180deg)"
}}
>
<div className="flex flex-col items-center justify-center gap-6">
<p className="text-white text-center font-semibold px-4">{member.name}</p>