Landing Page
The landing page design was inspired by VitePress -- thank you Evan -- with a Hero section at the top and Feature boxes below that.
Use hero
and features
in your index.md frontmatter to configure each section. Icon configuration follows the same pattern as in the menus. Note that hero
looks best combined with fullwidth: true
, which allows the layout to take up the full width of the window, with no padding or margins.
Example from here.
index.md
hero:
name: gitkitjs
text: SvelteKit powered static site generator
tagline: Generate a website from markdown with minimal fuss.
icon: 💥
actions:
- text: Quickstart
link: /guide/quickstart
- text: GitHub
link: https://github.com/gitkitjs/gitkitjs
fullwidth: true
features:
- icon: 🍏
text: Markdown files become web pages
details: Easy to author, no Svelte knowledge required.
href: /guide/quickstart
- icon: 🍒
text: Customizable
details: Build your own Svelte layouts with TypeScript and Tailwind.
href: /guide/custom-components
- icon: 🍋
text: NPM Installable
details: Add docs to your project, no repo to copy.
href: /guide/quickstart
- icon: 🍇
text: Static Build
details: Deploy to edge.
href: /guide/build-and-deploy
- icon: 🥝
text: Menu and Sub-menus
details: Easy to configure links, hamburger for mobile.
href: /guide/menus
- icon: 🫐
text: Sidebars
details: Nice navigation for docs, works on mobile too.
href: /guide/sidebars
- icon: 🍎
text: Syntax highlighting for codeblocks
details: Add your own prism languages.
href: /guide/static-files