diff --git a/FASTN.ftd b/FASTN.ftd
index 992464f..d18791d 100644
--- a/FASTN.ftd
+++ b/FASTN.ftd
@@ -10,10 +10,6 @@ favicon: /-/meenukumari28.github.io/pricing/favicon.ico
 
 -- fastn.auto-import: meenukumari28.github.io/pricing/FASTN/ds
 -- fastn.auto-import: meenukumari28.github.io/pricing/assets
+-- fastn.auto-import: meenukumari28.github.io/pricing/common
 -- fastn.auto-import: doc-site
 
--- fastn.sitemap:
-
-# Home: index.html
-
-- Right Sidebar Sample: /sidebar/
diff --git a/FASTN/ds.ftd b/FASTN/ds.ftd
index 4fe7a1e..777413b 100644
--- a/FASTN/ds.ftd
+++ b/FASTN/ds.ftd
@@ -16,7 +16,7 @@ boolean sidebar: false
 optional string document-title:
 optional string document-description:
 optional ftd.raw-image-src document-image:
-optional string site-name: fastn template
+optional string site-name:
 optional ftd.image-src site-logo: $site-logo
 boolean github-icon: false
 optional string github-url: 
diff --git a/assets/location.svg b/assets/location.svg
new file mode 100644
index 0000000..25c8f98
--- /dev/null
+++ b/assets/location.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<path fill="#231F20" d="M32,0C18.746,0,8,10.746,8,24c0,5.219,1.711,10.008,4.555,13.93c0.051,0.094,0.059,0.199,0.117,0.289l16,24
+	C29.414,63.332,30.664,64,32,64s2.586-0.668,3.328-1.781l16-24c0.059-0.09,0.066-0.195,0.117-0.289C54.289,34.008,56,29.219,56,24
+	C56,10.746,45.254,0,32,0z M32,32c-4.418,0-8-3.582-8-8s3.582-8,8-8s8,3.582,8,8S36.418,32,32,32z"/>
+</svg>
\ No newline at end of file
diff --git a/assets/tick.svg b/assets/tick.svg
new file mode 100644
index 0000000..a144428
--- /dev/null
+++ b/assets/tick.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm5.676,8.237-6,5.5a1,1,0,0,1-1.383-.03l-3-3a1,1,0,1,1,1.414-1.414l2.323,2.323,5.294-4.853a1,1,0,1,1,1.352,1.474Z"/></svg>
\ No newline at end of file
diff --git a/common/index.ftd b/common/index.ftd
new file mode 100644
index 0000000..8681c5e
--- /dev/null
+++ b/common/index.ftd
@@ -0,0 +1,103 @@
+-- record feature:
+caption title:
+boolean active: false
+
+
+
+-- feature list free-feature-list:
+
+-- feature: Lorem ipsum dolor sit amet
+
+-- feature: Sed quibusdam sint vel rerum voluptates
+
+-- feature: Vel inventore quasi et enim enim
+
+-- feature: In incidunt ipsa et possimus
+
+-- feature: Quo iste quod aut
+
+-- end: free-feature-list
+
+
+
+-- feature list startup-feature-list:
+
+-- feature: Lorem ipsum dolor sit amet
+
+-- feature: Sed quibusdam sint vel rerum voluptates
+
+-- feature: Vel inventore quasi et enim enim
+
+-- feature: In incidunt ipsa et possimus
+
+-- feature: Quo iste quod aut
+
+-- end: startup-feature-list
+
+
+
+
+-- feature list enterprise-feature-list:
+
+-- feature: Lorem ipsum dolor sit amet
+
+-- feature: Sed quibusdam sint vel rerum voluptates
+
+-- feature: Vel inventore quasi et enim enim
+
+-- feature: In incidunt ipsa et possimus
+
+-- feature: Quo iste quod aut
+
+-- end: enterprise-feature-list
+
+
+
+
+
+-- feature list free-feature-list-2:
+
+-- feature: - Feature 1
+
+-- feature: - Feature 2
+
+-- feature: - Feature 3
+
+-- feature: - Feature 4
+
+-- feature: - Feature 5 
+
+-- end: free-feature-list-2
+
+
+
+-- feature list startup-feature-list-2:
+
+-- feature: - Feature 1
+
+-- feature: - Feature 2
+
+-- feature: - Feature 3
+
+-- feature: - Feature 4
+
+-- feature: - Feature 5 
+
+-- end: startup-feature-list-2
+
+
+
+
+-- feature list enterprise-feature-list-2:
+
+-- feature: - Feature 1
+
+-- feature: - Feature 2
+
+-- feature: - Feature 3
+
+-- feature: - Feature 4
+
+-- feature: - Feature 5 
+
+-- end: enterprise-feature-list-2
\ No newline at end of file
diff --git a/index.ftd b/index.ftd
index 9566ec2..241dfda 100644
--- a/index.ftd
+++ b/index.ftd
@@ -1,40 +1,906 @@
--- ds.page: Welcome to doc-site
+-- ds.page:
+full-width: true
+sidebar: false
 
+-- ds.h1: Pricing 1
 
-⚡️ `doc-site` will help you create a beautiful documentation site in no time.
+-- pricing:
 
-It provides out-of-the-box documentation features that can be used to create any
-kind of site(personal website, blog, etc).
+-- pricing-card: Basic
+active: false 
+price: 0
+currency: \$
+subscription: mo
+feature-list: $common.free-feature-list
+cta-text: Get Started
+cta-link: /pricing/
+bg-color: $inherited.colors.custom.one
 
-[Click here](https://fastn-community.github.io/doc-site/) to read doc-site
-documentation.
+Lorem ipsum dolor sit amet, consectet adipiscing elit.
 
--- ds.h3: 🚀 Fast Track 
+-- pricing-card: Standard
+active: true 
+price: 99
+currency: \$
+subscription: mo
+feature-list: $common.startup-feature-list
+cta-text: Get Started
+cta-link: /pricing/
+bg-color: $inherited.colors.custom.two
 
-Create your first fastn [web-site](https://fastn.com/expander/hello-world/-/build/) 
-project in just 5 minutes!
+Lorem ipsum dolor sit amet, consectet adipiscing elit.
 
--- ds.h3: 🌟 Whats next?
+-- pricing-card: Premium
+active: false 
+price: 153
+currency: \$
+subscription: mo
+feature-list: $common.enterprise-feature-list
+cta-text: Get Started
+cta-link: /pricing/
+bg-color: $inherited.colors.custom.three
 
-Create your first page. 
-[Click here to know more](https://fastn-community.github.io/doc-site/components/page/).
+Lorem ipsum dolor sit amet, consectet adipiscing elit.
 
--- ds.h3: 👀 Want to learn more?
+-- end: pricing
 
-Feel free to check [our expander course](https://fastn.com/expander/) or jump
-into our [FifthTry Discord server](https://discord.gg/bucrdvptYd).
+-- ds.h1: Pricing 2
 
+-- pricing:
 
--- ds.h3: 🎯 Used by?
+-- pricing-card-2: Basic
+active: false 
+price: 0
+currency: \$
+subscription: Per Month
+feature-list: $common.free-feature-list-2
+cta-text: Get Started
+cta-link: /pricing/
+icon: $assets.files.assets.location.svg
 
-Our all documentation sites uses this `doc-site` theme.
+Lorem ipsum dolor sit amet, consectet adipiscing elit.
 
-- [fastn.com](https://fastn.com/home/)
-- [FifthTry.com](https://www.fifthtry.com/)
+-- pricing-card-2: Standard
+active: true 
+price: 99
+currency: \$
+subscription: Per Month
+feature-list: $common.startup-feature-list-2
+cta-text: Get Started
+cta-link: /pricing/
+icon: $assets.files.assets.location.svg
 
--- ds.h2: Learn fastn and become a pro?
+Lorem ipsum dolor sit amet, consectet adipiscing elit.
 
-You are one click away, just check [our documentation](https://fastn.com/) and 
-dont forget to jump into our [FifthTry Discord server](https://discord.gg/bucrdvptYd).
+-- pricing-card-2: Premium
+active: false 
+price: 153
+currency: \$
+subscription: Per Month
+feature-list: $common.enterprise-feature-list-2
+cta-text: Get Started
+cta-link: /pricing/
+icon: $assets.files.assets.location.svg
+
+Lorem ipsum dolor sit amet, consectet adipiscing elit.
+
+-- end: pricing
+
+-- ds.h1: Pricing 3
+
+-- pricing:
+
+-- pricing-card-3: Basic
+active: false 
+price: 0
+currency: \$
+subscription: Per Month
+feature-list: $common.free-feature-list
+cta-text: Get Plan
+cta-link: /pricing/
+icon: $assets.files.assets.location.svg
+
+Lorem ipsum dolor sit amet, consectet adipiscing elit.
+
+-- pricing-card-3: Standard
+active: true 
+price: 99
+currency: \$
+subscription: Per Month
+feature-list: $common.startup-feature-list
+cta-text: Get Plan
+cta-link: /pricing/
+icon: $assets.files.assets.location.svg
+
+Lorem ipsum dolor sit amet, consectet adipiscing elit.
+
+-- pricing-card-3: Premium
+active: false 
+price: 153
+currency: \$
+subscription: Per Month
+feature-list: $common.enterprise-feature-list
+cta-text: Get Plan
+cta-link: /pricing/
+icon: $assets.files.assets.location.svg
+
+Lorem ipsum dolor sit amet, consectet adipiscing elit.
+
+-- end: pricing
+
+-- ds.h1: Pricing 4
+
+-- pricing:
+
+-- pricing-card-4: Basic
+active: false 
+price: 0
+currency: \$
+subscription: Per Month
+feature-list: $common.free-feature-list
+cta-text: Purchase
+cta-link: /pricing/
+bg-color: $inherited.colors.custom.one
+
+Lorem ipsum dolor sit amet, dolor sit amet elit.
+
+-- pricing-card-4: Standard
+active: true 
+price: 99
+currency: \$
+subscription: Per Month
+feature-list: $common.startup-feature-list
+cta-text: Purchase
+cta-link: /pricing/
+bg-color: $inherited.colors.custom.two
+
+Lorem ipsum dolor sit amet, dolor sit amet elit.
+
+-- pricing-card-4: Premium
+active: false 
+price: 153
+currency: \$
+subscription: Per Month
+feature-list: $common.enterprise-feature-list
+cta-text: Purchase
+cta-link: /pricing/
+bg-color: $inherited.colors.custom.eight
+
+Lorem ipsum dolor sit amet, dolor sit amet elit.
+
+-- end: pricing
+
+-- ds.h1: Pricing 5
+
+-- pricing:
+
+-- pricing-card-5: Basic
+active: false 
+price: 0
+currency: \$
+subscription: Per Month
+feature-list: $common.free-feature-list
+cta-text: Get Plan
+cta-link: /pricing/
+bg-color: $inherited.colors.custom.one
+
+Lorem ipsum dolor sit amet, consectet adipiscing elit.
+
+-- pricing-card-5: Standard
+active: true 
+price: 99
+currency: \$
+subscription: Per Month
+feature-list: $common.startup-feature-list
+cta-text: Get Plan
+cta-link: /pricing/
+bg-color: $inherited.colors.custom.two
+
+Lorem ipsum dolor sit amet, consectet adipiscing elit.
+
+-- pricing-card-5: Premium
+active: false 
+price: 153
+currency: \$
+subscription: Per Month
+feature-list: $common.enterprise-feature-list
+cta-text: Get Plan
+cta-link: /pricing/
+bg-color: $inherited.colors.custom.three
+
+Lorem ipsum dolor sit amet, consectet adipiscing elit.
+
+-- end: pricing
 
 -- end: ds.page
+
+
+
+
+
+
+
+
+
+
+
+-- component pricing:
+optional caption title:
+optional body body:
+children pricing-cards:
+
+-- ftd.column:
+width: fill-container
+align-content: center
+
+-- ftd.desktop:
+
+-- pricing-desktop: $pricing.title
+pricing-cards: $pricing.pricing-cards
+
+$pricing.body
+
+-- end: ftd.desktop
+
+-- ftd.mobile:
+
+-- pricing-mobile: $pricing.title
+pricing-cards: $pricing.pricing-cards
+
+$pricing.body
+
+-- end: ftd.mobile
+
+-- end: ftd.column
+
+-- end: pricing
+
+
+
+
+
+
+
+
+-- component pricing-desktop:
+optional caption title:
+optional body body:
+children pricing-cards:
+
+-- ftd.column:
+width: fill-container
+align-content: center
+spacing.fixed.px: 32
+
+-- ftd.text: $pricing-desktop.title
+if: { pricing-desktop.title!= NULL }
+role: $inherited.types.heading-large
+color: $inherited.colors.text-strong
+text-align: center
+width.fixed.percent: 50
+
+-- ftd.text:
+if: { pricing-desktop.body!= NULL }
+role: $inherited.types.copy-regular
+color: $inherited.colors.text
+text-align: center
+width.fixed.percent: 60
+
+$pricing-desktop.body
+
+-- ftd.row:
+width: fill-container
+children: $pricing-desktop.pricing-cards
+spacing.fixed.px: 32
+margin-vertical.px: 48
+align-content: center
+max-width.fixed.px: 1120
+
+-- end: ftd.row
+
+-- end: ftd.column
+
+-- end: pricing-desktop
+
+
+
+
+
+
+
+
+
+
+-- component pricing-mobile:
+optional caption title:
+optional body body:
+children pricing-cards:
+
+-- ftd.column:
+width: fill-container
+align-content: center
+spacing.fixed.px: 24
+
+-- ftd.text: $pricing-mobile.title
+if: { pricing-mobile.title!= NULL }
+role: $inherited.types.heading-medium
+color: $inherited.colors.text-strong
+text-align: center
+
+-- ftd.text:
+if: { pricing-mobile.body!= NULL }
+role: $inherited.types.copy-regular
+color: $inherited.colors.text
+text-align: center
+
+$pricing-mobile.body
+
+-- ftd.column:
+width: fill-container
+children: $pricing-mobile.pricing-cards
+spacing.fixed.px: 16
+
+-- end: ftd.column
+
+-- end: ftd.column
+
+-- end: pricing-mobile
+
+
+
+
+
+
+
+
+
+
+-- component pricing-card:
+caption title:
+boolean active:
+integer price:
+string currency:
+string subscription:
+common.feature list feature-list:
+string cta-text:
+string cta-link:
+optional string body-title:
+optional body body:
+optional string tag:
+ftd.color bg-color:
+boolean $cta-hover: false
+
+-- ftd.column:
+width.fixed.percent: 30
+width if { ftd.device == "mobile" }: fill-container
+background.solid: $inherited.colors.background.step-1
+border-radius.px: 12
+shadow: $shadow-14
+align-content: center
+spacing.fixed.px: 12
+
+-- ftd.column:
+color: $inherited.colors.text-strong
+role: $inherited.types.heading-medium
+width: fill-container
+margin-bottom.px: 16
+background.solid: $pricing-card.bg-color
+align-self: center
+padding.px: 32
+
+-- ftd.text: $pricing-card.title
+width: fill-container
+style: medium
+text-align: center
+
+-- end: ftd.column
+
+-- ftd.row:
+margin-bottom.px: 32
+align-content: center
+spacing.fixed.px: 4
+color: $inherited.colors.text-strong
+role: $inherited.types.heading-medium
+
+-- ftd.text: $pricing-card.currency
+
+-- ftd.integer: $pricing-card.price
+role: $inherited.types.heading-large
+
+-- ftd.text: \/
+
+-- ftd.text: $pricing-card.subscription
+
+-- end: ftd.row
+
+-- feature-loop: $obj.title
+active: $obj.active
+$loop$: $pricing-card.feature-list as $obj
+
+-- ftd.column:
+width: fill-container
+align-content: center
+margin-vertical.px: 24
+
+-- ftd.text: $pricing-card.cta-text
+link: $pricing-card.cta-link
+padding-vertical.px: 16
+padding-horizontal.px: 32
+background.solid: $inherited.colors.cta-primary.base
+text-align: center
+border-radius.px: 24
+color: $inherited.colors.cta-primary.text
+role: $inherited.types.button-medium
+
+-- end: ftd.column
+
+-- end: ftd.column
+
+-- end: pricing-card
+
+
+
+
+
+
+
+
+
+-- component feature-loop:
+caption title:
+boolean active:
+
+-- ftd.row:
+width: fill-container
+spacing.fixed.px: 12
+margin-bottom.px: 12
+align-content: center
+
+-- ftd.text: $feature-loop.title
+color: $inherited.colors.text-strong
+color if { !feature-loop.active } : $inherited.colors.text
+role: $inherited.types.copy-small
+
+-- end: ftd.row
+
+-- end: feature-loop
+
+-- ftd.shadow shadow-14:
+color: rgba(0, 59, 128, 0.15)
+x-offset.px: 2
+y-offset.px: 0
+blur.px: 14
+inset-body: false
+spread.px: 1
+
+
+-- ftd.shadow shadow:
+color: rgba(0, 0, 0, 0.1)
+x-offset.px: 5
+y-offset.px: 5
+blur.px: 0
+inset-body: false
+spread.px: 0
+
+
+
+
+
+
+
+
+
+
+
+-- component pricing-card-2:
+caption title:
+boolean active:
+integer price:
+string currency:
+string subscription:
+ftd.image-src icon:
+common.feature list feature-list:
+string cta-text:
+string cta-link:
+optional string body-title:
+optional body body:
+optional string tag:
+boolean $cta-hover: false
+
+-- ftd.column:
+width.fixed.percent: 30
+width if { ftd.device == "mobile" }: fill-container
+border-radius.px: 12
+align-content: center
+
+-- ftd.column:
+color: $inherited.colors.text-strong
+role: $inherited.types.heading-small
+width: fill-container
+margin-bottom.px: 16
+background.solid: $inherited.colors.background.step-1
+align-content: center
+padding-vertical.px: 28
+spacing.fixed.px: 8
+
+-- ftd.image: $pricing-card-2.icon
+width.fixed.px: 64
+background.solid: $inherited.colors.cta-primary.base
+padding.px: 12
+border-radius.px: 100
+
+-- ftd.text: $pricing-card-2.title
+width: fill-container
+style: medium
+text-align: center
+
+-- ftd.row:
+margin-bottom.px: 32
+align-content: center
+spacing.fixed.px: 4
+color: $inherited.colors.text-strong
+role: $inherited.types.heading-medium
+
+-- ftd.text: $pricing-card-2.currency
+
+-- ftd.integer: $pricing-card-2.price
+role: $inherited.types.heading-large
+
+-- ftd.text: $pricing-card-2.subscription
+color: $inherited.colors.text
+role: $inherited.types.copy-large
+margin-left.px: 12
+margin-top.px: 12
+style: light
+
+-- end: ftd.row
+
+-- end: ftd.column
+
+-- feature-loop-2: $obj.title
+active: $obj.active
+$loop$: $pricing-card-2.feature-list as $obj
+
+-- ftd.column:
+width: fill-container
+align-content: center
+margin-vertical.px: 24
+
+-- ftd.text: $pricing-card-2.cta-text
+link: $pricing-card-2.cta-link
+padding-vertical.px: 16
+padding-horizontal.px: 32
+min-width.fixed.px: 192
+background.solid: $inherited.colors.cta-primary.base
+text-align: center
+border-radius.px: 12
+color: $inherited.colors.cta-primary.text
+role: $inherited.types.button-medium
+
+-- end: ftd.column
+
+-- end: ftd.column
+
+-- end: pricing-card-2
+
+
+
+
+
+
+
+
+
+-- component feature-loop-2:
+caption title:
+boolean active:
+
+-- ftd.row:
+width: fill-container
+margin-bottom.px: 12
+align-content: center
+
+-- ftd.text: $feature-loop-2.title
+color: $inherited.colors.text-strong
+color if { !feature-loop-2.active } : $inherited.colors.text
+role: $inherited.types.copy-small
+
+-- end: ftd.row
+
+-- end: feature-loop-2
+
+
+
+
+
+
+
+
+
+
+
+-- component pricing-card-3:
+caption title:
+boolean active:
+integer price:
+string currency:
+string subscription:
+ftd.image-src icon:
+common.feature list feature-list:
+string cta-text:
+string cta-link:
+optional string body-title:
+optional body body:
+optional string tag:
+boolean $cta-hover: false
+
+-- ftd.column:
+width.fixed.percent: 30
+width if { ftd.device == "mobile" }: fill-container
+border-radius.px: 44
+align-content: center
+background.solid: $inherited.colors.background.step-1
+
+-- ftd.image: $pricing-card-3.icon
+width.fixed.px: 92
+background.solid: $inherited.colors.cta-primary.base
+padding.px: 12
+border-radius.px: 100
+margin-top.px: -38
+
+-- ftd.row:
+margin-top.px: 24
+align-content: center
+spacing.fixed.px: 4
+color: $inherited.colors.text-strong
+role: $inherited.types.heading-medium
+
+-- ftd.text: $pricing-card-3.currency
+
+-- ftd.integer: $pricing-card-3.price
+role: $inherited.types.heading-large
+
+-- end: ftd.row
+
+-- ftd.text: $pricing-card-3.subscription
+color: $inherited.colors.text
+role: $inherited.types.copy-large
+margin-top.px: 12
+margin-bottom.px: 24
+style: light
+
+-- ftd.text: $pricing-card-3.title
+width: fill-container
+style: medium
+text-align: center
+color: $inherited.colors.text-strong
+role: $inherited.types.heading-small
+margin-bottom.px: 24
+
+-- feature-loop: $obj.title
+active: $obj.active
+$loop$: $pricing-card-3.feature-list as $obj
+
+-- ftd.text: $pricing-card-3.cta-text
+link: $pricing-card-3.cta-link
+padding-vertical.px: 16
+padding-horizontal.px: 32
+min-width.fixed.px: 192
+background.solid: $inherited.colors.cta-primary.base
+text-align: center
+border-radius.px: 12
+color: $inherited.colors.cta-primary.text
+role: $inherited.types.button-medium
+margin-vertical.px: 24
+
+-- end: ftd.column
+
+-- end: pricing-card-3
+
+
+
+
+
+
+
+
+
+
+-- component pricing-card-4:
+caption title:
+boolean active:
+integer price:
+string currency:
+string subscription:
+common.feature list feature-list:
+string cta-text:
+string cta-link:
+optional string body-title:
+optional body body:
+optional string tag:
+ftd.color bg-color:
+boolean $cta-hover: false
+
+-- ftd.column:
+width.fixed.percent: 30
+width if { ftd.device == "mobile" }: fill-container
+background.solid: $pricing-card-4.bg-color
+border-radius.px: 12
+spacing.fixed.px: 12
+padding.px: 32
+
+-- ftd.column:
+width: fill-container
+spacing.fixed.px: 24
+padding-bottom.px: 12
+border-bottom-width.px: 2
+border-color: $inherited.colors.text
+
+-- ftd.row:
+color: $inherited.colors.text-strong
+role: $inherited.types.heading-medium
+width: fill-container
+
+-- ftd.text: $pricing-card-4.title
+width: fill-container
+style: medium
+
+-- ftd.text: $pricing-card-4.currency
+
+-- ftd.integer: $pricing-card-4.price
+role: $inherited.types.heading-large
+
+-- end: ftd.row
+
+-- ftd.text:
+role: $inherited.types.copy-regular
+color: $inherited.colors.text-strong
+
+$pricing-card-4.body
+
+-- end: ftd.column
+
+-- ftd.text: Includes:
+role: $inherited.types.copy-large
+color: $inherited.colors.text-strong
+style: italic
+
+-- feature-loop-4: $obj.title
+active: $obj.active
+$loop$: $pricing-card-4.feature-list as $obj
+
+-- ftd.text: $pricing-card-4.cta-text
+link: $pricing-card-4.cta-link
+padding-vertical.px: 16
+padding-horizontal.px: 32
+background.solid: $inherited.colors.cta-primary.base
+text-align: center
+border-radius.px: 8
+color: $inherited.colors.cta-primary.text
+role: $inherited.types.button-medium
+width: fill-container
+
+-- end: ftd.column
+
+-- end: pricing-card-4
+
+
+
+
+
+
+
+
+
+-- component feature-loop-4:
+caption title:
+boolean active:
+ftd.image-src icon: $assets.files.assets.tick.svg
+
+-- ftd.row:
+width: fill-container
+spacing.fixed.px: 12
+margin-bottom.px: 12
+align-self: center
+
+-- ftd.image:
+src: $feature-loop-4.icon
+width.fixed.px: 18
+
+-- ftd.text: $feature-loop-4.title
+color: $inherited.colors.text-strong
+color if { !feature-loop-4.active } : $inherited.colors.text
+role: $inherited.types.copy-small
+
+-- end: ftd.row
+
+-- end: feature-loop-4
+
+
+
+
+
+
+
+
+
+
+-- component pricing-card-5:
+caption title:
+boolean active:
+integer price:
+string currency:
+string subscription:
+common.feature list feature-list:
+string cta-text:
+string cta-link:
+optional string body-title:
+optional body body:
+optional string tag:
+boolean $cta-hover: false
+ftd.color bg-color:
+
+-- ftd.column:
+width.fixed.percent: 30
+width if { ftd.device == "mobile" }: fill-container
+border-radius.px: 15
+align-content: center
+background.solid: $pricing-card-5.bg-color
+
+-- ftd.column:
+width.fixed.px: 220
+height.fixed.px: 170
+border-radius.px: 15
+padding-vertical.px: 24
+spacing.fixed.px: 18
+align-content: center
+background.solid: $inherited.colors.background.step-1
+margin-top.px: -32
+margin-bottom.px: 24
+role: $inherited.types.heading-large
+shadow: $shadow
+color: $pricing-card-5.bg-color
+
+-- ftd.text: $pricing-card-5.title
+width: fill-container
+role: $inherited.types.heading-small
+text-align: center
+
+-- ftd.row:
+align-content: center
+spacing.fixed.px: 4
+color: $pricing-card-5.bg-color
+
+-- ftd.text: $pricing-card-5.currency
+style: medium
+
+-- ftd.integer: $pricing-card-5.price
+
+-- end: ftd.row
+
+-- ftd.text: $pricing-card-5.subscription
+role: $inherited.types.copy-large
+style: light
+
+-- end: ftd.column
+
+-- feature-loop: $obj.title
+active: $obj.active
+$loop$: $pricing-card-5.feature-list as $obj
+
+-- ftd.text: $pricing-card-5.cta-text
+link: $pricing-card-5.cta-link
+padding-vertical.px: 16
+padding-horizontal.px: 32
+min-width.fixed.px: 192
+background.solid: $inherited.colors.cta-tertiary.text
+text-align: center
+border-radius.px: 50
+color: $pricing-card-5.bg-color
+role: $inherited.types.button-medium
+margin-vertical.px: 24
+shadow: $shadow
+
+-- end: ftd.column
+
+-- end: pricing-card-5
\ No newline at end of file
diff --git a/sidebar.ftd b/sidebar.ftd
deleted file mode 100644
index 8d48433..0000000
--- a/sidebar.ftd
+++ /dev/null
@@ -1,66 +0,0 @@
--- ds.page: Page with right-sidebar 👉
-sidebar: true
-
--- ds.page.right-sidebar:
-
--- ds.h3: Heading in sidebar
-
-You can call any component inside sidebar. 
-
-This right-sidebar will appear on all pages.
-
--- ds.code:
-lang: ftd
-
-\-- ftd.text: Hello World
-
--- end: ds.page.right-sidebar
-
--- ds.page.body:
-
-If you want to show right-sidebar on your page you can add it like sidebar shown
-in this page 👉.
-
--- ds.h3: `right-sidebar` documentation
-
-[Click here](https://fastn-community.github.io/doc-site/right-sidebar/) to read
-more about `right-sidebar`.
-
--- ds.h3: How this page is built?
-
-Copy below code snippet to create pages like this with right-sidebar.
-
--- ds.code:
-lang: ftd
-
-\-- ds.page: Page with right-sidebar 👉
-sidebar: true
-
-\-- ds.page.right-sidebar:
-
-\-- ds.h3: Heading in sidebar
-
-You can call any component inside sidebar. 
-
-This right-sidebar will appear on all pages.
-
-\-- ds.code:
-lang: ftd
-
-\-- ftd.text: Hello World
-
-\-- end: ds.page.right-sidebar
-
-\-- ds.page.body:
-
-If you want to show right-sidebar on your page you can add it like sidebar shown
-in this page 👉.
-
-\-- ds.h3: Read right-sidebar documentation
-
-[Click here](https://fastn-community.github.io/doc-site/right-sidebar/) to read
-more about `right-sidebar`.
-
-\-- end: ds.page
-
--- end: ds.page