..

Author: harshilp24

website/docs/packages/overview.md

@@ -18,9 +18,7 @@ tags={[
 
 <!-- vale on -->
 
-In modern application development, reusability is key to building efficiently and maintaining high standards. Appsmith empowers you to embrace reusability through Packages, a powerful feature set designed to help you create, share, and manage reusable logic and UI components across your applications.
-
-Whether you need to standardize backend operations or ensure a consistent user interface, Packages provide the tools to build faster, reduce redundancy, and improve the overall quality of your Appsmith applications.
+Reusability is an integral part of application development, offering various advantages like speeding up the development process, centralizing business logic, and introducing standardization into applications. Appsmith enhances reusability by providing a feature set, which allows you to reuse widgets, queries, and JS logic across your applications.
 
 
 :::info
@@ -29,18 +27,18 @@ For Appsmith version v1.57 or earlier, refer to the legacy documentation for the
 
 ## Packages
 
-A **Package** is a reusable bundle that can be shared across apps in the same workspace. There are two types of packages in Appsmith:
+A Package is a reusable bundle that can be shared across apps in the same workspace. There are two types of packages in Appsmith:
 
 
 ### Code Packages
 
-Code Packages are reusable bundles that group multiple logic-based modules, which can be shared across applications within the same workspace.
+Code Packages are reusable bundles that group multiple logic-based modules, which can be shared across applications within the same workspace. Inside a Code Package, you can create two types of modules—Query Modules and JavaScript Modules. 
 
-Inside a Code Package, you can create two types of modules—Query Modules and JavaScript Modules. These modules allow you to encapsulate backend logic in a reusable, version-controlled way, helping you standardize how data is fetched and processed across your apps.
+These modules allow you to encapsulate backend logic in a reusable, version-controlled way, helping you standardize how data is fetched and processed across your apps.
 
 
 <ZoomImage
-  src="/img/modules-landing.png" 
+  src="/img/code-package.png" 
   alt="Modules image"
   caption=""
 />
@@ -54,7 +52,8 @@ Inside a Code Package, you can create two types of modules—Query Modules and J
 
 UI Packages are reusable bundles that group user interface components and related logic, which can be shared across applications within the same workspace. Inside a UI Package, you can create one or more UI Modules. 
 
-A **UI Module** combines widgets, queries, JavaScript, inputs, and outputs into a self-contained, configurable component. This allows you to build dynamic, branded UI blocks—like login forms or dashboards—that can be reused and customized across different applications without duplicating logic.
+A **UI Module** combines widgets, queries, JavaScript, inputs, and outputs into a self-contained, configurable component. This allows you to build dynamic, branded UI blocks such as login forms or dashboards that can be reused and customized across different applications without duplicating logic.
+
 
 
 
@@ -69,19 +68,36 @@ A **UI Module** combines widgets, queries, JavaScript, inputs, and outputs into
 ## Getting started
 
 
-<div className="containerGridSampleApp">
-   <a className="containerAnchor containerColumnSampleApp columnGrid column-two" href="/packages/tutorial/query-module">
-      <div className="containerHead">
-         <div className="containerHeading">
-            <strong>Tutorial</strong>
-         </div>
-      </div>
-      <hr className="gradient-hr" />
-      <div className="containerDescription">
-         Take the quick tutorial to learn the basics of working with packages in Appsmith, including how to create and manage them.
-      </div>
-   </a>
-</div>
-
 
 
+<div className="containerGridSampleApp three-column-layout">
+  <a className="containerAnchor containerColumnSampleApp columnGrid" href="/packages/tutorial/query-module">
+    <div className="containerHead">
+      <div className="containerHeading"><strong>Query Module</strong></div>
+    </div>
+    <hr className="gradient-hr" />
+    <div className="containerDescription">
+      Learn how to create reusable queries that can be shared across different applications to fetch and manage data.
+    </div>
+  </a>
+
+  <a className="containerAnchor containerColumnSampleApp columnGrid" href="/packages/tutorial/js-module">
+    <div className="containerHead">
+      <div className="containerHeading"><strong>JS Module</strong></div>
+    </div>
+    <hr className="gradient-hr" />
+    <div className="containerDescription">
+      Understand how to build reusable JavaScript logic to standardize data handling and utilities across your apps.
+    </div>
+  </a>
+
+  <a className="containerAnchor containerColumnSampleApp columnGrid" href="/packages/tutorial/ui-module">
+    <div className="containerHead">
+      <div className="containerHeading"><strong>UI Module</strong></div>
+    </div>
+    <hr className="gradient-hr" />
+    <div className="containerDescription">
+      Explore how to bundle widgets, logic, and configuration into self-contained UI blocks that work across multiple apps.
+    </div>
+  </a>
+</div>

website/src/css/custom.css

@@ -910,4 +910,10 @@ h4+.tags {
   background: linear-gradient(to right, #f0f4f7, #d3d3d3);
   margin: 20px 0;
   padding-bottom: 2px;
-}
+}
+
+.three-column-layout {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}