---
title: "Product Hero Desk — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ahmet Loca · Sections. Product Hero Desk is a SaaS product hero with a live invoice desk."
canonical: "https://framer.elliotli.dev/component/product-hero-desk"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Product Hero Desk

# Product Hero Desk

SaaS hero with invoice desk

[View on Framer](https://framer.com/marketplace/components/product-hero-desk/?via=elliot-li)

![Product Hero Desk preview image 1](https://framer.elliotli.dev/og/component/product-hero-desk/3a3d84ba83b9bce6/1600x1200.jpg)

## Summary

Product Hero Desk is a SaaS product hero with a live invoice desk.

## Description

## About Product Hero Desk

Product Hero Desk is a SaaS product hero with a live invoice desk. It pairs a serif headline and Manrope UI with a dark ledger mock: status pills, amounts, nav, and user card. Dark, Light, and Custom themes ship in the panel. An optional sun/moon control runs a circular clip-path wipe from the button so the new theme reveals as a growing circle, not a fade. Get started and Learn more stay pointer-ready. Under 768px the grid stacks and invoices become cards. Built for finance, billing, and productivity landing pages that need a real product surface, not a generic hero.

Instrument Serif headline with linear blue-to-amber accent line

Manrope body, buttons, table, and navigation

Dark, Light, and Custom palettes from property controls

Optional on-canvas theme toggle with circular clip-path reveal

Get started and Learn more CTAs with pointer cursor and link controls

Live invoice desk with status, due, number, client, date, and amount

Color-coded pills for Overdue, Pending, and Paid

Desktop table with hover row highlight

Mobile invoice cards below 768px — no horizontal table scroll

Sidebar nav, app name, and user identity card

Schema-friendly headline and description markup for published pages

Works out of the box — drop on the canvas and edit copy

**Use Cases**

SaaS billing and invoicing marketing pages

Fintech and ledger product launches

Freelance and independent contractor tools

Bookkeeping and accounting software sites

Payroll and payout platform heroes

Client portal and dashboard previews

B2B productivity and operations landing pages

Agency sites selling finance product design

Startup waitlist and pricing story sections

**Keywords**

saas hero, invoice desk component, product hero framer, dark light theme toggle, circular theme wipe, billing landing page, fintech hero section, invoice table ui, responsive invoice cards, get started cta, learn more button, instrument serif hero

## Rank history [How rankings work →](/terms#rankings)

-   All · #4897

## Details

- **Author**: Ahmet Loca
- **Price**: $5.00
- **Published**: 2026-09-13
- **Updated**: 2026-09-30
- **Added**: 2026-09-13
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes