112 lines
4.2 KiB
TypeScript
112 lines
4.2 KiB
TypeScript
import React from "react";
|
|
|
|
const partners = [
|
|
{
|
|
name: "Webflow",
|
|
svg: (
|
|
<svg className="partner-spin" viewBox="0 0 48 48" fill="none" width={40} height={40} xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M7 12L15.5 36L24 12L32.5 36L41 12" stroke="#FEFAE0" strokeWidth="3" strokeLinejoin="round"/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
name: "Stripe",
|
|
svg: (
|
|
<svg className="partner-spin" viewBox="0 0 48 48" fill="none" width={40} height={40} xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="8" y="12" width="32" height="24" rx="6" stroke="#FEFAE0" strokeWidth="3"/>
|
|
<rect x="14" y="20" width="20" height="4" rx="2" fill="#FEFAE0"/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
name: "Supabase",
|
|
svg: (
|
|
<svg className="partner-spin" viewBox="0 0 48 48" fill="none" width={40} height={40} xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="12" y="8" width="24" height="32" rx="4" stroke="#FEFAE0" strokeWidth="3"/>
|
|
<rect x="18" y="16" width="12" height="4" rx="2" fill="#FEFAE0"/>
|
|
<rect x="18" y="24" width="12" height="4" rx="2" fill="#FEFAE0"/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
name: "GitHub",
|
|
svg: (
|
|
<svg className="partner-spin" viewBox="0 0 48 48" fill="none" width={40} height={40} xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="24" cy="24" r="20" stroke="#FEFAE0" strokeWidth="3"/>
|
|
<path d="M18 34c-1-2-2-4-2-7 0-4 3-7 8-7s8 3 8 7c0 3-1 5-2 7" stroke="#FEFAE0" strokeWidth="3" strokeLinecap="round"/>
|
|
<circle cx="18" cy="20" r="2" fill="#FEFAE0"/>
|
|
<circle cx="30" cy="20" r="2" fill="#FEFAE0"/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
name: "Cursor AI",
|
|
svg: (
|
|
<svg className="partner-spin" viewBox="0 0 48 48" fill="none" width={40} height={40} xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="12" y="12" width="24" height="24" rx="8" stroke="#FEFAE0" strokeWidth="3"/>
|
|
<circle cx="24" cy="24" r="6" stroke="#FEFAE0" strokeWidth="3"/>
|
|
<circle cx="24" cy="24" r="2" fill="#FEFAE0"/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
name: "Google Ads",
|
|
svg: (
|
|
<svg className="partner-spin" viewBox="0 0 48 48" fill="none" width={40} height={40} xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="10" y="30" width="8" height="8" rx="2" fill="#FEFAE0"/>
|
|
<rect x="20" y="18" width="8" height="20" rx="2" fill="#FEFAE0"/>
|
|
<rect x="30" y="10" width="8" height="28" rx="2" fill="#FEFAE0"/>
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
export default function PartnerMarquee() {
|
|
return (
|
|
<div className="w-full overflow-hidden py-8">
|
|
{/* Desktop/Tablet: Marquee */}
|
|
<div className="relative hidden sm:block">
|
|
<div className="marquee flex items-center gap-8" style={{ animation: 'marquee 30s linear infinite' }}>
|
|
{[...partners, ...partners].map((partner, idx) => (
|
|
<div
|
|
key={partner.name + idx}
|
|
className="flex flex-col items-center justify-center min-w-[140px] px-6 py-4 rounded-2xl bg-white/5 backdrop-blur-sm"
|
|
>
|
|
{partner.svg}
|
|
<span className="mt-2 font-bold text-[#FEFAE0] text-base md:text-lg text-center whitespace-nowrap" style={{ letterSpacing: 0.5 }}>{partner.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<style>{`
|
|
@keyframes marquee {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
.marquee {
|
|
width: 200%;
|
|
}
|
|
@keyframes partner-spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
.partner-spin {
|
|
animation: partner-spin 8s linear infinite;
|
|
display: block;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
{/* Mobile: Grid */}
|
|
<div className="sm:hidden grid grid-cols-2 gap-4 justify-items-center">
|
|
{partners.map((partner) => (
|
|
<div
|
|
key={partner.name}
|
|
className="flex flex-col items-center justify-center w-full px-4 py-4 rounded-2xl bg-white/5 backdrop-blur-sm"
|
|
>
|
|
{partner.svg}
|
|
<span className="mt-2 font-bold text-[#FEFAE0] text-base text-center whitespace-nowrap" style={{ letterSpacing: 0.5 }}>{partner.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|