WebberUI
繁體中文

Sidebar Dock Home

Fixed left sidebar nav with content scrolling on the right — an app-like marketing site.

ProHome layoutshome-layout8 sections
See it liveSee the plans

Install

npx webberui@latest add "https://webberui.com/r/sidebar-dock-home.en.json?t=<install token>"

The whole page lands in app/templates/sidebar-dock-home/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Sidebar Nav and Hero

    A sticky sidebar nav (with scroll progress line and a mobile top bar) beside the headline, two CTAs, an app window board mock, and four figures.

    hero
  2. 2

    Core Features

    Six feature cards in a three-column grid covering the sync engine, branch versioning, dashboards, permission governance, the command line, and the open API.

    features
  3. 3

    Four-Step Workflow

    Four rollout steps — import, define the cadence, automate, and keep improving — strung along a vertical gradient connector.

    timeline
  4. 4

    Customer Testimonials

    Three customer quotes with star ratings and avatars, followed by a row of six customer wordmarks.

    testimonial
  5. 5

    Pricing Plans

    Starter, Team, and Enterprise plan cards, with the middle plan outlined in a gradient border as most popular.

    pricing
  6. 6

    FAQ

    Five expandable accordion questions, with a contact email and response-time note at the bottom.

    faq
  7. 7

    Closing Call to Action

    A gradient-glow card holding the headline, free-trial details, and two buttons: create a workspace or book a demo.

    cta
  8. 8

    Footer

    Brand blurb and social links alongside four columns — product, resources, company, legal — plus copyright and compliance details.

    footer

Sidebar Dock Home is a React sidebar navigation homepage template: a fixed left sidebar lists each section, and as the right side scrolls the sidebar highlights where you are and shows reading progress. It is built with Next.js App Router, Tailwind CSS and Motion.

When to use it

  • Website for a collaboration or project management product
  • SaaS homepages that should feel like an app
  • Long product pages where visitors need to jump between sections
  • Feature overview pages for internal tools or platforms

What to change after installing

  1. Sidebar entries are in `NAV_ITEMS` in page.tsx; each `id` must match a section id on the page for scroll tracking and click-to-jump to work.
  2. Features, workflow, testimonials, plans and FAQs come from the `FEATURES`, `WORKFLOW_STEPS`, `TESTIMONIALS`, `PRICING_PLANS` and `FAQ_ITEMS` arrays.
  3. The board UI in the hero is `AppWindowMock`, with its columns and cards in `BOARD_COLUMNS`; replace them with your product's content.
  4. Numbers and footer links are in `STATS` and `FOOTER_COLS`; on mobile the sidebar collapses into a menu, so check it after adding or removing entries.

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →