Now let me generate design inspiration for this dark-mode event-tech promotional UI kit.

Now I'll build all three components. Let me first update the globals.css for dark mode theming, then create the components.

Now let me add the telegram color to the theme inline section and create the components:

Now let me create all the components and the demo page:

Now let me create a mock event card component and the demo showcase page:

Now let me update the layout.tsx with proper metadata for the project:

Here's what I built — a complete 3-component promotional UI kit for rupor.events with a dark event-tech aesthetic:

1. <ListingBanner /> — A horizontal banner with Telegram icon, giveaway text, animated sparkle particles, and a "Участвовать" CTA with hover-lift effect. Uses a dark-to-blue gradient background.
2. <GiveawayBadge /> — A compact pill-shaped badge overlay with a frosted-glass effect (backdrop-blur), Telegram icon + "Розыгрыш билетов" text, designed to sit in the top-right corner of event cards. Shown via the hasGiveaway prop on <EventCard />.
3. <EventPageBanner /> — A card-style block with subtle confetti particles, dual glow accents, headline/subtext, and a "Перейти в Telegram" CTA. Elegant celebratory feel without being childish, designed to sit above the ticket purchase section.

All components use Telegram brand blue #229ED9 as the sole accent, follow an 8pt spacing grid, have responsive mobile variants, accessible contrast, and include hover/animation states.