Design a modern, colorful mobile app UI for a portable blender brand called Mixify.
The theme should be fresh, fruity, and energetic, using soft fruit-inspired colors like strawberry red, mango orange, kiwi green, and blueberry purple.
The app should include:
• Home screen with a large “Blend Now” button
• Smoothie flavor presets (Strawberry Boost, Mango Energy, Green Detox, Berry Power)
• Battery percentage indicator
• Speed control (Low / Medium / High)
• Clean Mode (locked with note: “You need the Mixify Ultra bottle to use this feature.”)
Design style:
• Rounded buttons
• Soft gradients inspired by fruits
• Small fruit illustrations as icons
• Smooth, friendly typography (similar to Poppins or Inter)
• Looks professionally designed, not overly cartoonish
Show the app displayed on a modern iPhone mockup with a clean background.
Now let me update the theme, layout, tailwind config, and build all the components. I'll start with the globals.css, layout, and tailwind config, then create the app components.
Now let me create all the components. I'll build the iPhone mockup frame, the app screen, and each section component.
Now let me create the main page that puts everything together with the iPhone mockup on a clean background:
Now let me also add the PWA manifest as requested:
Let me verify the app is rendering well by checking the key files once more:
Everything looks great. The Mixify app is fully built with all the requested features. Here's what I created:
iPhone Mockup Showcase — The entire app is displayed inside a realistic iPhone frame with Dynamic Island and home indicator, set against a clean background with soft fruity ambient glows.
Inside the app:
You can send messages while the preview loads