VASTscribe: AI transcription SaaS landing
VASTscribe is an AI transcription product — upload audio, get a transcript, edit it, export it. The transcription engine was solid. What the product did not have was a landing page that matched the quality of the underlying service. The existing page was a static placeholder: a logo, a paragraph of text, and a broken sign-up link. For a SaaS product preparing to launch, that is not a landing page. It is a deterrent.
The problem
The team needed a modern, premium landing page that could carry the product through launch. The requirements were concrete: the page had to explain what VASTscribe does, show the upload flow, present pricing clearly, and give a glimpse of the dashboard — all on a single page that worked fast on mobile. It had to look like a product worth paying for, not a side project.
The constraint was familiar: the engineering team was busy building the actual transcription pipeline. The landing page had to be built independently, deployed independently, and maintained without pulling engineers off the core product.
The approach
We built the landing page as a standalone Next.js application in TypeScript. Next.js gave us file-based routing, server-side rendering for fast initial load, and static generation for the sections that do not change. TypeScript caught the prop-drilling errors that tend to creep into landing pages with many similar sections.
The design choices:
- TailwindCSS for styling. Utility-first meant the design system lived in the markup, not in a separate CSS file that drifts from the components. Consistent spacing, consistent color tokens, no dead CSS.
- Framer Motion for animation. Animations on landing pages fail when they are decorative. We used motion to direct attention — section reveals on scroll, the upload flow animating step by step, pricing cards that respond to hover. Every animation had a purpose: show the user what the product does and where to look next.
- Glassmorphism for visual identity. Frosted-glass panels over a gradient backdrop gave the page a premium feel without heavy imagery. It also kept the page weight down — the effect is CSS, not images.
- Mobile-first from the start. The page was designed at mobile width and scaled up. Pricing tables, the upload demo, and the dashboard preview all reflow cleanly on small screens.
What was built
A single-page Next.js application deployed on Vercel, available at vastscribe-landing.vercel.app/en. The page has four sections: a hero with the value proposition and a call to action, an upload flow walkthrough that shows the three-step process (upload, transcribe, export), a pricing section with three tiers, and a dashboard preview that gives a sense of the editing experience.
The page is responsive across mobile, tablet, and desktop. Framer Motion handles scroll-triggered reveals and micro-interactions. The glassmorphism design system uses a consistent set of blur, border, and background tokens so the visual language holds together across sections. The whole page is statically generated where possible, which keeps the load time fast — important for a SaaS landing where bounce rate correlates directly with perceived speed.
Results
- Fast, mobile-first UI. The page loads quickly on mobile connections. Lighthouse scores are strong on performance and accessibility, which matters for both user experience and search ranking.
- Glassmorphism design system. The visual identity is distinct and premium without relying on stock imagery or heavy assets. The design tokens are reusable if the team extends the page later.
- Ready for SaaS launch. The page covers the full conversion path: understand the product, see how it works, check the price, see the dashboard. The team can launch and iterate on copy without touching the layout.
The takeaway
A landing page for a SaaS product has one job: move the visitor from "what is this" to "I want to try it" as fast as possible. The VASTscribe page does that by showing the product flow rather than describing it, keeping the visual language premium without slowing the page down, and making pricing transparent instead of hiding it behind a "contact us" wall. Next.js and TailwindCSS kept the build fast and maintainable; Framer Motion made the product feel alive. The result is a page that matches the quality of the product behind it.