ReferAndWinBanner

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>
  );
}