src/components/uiable/blocks/feature/feature-39/feature-39.tsx
const BRANDS = [
{
name: "G2",
color: "#FF492C",
path: "M23.988 12.006c0-6.623-5.37-11.99-11.994-11.99C5.37.016 0 5.383 0 12.006c0 6.622 5.37 11.99 11.994 11.99 6.623 0 11.994-5.368 11.994-11.99zM12 18.995A6.99 6.99 0 015.013 12a6.99 6.99 0 016.987-6.995c2.723 0 5.093 1.575 6.222 3.864l-2.484 1.408a4.195 4.195 0 00-3.738-2.49 4.197 4.197 0 00-4.192 4.213 4.197 4.197 0 004.192 4.214 4.194 4.194 0 003.568-2.023h-3.568v-2.772h6.582c.088.497.133 1.01.133 1.542A6.994 6.994 0 0112 18.995z",
},
{
name: "Microsoft",
color: "#00a4ef",
path: "M11.4 24H0V12.6h11.4V24zM24 24H12.6V12.6H24V24zM11.4 11.4H0V0h11.4v11.4zm12.6 0H12.6V0H24v11.4z",
},
{
name: "Delivery Hero",
color: "#D21E00",
path: "M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12c5.6 0 10.3-3.8 11.7-9H12V9h12c0-.6.1-1.3.1-2 0-6.6-5.4-12-12-12zm0 4.5c4.1 0 7.5 3.4 7.5 7.5S16.1 19.5 12 19.5 4.5 16.1 4.5 12 7.9 4.5 12 4.5z",
},
{
name: "Adobe",
color: "#FF0000",
path: "M15.1 0H24v24L15.1 0zM8.9 0H0v24L8.9 0zM12 9.7L15.7 19h-3.8l-1.1-3H8.3L12 9.7z",
},
{
name: "Amazon",
color: "#FF9900",
path: "M14.6 18c-2.3 1.2-5.3 1.7-7.8 1-2.4-.7-4.1-2-5.4-3.7-.3-.4.2-.8.6-.6 1.8 1.1 4.5 2 7.7 2 2.5 0 4.6-.5 6.2-1.4.3-.2.7.2.5.5-1.5 1.5-3.6 2.3-5.8 2.3-1.6 0-3.3-.4-4.8-1-1.3-.5-2.6-1.3-3.7-2.3-.3-.3-.8 0-.6.4 1.7 2.3 4.4 3.7 7.7 4.5 3 .7 6.4.3 9-1.2.4-.2.2-.7-.2-.5z",
},
{
name: "Spotify",
color: "#1DB954",
path: "M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.54.659.3 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.6.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.54-1.02.72-1.56.3z",
},
{
name: "Slack",
color: "#4A154B",
path: "M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.122 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.268 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.166 0a2.528 2.528 0 0 1 2.523 2.522v6.312zm-2.523 10.122a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.166 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.268a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z",
},
{
name: "Google",
color: "#4285F4",
path: "M23.64 12.204c0-.82-.07-1.61-.2-2.36H12v4.46h6.52a6.31 6.31 0 01-2.74 4.14v3.44h4.43c2.59-2.39 4.09-5.91 4.09-9.68zM12 24c3.27 0 6.01-1.08 8.01-2.92l-4.43-3.44c-1.08.73-2.47 1.16-4.01 1.16-3.08 0-5.69-2.08-6.63-4.88H.39v3.56C2.42 21.6 6.88 24 12 24zM5.37 13.92c-.24-.73-.37-1.52-.37-2.32 0-.8.13-1.59.37-2.32V5.72H.39A11.96 11.96 0 000 11.6c0 1.93.46 3.76 1.28 5.4l4.09-3.08zM12 4.6c1.78 0 3.38.61 4.64 1.81l3.48-3.48C18.01 1.04 15.27 0 12 0 6.88 0 2.42 2.4 .39 5.72l4.98 3.56C6.31 6.48 8.92 4.6 12 4.6z",
},
]
export default function Feature39() {
return (
<section className="dark relative overflow-hidden border-y border-white/5 bg-[#06040F] py-10 text-white">
{/* Soft fade edges for marquee */}
<div className="pointer-events-none absolute top-0 left-0 z-10 h-full w-24 bg-gradient-to-r from-[#06040F] to-transparent"></div>
<div className="pointer-events-none absolute top-0 right-0 z-10 h-full w-24 bg-gradient-to-l from-[#06040F] to-transparent"></div>
<style>{`
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.animate-marquee {
animation: marquee 30s linear infinite;
}
.animate-marquee:hover {
animation-play-state: paused;
}
`}</style>
<div className="animate-marquee flex w-max items-center gap-16 pr-16 opacity-60 transition-opacity duration-300 hover:opacity-100 md:gap-24">
{/* Render twice for seamless infinite loop */}
{[...BRANDS, ...BRANDS].map((brand, i) => (
<div
key={i}
className="flex cursor-default items-center gap-3 text-xl font-bold text-white grayscale transition-all duration-300 hover:grayscale-0"
>
<svg viewBox="0 0 24 24" className="h-7 w-7" fill={brand.color}>
<path d={brand.path} />
</svg>
{brand.name}
</div>
))}
</div>
</section>
)
}
