OfferPill

The OfferPill component is a stylized promotional banner designed to display limited-time offers or discounts. It includes a "Launch Offer" tag and customizable text content, which is typically used within section headers to attract user attention to promotions.

Props

Prop	Type	Description
content	string	Custom text to display within the offer pill, such as a discount or promotional message.

Dependencies

The OfferPill component has no external dependencies or imported components.

Key Style Classes

• Container:

  • w-fit p-1 border border-neutral-800 rounded-full: Provides a rounded pill shape with a border, adjusting to the content width.

  • bg-neutral-950: Sets a dark background to contrast with the text and inner pill.

• Inner Tag:

  • bg-emerald-400 p-1 px-2 rounded-full: Creates a smaller pill within the main container, labeled "Launch Offer" with a bright background for emphasis.

  • Text Styling: The content text is set in text-sm font-light for readability.

Usage Example

// OfferPill component used within a Title component to display a promotional message
<OfferPill content="50% off regular price" />

Additional Notes

• Flexible Content: The content prop provides customizable promotional text, allowing for dynamic updates without altering the component’s structure.

• Visual Emphasis: The dual-pill design (main container and inner tag) helps emphasize the promotional nature of the message, drawing user attention effectively.

---

This entry should cover everything for the OfferPill component.