52 lines
2.7 KiB
TypeScript
52 lines
2.7 KiB
TypeScript
|
import React from "react";
|
||
|
|
|
||
|
|
// High-quality placeholder images for the group icons
|
||
|
|
const logoImage1 =
|
||
|
|
"https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=175&h=305&fit=crop&auto=format";
|
||
|
|
const logoImage2 =
|
||
|
|
"https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?w=175&h=305&fit=crop&auto=format";
|
||
|
|
const logoImage3 =
|
||
|
|
"https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=175&h=305&fit=crop&auto=format";
|
||
|
|
// const logoImage4 = "https://images.unsplash.com/photo-1560472355-536de3962603?w=120&h=60&fit=crop&auto=format";
|
||
|
|
// const logoImage5 = "https://images.unsplash.com/photo-1563986768609-322da13575f3?w=120&h=60&fit=crop&auto=format";
|
||
|
|
// const logoImage6 = "https://images.unsplash.com/photo-1572177812156-58036aae439c?w=120&h=60&fit=crop&auto=format";
|
||
|
|
// const logoImage7 = "https://images.unsplash.com/photo-1553484771-371a605b060b?w=120&h=60&fit=crop&auto=format";
|
||
|
|
// const logoImage8 = "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=120&h=60&fit=crop&auto=format";
|
||
|
|
// const logoImage9 = "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=120&h=60&fit=crop&auto=format";
|
||
|
|
|
||
|
|
export default function Group1597880681() {
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-center gap-8 flex-wrap opacity-60 hover:opacity-100 transition-opacity duration-300">
|
||
|
|
{/* Client Logos Grid */}
|
||
|
|
<div className="flex justify-center items-center py-12 perspective">
|
||
|
|
{/* Left Card */}
|
||
|
|
<div className="w-65 h-110 p-2 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 hover:border-accent/30 transform custom-rotate-left hover:scale-105 transition-all duration-300">
|
||
|
|
<img
|
||
|
|
src={logoImage1}
|
||
|
|
alt="Left"
|
||
|
|
className="w-full h-full object-contain filter invert opacity-80 hover:opacity-100 transition-opacity duration-300"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Center Card */}
|
||
|
|
<div className="w-65 h-110 p-2 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 hover:border-accent/30 scale-110 shadow-xl z-10 hover:scale-115 transition-all duration-300">
|
||
|
|
<img
|
||
|
|
src={logoImage2}
|
||
|
|
alt="Center"
|
||
|
|
className="w-full h-full object-contain filter invert opacity-90 hover:opacity-100 transition-opacity duration-300"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Right Card */}
|
||
|
|
<div className="w-65 h-110 p-2 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 hover:border-accent/30 transform custom-rotate-right hover:scale-105 transition-all duration-300">
|
||
|
|
<img
|
||
|
|
src={logoImage3}
|
||
|
|
alt="Right"
|
||
|
|
className="w-full h-full object-contain filter invert opacity-80 hover:opacity-100 transition-opacity duration-300"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|