Added signup page in slide

slides/index.ftd

@@ -7,5 +7,6 @@
 - [Folders](slides/folders/)
 - [Presentation Settings](slides/presentation-settings/)
 - [Setting](slides/setting/)
+- [Sign Up](slides/signup/)
 
 -- end: ds.page

slides/signup.ftd

@@ -0,0 +1,12 @@
+-- import: fifthtry.github.io/ui/slides/ui/signup
+
+-- slide-ds.page:
+
+-- signup.signup-page: Create an account
+logo: $assets.files.slides.ui.assets.logo.svg
+cta-google: Continue with Google
+cta-google-link: /
+cta-apple: Continue with Apple
+cta-apple-link: /
+
+-- end: slide-ds.page

slides/ui/signup.ftd

@@ -0,0 +1,141 @@
+-- slide-ds.page:
+
+-- signup-page: Create an account
+logo: $assets.files.slides.ui.assets.logo.svg
+cta-google: Continue with Google
+cta-google-link: /
+cta-apple: Continue with Apple
+cta-apple-link: /
+
+-- end: slide-ds.page
+
+
+
+
+
+
+
+
+
+
+-- component signup-page:
+caption title:
+optional ftd.image-src logo:
+optional string cta-google:
+optional string cta-google-link:
+optional string cta-apple:
+optional string cta-apple-link:
+
+-- ftd.row:
+width: fill-container
+background.solid: $inherited.colors.background.base
+
+-- ftd.image:
+src: $assets.files.slides.ui.assets.background.png
+width.fixed.percent: 60
+fit: cover
+
+-- ftd.column:
+align-content: center
+padding-top.px: 84
+width.fixed.percent: 40
+spacing.fixed.px: 64
+
+-- ftd.image:
+src: $signup-page.logo
+width: auto 
+fit: cover
+
+-- ftd.text: $signup-page.title
+role: $inherited.types.copy-large
+color: $inherited.colors.text-strong
+style: bold
+
+-- ftd.column:
+margin-top.px: 64
+spacing.fixed.px: 24
+align-content: center
+
+-- button: $signup-page.cta-google
+button-link: $signup-page.cta-google-link
+button-icon: $assets.files.slides.ui.assets.google.svg
+
+-- button: $signup-page.cta-apple
+button-link: $signup-page.cta-apple-link
+button-icon: $assets.files.slides.ui.assets.apple.svg
+
+-- ftd.row:
+width.fixed.px: 322
+spacing.fixed.px: 8
+align-content: center
+
+-- ftd.checkbox:
+
+-- ftd.text: Lorem ipsum dolor sit amet. Sit modi tenetur
+role: $inherited.types.copy-small
+color: $inherited.colors.text
+
+-- end: ftd.row
+
+-- ftd.row:
+spacing.fixed.px: 4
+align-content: center
+
+-- ftd.text: Already have an account?
+role: $inherited.types.copy-regular
+color: $inherited.colors.text
+
+-- ftd.text: Login
+role: $inherited.types.copy-regular
+color: $inherited.colors.info.text
+link: /login/
+
+-- end: ftd.row
+
+-- end: ftd.column
+
+-- end: ftd.column
+
+-- end: ftd.row
+
+-- end: signup-page
+
+
+
+
+
+
+
+
+
+
+-- component button:
+optional caption title:
+optional string button-link: 
+optional ftd.image-src button-icon:
+boolean $hover: false
+
+-- ftd.row:
+background.solid: $inherited.colors.cta-primary.base
+border-radius.px: 8
+padding-horizontal.px: 16
+padding-vertical.px: 10
+align-content: center
+$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
+width.fixed.px: 322
+link: $button.button-link
+
+-- ftd.image: $button.button-icon
+width.fixed.px: 24
+height.fixed.px: 24
+
+-- ftd.text: $button.title
+role: $inherited.types.button-small
+color: $inherited.colors.text-strong
+style: semi-bold
+
+-- end: ftd.row
+
+-- end: button