Framer Landing Page for an AI SaaS: Relay

An AI support inbox for small teams needs a landing page that makes one promise land in five seconds, replies drafted in your tone and nothing sent without your approval, and turns that promise into a free trial. I wrote the brief myself and built it the way I would for a SaaS client.

Dark, because the product lives in the inbox late at night, but with real contrast, buttons at 5.4 to 1 and labels readable on a cheap screen. The hero had to show the product working, not a screenshot. Pricing had to switch between monthly and yearly without a reload, and the page had to pass 95 plus on desktop PageSpeed.

Inbox hero. A code component that plays a support thread being drafted, reviewed and sent, so the visitor sees the approve-first workflow before reading a word. Problem before product. Three numbers on what support costs a small team, then the fix. Pricing toggle and FAQ accordion. Both built as code components with keyboard support, so the page answers objections without a sales call. One call to action. Start free, repeated down the page, plus a short demo for the people who will not sign up blind.

Framer with five custom React code components, InboxHero, FeatureUI, PricingToggle, FaqAccordion and Glow. Accent colours run through color-mix so the glow and buttons stay consistent at every size, fluid type in rem, and desktop, tablet and phone breakpoints checked by hand. Scroll-through of the live page below.

Google PageSpeed Insights, desktop, 99 Performance, 95 Accessibility, 100 Best Practices, 100 SEO. Mobile performance lands between 81 and 92 across runs, with the hero animation still playing. Every section is editable in Framer without opening a code component.

Live site: https://relay-ai-inbox.framer.website

Launching a SaaS and need the page to carry the pitch? The five-day landing page sprint on my profile uses the same process.