From 93d11d32abf469f1675854340f068041da21db5d Mon Sep 17 00:00:00 2001
From: Rostislav Dugin <rostislav.dugin@outlook.com>
Date: Mon, 30 Mar 2026 13:09:38 +0300
Subject: [PATCH] update links

---
 app/cloud/page.tsx                      | 37 +++++++------------
 app/components/CloudDashboardButton.tsx |  2 +-
 app/components/DocsNavbarComponent.tsx  |  9 +++++
 app/installation/page.tsx               | 47 +++++++++++++++++++++++--
 app/mongodb-backup/page.tsx             | 41 ++++++++++++++++++---
 app/mysql-backup/page.tsx               | 41 ++++++++++++++++++---
 app/page.tsx                            | 23 ++++++------
 public/images/cloud/arrow.svg           |  3 --
 public/images/index/arrow.svg           | 10 ++++++
 9 files changed, 161 insertions(+), 52 deletions(-)
 delete mode 100644 public/images/cloud/arrow.svg
 create mode 100644 public/images/index/arrow.svg

diff --git a/app/cloud/page.tsx b/app/cloud/page.tsx
index 6369e9e..71c69b8 100644
--- a/app/cloud/page.tsx
+++ b/app/cloud/page.tsx
@@ -103,7 +103,7 @@ export default function Index() {
             </div>
 
             <h1 className="text-2xl sm:text-4xl sm:max-w-[300px] md:text-4xl leading-tight font-bold mb-4 md:mb-6 mx-auto md:max-w-[600px]">
-              Databasus Cloud
+              Databasus cloud
             </h1>
 
             <p className="text-sm sm:text-lg text-gray-200 max-w-[550px] mx-auto mb-6 md:mb-10 px-2">
@@ -113,36 +113,17 @@ export default function Index() {
             </p>
 
             <div>
-              <div className="flex flex-col sm:flex-row sm:flex-wrap items-center justify-center gap-2 sm:gap-2 max-w-[400px] mx-auto pb-0 sm:pb-[50px] lg:pb-0 lg:[0px]">
+              <div className="flex flex-col sm:flex-row sm:flex-wrap items-center justify-center gap-2 sm:gap-2 sm:max-w-[300px] mx-auto pb-0 sm:pb-[50px] lg:pb-0 lg:[0px]">
                 <CloudDashboardButton variant="hero" />
 
-                <a
-                  href="#pricing"
-                  rel="noopener noreferrer"
-                  className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2 sm:px-12 sm:py-2.5 rounded-lg font-medium border border-[#ffffff20] bg-white text-black hover:opacity-70 transition-opacity order-2"
-                >
-                  <span>Pricing</span>
-                </a>
-
                 <a
                   href="https://databasus.com"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="w-full sm:max-w-[356px] inline-flex items-center justify-center px-4 py-2 sm:px-5 sm:py-2.5 bg-white rounded-lg text-black font-medium hover:opacity-70 transition-opacity order-3"
+                  className="w-full inline-flex items-center justify-center px-4 py-2 sm:px-5 sm:py-2.5 bg-white rounded-lg text-black font-medium hover:opacity-70 transition-opacity order-3"
                 >
                   Go back to self-hosted
                 </a>
-
-                <img
-                  src="/images/cloud/arrow.svg"
-                  className="absolute hidden sm:block mt-[200px] ml-[-210px] sm:mt-[161px] sm:ml-[-260px] rotate-30 lg:ml-[435px] lg:mt-[70px] lg:rotate-0"
-                  alt="Arrow"
-                />
-
-                <div className="text-sm sm:ml-[75px] sm:mt-[180px] max-w-[250px] sm:text-left sm:absolute lg:ml-[690px] lg:mt-[5px] text-gray-200 order-4 sm:order-0">
-                  You can always switch back to self-hosted, no vendor lock-in
-                  to the cloud
-                </div>
               </div>
             </div>
           </div>
@@ -232,17 +213,23 @@ export default function Index() {
             <CloudFaqItem
               number="1"
               question="Can I increase or decrease storage later?"
-              answer={"Yes, you can adjust your storage at any time. If you need more space as your databases grow, simply upgrade your plan and the additional storage becomes available immediately.\n\nLikewise, if you find you are using less than expected, you can downgrade to a smaller plan to reduce costs. There are no penalties or lock-in periods for changing your storage allocation."}
+              answer={
+                "Yes, you can adjust your storage at any time. If you need more space as your databases grow, simply upgrade your plan and the additional storage becomes available immediately.\n\nLikewise, if you find you are using less than expected, you can downgrade to a smaller plan to reduce costs. There are no penalties or lock-in periods for changing your storage allocation."
+              }
             />
             <CloudFaqItem
               number="2"
               question="Are there any differences between Databasus Cloud and self-hosted?"
-              answer={"No. Databasus Cloud offers the exact same features as the self-hosted version — there are no paywalled extras, no premium tiers and no hidden limitations. Databasus is fully open source under the Apache 2.0 license, not an 'open core' model.\n\nThe cloud option simply means we handle the infrastructure, uptime and updates for you, so you can focus on your work instead of maintaining servers. You can switch between cloud and self-hosted at any time with no vendor lock-in."}
+              answer={
+                "No. Databasus Cloud offers the exact same features as the self-hosted version — there are no paywalled extras, no premium tiers and no hidden limitations. Databasus is fully open source under the Apache 2.0 license, not an 'open core' model.\n\nThe cloud option simply means we handle the infrastructure, uptime and updates for you, so you can focus on your work instead of maintaining servers. You can switch between cloud and self-hosted at any time with no vendor lock-in."
+              }
             />
             <CloudFaqItem
               number="3"
               question="How can I reduce the cost of Databasus Cloud?"
-              answer={"The most effective way to lower your cloud bill is to use GFS (Grandfather-Father-Son) retention policy. GFS keeps daily, weekly, monthly and yearly backups on a rotating schedule. It dramatically reduces the total number of stored backups compared to keeping every single one.\n\nFor example, instead of storing 365 daily backups for a full year, GFS might keep 7 daily, 4 weekly, 12 monthly and 1 yearly — just 24 backups covering the same time span. This means you need significantly less storage, which directly lowers your monthly price."}
+              answer={
+                "The most effective way to lower your cloud bill is to use GFS (Grandfather-Father-Son) retention policy. GFS keeps daily, weekly, monthly and yearly backups on a rotating schedule. It dramatically reduces the total number of stored backups compared to keeping every single one.\n\nFor example, instead of storing 365 daily backups for a full year, GFS might keep 7 daily, 4 weekly, 12 monthly and 1 yearly — just 24 backups covering the same time span. This means you need significantly less storage, which directly lowers your monthly price."
+              }
             />
           </div>
         </div>
diff --git a/app/components/CloudDashboardButton.tsx b/app/components/CloudDashboardButton.tsx
index f7929d5..88a58b9 100644
--- a/app/components/CloudDashboardButton.tsx
+++ b/app/components/CloudDashboardButton.tsx
@@ -13,7 +13,7 @@ export function CloudDashboardButton({
   ) : (
     <a
       href="https://app.databasus.com"
-      className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2 sm:px-12 sm:py-2.5 bg-[#0d6efd] rounded-lg text-white font-medium hover:opacity-70 transition-opacity order-1 cursor-pointer"
+      className="w-full inline-flex items-center justify-center gap-2 px-4 py-2 sm:px-12 sm:py-2.5 bg-[#0d6efd] rounded-lg text-white font-medium hover:opacity-70 transition-opacity order-1 cursor-pointer"
     >
       <span>Dashboard</span>
       <svg
diff --git a/app/components/DocsNavbarComponent.tsx b/app/components/DocsNavbarComponent.tsx
index adcdd95..b9df3ef 100644
--- a/app/components/DocsNavbarComponent.tsx
+++ b/app/components/DocsNavbarComponent.tsx
@@ -19,6 +19,15 @@ export default function DocsNavbarComponent() {
         </a>
 
         <div className="ml-auto mr-4 hidden gap-3 sm:mr-6 md:mr-10 lg:flex lg:gap-5">
+          <a
+            className="text-gray-300 hover:text-white transition-colors"
+            href="/cloud"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Cloud
+          </a>
+
           <a
             className="text-gray-300 hover:text-white transition-colors"
             href="https://t.me/databasus_community"
diff --git a/app/installation/page.tsx b/app/installation/page.tsx
index 720c499..a83a780 100644
--- a/app/installation/page.tsx
+++ b/app/installation/page.tsx
@@ -201,6 +201,49 @@ sudo curl -sSL https://raw.githubusercontent.com/databasus/databasus/refs/heads/
                 deployments.
               </p>
 
+              <div className="bg-[#1f2937]/50 border border-[#ffffff20] border-l-[3px] border-l-blue-500 rounded-lg px-4 py-4 flex items-start gap-3">
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="text-blue-500 mt-0.5 shrink-0"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <path d="M12 16v-4M12 8h.01" />
+                </svg>
+                <div>
+                  <p className="text-gray-300 my-0!">
+                    If you do not want to install or manage your own instance,
+                    you can use cloud version.{" "}
+                    <u>
+                      You can always switch back from cloud to self-hosted
+                      installation
+                    </u>{" "}
+                    without any limits or features locks. Databasus is{" "}
+                    <a
+                      target="_blank"
+                      href="https://github.com/databasus/databasus?tab=readme-ov-file#you-have-a-cloud-version--are-you-truly-open-source"
+                    >
+                      fully open source
+                    </a>{" "}
+                    and use for cloud same installation as you can self-host. We
+                    just manage infrastructure, uptime and reservation for you.
+                  </p>
+                  <a
+                    href="https://app.databasus.com"
+                    target="_blank"
+                    className="mt-3 sm:max-w-[364px] inline-flex items-center justify-center px-4 py-2 sm:px-10 sm:py-2.5 bg-blue-600 text-white! rounded-lg font-medium hover:opacity-70 transition-opacity text-sm"
+                  >
+                    Use cloud from $9/mo
+                  </a>
+                </div>
+              </div>
+
               <h2 id="system-requirements">System requirements</h2>
 
               <p>
@@ -460,9 +503,7 @@ sudo curl -sSL https://raw.githubusercontent.com/databasus/databasus/refs/heads/
                 server&apos;s IP address before starting the services.
               </p>
 
-              <h2 id="agent-mode">
-                Agent mode (physical backups &amp; PITR)
-              </h2>
+              <h2 id="agent-mode">Agent mode (physical backups &amp; PITR)</h2>
 
               <p>
                 The installation above sets up the Databasus server, which
diff --git a/app/mongodb-backup/page.tsx b/app/mongodb-backup/page.tsx
index fec8e13..0bf025c 100644
--- a/app/mongodb-backup/page.tsx
+++ b/app/mongodb-backup/page.tsx
@@ -187,10 +187,10 @@ export default function MongodbBackupPage() {
                 Docs
               </a>
               <a
-                href="/contribute"
+                href="/cloud"
                 className="py-2 hover:text-gray-300 transition-colors"
               >
-                Contribute
+                Cloud
               </a>
               <a
                 href="https://t.me/databasus_community"
@@ -265,10 +265,10 @@ export default function MongodbBackupPage() {
               via Slack, Discord or Telegram when backups complete
             </p>
 
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-2">
+            <div className="flex flex-col sm:flex-row sm:flex-wrap items-center justify-center gap-2 sm:gap-2 max-w-[400px] mx-auto pb-0 sm:pb-[50px] lg:pb-0">
               <a
                 href="#installation"
-                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-white rounded-lg text-black font-medium hover:opacity-70 transition-opacity"
+                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2 sm:px-5 sm:py-2.5 bg-white rounded-lg text-black font-medium hover:opacity-70 transition-opacity order-3"
               >
                 <span>Configure in 2 minutes</span>
                 <svg
@@ -290,7 +290,7 @@ export default function MongodbBackupPage() {
                 href="https://github.com/databasus/databasus"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg font-medium border border-[#ffffff20] bg-[#0C0E13] hover:opacity-70 transition-opacity"
+                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2 sm:px-5 sm:py-2.5 rounded-lg font-medium border border-[#ffffff20] bg-[#0C0E13] hover:opacity-70 transition-opacity order-4 sm:order-4"
               >
                 <svg
                   aria-hidden={true}
@@ -317,6 +317,37 @@ export default function MongodbBackupPage() {
 
                 <span>GitHub</span>
               </a>
+
+              <div className="w-full flex items-center gap-3 order-2 sm:max-w-[364px]">
+                <div className="flex-1 h-px bg-[#ffffff20]" />
+                <span className="text-sm text-gray-400">or</span>
+                <div className="flex-1 h-px bg-[#ffffff20]" />
+              </div>
+
+              <a
+                href="https://app.databasus.com"
+                target="_blank"
+                className="w-full sm:max-w-[364px] inline-flex items-center justify-center px-4 py-2 sm:px-5 sm:py-2.5 bg-white rounded-lg text-black font-medium hover:opacity-70 transition-opacity order-1"
+              >
+                Use cloud from $9/mo
+              </a>
+
+              <img
+                src="/images/index/arrow.svg"
+                className="absolute hidden rotate-30 lg:block lg:ml-[445px] lg:mt-[-90px] lg:rotate-0"
+                alt="Arrow"
+              />
+
+              <div className="text-sm hidden max-w-[250px] text-left lg:block lg:absolute lg:ml-[700px] lg:mt-[-30px] text-gray-200 order-6">
+                You can always switch to self-hosted, because we are{" "}
+                <a
+                  href="https://github.com/databasus/databasus?tab=readme-ov-file#you-have-a-cloud-version--are-you-truly-open-source"
+                  target="_blank"
+                  className="underline"
+                >
+                  truly open source
+                </a>
+              </div>
             </div>
           </div>
 
diff --git a/app/mysql-backup/page.tsx b/app/mysql-backup/page.tsx
index 061de89..31ae2e6 100644
--- a/app/mysql-backup/page.tsx
+++ b/app/mysql-backup/page.tsx
@@ -201,10 +201,10 @@ export default function MysqlBackupPage() {
                 Docs
               </a>
               <a
-                href="/contribute"
+                href="/cloud"
                 className="py-2 hover:text-gray-300 transition-colors"
               >
-                Contribute
+                Cloud
               </a>
               <a
                 href="https://t.me/databasus_community"
@@ -279,10 +279,10 @@ export default function MysqlBackupPage() {
               Discord or Telegram when backups complete
             </p>
 
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-2">
+            <div className="flex flex-col sm:flex-row sm:flex-wrap items-center justify-center gap-2 sm:gap-2 max-w-[400px] mx-auto pb-0 sm:pb-[50px] lg:pb-0">
               <a
                 href="#installation"
-                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-white rounded-lg text-black font-medium hover:opacity-70 transition-opacity"
+                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2 sm:px-5 sm:py-2.5 bg-white rounded-lg text-black font-medium hover:opacity-70 transition-opacity order-3"
               >
                 <span>Configure in 2 minutes</span>
                 <svg
@@ -304,7 +304,7 @@ export default function MysqlBackupPage() {
                 href="https://github.com/databasus/databasus"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-lg font-medium border border-[#ffffff20] bg-[#0C0E13] hover:opacity-70 transition-opacity"
+                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2 sm:px-5 sm:py-2.5 rounded-lg font-medium border border-[#ffffff20] bg-[#0C0E13] hover:opacity-70 transition-opacity order-4 sm:order-4"
               >
                 <svg
                   aria-hidden={true}
@@ -331,6 +331,37 @@ export default function MysqlBackupPage() {
 
                 <span>GitHub</span>
               </a>
+
+              <div className="w-full flex items-center gap-3 order-2 sm:max-w-[364px]">
+                <div className="flex-1 h-px bg-[#ffffff20]" />
+                <span className="text-sm text-gray-400">or</span>
+                <div className="flex-1 h-px bg-[#ffffff20]" />
+              </div>
+
+              <a
+                href="https://app.databasus.com"
+                target="_blank"
+                className="w-full sm:max-w-[364px] inline-flex items-center justify-center px-4 py-2 sm:px-5 sm:py-2.5 bg-white rounded-lg text-black font-medium hover:opacity-70 transition-opacity order-1"
+              >
+                Use cloud from $9/mo
+              </a>
+
+              <img
+                src="/images/index/arrow.svg"
+                className="absolute hidden rotate-30 lg:block lg:ml-[445px] lg:mt-[-90px] lg:rotate-0"
+                alt="Arrow"
+              />
+
+              <div className="text-sm hidden max-w-[250px] text-left lg:block lg:absolute lg:ml-[700px] lg:mt-[-30px] text-gray-200 order-6">
+                You can always switch to self-hosted, because we are{" "}
+                <a
+                  href="https://github.com/databasus/databasus?tab=readme-ov-file#you-have-a-cloud-version--are-you-truly-open-source"
+                  target="_blank"
+                  className="underline"
+                >
+                  truly open source
+                </a>
+              </div>
             </div>
           </div>
 
diff --git a/app/page.tsx b/app/page.tsx
index f6eb2df..09141e9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -270,12 +270,14 @@ export default function Index() {
               >
                 Docs
               </a>
+              
               <a
-                href="/contribute"
+                href="/cloud"
                 className="py-2 hover:text-gray-300 transition-colors"
               >
-                Contribute
+                Cloud
               </a>
+
               <a
                 href="https://t.me/databasus_community"
                 target="_blank"
@@ -354,7 +356,7 @@ export default function Index() {
               <div className="flex flex-col sm:flex-row sm:flex-wrap items-center justify-center gap-2 sm:gap-2 max-w-[400px] mx-auto pb-0 sm:pb-[50px] lg:pb-0 lg:[0px]">
                 <a
                   href="#installation"
-                  className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2 sm:px-5 sm:py-2.5 bg-white rounded-lg text-black font-medium hover:opacity-70 transition-opacity order-1"
+                  className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2 sm:px-5 sm:py-2.5 bg-white rounded-lg text-black font-medium hover:opacity-70 transition-opacity order-3"
                 >
                   <span>Configure in 2 minutes</span>
                   <svg
@@ -376,7 +378,7 @@ export default function Index() {
                   href="https://github.com/databasus/databasus"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2 sm:px-5 sm:py-2.5 rounded-lg font-medium border border-[#ffffff20] bg-[#0C0E13] hover:opacity-70 transition-opacity order-3 sm:order-2"
+                  className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2 sm:px-5 sm:py-2.5 rounded-lg font-medium border border-[#ffffff20] bg-[#0C0E13] hover:opacity-70 transition-opacity order-4 sm:order-4"
                 >
                   <svg
                     aria-hidden={true}
@@ -404,26 +406,27 @@ export default function Index() {
                   <span>GitHub</span>
                 </a>
 
-                <div className="w-full flex items-center gap-3 order-4 sm:max-w-[364px]">
+                <div className="w-full flex items-center gap-3 order-2 sm:max-w-[364px]">
                   <div className="flex-1 h-px bg-[#ffffff20]" />
                   <span className="text-sm text-gray-400">or</span>
                   <div className="flex-1 h-px bg-[#ffffff20]" />
                 </div>
 
                 <a
-                  href="/cloud"
-                  className="w-full sm:max-w-[364px] inline-flex items-center justify-center px-4 py-2 sm:px-5 sm:py-2.5 bg-white rounded-lg text-black font-medium hover:opacity-70 transition-opacity order-5"
+                  href="https://app.databasus.com"
+                  target="_blank"
+                  className="w-full sm:max-w-[364px] inline-flex items-center justify-center px-4 py-2 sm:px-5 sm:py-2.5 bg-white rounded-lg text-black font-medium hover:opacity-70 transition-opacity order-1"
                 >
                   Use cloud from $9/mo
                 </a>
 
                 <img
-                  src="/images/cloud/arrow.svg"
-                  className="absolute hidden sm:block mt-[200px] ml-[-210px] sm:mt-[190px] sm:ml-[-260px] rotate-30 lg:ml-[445px] lg:mt-[90px] lg:rotate-0"
+                  src="/images/index/arrow.svg"
+                  className="absolute hidden rotate-30 lg:block lg:ml-[445px] lg:mt-[-90px] lg:rotate-0"
                   alt="Arrow"
                 />
 
-                <div className="text-sm sm:ml-[75px] sm:mt-[200px] max-w-[250px] text-center sm:text-left sm:absolute lg:ml-[690px] lg:mt-[25px] text-gray-200 order-6 sm:order-0">
+                <div className="text-sm hidden max-w-[250px] text-left lg:block lg:absolute lg:ml-[700px] lg:mt-[-30px] text-gray-200 order-6">
                   You can always switch to self-hosted, because we are{" "}
                   <a
                     href="https://github.com/databasus/databasus?tab=readme-ov-file#you-have-a-cloud-version--are-you-truly-open-source"
diff --git a/public/images/cloud/arrow.svg b/public/images/cloud/arrow.svg
deleted file mode 100644
index b6c420a..0000000
--- a/public/images/cloud/arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="60" height="20" viewBox="0 0 60 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M59.8936 4.82281C60.2014 4.05368 59.8274 3.18066 59.0583 2.87286C58.2892 2.56506 57.4162 2.93903 57.1084 3.70815L58.501 4.26548L59.8936 4.82281ZM40.9988 17.7661L40.6224 16.3141L40.9988 17.7661ZM1.19266 2.79737C0.381799 2.96706 -0.137975 3.76195 0.0317158 4.57282L2.79698 17.7866C2.96667 18.5974 3.76157 19.1172 4.57243 18.9475C5.38329 18.7778 5.90306 17.9829 5.73337 17.1721L3.27536 5.42651L15.0209 2.9685C15.8318 2.79881 16.3516 2.00391 16.1819 1.19305C16.0122 0.382187 15.2173 -0.137584 14.4064 0.0321059L1.19266 2.79737ZM58.501 4.26548C57.1084 3.70815 57.1086 3.70748 57.1089 3.70685C57.1089 3.70669 57.1092 3.70609 57.1093 3.70577C57.1096 3.70512 57.1098 3.70463 57.1099 3.70428C57.1102 3.70359 57.1102 3.70349 57.11 3.70398C57.1096 3.70496 57.1083 3.70828 57.1059 3.71389C57.1012 3.72511 57.0926 3.74547 57.0798 3.77446C57.0543 3.83247 57.0123 3.92496 56.9527 4.04799C56.8335 4.29414 56.6437 4.6619 56.3732 5.11984C55.8318 6.03633 54.9697 7.30932 53.7057 8.69067C51.1849 11.4456 47.0532 14.6468 40.6224 16.3141L40.9988 17.7661L41.3753 19.218C48.4443 17.3853 53.0637 13.8363 55.919 10.7159C57.3431 9.15957 58.3253 7.71367 58.9562 6.64568C59.2718 6.11137 59.5002 5.67049 59.6525 5.35607C59.7287 5.19881 59.786 5.07303 59.8257 4.98283C59.8455 4.93772 59.861 4.90149 59.8723 4.87466C59.8779 4.86124 59.8825 4.85017 59.886 4.84151C59.8878 4.83717 59.8893 4.83344 59.8906 4.83033C59.8912 4.82877 59.8918 4.82736 59.8923 4.82611C59.8925 4.82548 59.8929 4.82465 59.893 4.82434C59.8933 4.82355 59.8936 4.82281 58.501 4.26548ZM40.9988 17.7661L40.6224 16.3141C37.6086 17.0954 33.7443 16.7574 29.5012 15.6793C25.2896 14.6093 20.8674 12.8532 16.8201 10.9685C12.7791 9.0867 9.14884 7.09406 6.5269 5.57031C5.217 4.80904 4.16136 4.16632 3.43497 3.71506C3.07183 3.48947 2.79115 3.31184 2.60229 3.19128C2.50787 3.13101 2.43642 3.08501 2.38911 3.05444C2.36546 3.03915 2.34785 3.02772 2.33642 3.02029C2.3307 3.01657 2.32653 3.01385 2.32392 3.01216C2.32262 3.01131 2.32171 3.01071 2.3212 3.01037C2.32094 3.01021 2.32084 3.01015 2.32071 3.01006C2.32072 3.01007 2.32082 3.01013 1.49991 4.26556C0.679003 5.52099 0.679303 5.52119 0.679706 5.52145C0.679972 5.52163 0.680473 5.52196 0.681008 5.5223C0.682071 5.523 0.683531 5.52395 0.685384 5.52516C0.689091 5.52758 0.694369 5.53101 0.701202 5.53546C0.714867 5.54434 0.734748 5.55724 0.760698 5.57401C0.812602 5.60756 0.888793 5.6566 0.988088 5.71998C1.18667 5.84675 1.47774 6.03094 1.85188 6.26337C2.60005 6.72815 3.68106 7.38625 5.0195 8.16409C7.69425 9.71855 11.4075 11.7573 15.5537 13.6881C19.6937 15.616 24.3025 17.4538 28.7625 18.587C33.1911 19.7122 37.6392 20.1867 41.3753 19.218L40.9988 17.7661Z" fill="#0D6EFD"/>
-</svg>
diff --git a/public/images/index/arrow.svg b/public/images/index/arrow.svg
new file mode 100644
index 0000000..67353e4
--- /dev/null
+++ b/public/images/index/arrow.svg
@@ -0,0 +1,10 @@
+<svg width="60" height="20" viewBox="0 0 60 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_387_137)">
+<path d="M59.894 15.1772C60.2018 15.9463 59.8278 16.8193 59.0587 17.1271C58.2896 17.4349 57.4166 17.061 57.1088 16.2918L58.5014 15.7345L59.894 15.1772ZM1.19305 17.2026C0.382191 17.0329 -0.137583 16.238 0.0321083 15.4272L2.79737 2.2134C2.96706 1.4026 3.76196 0.882798 4.57282 1.0525C5.38368 1.2222 5.90345 2.0171 5.73376 2.8279L3.27575 14.5735L15.0213 17.0315C15.8322 17.2012 16.352 17.9961 16.1823 18.8069C16.0126 19.6178 15.2177 20.1376 14.4068 19.9679L1.19305 17.2026ZM58.5014 15.7345C57.1088 16.2918 57.109 16.2925 57.1093 16.2931C57.1093 16.2933 57.1096 16.2939 57.1097 16.2942C57.11 16.2949 57.1102 16.2954 57.1103 16.2957C57.1105 16.2962 57.1106 16.2964 57.1103 16.2957C57.1099 16.2947 57.1087 16.2917 57.1063 16.2861C57.1016 16.2749 57.093 16.2545 57.0802 16.2255C57.0547 16.1675 57.0127 16.075 56.9531 15.952C56.8339 15.7059 56.6441 15.3381 56.3736 14.8802C55.8322 13.9637 54.9701 12.6907 53.7061 11.3093C51.1853 8.5544 47.0536 5.3532 40.6228 3.6859L40.9992 2.2339L41.3757 0.781998C48.4447 2.6147 53.0641 6.1637 55.9194 9.2841C57.3435 10.8404 58.3257 12.2863 58.9566 13.3543C59.2722 13.8886 59.5006 14.3295 59.6529 14.6439C59.7291 14.8012 59.7864 14.927 59.8261 15.0172C59.8459 15.0623 59.8614 15.0985 59.8727 15.1253C59.8783 15.1388 59.8829 15.1498 59.8864 15.1585C59.8882 15.1628 59.8897 15.1666 59.891 15.1697C59.8916 15.1712 59.8922 15.1726 59.8927 15.1739C59.8929 15.1745 59.8933 15.1753 59.8934 15.1757C59.8937 15.1764 59.894 15.1772 58.5014 15.7345ZM40.9992 2.2339L40.6228 3.6859C37.609 2.9046 33.7447 3.2426 29.5016 4.3207C25.29 5.3907 20.8678 7.1468 16.8205 9.0315C12.7795 10.9133 9.14923 12.9059 6.52729 14.4297C5.21739 15.191 4.16175 15.8337 3.43536 16.2849C3.07222 16.5105 2.79154 16.6882 2.60268 16.8087C2.50826 16.869 2.43681 16.915 2.3895 16.9456C2.36585 16.9608 2.34824 16.9723 2.33681 16.9797C2.33109 16.9834 2.32692 16.9861 2.32431 16.9878C2.32301 16.9887 2.3221 16.9893 2.32159 16.9896C2.32172 16.9895 2.32133 16.9898 2.32159 16.9896C2.3216 16.9896 2.32121 16.9899 1.5003 15.7344C0.679395 14.479 0.679695 14.4788 0.680098 14.4785C0.680364 14.4784 0.680865 14.478 0.6814 14.4777C0.682463 14.477 0.683923 14.476 0.685776 14.4748C0.689483 14.4724 0.694761 14.469 0.701594 14.4645C0.715259 14.4557 0.73514 14.4428 0.76109 14.426C0.812994 14.3924 0.889185 14.3434 0.98848 14.28C1.18706 14.1532 1.47813 13.9691 1.85227 13.7366C2.60044 13.2718 3.68145 12.6137 5.01989 11.8359C7.69464 10.2814 11.4079 8.2427 15.5541 6.3119C19.6941 4.384 24.3029 2.5462 28.7629 1.413C33.1915 0.287798 37.6396 -0.186702 41.3757 0.781998L40.9992 2.2339Z" fill="#0D6EFD"/>
+</g>
+<defs>
+<clipPath id="clip0_387_137">
+<rect width="60" height="20" fill="white" transform="matrix(1 0 0 -1 0 20)"/>
+</clipPath>
+</defs>
+</svg>