BlocksFull-width page sections, from heroes to footers. Drop one in and replace the copy.01CSSAnnouncement BarSlim pill above the header for launches and notices, dismissed with a smooth collapse.02MotionNavbarSite Nav set up for a product site, with sign-in and a primary action.03CSSApp ShellApplication layout with a full-height sidebar (brand, profile, menu search, grouped navigation, plan card) that becomes a drawer on mobile, plus a sticky top bar.04CSSHero · ProductProduct-led hero: tight headline, one primary action, ticked proof points and a working product screen in an app window, with customer wordmarks underneath. Exports ProductPreview, a compact analytics screen whose range switch really switches the data.05MotionHero · AuroraCentered launch hero over a drifting aurora, with a release-notes link, word-by-word headline and magnetic call to action.06CSSHero · SplitCopy on the left, a floating product mock on the right.07CSSHero · VideoFull-bleed background video with the headline anchored bottom-left. Loads lazily, pauses off-screen.08CSSLogo CloudA slow marquee of customer wordmarks with faded edges.09CSSFeature · GridSix features in spotlight cards, each with a line icon.10MotionFeature · BentoAsymmetric bento of live-looking product moments: a chart, a counter, avatars and a command bar.11CSSBento · FeaturesBenefits as a bento of working product moments: each tile takes any React content (a funnel, a live list, a toggle, a snippet with copy) above its outcome-led title. Three columns, two on tablets, one on phones.12CSSInstall SnippetHow it works as numbered steps beside a tabbed code window with a copy button, one tab per install method.13CSSProof BandProof in one band: headline numbers on a strip, then short quotes led by the result each describes. More than three quotes become a carousel.14CSSComparison · VsUs versus the usual alternative as a real table: topic, the alternative and you, with your column picked out. Rows stack under their topic on phones.15CSSStepsHow it works in three numbered steps joined by a hairline, with an optional one-line snippet per step.16MotionStats BandFour headline numbers on one strip, counting up as they appear.17CSSIntegrations GridConnected and available integrations with monogram marks and status.18CSSTestimonialsMasonry wall of quote cards, with initials avatars.19CSSPricing · TiersThree plans with a monthly/yearly segmented switch and a highlighted favourite.20CSSPricing · CompareGrouped feature comparison table with an emphasised column. Scrolls sideways on small screens.21CSSFAQQuestions in the editorial accordion, title on the left.22MotionCTA · PanelClosing call to action: a panel over its own aurora.23CSSNewsletterEmail sign-up in one row, with inline validation, a loading button and a success state.24CSSContact · SplitContact details beside a validated form that confirms in place.25CSSTeam GridPeople cards with gradient monograms, roles and one-line bios.26CSSBlog CardsThree latest posts with gradient covers, tags and reading time. Whole card is clickable.27CSSChangelogRelease timeline with version pills and notes.28CSSAuth · Sign InSign-in card with social providers, remember-me and inline error support.29CSSAuth · Sign UpTwo-column sign-up with perks and a live password-strength meter.30CSSError 404Not-found page with an oversized numeral and two ways back.31CSSAuth · Sign In SplitSign-in form beside a brand panel with a customer quote. The panel hides below 1024px.32CSSAuth · Sign Up SplitSign-up form with strength meter beside a brand panel, ending in a check-your-inbox state.33CSSAuth · Forgot passwordEmail field that sends a reset link, then a check-your-inbox state with resend.34CSSAuth · Reset passwordNew password with a strength meter and confirmation, then a success state.35CSSAuth · Check emailConfirmation screen after sign-up with inbox shortcuts and a timed resend.36CSSAuth · OTPSix-digit code entry with auto-submit, inline errors and a resend countdown.37CSSAuth · Verify emailLanding page for an email link: checking, confirmed, or expired with resend.38CSSAuth · Lock screenLocked session with the account avatar and a password to unlock.39CSSError · 500Server error page with retry, a copyable reference and a status link.40CSSError · 403No-access page showing the signed-in account, with request access and switch account.41CSSSystem · MaintenancePlanned maintenance page with progress, timed status updates and a notify-me form.42CSSSystem · Coming SoonLaunch page with a live countdown and a launch-list signup.43CSSSystem · OfflineOffline page that watches the connection, retries and lists pages saved for offline use.44CSSAboutAbout page: story with milestones, counted stats, values and the team.45CSSCareers · RolesCareers page with perks and open roles filtered by team and location.46CSSCareers · RoleJob detail with responsibilities, hiring steps, a sticky summary and an apply form with CV upload.47CSSBlog · PostArticle with author, reading time, a live table of contents, share buttons and related posts.48CSSContact · PageContact page with team channels, a topic form, a map illustration and office cards.49CSSCustomers · WallCustomer logo wall filtered by industry, with case-study cards and a closing call to action.50CSSCustomers · Case StudyCustomer story with counted metrics, company facts, chapters, a quote and the next story.51CSSCustomers · Story CarouselHeading and lead over a swipeable row of equal-height customer story cards with drawn covers, a headline metric and a quote.52CSSImage GalleryHeading and lead over an image carousel with captions and a synced thumbnail strip. Ships with six original illustrations.53CSSStore headerStorefront header: brand, category mega-menus on desktop and a drawer on small screens, search, account, and a cart button with a live count that opens a cart drawer. A checkout variant keeps only the brand and a way back.54CSSStore footerStorefront footer: brand, link columns, a newsletter signup with validation and a sent state, accepted payment methods and legal links.55CSSFooter · ColumnsBrand, social links, four link columns and a status line.56CSSFooter · MinimalOne row: wordmark, links (privacy and terms included) and year.