Client Name: Aloha

Industry: Hospital Tech

Project Scope: Build a new dynamic pricing experience inside Framer that detects user region automatically, supports multiple languages and currencies, and updates plan pricing live based on the number of units selected.

Duration: 4 weeks

Aloha provides an all-in-one platform for property managers, helping them handle bookings, payments, and guest management.

Client’s Pain Points: The client wanted to simplify their pricing structure and make it smarter. Previously, pricing was split by client type and started varying from 5 units, which made it confusing for users and hard for Aloha’s team to maintain.

They needed a system that could:

Automatically detect a user’s region via IP.

Adjust the currency and pricing accordingly.

Update all three plan cards (Pro, Pro Suite, Pro Suite AI) live based on the number of units.

Work seamlessly across three languages: English, Spanish, and Portuguese.

Fit perfectly within the existing Framer layout (hero section + pricing body).

Design & Logic I created a modern dropdown UI with two selectors — one for Region and one for Units. Each dropdown had gradient borders, custom chevrons, and dark-theme styling to match Aloha’s brand.

Development The real work happened in the code. I wrote a custom React logic inside Framer using Framer’s code component feature:

Converted the pricing spreadsheet into a structured JSON file (prices_aloha.json) for all regions and unit tiers.

Integrated IP detection using ipapi.co to pre-select region automatically.

Added a language-based fallback so Spanish and Portuguese users default to the LatAm pricing.

Built a Pricing Context so every component (hero dropdowns + pricing cards) shared the same live data.

Ensured everything was responsive, dropdowns stack vertically on mobile while pricing stays synced.

Designed and styled the dropdown interface inside Framer.

Set up the pricing logic and JSON mapping.

Connected IP detection + language fallback.

Built real-time state sync across hero and body sections.

Tested across regions, currencies, and devices until the logic worked live inside Framer.

This required a lot of prompting, debugging, and iterating to get the code working correctly within Framer’s sandbox, not just in a local test environment.

The new pricing page now:

Auto-detects a visitor’s region and currency.

Lets users manually switch region or change units.

Updates all three pricing cards instantly.

Works perfectly across English, Spanish, and Portuguese versions.

Uses a single JSON source, so the Aloha team can update prices anytime without touching code.

It’s clean, fast, and fully aligned with the design, all powered by custom code, written directly inside Framer.

After the pricing logic went live, the Aloha team reached back out to extend the same custom functionality to a new pricing layout.

They were redesigning the page and wanted the live logic I built (region detection, live updates, and dynamic cards) to power the new section marked in red.

I reapplied the logic, adapted the layout to fit the new design, and re-tested everything to make sure the JSON data and pricing context synced perfectly with the updated components.

The new version runs smoothly, looks clean, and is now fully reusable for future pages

Client Feedback: “The new pricing page works beautifully. Everything updates instantly, and it’s made explaining our plans so much easier. Amarachi understood exactly what we needed and delivered it perfectly in Framer.” - Aloha Product Team

Book a quick FREE 25 min meeting where we discuss if our offer would work for your case

Keywords

Framer Expert, Web Design and Development, Interactive Prototyping, High-Fidelity Animations, Responsive Design, Dynamic Components, Design to Code, Framer Studio, Figma to Framer, Custom Website Design, Landing Page Development, UX/UI Design, Interactive Web Experiences, Conversion-Optimized Websites, E-commerce Solutions, Fast Turnaround Time, Pixel-Perfect Designs, Seamless User Experiences, Scalable Web Solutions, Collaborative Design Process, Asynchronous Feedback Integration, Timely Project Delivery, Exceptional Attention to Detail, Engaging Customer Experiences, Framer Designer, Framer Template Edit, Framer Portfolio Development, Framer, Framer Website Customization & Support, Framer Code Override, Framer Plugins, Website Design, UI/UX Design, Landing Page Design, UX, UI, Copywriting, Design, Development, Fast, Responsive Website, Framer Edits, Framer Portfolio Design, Framer Template Setup and Customization, Highlevel Landing Page in Framer, Multi-Page Website in Framer, Framer Help, Framer Consultation, Framer Landing Page Design, Framer Landing Page Development, Responsive Website, Framer SaaS Landing page for startups, businesses, companies,