ReferAndWinBanner

Heroes 29

About

A customizable, animated banner component featuring floating paper airplanes and decorative checkmarks—ideal for referral, promotional, or announcement sections.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds ReferAndWinBanner to your project and fits it to your theme.

Code

How ReferAndWinBanner is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React, { useEffect } from 'react';
import ReferAndWinBanner from '@/components/ui/refer-and-win-banner';

export default function App() {
  // Sync dark mode with user system preference
  useEffect(() => {
    const root = document.documentElement;
    const media = window.matchMedia('(prefers-color-scheme: dark)');
    const applyTheme = (e) => {
      if (e.matches) root.classList.add('dark');
      else root.classList.remove('dark');
    };
    applyTheme(media);
    media.addListener(applyTheme);
    return () => media.removeListener(applyTheme);
  }, []);

  return (
    <main
      className="
        min-h-screen
        bg-[hsl(var(--background))]
        text-[hsl(var(--foreground))]
        flex
        items-center
        justify-center
        overflow-hidden
      "
    >
      <ReferAndWinBanner title="Refer & Win" />
    </main>
  );
}