Infusia is a tea brand website template: a bright, botanical HTML5 template for herbal tea boutiques, wellness blend shops, tea subscriptions and tasting bars. Sage and white with a hibiscus accent, a hand-drawn vine on the mist bands, light condensed capitals and photographs of tea on a white table give it a fresh, calm feel. Underneath, it runs real tea logic: a blend builder that prices the tin as you choose, a caffeine meter, a wellness finder that ranks the blends by mood, time and caffeine. It also has a steep timer that counts each infusion. Finally, it has a monthly tin subscription with skip and pause, a wholesale estimator and a shop with tin sizes. It ships with light and dark mode, right-to-left support and WebGL layers – watercolour blooms spreading at the band edges and a hibiscus opening and closing in light in the footer.

Three Home Pages

• Home 01 – Herbal Boutique: a framed hero slider on white tea-table photographs, a facts strip, the blending room on a sage vine panel, the online tea shop with round loose-leaf tins, botanical line drawings – chamomile, peppermint, lavender, hibiscus and lemongrass draw their stems, leaves and flowers in as you scroll – four mood cards on a night band. Then comes the Tea Club with its next ship date. Finally, the page ends with the journal and an ask-the-blender form beside the map.
• Home 02 – Wellness Blends: a split hero slider, four base tiles and kind words. Then comes the wellness wheel – four moods round a ring that turns mood by mood with the scroll while the matching blend swaps into the centre – a steep card. Finally, the page ends with the club’s plans and an eight-photo tea table.
• Home 03 – Blend Studio: a sage-framed page whose hero floats botanical cut-outs – hibiscus petals, mint leaves and lemon wheels on three depths that drift, follow the pointer and part with the scroll – a first step of the builder, best sellers, a steep timer on a night band, how the studio works and the steeping letter.

Tea Pages

• Blend Builder: choose a base, add up to three of fifteen botanicals (filtered by mood), pick a 50 g or 100 g tin and name it. The price, the caffeine meter, the steep, the notes, the moods it serves and the tin’s label update with every choice. Add it to the bag or save it to your account.
• Wellness Finder: sleep, focus, digestion or immunity, the time of day and how much caffeine. The blends are ranked with a match and the reasons, and every mood lists its botanicals.
• Steep Guide: a steep timer that offers the next infusion a minute longer. It also has a steep chart for every blend in °C or °F for any number of cups.
• The Tea Club: three plans at a flat rate per tin. It also has a four-step sign-up that never blocks until the last step. Finally, it has the next six tins with Skip for any month and Pause for all – shared with My Account.
• Our Blends: the house tea menu with a dotted-leader price list, mood tabs, a base filter and search.
• Wholesale: kilograms a month set the tier. The price per kilogram, the month, the year and the cost per cup follow.
• The Shop: moods, base, price, sort and search. It also has a product page with tin sizes and a caffeine meter, bag, coupon, free-delivery meter, tax, checkout with an order number and a wishlist.

Inner Pages

Infusia includes About, Botanicals, Botanical Details (the plant draws itself in) and Our Herbalists. It also has Herbalist Profile, Gallery with filters, Wholesale and FAQ with search. Then comes Journal with five post formats and Journal Details. There are also Contact (working PHP form, the boutique’s live status, the week’s hours and a map). Finally, there are Login, Register, Forgot Password, My Account, Coming Soon and 404 – thirty pages in total.

Tea Brand Website Template Features

• 30 HTML pages, 3 unique home page designs
• Light and dark mode on one switch, remembered between visits, with no flash on load
• Right-to-left stylesheets for every page and a flag language picker that turns any page around (Bootstrap RTL included)
• WebGL layers tinted by the theme colours: watercolour blooms at the band edges and a hibiscus in light in the footer
• Real tea logic from one data block: tin pricing, caffeine per cup, steeping, mood ranking. It also has the club’s ship days, wholesale tiers, live opening hours, shop totals.
• A Petal Spiral preloader, Stir In reveals with a leaf rule under every title, a steep tag that swings out on hover, and three scroll moments that never pin the page
• Botanical line drawings, illustrated icons in two inks, a vine pattern and botanical cut-outs drawn for the template
• Swiper sliders, Fancybox popups, counters and meters
• 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
• Fully responsive with a desktop-first breakpoint system and wide-screen layouts
• Clean HTML5 markup, zero console errors
• Well-commented code with a numbered CSS table of contents and JS index
• Documentation included

This tea brand website template ships with documentation, free lifetime updates and an instant download. Every page also works on phones, tablets and desktops. Infusia also comes as React, Vue, Angular and WordPress, or in the developer bundle at 20% off. Browse more Organic Drinks HTML5 templates.

Credits

Bootstrap 5.3, jQuery 3.7.1, Swiper 11, GSAP 3 with ScrollTrigger, Fancybox 3.5 and Font Awesome Free. It also uses RTLCSS and Google Fonts (Roboto Condensed, Roboto).