- Offers FAB: clean circular yellow button (52px) replaces OffersBadge with energy rings - Badge: red numbered badge top-right of FAB showing coupon count - FAB flips to X/gray when panel is open (no confusing state) - Carousel panel: bottom sheet anchored above navbar (not floating center modal) - Sheet handle bar at top, drag-friendly feel - Sheet header: star icon + 'Ofertas SIBU' title + count badge + close X - Promo card: horizontal layout (88px square image + discount badge + info column) - Business name in yellow, promo title bold, 2-line desc, yellow CTA pill button - Chevron arrows inside the sheet on both sides, disabled when only 1 coupon - Animated dot indicators: wide pill for active, small circle for rest - Smooth slide-up/down transition on open/close - Removed unused OffersBadge component import
Vue 3 + TypeScript + Vite
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
Learn more about the recommended Project Setup and IDE Support in the Vue Docs TypeScript Guide.