fix: resolved the product tour issue

estuary · Sep 20, 2023 · 974b62f · 974b62f
1 parent 7078ceb
commit 974b62f
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 98 deletions.
diff --git a/src/pages/why.tsx b/src/pages/why.tsx
@@ -267,110 +267,112 @@ const WhyEstuary = () => {
     return (
         <main className="why-estuary">
             <div className="sidebar-wrap">
-                <div className="sidebar-logo">
-                    <Link className="global-header-logo-link" to="/">
-                        <ColoredLogo
-                            className="global-header-logo"
-                            style={{ width: 27, height: 35 }}
-                        />
-                        <h1 className={"global-header-title"}>Estuary</h1>
-                    </Link>
-                </div>
-                <div className="sidebar-nav">
-                    <div
-                        className={`nav-item ${
-                            activePage === 0 ? "active" : ""
-                        }`}
-                        onClick={() => setActivePage(0)}
-                    >
-                        Welcome
+                <div>
+                    <div className="sidebar-logo">
+                        <Link className="global-header-logo-link" to="/">
+                            <ColoredLogo
+                                className="global-header-logo"
+                                style={{ width: 27, height: 35 }}
+                            />
+                            <h1 className={"global-header-title"}>Estuary</h1>
+                        </Link>
                     </div>
-                    <div
-                        className={`nav-item ${
-                            activePage === 1 ||
-                            activePage === 2 ||
-                            activePage === 3
-                                ? "active"
-                                : ""
-                        }`}
-                        onClick={() => setActivePage(1)}
-                    >
-                        Extract
-                    </div>
-                    <ul className="item-steps">
-                        <li
-                            className={`${activePage === 1 ? "active" : ""}`}
-                            onClick={() => setActivePage(1)}
+                    <div className="sidebar-nav">
+                        <div
+                            className={`nav-item ${
+                                activePage === 0 ? "active" : ""
+                            }`}
+                            onClick={() => setActivePage(0)}
                         >
-                            Create Capture
-                        </li>
-                        <li
-                            className={`${activePage === 2 ? "active" : ""}`}
-                            onClick={() => setActivePage(2)}
-                        >
-                            Discover Schema
-                        </li>
-                        <li
-                            className={`${activePage === 3 ? "active" : ""}`}
-                            onClick={() => setActivePage(3)}
+                            Welcome
+                        </div>
+                        <div
+                            className={`nav-item ${
+                                activePage === 1 ||
+                                activePage === 2 ||
+                                activePage === 3
+                                    ? "active"
+                                    : ""
+                            }`}
+                            onClick={() => setActivePage(1)}
                         >
-                            Monitoring
-                        </li>
-                    </ul>
-                    <div
-                        className={`nav-item ${
-                            activePage === 4 || activePage === 5 ? "active" : ""
-                        }`}
-                        onClick={() => setActivePage(4)}
-                    >
-                        Manage
-                    </div>
-                    <ul className="item-steps">
-                        <li
-                            className={`${activePage === 4 ? "active" : ""}`}
+                            Extract
+                        </div>
+                        <ul className="item-steps">
+                            <li
+                                className={`${activePage === 1 ? "active" : ""}`}
+                                onClick={() => setActivePage(1)}
+                            >
+                                Create Capture
+                            </li>
+                            <li
+                                className={`${activePage === 2 ? "active" : ""}`}
+                                onClick={() => setActivePage(2)}
+                            >
+                                Discover Schema
+                            </li>
+                            <li
+                                className={`${activePage === 3 ? "active" : ""}`}
+                                onClick={() => setActivePage(3)}
+                            >
+                                Monitoring
+                            </li>
+                        </ul>
+                        <div
+                            className={`nav-item ${
+                                activePage === 4 || activePage === 5 ? "active" : ""
+                            }`}
                             onClick={() => setActivePage(4)}
                         >
-                            Store history & real-time
-                        </li>
-                        <li
-                            className={`${activePage === 5 ? "active" : ""}`}
-                            onClick={() => setActivePage(5)}
-                        >
-                            Streaming SQL Transforms
-                        </li>
-                    </ul>
-                    <div
-                        className={`nav-item ${
-                            activePage === 6 ? "active" : ""
-                        }`}
-                        onClick={() => setActivePage(6)}
-                    >
-                        Load
-                    </div>
-                    <ul className="item-steps">
-                        <li
-                            className={`${activePage === 6 ? "active" : ""}`}
+                            Manage
+                        </div>
+                        <ul className="item-steps">
+                            <li
+                                className={`${activePage === 4 ? "active" : ""}`}
+                                onClick={() => setActivePage(4)}
+                            >
+                                Store history & real-time
+                            </li>
+                            <li
+                                className={`${activePage === 5 ? "active" : ""}`}
+                                onClick={() => setActivePage(5)}
+                            >
+                                Streaming SQL Transforms
+                            </li>
+                        </ul>
+                        <div
+                            className={`nav-item ${
+                                activePage === 6 ? "active" : ""
+                            }`}
                             onClick={() => setActivePage(6)}
                         >
-                            Stream to destination
-                        </li>
-                    </ul>
-                    <div
-                        className={`nav-item ${
-                            activePage === 7 ? "active" : ""
-                        }`}
-                        onClick={() => setActivePage(7)}
-                    >
-                        Pricing
-                    </div>
-                    <ul className="item-steps">
-                        <li
-                            className={`${activePage === 7 ? "active" : ""}`}
+                            Load
+                        </div>
+                        <ul className="item-steps">
+                            <li
+                                className={`${activePage === 6 ? "active" : ""}`}
+                                onClick={() => setActivePage(6)}
+                            >
+                                Stream to destination
+                            </li>
+                        </ul>
+                        <div
+                            className={`nav-item ${
+                                activePage === 7 ? "active" : ""
+                            }`}
                             onClick={() => setActivePage(7)}
                         >
-                            Flat Pricing
-                        </li>
-                    </ul>
+                            Pricing
+                        </div>
+                        <ul className="item-steps">
+                            <li
+                                className={`${activePage === 7 ? "active" : ""}`}
+                                onClick={() => setActivePage(7)}
+                            >
+                                Flat Pricing
+                            </li>
+                        </ul>
+                    </div>
                 </div>
                 <div className="ctas-wrap">
                     <OutboundLink

diff --git a/src/style.less b/src/style.less
@@ -5098,6 +5098,9 @@ table th {
 .why-estuary {
     display: flex;
     .sidebar-wrap {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
         max-width: 340px;
         width: 100%;
         height: 100%;
@@ -5156,10 +5159,8 @@ table th {
         .ctas-wrap {
             display: flex;
             flex-direction: column;
-            position: absolute;
-            bottom: 50px;
-            left: 0;
             width: 100%;
+            padding-top: 30px;
             .pipeline-link {
                 max-width: 195px;
                 margin-left: auto;