Components
Loading preview...
Here is Sticky Banner component
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/sticky-bannerimport { StickyBanner } from "@/components/ui/sticky-banner";
export default function StickyBannerDemo() {
return (
<div className="relative flex h-[60vh] w-full flex-col overflow-y-auto">
<StickyBanner className="bg-gradient-to-b from-blue-500 to-blue-600">
<p className="mx-0 max-w-[90%] text-white drop-shadow-md">
Announcing $10M seed funding from project mayhem ventures.{" "}
<a href="#" className="transition duration-200 hover:underline">
Read announcement
</a>
</p>
</StickyBanner>
<DummyContent />
</div>
);
}
const DummyContent = () => {
return (
<div className="relative mx-auto flex w-full max-w-7xl flex-col gap-10 py-8">
<div className="h-96 w-full animate-pulse rounded-lg bg-neutral-100 dark:bg-neutral-800" />
<div className="h-96 w-full animate-pulse rounded-lg bg-neutral-100 dark:bg-neutral-800" />
<div className="h-96 w-full animate-pulse rounded-lg bg-neutral-100 dark:bg-neutral-800" />
</div>
);
};