The landing page uses a teal seed colour to create a fresh, professional look. Sections flow vertically: hero with a bold headline, 6 feature cards in a 3-column grid, testimonials on a tinted surface background, pricing cards with the middle tier highlighted, a coloured CTA block, and a detailed footer.
The landing page uses a teal seed colour to create a fresh, professional look. Sections flow vertically: hero with a bold headline, 6 feature cards in a 3-column grid, testimonials on a tinted surface background, pricing cards with the middle tier highlighted, a coloured CTA block, and a detailed footer.
View Live PreviewSticky header with smooth-scroll anchor navigation
Hero section with pill badge, gradient headline, and dual CTAs
6-card feature grid with icon avatars and hover shadows
3-tier pricing table with 'Most Popular' chip highlight
Customer testimonials with star ratings and avatars
Full-width CTA banner using inverted container colours
Multi-column footer with categorised link groups
Light/dark mode with seamless MD3 token transitions
app/layout.tsx — Root layout with MD3Provider
app/providers.tsx — Theme with teal seed colour
app/page.tsx — Page composition
app/components/Header.tsx — Sticky navigation
app/components/Hero.tsx — Hero section
app/components/Features.tsx — Feature grid
app/components/Pricing.tsx — Pricing tiers
app/components/Testimonials.tsx — Social proof
app/components/CTA.tsx — Call-to-action banner
app/components/Footer.tsx — Multi-column footer
npx degit your-org/md3-templates/saas-landing my-landingcd my-landing && npm installnpm run devOne-time purchase. Lifetime access and updates.
Live PreviewIncludes:
Full source code
Next.js App Router ready
TypeScript throughout
Light & dark mode
Customisable seed colour
Free updates