Saas UI — Component Library — Référence de design web et prompt

> A SELF-CONTAINED, PIXEL-FAITHFUL REPRODUCTION OF THE SAAS UI NEXT.JS LANDING PAGE TEMPLATE - A DARK-BY-DEFAULT (LIGHT-MODE-CAPABLE) REACT/CHAKRA UI SAAS MARKETING SITE WITH A HERO, FEATURE GRID, PRICING TABLE, TESTIMONIALS, FAQ, AND DEDICATED LOGIN/SIGNUP PAGES. REBUILT AS PLAIN HTML + CSS + VANILLA JS WITH NO BUILD STEP REQUIRED. EVERY PAGE, THE FULL LOOK & FEEL, HOVER STATES, THEME TOGGLE, MOBILE MENU, AND SCROLL/ENTRANCE ANIMATIONS ARE REPRODUCED FROM CAPTURED REFERENCE ARTIFACTS. ALL ASSETS (FONTS, IMAGES, ICONS) ARE VENDORED LOCALLY AND IT RUNS OFFLINE.

REFERENCE: `https://saas-ui-nextjs-landing-page.netlify.app`

## SUMMARY

Saas UI is the official Next.js landing page for the "Saas UI" React component library (saas-js/saas-ui). It is a single main marketing page (`/`) with in-page anchor sections (Features, Pricing, FAQ), plus two dedicated auth-style pages: `/login` and `/signup`. The whole site is built with Next.js + Chakra UI, defaults to **dark mode**, and ships a working light/dark **theme toggle** (sun/moon icon, top-right of the header) that flips Chakra's `data-theme`/`chakra-ui-light`/`chakra-ui-dark` state instantly with no page reload. The header also includes a mobile hamburger menu that slides open a full-width dropdown nav panel on narrow viewports.

## STYLE

- **Font:** `InterVariable, Inter, sans-serif` (Inter variable font, weights 100–900), loaded via `@font-face` with `font-display: swap`. Base body font-size 16px / line-height 24px.
- **Palette (dark, default):**