Coffee Tonus

Author LasriCodexTotal Visits 1Visits in 7 Days 0

// preview

// description

A bilingual specialty coffee storefront with a live custom-order builder.

Coffee Tonus is a single-page specialty coffee storefront presented in English and Arabic. It opens with a promotion strip and a full-bleed hero, then walks through brand highlights, a bean catalog of eight roasted coffees with origin, blend and decaf filters, a smaller brewing equipment section, a Build Your Own Coffee configurator with live pricing, customer testimonials, a newsletter signup and a contact form. A slide-in cart drawer keeps track of added items, and a header toggle switches the entire page into right-to-left Arabic.

Highlights

Live order builder

Price updates live

Bean catalog

8 beans, 3 filters

Arabic switch

Full RTL translation

Cart drawer

Keeps state on add

Bilingual copy

English and Arabic

Warm design

Serif editorial look

How to Use

Browse the bean catalog
Scroll to the Products section to see eight roasted beans, each with a photo, tasting note, rating and price. Use the All, Single Origin, Blends and Decaf buttons above the grid to narrow the list; clicking a filter updates the cards immediately, and each card has an add to cart button.
Configure a custom order
Open Build Your Own Coffee and choose a bean, a roast level, a grind and a weight, then tick any extras such as a premium gift box or express delivery. The summary card on the right recalculates the total after every change, and its Add to Cart button adds the configured bag to the cart.
Review the cart and get in touch
Click the cart button in the header to open the drawer and check the items and running total. For the discount code, type an email into the newsletter box and press Subscribe to see the confirmation, or fill in the name, email and message fields in the contact section and press Send Message.