Components
Loading preview...
npx shadcn@latest add https://21st.dev/r/sshahaider/logo-cloud-3import { cn } from "@/lib/utils";
import { LogoCloud } from "@/components/ui/logo-cloud-3";
export default function DemoOne() {
return (
<div className="min-h-screen w-full place-content-center">
<div
aria-hidden="true"
className={cn(
"-z-10 -top-1/2 -translate-x-1/2 pointer-events-none absolute left-1/2 h-[120vmin] w-[120vmin] rounded-b-full",
"bg-[radial-gradient(ellipse_at_center,--theme(--color-foreground/.1),transparent_50%)]",
"blur-[30px]"
)}
/>
<section className="relative mx-auto max-w-3xl">
<h2 className="mb-5 text-center font-medium text-foreground text-xl tracking-tight md:text-3xl">
<span className="text-muted-foreground">Trusted by experts.</span>
<br />
<span className="font-semibold">Used by the leaders.</span>
</h2>
<div className="mx-auto my-5 h-px max-w-sm bg-border [mask-image:linear-gradient(to_right,transparent,black,transparent)]" />
<LogoCloud logos={logos} />
<div className="mt-5 h-px bg-border [mask-image:linear-gradient(to_right,transparent,black,transparent)]" />
</section>
</div>
);
}
const logos = [
{
src: "https://svgl.app/library/nvidia-wordmark-light.svg",
alt: "Nvidia Logo",
},
{
src: "https://svgl.app/library/supabase_wordmark_light.svg",
alt: "Supabase Logo",
},
{
src: "https://svgl.app/library/openai_wordmark_light.svg",
alt: "OpenAI Logo",
},
{
src: "https://svgl.app/library/turso-wordmark-light.svg",
alt: "Turso Logo",
},
{
src: "https://svgl.app/library/vercel_wordmark.svg",
alt: "Vercel Logo",
},
{
src: "https://svgl.app/library/github_wordmark_light.svg",
alt: "GitHub Logo",
},
{
src: "https://svgl.app/library/claude-ai-wordmark-icon_light.svg",
alt: "Claude AI Logo",
},
{
src: "https://svgl.app/library/clerk-wordmark-light.svg",
alt: "Clerk Logo",
},
];