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