44 lines
2.4 KiB
TypeScript
44 lines
2.4 KiB
TypeScript
|
import React from "react";
|
||
|
|
|
||
|
|
// High-quality placeholder images for the group icons
|
||
|
|
const logoImage1 = "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=120&h=60&fit=crop&auto=format";
|
||
|
|
const logoImage2 = "https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?w=120&h=60&fit=crop&auto=format";
|
||
|
|
const logoImage3 = "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=120&h=60&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="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-9 gap-6 items-center">
|
||
|
|
{[
|
||
|
|
{ src: logoImage1, alt: "Client Logo 1" },
|
||
|
|
{ src: logoImage2, alt: "Client Logo 2" },
|
||
|
|
{ src: logoImage3, alt: "Client Logo 3" },
|
||
|
|
{ src: logoImage4, alt: "Client Logo 4" },
|
||
|
|
{ src: logoImage5, alt: "Client Logo 5" },
|
||
|
|
{ src: logoImage6, alt: "Client Logo 6" },
|
||
|
|
{ src: logoImage7, alt: "Client Logo 7" },
|
||
|
|
{ src: logoImage8, alt: "Client Logo 8" },
|
||
|
|
{ src: logoImage9, alt: "Client Logo 9" }
|
||
|
|
].map((logo, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="w-24 h-12 flex items-center justify-center p-2 rounded-lg bg-white/5 backdrop-blur-sm border border-white/10 hover:border-accent/30 transition-all duration-300 hover:scale-105"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src={logo.src}
|
||
|
|
alt={logo.alt}
|
||
|
|
className="max-w-full max-h-full object-contain filter brightness-0 invert opacity-70 hover:opacity-100 transition-opacity duration-300"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|