develop on swarm new page format

Author: NoahMaizels

docs/bee/installation/quick-start.md

@@ -256,5 +256,5 @@ Total xBZZ: 0.0000000000000000
 
 ## Next Steps
 
-With your node now fully synced, you're ready start [uploading and downloading](/docs/develop/access-the-swarm/upload-and-download) or start learning how to [develop on Swarm](/docs/develop/introduction).
+With your node now fully synced, you're ready start start learning how to [develop on Swarm](/docs/develop/introduction).
 

docs/develop/introduction.md

@@ -1,68 +1,56 @@
 ---
 title: Develop on Swarm
 id: introduction
+sidebar_label: Develop on Swarm
+hide_table_of_contents: true
+pagination_prev: null
+pagination_next: null
 ---
 
-This page is the go-to starting point for web3 developers who want to build with Swarm.  
-
-It provides everything you need to begin—from prerequisites, to running Bee, integrating Swarm into a dApp, and trying a ready-made template app.
-
-## Prerequisites
-
-This section is aimed at developers who want to integrate Swarm into their applications or build dApps directly on top of Swarm.
-
-Before you start, make sure you have:
-
-- Basic familiarity with JavaScript/TypeScript and web3 development
-- A working Node.js installation
-- Docker (recommended, for quickly running Bee and other tools)
-
-## Running a Bee Node
-
-Swarm is a p2p network composed of thousands of Bee nodes. To interact with the Swarm network you need to run a Bee node of your own: 
-
-### Option 1: Bee Quickstart Guide
-
-The Bee quickstart install guide is the fastest way to get a Bee node up and running on the mainnet. This method does require a small amount of xDAI in order to initialize the node: 
-- [Bee Quick-Start Guide](https://docs.ethswarm.org/docs/bee/installation/quick-start)  
-
-### Option 2: fdp-play (Requires Docker)
-
-For a zero-crypto required option, you can also consider the fdp-play tool. This tool will spin up a cluster of pre-funded Bee nodes and allow you to get started exploring development on Swarm right away. Just note that fdp-play is a sandbox environment - none of the tokens are real and none of the uploads will be stored by nodes on the Swarm mainnet.
-  
-- [fdp-play repo](http://github.com/fairDataSociety/fdp-play) 
-
-You can find installation and usage instructions in the fdp-play [README](https://github.com/fairDataSociety/fdp-play/blob/master/README.md).
-
-## Bee Node Basic Interaction
-
-When running your Bee node(s), you will often need to perform basic node interactions from the command line (such as checking your node's status and uploading or downloading data). There are two main options for basic command line interaction with our Bee node(s):
-
-### The Bee API (For power users)
-
-The [Bee API](/docs/bee/working-with-bee/bee-api) offers the lowest level control over your Bee node. Refer to the [API Specifications](/api/) for documentation of all the available endpoints and their usage. You can use [curl](https://en.wikipedia.org/wiki/CURL), [wget](https://en.wikipedia.org/wiki/Wget), [Postman](https://en.wikipedia.org/wiki/Postman_(software)), [Insomnia](https://insomnia.rest/), or any other tool with support for http requests to interact with the API.
-
-### Swarm-CLI (Recommended for most users)
-
-The [Swarm-CLI](/docs/bee/working-with-bee/swarm-cli) command line tool is the recommended method for basic node interaction. It's powered by the powerful `bee-js` SDK, and it covers all essential Bee use cases. Swarm-CLI is also actively maintained so that it supports all the newest features from the most recent Bee versions as they are released. It is strongly recommended as the primary tool for node interaction unless there is a specific need for using the Bee API directly.
-
-## How to Integrate with a dApp
-
-Once you've got your Bee node up and running, then you can begin integrating it into your dApp.  
-
-- **bee-js**: [`bee-js` is the official JavaScript SDK for Swarm](https://bee-js.ethswarm.org/docs/), and is the *recommended approach* for building Swarm integrated dApps. It supports both NodeJS and browser based APIs, making it easy to integrate with both frontend and backend applications.
-
-:::tip
-Refer to the next section "Template Applications." to learn about using `create-swarm-app` to generate basic project scaffolding which demonstrate specifically how to use `bee-js` to integrate Swarm into your application.
-:::
-
-- **Raw API**: If required, you may also directly interact with the [Bee HTTP API](/api/). This approach is discouraged unless explicitly required for your use case.
-
-## Template Applications
-
-Once you've got your Bee node up and running and have installed all the pre-requisites and recommended tools mentioned above, now you're really ready to get started building.
-
-The best way get started is with a simple template application to serve as an example. The [`create-swarm-app` tool](https://www.npmjs.com/package/create-swarm-app) allows you to rapidly generate simple starter templates for several different use cases, and serve a the perfect jumping off point for further learning. 
-
-For more details on using `create-swarm-app`, and for a step-by-step explanation of the template apps it can output, refer to the [guides in the bee-js docs](https://bee-js.ethswarm.org/docs/getting-started/#quickstart-with-create-swarm-app).  
-
+<div class="hub-wrap">
+
+  <div class="hub-hero">
+    <div class="container">
+      <p class="hub-sub">
+        This page is the go-to starting point for web3 developers who want to build with Swarm. The guides on this page will help you get started with setting up a Bee node, using that node to integrate your dApp with Swarm, and to begin exploring some example applications to better understand the possibilities of building on Swarm.
+      </p>
+    </div>
+  </div>
+
+  <div class="container">
+    <ul class="hub-grid">
+
+      <li class="hub-card">
+        <a class="hub-card__link" href="/docs/bee/installation/quick-start">
+          <h3 class="hub-card__title">Step One: Install Bee</h3>
+          <p class="hub-card__desc">
+            Install and run a Bee node — the entry point to the Swarm network.
+          </p>
+          <span class="hub-card__cta">Get started</span>
+        </a>
+      </li>
+
+      <li class="hub-card">
+        <a class="hub-card__link" href="/docs/develop/tools-and-features/bee-js">
+          <h3 class="hub-card__title">Step Two: Connecting your dApp with Swarm</h3>
+          <p class="hub-card__desc">
+            Use the official <code>bee-js</code> SDK to integrate storage, feeds, and more into your app.
+          </p>
+          <span class="hub-card__cta">Connect dApp</span>
+        </a>
+      </li>
+
+      <li class="hub-card">
+        <a class="hub-card__link" href="/docs/develop/access-the-swarm/host-your-website">
+          <h3 class="hub-card__title">Step Three: Explore Example dApps</h3>
+          <p class="hub-card__desc">
+            Try ready-made templates and example projects that showcase how to build on Swarm.
+          </p>
+          <span class="hub-card__cta">See examples</span>
+        </a>
+      </li>
+
+    </ul>
+  </div>
+
+</div>

src/css/custom.css

@@ -311,4 +311,119 @@ body[data-rh] .redocusaurus {
   .responsive-image {
     width: 60%;
   }
-}
+}
+
+/* --- Hub hero: minimal header, no heavy background --- */
+.hub-hero {
+  padding: 2.5rem 0 1rem;
+  background: transparent;
+}
+.hub-title {
+  font-family: "InterSemiBold", Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
+  font-size: 2.2rem;
+  letter-spacing: .2px;
+  margin: 0 0 .25rem;
+}
+.hub-sub {
+  margin: 0 0 .75rem;
+  opacity: .8;
+}
+
+/* --- Responsive grid --- */
+.hub-grid {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+}
+@media (max-width: 1200px) {
+  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 700px) {
+  .hub-grid { grid-template-columns: 1fr; }
+}
+
+/* --- Card container --- */
+.hub-card {
+  border-radius: 14px;
+  overflow: hidden; /* makes hover effects respect rounded corners */
+  transition: transform .15s ease, box-shadow .15s ease;
+  border: 1px solid rgba(0,0,0,.12);
+}
+
+/* --- Card link fills the card --- */
+.hub-card__link {
+  display: block;
+  padding: 20px 22px;
+  height: 100%;
+  border-radius: inherit;
+
+  /* background with contrast */
+  background-color: var(--ifm-background-surface);
+  color: inherit;
+  text-decoration: none;
+
+  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
+}
+
+[data-theme='dark'] .hub-card__link {
+  background-color: rgba(255,255,255,0.04);
+  border-color: rgba(255,255,255,0.12);
+}
+
+/* --- Hover/focus states for clickability --- */
+.hub-card__link:hover,
+.hub-card__link:focus {
+  background-color: var(--ifm-color-emphasis-100);
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  transform: translateY(-2px);
+  cursor: pointer;
+}
+
+[data-theme='dark'] .hub-card__link:hover,
+[data-theme='dark'] .hub-card__link:focus {
+  background-color: rgba(255,255,255,0.08);
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+}
+
+/* --- Card title --- */
+.hub-card__title {
+  margin: 0 0 10px;
+  font-size: 1.3rem;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+/* --- Card description --- */
+.hub-card__desc {
+  margin: 0 0 12px;
+  font-size: 1rem;
+  opacity: .85;
+}
+
+/* --- CTA hint inside card --- */
+.hub-card__cta {
+  display: inline-flex;
+  align-items: center;
+  gap: .4rem;
+  font-weight: 600;
+  color: var(--ifm-color-primary);
+  border-bottom: 1px solid transparent;
+}
+.hub-card__cta::after {
+  content: "→";
+  transition: transform .15s ease;
+}
+.hub-card__link:hover .hub-card__cta::after {
+  transform: translateX(3px);
+}
+
+/* Optional: tighten doc hero spacing */
+.docs-doc-page .hero {
+  padding: 2rem 0 !important;
+  background: transparent !important;
+}