@kickstartds/ds-agency-premium 1.2.12--canary.216.0543b48.0 → 1.2.12

package/dist/components/presets.json

@@ -0,0 +1,3189 @@
+[
+  {
+    "id": "blog-blog-aside--default",
+    "group": "Blog/ Blog Aside",
+    "name": "Default",
+    "code": "<No Display Name\n  author={{\n    byline: 'CEO at Company',\n    email: 'jane.smith@example.com',\n    image: 'img/people/author-emily.png',\n    name: 'Jane Smith',\n    twitter: 'jane_smith'\n  }}\n  date=\"12/30/2022\"\n  readingTime=\"5 min read\"\n  socialSharing={[\n    {\n      href: 'https://twitter.com/share?text=The%20Future%20of%20AI&url=https://example.com/blog/the-future-of-ai',\n      icon: 'twitter',\n      title: 'Share on Twitter'\n    },\n    {\n      href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog/the-future-of-ai&title=The%20Future%20of%20AI&summary=The%20Future%20of%20AI&source=LinkedIn',\n      icon: 'linkedin',\n      title: 'Share on LinkedIn'\n    }\n  ]}\n/>",
+    "args": {
+      "author": {
+        "name": "Jane Smith",
+        "byline": "CEO at Company",
+        "image": "img/people/author-emily.png",
+        "twitter": "jane_smith",
+        "email": "jane.smith@example.com"
+      },
+      "socialSharing": [
+        {
+          "icon": "twitter",
+          "href": "https://twitter.com/share?text=The%20Future%20of%20AI&url=https://example.com/blog/the-future-of-ai",
+          "title": "Share on Twitter"
+        },
+        {
+          "icon": "linkedin",
+          "href": "https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog/the-future-of-ai&title=The%20Future%20of%20AI&summary=The%20Future%20of%20AI&source=LinkedIn",
+          "title": "Share on LinkedIn"
+        }
+      ],
+      "readingTime": "5 min read",
+      "date": "12/30/2022"
+    },
+    "screenshot": "img/screenshots/blog-blog-aside--default.png"
+  },
+  {
+    "id": "blog-blog-head--default",
+    "group": "Blog/ Blog Head",
+    "name": "Default",
+    "code": "<No Display Name\n  date=\"12/30/2022\"\n  headline=\"The Future of AI\"\n  image=\"img/close-up-young-business-team-working.png\"\n  tags={[\n    'Technology',\n    'AI'\n  ]}\n/>",
+    "args": {
+      "date": "12/30/2022",
+      "tags": [
+        "Technology",
+        "AI"
+      ],
+      "headline": "The Future of AI",
+      "image": "img/close-up-young-business-team-working.png"
+    },
+    "screenshot": "img/screenshots/blog-blog-head--default.png"
+  },
+  {
+    "id": "blog-blog-teaser--default",
+    "group": "Blog/ Blog Teaser",
+    "name": "Default",
+    "code": "<No Display Name\n  author={{\n    image: 'img/people/author-emily.png',\n    name: 'Jane Smith',\n    title: 'Senior AI Researcher'\n  }}\n  date=\"12/30/2022\"\n  headline=\"The Future of AI\"\n  image=\"img/close-up-young-business-team-working.png\"\n  link={{\n    label: 'Read more',\n    url: 'https://example.com'\n  }}\n  readingTime=\"5 min read\"\n  tags={[\n    'Technology',\n    'AI'\n  ]}\n  teaserText=\"Dive into the future of AI in this detailed blog post. Discover how technology is rapidly evolving, the impact of AI on various industries, and what to expect in the coming years. Learn about the latest advancements, challenges, and the potential solutions that AI brings to the table.\"\n/>",
+    "args": {
+      "date": "12/30/2022",
+      "tags": [
+        "Technology",
+        "AI"
+      ],
+      "headline": "The Future of AI",
+      "teaserText": "Dive into the future of AI in this detailed blog post. Discover how technology is rapidly evolving, the impact of AI on various industries, and what to expect in the coming years. Learn about the latest advancements, challenges, and the potential solutions that AI brings to the table.",
+      "image": "img/close-up-young-business-team-working.png",
+      "link": {
+        "url": "https://example.com",
+        "label": "Read more"
+      },
+      "readingTime": "5 min read",
+      "author": {
+        "name": "Jane Smith",
+        "title": "Senior AI Researcher",
+        "image": "img/people/author-emily.png"
+      }
+    },
+    "screenshot": "img/screenshots/blog-blog-teaser--default.png"
+  },
+  {
+    "id": "components-button--primary-button",
+    "group": "Components/Button",
+    "name": "PrimaryButton",
+    "code": "<Button\n  label=\"Primary Button\"\n  size=\"medium\"\n  variant=\"primary\"\n/>",
+    "args": {
+      "label": "Primary Button",
+      "variant": "primary",
+      "size": "medium",
+      "disabled": false
+    },
+    "screenshot": "img/screenshots/components-button--primary-button.png"
+  },
+  {
+    "id": "components-button--secondary-button",
+    "group": "Components/Button",
+    "name": "SecondaryButton",
+    "code": "<Button\n  label=\"Secondary Button\"\n  size=\"medium\"\n  variant=\"secondary\"\n/>",
+    "args": {
+      "label": "Secondary Button",
+      "variant": "secondary",
+      "size": "medium",
+      "disabled": false
+    },
+    "screenshot": "img/screenshots/components-button--secondary-button.png"
+  },
+  {
+    "id": "components-button--tertiary-button",
+    "group": "Components/Button",
+    "name": "TertiaryButton",
+    "code": "<Button\n  label=\"Tertiary Button\"\n  size=\"medium\"\n  variant=\"tertiary\"\n/>",
+    "args": {
+      "label": "Tertiary Button",
+      "variant": "tertiary",
+      "size": "medium",
+      "disabled": false
+    },
+    "screenshot": "img/screenshots/components-button--tertiary-button.png"
+  },
+  {
+    "id": "components-button--primary-disabled-button",
+    "group": "Components/Button",
+    "name": "PrimaryDisabledButton",
+    "code": "<Button\n  disabled\n  label=\"Disabled Button\"\n  size=\"medium\"\n  variant=\"primary\"\n/>",
+    "args": {
+      "label": "Disabled Button",
+      "variant": "primary",
+      "size": "medium",
+      "disabled": true
+    },
+    "screenshot": "img/screenshots/components-button--primary-disabled-button.png"
+  },
+  {
+    "id": "pages-cms--blog-overview",
+    "group": "Pages/CMS",
+    "name": "BlogOverview",
+    "code": "<BlogOverview\n  cta={{\n    buttons: [\n      {\n        label: 'Book a meeting'\n      },\n      {\n        label: 'Book a meeting'\n      },\n      {\n        label: 'Book a meeting'\n      }\n    ],\n    colorNeutral: false,\n    contentAlign: 'center',\n    fullWidth: false,\n    headline: 'Headline',\n    highlightText: false,\n    image: {\n      padding: true\n    },\n    order: {\n      desktopImageLast: true,\n      mobileImageLast: false\n    },\n    sub: 'Subheadline',\n    textAlign: 'left'\n  }}\n  latest={{\n    author: {\n      image: 'img/people/author-alex.png',\n      name: 'John Doe',\n      title: 'CEO'\n    },\n    date: '12/30/2022',\n    headline: 'Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality',\n    image: 'img/close-up-young-business-team-working.png',\n    link: {\n      label: 'Read more',\n      url: 'https://example.com/article1'\n    },\n    readingTime: '5 min read',\n    tags: [\n      'Design Systems',\n      'Headless Websites',\n      'Training'\n    ],\n    teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences. Learn how we transform ideas into tangible results with our Design System Creation service, empowering your brand to communicate effectively across digital platforms.'\n  }}\n  list={[\n    {\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'This is a blog post headline',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        url: 'https://example.com'\n      },\n      readingTime: '5 min read',\n      tags: [\n        'tech',\n        'tech',\n        'tech'\n      ],\n      teaserText: 'This is a teaser text for the blog post'\n    },\n    {\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'This is a blog post headline',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        url: 'https://example.com'\n      },\n      readingTime: '5 min read',\n      tags: [\n        'tech',\n        'tech',\n        'tech'\n      ],\n      teaserText: 'This is a teaser text for the blog post'\n    },\n    {\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'This is a blog post headline',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        url: 'https://example.com'\n      },\n      readingTime: '5 min read',\n      tags: [\n        'tech',\n        'tech',\n        'tech'\n      ],\n      teaserText: 'This is a teaser text for the blog post'\n    }\n  ]}\n  more={[\n    {\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        url: 'https://example.com/article1'\n      },\n      readingTime: '5 min read',\n      tags: [\n        'Design Systems',\n        'Headless Websites',\n        'Training'\n      ],\n      teaserText: 'In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand\\'s digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences. Learn how we transform ideas into tangible results with our Design System Creation service, empowering your brand to communicate effectively across digital platforms.'\n    },\n    {\n      author: {\n        image: 'img/people/author-emily.png',\n        name: 'Jane Doe',\n        title: 'CTO'\n      },\n      date: '12/30/2022',\n      headline: 'Unleashing Innovation with Headless Websites: The Future of Digital Experiences',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        url: 'https://example.com/article2'\n      },\n      readingTime: '5 min read',\n      tags: [\n        'Innovation',\n        'Headless Websites',\n        'Systemics'\n      ],\n      teaserText: 'Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey. Discover how our experts leverage headless CMS architecture to provide unparalleled flexibility while maintaining design integrity. We make content distribution dynamic and responsive, tailoring it to users\\' preferences for a seamless journey across devices and platforms.'\n    },\n    {\n      author: {\n        image: 'img/people/author-alex.png',\n        name: 'John Doe',\n        title: 'CEO'\n      },\n      date: '12/30/2022',\n      headline: 'Investing in Digital Excellence: Systemics\\' Design System Trainings',\n      image: 'img/close-up-young-business-team-working.png',\n      link: {\n        label: 'Read more',\n        url: 'https://example.com/article3'\n      },\n      readingTime: '5 min read',\n      tags: [\n        'Digital Excellence',\n        'Systemics',\n        'Design System Trainings'\n      ],\n      teaserText: 'Investing in your digital team\\'s growth is crucial for sustainable success. In this article, we highlight Systemics\\' Design System Trainings, designed to equip your team with the skills they need to harness your design system effectively. Understand how our trainings promote collaboration, shared understanding, and continuous learning, ensuring your design system remains an evolving cornerstone of your digital success.'\n    }\n  ]}\n/>",
+    "args": {
+      "latest": {
+        "date": "12/30/2022",
+        "tags": [
+          "Design Systems",
+          "Headless Websites",
+          "Training"
+        ],
+        "headline": "Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality",
+        "teaserText": "In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand's digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences. Learn how we transform ideas into tangible results with our Design System Creation service, empowering your brand to communicate effectively across digital platforms.",
+        "image": "img/close-up-young-business-team-working.png",
+        "link": {
+          "url": "https://example.com/article1",
+          "label": "Read more"
+        },
+        "readingTime": "5 min read",
+        "author": {
+          "name": "John Doe",
+          "title": "CEO",
+          "image": "img/people/author-alex.png"
+        }
+      },
+      "list": [
+        {
+          "date": "12/30/2022",
+          "tags": [
+            "tech",
+            "tech",
+            "tech"
+          ],
+          "headline": "This is a blog post headline",
+          "teaserText": "This is a teaser text for the blog post",
+          "image": "img/close-up-young-business-team-working.png",
+          "link": {
+            "url": "https://example.com",
+            "label": "Read more"
+          },
+          "readingTime": "5 min read",
+          "author": {
+            "name": "John Doe",
+            "title": "CEO",
+            "image": "img/people/author-emily.png"
+          }
+        },
+        {
+          "date": "12/30/2022",
+          "tags": [
+            "tech",
+            "tech",
+            "tech"
+          ],
+          "headline": "This is a blog post headline",
+          "teaserText": "This is a teaser text for the blog post",
+          "image": "img/close-up-young-business-team-working.png",
+          "link": {
+            "url": "https://example.com",
+            "label": "Read more"
+          },
+          "readingTime": "5 min read",
+          "author": {
+            "name": "John Doe",
+            "title": "CEO",
+            "image": "img/people/author-emily.png"
+          }
+        },
+        {
+          "date": "12/30/2022",
+          "tags": [
+            "tech",
+            "tech",
+            "tech"
+          ],
+          "headline": "This is a blog post headline",
+          "teaserText": "This is a teaser text for the blog post",
+          "image": "img/close-up-young-business-team-working.png",
+          "link": {
+            "url": "https://example.com",
+            "label": "Read more"
+          },
+          "readingTime": "5 min read",
+          "author": {
+            "name": "John Doe",
+            "title": "CEO",
+            "image": "img/people/author-emily.png"
+          }
+        }
+      ],
+      "more": [
+        {
+          "date": "12/30/2022",
+          "tags": [
+            "Design Systems",
+            "Headless Websites",
+            "Training"
+          ],
+          "headline": "Mastering the Art of Design Systems with Systemics: A Journey from Vision to Reality",
+          "teaserText": "In this enlightening article, we delve into how Systemics, your go-to Design System agency, brings clarity and coherence to your brand's digital presence. We discuss our unique approach to Design System Consulting, where we align your vision with actionable strategies for seamless and captivating user experiences. Learn how we transform ideas into tangible results with our Design System Creation service, empowering your brand to communicate effectively across digital platforms.",
+          "image": "img/close-up-young-business-team-working.png",
+          "link": {
+            "url": "https://example.com/article1",
+            "label": "Read more"
+          },
+          "readingTime": "5 min read",
+          "author": {
+            "name": "John Doe",
+            "title": "CEO",
+            "image": "img/people/author-alex.png"
+          }
+        },
+        {
+          "date": "12/30/2022",
+          "tags": [
+            "Innovation",
+            "Headless Websites",
+            "Systemics"
+          ],
+          "headline": "Unleashing Innovation with Headless Websites: The Future of Digital Experiences",
+          "teaserText": "Dive into the exciting world of headless architecture with Systemics. This article explores our Headless Websites service, a playground of innovation and creativity for brands seeking to redefine their digital journey. Discover how our experts leverage headless CMS architecture to provide unparalleled flexibility while maintaining design integrity. We make content distribution dynamic and responsive, tailoring it to users' preferences for a seamless journey across devices and platforms.",
+          "image": "img/close-up-young-business-team-working.png",
+          "link": {
+            "url": "https://example.com/article2",
+            "label": "Read more"
+          },
+          "readingTime": "5 min read",
+          "author": {
+            "name": "Jane Doe",
+            "title": "CTO",
+            "image": "img/people/author-emily.png"
+          }
+        },
+        {
+          "date": "12/30/2022",
+          "tags": [
+            "Digital Excellence",
+            "Systemics",
+            "Design System Trainings"
+          ],
+          "headline": "Investing in Digital Excellence: Systemics' Design System Trainings",
+          "teaserText": "Investing in your digital team's growth is crucial for sustainable success. In this article, we highlight Systemics' Design System Trainings, designed to equip your team with the skills they need to harness your design system effectively. Understand how our trainings promote collaboration, shared understanding, and continuous learning, ensuring your design system remains an evolving cornerstone of your digital success.",
+          "image": "img/close-up-young-business-team-working.png",
+          "link": {
+            "url": "https://example.com/article3",
+            "label": "Read more"
+          },
+          "readingTime": "5 min read",
+          "author": {
+            "name": "John Doe",
+            "title": "CEO",
+            "image": "img/people/author-alex.png"
+          }
+        }
+      ],
+      "cta": {
+        "headline": "Headline",
+        "sub": "Subheadline",
+        "highlightText": false,
+        "colorNeutral": false,
+        "fullWidth": false,
+        "buttons": [
+          {
+            "label": "Book a meeting"
+          },
+          {
+            "label": "Book a meeting"
+          },
+          {
+            "label": "Book a meeting"
+          }
+        ],
+        "image": {
+          "padding": true
+        },
+        "order": {
+          "mobileImageLast": false,
+          "desktopImageLast": true
+        },
+        "textAlign": "left",
+        "contentAlign": "center"
+      }
+    },
+    "screenshot": "img/screenshots/pages-cms--blog-overview.png"
+  },
+  {
+    "id": "pages-cms--blog-post",
+    "group": "Pages/CMS",
+    "name": "BlogPost",
+    "code": "<BlogPost\n  aside={{\n    author: {\n      byline: 'Senior Developer',\n      email: 'Jane.doe@example.com',\n      image: 'img/people/author-emily.png',\n      name: 'Jane Doe',\n      twitter: 'Janedoe'\n    },\n    date: '12/30/2022',\n    readingTime: '5 min read',\n    socialSharing: [\n      {\n        href: 'https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog',\n        icon: 'twitter',\n        title: 'Share on Twitter'\n      },\n      {\n        href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline',\n        icon: 'linkedin',\n        title: 'Share on LinkedIn'\n      }\n    ]\n  }}\n  content=\"\n## Introduction\nThe future of **ArtiEficial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n          \"\n  cta={{\n    buttons: [\n      {\n        icon: 'person',\n        label: 'Contact Us',\n        target: '#'\n      },\n      {\n        icon: 'date',\n        label: 'Learn More',\n        target: '#'\n      }\n    ],\n    colorNeutral: false,\n    contentAlign: 'center',\n    fullWidth: false,\n    headline: 'Ready to Transform Your Development Process?',\n    highlightText: false,\n    image: {\n      padding: true\n    },\n    order: {\n      desktopImageLast: true,\n      mobileImageLast: false\n    },\n    sub: 'Start your journey today.',\n    text: 'Get started with our design system today and experience a new level of efficiency and consistency in your projects.',\n    textAlign: 'center'\n  }}\n  head={{\n    date: '12/30/2022',\n    headline: 'The Future of AI: A Glimpse into the Unseen',\n    image: 'img/close-up-young-business-team-working.png',\n    tags: [\n      'Technology',\n      'AI'\n    ]\n  }}\n/>",
+    "args": {
+      "head": {
+        "date": "12/30/2022",
+        "tags": [
+          "Technology",
+          "AI"
+        ],
+        "headline": "The Future of AI: A Glimpse into the Unseen",
+        "image": "img/close-up-young-business-team-working.png"
+      },
+      "aside": {
+        "author": {
+          "name": "Jane Doe",
+          "byline": "Senior Developer",
+          "image": "img/people/author-emily.png",
+          "twitter": "Janedoe",
+          "email": "Jane.doe@example.com"
+        },
+        "socialSharing": [
+          {
+            "icon": "twitter",
+            "href": "https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog",
+            "title": "Share on Twitter"
+          },
+          {
+            "icon": "linkedin",
+            "href": "https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline",
+            "title": "Share on LinkedIn"
+          }
+        ],
+        "readingTime": "5 min read",
+        "date": "12/30/2022"
+      },
+      "cta": {
+        "headline": "Ready to Transform Your Development Process?",
+        "sub": "Start your journey today.",
+        "highlightText": false,
+        "colorNeutral": false,
+        "fullWidth": false,
+        "buttons": [
+          {
+            "label": "Contact Us",
+            "target": "#",
+            "icon": "person"
+          },
+          {
+            "label": "Learn More",
+            "target": "#",
+            "icon": "date"
+          }
+        ],
+        "image": {
+          "padding": true
+        },
+        "order": {
+          "mobileImageLast": false,
+          "desktopImageLast": true
+        },
+        "textAlign": "center",
+        "contentAlign": "center",
+        "text": "Get started with our design system today and experience a new level of efficiency and consistency in your projects."
+      },
+      "content": "\n## Introduction\nThe future of **ArtiEficial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n          "
+    },
+    "screenshot": "img/screenshots/pages-cms--blog-post.png"
+  },
+  {
+    "id": "components-cta--banner",
+    "group": "Components/CTA",
+    "name": "Banner",
+    "code": "<Cta\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Contact Us',\n      target: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Learn More',\n      target: '#'\n    }\n  ]}\n  contentAlign=\"center\"\n  headline=\"Ready to Transform Your Development Process?\"\n  image={{\n    padding: true\n  }}\n  order={{\n    desktopImageLast: true,\n    mobileImageLast: false\n  }}\n  sub=\"Start your journey today.\"\n  text=\"Get started with our design system today and experience a new level of efficiency and consistency in your projects.\"\n  textAlign=\"center\"\n/>",
+    "args": {
+      "headline": "Ready to Transform Your Development Process?",
+      "sub": "Start your journey today.",
+      "highlightText": false,
+      "colorNeutral": false,
+      "fullWidth": false,
+      "buttons": [
+        {
+          "label": "Contact Us",
+          "target": "#",
+          "icon": "person"
+        },
+        {
+          "label": "Learn More",
+          "target": "#",
+          "icon": "date"
+        }
+      ],
+      "image": {
+        "padding": true
+      },
+      "order": {
+        "mobileImageLast": false,
+        "desktopImageLast": true
+      },
+      "textAlign": "center",
+      "contentAlign": "center",
+      "text": "Get started with our design system today and experience a new level of efficiency and consistency in your projects."
+    },
+    "screenshot": "img/screenshots/components-cta--banner.png"
+  },
+  {
+    "id": "components-cta--highlighted",
+    "group": "Components/CTA",
+    "name": "Highlighted",
+    "code": "<Cta\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Get Started',\n      target: '#'\n    }\n  ]}\n  contentAlign=\"center\"\n  headline=\"Why Choose Our Design System?\"\n  highlightText\n  image={{\n    padding: true\n  }}\n  order={{\n    desktopImageLast: true,\n    mobileImageLast: false\n  }}\n  sub=\"Built for consistency and speed.\"\n  text=\"Our design system is built with scalability and efficiency in mind. It allows for consistent UI across different platforms, making your development process smoother and faster.\"\n  textAlign=\"center\"\n/>",
+    "args": {
+      "headline": "Why Choose Our Design System?",
+      "sub": "Built for consistency and speed.",
+      "highlightText": true,
+      "colorNeutral": false,
+      "fullWidth": false,
+      "buttons": [
+        {
+          "label": "Get Started",
+          "target": "#",
+          "icon": "person"
+        }
+      ],
+      "image": {
+        "padding": true
+      },
+      "order": {
+        "mobileImageLast": false,
+        "desktopImageLast": true
+      },
+      "textAlign": "center",
+      "contentAlign": "center",
+      "text": "Our design system is built with scalability and efficiency in mind. It allows for consistent UI across different platforms, making your development process smoother and faster."
+    },
+    "screenshot": "img/screenshots/components-cta--highlighted.png"
+  },
+  {
+    "id": "components-cta--left-aligned",
+    "group": "Components/CTA",
+    "name": "LeftAligned",
+    "code": "<Cta\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Learn More',\n      target: '#'\n    }\n  ]}\n  contentAlign=\"center\"\n  headline=\"Experience Our Design System\"\n  image={{\n    padding: true\n  }}\n  order={{\n    desktopImageLast: true,\n    mobileImageLast: false\n  }}\n  sub=\"Efficient, scalable, seamless.\"\n  text=\"Our design system offers a seamless and efficient way to build scalable applications. Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.\"\n  textAlign=\"left\"\n/>",
+    "args": {
+      "headline": "Experience Our Design System",
+      "sub": "Efficient, scalable, seamless.",
+      "highlightText": false,
+      "colorNeutral": false,
+      "fullWidth": false,
+      "buttons": [
+        {
+          "label": "Learn More",
+          "target": "#",
+          "icon": "person"
+        }
+      ],
+      "image": {
+        "padding": true
+      },
+      "order": {
+        "mobileImageLast": false,
+        "desktopImageLast": true
+      },
+      "textAlign": "left",
+      "contentAlign": "center",
+      "text": "Our design system offers a seamless and efficient way to build scalable applications. Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture."
+    },
+    "screenshot": "img/screenshots/components-cta--left-aligned.png"
+  },
+  {
+    "id": "components-cta--product-advertisement",
+    "group": "Components/CTA",
+    "name": "ProductAdvertisement",
+    "code": "<Cta\n  backgroundImage=\"img/bg_dot-carpet-blue.svg\"\n  buttons={[\n    {\n      icon: 'chevron-right',\n      label: 'Shop Now',\n      target: '/shop',\n      variant: 'primary'\n    },\n    {\n      label: 'Learn More',\n      target: '/product-info',\n      variant: 'secondary'\n    }\n  ]}\n  contentAlign=\"center\"\n  headline=\"Experience Immersive Sound\"\n  highlightText\n  image={{\n    alt: 'Over-Ear Headphones',\n    padding: false,\n    src: 'img/showcases/comp_audio04.png'\n  }}\n  order={{\n    desktopImageLast: false,\n    mobileImageLast: false\n  }}\n  sub=\"With Our Premium Over-Ear Headphones\"\n  text=\"Our over-ear headphones provide an immersive audio experience. With noise-cancellation technology and high-quality sound.\"\n  textAlign=\"left\"\n  width=\"wide\"\n/>",
+    "args": {
+      "headline": "Experience Immersive Sound",
+      "sub": "With Our Premium Over-Ear Headphones",
+      "highlightText": true,
+      "colorNeutral": false,
+      "fullWidth": false,
+      "buttons": [
+        {
+          "label": "Shop Now",
+          "target": "/shop",
+          "variant": "primary",
+          "icon": "chevron-right"
+        },
+        {
+          "label": "Learn More",
+          "target": "/product-info",
+          "variant": "secondary"
+        }
+      ],
+      "image": {
+        "padding": false,
+        "src": "img/showcases/comp_audio04.png",
+        "alt": "Over-Ear Headphones"
+      },
+      "order": {
+        "mobileImageLast": false,
+        "desktopImageLast": false
+      },
+      "textAlign": "left",
+      "contentAlign": "center",
+      "text": "Our over-ear headphones provide an immersive audio experience. With noise-cancellation technology and high-quality sound.",
+      "backgroundImage": "img/bg_dot-carpet-blue.svg",
+      "width": "wide"
+    },
+    "screenshot": "img/screenshots/components-cta--product-advertisement.png"
+  },
+  {
+    "id": "components-cta--contact-banner",
+    "group": "Components/CTA",
+    "name": "ContactBanner",
+    "code": "<Cta\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Contact us',\n      target: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Book a meeting',\n      target: '#'\n    }\n  ]}\n  contentAlign=\"center\"\n  fullWidth\n  headline=\"Get in touch\"\n  image={{\n    padding: false,\n    src: 'img/contact-person.png'\n  }}\n  order={{\n    desktopImageLast: false,\n    mobileImageLast: false\n  }}\n  sub=\"Chat with us about getting your product or platform to market faster\"\n  text=\"Our modular design approach allows for flexibility and scalability in your application's architecture.\"\n  textAlign=\"left\"\n  width=\"wide\"\n/>",
+    "args": {
+      "headline": "Get in touch",
+      "sub": "Chat with us about getting your product or platform to market faster",
+      "highlightText": false,
+      "colorNeutral": false,
+      "fullWidth": true,
+      "buttons": [
+        {
+          "label": "Contact us",
+          "icon": "person",
+          "target": "#"
+        },
+        {
+          "label": "Book a meeting",
+          "icon": "date",
+          "target": "#"
+        }
+      ],
+      "image": {
+        "padding": false,
+        "src": "img/contact-person.png"
+      },
+      "order": {
+        "mobileImageLast": false,
+        "desktopImageLast": false
+      },
+      "textAlign": "left",
+      "contentAlign": "center",
+      "text": "Our modular design approach allows for flexibility and scalability in your application's architecture.",
+      "width": "wide"
+    },
+    "screenshot": "img/screenshots/components-cta--contact-banner.png"
+  },
+  {
+    "id": "components-cta--split-banner",
+    "group": "Components/CTA",
+    "name": "SplitBanner",
+    "code": "<Cta\n  backgroundColor=\"#001856\"\n  buttons={[\n    {\n      icon: 'person',\n      label: 'What can we do for you?',\n      target: '#'\n    }\n  ]}\n  colorNeutral\n  contentAlign=\"center\"\n  fullWidth\n  headline=\"Design System Services\"\n  image={{\n    padding: false,\n    src: 'img/colored-square.png'\n  }}\n  order={{\n    desktopImageLast: false,\n    mobileImageLast: false\n  }}\n  sub=\"Subheadline\"\n  text=\"Here at Systemics, we bring a range of design system services that can make a difference.\"\n  textAlign=\"left\"\n  width=\"wide\"\n/>",
+    "args": {
+      "headline": "Design System Services",
+      "sub": "Subheadline",
+      "highlightText": false,
+      "colorNeutral": true,
+      "fullWidth": true,
+      "buttons": [
+        {
+          "label": "What can we do for you?",
+          "icon": "person",
+          "target": "#"
+        }
+      ],
+      "image": {
+        "padding": false,
+        "src": "img/colored-square.png"
+      },
+      "order": {
+        "mobileImageLast": false,
+        "desktopImageLast": false
+      },
+      "textAlign": "left",
+      "contentAlign": "center",
+      "text": "Here at Systemics, we bring a range of design system services that can make a difference.",
+      "backgroundColor": "#001856",
+      "width": "wide"
+    },
+    "screenshot": "img/screenshots/components-cta--split-banner.png"
+  },
+  {
+    "id": "components-cta--angled-image",
+    "group": "Components/CTA",
+    "name": "AngledImage",
+    "code": "<Cta\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Contact us',\n      target: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Book a meeting',\n      target: '#'\n    }\n  ]}\n  contentAlign=\"center\"\n  fullWidth\n  headline=\"Our **Approach** to Design Systems\"\n  image={{\n    padding: false,\n    src: 'img/angled-image.png'\n  }}\n  order={{\n    desktopImageLast: true,\n    mobileImageLast: false\n  }}\n  sub=\"Subheadline\"\n  text=\"We value efficiency without compromising quality. Our secret weapon? kickstartDS, a revolutionary code-first and open source framework for creating design systems.\n\nThis tool accelerates our development, saving you valuable time and helping us deliver top-notch results faster.\"\n  textAlign=\"left\"\n  width=\"wide\"\n/>",
+    "args": {
+      "headline": "Our **Approach** to Design Systems",
+      "sub": "Subheadline",
+      "highlightText": false,
+      "colorNeutral": false,
+      "fullWidth": true,
+      "buttons": [
+        {
+          "label": "Contact us",
+          "icon": "person",
+          "target": "#"
+        },
+        {
+          "label": "Book a meeting",
+          "icon": "date",
+          "target": "#"
+        }
+      ],
+      "image": {
+        "padding": false,
+        "src": "img/angled-image.png"
+      },
+      "order": {
+        "mobileImageLast": false,
+        "desktopImageLast": true
+      },
+      "textAlign": "left",
+      "contentAlign": "center",
+      "text": "We value efficiency without compromising quality. Our secret weapon? kickstartDS, a revolutionary code-first and open source framework for creating design systems.\n\nThis tool accelerates our development, saving you valuable time and helping us deliver top-notch results faster.",
+      "width": "wide"
+    },
+    "screenshot": "img/screenshots/components-cta--angled-image.png"
+  },
+  {
+    "id": "components-cta--colored-banner",
+    "group": "Components/CTA",
+    "name": "ColoredBanner",
+    "code": "<Cta\n  backgroundColor=\"#a30051\"\n  buttons={[\n    {\n      label: 'Learn More',\n      target: '#'\n    },\n    {\n      label: 'Contact Us',\n      target: '#'\n    }\n  ]}\n  colorNeutral\n  contentAlign=\"center\"\n  headline=\"Expertise in Scalable Solutions\"\n  highlightText\n  image={{\n    padding: true\n  }}\n  order={{\n    desktopImageLast: true,\n    mobileImageLast: false\n  }}\n  sub=\"Subheadline\"\n  text=\"Leverage our expertise in creating scalable and robust applications using modern technologies.\"\n  textAlign=\"left\"\n/>",
+    "args": {
+      "headline": "Expertise in Scalable Solutions",
+      "sub": "Subheadline",
+      "highlightText": true,
+      "colorNeutral": true,
+      "fullWidth": false,
+      "buttons": [
+        {
+          "label": "Learn More",
+          "target": "#"
+        },
+        {
+          "label": "Contact Us",
+          "target": "#"
+        }
+      ],
+      "image": {
+        "padding": true
+      },
+      "order": {
+        "mobileImageLast": false,
+        "desktopImageLast": true
+      },
+      "textAlign": "left",
+      "contentAlign": "center",
+      "text": "Leverage our expertise in creating scalable and robust applications using modern technologies.",
+      "backgroundColor": "#a30051"
+    },
+    "screenshot": "img/screenshots/components-cta--colored-banner.png"
+  },
+  {
+    "id": "components-cta--align-bottom",
+    "group": "Components/CTA",
+    "name": "AlignBottom",
+    "code": "<Cta\n  backgroundImage=\"img/grid-bg.svg\"\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Contact us',\n      target: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Book a meeting',\n      target: '#'\n    }\n  ]}\n  contentAlign=\"bottom\"\n  fullWidth\n  headline=\"Custom Solutions\"\n  image={{\n    padding: true,\n    src: 'img/offset-image.png'\n  }}\n  order={{\n    desktopImageLast: false,\n    mobileImageLast: false\n  }}\n  sub=\"Subheadline\"\n  text=\"At Systemics, we believe in the power of technology to transform businesses. Our team of experienced professionals is dedicated to providing innovative solutions that meet the unique needs of your business.\n\nWe understand that every business is different, and that's why we offer custom solutions tailored to your specific business needs and requirements.\"\n  textAlign=\"left\"\n  width=\"wide\"\n/>",
+    "args": {
+      "headline": "Custom Solutions",
+      "sub": "Subheadline",
+      "highlightText": false,
+      "colorNeutral": false,
+      "fullWidth": true,
+      "buttons": [
+        {
+          "label": "Contact us",
+          "icon": "person",
+          "target": "#"
+        },
+        {
+          "label": "Book a meeting",
+          "icon": "date",
+          "target": "#"
+        }
+      ],
+      "image": {
+        "padding": true,
+        "src": "img/offset-image.png"
+      },
+      "order": {
+        "mobileImageLast": false,
+        "desktopImageLast": false
+      },
+      "textAlign": "left",
+      "contentAlign": "bottom",
+      "text": "At Systemics, we believe in the power of technology to transform businesses. Our team of experienced professionals is dedicated to providing innovative solutions that meet the unique needs of your business.\n\nWe understand that every business is different, and that's why we offer custom solutions tailored to your specific business needs and requirements.",
+      "backgroundImage": "img/grid-bg.svg",
+      "width": "wide"
+    },
+    "screenshot": "img/screenshots/components-cta--align-bottom.png"
+  },
+  {
+    "id": "components-faq--dropdown-list",
+    "group": "Components/Faq",
+    "name": "DropdownList",
+    "code": "<No Display Name\n  questions={[\n    {\n      answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.',\n      question: 'What are the benefits of investing in a Design System?'\n    },\n    {\n      answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.',\n      question: 'What is a Design System?'\n    },\n    {\n      answer: 'A Headless CMS plays a crucial role in a Design System by providing a content-first approach. It separates the back-end content from the front-end presentation layer, allowing for seamless integration with any design system. This results in a flexible, scalable, and platform-agnostic system that ensures content consistency across all platforms and devices.',\n      question: 'What is the role of a Headless CMS in a Design System?'\n    }\n  ]}\n />",
+    "args": {
+      "questions": [
+        {
+          "question": "What are the benefits of investing in a Design System?",
+          "answer": "Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture."
+        },
+        {
+          "question": "What is a Design System?",
+          "answer": "Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture."
+        },
+        {
+          "question": "What is the role of a Headless CMS in a Design System?",
+          "answer": "A Headless CMS plays a crucial role in a Design System by providing a content-first approach. It separates the back-end content from the front-end presentation layer, allowing for seamless integration with any design system. This results in a flexible, scalable, and platform-agnostic system that ensures content consistency across all platforms and devices."
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-faq--dropdown-list.png"
+  },
+  {
+    "id": "components-faq--single-dropdown",
+    "group": "Components/Faq",
+    "name": "SingleDropdown",
+    "code": "<No Display Name\n  questions={[\n    {\n      answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.',\n      question: 'What is a Design System?'\n    }\n  ]}\n />",
+    "args": {
+      "questions": [
+        {
+          "question": "What is a Design System?",
+          "answer": "Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture."
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-faq--single-dropdown.png"
+  },
+  {
+    "id": "components-features--icon-centered",
+    "group": "Components/Features",
+    "name": "IconCentered",
+    "code": "<No Display Name\n  ctas={{\n    style: 'link',\n    toggle: true\n  }}\n  feature={[\n    {\n      cta: {\n        label: 'Learn more',\n        style: 'link',\n        target: '/feature1',\n        toggle: true\n      },\n      icon: 'home',\n      style: 'stack',\n      text: 'Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.',\n      title: 'Scalable Architecture'\n    },\n    {\n      cta: {\n        label: 'Get started',\n        style: 'link',\n        target: '/feature2',\n        toggle: true\n      },\n      icon: 'map',\n      style: 'stack',\n      text: 'Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.',\n      title: 'Efficient Development'\n    },\n    {\n      cta: {\n        label: 'Explore',\n        style: 'link',\n        target: '/feature3',\n        toggle: true\n      },\n      icon: 'person',\n      style: 'stack',\n      text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n      title: 'Consistent UI'\n    },\n    {\n      cta: {\n        label: 'Customize',\n        style: 'link',\n        target: '/feature4',\n        toggle: true\n      },\n      icon: 'star',\n      style: 'stack',\n      text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n      title: 'Customizable Design'\n    },\n    {\n      cta: {\n        label: 'Deploy',\n        style: 'link',\n        target: '/feature5',\n        toggle: true\n      },\n      icon: 'upload',\n      style: 'stack',\n      text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n      title: 'Cloud Ready'\n    },\n    {\n      cta: {\n        label: 'Secure',\n        style: 'link',\n        target: '/feature6',\n        toggle: true\n      },\n      icon: 'login',\n      style: 'stack',\n      text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n      title: 'Secure'\n    }\n  ]}\n  layout=\"largeTiles\"\n  style=\"centered\"\n/>",
+    "args": {
+      "layout": "largeTiles",
+      "style": "centered",
+      "ctas": {
+        "toggle": true,
+        "style": "link"
+      },
+      "feature": [
+        {
+          "icon": "home",
+          "title": "Scalable Architecture",
+          "text": "Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature1",
+            "label": "Learn more",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "map",
+          "title": "Efficient Development",
+          "text": "Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature2",
+            "label": "Get started",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "person",
+          "title": "Consistent UI",
+          "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature3",
+            "label": "Explore",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "star",
+          "title": "Customizable Design",
+          "text": "Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature4",
+            "label": "Customize",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "upload",
+          "title": "Cloud Ready",
+          "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature5",
+            "label": "Deploy",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "login",
+          "title": "Secure",
+          "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature6",
+            "label": "Secure",
+            "toggle": true,
+            "style": "link"
+          }
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-features--icon-centered.png"
+  },
+  {
+    "id": "components-features--stack-with-button",
+    "group": "Components/Features",
+    "name": "StackWithButton",
+    "code": "<No Display Name\n  ctas={{\n    style: 'button',\n    toggle: true\n  }}\n  feature={[\n    {\n      cta: {\n        label: 'Explore',\n        style: 'link',\n        target: '/feature3',\n        toggle: true\n      },\n      icon: 'person',\n      style: 'stack',\n      text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n      title: 'Consistent UI'\n    },\n    {\n      cta: {\n        label: 'Customize',\n        style: 'link',\n        target: '/feature4',\n        toggle: true\n      },\n      icon: 'star',\n      style: 'stack',\n      text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n      title: 'Customizable Design'\n    },\n    {\n      cta: {\n        label: 'Deploy',\n        style: 'link',\n        target: '/feature5',\n        toggle: true\n      },\n      icon: 'upload',\n      style: 'stack',\n      text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n      title: 'Cloud Ready'\n    },\n    {\n      cta: {\n        label: 'Secure',\n        style: 'link',\n        target: '/feature6',\n        toggle: true\n      },\n      icon: 'login',\n      style: 'stack',\n      text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n      title: 'Secure'\n    }\n  ]}\n  layout=\"smallTiles\"\n  style=\"stack\"\n/>",
+    "args": {
+      "layout": "smallTiles",
+      "style": "stack",
+      "ctas": {
+        "toggle": true,
+        "style": "button"
+      },
+      "feature": [
+        {
+          "icon": "person",
+          "title": "Consistent UI",
+          "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature3",
+            "label": "Explore",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "star",
+          "title": "Customizable Design",
+          "text": "Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature4",
+            "label": "Customize",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "upload",
+          "title": "Cloud Ready",
+          "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature5",
+            "label": "Deploy",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "login",
+          "title": "Secure",
+          "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature6",
+            "label": "Secure",
+            "toggle": true,
+            "style": "link"
+          }
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-features--stack-with-button.png"
+  },
+  {
+    "id": "components-features--list-view",
+    "group": "Components/Features",
+    "name": "ListView",
+    "code": "<No Display Name\n  ctas={{\n    style: 'intext',\n    toggle: false\n  }}\n  feature={[\n    {\n      cta: {\n        label: 'Customize',\n        style: 'link',\n        target: '/feature4',\n        toggle: true\n      },\n      icon: 'star',\n      style: 'stack',\n      text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n      title: 'Customizable Design'\n    },\n    {\n      cta: {\n        label: 'Get started',\n        style: 'link',\n        target: '/feature2',\n        toggle: true\n      },\n      icon: 'map',\n      style: 'stack',\n      text: 'Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.',\n      title: 'Efficient Development'\n    },\n    {\n      cta: {\n        label: 'Explore',\n        style: 'link',\n        target: '/feature3',\n        toggle: true\n      },\n      icon: 'person',\n      style: 'stack',\n      text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n      title: 'Consistent UI'\n    },\n    {\n      cta: {\n        label: 'Learn more',\n        style: 'link',\n        target: '/feature1',\n        toggle: true\n      },\n      icon: 'home',\n      style: 'stack',\n      text: 'Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.',\n      title: 'Scalable Architecture'\n    },\n    {\n      cta: {\n        label: 'Deploy',\n        style: 'link',\n        target: '/feature5',\n        toggle: true\n      },\n      icon: 'upload',\n      style: 'stack',\n      text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n      title: 'Cloud Ready'\n    },\n    {\n      cta: {\n        label: 'Secure',\n        style: 'link',\n        target: '/feature6',\n        toggle: true\n      },\n      icon: 'login',\n      style: 'stack',\n      text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n      title: 'Secure'\n    }\n  ]}\n  layout=\"list\"\n  style=\"besideLarge\"\n/>",
+    "args": {
+      "layout": "list",
+      "style": "besideLarge",
+      "ctas": {
+        "toggle": false,
+        "style": "intext"
+      },
+      "feature": [
+        {
+          "icon": "star",
+          "title": "Customizable Design",
+          "text": "Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature4",
+            "label": "Customize",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "map",
+          "title": "Efficient Development",
+          "text": "Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature2",
+            "label": "Get started",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "person",
+          "title": "Consistent UI",
+          "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature3",
+            "label": "Explore",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "home",
+          "title": "Scalable Architecture",
+          "text": "Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature1",
+            "label": "Learn more",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "upload",
+          "title": "Cloud Ready",
+          "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature5",
+            "label": "Deploy",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "login",
+          "title": "Secure",
+          "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature6",
+            "label": "Secure",
+            "toggle": true,
+            "style": "link"
+          }
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-features--list-view.png"
+  },
+  {
+    "id": "components-features--icon-beside-with-link-in-text",
+    "group": "Components/Features",
+    "name": "IconBesideWithLinkInText",
+    "code": "<No Display Name\n  ctas={{\n    style: 'intext',\n    toggle: true\n  }}\n  feature={[\n    {\n      cta: {\n        label: 'Learn more',\n        style: 'link',\n        target: '/feature1',\n        toggle: true\n      },\n      icon: 'home',\n      style: 'stack',\n      text: 'Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.',\n      title: 'Scalable Architecture'\n    },\n    {\n      cta: {\n        label: 'Get started',\n        style: 'link',\n        target: '/feature2',\n        toggle: true\n      },\n      icon: 'map',\n      style: 'stack',\n      text: 'Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.',\n      title: 'Efficient Development'\n    },\n    {\n      cta: {\n        label: 'Explore',\n        style: 'link',\n        target: '/feature3',\n        toggle: true\n      },\n      icon: 'person',\n      style: 'stack',\n      text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n      title: 'Consistent UI'\n    },\n    {\n      cta: {\n        label: 'Customize',\n        style: 'link',\n        target: '/feature4',\n        toggle: true\n      },\n      icon: 'star',\n      style: 'stack',\n      text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n      title: 'Customizable Design'\n    },\n    {\n      cta: {\n        label: 'Deploy',\n        style: 'link',\n        target: '/feature5',\n        toggle: true\n      },\n      icon: 'upload',\n      style: 'stack',\n      text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n      title: 'Cloud Ready'\n    },\n    {\n      cta: {\n        label: 'Secure',\n        style: 'link',\n        target: '/feature6',\n        toggle: true\n      },\n      icon: 'login',\n      style: 'stack',\n      text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n      title: 'Secure'\n    }\n  ]}\n  layout=\"smallTiles\"\n  style=\"intext\"\n/>",
+    "args": {
+      "layout": "smallTiles",
+      "style": "intext",
+      "ctas": {
+        "toggle": true,
+        "style": "intext"
+      },
+      "feature": [
+        {
+          "icon": "home",
+          "title": "Scalable Architecture",
+          "text": "Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature1",
+            "label": "Learn more",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "map",
+          "title": "Efficient Development",
+          "text": "Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature2",
+            "label": "Get started",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "person",
+          "title": "Consistent UI",
+          "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature3",
+            "label": "Explore",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "star",
+          "title": "Customizable Design",
+          "text": "Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature4",
+            "label": "Customize",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "upload",
+          "title": "Cloud Ready",
+          "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature5",
+            "label": "Deploy",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "login",
+          "title": "Secure",
+          "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature6",
+            "label": "Secure",
+            "toggle": true,
+            "style": "link"
+          }
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-features--icon-beside-with-link-in-text.png"
+  },
+  {
+    "id": "components-features--icon-intext-with-link",
+    "group": "Components/Features",
+    "name": "IconIntextWithLink",
+    "code": "<No Display Name\n  ctas={{\n    style: 'link',\n    toggle: true\n  }}\n  feature={[\n    {\n      cta: {\n        label: 'Customize',\n        style: 'link',\n        target: '/feature4',\n        toggle: true\n      },\n      icon: 'star',\n      style: 'stack',\n      text: 'Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.',\n      title: 'Customizable Design'\n    },\n    {\n      cta: {\n        label: 'Get started',\n        style: 'link',\n        target: '/feature2',\n        toggle: true\n      },\n      icon: 'map',\n      style: 'stack',\n      text: 'Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.',\n      title: 'Efficient Development'\n    },\n    {\n      cta: {\n        label: 'Explore',\n        style: 'link',\n        target: '/feature3',\n        toggle: true\n      },\n      icon: 'person',\n      style: 'stack',\n      text: 'Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.',\n      title: 'Consistent UI'\n    },\n    {\n      cta: {\n        label: 'Deploy',\n        style: 'link',\n        target: '/feature5',\n        toggle: true\n      },\n      icon: 'upload',\n      style: 'stack',\n      text: 'Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.',\n      title: 'Cloud Ready'\n    },\n    {\n      cta: {\n        label: 'Secure',\n        style: 'link',\n        target: '/feature6',\n        toggle: true\n      },\n      icon: 'login',\n      style: 'stack',\n      text: 'Security is our priority. Our design system is built with best security practices to keep your application safe.',\n      title: 'Secure'\n    }\n  ]}\n  layout=\"largeTiles\"\n  style=\"intext\"\n/>",
+    "args": {
+      "layout": "largeTiles",
+      "style": "intext",
+      "ctas": {
+        "toggle": true,
+        "style": "link"
+      },
+      "feature": [
+        {
+          "icon": "star",
+          "title": "Customizable Design",
+          "text": "Our design system is fully customizable, allowing you to tailor the look and feel of your application to match your brand identity.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature4",
+            "label": "Customize",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "map",
+          "title": "Efficient Development",
+          "text": "Experience efficient development like never before. Our design system streamlines the development process, saving you time and resources.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature2",
+            "label": "Get started",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "person",
+          "title": "Consistent UI",
+          "text": "Achieve a consistent UI across different platforms. Our design system ensures your applications maintain a uniform look and feel.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature3",
+            "label": "Explore",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "upload",
+          "title": "Cloud Ready",
+          "text": "Built with modern cloud architectures in mind, our design system is ready to be deployed on any cloud platform.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature5",
+            "label": "Deploy",
+            "toggle": true,
+            "style": "link"
+          }
+        },
+        {
+          "icon": "login",
+          "title": "Secure",
+          "text": "Security is our priority. Our design system is built with best security practices to keep your application safe.",
+          "style": "stack",
+          "cta": {
+            "target": "/feature6",
+            "label": "Secure",
+            "toggle": true,
+            "style": "link"
+          }
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-features--icon-intext-with-link.png"
+  },
+  {
+    "id": "layout-footer--footer",
+    "group": "Layout/Footer",
+    "name": "Footer",
+    "code": "<Footer\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    lazy: false,\n    src: '/logo.svg',\n    width: 176\n  }}\n  logoHref=\"/\"\n  navItems={[\n    {\n      href: '#privacy-policy',\n      label: 'Privacy policy'\n    },\n    {\n      href: '#changelog',\n      label: 'Changelog'\n    },\n    {\n      href: 'https://main--64f08cbba622af835d382b4f.chromatic.com/',\n      label: 'Storybook',\n      target: '_blank'\n    }\n  ]}\n/>",
+    "args": {
+      "logo": {
+        "src": "/logo.svg",
+        "alt": "Systemics Logo",
+        "width": 176,
+        "height": 40,
+        "lazy": false
+      },
+      "logoHref": "/",
+      "navItems": [
+        {
+          "href": "#privacy-policy",
+          "label": "Privacy policy"
+        },
+        {
+          "href": "#changelog",
+          "label": "Changelog"
+        },
+        {
+          "href": "https://main--64f08cbba622af835d382b4f.chromatic.com/",
+          "label": "Storybook",
+          "target": "_blank"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/layout-footer--footer.png"
+  },
+  {
+    "id": "components-gallery--small-squares-with-lightbox",
+    "group": "Components/Gallery",
+    "name": "SmallSquaresWithLightbox",
+    "code": "<No Display Name\n  aspectRatio=\"square\"\n  images={[\n    {\n      alt: 'Alt text Image 1',\n      caption: 'Caption Image 1',\n      src: 'img/close-up-young-business-team-working.png'\n    },\n    {\n      alt: 'Alt text Image 2',\n      caption: 'Caption Image 2',\n      src: 'img/low-angle-tall-building-with-many-windows_23-2148230392.png'\n    },\n    {\n      alt: 'Alt text Image 3',\n      caption: 'Caption Image 3',\n      src: 'img/full-shot-different-people-working-together.png'\n    },\n    {\n      alt: 'Alt text Image 4',\n      caption: 'Caption Image 4',\n      src: 'img/top-view-desk-with-keyboard-drawing-pad.png'\n    },\n    {\n      alt: 'Alt text Image 5',\n      caption: 'Caption Image 5',\n      src: 'img/people-brainstorming-work-meeting.png'\n    },\n    {\n      alt: 'Alt text Image 6',\n      caption: 'Caption Image 6',\n      src: 'img/view-modern-office.jpg'\n    },\n    {\n      alt: 'Alt text Image 7',\n      caption: 'Caption Image 7',\n      src: 'img/colleagues-work-office-using-computers-looking-aside.png'\n    }\n  ]}\n  layout=\"smallTiles\"\n  lightbox\n/>",
+    "args": {
+      "images": [
+        {
+          "src": "img/close-up-young-business-team-working.png",
+          "alt": "Alt text Image 1",
+          "caption": "Caption Image 1"
+        },
+        {
+          "src": "img/low-angle-tall-building-with-many-windows_23-2148230392.png",
+          "alt": "Alt text Image 2",
+          "caption": "Caption Image 2"
+        },
+        {
+          "src": "img/full-shot-different-people-working-together.png",
+          "alt": "Alt text Image 3",
+          "caption": "Caption Image 3"
+        },
+        {
+          "src": "img/top-view-desk-with-keyboard-drawing-pad.png",
+          "alt": "Alt text Image 4",
+          "caption": "Caption Image 4"
+        },
+        {
+          "src": "img/people-brainstorming-work-meeting.png",
+          "alt": "Alt text Image 5",
+          "caption": "Caption Image 5"
+        },
+        {
+          "src": "img/view-modern-office.jpg",
+          "alt": "Alt text Image 6",
+          "caption": "Caption Image 6"
+        },
+        {
+          "src": "img/colleagues-work-office-using-computers-looking-aside.png",
+          "alt": "Alt text Image 7",
+          "caption": "Caption Image 7"
+        }
+      ],
+      "aspectRatio": "square",
+      "lightbox": true,
+      "layout": "smallTiles"
+    },
+    "screenshot": "img/screenshots/components-gallery--small-squares-with-lightbox.png"
+  },
+  {
+    "id": "components-gallery--large-landscape-tiles",
+    "group": "Components/Gallery",
+    "name": "LargeLandscapeTiles",
+    "code": "<No Display Name\n  aspectRatio=\"landscape\"\n  images={[\n    {\n      alt: 'Alt text Image 1',\n      caption: 'Caption Image 1',\n      src: 'img/close-up-young-business-team-working.png'\n    },\n    {\n      alt: 'Alt text Image 2',\n      caption: 'Caption Image 2',\n      src: 'img/low-angle-tall-building-with-many-windows_23-2148230392.png'\n    },\n    {\n      alt: 'Alt text Image 3',\n      caption: 'Caption Image 3',\n      src: 'img/full-shot-different-people-working-together.png'\n    },\n    {\n      alt: 'Alt text Image 4',\n      caption: 'Caption Image 4',\n      src: 'img/top-view-desk-with-keyboard-drawing-pad.png'\n    },\n    {\n      alt: 'Alt text Image 5',\n      caption: 'Caption Image 5',\n      src: 'img/people-brainstorming-work-meeting.png'\n    },\n    {\n      alt: 'Alt text Image 6',\n      caption: 'Caption Image 6',\n      src: 'img/view-modern-office.jpg'\n    }\n  ]}\n  layout=\"largeTiles\"\n/>",
+    "args": {
+      "images": [
+        {
+          "src": "img/close-up-young-business-team-working.png",
+          "alt": "Alt text Image 1",
+          "caption": "Caption Image 1"
+        },
+        {
+          "src": "img/low-angle-tall-building-with-many-windows_23-2148230392.png",
+          "alt": "Alt text Image 2",
+          "caption": "Caption Image 2"
+        },
+        {
+          "src": "img/full-shot-different-people-working-together.png",
+          "alt": "Alt text Image 3",
+          "caption": "Caption Image 3"
+        },
+        {
+          "src": "img/top-view-desk-with-keyboard-drawing-pad.png",
+          "alt": "Alt text Image 4",
+          "caption": "Caption Image 4"
+        },
+        {
+          "src": "img/people-brainstorming-work-meeting.png",
+          "alt": "Alt text Image 5",
+          "caption": "Caption Image 5"
+        },
+        {
+          "src": "img/view-modern-office.jpg",
+          "alt": "Alt text Image 6",
+          "caption": "Caption Image 6"
+        }
+      ],
+      "aspectRatio": "landscape",
+      "lightbox": false,
+      "layout": "largeTiles"
+    },
+    "screenshot": "img/screenshots/components-gallery--large-landscape-tiles.png"
+  },
+  {
+    "id": "components-gallery--free-aspect-ratio",
+    "group": "Components/Gallery",
+    "name": "FreeAspectRatio",
+    "code": "<No Display Name\n  aspectRatio=\"unset\"\n  images={[\n    {\n      alt: 'Alt text Image 1',\n      caption: 'Caption Image 1',\n      src: 'img/close-up-young-business-team-working.png'\n    },\n    {\n      alt: 'Alt text Image 2',\n      caption: 'Caption Image 2',\n      src: 'img/low-angle-tall-building-with-many-windows_23-2148230392.png'\n    },\n    {\n      alt: 'Alt text Image 3',\n      caption: 'Caption Image 3',\n      src: 'img/full-shot-different-people-working-together.png'\n    },\n    {\n      alt: 'Alt text Image 4',\n      caption: 'Caption Image 4',\n      src: 'img/top-view-desk-with-keyboard-drawing-pad.png'\n    },\n    {\n      alt: 'Alt text Image 5',\n      caption: 'Caption Image 5',\n      src: 'img/people-brainstorming-work-meeting.png'\n    },\n    {\n      alt: 'Alt text Image 6',\n      caption: 'Caption Image 6',\n      src: 'img/view-modern-office.jpg'\n    },\n    {\n      alt: 'Alt text Image 7',\n      caption: 'Caption Image 7',\n      src: 'img/colleagues-work-office-using-computers-looking-aside.png'\n    }\n  ]}\n  layout=\"smallTiles\"\n  lightbox\n/>",
+    "args": {
+      "images": [
+        {
+          "src": "img/close-up-young-business-team-working.png",
+          "alt": "Alt text Image 1",
+          "caption": "Caption Image 1"
+        },
+        {
+          "src": "img/low-angle-tall-building-with-many-windows_23-2148230392.png",
+          "alt": "Alt text Image 2",
+          "caption": "Caption Image 2"
+        },
+        {
+          "src": "img/full-shot-different-people-working-together.png",
+          "alt": "Alt text Image 3",
+          "caption": "Caption Image 3"
+        },
+        {
+          "src": "img/top-view-desk-with-keyboard-drawing-pad.png",
+          "alt": "Alt text Image 4",
+          "caption": "Caption Image 4"
+        },
+        {
+          "src": "img/people-brainstorming-work-meeting.png",
+          "alt": "Alt text Image 5",
+          "caption": "Caption Image 5"
+        },
+        {
+          "src": "img/view-modern-office.jpg",
+          "alt": "Alt text Image 6",
+          "caption": "Caption Image 6"
+        },
+        {
+          "src": "img/colleagues-work-office-using-computers-looking-aside.png",
+          "alt": "Alt text Image 7",
+          "caption": "Caption Image 7"
+        }
+      ],
+      "aspectRatio": "unset",
+      "lightbox": true,
+      "layout": "smallTiles"
+    },
+    "screenshot": "img/screenshots/components-gallery--free-aspect-ratio.png"
+  },
+  {
+    "id": "components-gallery--stack-landscape",
+    "group": "Components/Gallery",
+    "name": "StackLandscape",
+    "code": "<No Display Name\n  aspectRatio=\"landscape\"\n  images={[\n    {\n      alt: 'Alt text Image 1',\n      caption: 'Caption Image 1',\n      src: 'img/close-up-young-business-team-working.png'\n    },\n    {\n      alt: 'Alt text Image 2',\n      caption: 'Caption Image 2',\n      src: 'img/top-view-desk-with-keyboard-drawing-pad.png'\n    },\n    {\n      alt: 'Alt text Image 3',\n      caption: 'Caption Image 3',\n      src: 'img/people-brainstorming-work-meeting.png'\n    }\n  ]}\n  layout=\"stack\"\n/>",
+    "args": {
+      "images": [
+        {
+          "src": "img/close-up-young-business-team-working.png",
+          "alt": "Alt text Image 1",
+          "caption": "Caption Image 1"
+        },
+        {
+          "src": "img/top-view-desk-with-keyboard-drawing-pad.png",
+          "alt": "Alt text Image 2",
+          "caption": "Caption Image 2"
+        },
+        {
+          "src": "img/people-brainstorming-work-meeting.png",
+          "alt": "Alt text Image 3",
+          "caption": "Caption Image 3"
+        }
+      ],
+      "aspectRatio": "landscape",
+      "lightbox": false,
+      "layout": "stack"
+    },
+    "screenshot": "img/screenshots/components-gallery--stack-landscape.png"
+  },
+  {
+    "id": "layout-header--header",
+    "group": "Layout/Header",
+    "name": "Header",
+    "code": "<Header\n  logo={{\n    alt: 'Systemics Logo',\n    height: 40,\n    lazy: false,\n    src: '/logo.svg',\n    width: 176\n  }}\n  logoHref=\"/\"\n  navItems={[\n    {\n      href: '#',\n      label: 'Nav Item'\n    },\n    {\n      active: true,\n      href: '#',\n      label: 'Active Item'\n    },\n    {\n      href: '#',\n      label: 'Another Item'\n    },\n    {\n      href: '#',\n      label: 'One more Item'\n    },\n    {\n      href: '#',\n      label: 'Last Item'\n    }\n  ]}\n/>",
+    "args": {
+      "logo": {
+        "src": "/logo.svg",
+        "alt": "Systemics Logo",
+        "width": 176,
+        "height": 40,
+        "lazy": false
+      },
+      "logoHref": "/",
+      "floating": false,
+      "navItems": [
+        {
+          "href": "#",
+          "label": "Nav Item"
+        },
+        {
+          "href": "#",
+          "label": "Active Item",
+          "active": true
+        },
+        {
+          "href": "#",
+          "label": "Another Item"
+        },
+        {
+          "href": "#",
+          "label": "One more Item"
+        },
+        {
+          "href": "#",
+          "label": "Last Item"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/layout-header--header.png"
+  },
+  {
+    "id": "components-headline--h-1",
+    "group": "Components/Headline",
+    "name": "H1",
+    "code": "<Headline\n  level=\"h1\"\n  spaceAfter=\"small\"\n  style=\"h1\"\n  text=\"Design System Services\"\n/>",
+    "args": {
+      "switchOrder": false,
+      "level": "h1",
+      "style": "h1",
+      "spaceAfter": "small",
+      "text": "Design System Services"
+    },
+    "screenshot": "img/screenshots/components-headline--h-1.png"
+  },
+  {
+    "id": "components-headline--h-2",
+    "group": "Components/Headline",
+    "name": "H2",
+    "code": "<Headline\n  level=\"h2\"\n  spaceAfter=\"small\"\n  style=\"h2\"\n  text=\"Design System Services\"\n/>",
+    "args": {
+      "switchOrder": false,
+      "level": "h2",
+      "style": "h2",
+      "spaceAfter": "small",
+      "text": "Design System Services"
+    },
+    "screenshot": "img/screenshots/components-headline--h-2.png"
+  },
+  {
+    "id": "components-headline--h-3",
+    "group": "Components/Headline",
+    "name": "H3",
+    "code": "<Headline\n  level=\"h3\"\n  spaceAfter=\"small\"\n  style=\"h3\"\n  text=\"Design System Services\"\n/>",
+    "args": {
+      "switchOrder": false,
+      "level": "h3",
+      "style": "h3",
+      "spaceAfter": "small",
+      "text": "Design System Services"
+    },
+    "screenshot": "img/screenshots/components-headline--h-3.png"
+  },
+  {
+    "id": "components-headline--h-4",
+    "group": "Components/Headline",
+    "name": "H4",
+    "code": "<Headline\n  level=\"h4\"\n  spaceAfter=\"small\"\n  style=\"h4\"\n  text=\"Design System Services\"\n/>",
+    "args": {
+      "switchOrder": false,
+      "level": "h4",
+      "style": "h4",
+      "spaceAfter": "small",
+      "text": "Design System Services"
+    },
+    "screenshot": "img/screenshots/components-headline--h-4.png"
+  },
+  {
+    "id": "components-headline--with-subheadline",
+    "group": "Components/Headline",
+    "name": "WithSubheadline",
+    "code": "<Headline\n  level=\"h2\"\n  spaceAfter=\"small\"\n  style=\"h2\"\n  sub=\"Crafting Consistency, Fostering Growth\"\n  text=\"Design System Services\"\n/>",
+    "args": {
+      "switchOrder": false,
+      "level": "h2",
+      "style": "h2",
+      "spaceAfter": "small",
+      "text": "Design System Services",
+      "sub": "Crafting Consistency, Fostering Growth"
+    },
+    "screenshot": "img/screenshots/components-headline--with-subheadline.png"
+  },
+  {
+    "id": "components-headline--order-swapped",
+    "group": "Components/Headline",
+    "name": "OrderSwapped",
+    "code": "<Headline\n  level=\"h2\"\n  spaceAfter=\"small\"\n  style=\"h2\"\n  sub=\"Crafting Consistency, Fostering Growth\"\n  switchOrder\n  text=\"Design System Services\"\n/>",
+    "args": {
+      "switchOrder": true,
+      "level": "h2",
+      "style": "h2",
+      "spaceAfter": "small",
+      "text": "Design System Services",
+      "sub": "Crafting Consistency, Fostering Growth"
+    },
+    "screenshot": "img/screenshots/components-headline--order-swapped.png"
+  },
+  {
+    "id": "components-headline--with-markdown",
+    "group": "Components/Headline",
+    "name": "WithMarkdown",
+    "code": "<Headline\n  level=\"h2\"\n  spaceAfter=\"small\"\n  style=\"h2\"\n  sub=\"Crafting Consistency, Fostering Growth\"\n  text=\"**Design System** Services\"\n/>",
+    "args": {
+      "switchOrder": false,
+      "level": "h2",
+      "style": "h2",
+      "spaceAfter": "small",
+      "text": "**Design System** Services",
+      "sub": "Crafting Consistency, Fostering Growth"
+    },
+    "screenshot": "img/screenshots/components-headline--with-markdown.png"
+  },
+  {
+    "id": "components-hero--text-below-image",
+    "group": "Components/Hero",
+    "name": "TextBelowImage",
+    "code": "<Hero\n  buttons={[\n    {\n      icon: 'arrow-down',\n      label: 'Explore further',\n      target: '#'\n    }\n  ]}\n  headline=\"Welcome to Our Dynamic Workplace\"\n  height=\"default\"\n  highlightText\n  image={{\n    indent: 'none',\n    src: 'https://picsum.photos/seed/kdsvisual/640/270',\n    srcDesktop: 'img/colleagues-work-office-using-computers-looking-aside.png',\n    srcMobile: 'img/colleagues-work-office-using-computers-looking-aside.png',\n    srcTablet: 'img/colleagues-work-office-using-computers-looking-aside.png'\n  }}\n  overlay\n  sub=\"Where Creativity Meets Innovation\"\n  text=\"Experience the perfect blend of creativity, innovation, and productivity in our modern office environment.\"\n  textPosition=\"below\"\n/>",
+    "args": {
+      "highlightText": true,
+      "colorNeutral": false,
+      "height": "default",
+      "textbox": false,
+      "buttons": [
+        {
+          "label": "Explore further",
+          "icon": "arrow-down",
+          "target": "#"
+        }
+      ],
+      "overlay": true,
+      "image": {
+        "srcMobile": "img/colleagues-work-office-using-computers-looking-aside.png",
+        "srcTablet": "img/colleagues-work-office-using-computers-looking-aside.png",
+        "srcDesktop": "img/colleagues-work-office-using-computers-looking-aside.png",
+        "src": "https://picsum.photos/seed/kdsvisual/640/270",
+        "indent": "none"
+      },
+      "textPosition": "below",
+      "headline": "Welcome to Our Dynamic Workplace",
+      "sub": "Where Creativity Meets Innovation",
+      "text": "Experience the perfect blend of creativity, innovation, and productivity in our modern office environment."
+    },
+    "screenshot": "img/screenshots/components-hero--text-below-image.png"
+  },
+  {
+    "id": "components-hero--text-on-image-with-overlay",
+    "group": "Components/Hero",
+    "name": "TextOnImageWithOverlay",
+    "code": "<Hero\n  buttons={[\n    {\n      icon: 'person',\n      label: 'Meet Us',\n      target: '#'\n    },\n    {\n      icon: 'date',\n      label: 'Schedule a Meeting',\n      target: '#'\n    }\n  ]}\n  colorNeutral\n  headline=\"Master Scalable Solutions\"\n  height=\"fullImage\"\n  image={{\n    indent: 'none',\n    src: 'https://picsum.photos/seed/kdsvisual/640/270',\n    srcDesktop: 'img/top-view-desk-with-keyboard-drawing-pad.png',\n    srcMobile: 'img/top-view-desk-with-keyboard-drawing-pad.png',\n    srcTablet: 'img/top-view-desk-with-keyboard-drawing-pad.png'\n  }}\n  overlay\n  text=\"Harness our expertise in crafting scalable and robust applications using cutting-edge technologies.\"\n  textPosition=\"center\"\n/>",
+    "args": {
+      "highlightText": false,
+      "colorNeutral": true,
+      "height": "fullImage",
+      "textbox": false,
+      "buttons": [
+        {
+          "label": "Meet Us",
+          "icon": "person",
+          "target": "#"
+        },
+        {
+          "label": "Schedule a Meeting",
+          "icon": "date",
+          "target": "#"
+        }
+      ],
+      "overlay": true,
+      "image": {
+        "srcMobile": "img/top-view-desk-with-keyboard-drawing-pad.png",
+        "srcTablet": "img/top-view-desk-with-keyboard-drawing-pad.png",
+        "srcDesktop": "img/top-view-desk-with-keyboard-drawing-pad.png",
+        "src": "https://picsum.photos/seed/kdsvisual/640/270",
+        "indent": "none"
+      },
+      "textPosition": "center",
+      "headline": "Master Scalable Solutions",
+      "text": "Harness our expertise in crafting scalable and robust applications using cutting-edge technologies."
+    },
+    "screenshot": "img/screenshots/components-hero--text-on-image-with-overlay.png"
+  },
+  {
+    "id": "components-hero--text-box-on-full-screen",
+    "group": "Components/Hero",
+    "name": "TextBoxOnFullScreen",
+    "code": "<Hero\n  buttons={[\n    {\n      icon: 'arrow-right',\n      label: 'Discover More',\n      target: '#'\n    },\n    {\n      icon: 'phone',\n      label: 'Reach Out',\n      target: '#'\n    }\n  ]}\n  headline=\"Discover Our Design System\"\n  height=\"fullScreen\"\n  image={{\n    indent: 'none',\n    src: 'https://picsum.photos/seed/kdsvisual/640/270',\n    srcDesktop: 'img/people-brainstorming-work-meeting.png',\n    srcMobile: 'img/people-brainstorming-work-meeting.png',\n    srcTablet: 'img/people-brainstorming-work-meeting.png'\n  }}\n  sub=\"Scalable. Efficient. Seamless.\"\n  text=\"Our design system provides a seamless and efficient framework for building scalable applications. Experience unprecedented speed and scalability with our Headless CMS powered websites, web apps & composable architecture.\"\n  textPosition=\"left\"\n  textbox\n/>",
+    "args": {
+      "highlightText": false,
+      "colorNeutral": false,
+      "height": "fullScreen",
+      "textbox": true,
+      "buttons": [
+        {
+          "label": "Discover More",
+          "icon": "arrow-right",
+          "target": "#"
+        },
+        {
+          "label": "Reach Out",
+          "icon": "phone",
+          "target": "#"
+        }
+      ],
+      "overlay": false,
+      "image": {
+        "srcMobile": "img/people-brainstorming-work-meeting.png",
+        "srcTablet": "img/people-brainstorming-work-meeting.png",
+        "srcDesktop": "img/people-brainstorming-work-meeting.png",
+        "src": "https://picsum.photos/seed/kdsvisual/640/270",
+        "indent": "none"
+      },
+      "textPosition": "left",
+      "headline": "Discover Our Design System",
+      "sub": "Scalable. Efficient. Seamless.",
+      "text": "Our design system provides a seamless and efficient framework for building scalable applications. Experience unprecedented speed and scalability with our Headless CMS powered websites, web apps & composable architecture."
+    },
+    "screenshot": "img/screenshots/components-hero--text-box-on-full-screen.png"
+  },
+  {
+    "id": "components-image-story--sticky-image-next-to-scrolling-text",
+    "group": "Components/Image Story",
+    "name": "StickyImageNextToScrollingText",
+    "code": "<ImageStory\n  buttons={[\n    {\n      disabled: false,\n      label: 'Learn More',\n      size: 'medium',\n      target: '#',\n      variant: 'secondary'\n    },\n    {\n      disabled: false,\n      label: 'Contact Us',\n      size: 'medium',\n      target: '#',\n      variant: 'secondary'\n    }\n  ]}\n  headline=\"The Sanity & Next.js Experts\"\n  image={{\n    ratio: 'none',\n    src: 'img/full-shot-different-people-working-together.png'\n  }}\n  largeHeadline\n  layout=\"imageLeft\"\n  sub=\"Subheadline\"\n  text=\"\nHere at Systemics, we bring a range of design system services that can make a difference:\n\n### 1. Design System Consulting\nLet's work side by side to shape a design system strategy that aligns perfectly with your goals. It's not just about tools; it's about guiding principles, stakeholder management und making the right decisions at the right time.\n\n### 2. Design System Creation & Development\nWe'll bring your design system from concept to production, giving you consistent and engaging user experiences across different platforms. We will work together with your digital teams to transfer all complex Figma ideas into code using kickstartDS.\n\n### 3. Headless CMS & Websites\nWe leverage the power of headless CMSs to provide scalable, flexible, and versatile websites that drive your online presence.\n\n### 4. Design System Training\nWe empower your digital teams with the knowledge and skills to manage and evolve your design system effectively.\n\nReady to make your digital journey exceptional?\n    \"\n  textAlign=\"left\"\n/>",
+    "args": {
+      "headline": "The Sanity & Next.js Experts",
+      "largeHeadline": true,
+      "sub": "Subheadline",
+      "layout": "imageLeft",
+      "padding": false,
+      "buttons": [
+        {
+          "label": "Learn More",
+          "variant": "secondary",
+          "size": "medium",
+          "disabled": false,
+          "target": "#"
+        },
+        {
+          "label": "Contact Us",
+          "variant": "secondary",
+          "size": "medium",
+          "disabled": false,
+          "target": "#"
+        }
+      ],
+      "image": {
+        "ratio": "none",
+        "src": "img/full-shot-different-people-working-together.png"
+      },
+      "textAlign": "left",
+      "text": "\nHere at Systemics, we bring a range of design system services that can make a difference:\n\n### 1. Design System Consulting\nLet's work side by side to shape a design system strategy that aligns perfectly with your goals. It's not just about tools; it's about guiding principles, stakeholder management und making the right decisions at the right time.\n\n### 2. Design System Creation & Development\nWe'll bring your design system from concept to production, giving you consistent and engaging user experiences across different platforms. We will work together with your digital teams to transfer all complex Figma ideas into code using kickstartDS.\n\n### 3. Headless CMS & Websites\nWe leverage the power of headless CMSs to provide scalable, flexible, and versatile websites that drive your online presence.\n\n### 4. Design System Training\nWe empower your digital teams with the knowledge and skills to manage and evolve your design system effectively.\n\nReady to make your digital journey exceptional?\n    "
+    },
+    "screenshot": "img/screenshots/components-image-story--sticky-image-next-to-scrolling-text.png"
+  },
+  {
+    "id": "components-image-text--beside-right-layout",
+    "group": "Components/Image Text",
+    "name": "BesideRightLayout",
+    "code": "<No Display Name\n  image={{\n    alt: 'Agency',\n    src: 'img/close-up-young-business-team-working.png'\n  }}\n  layout=\"beside-right\"\n  text=\"We prioritize efficiency without sacrificing quality. Our secret? A groundbreaking, code-first, open-source framework for [building design systems](#).\n\nThis tool expedites our **development process**, saving you precious time and enabling us to deliver superior results more quickly. With this framework, your design system aspirations can be realized faster than ever before.\n\n_Experience the power of streamlined development and see the difference it can make in your projects._\"\n/>",
+    "args": {
+      "text": "We prioritize efficiency without sacrificing quality. Our secret? A groundbreaking, code-first, open-source framework for [building design systems](#).\n\nThis tool expedites our **development process**, saving you precious time and enabling us to deliver superior results more quickly. With this framework, your design system aspirations can be realized faster than ever before.\n\n_Experience the power of streamlined development and see the difference it can make in your projects._",
+      "highlightText": false,
+      "image": {
+        "src": "img/close-up-young-business-team-working.png",
+        "alt": "Agency"
+      },
+      "layout": "beside-right"
+    },
+    "screenshot": "img/screenshots/components-image-text--beside-right-layout.png"
+  },
+  {
+    "id": "components-image-text--above-layout",
+    "group": "Components/Image Text",
+    "name": "AboveLayout",
+    "code": "<No Display Name\n  image={{\n    alt: 'Agency',\n    src: 'img/close-up-young-business-team-working.png'\n  }}\n  layout=\"above\"\n  text=\"We prioritize efficiency without sacrificing quality. Our secret? A groundbreaking, code-first, open-source framework for [building design systems](#).\n\nThis tool expedites our **development process**, saving you precious time and enabling us to deliver superior results more quickly. With this framework, your design system aspirations can be realized faster than ever before.\n\n_Experience the power of streamlined development and see the difference it can make in your projects._\"\n/>",
+    "args": {
+      "text": "We prioritize efficiency without sacrificing quality. Our secret? A groundbreaking, code-first, open-source framework for [building design systems](#).\n\nThis tool expedites our **development process**, saving you precious time and enabling us to deliver superior results more quickly. With this framework, your design system aspirations can be realized faster than ever before.\n\n_Experience the power of streamlined development and see the difference it can make in your projects._",
+      "highlightText": false,
+      "image": {
+        "src": "img/close-up-young-business-team-working.png",
+        "alt": "Agency"
+      },
+      "layout": "above"
+    },
+    "screenshot": "img/screenshots/components-image-text--above-layout.png"
+  },
+  {
+    "id": "components-image--responsive-image",
+    "group": "Components/Image",
+    "name": "ResponsiveImage",
+    "code": "<Image\n  alt=\"Agency\"\n  aspectRatio=\"unset\"\n  lazy\n  sources={[\n    {\n      srcSet: 'img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png'\n    },\n    {\n      srcSet: 'img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png'\n    },\n    {\n      srcSet: 'img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png'\n    }\n  ]}\n  src=\"img/close-up-young-business-team-working.png\"\n/>",
+    "args": {
+      "src": "img/close-up-young-business-team-working.png",
+      "aspectRatio": "unset",
+      "lazy": true,
+      "alt": "Agency",
+      "sources": [
+        {
+          "srcSet": "img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png"
+        },
+        {
+          "srcSet": "img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png"
+        },
+        {
+          "srcSet": "img/responsive_image-420.png 420w, img/responsive_image-980.png 980w, img/responsive_image-1680.png"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-image--responsive-image.png"
+  },
+  {
+    "id": "components-image--preset-size",
+    "group": "Components/Image",
+    "name": "PresetSize",
+    "code": "<Image\n  alt=\"Agency\"\n  aspectRatio=\"unset\"\n  height=\"300px\"\n  lazy\n  src=\"img/close-up-young-business-team-working.png\"\n  width=\"400px\"\n/>",
+    "args": {
+      "src": "img/close-up-young-business-team-working.png",
+      "aspectRatio": "unset",
+      "lazy": true,
+      "alt": "Agency",
+      "width": "400px",
+      "height": "300px"
+    },
+    "screenshot": "img/screenshots/components-image--preset-size.png"
+  },
+  {
+    "id": "components-image--custom-aspect-ratio",
+    "group": "Components/Image",
+    "name": "CustomAspectRatio",
+    "code": "<Image\n  alt=\"Agency\"\n  aspectRatio=\"square\"\n  lazy\n  src=\"img/close-up-young-business-team-working.png\"\n/>",
+    "args": {
+      "src": "img/close-up-young-business-team-working.png",
+      "aspectRatio": "square",
+      "lazy": true,
+      "alt": "Agency"
+    },
+    "screenshot": "img/screenshots/components-image--custom-aspect-ratio.png"
+  },
+  {
+    "id": "components-logos--centered-with-button",
+    "group": "Components/Logos",
+    "name": "CenteredWithButton",
+    "code": "<Logos\n  align=\"center\"\n  cta={{\n    label: 'See all our partners',\n    link: '#',\n    style: 'button',\n    text: 'Explore the success stories of our valued customers and discover more about their journey.',\n    toggle: true\n  }}\n  items={[\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    },\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    },\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    }\n  ]}\n  logos={[\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    },\n    {\n      alt: 'Logo 2',\n      src: 'img/logos/logoipsum-217.svg'\n    },\n    {\n      alt: 'Logo 3',\n      src: 'img/logos/logoipsum-239.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-244.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-250.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-286.svg'\n    }\n  ]}\n  logosPerRow={5}\n  tagline=\"Your Success, Our Commitment\"\n/>",
+    "args": {
+      "tagline": "Your Success, Our Commitment",
+      "items": [
+        {
+          "src": "img/logos/logoipsum-212.svg",
+          "alt": "Logo 1"
+        },
+        {
+          "src": "img/logos/logoipsum-212.svg",
+          "alt": "Logo 1"
+        },
+        {
+          "src": "img/logos/logoipsum-212.svg",
+          "alt": "Logo 1"
+        }
+      ],
+      "align": "center",
+      "logosPerRow": 5,
+      "cta": {
+        "toggle": true,
+        "text": "Explore the success stories of our valued customers and discover more about their journey.",
+        "link": "#",
+        "label": "See all our partners",
+        "style": "button"
+      },
+      "logos": [
+        {
+          "src": "img/logos/logoipsum-212.svg",
+          "alt": "Logo 1"
+        },
+        {
+          "src": "img/logos/logoipsum-217.svg",
+          "alt": "Logo 2"
+        },
+        {
+          "src": "img/logos/logoipsum-239.svg",
+          "alt": "Logo 3"
+        },
+        {
+          "src": "img/logos/logoipsum-244.svg",
+          "alt": "Logo 4"
+        },
+        {
+          "src": "img/logos/logoipsum-250.svg",
+          "alt": "Logo 5"
+        },
+        {
+          "src": "img/logos/logoipsum-286.svg",
+          "alt": "Logo 6"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-logos--centered-with-button.png"
+  },
+  {
+    "id": "components-logos--left-aligned-with-text-link",
+    "group": "Components/Logos",
+    "name": "LeftAlignedWithTextLink",
+    "code": "<Logos\n  align=\"left\"\n  cta={{\n    label: 'See all our partners',\n    link: '#',\n    style: 'text',\n    text: 'Explore the success stories of our valued customers and discover more about their journey.',\n    toggle: true\n  }}\n  items={[\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    },\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    },\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    }\n  ]}\n  logos={[\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    },\n    {\n      alt: 'Logo 2',\n      src: 'img/logos/logoipsum-217.svg'\n    },\n    {\n      alt: 'Logo 3',\n      src: 'img/logos/logoipsum-239.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-244.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-250.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-286.svg'\n    }\n  ]}\n  logosPerRow={5}\n  tagline=\"Your Success, Our Commitment\"\n/>",
+    "args": {
+      "tagline": "Your Success, Our Commitment",
+      "items": [
+        {
+          "src": "img/logos/logoipsum-212.svg",
+          "alt": "Logo 1"
+        },
+        {
+          "src": "img/logos/logoipsum-212.svg",
+          "alt": "Logo 1"
+        },
+        {
+          "src": "img/logos/logoipsum-212.svg",
+          "alt": "Logo 1"
+        }
+      ],
+      "align": "left",
+      "logosPerRow": 5,
+      "cta": {
+        "toggle": true,
+        "text": "Explore the success stories of our valued customers and discover more about their journey.",
+        "link": "#",
+        "label": "See all our partners",
+        "style": "text"
+      },
+      "logos": [
+        {
+          "src": "img/logos/logoipsum-212.svg",
+          "alt": "Logo 1"
+        },
+        {
+          "src": "img/logos/logoipsum-217.svg",
+          "alt": "Logo 2"
+        },
+        {
+          "src": "img/logos/logoipsum-239.svg",
+          "alt": "Logo 3"
+        },
+        {
+          "src": "img/logos/logoipsum-244.svg",
+          "alt": "Logo 4"
+        },
+        {
+          "src": "img/logos/logoipsum-250.svg",
+          "alt": "Logo 5"
+        },
+        {
+          "src": "img/logos/logoipsum-286.svg",
+          "alt": "Logo 6"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-logos--left-aligned-with-text-link.png"
+  },
+  {
+    "id": "components-logos--logo-wall",
+    "group": "Components/Logos",
+    "name": "LogoWall",
+    "code": "<Logos\n  align=\"center\"\n  cta={{\n    label: 'See all our partners',\n    link: '#',\n    style: 'text',\n    text: 'Explore the success stories of our valued customers and discover more about their journey.',\n    toggle: false\n  }}\n  items={[\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    },\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    },\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    }\n  ]}\n  logos={[\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    },\n    {\n      alt: 'Logo 2',\n      src: 'img/logos/logoipsum-217.svg'\n    },\n    {\n      alt: 'Logo 3',\n      src: 'img/logos/logoipsum-239.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-244.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-250.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-286.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-244.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-250.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-286.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-244.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-250.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-286.svg'\n    }\n  ]}\n  logosPerRow={4}\n  tagline=\"Your Success, Our Commitment\"\n/>",
+    "args": {
+      "tagline": "Your Success, Our Commitment",
+      "items": [
+        {
+          "src": "img/logos/logoipsum-212.svg",
+          "alt": "Logo 1"
+        },
+        {
+          "src": "img/logos/logoipsum-212.svg",
+          "alt": "Logo 1"
+        },
+        {
+          "src": "img/logos/logoipsum-212.svg",
+          "alt": "Logo 1"
+        }
+      ],
+      "align": "center",
+      "logosPerRow": 4,
+      "cta": {
+        "toggle": false,
+        "text": "Explore the success stories of our valued customers and discover more about their journey.",
+        "link": "#",
+        "label": "See all our partners",
+        "style": "text"
+      },
+      "logos": [
+        {
+          "src": "img/logos/logoipsum-212.svg",
+          "alt": "Logo 1"
+        },
+        {
+          "src": "img/logos/logoipsum-217.svg",
+          "alt": "Logo 2"
+        },
+        {
+          "src": "img/logos/logoipsum-239.svg",
+          "alt": "Logo 3"
+        },
+        {
+          "src": "img/logos/logoipsum-244.svg",
+          "alt": "Logo 4"
+        },
+        {
+          "src": "img/logos/logoipsum-250.svg",
+          "alt": "Logo 5"
+        },
+        {
+          "src": "img/logos/logoipsum-286.svg",
+          "alt": "Logo 6"
+        },
+        {
+          "src": "img/logos/logoipsum-244.svg",
+          "alt": "Logo 4"
+        },
+        {
+          "src": "img/logos/logoipsum-250.svg",
+          "alt": "Logo 5"
+        },
+        {
+          "src": "img/logos/logoipsum-286.svg",
+          "alt": "Logo 6"
+        },
+        {
+          "src": "img/logos/logoipsum-244.svg",
+          "alt": "Logo 4"
+        },
+        {
+          "src": "img/logos/logoipsum-250.svg",
+          "alt": "Logo 5"
+        },
+        {
+          "src": "img/logos/logoipsum-286.svg",
+          "alt": "Logo 6"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-logos--logo-wall.png"
+  },
+  {
+    "id": "components-logos--logo-row",
+    "group": "Components/Logos",
+    "name": "LogoRow",
+    "code": "<Logos\n  align=\"center\"\n  cta={{\n    label: 'See all our partners',\n    link: '#',\n    style: 'text',\n    text: 'Explore the success stories of our valued customers and discover more about their journey.',\n    toggle: false\n  }}\n  items={[\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    },\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    },\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    }\n  ]}\n  logos={[\n    {\n      alt: 'Logo 1',\n      src: 'img/logos/logoipsum-212.svg'\n    },\n    {\n      alt: 'Logo 2',\n      src: 'img/logos/logoipsum-217.svg'\n    },\n    {\n      alt: 'Logo 3',\n      src: 'img/logos/logoipsum-239.svg'\n    },\n    {\n      alt: 'Logo 4',\n      src: 'img/logos/logoipsum-244.svg'\n    },\n    {\n      alt: 'Logo 5',\n      src: 'img/logos/logoipsum-250.svg'\n    },\n    {\n      alt: 'Logo 6',\n      src: 'img/logos/logoipsum-286.svg'\n    }\n  ]}\n  logosPerRow={6}\n  tagline=\"Your Success, Our Commitment\"\n/>",
+    "args": {
+      "tagline": "Your Success, Our Commitment",
+      "items": [
+        {
+          "src": "img/logos/logoipsum-212.svg",
+          "alt": "Logo 1"
+        },
+        {
+          "src": "img/logos/logoipsum-212.svg",
+          "alt": "Logo 1"
+        },
+        {
+          "src": "img/logos/logoipsum-212.svg",
+          "alt": "Logo 1"
+        }
+      ],
+      "align": "center",
+      "logosPerRow": 6,
+      "cta": {
+        "toggle": false,
+        "text": "Explore the success stories of our valued customers and discover more about their journey.",
+        "link": "#",
+        "label": "See all our partners",
+        "style": "text"
+      },
+      "logos": [
+        {
+          "src": "img/logos/logoipsum-212.svg",
+          "alt": "Logo 1"
+        },
+        {
+          "src": "img/logos/logoipsum-217.svg",
+          "alt": "Logo 2"
+        },
+        {
+          "src": "img/logos/logoipsum-239.svg",
+          "alt": "Logo 3"
+        },
+        {
+          "src": "img/logos/logoipsum-244.svg",
+          "alt": "Logo 4"
+        },
+        {
+          "src": "img/logos/logoipsum-250.svg",
+          "alt": "Logo 5"
+        },
+        {
+          "src": "img/logos/logoipsum-286.svg",
+          "alt": "Logo 6"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-logos--logo-row.png"
+  },
+  {
+    "id": "components-mosaic--colorful-tiles",
+    "group": "Components/Mosaic",
+    "name": "ColorfulTiles",
+    "code": "<Mosaic\n  layout=\"alternate\"\n  tiles={[\n    {\n      backgroundColor: '#81005a',\n      button: {\n        label: 'Book a meeting',\n        toggle: true\n      },\n      headline: 'Collaborative Environment',\n      image: {\n        src: 'img/mosaic-1.png'\n      },\n      text: 'Our team thrives in a collaborative environment, fostering creativity and innovation.'\n    },\n    {\n      backgroundColor: '#003380',\n      button: {\n        label: 'Book a meeting',\n        toggle: true\n      },\n      headline: 'Modern Infrastructure',\n      image: {\n        src: 'img/mosaic-2.png'\n      },\n      text: 'Our state-of-the-art office facilities inspire productivity and efficiency.'\n    },\n    {\n      backgroundColor: '#004241',\n      button: {\n        label: 'Book a meeting',\n        toggle: true\n      },\n      headline: 'Teamwork',\n      image: {\n        src: 'img/mosaic-3.png'\n      },\n      text: 'We believe in the power of teamwork. Together, we can achieve great things.'\n    }\n  ]}\n/>",
+    "args": {
+      "layout": "alternate",
+      "largeHeadlines": false,
+      "tiles": [
+        {
+          "image": {
+            "src": "img/mosaic-1.png"
+          },
+          "button": {
+            "toggle": true,
+            "label": "Book a meeting"
+          },
+          "backgroundColor": "#81005a",
+          "headline": "Collaborative Environment",
+          "text": "Our team thrives in a collaborative environment, fostering creativity and innovation."
+        },
+        {
+          "image": {
+            "src": "img/mosaic-2.png"
+          },
+          "button": {
+            "toggle": true,
+            "label": "Book a meeting"
+          },
+          "backgroundColor": "#003380",
+          "headline": "Modern Infrastructure",
+          "text": "Our state-of-the-art office facilities inspire productivity and efficiency."
+        },
+        {
+          "image": {
+            "src": "img/mosaic-3.png"
+          },
+          "button": {
+            "toggle": true,
+            "label": "Book a meeting"
+          },
+          "backgroundColor": "#004241",
+          "headline": "Teamwork",
+          "text": "We believe in the power of teamwork. Together, we can achieve great things."
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-mosaic--colorful-tiles.png"
+  },
+  {
+    "id": "components-mosaic--colorful-text-with-illustrations",
+    "group": "Components/Mosaic",
+    "name": "ColorfulTextWithIllustrations",
+    "code": "<Mosaic\n  layout=\"textLeft\"\n  tiles={[\n    {\n      button: {\n        label: 'Book a meeting',\n        toggle: false\n      },\n      headline: 'Effective Communication',\n      image: {\n        src: 'img/mosaic-2_1.svg'\n      },\n      sub: 'We believe in clear and effective communication. Our team members are always ready to share ideas and solutions.',\n      textColor: '#FCFF7D'\n    },\n    {\n      button: {\n        label: 'Book a meeting',\n        toggle: false\n      },\n      headline: 'Data-Driven Decisions',\n      image: {\n        src: 'img/mosaic-2_2.svg'\n      },\n      sub: 'We make decisions based on data. Our strategies are always backed by solid facts and figures.',\n      textColor: '#7DD0FF'\n    },\n    {\n      button: {\n        label: 'Book a meeting',\n        toggle: false\n      },\n      headline: 'Innovative Design',\n      image: {\n        src: 'img/mosaic-2_3.svg'\n      },\n      sub: 'We are committed to creating innovative designs. Our team is always exploring new ways to improve user experience.',\n      textColor: '#FF7DC3'\n    }\n  ]}\n/>",
+    "args": {
+      "layout": "textLeft",
+      "largeHeadlines": false,
+      "tiles": [
+        {
+          "image": {
+            "src": "img/mosaic-2_1.svg"
+          },
+          "button": {
+            "toggle": false,
+            "label": "Book a meeting"
+          },
+          "textColor": "#FCFF7D",
+          "headline": "Effective Communication",
+          "sub": "We believe in clear and effective communication. Our team members are always ready to share ideas and solutions."
+        },
+        {
+          "image": {
+            "src": "img/mosaic-2_2.svg"
+          },
+          "button": {
+            "toggle": false,
+            "label": "Book a meeting"
+          },
+          "textColor": "#7DD0FF",
+          "headline": "Data-Driven Decisions",
+          "sub": "We make decisions based on data. Our strategies are always backed by solid facts and figures."
+        },
+        {
+          "image": {
+            "src": "img/mosaic-2_3.svg"
+          },
+          "button": {
+            "toggle": false,
+            "label": "Book a meeting"
+          },
+          "textColor": "#FF7DC3",
+          "headline": "Innovative Design",
+          "sub": "We are committed to creating innovative designs. Our team is always exploring new ways to improve user experience."
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-mosaic--colorful-text-with-illustrations.png"
+  },
+  {
+    "id": "layout-section--cards",
+    "group": "Layout/Section",
+    "name": "Cards",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'tile',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"default\"\n>\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "args": {
+      "width": "default",
+      "style": "default",
+      "backgroundColor": "default",
+      "spotlight": false,
+      "spaceBefore": "default",
+      "spaceAfter": "default",
+      "inverted": false,
+      "headerSpacing": false,
+      "headline": {
+        "text": "Happy Customers Showcases",
+        "large": false,
+        "width": "unset",
+        "sub": "We can create something shining for you too!"
+      },
+      "content": {
+        "width": "unset",
+        "align": "center",
+        "gutter": "default",
+        "mode": "tile",
+        "tileWidth": "default"
+      },
+      "buttons": []
+    },
+    "screenshot": "img/screenshots/layout-section--cards.png"
+  },
+  {
+    "id": "layout-section--slider",
+    "group": "Layout/Section",
+    "name": "Slider",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'slider',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    text: 'Section headline',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"default\"\n>\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"/showcase-techfusion_paid\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"/showcase-launchpad_paid\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"/showcase-eco_paid\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"/showcase-techfusion_paid\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"/showcase-launchpad_paid\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"/showcase-eco_paid\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"/showcase-techfusion_paid\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"/showcase-launchpad_paid\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"/showcase-eco_paid\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"/showcase-techfusion_paid\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"/showcase-launchpad_paid\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"/showcase-eco_paid\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "args": {
+      "width": "default",
+      "style": "default",
+      "backgroundColor": "default",
+      "spotlight": false,
+      "spaceBefore": "default",
+      "spaceAfter": "default",
+      "inverted": false,
+      "headerSpacing": false,
+      "headline": {
+        "text": "Section headline",
+        "large": false,
+        "width": "unset"
+      },
+      "content": {
+        "width": "unset",
+        "align": "center",
+        "gutter": "default",
+        "mode": "slider",
+        "tileWidth": "default"
+      },
+      "buttons": []
+    },
+    "screenshot": "img/screenshots/layout-section--slider.png"
+  },
+  {
+    "id": "layout-section--inverted",
+    "group": "Layout/Section",
+    "name": "Inverted",
+    "code": "<Section\n  backgroundColor=\"default\"\n  buttons={[\n    {\n      disabled: false,\n      label: 'Book a meeting',\n      size: 'medium',\n      variant: 'secondary'\n    },\n    {\n      disabled: false,\n      label: 'Book a meeting',\n      size: 'medium',\n      variant: 'secondary'\n    },\n    {\n      disabled: false,\n      label: 'Book a meeting',\n      size: 'medium',\n      variant: 'secondary'\n    }\n  ]}\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'default',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    text: 'Section headline',\n    width: 'unset'\n  }}\n  inverted\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"default\"\n>\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "args": {
+      "width": "default",
+      "style": "default",
+      "backgroundColor": "default",
+      "spotlight": false,
+      "spaceBefore": "default",
+      "spaceAfter": "default",
+      "inverted": true,
+      "headerSpacing": false,
+      "headline": {
+        "text": "Section headline",
+        "large": false,
+        "width": "unset"
+      },
+      "content": {
+        "width": "unset",
+        "align": "center",
+        "gutter": "default",
+        "mode": "default",
+        "tileWidth": "default"
+      },
+      "buttons": [
+        {
+          "label": "Book a meeting",
+          "variant": "secondary",
+          "size": "medium",
+          "disabled": false
+        },
+        {
+          "label": "Book a meeting",
+          "variant": "secondary",
+          "size": "medium",
+          "disabled": false
+        },
+        {
+          "label": "Book a meeting",
+          "variant": "secondary",
+          "size": "medium",
+          "disabled": false
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/layout-section--inverted.png"
+  },
+  {
+    "id": "layout-section--spotlight",
+    "group": "Layout/Section",
+    "name": "Spotlight",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'tile',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  spotlight\n  style=\"default\"\n  width=\"default\"\n>\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "args": {
+      "width": "default",
+      "style": "default",
+      "backgroundColor": "default",
+      "spotlight": true,
+      "spaceBefore": "default",
+      "spaceAfter": "default",
+      "inverted": false,
+      "headerSpacing": false,
+      "headline": {
+        "text": "Happy Customers Showcases",
+        "large": false,
+        "width": "unset",
+        "sub": "We can create something shining for you too!"
+      },
+      "content": {
+        "width": "unset",
+        "align": "center",
+        "gutter": "default",
+        "mode": "tile",
+        "tileWidth": "default"
+      },
+      "buttons": []
+    },
+    "screenshot": "img/screenshots/layout-section--spotlight.png"
+  },
+  {
+    "id": "layout-section--stagelights",
+    "group": "Layout/Section",
+    "name": "Stagelights",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'tile',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"stagelights\"\n  width=\"default\"\n>\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "args": {
+      "width": "default",
+      "style": "stagelights",
+      "backgroundColor": "default",
+      "spotlight": false,
+      "spaceBefore": "default",
+      "spaceAfter": "default",
+      "inverted": false,
+      "headerSpacing": false,
+      "headline": {
+        "text": "Happy Customers Showcases",
+        "large": false,
+        "width": "unset",
+        "sub": "We can create something shining for you too!",
+        "align": "center"
+      },
+      "content": {
+        "width": "unset",
+        "align": "center",
+        "gutter": "default",
+        "mode": "tile",
+        "tileWidth": "default"
+      },
+      "buttons": []
+    },
+    "screenshot": "img/screenshots/layout-section--stagelights.png"
+  },
+  {
+    "id": "layout-section--accent-background",
+    "group": "Layout/Section",
+    "name": "AccentBackground",
+    "code": "<Section\n  backgroundColor=\"accent\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'tile',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"default\"\n>\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "args": {
+      "width": "default",
+      "style": "default",
+      "backgroundColor": "accent",
+      "spotlight": false,
+      "spaceBefore": "default",
+      "spaceAfter": "default",
+      "inverted": false,
+      "headerSpacing": false,
+      "headline": {
+        "text": "Happy Customers Showcases",
+        "large": false,
+        "width": "unset",
+        "sub": "We can create something shining for you too!",
+        "align": "center"
+      },
+      "content": {
+        "width": "unset",
+        "align": "center",
+        "gutter": "default",
+        "mode": "tile",
+        "tileWidth": "default"
+      },
+      "buttons": []
+    },
+    "screenshot": "img/screenshots/layout-section--accent-background.png"
+  },
+  {
+    "id": "layout-section--bold-background",
+    "group": "Layout/Section",
+    "name": "BoldBackground",
+    "code": "<Section\n  backgroundColor=\"bold\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'tile',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"default\"\n>\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "args": {
+      "width": "default",
+      "style": "default",
+      "backgroundColor": "bold",
+      "spotlight": false,
+      "spaceBefore": "default",
+      "spaceAfter": "default",
+      "inverted": false,
+      "headerSpacing": false,
+      "headline": {
+        "text": "Happy Customers Showcases",
+        "large": false,
+        "width": "unset",
+        "sub": "We can create something shining for you too!",
+        "align": "center"
+      },
+      "content": {
+        "width": "unset",
+        "align": "center",
+        "gutter": "default",
+        "mode": "tile",
+        "tileWidth": "default"
+      },
+      "buttons": []
+    },
+    "screenshot": "img/screenshots/layout-section--bold-background.png"
+  },
+  {
+    "id": "layout-section--colorful-gradient",
+    "group": "Layout/Section",
+    "name": "ColorfulGradient",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'tile',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"horizontalGradient\"\n  width=\"default\"\n>\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "args": {
+      "width": "default",
+      "style": "horizontalGradient",
+      "backgroundColor": "default",
+      "spotlight": false,
+      "spaceBefore": "default",
+      "spaceAfter": "default",
+      "inverted": false,
+      "headerSpacing": false,
+      "headline": {
+        "text": "Happy Customers Showcases",
+        "large": false,
+        "width": "unset",
+        "sub": "We can create something shining for you too!",
+        "align": "center"
+      },
+      "content": {
+        "width": "unset",
+        "align": "center",
+        "gutter": "default",
+        "mode": "tile",
+        "tileWidth": "default"
+      },
+      "buttons": []
+    },
+    "screenshot": "img/screenshots/layout-section--colorful-gradient.png"
+  },
+  {
+    "id": "layout-section--with-buttons",
+    "group": "Layout/Section",
+    "name": "WithButtons",
+    "code": "<Section\n  backgroundColor=\"default\"\n  buttons={[\n    {\n      disabled: false,\n      icon: 'arrow-right',\n      label: 'All Showcases',\n      size: 'medium',\n      variant: 'secondary'\n    },\n    {\n      disabled: false,\n      icon: 'date',\n      label: 'Book a meeting',\n      size: 'medium',\n      variant: 'secondary'\n    }\n  ]}\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'default',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"default\"\n>\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "args": {
+      "width": "default",
+      "style": "default",
+      "backgroundColor": "default",
+      "spotlight": false,
+      "spaceBefore": "default",
+      "spaceAfter": "default",
+      "inverted": false,
+      "headerSpacing": false,
+      "headline": {
+        "text": "Happy Customers Showcases",
+        "large": false,
+        "width": "unset",
+        "sub": "We can create something shining for you too!",
+        "align": "center"
+      },
+      "content": {
+        "width": "unset",
+        "align": "center",
+        "gutter": "default",
+        "mode": "default",
+        "tileWidth": "default"
+      },
+      "buttons": [
+        {
+          "label": "All Showcases",
+          "variant": "secondary",
+          "size": "medium",
+          "disabled": false,
+          "icon": "arrow-right"
+        },
+        {
+          "label": "Book a meeting",
+          "variant": "secondary",
+          "size": "medium",
+          "disabled": false,
+          "icon": "date"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/layout-section--with-buttons.png"
+  },
+  {
+    "id": "layout-section--tile-layout",
+    "group": "Layout/Section",
+    "name": "TileLayout",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'tile',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"max\"\n>\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n</Section>",
+    "args": {
+      "width": "max",
+      "style": "default",
+      "backgroundColor": "default",
+      "spotlight": false,
+      "spaceBefore": "default",
+      "spaceAfter": "default",
+      "inverted": false,
+      "headerSpacing": false,
+      "headline": {
+        "text": "Happy Customers Showcases",
+        "large": false,
+        "width": "unset",
+        "sub": "We can create something shining for you too!",
+        "align": "center"
+      },
+      "content": {
+        "width": "unset",
+        "align": "center",
+        "gutter": "default",
+        "mode": "tile",
+        "tileWidth": "default"
+      },
+      "buttons": []
+    },
+    "screenshot": "img/screenshots/layout-section--tile-layout.png"
+  },
+  {
+    "id": "layout-section--flex-layout",
+    "group": "Layout/Section",
+    "name": "FlexLayout",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'default',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"max\"\n>\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n</Section>",
+    "args": {
+      "width": "max",
+      "style": "default",
+      "backgroundColor": "default",
+      "spotlight": false,
+      "spaceBefore": "default",
+      "spaceAfter": "default",
+      "inverted": false,
+      "headerSpacing": false,
+      "headline": {
+        "text": "Happy Customers Showcases",
+        "large": false,
+        "width": "unset",
+        "sub": "We can create something shining for you too!",
+        "align": "center"
+      },
+      "content": {
+        "width": "unset",
+        "align": "center",
+        "gutter": "default",
+        "mode": "default",
+        "tileWidth": "default"
+      },
+      "buttons": []
+    },
+    "screenshot": "img/screenshots/layout-section--flex-layout.png"
+  },
+  {
+    "id": "layout-section--list-layout",
+    "group": "Layout/Section",
+    "name": "ListLayout",
+    "code": "<Section\n  backgroundColor=\"default\"\n  content={{\n    align: 'center',\n    gutter: 'default',\n    mode: 'list',\n    tileWidth: 'default',\n    width: 'unset'\n  }}\n  headline={{\n    align: 'center',\n    large: false,\n    sub: 'We can create something shining for you too!',\n    text: 'Happy Customers Showcases',\n    width: 'unset'\n  }}\n  spaceAfter=\"default\"\n  spaceBefore=\"default\"\n  style=\"default\"\n  width=\"default\"\n>\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    label=\"Freshest Fruit\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Section>",
+    "args": {
+      "width": "default",
+      "style": "default",
+      "backgroundColor": "default",
+      "spotlight": false,
+      "spaceBefore": "default",
+      "spaceAfter": "default",
+      "inverted": false,
+      "headerSpacing": false,
+      "headline": {
+        "text": "Happy Customers Showcases",
+        "large": false,
+        "width": "unset",
+        "sub": "We can create something shining for you too!",
+        "align": "center"
+      },
+      "content": {
+        "width": "unset",
+        "align": "center",
+        "gutter": "default",
+        "mode": "list",
+        "tileWidth": "default"
+      },
+      "buttons": []
+    },
+    "screenshot": "img/screenshots/layout-section--list-layout.png"
+  },
+  {
+    "id": "layout-slider--with-arrows",
+    "group": "Layout/Slider",
+    "name": "WithArrows",
+    "code": "<Slider\n  arrows\n  equalHeight\n  gap={15}\n  nav\n>\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Slider>",
+    "args": {
+      "autoplay": false,
+      "nav": true,
+      "teaseNeighbours": false,
+      "equalHeight": true,
+      "gap": 15,
+      "arrows": true
+    },
+    "screenshot": "img/screenshots/layout-slider--with-arrows.png"
+  },
+  {
+    "id": "layout-slider--with-teased-neighbours",
+    "group": "Layout/Slider",
+    "name": "WithTeasedNeighbours",
+    "code": "<Slider\n  arrows\n  equalHeight\n  gap={15}\n  nav\n  teaseNeighbours\n>\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Slider>",
+    "args": {
+      "autoplay": false,
+      "nav": true,
+      "teaseNeighbours": true,
+      "equalHeight": true,
+      "gap": 15,
+      "arrows": true
+    },
+    "screenshot": "img/screenshots/layout-slider--with-teased-neighbours.png"
+  },
+  {
+    "id": "layout-slider--with-nav",
+    "group": "Layout/Slider",
+    "name": "WithNav",
+    "code": "<Slider\n  arrows\n  equalHeight\n  gap={15}\n  nav\n>\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Slider>",
+    "args": {
+      "autoplay": false,
+      "nav": true,
+      "teaseNeighbours": false,
+      "equalHeight": true,
+      "gap": 15,
+      "arrows": true
+    },
+    "screenshot": "img/screenshots/layout-slider--with-nav.png"
+  },
+  {
+    "id": "layout-slider--with-autoplay",
+    "group": "Layout/Slider",
+    "name": "WithAutoplay",
+    "code": "<Slider\n  arrows\n  autoplay\n  equalHeight\n  gap={15}\n  nav\n>\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Transformation Love Story\"\n    image=\"/img/showcases/comp_tfe01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"See how we saved TechFusions a year's worth of development time\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Speed and Scale\"\n    image=\"/img/showcases/comp_audio01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Thanks to rapid landing page creation for LaunchPad Audio Innovations\"\n  />\n  <No Display Name\n    button={{\n      hidden: true,\n      label: 'View page'\n    }}\n    headline=\"Saving Time and Money\"\n    image=\"/img/showcases/comp_eco01.jpg\"\n    imageRatio=\"unset\"\n    layout=\"row\"\n    target=\"#\"\n    text=\"Navigating the Headless Frontier for EcoTech's 'Brand Consistency\"\n  />\n</Slider>",
+    "args": {
+      "autoplay": true,
+      "nav": true,
+      "teaseNeighbours": false,
+      "equalHeight": true,
+      "gap": 15,
+      "arrows": true
+    },
+    "screenshot": "img/screenshots/layout-slider--with-autoplay.png"
+  },
+  {
+    "id": "components-stats--count-up-with-icons",
+    "group": "Components/Stats",
+    "name": "CountUpWithIcons",
+    "code": "<Stats\n  items={[\n    {\n      icon: 'person',\n      number: 1,\n      title: 'Stat 1'\n    },\n    {\n      icon: 'person',\n      number: 1,\n      title: 'Stat 1'\n    },\n    {\n      icon: 'person',\n      number: 1,\n      title: 'Stat 1'\n    }\n  ]}\n  stats={[\n    {\n      icon: 'person',\n      number: 1500,\n      title: 'Users'\n    },\n    {\n      icon: 'star',\n      number: 350,\n      title: 'Subscribers'\n    },\n    {\n      icon: 'map',\n      number: 125,\n      title: 'Locations'\n    }\n  ]}\n/>",
+    "args": {
+      "items": [
+        {
+          "number": 1,
+          "title": "Stat 1",
+          "icon": "person"
+        },
+        {
+          "number": 1,
+          "title": "Stat 1",
+          "icon": "person"
+        },
+        {
+          "number": 1,
+          "title": "Stat 1",
+          "icon": "person"
+        }
+      ],
+      "stats": [
+        {
+          "number": 1500,
+          "title": "Users",
+          "icon": "person"
+        },
+        {
+          "number": 350,
+          "title": "Subscribers",
+          "icon": "star"
+        },
+        {
+          "number": 125,
+          "title": "Locations",
+          "icon": "map"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-stats--count-up-with-icons.png"
+  },
+  {
+    "id": "components-stats--count-up-with-description",
+    "group": "Components/Stats",
+    "name": "CountUpWithDescription",
+    "code": "<Stats\n  items={[\n    {\n      icon: 'person',\n      number: 1,\n      title: 'Stat 1'\n    },\n    {\n      icon: 'person',\n      number: 1,\n      title: 'Stat 1'\n    },\n    {\n      icon: 'person',\n      number: 1,\n      title: 'Stat 1'\n    }\n  ]}\n  stats={[\n    {\n      description: 'Experience the power of our platform, embraced by a vast community of users. Our user base is diverse and dynamic, including both active and inactive members. Join us and become part of this ever-growing community.',\n      number: 1500,\n      title: 'Users'\n    },\n    {\n      description: 'Stay ahead with our regular updates and newsletters. Our subscribers are always in the loop, receiving the latest news and features. Subscribe now and never miss an update from us.',\n      number: 350,\n      title: 'Subscribers'\n    }\n  ]}\n/>",
+    "args": {
+      "items": [
+        {
+          "number": 1,
+          "title": "Stat 1",
+          "icon": "person"
+        },
+        {
+          "number": 1,
+          "title": "Stat 1",
+          "icon": "person"
+        },
+        {
+          "number": 1,
+          "title": "Stat 1",
+          "icon": "person"
+        }
+      ],
+      "stats": [
+        {
+          "number": 1500,
+          "title": "Users",
+          "description": "Experience the power of our platform, embraced by a vast community of users. Our user base is diverse and dynamic, including both active and inactive members. Join us and become part of this ever-growing community."
+        },
+        {
+          "number": 350,
+          "title": "Subscribers",
+          "description": "Stay ahead with our regular updates and newsletters. Our subscribers are always in the loop, receiving the latest news and features. Subscribe now and never miss an update from us."
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-stats--count-up-with-description.png"
+  },
+  {
+    "id": "components-teaser-card--product-tiles",
+    "group": "Components/Teaser Card",
+    "name": "ProductTiles",
+    "code": "<No Display Name\n  button={{\n    chevron: false,\n    hidden: true,\n    label: 'Go to page'\n  }}\n  headline=\"Castaway\"\n  image=\"img/logos/castaway.svg\"\n  imageRatio=\"wide\"\n  layout=\"stack\"\n  target=\"#\"\n  text=\"Transforming Ideas into Code\"\n/>",
+    "args": {
+      "layout": "stack",
+      "button": {
+        "chevron": false,
+        "hidden": true,
+        "label": "Go to page"
+      },
+      "imageRatio": "wide",
+      "headline": "Castaway",
+      "text": "Transforming Ideas into Code",
+      "image": "img/logos/castaway.svg",
+      "target": "#"
+    },
+    "screenshot": "img/screenshots/components-teaser-card--product-tiles.png"
+  },
+  {
+    "id": "components-teaser-card--page-navigation",
+    "group": "Components/Teaser Card",
+    "name": "PageNavigation",
+    "code": "<No Display Name\n  button={{\n    chevron: false,\n    hidden: false,\n    label: 'Read more'\n  }}\n  headline=\"Design System Services\"\n  image=\"img/02.jpg\"\n  imageRatio=\"landscape\"\n  layout=\"stack\"\n  target=\"#\"\n  text=\"Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.\"\n/>",
+    "args": {
+      "layout": "stack",
+      "button": {
+        "chevron": false,
+        "hidden": false,
+        "label": "Read more"
+      },
+      "imageRatio": "landscape",
+      "headline": "Design System Services",
+      "text": "Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.",
+      "image": "img/02.jpg",
+      "target": "#"
+    },
+    "screenshot": "img/screenshots/components-teaser-card--page-navigation.png"
+  },
+  {
+    "id": "components-teaser-card--showcase-preview",
+    "group": "Components/Teaser Card",
+    "name": "ShowcasePreview",
+    "code": "<No Display Name\n  button={{\n    chevron: false,\n    hidden: false,\n    label: 'View showcase'\n  }}\n  headline=\"Transformation Love Story\"\n  image=\"img/showcases/comp_tfe01.jpg\"\n  imageRatio=\"wide\"\n  label=\"Tech\"\n  layout=\"row\"\n  target=\"#\"\n  text=\"See how we saved TechFusions a year's worth of development time\"\n/>",
+    "args": {
+      "layout": "row",
+      "button": {
+        "chevron": false,
+        "hidden": false,
+        "label": "View showcase"
+      },
+      "imageRatio": "wide",
+      "label": "Tech",
+      "headline": "Transformation Love Story",
+      "text": "See how we saved TechFusions a year's worth of development time",
+      "image": "img/showcases/comp_tfe01.jpg",
+      "target": "#"
+    },
+    "screenshot": "img/screenshots/components-teaser-card--showcase-preview.png"
+  },
+  {
+    "id": "components-testimonials--simple",
+    "group": "Components/Testimonials",
+    "name": "Simple",
+    "code": "<Testimonials\n  items={[\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    },\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    },\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    }\n  ]}\n  layout=\"slider\"\n  testimonials={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      title: undefined\n    }\n  ]}\n/>",
+    "args": {
+      "layout": "slider",
+      "items": [
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        },
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        },
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        }
+      ],
+      "testimonials": [
+        {
+          "quote": "Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.",
+          "image": {
+            "src": "img/people/author-emily.png",
+            "alt": "Alt Text Customer 1"
+          },
+          "name": "Emily Johnson"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-testimonials--simple.png"
+  },
+  {
+    "id": "components-testimonials--with-title",
+    "group": "Components/Testimonials",
+    "name": "WithTitle",
+    "code": "<Testimonials\n  items={[\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    },\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    },\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    }\n  ]}\n  layout=\"slider\"\n  testimonials={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      title: 'Chief Marketing Officer at TechFusion Enterprises'\n    }\n  ]}\n/>",
+    "args": {
+      "layout": "slider",
+      "items": [
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        },
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        },
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        }
+      ],
+      "testimonials": [
+        {
+          "quote": "Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.",
+          "image": {
+            "src": "img/people/author-emily.png",
+            "alt": "Alt Text Customer 1"
+          },
+          "name": "Emily Johnson",
+          "title": "Chief Marketing Officer at TechFusion Enterprises"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-testimonials--with-title.png"
+  },
+  {
+    "id": "components-testimonials--slider-layout",
+    "group": "Components/Testimonials",
+    "name": "SliderLayout",
+    "code": "<Testimonials\n  items={[\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    },\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    },\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    }\n  ]}\n  layout=\"slider\"\n  testimonials={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      title: 'Chief Marketing Officer at TechFusion Enterprises'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 2',\n        src: 'img/people/author-john.png'\n      },\n      name: 'John Smith',\n      quote: 'Systemics\\'s design system transformed our development process. The consistency it introduced across our platforms not only saved us time but also boosted our brand\\'s credibility. It\\'s a partnership that continues to pay dividends.',\n      title: 'Director of Digital Strategy at EcoTech Solutions'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 3',\n        src: 'img/people/author-alex.png'\n      },\n      name: 'Alex Chen',\n      quote: 'As a startup, we needed to hit the ground running. Systemics\\'s approach streamlined our dev and design process, allowing us to scale faster and focus on what truly matters - building a product that stands out in the market.',\n      title: 'CEO of LaunchPad Innovations'\n    }\n  ]}\n/>",
+    "args": {
+      "layout": "slider",
+      "items": [
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        },
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        },
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        }
+      ],
+      "testimonials": [
+        {
+          "quote": "Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.",
+          "image": {
+            "src": "img/people/author-emily.png",
+            "alt": "Alt Text Customer 1"
+          },
+          "name": "Emily Johnson",
+          "title": "Chief Marketing Officer at TechFusion Enterprises"
+        },
+        {
+          "quote": "Systemics's design system transformed our development process. The consistency it introduced across our platforms not only saved us time but also boosted our brand's credibility. It's a partnership that continues to pay dividends.",
+          "image": {
+            "src": "img/people/author-john.png",
+            "alt": "Alt Text Customer 2"
+          },
+          "name": "John Smith",
+          "title": "Director of Digital Strategy at EcoTech Solutions"
+        },
+        {
+          "quote": "As a startup, we needed to hit the ground running. Systemics's approach streamlined our dev and design process, allowing us to scale faster and focus on what truly matters - building a product that stands out in the market.",
+          "image": {
+            "src": "img/people/author-alex.png",
+            "alt": "Alt Text Customer 3"
+          },
+          "name": "Alex Chen",
+          "title": "CEO of LaunchPad Innovations"
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-testimonials--slider-layout.png"
+  },
+  {
+    "id": "components-testimonials--with-rating",
+    "group": "Components/Testimonials",
+    "name": "WithRating",
+    "code": "<Testimonials\n  items={[\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    },\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    },\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    }\n  ]}\n  layout=\"slider\"\n  testimonials={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      rating: 5,\n      title: 'Chief Marketing Officer at TechFusion Enterprises'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 2',\n        src: 'img/people/author-john.png'\n      },\n      name: 'John Smith',\n      quote: 'Systemics\\'s design system transformed our development process. The consistency it introduced across our platforms not only saved us time but also boosted our brand\\'s credibility. It\\'s a partnership that continues to pay dividends.',\n      rating: 4,\n      title: 'Director of Digital Strategy at EcoTech Solutions'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 3',\n        src: 'img/people/author-alex.png'\n      },\n      name: 'Alex Chen',\n      quote: 'As a startup, we needed to hit the ground running. Systemics\\'s approach streamlined our dev and design process, allowing us to scale faster and focus on what truly matters - building a product that stands out in the market.',\n      rating: 5,\n      title: 'CEO of LaunchPad Innovations'\n    }\n  ]}\n/>",
+    "args": {
+      "layout": "slider",
+      "items": [
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        },
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        },
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        }
+      ],
+      "testimonials": [
+        {
+          "quote": "Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.",
+          "image": {
+            "src": "img/people/author-emily.png",
+            "alt": "Alt Text Customer 1"
+          },
+          "name": "Emily Johnson",
+          "title": "Chief Marketing Officer at TechFusion Enterprises",
+          "rating": 5
+        },
+        {
+          "quote": "Systemics's design system transformed our development process. The consistency it introduced across our platforms not only saved us time but also boosted our brand's credibility. It's a partnership that continues to pay dividends.",
+          "image": {
+            "src": "img/people/author-john.png",
+            "alt": "Alt Text Customer 2"
+          },
+          "name": "John Smith",
+          "title": "Director of Digital Strategy at EcoTech Solutions",
+          "rating": 4
+        },
+        {
+          "quote": "As a startup, we needed to hit the ground running. Systemics's approach streamlined our dev and design process, allowing us to scale faster and focus on what truly matters - building a product that stands out in the market.",
+          "image": {
+            "src": "img/people/author-alex.png",
+            "alt": "Alt Text Customer 3"
+          },
+          "name": "Alex Chen",
+          "title": "CEO of LaunchPad Innovations",
+          "rating": 5
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-testimonials--with-rating.png"
+  },
+  {
+    "id": "components-testimonials--list-layout",
+    "group": "Components/Testimonials",
+    "name": "ListLayout",
+    "code": "<Testimonials\n  items={[\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    },\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    },\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    }\n  ]}\n  layout=\"list\"\n  testimonials={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      rating: 5,\n      title: 'Chief Marketing Officer at TechFusion Enterprises'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 2',\n        src: 'img/people/author-john.png'\n      },\n      name: 'John Smith',\n      quote: 'Systemics\\'s design system transformed our development process. The consistency it introduced across our platforms not only saved us time but also boosted our brand\\'s credibility. It\\'s a partnership that continues to pay dividends.',\n      rating: 4,\n      title: 'Director of Digital Strategy at EcoTech Solutions'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 3',\n        src: 'img/people/author-alex.png'\n      },\n      name: 'Alex Chen',\n      quote: 'As a startup, we needed to hit the ground running. Systemics\\'s approach streamlined our dev and design process, allowing us to scale faster and focus on what truly matters - building a product that stands out in the market.',\n      rating: 5,\n      title: 'CEO of LaunchPad Innovations'\n    }\n  ]}\n/>",
+    "args": {
+      "layout": "list",
+      "items": [
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        },
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        },
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        }
+      ],
+      "testimonials": [
+        {
+          "quote": "Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.",
+          "image": {
+            "src": "img/people/author-emily.png",
+            "alt": "Alt Text Customer 1"
+          },
+          "name": "Emily Johnson",
+          "title": "Chief Marketing Officer at TechFusion Enterprises",
+          "rating": 5
+        },
+        {
+          "quote": "Systemics's design system transformed our development process. The consistency it introduced across our platforms not only saved us time but also boosted our brand's credibility. It's a partnership that continues to pay dividends.",
+          "image": {
+            "src": "img/people/author-john.png",
+            "alt": "Alt Text Customer 2"
+          },
+          "name": "John Smith",
+          "title": "Director of Digital Strategy at EcoTech Solutions",
+          "rating": 4
+        },
+        {
+          "quote": "As a startup, we needed to hit the ground running. Systemics's approach streamlined our dev and design process, allowing us to scale faster and focus on what truly matters - building a product that stands out in the market.",
+          "image": {
+            "src": "img/people/author-alex.png",
+            "alt": "Alt Text Customer 3"
+          },
+          "name": "Alex Chen",
+          "title": "CEO of LaunchPad Innovations",
+          "rating": 5
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-testimonials--list-layout.png"
+  },
+  {
+    "id": "components-testimonials--alternating-layout",
+    "group": "Components/Testimonials",
+    "name": "AlternatingLayout",
+    "code": "<Testimonials\n  items={[\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    },\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    },\n    {\n      image: {\n        src: 'https://example.com/image.jpg'\n      },\n      name: 'John Doe',\n      quote: 'This product is amazing!',\n      title: 'CEO'\n    }\n  ]}\n  layout=\"alternating\"\n  testimonials={[\n    {\n      image: {\n        alt: 'Alt Text Customer 1',\n        src: 'img/people/author-emily.png'\n      },\n      name: 'Emily Johnson',\n      quote: 'Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.',\n      rating: 5,\n      title: 'Chief Marketing Officer at TechFusion Enterprises'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 2',\n        src: 'img/people/author-john.png'\n      },\n      name: 'John Smith',\n      quote: 'Systemics\\'s design system transformed our development process. The consistency it introduced across our platforms not only saved us time but also boosted our brand\\'s credibility. It\\'s a partnership that continues to pay dividends.',\n      rating: 4,\n      title: 'Director of Digital Strategy at EcoTech Solutions'\n    },\n    {\n      image: {\n        alt: 'Alt Text Customer 3',\n        src: 'img/people/author-alex.png'\n      },\n      name: 'Alex Chen',\n      quote: 'As a startup, we needed to hit the ground running. Systemics\\'s approach streamlined our dev and design process, allowing us to scale faster and focus on what truly matters - building a product that stands out in the market.',\n      rating: 5,\n      title: 'CEO of LaunchPad Innovations'\n    }\n  ]}\n/>",
+    "args": {
+      "layout": "alternating",
+      "items": [
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        },
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        },
+        {
+          "quote": "This product is amazing!",
+          "name": "John Doe",
+          "title": "CEO",
+          "image": {
+            "src": "https://example.com/image.jpg"
+          }
+        }
+      ],
+      "testimonials": [
+        {
+          "quote": "Working with Systemics technology has been a game-changer for our brand. Their design system expertise brought harmony to our user experiences, making our digital platforms not just functional, but truly captivating.",
+          "image": {
+            "src": "img/people/author-emily.png",
+            "alt": "Alt Text Customer 1"
+          },
+          "name": "Emily Johnson",
+          "title": "Chief Marketing Officer at TechFusion Enterprises",
+          "rating": 5
+        },
+        {
+          "quote": "Systemics's design system transformed our development process. The consistency it introduced across our platforms not only saved us time but also boosted our brand's credibility. It's a partnership that continues to pay dividends.",
+          "image": {
+            "src": "img/people/author-john.png",
+            "alt": "Alt Text Customer 2"
+          },
+          "name": "John Smith",
+          "title": "Director of Digital Strategy at EcoTech Solutions",
+          "rating": 4
+        },
+        {
+          "quote": "As a startup, we needed to hit the ground running. Systemics's approach streamlined our dev and design process, allowing us to scale faster and focus on what truly matters - building a product that stands out in the market.",
+          "image": {
+            "src": "img/people/author-alex.png",
+            "alt": "Alt Text Customer 3"
+          },
+          "name": "Alex Chen",
+          "title": "CEO of LaunchPad Innovations",
+          "rating": 5
+        }
+      ]
+    },
+    "screenshot": "img/screenshots/components-testimonials--alternating-layout.png"
+  },
+  {
+    "id": "components-text--single-column",
+    "group": "Components/Text",
+    "name": "SingleColumn",
+    "code": "<No Display Name\n  align=\"left\"\n  layout=\"singleColumn\"\n  text=\"We prioritize efficiency without sacrificing quality. Our secret? A groundbreaking, code-first, open-source framework for [building design systems](#).\n\nThis tool expedites our **development process**, saving you precious time and enabling us to deliver superior results more quickly. With this framework, your design system aspirations can be realized faster than ever before.\n\n_Experience the power of streamlined development and see the difference it can make in your projects._\"\n/>",
+    "args": {
+      "text": "We prioritize efficiency without sacrificing quality. Our secret? A groundbreaking, code-first, open-source framework for [building design systems](#).\n\nThis tool expedites our **development process**, saving you precious time and enabling us to deliver superior results more quickly. With this framework, your design system aspirations can be realized faster than ever before.\n\n_Experience the power of streamlined development and see the difference it can make in your projects._",
+      "layout": "singleColumn",
+      "align": "left",
+      "highlightText": false
+    },
+    "screenshot": "img/screenshots/components-text--single-column.png"
+  },
+  {
+    "id": "components-text--centered",
+    "group": "Components/Text",
+    "name": "Centered",
+    "code": "<No Display Name\n  align=\"center\"\n  layout=\"singleColumn\"\n  text=\"We prioritize efficiency without sacrificing quality. Our secret? A groundbreaking, code-first, open-source framework for [building design systems](#).\n\nThis tool expedites our **development process**, saving you precious time and enabling us to deliver superior results more quickly. With this framework, your design system aspirations can be realized faster than ever before.\n\n_Experience the power of streamlined development and see the difference it can make in your projects._\"\n/>",
+    "args": {
+      "text": "We prioritize efficiency without sacrificing quality. Our secret? A groundbreaking, code-first, open-source framework for [building design systems](#).\n\nThis tool expedites our **development process**, saving you precious time and enabling us to deliver superior results more quickly. With this framework, your design system aspirations can be realized faster than ever before.\n\n_Experience the power of streamlined development and see the difference it can make in your projects._",
+      "layout": "singleColumn",
+      "align": "center",
+      "highlightText": false
+    },
+    "screenshot": "img/screenshots/components-text--centered.png"
+  },
+  {
+    "id": "components-text--multi-column",
+    "group": "Components/Text",
+    "name": "MultiColumn",
+    "code": "<No Display Name\n  align=\"left\"\n  layout=\"multiColumn\"\n  text=\"We prioritize efficiency without sacrificing quality. Our secret? A groundbreaking, code-first, open-source framework for [building design systems](#).\nThis tool expedites our **development process**, saving you precious time and enabling us to deliver superior results more quickly. With this framework, your design system aspirations can be realized faster than ever before.\n_Experience the power of streamlined development and see the difference it can make in your projects._\"\n/>",
+    "args": {
+      "text": "We prioritize efficiency without sacrificing quality. Our secret? A groundbreaking, code-first, open-source framework for [building design systems](#).\nThis tool expedites our **development process**, saving you precious time and enabling us to deliver superior results more quickly. With this framework, your design system aspirations can be realized faster than ever before.\n_Experience the power of streamlined development and see the difference it can make in your projects._",
+      "layout": "multiColumn",
+      "align": "left",
+      "highlightText": false
+    },
+    "screenshot": "img/screenshots/components-text--multi-column.png"
+  },
+  {
+    "id": "components-text--highlight",
+    "group": "Components/Text",
+    "name": "Highlight",
+    "code": "<No Display Name\n  align=\"left\"\n  highlightText\n  layout=\"singleColumn\"\n  text=\"We prioritize efficiency without sacrificing quality. Our secret? A groundbreaking, code-first, open-source framework for [building design systems](#).\n\nThis tool expedites our **development process**, saving you precious time and enabling us to deliver superior results more quickly. With this framework, your design system aspirations can be realized faster than ever before.\n\n_Experience the power of streamlined development and see the difference it can make in your projects._\"\n/>",
+    "args": {
+      "text": "We prioritize efficiency without sacrificing quality. Our secret? A groundbreaking, code-first, open-source framework for [building design systems](#).\n\nThis tool expedites our **development process**, saving you precious time and enabling us to deliver superior results more quickly. With this framework, your design system aspirations can be realized faster than ever before.\n\n_Experience the power of streamlined development and see the difference it can make in your projects._",
+      "layout": "singleColumn",
+      "align": "left",
+      "highlightText": true
+    },
+    "screenshot": "img/screenshots/components-text--highlight.png"
+  },
+  {
+    "id": "components-video-curtain--atmospheric-video-with-overlay",
+    "group": "Components/Video Curtain",
+    "name": "AtmosphericVideoWithOverlay",
+    "code": "<VideoCurtain\n  buttons={[\n    {\n      label: 'Explore More'\n    }\n  ]}\n  headline=\"Step into Our Innovative Workspace\"\n  overlay\n  sub=\"Where Creativity Meets Technology\"\n  text=\"Experience the fusion of creativity and technology in our state-of-the-art office.\"\n  textPosition=\"center\"\n  video={{\n    srcDesktop: 'img/videos/video-720.mp4',\n    srcMobile: 'img/videos/video-720.mp4',\n    srcTablet: 'img/videos/video-720.mp4'\n  }}\n/>",
+    "args": {
+      "highlightText": false,
+      "colorNeutral": false,
+      "buttons": [
+        {
+          "label": "Explore More"
+        }
+      ],
+      "overlay": true,
+      "video": {
+        "srcMobile": "img/videos/video-720.mp4",
+        "srcTablet": "img/videos/video-720.mp4",
+        "srcDesktop": "img/videos/video-720.mp4"
+      },
+      "textPosition": "center",
+      "headline": "Step into Our Innovative Workspace",
+      "sub": "Where Creativity Meets Technology",
+      "text": "Experience the fusion of creativity and technology in our state-of-the-art office."
+    },
+    "screenshot": "img/screenshots/components-video-curtain--atmospheric-video-with-overlay.png"
+  },
+  {
+    "id": "components-video-curtain--color-neutral-text",
+    "group": "Components/Video Curtain",
+    "name": "ColorNeutralText",
+    "code": "<VideoCurtain\n  buttons={[\n    {\n      label: 'Join Us'\n    }\n  ]}\n  colorNeutral\n  headline=\"Join Our Creative Journey\"\n  highlightText\n  overlay\n  sub=\"Where Every Idea Matters\"\n  text=\"Be part of a creative journey where every idea is valued and innovation is celebrated.\"\n  textPosition=\"left\"\n  video={{\n    srcDesktop: 'img/videos/video-agency.mp4',\n    srcMobile: 'img/videos/video-agency.mp4',\n    srcTablet: 'img/videos/video-agency.mp4'\n  }}\n/>",
+    "args": {
+      "highlightText": true,
+      "colorNeutral": true,
+      "buttons": [
+        {
+          "label": "Join Us"
+        }
+      ],
+      "overlay": true,
+      "video": {
+        "srcMobile": "img/videos/video-agency.mp4",
+        "srcTablet": "img/videos/video-agency.mp4",
+        "srcDesktop": "img/videos/video-agency.mp4"
+      },
+      "textPosition": "left",
+      "headline": "Join Our Creative Journey",
+      "sub": "Where Every Idea Matters",
+      "text": "Be part of a creative journey where every idea is valued and innovation is celebrated."
+    },
+    "screenshot": "img/screenshots/components-video-curtain--color-neutral-text.png"
+  },
+  {
+    "id": "components-video-curtain--color-neutral-video",
+    "group": "Components/Video Curtain",
+    "name": "ColorNeutralVideo",
+    "code": "<VideoCurtain\n  buttons={[\n    {\n      label: 'Discover More'\n    }\n  ]}\n  headline=\"Welcome to Our Collaborative Space\"\n  highlightText\n  overlay\n  sub=\"Where Ideas Come to Life\"\n  text=\"Experience the synergy of creativity and teamwork in our modern office environment.\"\n  textPosition=\"center\"\n  video={{\n    srcDesktop: 'img/videos/handshake-bw.mp4',\n    srcMobile: 'img/videos/handshake-bw.mp4',\n    srcTablet: 'img/videos/handshake-bw.mp4'\n  }}\n/>",
+    "args": {
+      "highlightText": true,
+      "colorNeutral": false,
+      "buttons": [
+        {
+          "label": "Discover More"
+        }
+      ],
+      "overlay": true,
+      "video": {
+        "srcMobile": "img/videos/handshake-bw.mp4",
+        "srcTablet": "img/videos/handshake-bw.mp4",
+        "srcDesktop": "img/videos/handshake-bw.mp4"
+      },
+      "textPosition": "center",
+      "headline": "Welcome to Our Collaborative Space",
+      "sub": "Where Ideas Come to Life",
+      "text": "Experience the synergy of creativity and teamwork in our modern office environment."
+    },
+    "screenshot": "img/screenshots/components-video-curtain--color-neutral-video.png"
+  }
+]