SaaS Landing Page
A full marketing landing page: nav, hero, logo band, feature grid, and footer.
DOM + CSS1 dep1 file · 4 KB TSX
Props
// Full, shippable page — real size at normal type scale. The registry
// preview above is a scaled-down miniature of this same composition, not
// a different component.
import { ArrowRight, Zap, ShieldCheck, Sparkles } from "lucide-react";
const FEATURES = [
{ icon: Zap, title: "Instant deploys", body: "Push to main, live in under a minute." },
{ icon: ShieldCheck, title: "SOC2 secure", body: "Encrypted at rest and in transit, always." },
{ icon: Sparkles, title: "AI-assisted", body: "Built-in copilots for every workflow." },
];
function Nav({ productName }: { productName: string }) {
return (
<header className="flex items-center justify-between border-b border-white/10 px-6 py-4">
<div className="flex items-center gap-2">
<span className="h-6 w-6 rounded-md bg-blue-600" />
<span className="font-sans font-bold">{productName}</span>
</div>
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this page template
This is the sequence most SaaS marketing sites converge on because it works: nav, a hero that states the outcome in one headline rather than the product's mechanics, an optional social-proof logo band, then a feature grid that only has to reinforce a decision the visitor has already leaned toward. The logo band's placement is the non-obvious detail — bolting it directly under the hero, before any feature copy, borrows credibility at the exact moment skepticism is highest, rather than burying it lower where it just decorates. Each section is a small named subcomponent (Nav, Hero, LogoBand, Features, Footer) so a buyer can lift one section into an existing page without untangling a monolith. Caveat: the logo placeholders are flat bars, not real marks — swap them for actual customer logos (SVG, sized consistently) before shipping, since generic gray rectangles read as a template rather than proof once a visitor looks twice.
