From efd0d96a3590c101bbe516f2f0e4d01592525317 Mon Sep 17 00:00:00 2001
From: 0xBora <133051383+0xBora@users.noreply.github.com>
Date: Sat, 26 Jul 2025 00:41:31 +0200
Subject: [PATCH 1/4] feature: add "Develop on Cardano" section to Builder
 Tools page

---
 src/pages/portalhero.js           |  26 +++---
 src/pages/tools/index.js          |  35 +++++++-
 src/pages/tools/styles.module.css | 130 ++++++++++++++++++++++++++++++
 3 files changed, 177 insertions(+), 14 deletions(-)

diff --git a/src/pages/portalhero.js b/src/pages/portalhero.js
index da76c16931..1e34e9c3eb 100644
--- a/src/pages/portalhero.js
+++ b/src/pages/portalhero.js
@@ -13,18 +13,20 @@ function PortalHero({ title, description, cta, filename, url }) {
       <div className="container">
         <h1 className="hero__title">{title}</h1>
         <p className="hero__subtitle">{description}</p>
-        <div className={styles.buttons}>
-          <Link
-            className={clsx(
-              "button button--outline button--warn button--lg",
-              styles.getStarted
-            )}
-            {...(filename && {href: EDIT_URL, target: "_blank"})}
-            {...(!filename && {to: url})}
-          >
-            {cta}
-          </Link>
-        </div>
+        {cta && (
+          <div className={styles.buttons}>
+            <Link
+              className={clsx(
+                "button button--outline button--warn button--lg",
+                styles.getStarted
+              )}
+              {...(filename && {href: EDIT_URL, target: "_blank"})}
+              {...(!filename && {to: url})}
+            >
+              {cta}
+            </Link>
+          </div>
+        )}
       </div>
     </header>
   );
diff --git a/src/pages/tools/index.js b/src/pages/tools/index.js
index ed48aef9b5..73b416ca3d 100644
--- a/src/pages/tools/index.js
+++ b/src/pages/tools/index.js
@@ -167,12 +167,39 @@ function ShowcaseHeader() {
     <PortalHero
       title={TITLE}
       description={DESCRIPTION}
-      cta={CTA}
-      filename={FILENAME}
     />
   );
 }
 
+function DevelopOnCardanoSection() {
+  return (
+    <section className={styles.developSection}>
+      <div className="container">
+        <div className={styles.developGrid}>
+          <div>
+            <h2>Develop on Cardano</h2>
+            <p>
+              Discover the tools and libraries that power Cardano development.
+              From smart contract languages to blockchain APIs, these community-built
+              tools help you create decentralized applications, integrate with
+              wallets, and interact with the Cardano ecosystem.
+            </p>
+          </div>
+          <div className={styles.developCta}>
+            <h3>Need help choosing the right tools?</h3>
+            <p>
+              Get tailored recommendations for APIs, indexers, SDKs, and infrastructure that match your project's needs.
+            </p>
+            <a href="https://cardano-foundation.github.io/cardano-tool-compass/questionnaire/B1/" className={styles.ctaLink} target="_blank">
+              Tool Compass →
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 function ShowcaseFilters() {
   const filteredProjects = useFilteredProjects();
 
@@ -336,6 +363,9 @@ function SearchBar() {
           debouncedHistoryPush(newSearch.toString());
         }}
       />
+      <a href={`https://github.com/cardano-foundation/developer-portal/edit/staging/src/data/${FILENAME}`} target="_blank" className={styles.addToolLink}>
+        Add Your Tool →
+      </a>
     </div>
   );
 }
@@ -358,6 +388,7 @@ function Showcase() {
     <Layout title={TITLE} description={DESCRIPTION}>
       <MetaData/> 
       <ShowcaseHeader />
+      <DevelopOnCardanoSection />
       <ShowcaseFilters selectedTags={selectedTags} toggleTag={toggleTag} />
       <ShowcaseCards filteredProjects={filteredProjects} />
       <OpenStickyButton />
diff --git a/src/pages/tools/styles.module.css b/src/pages/tools/styles.module.css
index 27a8cc5ce3..d89b04eb43 100644
--- a/src/pages/tools/styles.module.css
+++ b/src/pages/tools/styles.module.css
@@ -90,6 +90,9 @@
 
 .searchContainer {
   margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
 }
 
 .searchContainer input {
@@ -99,6 +102,20 @@
   border: 1px solid gray;
 }
 
+.addToolLink {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.9rem;
+  transition: color 0.2s ease;
+  white-space: nowrap;
+}
+
+.addToolLink:hover {
+  color: var(--ifm-color-primary-dark);
+  text-decoration: none;
+}
+
 .showcaseList {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -131,4 +148,117 @@
 
 .ourFavorites {
   margin-right: 0.7rem;
+}
+
+.developSection {
+  padding: 3rem 0;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.developGrid {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 4rem;
+  align-items: center;
+}
+
+.developGrid h2 {
+  font-size: 2.25rem;
+  font-weight: 700;
+  margin-bottom: 1.25rem;
+  line-height: 1.2;
+}
+
+.developGrid > div:first-child p {
+  font-size: 1.125rem;
+  line-height: 1.7;
+  color: var(--ifm-color-content-secondary);
+  margin: 0;
+}
+
+.developCta {
+  padding: 1rem 0 1rem 2.5rem;
+  position: relative;
+}
+
+.developCta::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 1rem;
+  bottom: 1rem;
+  width: 3px;
+  background: var(--ifm-color-primary);
+}
+
+.developCta h3 {
+  font-size: 1.3rem;
+  font-weight: 600;
+  margin-bottom: 0.875rem;
+  line-height: 1.3;
+}
+
+.developCta p {
+  font-size: 0.95rem;
+  line-height: 1.5;
+  color: var(--ifm-color-content-secondary);
+  margin-bottom: 1.125rem;
+}
+
+.ctaLink {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+  font-weight: 600;
+  transition: color 0.2s ease;
+}
+
+.ctaLink:hover {
+  color: var(--ifm-color-primary-dark);
+  text-decoration: none;
+}
+
+@media screen and (max-width: 996px) {
+  .developGrid {
+    grid-template-columns: 1fr;
+    gap: 2.5rem;
+    text-align: center;
+  }
+  
+  .developCta {
+    padding: 2rem 0 0 0;
+    border-top: 3px solid var(--ifm-color-primary);
+  }
+  
+  .developCta::before {
+    display: none;
+  }
+  
+  .developCta h3 {
+    margin-top: 0.5rem;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .developSection {
+    padding: 2rem 0;
+  }
+  
+  .developGrid {
+    gap: 2rem;
+  }
+  
+  .developContent h2 {
+    font-size: 1.875rem;
+  }
+  
+  .searchContainer {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: stretch;
+  }
+  
+  .addToolLink {
+    text-align: center;
+    font-size: 0.85rem;
+  }
 }
\ No newline at end of file

From 494c47fe50cf5d7bb7a298bfab5f1cc1d16a6828 Mon Sep 17 00:00:00 2001
From: 0xBora <133051383+0xBora@users.noreply.github.com>
Date: Sun, 27 Jul 2025 21:56:11 +0200
Subject: [PATCH 2/4] docs: replace CTA text with button

---
 src/pages/tools/index.js          |  6 +++---
 src/pages/tools/styles.module.css | 23 +++++++++++++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/pages/tools/index.js b/src/pages/tools/index.js
index 73b416ca3d..cc12054e14 100644
--- a/src/pages/tools/index.js
+++ b/src/pages/tools/index.js
@@ -188,10 +188,10 @@ function DevelopOnCardanoSection() {
           <div className={styles.developCta}>
             <h3>Need help choosing the right tools?</h3>
             <p>
-              Get tailored recommendations for APIs, indexers, SDKs, and infrastructure that match your project's needs.
+              Answer a few questions about your project and discover which APIs, indexers, SDKs, and infrastructure are best for you.
             </p>
-            <a href="https://cardano-foundation.github.io/cardano-tool-compass/questionnaire/B1/" className={styles.ctaLink} target="_blank">
-              Tool Compass →
+            <a href="https://cardano-foundation.github.io/cardano-tool-compass/questionnaire/B1/" className={styles.ctaButton} target="_blank">
+              → Tool Compass 
             </a>
           </div>
         </div>
diff --git a/src/pages/tools/styles.module.css b/src/pages/tools/styles.module.css
index d89b04eb43..ed5f3e74a8 100644
--- a/src/pages/tools/styles.module.css
+++ b/src/pages/tools/styles.module.css
@@ -217,6 +217,29 @@
   text-decoration: none;
 }
 
+.ctaButton {
+  display: inline-block;
+  background-color: var(--ifm-color-primary);
+  color: white;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.875rem;
+  padding: 0.625rem 1.5rem;
+  border-radius: 8px;
+  transition: all 0.15s ease;
+  border: none;
+  cursor: pointer;
+  letter-spacing: 0.025em;
+}
+
+.ctaButton:hover {
+  background-color: var(--ifm-color-primary-dark);
+  color: white;
+  text-decoration: none;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(5, 56, 175, 0.25);
+}
+
 @media screen and (max-width: 996px) {
   .developGrid {
     grid-template-columns: 1fr;

From 266fb4e02dbfc21d387263a8ed9ab2fb497c76ad Mon Sep 17 00:00:00 2001
From: 0xBora <133051383+0xBora@users.noreply.github.com>
Date: Sun, 27 Jul 2025 22:03:47 +0200
Subject: [PATCH 3/4] style: update CTA button

---
 src/pages/tools/styles.module.css | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/pages/tools/styles.module.css b/src/pages/tools/styles.module.css
index ed5f3e74a8..07f2c00af8 100644
--- a/src/pages/tools/styles.module.css
+++ b/src/pages/tools/styles.module.css
@@ -219,25 +219,23 @@
 
 .ctaButton {
   display: inline-block;
-  background-color: var(--ifm-color-primary);
-  color: white;
+  background-color: transparent;
+  color: var(--ifm-color-primary);
   text-decoration: none;
   font-weight: 500;
   font-size: 0.875rem;
-  padding: 0.625rem 1.5rem;
-  border-radius: 8px;
-  transition: all 0.15s ease;
-  border: none;
-  cursor: pointer;
+  padding: 0.5rem 1.25rem;
+  border: 1px solid var(--ifm-color-primary);
+  border-radius: 6px;
+  transition: all 0.2s ease;
   letter-spacing: 0.025em;
 }
 
 .ctaButton:hover {
-  background-color: var(--ifm-color-primary-dark);
+  background-color: var(--ifm-color-primary);
   color: white;
   text-decoration: none;
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(5, 56, 175, 0.25);
 }
 
 @media screen and (max-width: 996px) {

From 674184a9b7450a7a39b38d5b1c1cb92bdc143f91 Mon Sep 17 00:00:00 2001
From: 0xBora <133051383+0xBora@users.noreply.github.com>
Date: Sun, 27 Jul 2025 22:06:15 +0200
Subject: [PATCH 4/4] style: increaes border thickness

---
 src/pages/tools/styles.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/tools/styles.module.css b/src/pages/tools/styles.module.css
index 07f2c00af8..0d09c40e15 100644
--- a/src/pages/tools/styles.module.css
+++ b/src/pages/tools/styles.module.css
@@ -225,7 +225,7 @@
   font-weight: 500;
   font-size: 0.875rem;
   padding: 0.5rem 1.25rem;
-  border: 1px solid var(--ifm-color-primary);
+  border: 1.5px solid var(--ifm-color-primary);
   border-radius: 6px;
   transition: all 0.2s ease;
   letter-spacing: 0.025em;