diff --git a/docs-src/package.json b/docs-src/package.json
index 0512490bbae..2d7ceb3a1b7 100644
--- a/docs-src/package.json
+++ b/docs-src/package.json
@@ -18,7 +18,7 @@
     "@docusaurus/plugin-google-gtag": "3.0.1",
     "@docusaurus/preset-classic": "3.0.1",
     "@mdx-js/react": "3.0.0",
-    "@shoelace-style/shoelace": "2.15.0",
+    "antd": "5.17.1",
     "autocomplete.js": "0.37.0",
     "clsx": "2.1.0",
     "gauge": "5.0.1",
diff --git a/docs-src/src/css/custom.css b/docs-src/src/css/custom.css
index 805da519bdd..59887b1930a 100644
--- a/docs-src/src/css/custom.css
+++ b/docs-src/src/css/custom.css
@@ -59,21 +59,21 @@ html[data-theme="dark"] {
 /**
  * Default font size was to big, decrease it here
  */
-.markdown>h1 {
+.markdown > h1 {
     font-size: 2.1rem;
 }
 
-.markdown>h2 {
+.markdown > h2 {
     font-size: 1.75rem;
 }
 
-.markdown>p {
+.markdown > p {
     font-size: 1rem;
 }
 
 .footer {
     background-color: var(--ifm-navbar-background-color);
-    background-image: url('/img/footer-column.svg');
+    background-image: url("/img/footer-column.svg");
     background-position: right bottom;
     background-repeat: no-repeat;
 }
@@ -218,7 +218,6 @@ h1 .underline {
 }
 
 @media (max-width: 500px) {
-
     /**
      * Underline gets broken on mobile,
      * so better disable it.
@@ -233,8 +232,7 @@ h1 .underline {
     background-color: var(--bg-color-dark);
 }
 
-.button,
-.sl-button::part(base) {
+.button {
     cursor: pointer;
     box-sizing: content-box;
     background-color: var(--color-top);
@@ -1204,38 +1202,48 @@ body {
 }
 
 .bg-gradient-right-bottom {
-    background: linear-gradient(to right bottom,
-            var(--color-top),
-            var(--color-middle),
-            var(--color-bottom));
+    background: linear-gradient(
+        to right bottom,
+        var(--color-top),
+        var(--color-middle),
+        var(--color-bottom)
+    );
 }
 
 .bg-gradient-left-bottom {
-    background: linear-gradient(to left bottom,
-            var(--color-top),
-            var(--color-middle),
-            var(--color-bottom));
+    background: linear-gradient(
+        to left bottom,
+        var(--color-top),
+        var(--color-middle),
+        var(--color-bottom)
+    );
 }
 
 .bg-gradient-right-top {
-    background: linear-gradient(to right top,
-            var(--color-top),
-            var(--color-middle),
-            var(--color-bottom));
+    background: linear-gradient(
+        to right top,
+        var(--color-top),
+        var(--color-middle),
+        var(--color-bottom)
+    );
 }
 
 .bg-gradient-left-top {
-    background: linear-gradient(to left top,
-            var(--color-top),
-            var(--color-middle),
-            var(--color-bottom));
+    background: linear-gradient(
+        to left top,
+        var(--color-top),
+        var(--color-middle),
+        var(--color-bottom)
+    );
 }
 
 .bg-gradient-top {
-    background: linear-gradient(to top,
-            var(--color-top),
-            var(--color-middle),
-            var(--color-bottom));
+    background: linear-gradient(
+        to top,
+        var(--color-top),
+        var(--color-middle),
+        var(--color-bottom)
+    );
 }
 
 .star-at-github {
@@ -1963,7 +1971,8 @@ footer a:visited {
     color: white;
 }
 
-@media (min-width: 576px) {}
+@media (min-width: 576px) {
+}
 
 .redirectBox .ul-container {
     text-align: center;
@@ -1978,7 +1987,8 @@ footer a:visited {
     margin: 10px 0;
 }
 
-@media (min-width: 576px) {}
+@media (min-width: 576px) {
+}
 
 /*
  * Call to action button
@@ -2151,35 +2161,11 @@ footer a:visited {
     font-weight: 500;
 }
 
-.sl-button::part(base) {
-    margin-right: 0px;
-    padding: 0px;
-    line-height: 150%;
-    font-weight: 400;
-    border-radius: 18px;
-    box-sizing: border-box;
-}
-
-.sl-button::part(label) {
-    display: flex;
-    align-items: center;
-}
-
 .consulting-page .button-empty {
     background-color: transparent;
     border-color: white;
 }
 
-.sl-button-empty::part(base) {
-    background-color: transparent;
-    border-color: white;
-    box-shadow: unset !important;
-}
-
-.sl-button-empty::part(label):hover {
-    color: var(--color-top);
-}
-
 .consulting-page .content {
     width: 100%;
     padding: 0 64px;
@@ -2199,14 +2185,9 @@ footer a:visited {
     width: 100%;
 }
 
-sl-dialog::part(panel) {
-    padding: 0;
-    border-radius: 32px;
-    background: rgb(31, 31, 31);
-}
-
-sl-dialog::part(body) {
-    padding: 6px;
+/* dialog */
+.modal-consulting-page .ant-modal-content {
+    background-color: transparent;
 }
 
 @media (max-width: 800px) {
@@ -2230,9 +2211,6 @@ sl-dialog::part(body) {
 }
 
 /** navbar **/
-.navbar-home .sl-button::part(base) {
-    border-radius: 14px;
-}
 
 .navbar-home {
     z-index: 10;
@@ -2296,41 +2274,6 @@ sl-dialog::part(body) {
     padding: 8px 20px;
 }
 
-.consulting-page .navbar-home .sl-button::part(label) {
-    padding: 8px 20px;
-}
-
-.consulting-page .navbar-home-links sl-button::part(base) {
-    font-size: 1em;
-    font-weight: 400;
-    line-height: 150%;
-    color: white;
-    display: flex;
-    align-items: center;
-    transition: all 0.15s ease-in-out;
-}
-
-.consulting-page .nav-button::part(base) {
-    height: 40px;
-}
-
-.consulting-page .navbar-home-links sl-button::part(base):hover {
-    color: var(--color-top);
-}
-
-.consulting-page .nav-logo-button::part(label) {
-    display: flex;
-    gap: 9px;
-    font-size: 1.35em;
-    font-weight: 500;
-    line-height: 120%;
-    margin-right: 48px;
-}
-
-.consulting-page .navbar-home-links sl-button::part(label) {
-    padding: 0;
-}
-
 /** hero = first **/
 .consulting-page .block.first {
     position: relative;
@@ -2390,10 +2333,6 @@ sl-dialog::part(body) {
     margin-right: 0;
 }
 
-.consulting-page .block.first .sl-button::part(label) {
-    padding: 12px 24px;
-}
-
 .consulting-page .hero-bottom-group {
     position: absolute;
     bottom: 0;
@@ -2516,6 +2455,21 @@ sl-dialog::part(body) {
     text-wrap: nowrap;
 }
 
+.consulting-page .block.packages .flex-row a {
+    color: white;
+    text-decoration: underline;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    text-wrap: nowrap;
+    transition: color var(--ifm-transition-fast)
+        var(--ifm-transition-timing-default);
+    display: flex;
+    font-size: 1.14em;
+    line-height: 150%;
+    font-weight: 400;
+}
+
 .consulting-page .block.packages .item-package {
     padding: 32px;
     border-radius: 32px;
@@ -2543,32 +2497,53 @@ sl-dialog::part(body) {
     color: var(--color-top) !important;
 }
 
-.consulting-page .block.packages sl-button::part(label) {
-    color: white;
-    text-decoration: underline;
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    text-wrap: nowrap;
-    transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
-    display: flex;
-    font-size: 1.29em;
-    line-height: 150%;
-    font-weight: 400;
+/** benefits **/
+.consulting-page .block.benefits,
+.consulting-page .block.review {
+    background: #131720;
 }
 
-.consulting-page .block.packages sl-button::part(label):hover {
-    color: var(--color-top) !important;
+.consulting-page .block.benefits .ant-tabs {
+    flex-direction: row;
+    gap: 40px;
 }
-
-.consulting-page .block.packages sl-button::part(base) {
-    min-height: auto;
+.consulting-page .block.benefits .ant-tabs-nav {
+    min-width: 371px;
+    height: auto;
+    display: flex;
+    justify-content: space-between;
+    flex-grow: 1;
+}
+.consulting-page .block.benefits .ant-tabs-nav-list {
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: scroll;
+}
+.consulting-page .block.benefits .ant-tabs-nav-list::-webkit-scrollbar {
+    display: none;
+}
+.consulting-page .block.benefits .ant-tabs-nav::before,
+.consulting-page .block.benefits .ant-tabs-ink-bar {
+    display: none;
+}
+.consulting-page .block.benefits .ant-tabs-tab-active {
+    margin: 0;
+    border-left: 2px solid #e6008d;
+}
+.consulting-page .block.benefits .ant-tabs-tab-active .ant-tabs-tab-btn {
+    color: white !important;
 }
 
-/** benefits **/
-.consulting-page .block.benefits,
-.consulting-page .block.review {
-    background: #131720;
+.consulting-page .block.benefits .ant-tabs-tab {
+    margin: 0;
+    color: #787887;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 140%;
+    padding: 24px 32px;
+}
+.consulting-page .block.benefits .ant-tabs-nav-operations {
+    display: none;
 }
 
 .consulting-page .panel {
@@ -2620,70 +2595,17 @@ sl-dialog::part(body) {
     line-height: 150%;
     margin: 0;
 }
-
-.consulting-page sl-tab-group::part(base) {
-    gap: 40px;
-}
-
-.consulting-page sl-tab-group::part(nav) {
+.consulting-page .benefit-tabs-content {
     display: flex;
-    justify-content: space-between;
-}
-
-.consulting-page sl-tab-group::part(nav)::-webkit-scrollbar {
-    display: none;
-    width: 0;
+    flex-direction: row;
+    gap: 40px;
 }
-
-/* .consulting-page sl-tab-group::-webkit-scrollbar {
-    display: none;
-    width: 0;
-} */
-.consulting-page sl-tab-group::part(tabs) {
+.consulting-page .benefit-tabs {
     min-width: 371px;
-    height: 100%;
+    height: auto;
     display: flex;
-    --indicator-color: var(--color-top);
-    border-inline-end: unset;
     justify-content: space-between;
-}
-
-.consulting-page sl-tab-group::part(active-tab-indicator) {
-    right: auto;
-    border-inline-end: unset;
-}
-
-.consulting-page sl-tab::part(base) {
-    font-size: 1.5em;
-    font-weight: 400;
-    line-height: 130%;
-    padding: 24px 32px;
-    transition: all 0.15s ease-in-out;
-    color: #787887;
-    cursor: pointer;
-}
-
-.consulting-page sl-tab[aria-selected="false"]::part(base) {
-    color: #787887;
-}
-
-.consulting-page sl-tab[aria-selected="true"]::part(base) {
-    color: white;
-    border-left: solid var(--track-width) var(--indicator-color);
-    border-bottom: unset;
-    border-radius: 0;
-}
-
-.consulting-page sl-tab-panel::part(base) {
-    padding: 0;
-}
-
-.consulting-page sl-tab::part(base):hover {
-    color: var(--color-top);
-}
-
-.consulting-page sl-tab {
-    min-width: 280px;
+    flex-grow: 1;
 }
 
 /** steps **/
@@ -2710,10 +2632,6 @@ sl-dialog::part(body) {
     padding: 12px 24px;
 }
 
-.consulting-page .block.steps .sl-button::part(label) {
-    padding: 12px 24px;
-}
-
 .consulting-page .steps-container,
 .consulting-page .faq-container {
     width: 50%;
@@ -2961,28 +2879,43 @@ sl-dialog::part(body) {
     padding-top: 112px;
 }
 
-.consulting-page sl-details::part(base) {
-    background-color: #222834;
-    border: none;
-    border-radius: 24px;
+.block.faq .ant-collapse {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    background-color: transparent;
 }
-
-.consulting-page sl-details::part(header) {
+.block.faq .ant-collapse-header {
+    font-size: 1.15em;
+    font-weight: 600;
+    line-height: 150%;
+    color: white;
+    flex-direction: row-reverse;
+    align-items: center;
+    padding: 0;
+    gap: 16px;
+}
+.block.faq .ant-collapse-item {
     border: none;
     border-radius: 24px;
     font-size: 1.15em;
     font-weight: 600;
     line-height: 150%;
+
+    color: white;
+    background-color: #222834;
+    border: none;
+    border-radius: 24px;
     padding: 26.5px 24px;
-    display: flex;
-    gap: 16px;
 }
 
-.consulting-page sl-details::part(content) {
-    padding: 0 26.5px 24px;
+.block.faq .ant-collapse-content-box {
+    padding: 12px 0 0 !important;
     font-size: 1em;
     line-height: 150%;
     white-space: pre-line;
+    color: white;
+    font-weight: 400;
 }
 
 /* next */
@@ -3015,14 +2948,6 @@ sl-dialog::part(body) {
     left: 0;
 }
 
-.consulting-page .block.next .sl-button::part(label) {
-    padding: 12px 48px;
-}
-
-.consulting-page .block.next .sl-button {
-    margin-top: 16px;
-}
-
 /* contact */
 .consulting-page .block.contact {
     background-color: var(--bg-color-darkest);
@@ -3062,74 +2987,7 @@ sl-dialog::part(body) {
     margin-top: 56px;
 }
 
-.sl-button::part(base) {
-    transition: all 0.15s ease-in-out;
-}
-
-.block.contact sl-button[disabled]::part(base):hover {
-    box-shadow: unset;
-    color: white;
-}
-
-.sl-button::part(base):hover {
-    box-shadow: 2px 2px 13px #ca007c, -2px -1px 14px #ff009e;
-    color: #000;
-}
-
-.consulting-page .block.contact .sl-button::part(label) {
-    padding: 12px 62.5px;
-}
-
-.consulting-page .block.contact .sl-button,
-.consulting-page .block.contact sl-checkbox {
-    align-self: center;
-}
-
-.consulting-page .block.contact sl-checkbox {
-    margin-bottom: 17.5px;
-    color: #9494a7;
-    font-size: 0.9em;
-}
-
-.consulting-page sl-checkbox::part(control--checked) {
-    background-color: var(--color-top);
-}
-
-.consulting-page .block.contact sl-checkbox a {
-    color: #9494a7;
-    text-decoration: underline;
-}
-
-.consulting-page .block.contact sl-input::part(base) {
-    min-height: 60px;
-    background-color: #dbdbe6;
-    display: flex;
-    align-items: center;
-}
-
-.consulting-page sl-input::part(base),
-.consulting-page sl-textarea::part(base) {
-    border-radius: 16px;
-}
-
-.consulting-page sl-input::part(input),
-.consulting-page sl-textarea::part(textarea) {
-    padding: 18px 20px;
-    border-radius: 16px;
-    background-color: #dbdbe6;
-}
-
 /* footer */
-sl-button::part(label) {
-    padding: 0;
-    display: flex;
-    align-items: center;
-}
-
-sl-button::part(base) {
-    display: flex;
-    align-items: center;
-}
 
 .block.footer {
     background-color: var(--bg-color-dark);
@@ -3188,14 +3046,6 @@ sl-button::part(base) {
     padding-left: 3px;
 }
 
-.footer-community-links sl-button::part(base) {
-    transition: all 0.15s ease-in-out;
-}
-
-.footer-community-links sl-button::part(base):hover {
-    opacity: 0.6;
-}
-
 .footer-nav-links {
     display: flex;
     flex-wrap: wrap;
@@ -3217,7 +3067,7 @@ sl-button::part(base) {
     color: var(--color-top);
 }
 
-.footer-nav-links a::part(label) {
+.footer-nav-links {
     padding: 0;
 }
 
@@ -3262,7 +3112,6 @@ sl-button::part(base) {
 }
 
 @media (max-width: 1360px) {
-
     /** packages **/
     .consulting-page .block.packages .item-package.flex-column {
         max-width: 48.5%;
@@ -3270,7 +3119,6 @@ sl-button::part(base) {
 }
 
 @media (max-width: 1280px) {
-
     /** hero **/
     .consulting-page .block.first .inner {
         margin-top: 38px;
@@ -3320,7 +3168,6 @@ sl-button::part(base) {
 }
 
 @media (max-width: 1200px) {
-
     /** packages **/
     .consulting-page .block.packages .flex-row {
         gap: 20px;
@@ -3328,8 +3175,9 @@ sl-button::part(base) {
     }
 
     /** benefits **/
-    .consulting-page sl-tab-group::part(tabs) {
-        min-width: unset;
+
+    .consulting-page .benefit-tabs {
+        min-width: 300px;
     }
 
     .consulting-page .block.benefits .panel h3 {
@@ -3344,10 +3192,6 @@ sl-button::part(base) {
         padding: 40px 50px 40px 200px;
     }
 
-    .consulting-page sl-tab::part(base) {
-        font-size: 1.2em;
-    }
-
     /** steps **/
     .consulting-page .block.steps .inner {
         padding-right: 55px;
@@ -3358,7 +3202,7 @@ sl-button::part(base) {
     }
 }
 
-@media (max-width: 920px) {
+@media (max-width: 950px) {
     .consulting-page .block.first {
         padding-bottom: 180px;
     }
@@ -3367,10 +3211,6 @@ sl-button::part(base) {
         display: none;
     }
 
-    .consulting-page .nav-logo-button::part(label) {
-        margin-right: 20px;
-    }
-
     .nav-logo-consulting {
         margin-right: 20px;
     }
@@ -3397,10 +3237,6 @@ sl-button::part(base) {
         display: none;
     }
 
-    .consulting-page .block.first .sl-button {
-        max-width: unset;
-    }
-
     .consulting-page .block.first .button {
         /* width: 100px; */
         float: left;
@@ -3468,28 +3304,32 @@ sl-button::part(base) {
     }
 
     /** benefits **/
-    .consulting-page sl-tab-group {
+    .consulting-page .benefit-tabs-content {
         width: 100%;
         width: -webkit-fill-available;
-        /* Mozilla-based browsers will ignore this. */
-        /* width: fill-available; */
         width: stretch;
     }
-
-    .consulting-page sl-tab-group::part(nav) {
-        overflow: scroll;
-    }
-
-    .consulting-page sl-tab-group::part(nav)::-webkit-scrollbar {
-        width: 0;
+    .consulting-page .benefit-tabs-content, .consulting-page .block.benefits .ant-tabs {
+        display: flex;
+        flex-direction: column;
+        gap: 40px;
+        width: 100%;
+        width: -webkit-fill-available;
+        width: stretch;
     }
-
-    .consulting-page sl-tab-group::part(tabs) {
+    .consulting-page .block.benefits .ant-tabs-nav-list {
         flex-direction: row;
     }
-
-    .consulting-page sl-tab-group::part(base) {
-        flex-direction: column;
+    .consulting-page .block.benefits .ant-tabs-tab-active {
+        margin: 0;
+        border-left: unset;
+        border-bottom: 2px solid #e6008d;
+    }
+    .consulting-page .block.benefits .ant-tabs-tab {
+        padding: 12px 24px;
+    }
+    .consulting-page .benefit-tabs, .consulting-page .block.benefits .ant-tabs-nav {
+        min-width: unset;
     }
 
     .consulting-page .block.benefits .panel h3 {
@@ -3504,20 +3344,6 @@ sl-button::part(base) {
         padding: 40px 50px 40px 200px;
     }
 
-    .consulting-page sl-tab::part(base) {
-        font-size: 1.2em;
-        padding: 24px 16px;
-    }
-
-    .consulting-page sl-tab[aria-selected="true"]::part(base) {
-        border-left: unset;
-        border-bottom: solid var(--track-width) var(--indicator-color);
-    }
-
-    .consulting-page sl-tab {
-        min-width: unset;
-    }
-
     /** steps **/
     .consulting-page .block.steps .content,
     .consulting-page .block.faq .content {
@@ -3585,11 +3411,6 @@ sl-button::part(base) {
         /* flex-grow: 1; */
     }
 
-    .consulting-page .block.first .sl-button {
-        width: 100%;
-        width: -webkit-fill-available;
-    }
-
     .consulting-page .hero-img {
         height: 369px;
         max-width: none;
@@ -3693,21 +3514,17 @@ sl-button::part(base) {
         font-size: 1.9em;
     }
 
-    .consulting-page sl-tab::part(base) {
-        font-size: 1.3em;
+    .consulting-page .block.benefits {
+        padding-bottom: 48px;
+    }
+    .consulting-page .block.benefits .ant-tabs-tab {
         padding: 16px 0px;
     }
-
-    .consulting-page sl-tab-group::part(tabs) {
+    .consulting-page .block.benefits .ant-tabs-nav-list {
         gap: 16px;
     }
-
-    .consulting-page sl-tab-group::part(base) {
-        gap: 32px;
-    }
-
-    .consulting-page .block.benefits {
-        padding-bottom: 48px;
+    .consulting-page .block.benefits .ant-tabs-tab {
+        font-size: 20px;
     }
 
     /** steps **/
@@ -3889,12 +3706,10 @@ sl-button::part(base) {
     }
 
     .footer-nav-links {
-        gap: 0;
-        justify-content: space-between;
-    }
-
-    .footer-nav-links sl-button:last-child {
-        display: none;
+        gap: 20px;
+        justify-content: unset;
+        /* gap: 0px;
+        justify-content: space-between; */
     }
 
     .block.footer .footer-block {
diff --git a/docs-src/src/pages/consulting.tsx b/docs-src/src/pages/consulting.tsx
index e4c510f6310..d91aaf071a0 100644
--- a/docs-src/src/pages/consulting.tsx
+++ b/docs-src/src/pages/consulting.tsx
@@ -1,21 +1,24 @@
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-import BrowserOnly from '@docusaurus/BrowserOnly';
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import BrowserOnly from "@docusaurus/BrowserOnly";
 
-import Layout from '@theme/Layout';
-import Head from '@docusaurus/Head';
-import 'lazysizes';
+import Layout from "@theme/Layout";
+import Head from "@docusaurus/Head";
+import "lazysizes";
 
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from "react";
 
-import { getDatabase, hasIndexedDB } from '../components/database';
-const FILE_EVENT_ID = 'consulting-link-clicked';
+import { Modal } from "antd";
+import { Tabs } from "antd";
+import { Collapse } from "antd";
 
-import 'slick-carousel/slick/slick.css';
-import 'slick-carousel/slick/slick-theme.css';
+import { getDatabase, hasIndexedDB } from "../components/database";
+const FILE_EVENT_ID = "consulting-link-clicked";
 
-import '@shoelace-style/shoelace/dist/themes/light.css';
-import { ReviewsBlock } from '../components/review-block';
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
+import { ReviewsBlock } from "../components/review-block";
 
 export default function Consulting() {
     const { siteConfig } = useDocusaurusContext();
@@ -30,7 +33,7 @@ export default function Consulting() {
             const database = await getDatabase();
             const flagDoc = await database.getLocal(FILE_EVENT_ID);
             if (flagDoc) {
-                console.log('# already tracked ' + FILE_EVENT_ID);
+                console.log("# already tracked " + FILE_EVENT_ID);
             } else {
                 window.trigger(FILE_EVENT_ID, 100);
                 await database.upsertLocal(FILE_EVENT_ID, {});
@@ -38,18 +41,14 @@ export default function Consulting() {
         })();
     });
 
-    const dialogRef = useRef(null);
-
-    function handleOpenDialog() {
-        console.log('open');
-        dialogRef.current.show();
-    }
-    // // to prevent close
-    // function handleRequestClose(event) {
-    //     if (event.detail.source === "overlay") {
-    //         event.preventDefault();
-    //     }
-    // }
+    // for dialog
+    const [open, setOpen] = React.useState(false);
+    const handleOpenDialog = () => {
+        setOpen(true);
+    };
+    const handleClose = () => {
+        setOpen(false);
+    };
 
     return (
         <>
@@ -61,126 +60,55 @@ export default function Consulting() {
                 description="RxDB is a fast, local-first NoSQL-database for JavaScript Applications like Websites, hybrid Apps, Electron-Apps, Progressive Web Apps and Node.js"
             >
                 <main>
-                    <BrowserOnly fallback={<div>Loading...</div>}>
-                        {() => {
-                            const SlDialog =
-                                require('@shoelace-style/shoelace/dist/react/dialog').default;
-                            const SlButton =
-                                require('@shoelace-style/shoelace/dist/react/button').default;
-                            const SlTabGroup =
-                                require('@shoelace-style/shoelace/dist/react/tab-group').default;
-                            const SlTab =
-                                require('@shoelace-style/shoelace/dist/react/tab').default;
-                            const SlTabPanel =
-                                require('@shoelace-style/shoelace/dist/react/tab-panel').default;
-                            const SlDetails =
-                                require('@shoelace-style/shoelace/dist/react/details').default;
+                    <div className="block first centered dark">
+                        <HeroBlock onOpenDialog={handleOpenDialog}></HeroBlock>
+                    </div>
 
-                            return (
-                                <>
-                                    <div className="block first centered dark">
-                                        <HeroBlock
-                                            onOpenDialog={handleOpenDialog}
-                                            SlButton={SlButton}
-                                        ></HeroBlock>
-                                    </div>
-
-                                    <div
-                                        className="block packages centered"
-                                        id="packages"
-                                    >
-                                        <PackagesBlock
-                                            onOpenDialog={handleOpenDialog}
-                                            SlButton={SlButton}
-                                        ></PackagesBlock>
-                                    </div>
-
-                                    <div
-                                        className="block benefits centered"
-                                        id="benefits"
-                                    >
-                                        <BenefitsBlock
-                                            SlTabGroup={SlTabGroup}
-                                            SlTab={SlTab}
-                                            SlTabPanel={SlTabPanel}
-                                        ></BenefitsBlock>
-                                    </div>
-
-                                    <div
-                                        className="block steps centered"
-                                        id="steps"
-                                    >
-                                        <StepsBlock
-                                            onOpenDialog={handleOpenDialog}
-                                            SlButton={SlButton}
-                                        ></StepsBlock>
-                                    </div>
-
-                                    <div className="block review" id="reviews">
-                                        <div className="content">
-                                            <div className="inner centered">
-                                                <h2>Our success stories</h2>
-                                                <h3>
-                                                    Hear what our clients have to say about their
-                                                    experiences working with RxDB. Get to know real-world
-                                                    examples of how we've helped businesses like yours
-                                                    achieve their goals and exceed expectations.
-                                                </h3>
-                                            </div>
-                                        </div>
-                                        <ReviewsBlock></ReviewsBlock>
-                                    </div>
-
-                                    <div
-                                        className="block faq centered"
-                                        id="faq"
-                                    >
-                                        <FaqBlock
-                                            SlDetails={SlDetails}
-                                        ></FaqBlock>
-                                    </div>
-
-                                    <div
-                                        className="block next centered"
-                                        id="next"
-                                    >
-                                        <NextBlock
-                                            onOpenDialog={handleOpenDialog}
-                                            SlButton={SlButton}
-                                        ></NextBlock>
-                                    </div>
-
-                                    <div
-                                        className="block contact centered"
-                                        id="contact"
-                                    >
-                                        <ContactBlock></ContactBlock>
-                                    </div>
-                                    <SlDialog noHeader ref={dialogRef}>
-                                        <iframe
-                                            style={{
-                                                width: '100%',
-                                                height: '70vh',
-                                                borderRadius: '32px',
-                                            }}
-                                            id="request-project-form"
-                                            src="https://webforms.pipedrive.com/f/6UUQvwSg3cy0wizvNdC3pmT378WEHYcwv6tdTlPNRl2HtVm0JjBbj5MQjqVj7ePW3F"
-                                        >
-                                            Your browser doesn't support
-                                            iframes,{' '}
-                                            <a
-                                                href="https://webforms.pipedrive.com/f/6UUQvwSg3cy0wizvNdC3pmT378WEHYcwv6tdTlPNRl2HtVm0JjBbj5MQjqVj7ePW3F"
-                                                target="_blank"
-                                                rel="nofollow"
-                                            >
-                                                Click here
-                                            </a>
-                                        </iframe>
-                                    </SlDialog>
-                                </>
-                            );
-                        }}
-                    </BrowserOnly>
+                    <div className="block packages centered" id="packages">
+                        <PackagesBlock
+                            onOpenDialog={handleOpenDialog}
+                        ></PackagesBlock>
+                    </div>
+
+                    <div className="block benefits centered" id="benefits">
+                        <BenefitsBlock></BenefitsBlock>
+                    </div>
+
+                    <div className="block steps centered" id="steps">
+                        <StepsBlock
+                            onOpenDialog={handleOpenDialog}
+                        ></StepsBlock>
+                    </div>
+
+                    <div className="block review" id="reviews">
+                        <div className="content">
+                            <div className="inner centered">
+                                <h2>Our success stories</h2>
+                                <h3>
+                                    Hear what our clients have to say about
+                                    their experiences working with RxDB. Get to
+                                    know real-world examples of how we've helped
+                                    businesses like yours achieve their goals
+                                    and exceed expectations.
+                                </h3>
+                            </div>
+                        </div>
+                        <ReviewsBlock></ReviewsBlock>
+                    </div>
+
+                    <div className="block faq centered" id="faq">
+                        <FaqBlock></FaqBlock>
+                    </div>
+
+                    <div className="block next centered" id="next">
+                        <NextBlock onOpenDialog={handleOpenDialog}></NextBlock>
+                    </div>
+
+                    <div className="block contact centered" id="contact">
+                        <ContactBlock></ContactBlock>
+                    </div>
+
+                    <FormDialog open={open} onClose={handleClose} />
                 </main>
             </Layout>
         </>
@@ -188,32 +116,32 @@ export default function Consulting() {
 }
 
 // blocks
-function NavBarBlock({ onOpenDialog, SlButton }) {
+function NavBarBlock({ onOpenDialog }) {
     const items = [
         {
-            to: '/consulting#packages',
-            label: 'Packages',
-            position: 'left',
+            to: "/consulting#packages",
+            label: "Packages",
+            position: "left",
         },
         {
-            to: '/consulting#benefits',
-            label: 'Benefits',
-            position: 'left',
+            to: "/consulting#benefits",
+            label: "Benefits",
+            position: "left",
         },
         {
-            to: '/consulting#steps',
-            label: 'How it works',
-            position: 'left',
+            to: "/consulting#steps",
+            label: "How it works",
+            position: "left",
         },
         {
-            to: '/consulting#faq',
-            label: 'FAQs',
-            position: 'left',
+            to: "/consulting#faq",
+            label: "FAQs",
+            position: "left",
         },
         {
-            to: '/consulting#contact',
-            label: 'Contact us',
-            position: 'left',
+            to: "/consulting#contact",
+            label: "Contact us",
+            position: "left",
         },
     ];
 
@@ -222,15 +150,6 @@ function NavBarBlock({ onOpenDialog, SlButton }) {
             <nav className="navbar-home navbar--fixed-top">
                 <div className="navbar__inner">
                     <div className="navbar-home-links">
-                        {/* <SlButton
-                            variant="text"
-                            href="/"
-                            className="nav-logo-button"
-                        >
-                            <img src="/files/logo/logo.svg" alt="RxDB" />
-                            RxDB
-                        </SlButton> */}
-
                         <a className="nav-logo-consulting" href="/">
                             <img src="/files/logo/logo.svg" alt="RxDB" />
                             RxDB
@@ -238,14 +157,6 @@ function NavBarBlock({ onOpenDialog, SlButton }) {
 
                         <span className="navbar-home-links-mobile">
                             {items.map((item) => (
-                                // <SlButton
-                                //     href={item.to}
-                                //     variant="text"
-                                //     key={item.label}
-                                // >
-                                //     {item.label}
-                                // </SlButton>
-
                                 <a
                                     className="navbar-home-links-mobile consulting-nav-links"
                                     href={item.to}
@@ -257,21 +168,21 @@ function NavBarBlock({ onOpenDialog, SlButton }) {
                         </span>
                     </div>
 
-                    <SlButton
+                    <a
+                        className="nav-button"
                         onClick={onOpenDialog}
-                        className="sl-button nav-button"
-                        style={{ maxWidth: '123px' }}
+                        style={{ maxWidth: "123px" }}
                     >
                         Get started
-                    </SlButton>
+                    </a>
                 </div>
             </nav>
         </>
     );
 }
 
-function HeroBlock({ onOpenDialog, SlButton }) {
-    const title = 'Expert support for local database applications';
+function HeroBlock({ onOpenDialog }) {
+    const title = "Expert support for local database applications";
     const description = `We offer custom solutions to streamline your data
     management or revolutionize your local first project.
     Our team is here to guide you at every step.`;
@@ -286,34 +197,25 @@ function HeroBlock({ onOpenDialog, SlButton }) {
                     <div
                         className="flex-row hero-buttons"
                         style={{
-                            alignItems: 'center',
-                            gap: '16px',
-                            marginTop: '40px',
-                            marginBottom: '10px',
+                            alignItems: "center",
+                            gap: "16px",
+                            marginTop: "40px",
+                            marginBottom: "10px",
                         }}
                     >
-                        {/* <a className="button" onClick={onOpenDialog}>
-                                     Get started
-                                </a>
-                                <a className="button-empty" href="/consulting#steps">
-                                See how it works
-                                </a> */}
-                        <SlButton onClick={onOpenDialog} className="sl-button">
+                        <a className="button" onClick={onOpenDialog}>
                             Get started
-                        </SlButton>
-                        <SlButton
-                            href="/consulting#steps"
-                            className="sl-button sl-button-empty"
-                        >
+                        </a>
+                        <a className="button-empty" href="/consulting#steps">
                             See how it works
-                        </SlButton>
+                        </a>
                     </div>
                 </div>
                 <div
                     className="half"
                     style={{
-                        paddingTop: '42px',
-                        paddingBottom: '42px',
+                        paddingTop: "42px",
+                        paddingBottom: "42px",
                     }}
                 >
                     <img
@@ -334,8 +236,8 @@ function HeroBlock({ onOpenDialog, SlButton }) {
     );
 }
 
-function PackagesBlock({ onOpenDialog, SlButton }) {
-    const title = 'Our Service Packages';
+function PackagesBlock({ onOpenDialog }) {
+    const title = "Our Service Packages";
     const description = `We offer tailored solutions to meet your needs. Whether
     you're looking to streamline your data management
     process or revolutionize your project's backend, our
@@ -343,42 +245,42 @@ function PackagesBlock({ onOpenDialog, SlButton }) {
 
     const packageItems = [
         {
-            index: '1',
-            label: 'Quick Consulting Session',
-            price: '180€',
+            index: "1",
+            label: "Quick Consulting Session",
+            price: "180€",
             description:
-                'Schedule a quick consultancy session where the RxDB core maintainer answers all your questions and gives suggestions on how you should use RxDB or related technologies.',
-            cta: 'Schedule a call',
-            href: 'https://buy.stripe.com/14kdU1dN05SAfMA4gg',
-            target: '_blank',
-            rel: '',
+                "Schedule a quick consultancy session where the RxDB core maintainer answers all your questions and gives suggestions on how you should use RxDB or related technologies.",
+            cta: "Schedule a call",
+            href: "https://buy.stripe.com/14kdU1dN05SAfMA4gg",
+            target: "_blank",
+            rel: "",
             iframe: false,
         },
         {
-            index: '2',
-            label: 'We build it for you',
-            price: '',
+            index: "2",
+            label: "We build it for you",
+            price: "",
             description: `Let our expert team handle the heavy lifting.
             With Package 2, we take full responsibility for
             building and implementing your local JavaScript
             database solution. Sit back, relax, and watch as
             we transform your vision into reality.`,
-            cta: 'Get started',
-            href: 'https://webforms.pipedrive.com/f/6UUQvwSg3cy0wizvNdC3pmT378WEHYcwv6tdTlPNRl2HtVm0JjBbj5MQjqVj7ePW3F',
-            target: '_blank',
-            rel: 'nofollow',
+            cta: "Get started",
+            href: "https://webforms.pipedrive.com/f/6UUQvwSg3cy0wizvNdC3pmT378WEHYcwv6tdTlPNRl2HtVm0JjBbj5MQjqVj7ePW3F",
+            target: "_blank",
+            rel: "nofollow",
             iframe: true,
         },
         {
-            index: '3',
-            label: 'We build it with you',
-            price: '',
+            index: "3",
+            label: "We build it with you",
+            price: "",
             description:
-                'Prefer a more hands-on approach? Package 3 allows you to collaborate closely with our team throughout the development process. Together, we\'ll fine-tune every aspect of your solution to ensure it aligns perfectly with your goals and requirements.',
-            cta: 'Get started',
-            href: 'https://webforms.pipedrive.com/f/6UUQvwSg3cy0wizvNdC3pmT378WEHYcwv6tdTlPNRl2HtVm0JjBbj5MQjqVj7ePW3F',
-            target: '_blank',
-            rel: 'nofollow',
+                "Prefer a more hands-on approach? Package 3 allows you to collaborate closely with our team throughout the development process. Together, we'll fine-tune every aspect of your solution to ensure it aligns perfectly with your goals and requirements.",
+            cta: "Get started",
+            href: "https://webforms.pipedrive.com/f/6UUQvwSg3cy0wizvNdC3pmT378WEHYcwv6tdTlPNRl2HtVm0JjBbj5MQjqVj7ePW3F",
+            target: "_blank",
+            rel: "nofollow",
             iframe: true,
         },
     ];
@@ -393,8 +295,8 @@ function PackagesBlock({ onOpenDialog, SlButton }) {
                 <div
                     className="flex-row"
                     style={{
-                        flexWrap: 'wrap',
-                        alignItems: 'stretch',
+                        flexWrap: "wrap",
+                        alignItems: "stretch",
                     }}
                 >
                     {packageItems.map((item, index) => (
@@ -402,28 +304,28 @@ function PackagesBlock({ onOpenDialog, SlButton }) {
                             key={item.label + index}
                             className={
                                 index < 1
-                                    ? 'item-package flex-row'
-                                    : 'item-package flex-column'
+                                    ? "item-package flex-row"
+                                    : "item-package flex-column"
                             }
                             style={{
                                 // maxWidth: index > 0 ? "48.5%" : "unset",
-                                height: 'auto',
+                                height: "auto",
                                 border:
-                                    index < 1 ? 'solid 1px #E6008D' : 'none',
+                                    index < 1 ? "solid 1px #E6008D" : "none",
                             }}
                         >
                             <div
                                 className="flex-column"
                                 style={{
-                                    maxWidth: index < 1 ? '70%' : 'unset',
+                                    maxWidth: index < 1 ? "70%" : "unset",
                                 }}
                             >
                                 <h6>Package {item.index}</h6>
                                 <div
                                     className="flex-row"
                                     style={{
-                                        alignItems: 'center',
-                                        gap: '16px',
+                                        alignItems: "center",
+                                        gap: "16px",
                                     }}
                                 >
                                     <h4>{item.label}</h4>
@@ -440,18 +342,21 @@ function PackagesBlock({ onOpenDialog, SlButton }) {
                             <div
                                 className="flex-row"
                                 style={{
-                                    alignItems: 'center',
-                                    gap: '8px',
-                                    width: 'auto',
+                                    alignItems: "center",
+                                    gap: "8px",
+                                    width: "auto",
                                 }}
                             >
-                                <SlButton
-                                    variant="text"
-                                    href={item.iframe ? '' : item.href}
-                                    target={item.target ? '_blank' : '_self'}
+                                <a
                                     onClick={() =>
                                         item.iframe ? onOpenDialog() : null
                                     }
+                                    href={item.iframe ? null : item.href}
+                                    target={
+                                        item.target && !item.iframe
+                                            ? "_blank"
+                                            : "_self"
+                                    }
                                 >
                                     {item.cta}
                                     <svg
@@ -466,7 +371,7 @@ function PackagesBlock({ onOpenDialog, SlButton }) {
                                             fill="#E6008D"
                                         />
                                     </svg>
-                                </SlButton>
+                                </a>
                             </div>
                         </div>
                     ))}
@@ -476,43 +381,67 @@ function PackagesBlock({ onOpenDialog, SlButton }) {
     );
 }
 
-function BenefitsBlock({ SlTabGroup, SlTab, SlTabPanel }) {
-    const title = 'How we help you';
-    const description = 'Any type of support is possible: from full development to only helping support or code review. We can do Custom RxDB features.';
+function BenefitsBlock() {
+    const title = "How we help you";
+    const description =
+        "Any type of support is possible: from full development to only helping support or code review. We can do Custom RxDB features.";
 
     const benefitsPanels = [
         {
-            label: 'Expert Guidance',
+            label: "Expert Guidance",
             text: `We have years of experience with local first
             projects and can provide expert guidance. We
             can provide an optimal concept for the best
             solution for your specific use case.`,
-            name: 'quidance',
+            name: "quidance",
         },
         {
-            label: 'Development support',
+            label: "Development support",
             text: `Either you have your own team of developers
             or we can provide expert developers or we
             can have a mix where we provide some of the
             developers and the customer provides the
             others.`,
-            name: 'support',
+            name: "support",
         },
         {
-            label: 'Project review',
+            label: "Project review",
             text: `We can review your code and project and
             ensure that it uses best practices and has
             optimal performance. This can be done once
             before your big release or as an ongoing
             support.`,
-            name: 'review',
+            name: "review",
         },
         {
-            label: 'Tailored features',
+            label: "Tailored features",
             text: `We can developer tailored features for RxDB
             that are optimized for your specific use
             case.`,
-            name: 'feature',
+            name: "feature",
+        },
+    ];
+
+    const items = [
+        {
+            key: "0",
+            label: benefitsPanels[0].label,
+            children: <BenefitTabPanel item={benefitsPanels[0]} />,
+        },
+        {
+            key: "1",
+            label: benefitsPanels[1].label,
+            children: <BenefitTabPanel item={benefitsPanels[1]} />,
+        },
+        {
+            key: "2",
+            label: benefitsPanels[2].label,
+            children: <BenefitTabPanel item={benefitsPanels[2]} />,
+        },
+        {
+            key: "3",
+            label: benefitsPanels[3].label,
+            children: <BenefitTabPanel item={benefitsPanels[3]} />,
         },
     ];
 
@@ -524,68 +453,34 @@ function BenefitsBlock({ SlTabGroup, SlTab, SlTabPanel }) {
                     <h3>{description}</h3>
                 </div>
 
-                <SlTabGroup placement="start">
-                    <SlTab slot="nav" panel="quidance">
-                        Expert Guidance
-                    </SlTab>
-                    <SlTab slot="nav" panel="support">
-                        Development support
-                    </SlTab>
-                    <SlTab slot="nav" panel="review">
-                        Project review
-                    </SlTab>
-                    <SlTab slot="nav" panel="feature">
-                        Tailored features
-                    </SlTab>
-
-                    {benefitsPanels.map((item) => (
-                        <SlTabPanel name={item.name} key={item.label}>
-                            <div className="panel">
-                                <img
-                                    src="/img/benefits-column.svg"
-                                    className="desktop-img"
-                                    alt="columns"
-                                />
-                                <div className="mobile-img">
-                                    <img
-                                        src="/img/benefits-column-mobile.svg"
-                                        alt="columns"
-                                    />
-                                </div>
-                                <div className="panel-content">
-                                    <h3>{item.label}</h3>
-                                    <h6>{item.text}</h6>
-                                </div>
-                            </div>
-                        </SlTabPanel>
-                    ))}
-                </SlTabGroup>
+                <Tabs defaultActiveKey="1" items={items} />
             </div>
         </>
     );
 }
 
-function StepsBlock({ onOpenDialog, SlButton }) {
-    const title = 'How it works';
-    const description = 'Here you’ll find an overview of the steps involved, offering insight into how we make the complex simple, from consultation to implementation.';
+function StepsBlock({ onOpenDialog }) {
+    const title = "How it works";
+    const description =
+        "Here you’ll find an overview of the steps involved, offering insight into how we make the complex simple, from consultation to implementation.";
 
     const stepsItems = [
         {
-            label: 'Initial contact',
+            label: "Initial contact",
             text: `We talk about your needs and give suggestions
             for an optimal collaboration with us.`,
         },
         {
-            label: 'Specification Design',
-            text: 'We specify the collaboration between you and RxDB and define a roadmap.',
+            label: "Specification Design",
+            text: "We specify the collaboration between you and RxDB and define a roadmap.",
         },
         {
-            label: 'Development',
-            text: 'Realization of the roadmap.',
+            label: "Development",
+            text: "Realization of the roadmap.",
         },
         {
-            label: 'Ongoing support',
-            text: 'Regular project reviews and guidance when adding new features.',
+            label: "Ongoing support",
+            text: "Regular project reviews and guidance when adding new features.",
         },
     ];
     return (
@@ -594,13 +489,9 @@ function StepsBlock({ onOpenDialog, SlButton }) {
                 <div className="inner">
                     <h2>{title}</h2>
                     <h3>{description}</h3>
-
-                    <SlButton
-                        className="sl-button desktop-img"
-                        onClick={() => onOpenDialog()}
-                    >
+                    <a className="button desktop-img" onClick={onOpenDialog}>
                         Get started
-                    </SlButton>
+                    </a>
                 </div>
                 <div className="steps-container">
                     {stepsItems.map((item, index) => (
@@ -618,14 +509,9 @@ function StepsBlock({ onOpenDialog, SlButton }) {
                         </div>
                     ))}
                 </div>
-
-                <SlButton
-                    className="sl-button mobile-button"
-                    onClick={() => onOpenDialog()}
-                >
+                <a className="button mobile-button" onClick={onOpenDialog}>
                     Get started
-                </SlButton>
-
+                </a>
                 <img
                     className="mobile-button"
                     src="/img/steps-column.svg"
@@ -636,34 +522,36 @@ function StepsBlock({ onOpenDialog, SlButton }) {
     );
 }
 
-function FaqBlock({ SlDetails }) {
-    const title = 'FAQs';
+function FaqBlock() {
+    const title = "FAQs";
     const description = `Have questions? We've got answers. Explore our FAQs to
     learn more about our services, pricing, and approach to
     local JavaScript database solutions.`;
 
     const items = [
         {
-            label: 'Which frameworks can you support ?',
-            text: 'Everything from react to Vue to Angular to Svelte. We know all frameworks and how to use them efficiently with RxDB.',
+            key: "1",
+            label: "Which frameworks can you support ?",
+            children: `Everything from react to Vue to Angular to Svelte. We know all frameworks and how to use them efficiently with RxDB.`,
         },
         {
-            label: 'Which platforms are supported?',
-            text: `We can build web-apps for browsers, hybrid apps and
-            progressive web apps. Even server-side RxDB projects can
-            be realized.`,
+            key: "2",
+            label: "Which platforms are supported?",
+            children: `We can build web-apps for browsers, hybrid apps and progressive web apps. Even server-side RxDB projects can be realized.`,
         },
         {
-            label: 'How much does it cost?',
-            text: `This depends on:
+            key: "3",
+            label: "How much does it cost?",
+            children: `This depends on:
             - How much of the work is provided by us
             - Which type of development support do you need
             - How much of the development will be done by yourside\n
             We can offer in-house developers, near-shore and off-shore developers.`,
         },
         {
-            label: 'Do you provide 24/7 emergency support?',
-            text: 'No, sorry. This is not provided by default but we can figure out a way with you that fits your problems.',
+            key: "4",
+            label: "Do you provide 24/7 emergency support?",
+            children: `No, sorry. This is not provided by default but we can figure out a way with you that fits your problems.`,
         },
     ];
 
@@ -676,56 +564,22 @@ function FaqBlock({ SlDetails }) {
                 </div>
 
                 <div className="faq-container">
-                    {items.map((item) => (
-                        <SlDetails summary={item.label} key={item.label}>
-                            {item.text}
-                            <span slot="expand-icon">
-                                <svg
-                                    width="18"
-                                    height="11"
-                                    viewBox="0 0 18 11"
-                                    fill="none"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                >
-                                    <path
-                                        fillRule="evenodd"
-                                        clipRule="evenodd"
-                                        d="M9.52831 9.88389C9.23541 10.1768 8.76061 10.1768 8.46771 9.88389L0.82123 2.23739C0.52834 1.94449 0.52834 1.46969 0.82123 1.17679L1.17479 0.823191C1.46768 0.530291 1.94255 0.530291 2.23545 0.823191L8.99801 7.58579L15.7606 0.823191C16.0535 0.530291 16.5283 0.530291 16.8212 0.823191L17.1748 1.17679C17.4677 1.46969 17.4677 1.94449 17.1748 2.23739L9.52831 9.88389Z"
-                                        fill="#F6F6F7"
-                                    />
-                                </svg>
-                            </span>
-                            <span
-                                slot="collapse-icon"
-                                style={{
-                                    transform: 'rotate(-90deg)',
-                                }}
-                            >
-                                <svg
-                                    width="18"
-                                    height="10"
-                                    viewBox="0 0 18 10"
-                                    fill="none"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                >
-                                    <path
-                                        fillRule="evenodd"
-                                        clipRule="evenodd"
-                                        d="M8.47169 0.616109C8.76459 0.323209 9.23939 0.323209 9.53229 0.616109L17.1788 8.26261C17.4717 8.55551 17.4717 9.03031 17.1788 9.32321L16.8252 9.67681C16.5323 9.96971 16.0574 9.96971 15.7645 9.67681L9.00199 2.91421L2.23939 9.67681C1.94649 9.96971 1.47169 9.96971 1.17879 9.67681L0.82519 9.32321C0.53229 9.03031 0.53229 8.55551 0.82519 8.26261L8.47169 0.616109Z"
-                                        fill="#F6F6F7"
-                                    />
-                                </svg>
-                            </span>
-                        </SlDetails>
-                    ))}
+                    <Collapse
+                        className="faq-collapse"
+                        items={items}
+                        bordered={false}
+                        expandIcon={({ isActive }) => (
+                            <ArrowDownwardIcon rotate={isActive ? 90 : 0} />
+                        )}
+                    />
                 </div>
             </div>
         </>
     );
 }
 
-function NextBlock({ onOpenDialog, SlButton }) {
-    const title = 'Ready to take the next step?';
+function NextBlock({ onOpenDialog }) {
+    const title = "Ready to take the next step?";
     const description = `Transform your project with RxDB. Schedule your
     consultancy session today and discover the power of
     local JavaScript database solutions.`;
@@ -736,22 +590,17 @@ function NextBlock({ onOpenDialog, SlButton }) {
                 <div className="inner centered">
                     <h2>{title}</h2>
                     <h3>{description}</h3>
-
-                    <SlButton
-                        className="sl-button "
-                        onClick={() => onOpenDialog()}
-                    >
+                    <a className="button " onClick={onOpenDialog}>
                         Get started
-                    </SlButton>
+                    </a>
                 </div>
             </div>
             <img src="/img/next-column.svg" alt="columns" />
         </>
     );
 }
-
 function ContactBlock() {
-    const title = 'Still have questions?';
+    const title = "Still have questions?";
     const description = `Get in touch with us today to schedule your
     consultancy session or discuss your project
     requirements. Fill out the form below, and a
@@ -766,24 +615,30 @@ function ContactBlock() {
                         <h2>{title}</h2>
                         <h3>{description}</h3>
                     </div>
-                    <iframe
-                        style={{
-                            width: '100%',
-                            margin: '0 auto',
-                            maxWidth: '708px',
-                            borderRadius: '32px',
+                    <BrowserOnly>
+                        {() => {
+                            return (
+                                <iframe
+                                    style={{
+                                        width: "100%",
+                                        margin: "0 auto",
+                                        maxWidth: "708px",
+                                        borderRadius: "32px",
+                                    }}
+                                    src="https://webforms.pipedrive.com/f/6q8inTHyEUIvXxoWQGwymSc8VfEj3cUgikIf9IibvPWkJJYGI8gYEzXP89VJTwhdZx"
+                                >
+                                    Your browser doesn't support iframes,{" "}
+                                    <a
+                                        href="https://webforms.pipedrive.com/f/6q8inTHyEUIvXxoWQGwymSc8VfEj3cUgikIf9IibvPWkJJYGI8gYEzXP89VJTwhdZx"
+                                        target="_blank"
+                                        rel="nofollow"
+                                    >
+                                        go here
+                                    </a>
+                                </iframe>
+                            );
                         }}
-                        src="https://webforms.pipedrive.com/f/6q8inTHyEUIvXxoWQGwymSc8VfEj3cUgikIf9IibvPWkJJYGI8gYEzXP89VJTwhdZx"
-                    >
-                        Your browser doesn't support iframes,{' '}
-                        <a
-                            href="https://webforms.pipedrive.com/f/6q8inTHyEUIvXxoWQGwymSc8VfEj3cUgikIf9IibvPWkJJYGI8gYEzXP89VJTwhdZx"
-                            target="_blank"
-                            rel="nofollow"
-                        >
-                            go here
-                        </a>
-                    </iframe>
+                    </BrowserOnly>
                 </div>
             </div>
         </>
@@ -791,95 +646,79 @@ function ContactBlock() {
 }
 
 // components
-
-// form (without iframe)
-/*
-function ContactBlock() {
-    const title = "Still have questions?";
-    const description = `Get in touch with us today to schedule your
-    consultancy session or discuss your project
-    requirements. Fill out the form below, and a
-    member of our team will be in contact with
-    you shortly.`;
-
-    const [disableSubmit, setDisableSubmit] = useState(true);
-    const [responseMessage, setResponseMessage] = useState("");
-
-    function handleSubmit(e) {
-        e.preventDefault();
-        const data = new FormData(e.target);
-
-        console.log(data.get("email"), "email");
-
-        let response;
-
-        if (!response) {
-            setResponseMessage("Something went wrong. Try again later.");
-        } else {
-            setResponseMessage(
-                "Your request has been successfully submitted, and it will be reviewed as soon as possible!"
-            );
-        }
-    }
+function FormDialog({ onClose, open }) {
+    const handleClose = () => {
+        onClose();
+    };
+    return (
+        <Modal
+            className="modal-consulting-page"
+            open={open}
+            onCancel={handleClose}
+            closeIcon={null}
+            footer={null}
+        >
+            <iframe
+                style={{
+                    width: "100%",
+                    height: "70vh",
+                    borderRadius: "32px",
+                }}
+                id="request-project-form"
+                src="https://webforms.pipedrive.com/f/6UUQvwSg3cy0wizvNdC3pmT378WEHYcwv6tdTlPNRl2HtVm0JjBbj5MQjqVj7ePW3F"
+            >
+                Your browser doesn't support iframes,{" "}
+                <a
+                    href="https://webforms.pipedrive.com/f/6UUQvwSg3cy0wizvNdC3pmT378WEHYcwv6tdTlPNRl2HtVm0JjBbj5MQjqVj7ePW3F"
+                    target="_blank"
+                    rel="nofollow"
+                >
+                    Click here
+                </a>
+            </iframe>
+        </Modal>
+    );
+}
+function ArrowDownwardIcon({ rotate }) {
+    const style = {
+        transform: rotate ? "rotate(180deg)" : "",
+        transition: "transform 150ms ease",
+    };
 
     return (
-        <>
-            <div className="content">
-                <form onSubmit={(e) => handleSubmit(e)}>
-                    {!responseMessage ? (
-                        <>
-                            <div className="inner centered">
-                                <h2>{title}</h2>
-                                <h3>{description}</h3>
-                            </div>
-                            <div className="contact-form">
-                                <SlInput
-                                    placeholder="Your name"
-                                    name="name"
-                                    type="text"
-                                    required
-                                ></SlInput>
-                                <SlInput
-                                    placeholder="Your email"
-                                    name="email"
-                                    type="email"
-                                    required
-                                ></SlInput>
-                                <SlTextarea
-                                    placeholder="Type your message..."
-                                    name="message"
-                                ></SlTextarea>
-                                <SlCheckbox
-                                    onSlChange={(e) => {
-                                        setDisableSubmit(!e.target?.checked);
-                                    }}
-                                >
-                                    I accept the <a>Terms</a>
-                                </SlCheckbox>
-                                <SlButton
-                                    type="submit"
-                                    className="sl-button"
-                                    disabled={!disableSubmit ? false : true}
-                                >
-                                    Submit
-                                </SlButton>
-                            </div>
-                        </>
-                    ) : (
-                        <Submission message={responseMessage} />
-                    )}
-                </form>
+        <div style={style}>
+            <svg
+                width="18"
+                height="11"
+                viewBox="0 0 18 11"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M9.52831 9.88389C9.23541 10.1768 8.76061 10.1768 8.46771 9.88389L0.82123 2.23739C0.52834 1.94449 0.52834 1.46969 0.82123 1.17679L1.17479 0.823191C1.46768 0.530291 1.94255 0.530291 2.23545 0.823191L8.99801 7.58579L15.7606 0.823191C16.0535 0.530291 16.5283 0.530291 16.8212 0.823191L17.1748 1.17679C17.4677 1.46969 17.4677 1.94449 17.1748 2.23739L9.52831 9.88389Z"
+                    fill="#F6F6F7"
+                />
+            </svg>
+        </div>
+    );
+}
+function BenefitTabPanel({ item }) {
+    return (
+        <div className="panel">
+            <img
+                src="/img/benefits-column.svg"
+                className="desktop-img"
+                alt="columns"
+            />
+            <div className="mobile-img">
+                <img src="/img/benefits-column-mobile.svg" alt="columns" />
             </div>
-        </>
+            <div className="panel-content">
+                <h3>{item.label}</h3>
+                <h6>{item.text}</h6>
+            </div>
+        </div>
     );
 }
-*/
-// for the response (contact form submission)
-// const Submission = ({ message }) => {
-//     return (
-//         <div>
-//             <p>Thank you for your submission!</p>
-//             <h3>{message}</h3>
-//         </div>
-//     );
-// };