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

Update src/components/sections/about/AboutMetric.tsx

Browse Source
This commit is contained in:
bender
2026-02-27 12:56:31 +00:00
parent 3553bc5b85
commit f51a62b4a7
1 changed files with 34 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/sections/about/AboutMetric.tsx
View File

@@ -34,15 +34,6 @@ export default function AboutMetric({
const bgClass = useInvertedBackground ? 'bg-slate-900' : 'bg-white';
const textClass = useInvertedBackground ? 'text-white' : 'text-slate-900';
const getAnimationDelay = (index: number) => {
if (metricsAnimation === 'slide-up') {
return {
transitionDelay: `${index * 100}ms`,
};
}
return {};
};
return (
<section className={`${bgClass} py-16 px-4 sm:px-6 lg:px-8`}>
<div className="max-w-6xl mx-auto">
@@ -62,10 +53,11 @@ export default function AboutMetric({
key={index}
className="h-64 cursor-pointer perspective"
onClick={() => toggleFlip(index)}
style={getAnimationDelay(index)}
>
<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 ? '[transform:rotateY(180deg)]' : ''
}`}
style={{
transformStyle: 'preserve-3d',
transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
@@ -73,36 +65,52 @@ export default function AboutMetric({
>
{/* Front Side */}
<div
className={`absolute w-full h-full ${bgClass} rounded-lg shadow-lg p-6 flex flex-col items-center justify-center border border-slate-200`}
style={{
backfaceVisibility: 'hidden',
}}
className={`absolute w-full h-full ${
useInvertedBackground ? 'bg-slate-800' : 'bg-slate-50'
} rounded-lg shadow-lg p-6 flex flex-col items-center justify-center border ${
useInvertedBackground ? 'border-slate-700' : 'border-slate-200'
}`}
style={{ backfaceVisibility: 'hidden' }}
>
<Icon
className={`w-12 h-12 mb-4 ${
useInvertedBackground ? 'text-blue-400' : 'text-blue-600'
}`}
/>
<p
className={`text-sm font-medium ${
useInvertedBackground ? 'text-slate-300' : 'text-slate-600'
} text-center mb-2`}
>
<Icon className={`w-12 h-12 ${useInvertedBackground ? 'text-blue-400' : 'text-blue-600'} mb-4`} />
<p className={`text-sm font-semibold ${textClass} text-center mb-2`}>
{metric.label}
</p>
<p className={`text-3xl font-bold ${useInvertedBackground ? 'text-blue-400' : 'text-blue-600'}`}>
<p
className={`text-3xl font-bold ${textClass} text-center`}
>
{metric.value}
</p>
<p className={`text-xs ${useInvertedBackground ? 'text-slate-400' : 'text-slate-500'} mt-4 text-center`}>
Click to learn more
<p
className={`text-xs mt-4 ${
useInvertedBackground ? 'text-slate-400' : 'text-slate-500'
}`}
>
Click to flip
</p>
</div>
{/* Back Side */}
<div
className={`absolute w-full h-full ${useInvertedBackground ? 'bg-slate-800' : 'bg-slate-100'} rounded-lg shadow-lg p-6 flex flex-col items-center justify-center border border-slate-200`}
className={`absolute w-full h-full ${
useInvertedBackground ? 'bg-blue-600' : 'bg-blue-500'
} rounded-lg shadow-lg p-6 flex flex-col items-center justify-center`}
style={{
backfaceVisibility: 'hidden',
transform: 'rotateY(180deg)',
}}
>
<p className={`text-sm ${textClass} text-center leading-relaxed`}>
{metric.label}: {metric.value} represents our commitment to excellence and continuous growth in this area.
</p>
<p className={`text-xs ${useInvertedBackground ? 'text-slate-400' : 'text-slate-500'} mt-4 text-center`}>
Click to flip back
<p className="text-white text-center text-sm leading-relaxed">
{metric.label}: {metric.value} represents our commitment to
excellence and continuous growth in the tech community.
</p>
</div>
</div>