A homepage that scrolls like a film: a solar field at dusk turns through six scenes, from own generation to storage and transport.
- 01One territory
- 02Own generation
- 03Your roof
- 04Storage
- 05Transport
- 06Two doors
- 07In numbers
- 08By site type
- 09The sun
- Location
- Ukraine
- Status
- Live, phase 1
- Scope
- Positioning · design system · site · forms · SEO and GEO
Brief
Brief
AST distributes and integrates green-energy equipment across Ukraine — solar modules, inverters, battery storage, EV charging, cable and switchgear — and wants to be read not as a supplier but as a partner. The brief named three audiences with three different journeys: dealers (the priority), businesses and communities, and private homes. The site had to serve all three without becoming a generic catalog.
- Client
- AST (AGROSYSTEMTRADE LLC)
- Industry
- Renewable energy, B2B distribution
- Scope
- Positioning · design system · site · forms · SEO and GEO
- Status
- Live, phase 1
- Live
- astrade.com.ua
Role and scope
- Positioning and site concept from the client’s brief
- Design system (tokens, components, guidelines)
- Homepage, catalog, category pages, dealer hub
- A scroll-driven frame-sequence hero on the homepage
- Forms: 28 popup definitions on one shared component, calculators and a quiz
- SEO and GEO: structured data, sitemap, robots.txt and llms.txt for AI assistants
- Front-end build and launch
Scroll hero
The strongest page of the site is its homepage. Its hero is a sequence of frames that the scroll position plays, so the picture moves exactly as fast as the visitor scrolls.
- 181 frames
- of 1920 × 1080 painted on one canvas, not a video: scrolling sets the frame. Screens up to 1200 px use a set of 91 smaller frames.
- 484 vh
- of pinned scroll: the picture holds on each of six scenes and moves between them.
- 6 scenes
- One territory, Own generation, Your roof, Storage, Transport, and the two doors, with five call-outs drawn on the picture and a rail to jump between them.
- 0 frames below 860 px
- Narrow screens and reduced motion load no frames at all: the hero is a still with the scenes listed.
The poster is the first thing painted. The frames load after the page has loaded, every eighth frame first, so the scroll is playable early and fills in.
Forms
AST asks for a contact in many places and for many reasons: dealers, tenders, product requests, six solution pages, calculators. All of them are built from one component and one JSON file.
Four of the twenty-eight, in use
The dealer application asks for a phone number first and opens the rest on request; the four-question quiz walks through the site type, the consumption and the tariff; the five-step solar calculator shows a result before it asks for a contact; the floating callback needs one field. A popup with typed data asks before it closes.Sample data only; nothing is sent.- 28
- form definitions in one JSON file: a new form is a new record, not new markup
- 25
- of them collect a contact: 4 quick forms (a phone number is enough), 16 long forms, 4 calculators and a quiz; the other 3 show certificates
- 1
- shared component: phone mask, validation after the field is touched, UTM tags and a lead id on every request, a hidden trap field against bots
- Every popup has a link of its own (?modal=…) for ads, mailings and QR codes; Back closes it and Forward opens it again.
- A popup with typed data asks before it closes: Close without sending?
- A request reaches the client by email, as a Telegram card with In progress and Done buttons, and as a file; it counts as sent if any one of them works.
Search and AI
The site is built to be found by search engines and to be quoted correctly by AI assistants, from the same facts: one set of data writes the pages, the structured data and the files the assistants read.
SEO
- 143
- pages in the sitemap: the home page, 6 solution pages, a catalog hub, 6 categories and 126 product pages, dealers, contacts and privacy
- 21
- schema.org types in the structured data that every one of those pages carries, from Organization and LocalBusiness to Product with its Offer and warranty
- 89
- FAQ questions on 12 pages, marked up from the same data as the visible text, so the two cannot drift apart
- Catalog, category and product pages are generated from data files; their titles, descriptions, canonicals and Open Graph come from one config.
- A checker blocks the deploy when a title is over 60 characters, a description is outside 80–160, or a canonical does not match.
GEO, for AI assistants
- robots.txt invites ten AI crawlers by name, so the site can be read and quoted by the assistants people ask.
- llms.txt is a plain-language profile for them in 16 sections: the legal entity and address, what is sold and to whom, terms, the six warehouses, how the calculators work, what AST does not offer, and what to check before citing.
- Organization, LocalBusiness and FAQPage markup state the same facts for machines.
- GPTBot
- ChatGPT-User
- OAI-SearchBot
- ClaudeBot
- anthropic-ai
- PerplexityBot
- Perplexity-User
- Google-Extended
- Applebot-Extended
- CCBot
20 of 109 users came through an AI assistant (18%), and 33 of 201 sessions (16%). chatgpt.com is a named source in the same period, with 33 sessions.
2 of the 8 new leads (25%) came through an AI assistant. Approved and converted leads still read 0 in the report.
Small numbers and early days: they are shown as they are.
Phone
Installers and dealers read this on a phone, often outdoors. Type stays large, the primary actions stay within reach, and category pages open with the product class before any list.
Under 860 px the hero loads no frames: phones get a pinned deck of six portrait stills, one per scene, and a call bar stays under the hero.
A deck of stills, not frames
On a phone the hero is a pinned deck of portrait stills, one per scene, with the two doors as the last slide; the numbers and the load charts follow.A sheet under the thumb
The dealer application opens as a sheet: the phone field is first, the rest opens on request. The quiz puts one question on a screen.Sample data only; nothing is sent.Outcome
- LiveLive platform with the catalog, category pages and dealer program in production; brand and calculator sections are visibly in progress on the live site.
- LiveIn the client’s Google Analytics for the 28 days to 14 October 2026, AI assistants are a traffic channel of their own: 20 of 109 users and 33 of 201 sessions, with chatgpt.com as a named source; 2 of the 8 new leads in the period came through that channel.
- PendingThe client reports customers who first came through ChatGPT; approved and converted leads still read 0 in the analytics report, so the number of customers is being confirmed with the client before publication.
- PendingSearch and inquiry metrics are being collected with the client before publication.
We publish numbers only with the client’s data and permission. No metrics on this page are estimates.
Credits
- StudioDrupal Authority — positioning, design system, design, front-end, forms, SEO and GEO
Stack
- Static HTML / CSS / JS, no frameworks
- All assets self-hosted (no CDN)
- Catalog pages generated from product data
- Design system as the single source of visual values
- Structured data on all 143 indexed pages; llms.txt and open AI-crawler rules
About the films
Recorded by the studio on 2026-10-15 from the live site, astrade.com.ua, in real time, without editing. The site is in Ukrainian, so the recordings are made from a copy of it with the same pages, scripts, frames and photographs and its visible text translated into English. The logo is the client’s own drawing and is untouched. The forms were filled with sample data and nothing was sent. The analytics figures are read from the client’s Google Analytics report screens.
