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 }) {
{title}
{description}
-
-
- {cta}
-
-
+ {cta && (
+
+
+ {cta}
+
+
+ )}
);
diff --git a/src/pages/tools/index.js b/src/pages/tools/index.js
index ed48aef9b5..cc12054e14 100644
--- a/src/pages/tools/index.js
+++ b/src/pages/tools/index.js
@@ -167,12 +167,39 @@ function ShowcaseHeader() {
);
}
+function DevelopOnCardanoSection() {
+ return (
+
+
+
+
+
Develop on Cardano
+
+ 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.
+
+
+
+
Need help choosing the right tools?
+
+ Answer a few questions about your project and discover which APIs, indexers, SDKs, and infrastructure are best for you.
+
+
+ → Tool Compass
+
+
+
+
+
+ );
+}
+
function ShowcaseFilters() {
const filteredProjects = useFilteredProjects();
@@ -336,6 +363,9 @@ function SearchBar() {
debouncedHistoryPush(newSearch.toString());
}}
/>
+
+ Add Your Tool →
+
);
}
@@ -358,6 +388,7 @@ function Showcase() {
+
diff --git a/src/pages/tools/styles.module.css b/src/pages/tools/styles.module.css
index 27a8cc5ce3..0d09c40e15 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,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;
+ }
}
\ No newline at end of file