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