Occasions Card

Cards 2

About

Occasions Card This component displays a special occasion card with a dynamic background color, title, and a featured image. It is designed to be highly reusable and theme-adaptive.

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

Code

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

Usage.tsx

import * as React from 'react';
import { OccasionsCard, DateSelector, HelpBanner } from '@/components/ui/occasions-card';

// --- DEMO DATA ---
const occasionsData = [
  {
    brandName: 'RAVI',
    primaryTitle: 'Occasions',
    secondaryTitle: 'Onam Specials',
    imageUrl: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-EUs2oPydAzHpk1Ebf1MTfouaLTacvw.png&w=1000&q=75', // Replace with your image URL
    backgroundColor: '#1E3932',
  },
  {
    brandName: 'RAVI',
    primaryTitle: 'Occasions',
    secondaryTitle: 'Navratri Specials',
    imageUrl: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-F7d1EcHOj8WV4DIvwdD8eprAOGlJah.png&w=320&q=75', // Replace with your image URL
    backgroundColor: '#C8702D',
  },
  {
    brandName: 'RAVI',
    primaryTitle: 'Occasions',
    secondaryTitle: 'Pujo Specials',
    imageUrl: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-Lo6Z6zumG1tr01pDUmtp1bOwDlTeIE.png&w=320&q=75', // Replace with your image URL
    backgroundColor: '#B73E3B',
  },
];

export default function OccasionsCardDemo() {
  const [currentIndex, setCurrentIndex] = React.useState(0);

  // --- Cycle through occasions every 4 seconds ---
  React.useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % occasionsData.length);
    }, 4000);
    return () => clearInterval(interval);
  }, []);

  const currentOccasion = occasionsData[currentIndex];

  return (
    <div className="flex h-screen w-full items-center justify-center">
      <OccasionsCard
        brandName={currentOccasion.brandName}
        primaryTitle={currentOccasion.primaryTitle}
        secondaryTitle={currentOccasion.secondaryTitle}
        imageUrl={currentOccasion.imageUrl}
        backgroundColor={currentOccasion.backgroundColor}
      >
        {/* Pass the inner content as children for maximum reusability */}
        <DateSelector />
        <HelpBanner />
      </OccasionsCard>
    </div>
  );
}