+
+
+
+
+### How do I get source chain and destination chain information from an intent?
+
+After simulating, access `intent.sources` to see which chains the SDK chose to pull funds from. Each source has `chainID`,`chainName`, `chainLogo`, and `amount`. Use `intent`.`allSources` to see every chain that _could_ be used.
+```typescript
+const sim = await sdk.simulateBridge({
+ token: 'USDC',
+ amount: BigInt(100),
+ toChainId: 421614,
+});
+
+// Sources chosen by the solver
+sim.intent.sources.forEach((source) => {
+ console.log(source.chainName); // "Arbitrum Sepolia"
+ console.log(source.chainID); // 421614
+ console.log(source.chainLogo); // "https://..."
+ console.log(source.amount); // "100"
+ console.log(source.contractAddress); // "0x..."
+});
+
+// All chains that had balance (superset of sources)
+console.log(sim.intent.allSources);
+
+// Destination chain info
+console.log(sim.intent.destination.chainName);
+console.log(sim.intent.destination.chainID);
+
+// Total amount pulled across all sources
+console.log(sim.intent.sourcesTotal);
+
+// ─── Alternative: use the intent hook during execution ───
+sdk.setOnIntentHook(({ intent, allow, deny, refresh }) => {
+ // Same ReadableIntent structure as the simulation
+ console.log(intent.sources);
+ console.log(intent.destination);
+ allow(); // or deny() to cancel
+});
+
+```
+
+Sample response for simulateBridge()
+```json + { + "intent": { + "allSources": [ + { + "amount": "6245.786635", + "chainID": 11155111, + "chainLogo": "https://assets.coingecko.com/asset_platforms/images/279/large/ethereum.png", + "chainName": "Ethereum Sepolia", + "contractAddress": "0x1c7d4b196cb0c7b01d743fbc6116a902379c7238" + }, + { + "amount": "754.958732", + "chainID": 84532, + "chainLogo": "https://assets.coingecko.com/asset_platforms/images/131/large/base-network.png", + "chainName": "Base Sepolia", + "contractAddress": "0x036cbd53842c5426634e7929541ec2318f3dcf7e" + }, + { + "amount": "750", + "chainID": 11155420, + "chainLogo": "https://assets.coingecko.com/coins/images/25244/large/Optimism.png", + "chainName": "OP Sepolia", + "contractAddress": "0x5fd84259d66cd46123540766be93dfe6d43130d7" + }, + { + "amount": "1", + "chainID": 421614, + "chainLogo": "https://assets.coingecko.com/coins/images/16547/large/arb.jpg", + "chainName": "Arbitrum Sepolia", + "contractAddress": "0x75faf114eafb1bdbe2f0316df893fd58ce46aa4d" + } + ], + "destination": { + "amount": "0.0001", + "chainID": 421614, + "chainLogo": "https://assets.coingecko.com/coins/images/16547/large/arb.jpg", + "chainName": "Arbitrum Sepolia" + }, + "fees": { + "caGas": "0.000000", + "gasSupplied": "0", + "protocol": "0.0000005", + "solver": "0.000001", + "total": "0.000002" + }, + "sources": [ + { + "amount": "0.0001015", + "chainID": 11155111, + "chainLogo": "https://assets.coingecko.com/asset_platforms/images/279/large/ethereum.png", + "chainName": "Ethereum Sepolia", + "contractAddress": "0x1c7d4b196cb0c7b01d743fbc6116a902379c7238" + } + ], + "sourcesTotal": "0.000102", + "token": { + "decimals": 6, + "logo": "https://coin-images.coingecko.com/coins/images/6319/large/usdc.png", + "name": "USD Coin", + "symbol": "USDC" + } + }, + "token": { + "contractAddress": "0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d", + "decimals": 6, + "logo": "https://coin-images.coingecko.com/coins/images/6319/large/usdc.png", + "name": "USD Coin", + "symbol": "USDC", + "isNative": false + } + } + ``` +
+
+
+### How to fetch token logos and names?
+Token metadata (name, symbol, decimals, logo) is available from multiple sources: the simulation result's`intent.token`, the static`TOKEN_METADATA` map, or `sdk.utils`.`getSupportedChains()` which returns each chain's supported tokens.
+
+```typescript
+import {
+ TOKEN_METADATA,
+ CHAIN_METADATA,
+} from '@avail-project/nexus';
+
+// ─── A: From a simulation result ───
+const sim = await sdk.simulateBridge({ token: 'USDC', amount: BigInt(100), toChainId: 421614 });
+
+sim.intent.token.name; // "USD Coin"
+sim.intent.token.symbol; // "USDC"
+sim.intent.token.decimals; // 6
+sim.intent.token.logo; // "https://..."
+
+// Source chain logos
+sim.intent.sources[0].chainLogo; // "https://..."
+sim.intent.sources[0].chainName; // "Base Sepolia"
+
+/*----------------------------------------*/
+
+// ─── B: From static metadata constants ───
+TOKEN_METADATA['USDC'];
+// { symbol: "USDC", name: "USD Coin", decimals: 6, icon: "https://...", coingeckoId: "usd-coin" }
+
+CHAIN_METADATA[421614];
+// { id: 421614, name: "Arbitrum Sepolia", logo: "https://...", nativeCurrency: {...}, ... }
+
+/*----------------------------------------*/
+
+// ─── C: getSupportedChains — chains with their token lists ───
+const chains = sdk.utils.getSupportedChains();
+// [{ id: 421614, name: "Arbitrum Sepolia", logo: "...", tokens: [{ symbol, name, logo, ... }] }]
+```
+
+### How to get the fees incurred from an intent?
+Every `ReadableIntent` includes a `fees` object with a full breakdown: `total`, `protocol`,`solver`, `caGas`, and `gasSupplied`. All values are human-readable strings denominated in the intent's token (e.g. USDC).
+
+```typescript
+const sim = await sdk.simulateBridge({
+ token: 'USDC',
+ amount: BigInt(100),
+ toChainId: 421614,
+});
+
+const { fees } = sim.intent;
+
+console.log(fees.total); // Total fee in token units (e.g. "0.05")
+console.log(fees.protocol); // Protocol fee
+console.log(fees.solver); // Solver / fulfillment fee
+console.log(fees.caGas); // Chain-abstraction gas fee
+console.log(fees.gasSupplied); // Gas supplied by the solver
+
+```
+### How to view a wallet's intent history?
+Call `sdk.getMyIntents(page?)` to fetch the connected wallet's past intents. Each entry is an`RFF`(Request For Funds) object with sources, destinations, status flags, and explorer links.
+``` typescript
+// Fetch the first page of intents
+const intents = await sdk.getMyIntents();
+
+// Paginate
+const page2 = await sdk.getMyIntents(2);
+
+// Check status
+intents.forEach((intent) => {
+ if (intent.fulfilled) console.log(`Intent #${intent.id}: fulfilled`);
+ else if (intent.refunded) console.log(`Intent #${intent.id}: refunded`);
+ else console.log(`Intent #${intent.id}: pending (expires ${new Date(intent.expiry * 1000)})`);
+});
+
+// Each intent (RFF) has this shape:
+// {
+// id: 42,
+// explorerUrl: "https://...",
+// deposited: true,
+// fulfilled: true,
+// refunded: false,
+// expiry: 1706000000,
+// destinationChain: { id: 421614, name: "Arbitrum Sepolia", logo: "...", universe: "..." },
+// destinations: [{
+// token: { address: "0x...", symbol: "USDC", decimals: 6 },
+// value: "1.0",
+// valueRaw: 1000000n,
+// }],
+// sources: [{
+// chain: { id: 84532, name: "Base Sepolia", logo: "...", universe: "..." },
+// token: { address: "0x...", symbol: "USDC", decimals: 6 },
+// value: "1.05",
+// valueRaw: 1050000n,
+// }],
+// }
+```
+
+
+
diff --git a/app/nexus/introduction-to-nexus/page.mdx b/app/nexus/introduction-to-nexus/page.mdx
index 216040dc8..e74604bdd 100644
--- a/app/nexus/introduction-to-nexus/page.mdx
+++ b/app/nexus/introduction-to-nexus/page.mdx
@@ -34,7 +34,7 @@ export default function MdxLayout(props) {
A seamless ***“bridgeless”*** experience.
-## Integrate Nexus - Create Liquid Apps
+## Integrate Nexus - Create Liquid Apps (Choose your path)
Nexus aims to reframe the mindset of both consumers and developers when using or building apps. With Nexus applications instantly gain access to users and liquidity from across Web3. They are longer just simple apps, they become *Liquid Apps*.
diff --git a/app/page.tsx b/app/page.tsx
index 8e3d893bb..f2544b603 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,29 +3,46 @@ export const metadata = {
};
import Introduction from "components/Introduction";
+import { Footer } from "@components/Footer/Footer";
export default function HomePage() {
return (
<>
- Sample response
+ +```json +{ + "sources": [ + { + "chainId": 11155111, + "chainName": "Ethereum Sepolia", + "chainLogo": "https://assets.coingecko.com/asset_platforms/images/279/large/ethereum.png", + "amount": "0.0001015", + "contractAddress": "0x1c7d4b196cb0c7b01d743fbc6116a902379c7238" + } + ], + "allSourcesAvailable": [ + { + "amount": "6245.786635", + "chainID": 11155111, + "chainLogo": "https://assets.coingecko.com/asset_platforms/images/279/large/ethereum.png", + "chainName": "Ethereum Sepolia", + "contractAddress": "0x1c7d4b196cb0c7b01d743fbc6116a902379c7238" + }, + { + "amount": "754.958732", + "chainID": 84532, + "chainLogo": "https://assets.coingecko.com/asset_platforms/images/131/large/base-network.png", + "chainName": "Base Sepolia", + "contractAddress": "0x036cbd53842c5426634e7929541ec2318f3dcf7e" + }, + { + "amount": "750", + "chainID": 11155420, + "chainLogo": "https://assets.coingecko.com/coins/images/25244/large/Optimism.png", + "chainName": "OP Sepolia", + "contractAddress": "0x5fd84259d66cd46123540766be93dfe6d43130d7" + }, + { + "amount": "1", + "chainID": 421614, + "chainLogo": "https://assets.coingecko.com/coins/images/16547/large/arb.jpg", + "chainName": "Arbitrum Sepolia", + "contractAddress": "0x75faf114eafb1bdbe2f0316df893fd58ce46aa4d" + } + ], + "destination": { + "amount": "0.0001", + "chainID": 421614, + "chainLogo": "https://assets.coingecko.com/coins/images/16547/large/arb.jpg", + "chainName": "Arbitrum Sepolia" + }, + "sourcesTotal": "0.000102" +} + +``` +
- 
-
+
-
+
+ {/* Main heading - regular weight */}
+
Avail Developer Docs
-
- Build with Avail, the unification layer of Web3
-
-
+
+ {/* Bold blue headline - Thunder ExtraBold LC condensed */}
+
+ BUILD WITH AVAIL
+
+
+ {/* Subtitle */}
+
+ Scale Access to the Onchain Economy.
+
+
+
{desc}
}
+
+ {icon}
+
+
+ {title}
+
+ {desc && (
+
+ {desc}
+
+ )}
{animatedArrow}
diff --git a/components/Footer/Footer.module.css b/components/Footer/Footer.module.css
index f46849ff4..a064a01ce 100644
--- a/components/Footer/Footer.module.css
+++ b/components/Footer/Footer.module.css
@@ -1,31 +1,33 @@
-.footer{
- box-shadow: 0px 4px 24px -16px rgba(89, 120, 158, 0.32);
- border-radius: 24px;
- margin: 125px 15px 0px;
- padding-bottom: 90px;
+/* ============================================
+ NEXUS DESIGN SYSTEM - FOOTER STYLES
+ ============================================ */
+
+.footer {
+ background-color: var(--bg-primary, #fffffe);
+ border-top: 1px solid var(--border-primary, #e5e5e5);
+ margin: 0;
+ padding: 48px 24px;
position: relative;
- top: -175px;
}
-.footer > div:nth-child(1){
+.footer > div:nth-child(1) {
max-width: 255px;
- padding: 60px 35px 40px;
-
-}
-
- .footer_links a {
- color: inherit;
- }
-
- .dark .footer_links a:hover {
- color: #ffffff;
- }
-
- .light .footer_links a:hover {
- color: #000000;
- }
-
-
+ padding: 0;
+}
+
+.footer_links a {
+ color: var(--text-secondary, #737373) !important;
+ text-decoration: none !important;
+ transition: color 0.15s ease;
+}
+
+.footer_links a:hover {
+ color: var(--text-primary, #0a0a0a) !important;
+}
+
+.dark .footer_links a:hover {
+ color: var(--text-primary, #ededed) !important;
+}
.footer > div > div {
display: flex;
@@ -35,116 +37,105 @@
}
.footer div p {
- font-family: 'PP Mori-Semibold';
+ font-family: var(--font-sans, 'Geist', 'Inter', sans-serif);
font-size: 14px;
- line-height: 19px;
- letter-spacing: -0.02em;
- color: #dde1e6;
- padding: 13px 0px;
+ line-height: 20px;
+ letter-spacing: 0;
+ color: var(--text-muted, #a1a1a1);
+ padding: 12px 0px;
}
-.footer_links{
+.footer_links {
display: flex;
flex-wrap: wrap;
- padding: 0px 35px;
- column-gap: 20px;
+ padding: 0;
+ column-gap: 24px;
+ row-gap: 16px;
}
-.footer .footer_main{
+.footer .footer_main {
flex-direction: column;
align-items: flex-start;
- padding-bottom: 40px;
- row-gap: 16px;
+ padding-bottom: 32px;
+ row-gap: 12px;
}
.footer_main a {
- text-decoration: none;
+ text-decoration: none !important;
+ font-family: var(--font-sans, 'Geist', 'Inter', sans-serif);
font-size: 14px;
- line-height: 15px;
- letter-spacing: -0.02em;
+ line-height: 20px;
+ letter-spacing: 0;
+ color: var(--text-secondary, #737373) !important;
+ transition: color 0.15s ease;
+}
+
+.footer_main a:hover {
+ color: var(--text-primary, #0a0a0a) !important;
}
/* Light theme styles */
.light .footer_main a {
- color: #3c3d3e;
+ color: var(--text-secondary, #737373);
}
/* Dark theme styles */
.dark .footer_main a {
- color: #b6b9bceb;
+ color: var(--text-secondary, #a1a1a1);
}
-.footer_main > div:first-child{
- font-family: 'PP Mori-Semibold';
+.footer_main > div:first-child {
+ font-family: var(--font-heading, 'Inter', sans-serif);
+ font-weight: 500;
font-size: 16px;
- line-height: 17px;
- letter-spacing: -0.02em;
+ line-height: 20px;
+ letter-spacing: 0;
+ color: var(--text-primary, #0a0a0a);
}
-.footer_container{
+.footer_container {
position: relative;
z-index: 1;
+ background-color: var(--bg-primary, #fffffe);
}
-.footer_container > img:nth-child(1), .footer_container > img:nth-child(3){
- position: absolute;
- width: 100%;
- bottom: 0;
-}
-
-.footer_container > img:nth-child(1){
- z-index: -1;
-}
-
-.footer_container > img:nth-child(3){
- z-index: 2;
+.footer_container > img:nth-child(1),
+.footer_container > img:nth-child(3) {
+ display: none; /* Hide decorative images for cleaner look */
}
@media screen and (min-width:768px) {
-
- .footer > div:nth-child(1){
+ .footer > div:nth-child(1) {
padding: unset;
}
- .footer > div:nth-child(1) > div > a > img{
- transition: 0.5s scale;
+ .footer > div:nth-child(1) > div > a > img {
+ transition: transform 0.3s ease;
}
.footer > div:nth-child(1) > div > a > img:hover {
- scale:1.4
- }
-
- .footer_container > img:nth-child(1),
- .footer_container > img:nth-child(3){
- height: 40%;
+ transform: scale(1.1);
}
- .footer_links{
- column-gap: 40px;
+ .footer_links {
+ column-gap: 48px;
}
.footer {
display: flex;
- justify-content: space-evenly;
- margin: 200px auto 0;
- max-width: 1300px;
- padding: 100px;
+ justify-content: space-between;
+ margin: 0 auto;
+ max-width: 1440px;
+ padding: 64px 40px;
position: relative;
- top: -195px;
- width: 80%;
- }
-}
-
-@media screen and (min-width:768px) and (max-width:1157px) {
-
- .footer_container > img:nth-child(1),
- .footer_container > img:nth-child(3){
- height: 40%;
+ top: 0;
+ width: 100%;
}
}
@media screen and (min-width:768px) and (max-width:992px) {
- .footer{
- width: 90%;
+ .footer {
+ width: 100%;
+ padding: 48px 32px;
}
}
\ No newline at end of file
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index 79ffbfbab..6b56a0a94 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -12,8 +12,9 @@ import {
FaDiscord,
FaGithub,
FaLinkedin,
- FaTwitter,
- FaX,
+ FaTelegram,
+ FaXTwitter,
+ FaYoutube,
} from "react-icons/fa6";
interface SubLinkTypes {
@@ -45,134 +46,133 @@ export const Footer = () => {
const footerLinks: FooterLinkTypes[] = [
{
id: 1,
- label: "Platform",
- inActive: true,
+ label: "Resources",
subLinks: [
{
id: 1,
- label: "Overview",
- link: ROUTES.HOMEPAGE,
+ label: "Website",
+ link: "https://www.availproject.org/",
},
{
id: 2,
- label: "Sovereign Rollups",
- link: ROUTES.HOMEPAGE,
+ label: "About Us",
+ link: "https://www.availproject.org/about",
},
{
id: 3,
- label: "How It works",
- link: ROUTES.HOMEPAGE,
+ label: "Careers",
+ link: ROUTES.CAREERS,
+ },
+ {
+ id: 4,
+ label: "Blog",
+ link: ROUTES.BLOG,
+ },
+ {
+ id: 5,
+ label: "Privacy Policy",
+ link: "https://www.availproject.org/privacy-policy",
+ },
+ {
+ id: 6,
+ label: "T & C",
+ link: "https://www.availproject.org/terms",
+ },
+ {
+ id: 7,
+ label: "Ecosystem",
+ link: "https://www.availproject.org/ecosystem",
},
],
},
{
- id: 3,
- label: "Data Availability Resources",
+ id: 2,
+ label: "Avail Nexus",
subLinks: [
{
id: 1,
- label: "The Data Availability Problem",
- link: "https://blog.availproject.org/the-data-availability-problem/",
+ label: "Introduction",
+ link: "/nexus/introduction-to-nexus",
},
{
id: 2,
- label: "What is Avail?",
- link: "https://blog.availproject.org/introducing-avail-by-a-robust-general-purpose-scalable-data-availability-layer/",
+ label: "Concepts",
+ link: "/nexus/concepts",
},
{
id: 3,
- label: "Data Attestation Bridge",
- link: "https://blog.availproject.org/data-attestation-bridge/",
+ label: "Nexus SDK Reference",
+ link: "/nexus/avail-nexus-sdk",
},
{
id: 4,
- label: "Ability to Scale",
- link: "https://blog.availproject.org/abilitytoscalepart3/",
+ label: "How does Avail Nexus work?",
+ link: "https://blog.availproject.org/how-avail-nexus-works-simplifying-multichain-fragmentation/",
},
{
id: 5,
- label: "Reference Document",
- link: "https://github.com/availproject/data-availability/blob/93c547ce4efce3e992b573179a8d22b3657fdcee/reference%20document/Avail%20Reference%20Paper%20v2.1%206%20Nov%202024.pdf",
- },
+ label: "Nexus Elements",
+ link: "https://elements.nexus.availproject.org/"
+ }
+
],
},
{
- id: 4,
- label: "Node Repositories",
+ id: 3,
+ label: "Avail DA",
subLinks: [
{
id: 1,
- label: "Light Client",
- link: "https://github.com/availproject/avail-light",
+ label: "Introduction",
+ link: "/da/welcome-to-avail-docs",
},
{
id: 2,
- label: "Full Node",
- link: "https://github.com/availproject/avail",
+ label: "Deploy a Rollup",
+ link: "/da/build-with-avail/deploy-rollup-on-avail",
+ },
+ {
+ id: 3,
+ label: "Run a Validator",
+ link: "/da/operate-a-node/become-a-validator",
},
+ {
+ id: 4,
+ label: "Report a Bug",
+ link: "/da/bug-bounty",
+ },
+ {
+ id: 5,
+ label: "DA Whitepaper",
+ link: ROUTES.REFER_DOCS,
+ },
+
],
},
{
id: 2,
- label: "Network Guides",
+ label: "Support",
subLinks: [
{
id: 1,
- label: "Node Guide",
- isInternal: true,
- link: ROUTES.TYPES_OF_NODES,
+ label: "Discord",
+ link: ROUTES.DISCORD,
},
{
id: 2,
- label: "Validator Guide",
- isInternal: true,
- link: ROUTES.BECOME_VALIDATOR,
+ label: "Github",
+ link: ROUTES.GITHUB,
},
],
},
{
- id: 5,
- label: "Company",
+ id: 3,
+ label: "Press Kit",
subLinks: [
{
- id: 2,
- label: "Team",
- inActive: true,
- link: ROUTES.DEVELOPERS,
- },
- {
- id: 3,
- label: "Careers",
- link: ROUTES.CAREERS,
- },
- {
- id: 4,
- label: "Partners",
- inActive: true,
- link: ROUTES.HOMEPAGE,
- },
- {
- id: 5,
- label: "Community",
- link: ROUTES.COMMUNITY,
- },
- {
- id: 6,
- label: "Privacy Policy",
- isInternal: true,
- link: "https://avail-project.notion.site/Privacy-Policy-e5f47df2f3a64055a7966bbaabe9a2eb",
- },
- {
- id: 7,
- label: "Terms",
- isInternal: true,
- link: "https://avail-project.notion.site/",
- },
- {
- id: 8,
- label: "Forum",
- isInternal: true,
- link: "https://forum.availproject.org/",
+ id: 1,
+ label: "Brand Assets",
+ link: "https://www.availproject.org/brand-assets",
},
],
},
@@ -207,43 +207,39 @@ export const Footer = () => {
- The essential base layer for modern blockchains.
-
+ Shaping an era of connectivity, where value flows freely and access is unlimited
-
-
+
+
+
-
-
diff --git a/components/Header.module.css b/components/Header.module.css
index 12de83b08..de18d93a9 100644
--- a/components/Header.module.css
+++ b/components/Header.module.css
@@ -1,76 +1,119 @@
-.header{
+/* ============================================
+ NEXUS DESIGN SYSTEM - HEADER STYLES
+ ============================================ */
+
+.header {
display: flex;
justify-content: space-between;
align-items: center;
- padding: 16px 15px;
- max-width: 1900px;
+ padding: 16px 24px;
+ max-width: 1440px;
margin: 0 auto;
+ background-color: #fffffe !important;
+ border-bottom: 1px solid #e5e5e5 !important;
+}
+
+/* Dark mode header */
+:global(.dark) .header {
+ background-color: #191919 !important;
+ border-bottom: 1px solid #2e2e2e !important;
}
-.header .logo{
- width: 90px;
+.header .logo {
+ width: 80px;
max-width: 120px;
height: 100%;
}
.header a {
- text-decoration: none;
+ text-decoration: none !important;
+ color: var(--text-primary, #0a0a0a) !important;
}
-.header nav, .header button {
+.header nav,
+.header button {
display: none;
cursor: pointer;
}
-@media screen and (min-width:1200px) {
- .header .logo{
- width: 145px;
+/* Navigation links */
+.header nav a {
+ text-decoration: none !important;
+ font-family: var(--font-sans, 'Geist', 'Inter', sans-serif);
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 20px;
+ text-align: center;
+ color: var(--text-primary, #0a0a0a) !important;
+ transition: color 0.15s ease;
+}
+
+.header nav a:hover {
+ color: var(--text-secondary, #737373) !important;
+}
+
+.header .active {
+ color: var(--brand-blue, #006bf4) !important;
+}
+
+/* Header button */
+.header button {
+ background: var(--brand-white, #fffffe);
+ border: 1px solid var(--brand-black, #141413);
+ padding: 8px 16px;
+ border-radius: 0;
+ font-family: var(--font-sans, 'Geist', 'Inter', sans-serif);
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 20px;
+ color: var(--brand-black, #141413);
+ cursor: pointer;
+ transition: all 0.15s ease;
+ box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+}
+
+.header button:hover {
+ background: var(--bg-secondary, #f8f8f8);
+}
+
+@media screen and (min-width:768px) {
+ .header .logo {
+ width: 100px;
}
.header {
- padding: 20px 25px;
+ padding: 20px 32px;
}
- .header nav{
- column-gap: 25px;
+ .header nav {
+ column-gap: 24px;
}
.header .nav_hamburger {
display: none;
}
- .header nav, .header button {
+ .header nav,
+ .header button {
display: flex;
}
-
- .header nav a {
- text-decoration: none;
- font-weight: 600;
- font-size: 16px;
- line-height: 16px;
- text-align: center;
- letter-spacing: -0.02em;
- color: #4E6786;
- }
-
- .header .active{
- color: #383C4D;
- }
}
-@media screen and (min-width:1020px) {
+@media screen and (min-width:1200px) {
+ .header .logo {
+ width: 120px;
+ }
.header {
- padding: 48px 56px;
+ padding: 24px 40px;
}
- .header nav{
- column-gap: 53px;
+ .header nav {
+ column-gap: 32px;
}
.header button {
- padding: 19px 45px 18px;
- font-size: 18px;
+ padding: 10px 20px;
+ font-size: 14px;
}
-
}
\ No newline at end of file
diff --git a/components/Introduction.tsx b/components/Introduction.tsx
index 9f48a2688..de6e13aa4 100644
--- a/components/Introduction.tsx
+++ b/components/Introduction.tsx
@@ -13,48 +13,42 @@ export default function Introduction() {
return (
-
+
{x.title}
-
- {x.description}
+
+ {x.description}
{x.links &&
x.links.map((z, index) => {
return (
-
- {"topic" in z ? z.topic : ""}
-
-
+
{z.links.map((l, index) => {
return (
-
{l.placeholder}
-
-
- )}
);
})}
diff --git a/components/MenuOverlay.module.css b/components/MenuOverlay.module.css
index a1e5588c7..a602bc53d 100644
--- a/components/MenuOverlay.module.css
+++ b/components/MenuOverlay.module.css
@@ -1,30 +1,42 @@
-.overlay{
+/* ============================================
+ NEXUS DESIGN SYSTEM - MENU OVERLAY STYLES
+ ============================================ */
+
+.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
- background: #3E3E3E;
- color: white;
+ background: var(--bg-primary, #191919);
+ color: var(--text-primary, #ededed);
overflow: hidden;
- z-index: 3;
+ z-index: 100;
left: 0;
right: 0;
}
-.close{
+.close {
justify-content: space-between;
align-items: center;
display: flex;
- padding: 16px 15px;
+ padding: 16px 24px;
+ border-bottom: 1px solid var(--border-primary, #2e2e2e);
}
.close > img:nth-child(1) {
- width: 115px;
+ width: 100px;
}
.close > img:nth-child(2) {
- width: 26px;
+ width: 24px;
+ cursor: pointer;
+ opacity: 0.7;
+ transition: opacity 0.15s ease;
+}
+
+.close > img:nth-child(2):hover {
+ opacity: 1;
}
.overlay > ul {
@@ -34,47 +46,63 @@
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
- row-gap: 30px;
+ row-gap: 24px;
text-decoration: none;
list-style: none;
text-align: center;
+ padding: 0;
+ margin: 0;
}
.overlay > ul > a {
- text-decoration: none;
- color: white;
+ text-decoration: none !important;
+ color: var(--text-primary, #ededed) !important;
}
.overlay > ul > a > li {
- font-family: 'Thicccboi-bold';
- font-size: 40px;
- line-height: 100%;
- letter-spacing: -0.03em;
- color: #DFEDFD;
+ font-family: var(--font-heading, 'Inter', sans-serif);
+ font-weight: 500;
+ font-size: 28px;
+ line-height: 36px;
+ letter-spacing: 0.02em;
+ color: var(--text-primary, #ededed);
+ transition: color 0.15s ease;
+}
+
+.overlay > ul > a:hover > li {
+ color: var(--text-secondary, #a1a1a1);
}
-.external{
+.external {
display: flex;
flex-direction: column;
- row-gap: 24px;
+ row-gap: 20px;
align-items: center;
position: absolute;
- bottom: 0;
+ bottom: 48px;
left: 50%;
- transform: translate(-50%, -50%);
+ transform: translateX(-50%);
}
-.external > a:nth-child(1){
- text-decoration: none;
+.external > a:nth-child(1) {
+ text-decoration: none !important;
}
-.external > a:nth-child(2){
- font-size: 22px;
- line-height: 23px;
+.external > a:nth-child(2) {
+ font-family: var(--font-sans, 'Geist', 'Inter', sans-serif);
+ font-size: 16px;
+ line-height: 20px;
display: flex;
align-items: center;
text-align: center;
- letter-spacing: -0.02em;
- text-decoration-line: underline;
- color: #D0E5FF;
+ letter-spacing: 0;
+ text-decoration: underline !important;
+ text-decoration-color: var(--border-secondary, #454545) !important;
+ color: var(--text-secondary, #a1a1a1) !important;
+ transition: color 0.15s ease;
+}
+
+.external > a:nth-child(2):hover {
+ color: var(--text-primary, #ededed) !important;
+ text-decoration-color: var(--text-primary, #ededed) !important;
}
\ No newline at end of file
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 81e4811ab..39387488c 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,32 +1,16 @@
"use client";
-import { Navbar } from "nextra-theme-docs";
-import { useTheme } from "nextra-theme-docs";
import Image from "next/image";
-import { useEffect, useState } from "react";
export const CustomNavbar = () => {
- const { resolvedTheme } = useTheme();
- const [mounted, setMounted] = useState(false);
-
- // Only show the correct logo after component has mounted on client
- useEffect(() => {
- setMounted(true);
- }, []);
-
- const isDarkMode = mounted && resolvedTheme === "dark";
-
return (
Avail Developer Docs
-- Build with Avail, the unification layer of Web3 -
-
+
+ {/* Bold blue headline - Thunder ExtraBold LC condensed */}
+ + BUILD WITH AVAIL +
+ + {/* Subtitle */} ++ Scale Access to the Onchain Economy. + + +
{desc}
} + + {icon} +
+
+ {title}
+
+ {desc && (
+
{animatedArrow}
diff --git a/components/Footer/Footer.module.css b/components/Footer/Footer.module.css
index f46849ff4..a064a01ce 100644
--- a/components/Footer/Footer.module.css
+++ b/components/Footer/Footer.module.css
@@ -1,31 +1,33 @@
-.footer{
- box-shadow: 0px 4px 24px -16px rgba(89, 120, 158, 0.32);
- border-radius: 24px;
- margin: 125px 15px 0px;
- padding-bottom: 90px;
+/* ============================================
+ NEXUS DESIGN SYSTEM - FOOTER STYLES
+ ============================================ */
+
+.footer {
+ background-color: var(--bg-primary, #fffffe);
+ border-top: 1px solid var(--border-primary, #e5e5e5);
+ margin: 0;
+ padding: 48px 24px;
position: relative;
- top: -175px;
}
-.footer > div:nth-child(1){
+.footer > div:nth-child(1) {
max-width: 255px;
- padding: 60px 35px 40px;
-
-}
-
- .footer_links a {
- color: inherit;
- }
-
- .dark .footer_links a:hover {
- color: #ffffff;
- }
-
- .light .footer_links a:hover {
- color: #000000;
- }
-
-
+ padding: 0;
+}
+
+.footer_links a {
+ color: var(--text-secondary, #737373) !important;
+ text-decoration: none !important;
+ transition: color 0.15s ease;
+}
+
+.footer_links a:hover {
+ color: var(--text-primary, #0a0a0a) !important;
+}
+
+.dark .footer_links a:hover {
+ color: var(--text-primary, #ededed) !important;
+}
.footer > div > div {
display: flex;
@@ -35,116 +37,105 @@
}
.footer div p {
- font-family: 'PP Mori-Semibold';
+ font-family: var(--font-sans, 'Geist', 'Inter', sans-serif);
font-size: 14px;
- line-height: 19px;
- letter-spacing: -0.02em;
- color: #dde1e6;
- padding: 13px 0px;
+ line-height: 20px;
+ letter-spacing: 0;
+ color: var(--text-muted, #a1a1a1);
+ padding: 12px 0px;
}
-.footer_links{
+.footer_links {
display: flex;
flex-wrap: wrap;
- padding: 0px 35px;
- column-gap: 20px;
+ padding: 0;
+ column-gap: 24px;
+ row-gap: 16px;
}
-.footer .footer_main{
+.footer .footer_main {
flex-direction: column;
align-items: flex-start;
- padding-bottom: 40px;
- row-gap: 16px;
+ padding-bottom: 32px;
+ row-gap: 12px;
}
.footer_main a {
- text-decoration: none;
+ text-decoration: none !important;
+ font-family: var(--font-sans, 'Geist', 'Inter', sans-serif);
font-size: 14px;
- line-height: 15px;
- letter-spacing: -0.02em;
+ line-height: 20px;
+ letter-spacing: 0;
+ color: var(--text-secondary, #737373) !important;
+ transition: color 0.15s ease;
+}
+
+.footer_main a:hover {
+ color: var(--text-primary, #0a0a0a) !important;
}
/* Light theme styles */
.light .footer_main a {
- color: #3c3d3e;
+ color: var(--text-secondary, #737373);
}
/* Dark theme styles */
.dark .footer_main a {
- color: #b6b9bceb;
+ color: var(--text-secondary, #a1a1a1);
}
-.footer_main > div:first-child{
- font-family: 'PP Mori-Semibold';
+.footer_main > div:first-child {
+ font-family: var(--font-heading, 'Inter', sans-serif);
+ font-weight: 500;
font-size: 16px;
- line-height: 17px;
- letter-spacing: -0.02em;
+ line-height: 20px;
+ letter-spacing: 0;
+ color: var(--text-primary, #0a0a0a);
}
-.footer_container{
+.footer_container {
position: relative;
z-index: 1;
+ background-color: var(--bg-primary, #fffffe);
}
-.footer_container > img:nth-child(1), .footer_container > img:nth-child(3){
- position: absolute;
- width: 100%;
- bottom: 0;
-}
-
-.footer_container > img:nth-child(1){
- z-index: -1;
-}
-
-.footer_container > img:nth-child(3){
- z-index: 2;
+.footer_container > img:nth-child(1),
+.footer_container > img:nth-child(3) {
+ display: none; /* Hide decorative images for cleaner look */
}
@media screen and (min-width:768px) {
-
- .footer > div:nth-child(1){
+ .footer > div:nth-child(1) {
padding: unset;
}
- .footer > div:nth-child(1) > div > a > img{
- transition: 0.5s scale;
+ .footer > div:nth-child(1) > div > a > img {
+ transition: transform 0.3s ease;
}
.footer > div:nth-child(1) > div > a > img:hover {
- scale:1.4
- }
-
- .footer_container > img:nth-child(1),
- .footer_container > img:nth-child(3){
- height: 40%;
+ transform: scale(1.1);
}
- .footer_links{
- column-gap: 40px;
+ .footer_links {
+ column-gap: 48px;
}
.footer {
display: flex;
- justify-content: space-evenly;
- margin: 200px auto 0;
- max-width: 1300px;
- padding: 100px;
+ justify-content: space-between;
+ margin: 0 auto;
+ max-width: 1440px;
+ padding: 64px 40px;
position: relative;
- top: -195px;
- width: 80%;
- }
-}
-
-@media screen and (min-width:768px) and (max-width:1157px) {
-
- .footer_container > img:nth-child(1),
- .footer_container > img:nth-child(3){
- height: 40%;
+ top: 0;
+ width: 100%;
}
}
@media screen and (min-width:768px) and (max-width:992px) {
- .footer{
- width: 90%;
+ .footer {
+ width: 100%;
+ padding: 48px 32px;
}
}
\ No newline at end of file
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index 79ffbfbab..6b56a0a94 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -12,8 +12,9 @@ import {
FaDiscord,
FaGithub,
FaLinkedin,
- FaTwitter,
- FaX,
+ FaTelegram,
+ FaXTwitter,
+ FaYoutube,
} from "react-icons/fa6";
interface SubLinkTypes {
@@ -45,134 +46,133 @@ export const Footer = () => {
const footerLinks: FooterLinkTypes[] = [
{
id: 1,
- label: "Platform",
- inActive: true,
+ label: "Resources",
subLinks: [
{
id: 1,
- label: "Overview",
- link: ROUTES.HOMEPAGE,
+ label: "Website",
+ link: "https://www.availproject.org/",
},
{
id: 2,
- label: "Sovereign Rollups",
- link: ROUTES.HOMEPAGE,
+ label: "About Us",
+ link: "https://www.availproject.org/about",
},
{
id: 3,
- label: "How It works",
- link: ROUTES.HOMEPAGE,
+ label: "Careers",
+ link: ROUTES.CAREERS,
+ },
+ {
+ id: 4,
+ label: "Blog",
+ link: ROUTES.BLOG,
+ },
+ {
+ id: 5,
+ label: "Privacy Policy",
+ link: "https://www.availproject.org/privacy-policy",
+ },
+ {
+ id: 6,
+ label: "T & C",
+ link: "https://www.availproject.org/terms",
+ },
+ {
+ id: 7,
+ label: "Ecosystem",
+ link: "https://www.availproject.org/ecosystem",
},
],
},
{
- id: 3,
- label: "Data Availability Resources",
+ id: 2,
+ label: "Avail Nexus",
subLinks: [
{
id: 1,
- label: "The Data Availability Problem",
- link: "https://blog.availproject.org/the-data-availability-problem/",
+ label: "Introduction",
+ link: "/nexus/introduction-to-nexus",
},
{
id: 2,
- label: "What is Avail?",
- link: "https://blog.availproject.org/introducing-avail-by-a-robust-general-purpose-scalable-data-availability-layer/",
+ label: "Concepts",
+ link: "/nexus/concepts",
},
{
id: 3,
- label: "Data Attestation Bridge",
- link: "https://blog.availproject.org/data-attestation-bridge/",
+ label: "Nexus SDK Reference",
+ link: "/nexus/avail-nexus-sdk",
},
{
id: 4,
- label: "Ability to Scale",
- link: "https://blog.availproject.org/abilitytoscalepart3/",
+ label: "How does Avail Nexus work?",
+ link: "https://blog.availproject.org/how-avail-nexus-works-simplifying-multichain-fragmentation/",
},
{
id: 5,
- label: "Reference Document",
- link: "https://github.com/availproject/data-availability/blob/93c547ce4efce3e992b573179a8d22b3657fdcee/reference%20document/Avail%20Reference%20Paper%20v2.1%206%20Nov%202024.pdf",
- },
+ label: "Nexus Elements",
+ link: "https://elements.nexus.availproject.org/"
+ }
+
],
},
{
- id: 4,
- label: "Node Repositories",
+ id: 3,
+ label: "Avail DA",
subLinks: [
{
id: 1,
- label: "Light Client",
- link: "https://github.com/availproject/avail-light",
+ label: "Introduction",
+ link: "/da/welcome-to-avail-docs",
},
{
id: 2,
- label: "Full Node",
- link: "https://github.com/availproject/avail",
+ label: "Deploy a Rollup",
+ link: "/da/build-with-avail/deploy-rollup-on-avail",
+ },
+ {
+ id: 3,
+ label: "Run a Validator",
+ link: "/da/operate-a-node/become-a-validator",
},
+ {
+ id: 4,
+ label: "Report a Bug",
+ link: "/da/bug-bounty",
+ },
+ {
+ id: 5,
+ label: "DA Whitepaper",
+ link: ROUTES.REFER_DOCS,
+ },
+
],
},
{
id: 2,
- label: "Network Guides",
+ label: "Support",
subLinks: [
{
id: 1,
- label: "Node Guide",
- isInternal: true,
- link: ROUTES.TYPES_OF_NODES,
+ label: "Discord",
+ link: ROUTES.DISCORD,
},
{
id: 2,
- label: "Validator Guide",
- isInternal: true,
- link: ROUTES.BECOME_VALIDATOR,
+ label: "Github",
+ link: ROUTES.GITHUB,
},
],
},
{
- id: 5,
- label: "Company",
+ id: 3,
+ label: "Press Kit",
subLinks: [
{
- id: 2,
- label: "Team",
- inActive: true,
- link: ROUTES.DEVELOPERS,
- },
- {
- id: 3,
- label: "Careers",
- link: ROUTES.CAREERS,
- },
- {
- id: 4,
- label: "Partners",
- inActive: true,
- link: ROUTES.HOMEPAGE,
- },
- {
- id: 5,
- label: "Community",
- link: ROUTES.COMMUNITY,
- },
- {
- id: 6,
- label: "Privacy Policy",
- isInternal: true,
- link: "https://avail-project.notion.site/Privacy-Policy-e5f47df2f3a64055a7966bbaabe9a2eb",
- },
- {
- id: 7,
- label: "Terms",
- isInternal: true,
- link: "https://avail-project.notion.site/",
- },
- {
- id: 8,
- label: "Forum",
- isInternal: true,
- link: "https://forum.availproject.org/",
+ id: 1,
+ label: "Brand Assets",
+ link: "https://www.availproject.org/brand-assets",
},
],
},
@@ -207,43 +207,39 @@ export const Footer = () => {
+ {desc} +
+ )}- The essential base layer for modern blockchains. -
+ Shaping an era of connectivity, where value flows freely and access is unlimited
-
-
+
+
+
-
-
diff --git a/components/Header.module.css b/components/Header.module.css
index 12de83b08..de18d93a9 100644
--- a/components/Header.module.css
+++ b/components/Header.module.css
@@ -1,76 +1,119 @@
-.header{
+/* ============================================
+ NEXUS DESIGN SYSTEM - HEADER STYLES
+ ============================================ */
+
+.header {
display: flex;
justify-content: space-between;
align-items: center;
- padding: 16px 15px;
- max-width: 1900px;
+ padding: 16px 24px;
+ max-width: 1440px;
margin: 0 auto;
+ background-color: #fffffe !important;
+ border-bottom: 1px solid #e5e5e5 !important;
+}
+
+/* Dark mode header */
+:global(.dark) .header {
+ background-color: #191919 !important;
+ border-bottom: 1px solid #2e2e2e !important;
}
-.header .logo{
- width: 90px;
+.header .logo {
+ width: 80px;
max-width: 120px;
height: 100%;
}
.header a {
- text-decoration: none;
+ text-decoration: none !important;
+ color: var(--text-primary, #0a0a0a) !important;
}
-.header nav, .header button {
+.header nav,
+.header button {
display: none;
cursor: pointer;
}
-@media screen and (min-width:1200px) {
- .header .logo{
- width: 145px;
+/* Navigation links */
+.header nav a {
+ text-decoration: none !important;
+ font-family: var(--font-sans, 'Geist', 'Inter', sans-serif);
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 20px;
+ text-align: center;
+ color: var(--text-primary, #0a0a0a) !important;
+ transition: color 0.15s ease;
+}
+
+.header nav a:hover {
+ color: var(--text-secondary, #737373) !important;
+}
+
+.header .active {
+ color: var(--brand-blue, #006bf4) !important;
+}
+
+/* Header button */
+.header button {
+ background: var(--brand-white, #fffffe);
+ border: 1px solid var(--brand-black, #141413);
+ padding: 8px 16px;
+ border-radius: 0;
+ font-family: var(--font-sans, 'Geist', 'Inter', sans-serif);
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 20px;
+ color: var(--brand-black, #141413);
+ cursor: pointer;
+ transition: all 0.15s ease;
+ box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+}
+
+.header button:hover {
+ background: var(--bg-secondary, #f8f8f8);
+}
+
+@media screen and (min-width:768px) {
+ .header .logo {
+ width: 100px;
}
.header {
- padding: 20px 25px;
+ padding: 20px 32px;
}
- .header nav{
- column-gap: 25px;
+ .header nav {
+ column-gap: 24px;
}
.header .nav_hamburger {
display: none;
}
- .header nav, .header button {
+ .header nav,
+ .header button {
display: flex;
}
-
- .header nav a {
- text-decoration: none;
- font-weight: 600;
- font-size: 16px;
- line-height: 16px;
- text-align: center;
- letter-spacing: -0.02em;
- color: #4E6786;
- }
-
- .header .active{
- color: #383C4D;
- }
}
-@media screen and (min-width:1020px) {
+@media screen and (min-width:1200px) {
+ .header .logo {
+ width: 120px;
+ }
.header {
- padding: 48px 56px;
+ padding: 24px 40px;
}
- .header nav{
- column-gap: 53px;
+ .header nav {
+ column-gap: 32px;
}
.header button {
- padding: 19px 45px 18px;
- font-size: 18px;
+ padding: 10px 20px;
+ font-size: 14px;
}
-
}
\ No newline at end of file
diff --git a/components/Introduction.tsx b/components/Introduction.tsx
index 9f48a2688..de6e13aa4 100644
--- a/components/Introduction.tsx
+++ b/components/Introduction.tsx
@@ -13,48 +13,42 @@ export default function Introduction() {
return (
-
+
+
{x.title}
-
- {x.description}
+
+ {x.description}
{x.links &&
x.links.map((z, index) => {
return (
-
- {"topic" in z ? z.topic : ""}
-
-
+
{z.links.map((l, index) => {
return (
-
{l.placeholder}
-
-
- )}
);
})}
diff --git a/components/MenuOverlay.module.css b/components/MenuOverlay.module.css
index a1e5588c7..a602bc53d 100644
--- a/components/MenuOverlay.module.css
+++ b/components/MenuOverlay.module.css
@@ -1,30 +1,42 @@
-.overlay{
+/* ============================================
+ NEXUS DESIGN SYSTEM - MENU OVERLAY STYLES
+ ============================================ */
+
+.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
- background: #3E3E3E;
- color: white;
+ background: var(--bg-primary, #191919);
+ color: var(--text-primary, #ededed);
overflow: hidden;
- z-index: 3;
+ z-index: 100;
left: 0;
right: 0;
}
-.close{
+.close {
justify-content: space-between;
align-items: center;
display: flex;
- padding: 16px 15px;
+ padding: 16px 24px;
+ border-bottom: 1px solid var(--border-primary, #2e2e2e);
}
.close > img:nth-child(1) {
- width: 115px;
+ width: 100px;
}
.close > img:nth-child(2) {
- width: 26px;
+ width: 24px;
+ cursor: pointer;
+ opacity: 0.7;
+ transition: opacity 0.15s ease;
+}
+
+.close > img:nth-child(2):hover {
+ opacity: 1;
}
.overlay > ul {
@@ -34,47 +46,63 @@
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
- row-gap: 30px;
+ row-gap: 24px;
text-decoration: none;
list-style: none;
text-align: center;
+ padding: 0;
+ margin: 0;
}
.overlay > ul > a {
- text-decoration: none;
- color: white;
+ text-decoration: none !important;
+ color: var(--text-primary, #ededed) !important;
}
.overlay > ul > a > li {
- font-family: 'Thicccboi-bold';
- font-size: 40px;
- line-height: 100%;
- letter-spacing: -0.03em;
- color: #DFEDFD;
+ font-family: var(--font-heading, 'Inter', sans-serif);
+ font-weight: 500;
+ font-size: 28px;
+ line-height: 36px;
+ letter-spacing: 0.02em;
+ color: var(--text-primary, #ededed);
+ transition: color 0.15s ease;
+}
+
+.overlay > ul > a:hover > li {
+ color: var(--text-secondary, #a1a1a1);
}
-.external{
+.external {
display: flex;
flex-direction: column;
- row-gap: 24px;
+ row-gap: 20px;
align-items: center;
position: absolute;
- bottom: 0;
+ bottom: 48px;
left: 50%;
- transform: translate(-50%, -50%);
+ transform: translateX(-50%);
}
-.external > a:nth-child(1){
- text-decoration: none;
+.external > a:nth-child(1) {
+ text-decoration: none !important;
}
-.external > a:nth-child(2){
- font-size: 22px;
- line-height: 23px;
+.external > a:nth-child(2) {
+ font-family: var(--font-sans, 'Geist', 'Inter', sans-serif);
+ font-size: 16px;
+ line-height: 20px;
display: flex;
align-items: center;
text-align: center;
- letter-spacing: -0.02em;
- text-decoration-line: underline;
- color: #D0E5FF;
+ letter-spacing: 0;
+ text-decoration: underline !important;
+ text-decoration-color: var(--border-secondary, #454545) !important;
+ color: var(--text-secondary, #a1a1a1) !important;
+ transition: color 0.15s ease;
+}
+
+.external > a:nth-child(2):hover {
+ color: var(--text-primary, #ededed) !important;
+ text-decoration-color: var(--text-primary, #ededed) !important;
}
\ No newline at end of file
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 81e4811ab..39387488c 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,32 +1,16 @@
"use client";
-import { Navbar } from "nextra-theme-docs";
-import { useTheme } from "nextra-theme-docs";
import Image from "next/image";
-import { useEffect, useState } from "react";
export const CustomNavbar = () => {
- const { resolvedTheme } = useTheme();
- const [mounted, setMounted] = useState(false);
-
- // Only show the correct logo after component has mounted on client
- useEffect(() => {
- setMounted(true);
- }, []);
-
- const isDarkMode = mounted && resolvedTheme === "dark";
-
return (
+ {x.description}
{x.links && x.links.map((z, index) => { return (
-
- {"topic" in z ? z.topic : ""} -
-
+
- )}
);
})}
diff --git a/components/MenuOverlay.module.css b/components/MenuOverlay.module.css
index a1e5588c7..a602bc53d 100644
--- a/components/MenuOverlay.module.css
+++ b/components/MenuOverlay.module.css
@@ -1,30 +1,42 @@
-.overlay{
+/* ============================================
+ NEXUS DESIGN SYSTEM - MENU OVERLAY STYLES
+ ============================================ */
+
+.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
- background: #3E3E3E;
- color: white;
+ background: var(--bg-primary, #191919);
+ color: var(--text-primary, #ededed);
overflow: hidden;
- z-index: 3;
+ z-index: 100;
left: 0;
right: 0;
}
-.close{
+.close {
justify-content: space-between;
align-items: center;
display: flex;
- padding: 16px 15px;
+ padding: 16px 24px;
+ border-bottom: 1px solid var(--border-primary, #2e2e2e);
}
.close > img:nth-child(1) {
- width: 115px;
+ width: 100px;
}
.close > img:nth-child(2) {
- width: 26px;
+ width: 24px;
+ cursor: pointer;
+ opacity: 0.7;
+ transition: opacity 0.15s ease;
+}
+
+.close > img:nth-child(2):hover {
+ opacity: 1;
}
.overlay > ul {
@@ -34,47 +46,63 @@
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
- row-gap: 30px;
+ row-gap: 24px;
text-decoration: none;
list-style: none;
text-align: center;
+ padding: 0;
+ margin: 0;
}
.overlay > ul > a {
- text-decoration: none;
- color: white;
+ text-decoration: none !important;
+ color: var(--text-primary, #ededed) !important;
}
.overlay > ul > a > li {
- font-family: 'Thicccboi-bold';
- font-size: 40px;
- line-height: 100%;
- letter-spacing: -0.03em;
- color: #DFEDFD;
+ font-family: var(--font-heading, 'Inter', sans-serif);
+ font-weight: 500;
+ font-size: 28px;
+ line-height: 36px;
+ letter-spacing: 0.02em;
+ color: var(--text-primary, #ededed);
+ transition: color 0.15s ease;
+}
+
+.overlay > ul > a:hover > li {
+ color: var(--text-secondary, #a1a1a1);
}
-.external{
+.external {
display: flex;
flex-direction: column;
- row-gap: 24px;
+ row-gap: 20px;
align-items: center;
position: absolute;
- bottom: 0;
+ bottom: 48px;
left: 50%;
- transform: translate(-50%, -50%);
+ transform: translateX(-50%);
}
-.external > a:nth-child(1){
- text-decoration: none;
+.external > a:nth-child(1) {
+ text-decoration: none !important;
}
-.external > a:nth-child(2){
- font-size: 22px;
- line-height: 23px;
+.external > a:nth-child(2) {
+ font-family: var(--font-sans, 'Geist', 'Inter', sans-serif);
+ font-size: 16px;
+ line-height: 20px;
display: flex;
align-items: center;
text-align: center;
- letter-spacing: -0.02em;
- text-decoration-line: underline;
- color: #D0E5FF;
+ letter-spacing: 0;
+ text-decoration: underline !important;
+ text-decoration-color: var(--border-secondary, #454545) !important;
+ color: var(--text-secondary, #a1a1a1) !important;
+ transition: color 0.15s ease;
+}
+
+.external > a:nth-child(2):hover {
+ color: var(--text-primary, #ededed) !important;
+ text-decoration-color: var(--text-primary, #ededed) !important;
}
\ No newline at end of file
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 81e4811ab..39387488c 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,32 +1,16 @@
"use client";
-import { Navbar } from "nextra-theme-docs";
-import { useTheme } from "nextra-theme-docs";
import Image from "next/image";
-import { useEffect, useState } from "react";
export const CustomNavbar = () => {
- const { resolvedTheme } = useTheme();
- const [mounted, setMounted] = useState(false);
-
- // Only show the correct logo after component has mounted on client
- useEffect(() => {
- setMounted(true);
- }, []);
-
- const isDarkMode = mounted && resolvedTheme === "dark";
-
return (
{z.links.map((l, index) => {
return (
-
- {x.links.length - 1 !== index && (
-
{l.placeholder}
-
- - )}