Get started design

FASTN/ds.ftd

@@ -60,6 +60,8 @@ boolean show-banner: true
 optional ftd.raw-image-src favicon:
 boolean search: true
 optional string search-url: /search/
+optional string get-started-url: /getting-started/
+optional boolean right-section: true
 ftd.ui list fluid-wrap:
 
 -- ftd.ui list page.footer:
@@ -160,6 +162,8 @@ document-image: $page.document-image
 favicon: $page.favicon
 search: $page.search
 search-url: $page.search-url
+get-started-url: $page.get-started-url
+right-section: $page.right-section
 fluid-width: false
 max-width.fixed.px: 1340
 fluid-wrap: $page.fluid-wrap

FASTN/featured-ds.ftd

@@ -63,9 +63,14 @@ string published-date:
 ft-ui.template list cards:
 string github-url:
 string demo-link:
-
+string demo-text:
+string demo-url:
+string quick-url:
+string manual-url:
+string manual:
 
 -- ds.page:
+title: $featured-category.title
 show-footer: true
 site-logo: $fastn-assets.files.images.fastn.svg
 site-name: NULL
@@ -101,24 +106,29 @@ owners: $featured-category.owners
 license-url: $featured-category.license-url
 license: $featured-category.license
 published-date: $featured-category.published-date
+cta-url: $featured-category.demo-link
+cta-text: Demo
+github-url: $featured-category.github-url
+quick-url: $featured-category.quick-url
+manual-url: $featured-category.manual-url
+manual: $featured-category.manual
 
 -- end: ds.page.abstract-bar
 
 -- ds.page.full-width-wrap:
 
 -- ft-ui.grid-view: $featured-category.category
 templates: $featured-category.cards
-more-link-text: View more
+;;more-link-text: View more
 more-link: $featured-category.featured-link
 show-large: true
 
 -- end: ds.page.full-width-wrap
 
 -- ds.preview-card:
 image: $featured-category.image
-cta-url: $featured-category.demo-link
-cta-text: Demo
-github-url: $featured-category.github-url
+demo-text: $featured-category.demo-text
+demo-url: $featured-category.demo-url
 
 -- end: ds.page
 

content-library/index.ftd

@@ -2518,6 +2518,7 @@ boolean $mouse-in: false
 -- ftd.row: 
 link: $cta-primary-large.link
 width: fill-container
+min-width.fixed.px: 192
 role: $inherited.types.button-medium
 color: $inherited.colors.cta-tertiary.text
 background.solid: $inherited.colors.cta-primary.base

featured/ds/doc-site.ftd

@@ -13,7 +13,9 @@ published-date: 24-May-2023
 cards: $doc-sites
 github-url: https://github.com/fastn-stack/fastn-template/
 demo-link: https://fastn-community.github.io/doc-site/
-
+quick-url: https://fastn-community.github.io/doc-site/
+manual: User Manual
+manual-url: https://fastn-community.github.io/doc-site/
 
 
 

featured/index.ftd

@@ -74,7 +74,7 @@ more-link: /featured/fonts/
 -- component grid-view:
 optional caption title:
 template list templates:
-optional string more-link: 
+optional string more-link:
 optional string more-link-text: 
 boolean $hover: false
 optional body body:
@@ -88,6 +88,7 @@ spacing.fixed.px if { ftd.device == "mobile" }: 24
 margin-top.px if { grid-view.push-top }: -90
 max-width.fixed.px if { !grid-view.show-large } : 980
 max-width.fixed.px if { grid-view.show-large } : 1340
+padding-horizontal.px if { grid-view.show-large }: 24
 
 -- ftd.row:
 width: fill-container
@@ -153,7 +154,7 @@ $grid-view.body
 
 -- ftd.row:
 width: fill-container
-spacing.fixed.px: 32
+spacing.fixed.px: 28
 overflow-x: auto
 margin-vertical.px: 40
 
@@ -227,7 +228,7 @@ margin-top.px if { ftd.device == "mobile" }: 24
 -- ftd.text: $view-all.title
 if: { view-all.title != NULL }
 role: $inherited.types.heading-medium
-color: $inherited.colors.accent.primary
+color: $inherited.colors.text-strong
 width: fill-container
 
 -- end: ftd.desktop
@@ -272,6 +273,7 @@ body: $obj.body
 is-last: $obj.is-last
 wip: $obj.wip
 two-fold: $obj.two-fold
+show-large: $obj.show-large
 
 -- end: ftd.row
 
@@ -293,6 +295,7 @@ body: $obj.body
 is-last: $obj.is-last
 wip: $obj.wip
 two-fold: $obj.two-fold
+show-large: $obj.show-large
 
 -- end: ftd.column
 
@@ -329,11 +332,14 @@ width if { ftd.device == "mobile" }: fill-container
 spacing.fixed.px: 16
 min-width.fixed.px: 302
 width.fixed.px: 302
+min-width.fixed.px if { grid-of-items.show-large }: 412
+width.fixed.px if { grid-of-items.show-large }: 412
 classes if { grid-of-items.two-fold }: two-folded
 $on-mouse-enter$: $ftd.set-bool($a = $grid-of-items.mouse-in, v = true)
 $on-mouse-leave$: $ftd.set-bool($a = $grid-of-items.mouse-in, v = false)
-height.fixed.px if { !grid-of-items.two-fold }: 224
-height.fixed.px if { grid-of-items.two-fold }: 520
+height.fixed.px if { grid-of-items.show-large }: 317
+height.fixed.px if { grid-of-items.two-fold }: 317
+width.fixed.px if { grid-of-items.two-fold }: 856
 align-content: center
 border-color: $inherited.colors.border
 border-width.px: 1
@@ -437,9 +443,11 @@ if: { $grid-of-items.screenshot != NULL }
 src: $grid-of-items.screenshot
 $on-mouse-enter$: $ftd.set-bool($a=$grid-of-items.github-hover, v = true)
 $on-mouse-leave$: $ftd.set-bool($a=$grid-of-items.github-hover, v = false)
-fit: contain
+fit: cover
 width: fill-container
 height.fixed.px: 224
+height.fixed.px if { grid-of-items.show-large || grid-of-items.two-fold }: 317
+width.fixed.px if { grid-of-items.two-fold }: 856
 
 /-- ftd.image:
 if: { $grid-of-items.screenshot != NULL }
@@ -515,6 +523,7 @@ optional body body:
 boolean is-last: false
 boolean wip: false
 boolean two-fold: false
+boolean show-large: false
 
 -- template list doc-sites:
 

getting-started/all-selected.ftd

@@ -0,0 +1,190 @@
+-- import: fastn.com/getting-started as lib
+
+-- ds.page:
+full-width: true
+sidebar: false
+
+-- selected-template: Selected Designs
+selected-templates: $selected-templates
+
+Choose your use case, explore our readymade templates, and start building your
+product.
+
+-- lib.featured-template: What do you want to build?
+cta-text: Build from Scratch
+cta-link: /
+templates: $lib.templates
+
+Choose your use case, explore our readymade templates, and start building your
+product.
+
+-- lib.specific: Need something specific?
+cta-text: Request a design
+cta-link: /
+
+ If you can't find the category you're looking for in the list, please request
+ it here.
+
+-- end: ds.page
+
+
+
+
+
+
+
+
+
+-- component selected-template:
+caption title:
+body body:
+selected-template-image list selected-templates:
+
+-- ftd.column:
+width: fill-container
+spacing.fixed.px: 40
+border-bottom-width.px: 1
+padding-bottom.px: 40
+border-color: $inherited.colors.border
+
+-- ftd.column:
+spacing.fixed.px: 4
+
+-- ftd.text: $selected-template.title
+role: $inherited.types.heading-large
+color: $inherited.colors.text-strong
+
+-- ftd.text:
+role: $inherited.types.copy-regular
+color: $inherited.colors.text
+
+$selected-template.body
+
+-- end: ftd.column
+
+-- ftd.row:
+width: fill-container
+spacing.fixed.px: 48
+wrap: true
+
+-- selected-template-list: $obj.title
+$loop$: $selected-template.selected-templates as $obj
+src: $obj.src
+sub-title: $obj.sub-title
+link: $obj.link
+cta-text: $obj.cta-text
+cta-link: $obj.cta-link
+
+-- end: ftd.row
+
+-- end: ftd.column
+
+-- end: selected-template
+
+
+
+
+
+
+
+
+-- component selected-template-list: 
+caption title:
+string sub-title:
+ftd.image-src src:
+string link:
+string cta-text:
+string cta-link:
+boolean $mouse-in: false
+
+-- ftd.column:
+width.fixed.px: 352
+spacing.fixed.px: 12
+cursor: pointer
+
+-- ftd.image:
+src: $selected-template-list.src
+width.fixed.px: 350
+height.fixed.px: 215
+link: $selected-template-list.link
+
+-- ftd.row:
+width: fill-container
+spacing: space-between
+
+-- ftd.column:
+spacing.fixed.px: 2
+
+-- ftd.text: $selected-template-list.title
+role: $inherited.types.button-large
+color: $inherited.colors.text-strong
+
+-- ftd.text: $selected-template-list.sub-title
+role: $inherited.types.copy-small
+color: $inherited.colors.text
+
+-- end: ftd.column
+
+-- ftd.row:
+align-content: center
+background.solid: $inherited.colors.background.step-1
+background.solid if { selected-template-list.mouse-in }: $inherited.colors.hover
+$on-mouse-leave$: $ftd.set-bool($a = $selected-template-list.mouse-in, v = false)
+$on-mouse-enter$: $ftd.set-bool($a = $selected-template-list.mouse-in, v = true)
+padding-vertical.px: 4
+padding-horizontal.px: 16
+border-radius.px: 58
+spacing.fixed.px: 4
+link: $selected-template-list.cta-link
+color: $inherited.colors.text-strong
+role: $inherited.types.button-medium
+
+-- ftd.text: $selected-template-list.cta-text
+
+-- end: ftd.row
+
+-- end: ftd.row
+
+-- end: ftd.column
+
+-- end: selected-template-list
+
+
+
+
+
+
+
+
+-- record selected-template-image:
+caption title:
+string sub-title:
+ftd.image-src src:
+string link: /
+string cta-text:
+string cta-link:
+
+-- selected-template-image list selected-templates:
+
+-- selected-template-image: Midnight rush blog
+sub-title: Documentation site
+link: /
+src: $fastn-assets.files.images.get-started.blog-temp.png
+cta-text: Remove
+cta-link: /
+
+-- selected-template-image: Midnight rush blog
+sub-title: Documentation site
+link: /
+src: $fastn-assets.files.images.get-started.blog-temp.png
+cta-text: Remove
+cta-link: /
+
+-- selected-template-image: Midnight rush blog
+sub-title: Documentation site
+link: /
+src: $fastn-assets.files.images.get-started.blog-temp.png
+cta-text: Remove
+cta-link: /
+
+-- end: selected-templates