defuss-shadcn / Website / website-landing-page
Landing Page
The sections of a product or marketing page, top to bottom: the site header, a hero, product showcase and logos, section headers to introduce the parts, features, testimonials, stats, pricing, blog teasers, FAQ, contact, newsletter and the footer. Every block is CSS-only and built from the library's components and tokens.
On this page (3)
§The template
The Landing Page blocks composed into one page - the source is the page.
§A landing page
Every landing block in page order with room to breathe. Scroll it: the hero is a Parallax scene (a faint grid far back, two soft color blobs in the middle, the copy in front), every section after it rises into view (.parallax-reveal - the product frame zooms in), the header sticks. shapes.css dresses the media: a window frame, leaf corners, a taped polaroid, speech-bubble quotes, the gold aura, squircles and blob icons. Scroll down and the back-to-top FAB appears; on a first visit the Cookie Consent waits as a banner along the bottom (not a modal - the page stays usable); afterwards the cookie button (bottom left) and the footer's Cookie Settings bring it back. The header links jump to the sections.
§The blocks
Site Header
A marketing page header: brand, container-aware dropdown nav, and actions. The nav collapses below 30rem container width - pure CSS, popovers native.
Hero
Badge, headline, description and CTAs - a centered copy block; pair it with the Product Showcase below when you want a video.
Product Showcase
A 5:3 poster frame with a circular play button; clicking it swaps to the native <video>, which then carries its own controls.
Brand Logos
A "trusted by" band of real linked brand marks. Each logo links to its site; the SVGs use currentColor so they recolor with the theme.
Section Header
Introduces a section with a title, description, and optional action - start-aligned, centered or split, in three title sizes.
Feature Details
Benefits section: two image features split by a vertical rule, plus a row of icon-led cards.
Testimonials
A pull quote with a linked brand lockup, plus review cards whose overlay floats over the photo with backdrop blur.
Stats
A metric band: rule-led numbers with tabular digits beside a square photo.
Pricing
Three plan cards with a billing-period toggle - native radios plus :has() flip every plan price, zero JavaScript.
Blog
Insights teasers: 3:2 media, category + read-time meta, clamped excerpt, author row from the Avatar component.
FAQ
Frequently asked questions as icon cards - every answer visible, indexable, and screen-reader friendly.
Get In Touch
A bordered contact card: overlapping grayscale avatars, centered copy, one CTA.
Newsletter
A sign-up band using a real form: native email validation, autofill, and enterkeyhint.
Cookie Consent
Service-specific privacy choices, consent-gated scripts and embeds, and EN/DE preferences.
Site Footer
Link columns, a semantic separator, and a brand/social/copyright row in a contentinfo landmark.
Comments, ideas or improvements? Edit this page's source on GitHub