UV Drink Locker is a product marketing website I developed for The Drink Locker, converting a Figma design into production-ready HTML, CSS, and JavaScript. The product is a UV sterilizer and locker system aimed at offices, gyms, and schools that want safer shared drink and bottle storage.

The design challenge was educational as much as promotional. Visitors needed to understand the hygiene problem, the UV sterilizer features, and concrete benefits — peace of mind, cleaner shared spaces, and cost efficiency — before contacting sales. I structured the page around a mission-led hero, feature blocks with smooth interactions, benefit sections, and clear application use cases.

I deliberately avoided frameworks. Pure HTML, CSS, and vanilla JavaScript kept the payload small and the implementation transparent for a marketing surface that must load quickly. Swiper.js handles product imagery carousels with touch support. Interactions stay subtle so they guide attention without distracting from the product story.

Responsive work mattered because facility managers and decision-makers often browse on mixed devices. I preserved the Figma visual language while adapting spacing, type scale, and media for smaller screens. The outcome is a clean, persuasive product site that explains a specialized hardware concept in plain language and gives the brand a credible web presence.

Projects like this show how I handle design-to-code delivery: pixel-conscious CSS, accessible structure, and performance-minded vanilla scripting.

Specialized hardware products often fail online because the website assumes too much prior knowledge. I wrote and structured sections to answer the questions a facilities manager actually asks: what problem does this solve, where does it fit, and why is UV sterilization worth adopting. Interactive highlights support that story instead of replacing it.

The finished site is intentionally straightforward to host and extend. For brands with a physical product and a B2B buyer, that combination — clear education, responsive polish, and lean code — is usually more valuable than a flashy framework demo.