diff --git a/slides/components/header.ftd b/slides/components/header.ftd
new file mode 100644
index 00000000..0359f887
--- /dev/null
+++ b/slides/components/header.ftd
@@ -0,0 +1,948 @@
+-- component header:
+optional ftd.image-src site-logo:
+string site-url: /
+optional string site-name:
+pr.toc-item list sections:
+pr.toc-item list sub-sections:
+ftd.image-src menu-icon: $assets.files.assets.hamburger.svg
+boolean breadcrumb: true
+
+-- ftd.column:
+width: fill-container
+sticky: true
+z-index: 9999
+
+-- ftd.mobile:
+
+-- header-mobile:
+site-logo: $header.site-logo
+menu-icon: $header.menu-icon
+site-url: $header.site-url
+site-name: $header.site-name
+sections: $header.sections
+toc: $header.toc
+breadcrumb: $header.breadcrumb
+
+-- end: ftd.mobile
+
+-- ftd.desktop:
+
+-- header-desktop:
+site-logo: $header.site-logo
+site-url: $header.site-url
+site-name: $header.site-name
+sections: $header.sections
+breadcrumb: $header.breadcrumb
+
+-- end: ftd.desktop
+
+-- end: ftd.column
+
+-- end: header
+
+
+
+
+
+
+
+
+
+
+-- component header-desktop:
+optional ftd.image-src site-logo:
+string site-url:
+optional string site-name:
+pr.toc-item list sections:
+optional pr.toc-item current-subsection:
+pr.toc-item list sub-sections:
+optional pr.toc-item current-section:
+optional pr.toc-item current-page:
+boolean breadcrumb: false
+
+-- ftd.column:
+width: fill-container
+background.solid: $inherited.colors.background.base
+border-bottom-width.px: 1
+border-color: $inherited.colors.border-strong
+
+-- ftd.row:
+width: fill-container
+spacing: space-between
+padding-vertical.px: 16
+padding-horizontal.px: 24
+align-content: center
+
+-- ftd.row:
+width: fill-container
+spacing.fixed.px: 24
+
+-- ftd.image:
+if: { header-desktop.site-logo != NULL }
+link: $header-desktop.site-url
+src: $header-desktop.site-logo
+width.fixed.px: 162
+height.fixed.px: 32
+
+-- ftd.row:
+spacing.fixed.px: 32
+
+-- header-item: $obj.title
+$loop$: $header-desktop.sections as $obj
+link: $obj.url
+is-active: $obj.is-active
+
+-- end: ftd.row
+
+-- end: ftd.row
+
+-- ftd.row:
+spacing.fixed.px: 32
+align-content: center
+
+-- button: Share
+if: { auth.is-logged-in }
+button-link: /
+button-icon: $assets.files.assets.share.svg
+
+-- notification:
+if: { auth.is-logged-in }
+
+-- avatar: $auth.user.name
+email: $auth.user.email
+if: { auth.is-logged-in }
+
+-- end: ftd.row
+
+-- end: ftd.row
+
+-- end: ftd.column
+
+-- end: header-desktop
+
+
+
+
+
+
+
+
+
+
+
+-- component header-item:
+caption title:
+optional ftd.image-src icon:
+optional string link:
+boolean is-active:
+boolean $open: false
+
+-- ftd.row:
+align-self: center
+
+-- ftd.text: $header-item.title
+if: { !header-item.is-active }
+role: $inherited.types.copy-regular
+link if { header-item.link != NULL }: $header-item.link
+white-space: nowrap
+color: $inherited.colors.text
+
+-- ftd.text: $header-item.title
+if: { header-item.is-active }
+role: $inherited.types.copy-regular
+white-space: nowrap
+link if { header-item.link != NULL }: $header-item.link
+color: $inherited.colors.text-strong
+style: bold
+
+-- end: ftd.row
+
+-- end: header-item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-- component notification:
+boolean $pop-up: false
+
+-- ftd.column:
+width: fill-container
+
+-- ftd.image:
+src: $assets.files.assets.notification.svg
+width.fixed.px: 24
+height.fixed.px: 24
+$on-click$: $ftd.toggle($a = $notification.pop-up)
+
+-- ftd.column:
+if: { notification.pop-up }
+width.fixed.px: 366
+min-height.fixed.px: 511
+background.solid: $inherited.colors.background.base
+border-color: $inherited.colors.border
+border-radius.px: 8
+border-width.px: 1
+anchor: parent
+right.px: -60
+top.px: 67
+
+-- ftd.row:
+width: fill-container
+spacing: space-between
+padding.px: 16
+border-bottom-width.px: 1
+border-color: $inherited.colors.border
+role: $inherited.types.button-small
+
+-- ftd.text: Notifications
+color: $inherited.colors.text
+
+-- ftd.text: Mark all as read
+color: $inherited.colors.info.text
+
+-- end: ftd.row
+
+-- end: ftd.column
+
+-- end: ftd.column
+
+-- end: notification
+
+
+
+
+
+
+
+
+
+-- component avatar:
+caption title:
+string email:
+boolean $pop-up: false
+
+-- ftd.column:
+width: fill-container
+
+-- ftd.row:
+spacing.fixed.px: 4
+$on-click$: $ftd.toggle($a = $avatar.pop-up)
+align-content: center
+
+-- profile-circle:
+
+-- ftd.image:
+src: $assets.files.assets.toggle-down.svg
+src if { avatar.pop-up }: $assets.files.assets.toggle-up.svg
+width.fixed.px: 24
+height.fixed.px: 24
+
+-- end: ftd.row
+
+-- ftd.column:
+if: { avatar.pop-up }
+width.fixed.px: 260
+min-height.fixed.px: 260
+background.solid: $inherited.colors.background.base
+border-color: $inherited.colors.border
+border-radius.px: 8
+border-width.px: 1
+anchor: parent
+right.px: 0
+top.px: 67
+padding.px: 8
+
+-- ftd.column:
+width: fill-container
+spacing.fixed.px: 8
+padding-vertical.px: 24
+align-content: center
+border-bottom-width.px: 1
+border-color: $inherited.colors.border
+
+-- profile-circle:
+
+-- ftd.text: $avatar.title
+role: $inherited.types.button-medium
+color: $inherited.colors.text
+
+-- ftd.text: $avatar.email
+role: $inherited.types.label-small
+color: $inherited.colors.text
+
+-- end: ftd.column
+
+-- ftd.row:
+width: fill-container
+padding-vertical.px: 12
+spacing.fixed.px: 8
+
+-- ftd.image:
+src: $assets.files.assets.setting.svg
+width.fixed.px: 24
+height.fixed.px: 24
+align-self: center
+
+-- ftd.text: Account settings
+role: $inherited.types.copy-regular
+color: $inherited.colors.text
+
+-- end: ftd.row
+
+-- ftd.row:
+width: fill-container
+spacing.fixed.px: 8
+
+-- ftd.image:
+src: $assets.files.assets.logout.svg
+width.fixed.px: 24
+height.fixed.px: 24
+align-self: center
+
+-- ftd.text: Log out
+role: $inherited.types.copy-regular
+color: $inherited.colors.text
+link: /-/auth/logout/
+
+-- end: ftd.row
+
+-- end: ftd.column
+
+-- end: ftd.column
+
+-- end: avatar
+
+
+
+
+
+
+
+-- component button:
+optional caption title:
+optional string button-link:
+optional ftd.image-src button-icon:
+boolean $hover: false
+
+-- ftd.row:
+border-radius.px: 8
+padding-horizontal.px: 16
+padding-vertical.px: 8
+align-content: center
+background.solid: $inherited.colors.background.step-2
+$on-mouse-enter$: $ftd.set-bool($a = $button.hover, v = true)
+$on-mouse-leave$: $ftd.set-bool($a = $button.hover, v = false)
+spacing.fixed.px: 8
+
+-- ftd.image: $button.button-icon
+width.fixed.px: 16
+height.fixed.px: 16
+
+-- ftd.text: $button.title
+role: $inherited.types.button-small
+color: $inherited.colors.text-strong
+link: $button.button-link
+white-space: nowrap
+
+-- end: ftd.row
+
+-- end: button
+
+
+
+
+
+
+
+
+
+
+-- component login-signup:
+optional string login:
+optional string login-btn-url:
+ftd.image-src icon-github: $assets.files.assets.icon-github.svg
+boolean $hover: false
+
+-- ftd.row:
+width: fill-container
+align-content: right
+
+-- ftd.desktop:
+
+-- login-signup-desktop:
+login: $login-signup.login
+login-btn-url: $login-signup.login-btn-url
+icon-github: $login-signup.icon-github
+$hover: $login-signup.hover
+
+-- end: ftd.desktop
+
+-- ftd.mobile:
+
+-- login-signup-mobile:
+login: $login-signup.login
+login-btn-url: $login-signup.login-btn-url
+icon-github: $login-signup.icon-github
+
+-- end: ftd.mobile
+
+-- end: ftd.row
+
+-- end: login-signup
+
+
+
+
+
+
+
+
+
+
+-- component login-signup-desktop:
+optional string login:
+optional string login-btn-url:
+optional ftd.image-src icon-github:
+boolean $hover: false
+
+-- ftd.row:
+width.fixed.px: 114
+background.solid: $inherited.colors.cta-primary.base
+border-radius.px: 4
+height.fixed.px: 44
+align-content: center
+background.solid if { login-signup-desktop.hover }: $inherited.colors.cta-primary.hover
+$on-mouse-enter$: $ftd.set-bool($a = $login-signup-desktop.hover, v = true)
+$on-mouse-leave$: $ftd.set-bool($a = $login-signup-desktop.hover, v = false)
+
+-- ftd.text: $login-signup-desktop.login
+if: { login-signup-desktop.login != NULL }
+role: $inherited.types.copy-regular
+color: $inherited.colors.background.base
+padding-vertical.px: 10
+link: $login-signup-desktop.login-btn-url
+
+-- end: ftd.row
+
+-- end: login-signup-desktop
+
+
+
+
+
+
+
+
+
+
+-- component login-signup-mobile:
+optional string login:
+optional string login-btn-url:
+optional ftd.image-src icon-github: $assets.files.assets.icon-github.svg
+
+-- ftd.column:
+spacing.fixed.px: 32
+width: fill-container
+
+-- ftd.text: $login-signup-mobile.login
+if: { login-signup-mobile.login != NULL }
+role: $inherited.types.copy-regular
+color: $inherited.colors.text-strong
+link: $login-signup-mobile.login-btn-url
+padding-bottom.px: 32
+
+-- end: ftd.column
+
+-- end: login-signup-mobile
+
+
+
+
+
+
+
+
+
+
+-- component fallback-title:
+optional string site-name:
+
+-- ftd.text: LOGO
+if: { fallback-title.site-name == NULL }
+role: $inherited.types.heading-large
+color: $inherited.colors.text
+
+-- end: fallback-title
+
+
+
+
+
+
+
+
+
+
+-- component header-item:
+caption title:
+optional ftd.image-src icon:
+optional string link:
+boolean is-active:
+boolean $open: false
+
+-- ftd.row:
+align-self: center
+
+-- ftd.text: $header-item.title
+role: $inherited.types.copy-regular
+white-space: nowrap
+link if { header-item.link != NULL }: $header-item.link
+color: $inherited.colors.text-strong
+style if { header-item.is-active }: bold
+
+-- end: ftd.row
+
+-- end: header-item
+
+
+
+
+
+
+
+
+
+
+-- component subsections-links:
+caption title:
+optional boolean is-active:
+optional string url:
+pr.toc-item list item:
+
+-- ftd.column:
+
+-- ftd.text: $subsections-links.title
+if: { !subsections-links.is-active }
+role: $inherited.types.copy-regular
+link if { subsections-links.url != NULL }: $subsections-links.url
+white-space: nowrap
+color: $inherited.colors.text
+
+-- ftd.text: $subsections-links.title
+role: $inherited.types.copy-regular
+white-space: nowrap
+link if { subsections-links.url != NULL }: $subsections-links.url
+color: $inherited.colors.text-strong
+style if { subsections-links.is-active }: bold
+
+-- end: ftd.column
+
+-- end: subsections-links
+
+
+
+
+
+
+
+
+
+
+-- component header-mobile:
+ftd.image-src menu-icon:
+boolean $sidebar-open: false
+optional ftd.image-src site-logo:
+string site-url:
+pr.toc-item list toc:
+boolean $show-section: false
+optional string site-name:
+pr.toc-item list sections:
+integer logo-width: 120
+integer logo-height: 38
+boolean github-icon: false
+optional string github-url:
+boolean blog: false
+boolean breadcrumb: false
+
+-- ftd.column:
+width: fill-container
+background.solid: $inherited.colors.background.step-1
+$on-click-outside$: $ftd.set-bool($a = $header-mobile.show-section, v = false)
+
+-- ftd.row:
+padding-horizontal.px: 16
+padding-vertical.px: 16
+width: fill-container
+align-content: center
+
+-- ftd.row:
+width: fill-container
+spacing.fixed.px: 16
+
+-- ftd.image:
+src: $header-mobile.menu-icon
+width.fixed.px: 24
+align-self: center
+$on-click$: $ftd.toggle($a = $header-mobile.sidebar-open)
+
+-- ftd.image:
+if: { header-mobile.site-logo != NULL }
+src: $header-mobile.site-logo
+height.fixed.px: 38
+
+-- ftd.text: $header-mobile.site-name
+if: { header-mobile.site-name != NULL }
+role: $inherited.types.copy-large
+color: $inherited.colors.text-strong
+white-space: nowrap
+align-self: center
+
+-- fallback-title:
+if: { header-mobile.site-logo == NULL }
+site-name: $header-mobile.site-name
+
+-- end: ftd.row
+
+-- end: ftd.row
+
+-- ftd.row:
+width: fill-container
+background.solid: $inherited.colors.background.step-1
+
+-- ftd.image:
+src if { header-mobile.show-section }: $assets.files.assets.up-arrow-dark.svg
+src: $assets.files.assets.down-arrow-dark.svg
+width.fixed.px: 12
+align-self: end
+
+-- end: ftd.row
+
+-- end: ftd.column
+
+-- end: header-mobile
+
+
+
+
+
+
+
+
+
+
+-- component header-toc-item-mobile-view:
+caption title:
+optional string link:
+pr.toc-item list children:
+optional ftd.image-src icon:
+boolean is-active:
+boolean $open: false
+
+-- ftd.column:
+$on-click$: $ftd.toggle($a = $header-toc-item-mobile-view.open)
+$on-click-outside$: $ftd.set-bool($a = $header-toc-item-mobile-view.open, v = false)
+
+-- ftd.text: $header-toc-item-mobile-view.title
+link if { header-toc-item-mobile-view.link != NULL }: $header-toc-item-mobile-view.link
+role: $inherited.types.copy-small
+white-space: nowrap
+padding-left.px: 10
+color: $inherited.colors.text
+color if { header-toc-item-mobile-view.is-active }: $inherited.colors.cta-primary.base
+
+-- show-children-mobile:
+if: { !ftd.is_empty(header-toc-item-mobile-view.children) }
+children: $header-toc-item-mobile-view.children
+
+-- end: ftd.column
+
+-- end: header-toc-item-mobile-view
+
+
+
+
+
+
+
+
+
+
+-- component show-children-mobile:
+pr.toc-item list children:
+
+-- ftd.column:
+if: { !ftd.is_empty(show-children-mobile.children) }
+padding.px: 5
+padding-left.px: 15
+
+-- links-mobile:
+obj: $obj
+$loop$: $show-children-mobile.children as $obj
+
+-- end: ftd.column
+
+-- end: show-children-mobile
+
+
+
+
+
+
+
+
+
+
+-- component links-mobile:
+pr.toc-item obj:
+
+-- ftd.text: $links-mobile.obj.title
+link if { links-mobile.obj.url != NULL }: $links-mobile.obj.url
+color: $inherited.colors.text
+padding-vertical.px: 8
+padding-horizontal.px: 10
+role: $inherited.types.copy-small
+width: fill-container
+opacity if { !links-mobile.obj.is-active }: 0.6
+
+-- end: links-mobile
+
+
+
+
+
+
+
+
+
+
+-- component mobile-sidebar:
+boolean $sidebar-open:
+
+-- ftd.column:
+anchor: window
+top.px: 0
+bottom.px: 0
+left.px: 0
+right.px: 0
+background.solid: $inherited.colors.background.overlay
+z-index: 1
+$on-click$: $ftd.toggle($a = $mobile-sidebar.sidebar-open)
+
+-- ftd.image:
+src: $assets.files.assets.cross.svg
+height.fixed.px: 24
+width: hug-content
+margin-right.px: 16
+margin-top.px: 20
+
+-- end: ftd.column
+
+-- end: mobile-sidebar
+
+
+
+
+
+
+
+
+
+
+-- component menu-mobile:
+optional ftd.image-src site-logo:
+optional string site-name:
+ftd.image-src menu-icon:
+string site-url:
+pr.toc-item list sections:
+boolean $show-section: false
+pr.toc-item list sub-sections:
+integer logo-width: 120
+integer logo-height: 44
+boolean github-icon:
+optional string github-url:
+
+-- ftd.column:
+width.fixed.calc: 100% - 48px
+height.fixed.calc: 100vh - 0px
+anchor: window
+left.px: 0
+top.px: 0
+overflow-y: auto
+padding-top.px: 20
+padding-horizontal.px: 24
+background.solid: $inherited.colors.background.step-1
+z-index: 14
+
+-- ftd.column:
+if: { !ftd.is_empty(menu-mobile.sections) }
+width: fill-container
+padding-bottom.px: 24
+
+-- header-item-mobile: $obj.title
+$loop$: $menu-mobile.sections as $obj
+children: $obj.children
+is-active: $obj.is-active
+link: $obj.url
+$show-section: $menu-mobile.show-section
+
+-- end: ftd.column
+
+-- github-button:
+github-url: $menu-mobile.github-url
+if: { menu-mobile.github-icon }
+
+-- end: ftd.column
+
+-- end: menu-mobile
+
+
+
+
+
+
+
+
+
+
+-- component header-item-mobile-view:
+caption title:
+optional string link:
+pr.toc-item list children:
+boolean is-active:
+boolean $open: false
+
+-- ftd.text: $header-item-mobile-view.title
+if: { header-item-mobile-view.title != NULL }
+role: $inherited.types.fine-print
+link: $header-item-mobile-view.link
+white-space: nowrap
+padding-left.px: 10
+color: $inherited.colors.text-strong
+color if { header-item-mobile-view.is-active }: $inherited.colors.cta-primary.base
+margin-left.px: 10
+$on-click$: $ftd.toggle($a = $header-item-mobile-view.open)
+$on-click-outside$: $ftd.set-bool($a = $header-item-mobile-view.open, v = false)
+
+-- end: header-item-mobile-view
+
+
+
+
+
+
+
+
+
+
+-- component header-item-mobile:
+caption title:
+optional string link:
+pr.toc-item list children:
+boolean is-active:
+boolean $show-section:
+boolean $open: false
+
+-- ftd.row:
+width: fill-container
+align-self: start
+$on-click$: $ftd.toggle($a = $header-item-mobile.open)
+$on-click-outside$: $ftd.set-bool($a = $header-item-mobile.open, v = false)
+
+-- ftd.text: $header-item-mobile.title
+role: $inherited.types.copy-regular
+link: $header-item-mobile.link
+color: $inherited.colors.text-strong
+color if { header-item-mobile.is-active }: $inherited.colors.cta-primary.base
+$on-click$: $ftd.set-bool($a = $header-item-mobile.show-section, v = true)
+padding-top.px: 24
+
+-- ftd.column:
+if: { ftd.is_empty(header-item-mobile.children) }
+padding-bottom.px: 15
+
+-- show-children-mobile:
+if: { !ftd.is_empty(header-item-mobile.children) }
+children: $header-item-mobile.children
+
+-- end: ftd.column
+
+-- end: ftd.row
+
+-- end: header-item-mobile
+
+
+
+
+
+
+
+
+
+
+-- component github-button:
+string github-url:
+ftd.image-src icon-github: $assets.files.assets.icon-github.svg
+
+-- ftd.column:
+
+-- ftd.desktop:
+
+-- ftd.image:
+src: $github-button.icon-github
+height.fixed.px: 22
+link: $github-button.github-url
+margin-left.px: 10
+align-self: center
+
+-- end: ftd.desktop
+
+-- ftd.mobile:
+
+-- ftd.image:
+src: $github-button.icon-github
+height.fixed.px: 22
+link: $github-button.github-url
+
+-- end: ftd.mobile
+
+-- end: ftd.column
+
+-- end: github-button
+
+-- component profile-circle:
+
+-- ftd.container:
+background.solid: #EF8435
+border-color: white
+border-width.px: 2
+border-radius.percent: 50
+
+-- ftd.text: $get-initials(name=$auth.user.name)
+padding.px: 8
+color: white
+
+-- end: ftd.container
+
+-- end: profile-circle
+
+-- string get-initials(name):
+string name:
+js: $assets.files.functions.js
+
+get_initials(name)
diff --git a/slides/pages/templates.ftd b/slides/pages/templates.ftd
index e2ea4571..500ee91c 100644
--- a/slides/pages/templates.ftd
+++ b/slides/pages/templates.ftd
@@ -1,3 +1,6 @@
+
+
+
 -- record template:
 integer id:
 caption title: