Qitaf

Qitaf – Florist Studio & 3D Bouquet Builder HTML Template

A trilingual (EN/AR/DE) 17-page florist storefront built around a real-time 3D bouquet builder: the customer picks the size, flowers, greenery, wrap and ribbon, and the arrangement assembles itself in WebGL before anything is cut. Mobile-first, with a fully mirrored RTL layout that the 3D studio mirrors with it.

Qitaf is a complete storefront for florists, bouquet studios and same-day flower delivery. Seventeen pages ship ready — home, the shop, occasions, a full product record, basket, checkout, the account dashboard, sign in, register, the journal and an article, gallery, FAQ, about, contact, 404, and the bouquet builder — all sharing one header, footer, mini-cart drawer, search overlay and language switcher. The home page was re-sequenced rather than reskinned: the four freshness and delivery promises move directly under the hero where they answer the first question a buyer actually has, the shop comes before the studio talks about itself, the 3D builder gets a section of its own because nothing else on the market has one, and the wall of lorem-ipsum the original buried above the products is gone entirely. Every section heading was rewritten with it, and twelve bouquets, four occasions, six articles and two testimonials carry real copy rather than filler. The builder is the reason the template exists. In eight guided steps — size, flowers, greenery, wrap, ribbon, preview, card, confirm — the arrangement builds itself on screen in WebGL, every petal generated from geometry rather than pulled from a stock photograph, and the customer can spin it, zoom in, change their mind, and have the finished design photographed server-side before they pay. Composition stays with the florist by design: the customer chooses what goes in and the engine decides where each stem sits, because letting people drag individual stems produces bouquets no one can reproduce by hand. Every gating rule lives in one function, the running total and the stem list update on every click, and the finished design leaves as a rendered picture with the order written underneath — ready for the basket or for WhatsApp. Every string on every page is translated into English, Arabic and German from a single 326-key dictionary generated at build time, so a label cannot drift between the markup and the dictionary. English is written into the HTML, which keeps each page complete and indexable with JavaScript off. Arabic is a true mirror rather than a right-aligned copy: the theme stylesheet is programmatically rewritten onto CSS logical properties — 168 physical declarations converted, with an auto-generated tail for the border-radius shorthands, transform signs and gradient directions logical properties cannot express — and direction is resolved in the document head before the first paint, so an Arabic page never flashes left-to-right and the sliders receive their RTL flag at initialisation. Prices are bidi-isolated so a currency token cannot reorder itself inside an Arabic sentence, and the 3D studio mirrors too, flower names, colour names and wrap notes included. Latin copy pairs Fraunces for headings with Outfit for body; Arabic uses Cairo and Tajawal. The palette was rebuilt at source rather than layered on as overrides — persimmon against marigold, sage and cocoa — so no hover, badge or focus state is left showing the old accent. The layout is mobile-first in the strict sense: the vendor sheet is desktop-first, so a hand-authored min-width layer sits on top of it and every page was machine-checked for horizontal overflow at 360, 768 and 1440 pixels across all three languages, alongside a contrast gate that walks every text node and fails when text matches what is behind it. All forty-three photographs are cropped to the exact box the layout expects and colour-matched as a set, the wordmark is set as type with no icon, and every mark, section glyph and favicon is hand-authored SVG. The build is reproducible end to end — imagery, icons, stylesheet transform, dictionary and all seventeen pages are generated by one command that audits its own output for dead links, missing assets and untranslated keys.