AI tool and SaaS landing page
An AI meeting-assistant site in a dark aurora with glass — the site is the demo: a header with a spark and an aurora line, a hero where the assistant types a recap from a call transcript, a “how it works” pipeline of three animated nodes, a sandbox with a button and a sectioned answer, integrations on two orbits, a client marquee, pricing with a seats slider and a yearly discount, a data FAQ accordion, a glass email call to action and a footer with a system status. Not a single photo. Wix Madefor Display, Golos Text and IBM Plex Mono.
This scenario shows which blocks make up a landing page for an online product: from a hero with a product demo to pricing, FAQ and a signup form. Open the demo to see the whole page, then take the sections you need from the catalog one by one.
What it is made of
10 catalog blocks in page order. Each one is installed with its own command; nothing is recreated.
1. Header
AI service navbar: a floating glass capsule with an equalizer and a live call indicatornavbar-033
A floating glass capsule: an equalizer logo, a sliding menu highlight, a live call indicator.
2. First screen
AI meetings hero: a monitor with a call app, after «Leave» the results arrive as notificationshero-033
A three-person call with captions ends — the task, summary and decisions fly out to the services.
3. How it works
How the AI works: a three-node pipeline with running dotsai-001
Three nodes — audio, text, tasks — with micro-animations and dots running between them.
4. Sandbox
AI sandbox: paste text — the recap types out in sectionsai-002
A transcript field, a “Make a recap” button, the answer types out in sections, “Copy”.
5. Integrations
Integrations as a router: inputs → product core → outputs, packets run along the wiresbento-002
A router: inputs, the product core and outputs, packets run along the wires.
6. Trusted by
“Worked with” as a text marqueelogocloud-007
A marquee of client names.
7. Pricing
Pricing with a seats slider and a yearly switchpricing-025
A “people on the team” slider, a yearly switch, three cards that recalculate.
8. Data
FAQ accordion with a plus-to-cross togglefaq-023
An accordion on storage, model training and on-premise.
9. Get started
Glass call to action with an email field on a floating auroracta-026
A glass card on floating auroras, an email field, “no card”.
10. Footer
SaaS footer with a system status and columnsfooter-032
A «recap of this page» card, a pulsing system status, link columns.
Pro
The exact composition, page source and agent link are in PRO
The demo and the block list are open to everyone. Subscribers see every block's props as in the demo, the theme rules, the image prompts and one link an AI agent uses to build the same page.
Get PROFAQ
- What is the “AI tool and SaaS landing page” page made of?
- 10 catalog sections in order: AI service navbar, AI meetings hero, How the AI works, AI sandbox, Integrations as a router, “Worked with” as a text marquee, Pricing with a seats slider and a yearly switch, FAQ accordion with a plus-to-cross toggle, Glass call to action with an email field on a floating aurora, SaaS footer with a system status and columns. Each one is a separate VibeUI item.
- How do I build this page with an AI agent?
- Press “Copy the scenario for AI” and paste it into Cursor or Claude Code: the agent gets the page source, shared theme rules and image prompts, and installs every section from the registry with the shadcn CLI.
- Is the scenario free?
- The live demo and the list of sections are open to everyone. The page source and the instruction for the agent come with PRO.