Skip to content

feat(ui): apply docs homepage redesign #843

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
koredeBNB wants to merge 9 commits into
base: main
Choose a base branch
from
Open

feat(ui): apply docs homepage redesign #843

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9705a93
feat(ui): apply BNB Chain 3.0 marketing redesign to docs
koredeBNB Jun 30, 2026
130c281
fix(ui): align docs redesign with Figma review feedback
koredeBNB Jun 30, 2026
cd69546
fix(ui): black Get Help button + white install command text
koredeBNB Jun 30, 2026
f258b0d
fix(ui): use exact Figma icons for BNB Smart Chain and opBNB cards
koredeBNB Jul 1, 2026
49552f5
fix(ui): rename Home tab to Overview; render RESOURCE as flat link group
koredeBNB Jul 1, 2026
bfebe7a
chore(ui): remove unused branch CSS
koredeBNB Jul 1, 2026
4aa057e
Merge pull request #1 from koredeBNB/cleanup/ui-update-maintainability
koredeBNB Jul 1, 2026
a2a7118
fix(ui): configure docs header site name
koredeBNB Jul 16, 2026
735c60d
merge: resolve conflicts with upstream main for UI redesign
koredeBNB Aug 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .gitignore
View file
Open in desktop

@0xlucasliao 0xlucasliao Jul 16, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to ignore docusaurus?

@koredeBNB koredeBNB Jul 16, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

docusarus was already ignored on the base branch , this pr didnt change that. just added venv

Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,6 @@ site/

build

.docusaurus
.docusaurus

.venv/
22 changes: 22 additions & 0 deletions docs/assets/js/custom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,26 @@ document.addEventListener("DOMContentLoaded", function() {
link.setAttribute("target", "_blank");
}
});

// Copy-to-clipboard for install command pills.
document.addEventListener("click", function(event) {
var btn = event.target.closest(".copy-btn[data-copy]");
if (!btn) return;
event.preventDefault();
var text = btn.getAttribute("data-copy");
var done = function() {
btn.classList.add("is-copied");
setTimeout(function() { btn.classList.remove("is-copied"); }, 1500);
};
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(done).catch(function() {});
} else {
var ta = document.createElement("textarea");
ta.value = text;
document.body.appendChild(ta);
ta.select();
try { document.execCommand("copy"); done(); } catch (e) {}
document.body.removeChild(ta);
}
});
});
274 changes: 274 additions & 0 deletions docs/assets/style/components/developer-kit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,274 @@
.dk-page {
display: flex;
flex-direction: column;
gap: 48px;
padding: 8px 0 16px;
}

/* Hero */
.dk-hero {
display: flex;
flex-direction: column;
gap: 14px;
max-width: 760px;
}

.md-typeset .dk-hero__title {
font-size: 2.2em;
line-height: 1.15;
font-weight: 700;
color: var(--doc-text-primary);
margin: 0;
}

.dk-hero__subtitle {
font-size: 17px;
line-height: 1.5;
color: var(--doc-text-secondary);
margin: 0;
}

.dk-block {
display: flex;
flex-direction: column;
gap: 20px;
}

.dk-block__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}

.md-typeset .dk-block__title {
font-size: 1.4em;
font-weight: 700;
color: var(--doc-text-primary);
margin: 0;
}

.dk-block__count {
font-size: 13px;
color: var(--doc-text-tertiary);
}

/* Featured tools */
.dk-featured {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}

.dk-featured-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
border-radius: 16px;
border: 1px solid var(--doc-border-2);
background: var(--doc-layer-2);
transition: border-color .15s, background .15s, transform .15s;
}

.dk-featured-card:hover,
.dk-featured-card:focus {
border-color: var(--doc-border-4);
background: var(--doc-layer-3);
text-decoration: none;
transform: translateY(-2px);
}

.md-typeset .dk-featured-card__name {
font-size: 16px;
font-weight: 700;
color: var(--doc-text-primary);
}

.dk-featured-card__desc {
font-size: 14px;
line-height: 1.45;
color: var(--doc-text-secondary);
flex: 1 0 auto;
}

/* Install command pill */
.install-cmd {
display: inline-flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 8px 8px 12px;
border-radius: 8px;
border: 1px solid var(--doc-border-3);
background: var(--doc-bg-1);
}

.install-cmd__prompt {
flex-shrink: 0;
font-family: var(--md-code-font-family, monospace);
font-size: 13px;
font-weight: 700;
color: var(--doc-text-brand);
}

.md-typeset .install-cmd code,
.install-cmd code {
flex: 1 1 auto;
font-family: var(--md-code-font-family, monospace);
font-size: 13px;
color: var(--doc-text-primary);
background: none;
padding: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 6px;
border: none;
background: transparent;
color: var(--doc-text-tertiary);
cursor: pointer;
transition: background .15s, color .15s;
}

.copy-btn:hover {
background: var(--doc-layer-4);
color: var(--doc-text-primary);
}

.copy-btn svg {
width: 16px;
height: 16px;
fill: currentColor;
}

.copy-btn.is-copied {
color: #00d957;
}

/* All developer tools table */
.dk-table-wrap {
border: 1px solid var(--doc-border-2);
border-radius: 16px;
overflow: hidden;
}

.md-typeset .dk-table {
width: 100%;
border-collapse: collapse;
margin: 0;
font-size: 14px;
border: none;
display: table;
}

.md-typeset .dk-table th,
.md-typeset .dk-table td {
text-align: left;
padding: 14px 18px;
border: none;
border-bottom: 1px solid var(--doc-border-2);
vertical-align: middle;
}

.md-typeset .dk-table thead th {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--doc-text-tertiary);
background: var(--doc-layer-2);
}

.md-typeset .dk-table tbody tr:last-child td {
border-bottom: none;
}

.md-typeset .dk-table tbody tr:hover {
background: var(--doc-layer-2);
}

.md-typeset .dk-table td a {
color: var(--doc-text-primary);
font-weight: 600;
}

.md-typeset .dk-table td a:hover {
color: var(--doc-text-brand);
}

.dk-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
border-radius: 999px;
border: 1px solid var(--doc-border-3);
font-size: 12px;
color: var(--doc-text-secondary);
white-space: nowrap;
}

.dk-chip::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--doc-text-tertiary);
flex-shrink: 0;
}

.dk-chip[data-chain="bsc"]::before {
background: #f0b90b;
}

.dk-chip[data-chain="opbnb"]::before {
background: #ff8a38;
}

.dk-chip[data-chain="greenfield"]::before {
background: #00d957;
}

.dk-table__action-col {
width: 48px;
}

.md-typeset .dk-table__action {
text-align: right;
}

.md-typeset .dk-table__action a {
color: var(--doc-text-tertiary);
font-size: 18px;
}

.md-typeset .dk-table__action a:hover {
color: var(--doc-text-brand);
}

/* Responsive */
@media (max-width: 1024px) {
.dk-featured {
grid-template-columns: 1fr;
}
}

@media (max-width: 768px) {
.dk-table-wrap {
overflow-x: auto;
}

.md-typeset .dk-table {
min-width: 560px;
}
}
Loading