I've created a responsive banner component that matches the design exactly:

1. Used the exact colors from the Figma design (#3f04ba for the purple, #e4dffd for the background)
2. Implemented the "NEW" badge in the top left corner
3. Added the pen/drawing icon using Lucide's PenSquare icon
4. Made the text responsive with appropriate line breaks
5. Added hover effects and smooth transitions
6. Ensured proper spacing and padding
7. Made the component responsive - the icon hides on mobile for better layout
8. Used rounded corners and proper typography to match the design

The component is reusable and can be easily integrated into any page. Let me know if you'd like any adjustments to match the design even more closely!

This HTML version includes:

1. Arial font family specified explicitly
2. All styles contained within the HTML file
3. Inline SVG for the pen icon (no external dependencies)
4. Responsive design with media queries
5. Exact same colors and spacing as the original
6. Hover effects and transitions
7. All necessary vendor prefixes for broader browser support

You can copy this entire code and use it directly in any web application. The banner will work standalone without any external dependencies or build tools. Just copy the HTML into your webpage where you want the banner to appear.

Key features:

• Pure HTML and CSS
• No external dependencies
• Responsive design
• Cross-browser compatible
• Matches the original design exactly
• Uses Arial font family as requested

Let me know if you need any adjustments or have questions about implementing it in your webapp!