Promo Banner Component

page.tsx

import PromoBanner from "@/components/marketing/PromoBanner";

page.tsx

<PromoBanner
    text={{
        desktop: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        mobile: "Lorem ipsum dolor",
        code: "LOREM50",
    }}
    link={{
        href: "/pricing",
        label: "Lorem ipsum",
    }}
    className="bg-black text-white"
/>

Tips

Create Urgency: Include time limits or scarcity in your promotional message

// ❌ Bad Example - No urgency
text={{
    desktop: "Special discount available on all plans",
    mobile: "Special discount",
}}
 
// ✅ Good Example - Clear urgency
text={{
    desktop: "48-hour flash sale: Save 50% on all plans. Ends tomorrow!",
    mobile: "Flash sale: 50% off",
}}

Mobile Text: Keep mobile text concise but informative

// ❌ Bad Example - Too long for mobile
text={{
    desktop: "Get 30% off annual subscriptions with code SAVE30",
    mobile: "Get 30% off annual subscriptions with code SAVE30",
}}
 
// ✅ Good Example - Concise mobile version
text={{
    desktop: "Get 30% off annual subscriptions with code SAVE30",
    mobile: "30% off: SAVE30",
}}

Promo Codes: Make codes memorable and relevant

// ❌ Bad Example - Complex, unmemorable code
text={{
    desktop: "Use code XJ4K9L2M for 25% off",
    code: "XJ4K9L2M",
}}
 
// ✅ Good Example - Simple, relevant code
text={{
    desktop: "Use code SPRING25 for 25% off",
    code: "SPRING25",
}}

Message Structure: Follow a clear format: Offer + Time Limit + Action

// ❌ Bad Example - Unclear structure
text={{
    desktop: "We have a sale on premium plans right now for new users",
}}
 
// ✅ Good Example - Clear structure
text={{
    desktop: "Save 30% on Premium Plans • Limited time offer • Use code SAVE30",
}}

[data] Files Header