Back to gallery

Puerto Rico Bucks

Description

Tropical drinks shop with floating hero animations, full mobile ordering flow, real-time WebSocket order tracking, gift cards, and loyalty rewards program.

Prompt

Build a vibrant, fun website for a tropical shaved ice and drinks shop in a Caribbean beach town - think piraguas, smoothies, acai bowls, and coconut drinks with a playful beach-party vibe. The design should use a teal, coral, and cream color palette with bold display fonts and a script logo font, and the hero section should feature multiple floating product images arranged in an arc with gentle float animations over a teal elliptical clip-path background. Include sections for the full menu as a 3x2 grid of category cards (shaved ice, smoothies, acai bowls, coconut drinks, tropical sodas, rotating specials) each with unique gradient backgrounds, product photography with hover zoom, and badge pills showing variety counts - plus a featured specials carousel with gradient cards and snap scrolling, a catering section with party packs for large events, gift cards with denomination options and a purchase modal, a location section with address and hours, and a rewards club shown as a phone mockup with loyalty points and colored reward dots. Add a full ordering experience: an "Order Now" button opens a modal with category-filtered menu items fetched from the API, add-to-cart with quantity steppers, a cart view with a gradient total card and customer name input for pickup, and after placing the order, a real-time WebSocket order tracking view with a 3-step progress tracker (Ordered > Preparing > Ready) that animates live as status updates arrive, plus a push notification opt-in for pickup alerts. Every element should feel like a mini-vacation: tropical, colorful, and irresistibly appetizing.

Live App

https://4b6ba96afa6d495e9a.v2.appdeploy.ai/