import { useEffect, useRef } from "react";
const cards = [
{ pain: "Manual payroll in 7 tools", solution: "Unified payroll in 48 h", iconPain: "⛔", iconSol: "✅" },
/* … */
];
export default function PainSolutionGrid() {
const refs = useRef([]);
useEffect(() => {
const io = new IntersectionObserver(
entries =>
entries.forEach(entry => {
if (entry.isIntersecting) entry.target.classList.add("is-visible");
}),
{ threshold: 0.4 }
);
refs.current.forEach(el => el && io.observe(el));
return () => io.disconnect();
}, []);
return (
Pożegnaj się z
problemami,
powitaj Symmetrical
{cards.map((c, i) => (
(refs.current[i] = el)}
className="relative group [perspective:1000px]"
>
{/* front */}
{c.iconPain}
{c.pain}
{/* back */}
{c.iconSol}
{c.solution}
))}
);
}
/* Tailwind CSS (dodać do globals.css) */
.card-face {
@apply absolute inset-0 flex flex-col items-center justify-center rounded-2xl shadow-md bg-gray-200 text-center font-medium transition-transform duration-700 [backface-visibility:hidden];
}
.front { }
.back {
@apply bg-white text-gray-900 [transform:rotateY(180deg)];
}
.group.is-visible .front { @apply rotate-y-180; }
.group.is-visible .back { @apply rotate-y-0; }