bender/a97a02cf-6585-4cd6-94f9-c90f6a08bd94
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/components/sections/metrics/MetricCardThree.tsx

Browse Source
This commit is contained in:
bender
2026-02-27 12:56:35 +00:00
parent 6d1ae34dd1
commit e8c5c2cf56
1 changed files with 34 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/sections/metrics/MetricCardThree.tsx
View File

@@ -54,23 +54,22 @@ export default function MetricCardThree({
return ( return (
<section className={`py-16 px-4 sm:px-6 lg:px-8 ${bgClass}`}> <section className={`py-16 px-4 sm:px-6 lg:px-8 ${bgClass}`}>
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
{/* Header Section */} <div className="mb-12">
<div className="mb-12 text-center"> <div className="flex items-center gap-2 mb-4">
<div className="inline-flex items-center gap-2 mb-4 px-4 py-2 rounded-full bg-blue-100 text-blue-700"> <TagIcon className="w-5 h-5 text-blue-500" />
<TagIcon className="w-4 h-4" /> <span className="text-sm font-semibold text-blue-500 uppercase tracking-wide">
<span className="text-sm font-semibold">{tag}</span> {tag}
</span>
</div> </div>
<h2 className="text-4xl sm:text-5xl font-bold mb-4">{title}</h2> <h2 className="text-4xl sm:text-5xl font-bold mb-4">{title}</h2>
<p className="text-lg text-slate-600 max-w-2xl mx-auto"> <p className={`text-lg ${useInvertedBackground ? "text-slate-300" : "text-slate-600"}`}>
{description} {description}
</p> </p>
</div> </div>
{/* Metrics Grid with Flip Cards */} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
{metrics.map((metric) => { {metrics.map((metric) => {
const MetricIcon = metric.icon; const Icon = metric.icon;
const isFlipped = flipped[metric.id] || false; const isFlipped = flipped[metric.id] || false;
return ( return (
@@ -81,49 +80,47 @@ export default function MetricCardThree({
> >
<div <div
className={`relative w-full h-full transition-transform duration-500 transform-gpu ${ className={`relative w-full h-full transition-transform duration-500 transform-gpu ${
isFlipped ? "rotate-y-180" : "" isFlipped ? "scale-x-[-1]" : ""
}`} }`}
style={{ style={{
transformStyle: "preserve-3d", transformStyle: "preserve-3d",
transform: isFlipped transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)",
? "rotateY(180deg)"
: "rotateY(0deg)",
}} }}
> >
{/* Front of Card */}
<div <div
className="absolute w-full h-full bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-6 flex flex-col items-center justify-center text-center border border-blue-200 shadow-lg" className={`absolute w-full h-full p-6 rounded-lg border-2 flex flex-col justify-between ${
style={{ useInvertedBackground
backfaceVisibility: "hidden", ? "bg-slate-800 border-slate-700 text-white"
}} : "bg-slate-50 border-slate-200 text-slate-900"
}`}
style={{ backfaceVisibility: "hidden" }}
> >
<MetricIcon className="w-12 h-12 text-blue-600 mb-4" /> <div>
<h3 className="text-sm font-semibold text-slate-700 mb-3"> <div className="mb-4 p-3 bg-blue-100 rounded-lg w-fit">
{metric.title} <Icon className="w-6 h-6 text-blue-600" />
</h3> </div>
<p className="text-4xl font-bold text-blue-600"> <h3 className="text-sm font-semibold mb-2 opacity-75">
{metric.value} {metric.title}
</p> </h3>
<p className="text-xs text-slate-500 mt-4"> </div>
Click to see more <div className="text-4xl font-bold">{metric.value}</div>
</p>
</div> </div>
{/* Back of Card */}
<div <div
className="absolute w-full h-full bg-gradient-to-br from-slate-800 to-slate-900 rounded-lg p-6 flex flex-col items-center justify-center text-center border border-slate-700 shadow-lg text-white" className={`absolute w-full h-full p-6 rounded-lg border-2 flex items-center justify-center ${
useInvertedBackground
? "bg-slate-800 border-slate-700 text-white"
: "bg-slate-50 border-slate-200 text-slate-900"
}`}
style={{ style={{
backfaceVisibility: "hidden", backfaceVisibility: "hidden",
transform: "rotateY(180deg)", transform: "rotateY(180deg)",
}} }}
> >
<p className="text-sm leading-relaxed mb-4"> <p className="text-center text-sm leading-relaxed">
{metric.title} represents our commitment to excellence and {metric.title} represents our commitment to excellence and
continuous growth in the computer club community. continuous growth in the computer club community.
</p> </p>
<p className="text-xs text-slate-400">
Click to flip back
</p>
</div> </div>
</div> </div>
</div> </div>
@@ -131,14 +128,13 @@ export default function MetricCardThree({
})} })}
</div> </div>
{/* Buttons Section */}
{buttons.length > 0 && ( {buttons.length > 0 && (
<div className="flex flex-wrap gap-4 justify-center"> <div className="flex flex-wrap gap-4">
{buttons.map((button, index) => ( {buttons.map((button, index) => (
<a <a
key={index} key={index}
href={button.href} href={button.href}
className="px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors duration-300 shadow-md hover:shadow-lg" className="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors duration-200"
> >
{button.text} {button.text}
</a> </a>