Artem Artemev

LOG OUTPUT _

01: Context

"Unity in Diversity" is an eight-day retreat in Tatarstan (16–23 August 2026) where an Orthodox priest, an imam, a Vaishnava mentor and a musician lead practices for people of different traditions. The client is the "Breathe Life Anew" project (Alexey Tonkikh).

The format is new and sensitive: the site had to explain that this is not about arguing over religion, show the comfort level (an eco-hotel on the Kama Sea + AZIMUT in Kazan), and lead the visitor to an enquiry.

"The audience is 30–55, arriving on a phone from a Telegram channel link. So: mobile speed, trust from the first screen, minimum steps to contact."

[ SYS_IMAGE_LOAD ] First screen: sunset over the Kama Sea, dates, two actions

02: Structure as a Funnel

The page runs as a sequence: the "Is this about you?" hook with four self-identifying statements → atmosphere video → mentors → what the week gives → day-by-day programme → the place → accommodation and food → kids' programme → price → FAQ → contacts. Twelve sections, each ending with "Book" or "Calculate the price".

[ SYS_IMAGE_LOAD ] "If these statements resonate" — self-identification instead of description

03: Design

A warm, calm palette: cream, sand, deep blue, olive gold. Cormorant Garamond for headings, Manrope for text. The symbols of four traditions — cross, crescent, om, tilaka — as a visual leitmotif, none dominating.

[ SYS_IMAGE_LOAD ] Mentors: four traditions, cards with biographies

[ SYS_IMAGE_LOAD ] Mentor modal

[ SYS_IMAGE_LOAD ] Day-by-day programme: the Kama Sea and Kazan

04: Interaction Without Frameworks

Mentor modals, an FAQ accordion, a room-gallery lightbox with navigation, scroll reveals, a sticky header, a mobile menu — all in plain JS, ~10 KB, zero dependencies.

Performance: lazy-loading of every image and background via IntersectionObserver (data-src / data-bg), a fallback for unavailable images, video with a poster and deferred loading.

function loadImg(el) {
  if (el.dataset.src) { el.src = el.dataset.src; el.removeAttribute('data-src'); }
  if (el.dataset.bg)  { el.style.backgroundImage = 'url(' + el.dataset.bg + ')'; el.removeAttribute('data-bg'); }
}
var io = new IntersectionObserver(function (entries, obs) {
  entries.forEach(function (e) { if (e.isIntersecting) { loadImg(e.target); obs.unobserve(e.target); } });
}, { rootMargin: '200px' });
document.querySelectorAll('[data-src],[data-bg]').forEach(function (el) { io.observe(el); });

[ SYS_IMAGE_LOAD ] FAQ accordion

05: Conversion

Three selling paths on one page:

An enquiry form with accommodation choice and server-side submission; if the network is down — a mailto fallback with the message body already assembled.
"Calculate the price in Telegram" — a link with a pre-filled message: the shortest path for people who dislike forms.
Online payment via Robokassa: a PHP handler builds the MD5(MerchantLogin:OutSum:InvId:Pass1) signature, supports test and live modes, with success and failure pages and a public offer.

[ SYS_IMAGE_LOAD ] Flexible payment: what the price includes

// pay.php — signature and payment link
$signature = md5(ROBOKASSA_LOGIN . ":" . $sum . ":" . $inv_id . ":" . ROBOKASSA_PASS1);
$payUrl = "https://auth.robokassa.ru/Merchant/Index.aspx?"
    . "MerchantLogin=" . urlencode(ROBOKASSA_LOGIN)
    . "&OutSum=" . urlencode($sum) . "&InvId=" . urlencode($inv_id)
    . "&Description=" . urlencode($desc)
    . "&SignatureValue=" . $signature
    . (ROBOKASSA_TEST ? '&IsTest=1' : '');

[ SYS_IMAGE_LOAD ] Contacts and enquiry form

06: Infrastructure

Static files + PHP on Reg.ru shared hosting, an FTP auto-deploy script; a Vercel preview for client sign-off. The whole site is one index.html (44 KB), one CSS and one JS.

[ SYS_IMAGE_LOAD ] Mobile version

07: Outcome

The client got a standalone site with no CMS or subscriptions, edited in one HTML file and deployed with one command. Every selling path — enquiry, Telegram, online payment — is closed within a single page.

Unity in Diversity — Interfaith Retreat Landing

SPECIFICATIONS