Skip to content
BetaFree MCP server

Clueso

clueso.io/

Clueso turns raw screen recordings, slide decks, or uploaded video into finished product videos and step-by-step documentation, automating script cleanup, AI voiceover, captions, and auto-zoom in a stated four-step flow: record, AI-enhance, customize, export. The homepage claims "300,000+ videos created in past 6 months" and a specific before/after from one customer — production time cut "from two days to just two hours." Translation is treated as a headline feature rather than an afterthought, with a dedicated section promoting output in 35+ languages, and an Airbnb-style tutorial example is used to demonstrate auto-generated documentation directly on the page. The footer runs an unusually large library of competitor-comparison and "alternative to" pages.

Category
Productivity & Collaboration
Style
LightColorful
Stack
Next.jsTailwind CSS
Fonts
NohemiGeist
Palette
Meta title
Product demos, training videos, SOPs in minutes | Clueso
Sections
10
Updated

Clueso's landing page, section by section

Each section below is cropped straight from Clueso's live page — useful references for productivity & collaboration landing page design.

Clueso design review: how the homepage is built

The homepage is one long column, recorded at 16,384 pixels tall in meta.json, running from a blue announcement bar through a hero, a logo wall, feature cards, a security panel, a FAQ and a footer. Colour rests on pale tints (#fbd5c6, #d6c9e9, #e6ead9) over a white ground, with a magenta accent (#eb77da) on primary buttons. Typefaces are Nohemi for display and Geist for body text. Its hero is distinctive: a real screen recording of an Airbnb search sits inside a pink gradient frame with a playback bar, not an abstract illustration.

Above the fold

The top bar reads "New" beside "Clueso Agents: Automate product videos for every new feature". The navigation runs "Product", "Solutions", "Resources", "Pricing" and "Enterprise". The headline sets "Product videos" in black over "in minutes with AI" in grey, above a subhead and two buttons, "Start free trial" filled and "Book a demo" outlined. A recording frame follows, showing an Airbnb search tagged "With Clueso", with "Unmute to hear the difference" over its playback bar.

Logo wall, testimonial and feature cards

A "Backed by" line with a Combinator mark and "Rated 4.9" introduces twelve customer wordmarks in a four-by-three grid. One testimonial card from "Sean O'Donnell" carries the line "Clueso has empowered our Product team to produce high-quality videos & training content 20x faster". The "Major video edits, automated." band then holds a two-column grid: "Perfect video scripts" shows a typed line, "Lifelike AI voiceovers" a waveform, and "Smart auto-zooms" a wireframe window.

Use cases and feature bands

The "Clueso is built for you" block pairs a vertical list of use cases with a purple Slack demo card titled "How to automate your work in Slack". A dark panel reads "Experience it yourself" above a button labelled Make your first video. The "Still not convinced?" section stacks three tinted bands, "Shape the story", "Enhance the audio" and "Polish the visuals", holding cards such as "Fine-tune your video script" and "Mask with blurs".

Closing section and footer

A security panel headed "Always create securely" shows a green shield above "SOC 2 Type II certified" and "ISO 27001 certified". "Frequently asked questions" lists eight questions, starting with "What is Clueso?". A blue block ends with a "Begin for free" button. The footer has three link columns headed "Product", "Free tools" and "Clueso vs", with "Resources", "Compare" and "Buyer's Guide" beneath them.

On mobile

At 390px the navigation collapses and the hero keeps "Start free trial" and "Book a demo" under the headline, with the recording frame dropping below. The logo wall becomes a two-column grid, with the testimonial beneath it. Feature cards move to one column, each illustration above its title, so "Fine-tune your video script" and "Resize for any aspect ratio" read as separate rows. The footer becomes one long column of links.

Worth borrowing

  • Put a real product recording inside the hero frame, with its playback controls visible.
  • Group a long feature grid under tinted bands with short labels such as "Shape the story".
  • Place named certifications such as "SOC 2 Type II certified" in a panel before the closing call to action.
HireKai landing page design
HireKai
Productivity & Collaborationhirekai.ai/
Usealmanac landing page design
Usealmanac
Productivity & Collaborationusealmanac.com/
Craft landing page design
Craft
Productivity & Collaborationcraft.do/
Tatem landing page design
Tatem
Productivity & Collaborationtatem.com/
Basewell landing page design
Basewell
Productivity & Collaborationbasewell.com/
Delos landing page design
Delos
Productivity & Collaborationdelos.so/