[Feature] - Builder Tools - Tool Compass

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>
   );

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>
+              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.ctaButton} 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 />

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,138 @@
 
 .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;
+}
+
+.ctaButton {
+  display: inline-block;
+  background-color: transparent;
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.875rem;
+  padding: 0.5rem 1.25rem;
+  border: 1.5px 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);
+  color: white;
+  text-decoration: none;
+  transform: translateY(-1px);
+}
+
+@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;
+  }
 }