refactor: Introduction and Top Bar navigation

website/docs/getting-started/setup/README.md

@@ -4,7 +4,7 @@ slug: /getting-started/setup
 sidebar_position: 3
 ---
 
-# Self Hosting
+# Self Host Appsmith
 
 You can host and manage Appsmith on your local machine or server, giving you complete control over your data privacy, security, and integrity.
 

website/docs/intro.mdx

@@ -0,0 +1,126 @@
+---
+sidebar_position: 1
+title: Introduction
+slug: /
+hide_table_of_contents: true
+hide_title: true
+---
+
+<article class="landing-hero">
+  <h1 class="landing-title">Automate Business Processes in Hours with Appsmith</h1>
+  <p class="landing-subtitle">
+    Explore our comprehensive documentation to learn how to connect your data, build custom UIs, and deploy apps seamlessly.
+  </p>
+</article>
+
+<hr className="gradient-hr" />
+
+
+## Getting Started
+
+Dive into the foundational resources to quickly get up and running with Appsmith.
+
+<div class="landing-container">
+  <div class="landing-resources-grid">
+    <a href="/getting-started/setup/installation-guides" class="landing-resource-card">
+      <div class="resource-header">
+        <IIcon icon="mdi:server" height="32" />
+        <h3>Self-Hosted Installation</h3>
+      </div>
+      <p>Follow detailed guides to install and configure Appsmith on your own infrastructure.</p>
+    </a>
+     <a href="/getting-started/tutorials/start-building" class="landing-resource-card">
+      <div class="resource-header">
+        <IIcon icon="mdi:clipboard-play" height="32" />
+        <h3>Tutorials</h3>
+      </div>
+      <p>Explore a variety of tutorials that guide you through the process of building custom applications with Appsmith.</p>
+    </a>
+    <a href="/connect-data/overview" class="landing-resource-card">
+      <div class="resource-header">
+        <IIcon icon="mdi:database-search" height="32" />
+        <h3>Connect Data</h3>
+      </div>
+      <p>Learn how to connect Appsmith to your data sources and create dynamic, data-driven applications.</p>
+    </a>
+  </div>
+</div>
+
+<br/>
+
+## Core Concepts
+
+Understand key Appsmith concepts to help you build and scale internal tools.
+
+<div class="landing-container">
+  <div class="landing-resources-grid">
+    <a href="/build-apps/overview" class="landing-resource-card">
+      <div class="resource-header">
+        <IIcon icon="mdi:application" height="32" />
+        <h3>Apps</h3>
+      </div>
+      <p>Learn how to create, manage, and customize apps within Appsmith to meet your internal tool needs.</p>
+    </a>
+    <a href="/workflows" class="landing-resource-card">
+      <div class="resource-header">
+        <IIcon icon="mdi:loop" height="32" />
+        <h3>Workflows</h3>
+      </div>
+      <p>Discover how to design and automate workflows to streamline your internal operations and boost productivity.</p>
+    </a>
+    <a href="/packages/overview" class="landing-resource-card">
+      <div class="resource-header">
+        <IIcon icon="mdi:package" height="32" />
+        <h3>Packages</h3>
+      </div>
+      <p>Understand how to use packages and connectors to extend Appsmith’s capabilities and integrate with third-party services.</p>
+    </a>
+    <a href="#" class="landing-resource-card">
+      <div class="resource-header">
+        <IIcon icon="mdi:robot" height="32" />
+        <h3>AI Assistants</h3>
+      </div>
+      <p>Leverage AI-powered assistants within Appsmith to automate tasks, enhance decision-making, and simplify processes.</p>
+    </a>
+  </div>
+</div>
+
+<br/>
+
+## Advanced Concepts
+
+Take your Appsmith knowledge further with advanced topics for customization, performance, and optimization.
+
+<div class="landing-container">
+  <div class="landing-resources-grid">
+    <a href="/write-code/overview" class="landing-resource-card">
+      <div class="resource-header">
+        <IIcon icon="mdi:script-text-outline" height="32" />
+        <h3>Write Custom Logic</h3>
+      </div>
+      <p>Learn how to write custom JavaScript code to implement dynamic behaviors and logic within your applications.</p>
+    </a>
+    <a href="/advanced-concepts/version-control-with-git" class="landing-resource-card">
+      <div class="resource-header">
+        <IIcon icon="mdi:account-cog" height="32" />
+        <h3>Manage Apps & Users</h3>
+      </div>
+      <p>Manage app permissions, control user access, and configure role-based access controls (RBAC) for your team.</p>
+    </a>
+    <a href="/help-and-support/troubleshooting-guide" class="landing-resource-card">
+      <div class="resource-header">
+        <IIcon icon="mdi:toolbox" height="32" />
+        <h3>Troubleshooting</h3>
+      </div>
+      <p>Find solutions to common issues and troubleshoot problems effectively with our comprehensive guide.</p>
+    </a>
+  </div>
+</div>
+
+<hr className="landing-gradient" />
+
+## Need Help?
+
+<div class="landing-help-text">
+  Need more help? Visit our <a href="/product/support">support page</a> or join the <a href="https://community.appsmith.com">community forum</a>.
+</div>

website/docusaurus.config.js

@@ -96,6 +96,30 @@ const config = {
           src: '/img/appsmith_logo_white.png',
         },
         items: [
+          {
+            type: 'docSidebar',
+            sidebarId: 'deploySidebar',
+            position: 'left',
+            label: 'Setup',
+          },
+          {
+            type: 'docSidebar',
+            sidebarId: 'buildSidebar',
+            position: 'left',
+            label: 'Build',
+          },
+          {
+            type: 'docSidebar',
+            sidebarId: 'manageSidebar',
+            position: 'left',
+            label: 'Manage',
+          },
+          {
+            type: 'docSidebar',
+            sidebarId: 'otherSidebar',
+            position: 'left',
+            label: 'Help & FAQ',
+          },
           {
             type: 'search',
             position: 'right',