Beanora – Coffee Club Landing Page HTML5 Template

About This Item

This coffee club landing page template is one HTML5 page with one goal. Beanora is a warm, kraft-paper one-page subscription landing page for coffee roasters, coffee clubs and bean subscription boxes.

Every call to action leads to one goal – starting a coffee club subscription – through a six-step club builder: the coffee, the roast, the grind, the bags and the rhythm, priced box by box on the right as each choice is made. Espresso darks with a tan accent, caps titles in Marcellus, the roastery seal on the hero and line-drawn coffee sketches give it the feel of a real roastery.

The header is a set of anchor tabs that glide to each section and light up as you scroll. Also, the page ships with light and dark mode, right-to-left support and WebGL layers.

In short, every section on the page leads to that one action. Also, the contact form works out of the box, so you can launch as soon as your content is in.

Coffee Club Landing Page: One Page, Built To Convert

• Hero Slider: First, three slides with the roastery seal and Build Your Box and See The Plans buttons.
• Roasted, Packed, Posted: Then, six features round the bag – roasted to order, free shipping, freshness, pause any time.
• Seven Origins: Next, the origin cards slide sideways with the scroll, each with altitude, process and harvest.
• Pricing: After that, three house espresso plans – every week, every two weeks, every four weeks – with the saving, the bags and the price per delivery.
• Parallax Band And Video: Also, never Run Out Of Beans – live plan prices on a photo that drifts as you scroll, with a film popup.
• Club Builder: Then, coffee, roast, grind, bags, rhythm and delivery, with a live summary of the box and its price. Continue never blocks; only the last step checks the details.
• How It Works: Next, roasted on Tuesday and Friday, shipped the same day, change it any time.
• Brew It Right: In addition, ratios, dose and time for six brewers.
• Opening Hours & Reservations: After that, the roastery bar’s week with open now.
• Testimonials: Also, member reviews from the coffee club, with the Google rating.
• Contact: Finally, the bars, phone and orders, a Google map and a working contact form.

Coffee Club Landing Page Features

• One-page subscription landing with a single goal: start a coffee club subscription
• Anchor-tab header with smooth scrolling and a scroll-spy that marks the current section, mirrored in the mobile menu
• Light and dark mode on one switch, remembered between visits, with no flash on load
• Right-to-left stylesheets and a flag language picker that turns the page around (Bootstrap RTL included)
• WebGL layers tinted by the theme colours: grind grain at the dark bands’ edges and a coffee bean turning in a warm light in the footer
• Real coffee logic from one data block: plan prices and savings, the club builder, brew ratios, the bar’s hours with open now
• A bean-pile preloader, photos uncovered along a diagonal sweep, word-by-word titles and a scroll moment that never pins the page
• Hero slider, testimonial slider, parallax photo band, Fancybox video popup
• prefers-reduced-motion support for accessibility
• CSS-variable design tokens for both themes
• Working PHP form handler with optional invisible reCAPTCHA v3
• Font Awesome Free loaded locally, plus illustrated line icons in two inks
• Fully responsive with a desktop-first breakpoint system and wide-screen layouts
• W3C valid, zero console errors
• Well-commented code with a numbered CSS table of contents and JS index

Before You Buy

First, open the live demo and scroll the whole page. Then, check it on your phone. Finally, compare the sections above with the action you need.

Credits

Bootstrap 5.3, jQuery 3.7.1, Swiper 11, GSAP 3 with ScrollTrigger, Fancybox 3.5, Font Awesome Free, RTLCSS, Google Fonts (Marcellus, Open Sans).

Note

All images are used for preview purposes only and are not included in the download package – they are replaced with neutral placeholders. The logo files, the seal, the illustrated icons and ornaments, the kraft paper texture and the language flags are included.

Browse more Restaurant & Cafe landing pages, or the multi-page Restaurant & Cafe website templates.