Whitepaper v0.3.3

.github/workflows/code-quality.yml

@@ -11,6 +11,10 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24.x
+
       - uses: oven-sh/setup-bun@v2
         with:
           bun-version: latest
@@ -46,6 +50,10 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24.x
+
       - uses: oven-sh/setup-bun@v2
         with:
           bun-version: latest

website/package.json

@@ -13,9 +13,11 @@
     "format:write": "prettier --write ."
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.3.13",
-    "@astrojs/react": "^4.4.0",
-    "@astrojs/sitemap": "^3.5.1",
+    "@astrojs/mdx": "5.0.2",
+    "@astrojs/react": "5.0.1",
+    "@astrojs/sitemap": "3.7.1",
+    "@fontsource/ibm-plex-mono": "^5.2.7",
+    "@fontsource/ibm-plex-sans": "^5.2.8",
     "@fontsource/inter": "^5.2.6",
     "@fontsource/prompt": "^5.2.6",
     "@lucide/astro": "^0.541.0",
@@ -25,7 +27,7 @@
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.12",
     "@tanstack/react-table": "^8.21.3",
-    "astro": "^5.13.2",
+    "astro": "6.0.7",
     "astro-seo": "^0.8.4",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",

website/scripts/generate-whitepaper-pdfs.js

@@ -117,33 +117,10 @@ async function generatePdf(puppeteer, locale, version) {
       timeout: 30000,
     });
 
-    await page.waitForSelector("h1", { timeout: 30000 });
-
-    await page.evaluate(async () => {
-      await new Promise((resolve) => {
-        let totalHeight = 0;
-        let distance = 100;
-        let timer = setInterval(() => {
-          let scrollHeight = document.body.scrollHeight;
-          window.scrollBy(0, distance);
-          totalHeight += distance;
-
-          if (totalHeight >= scrollHeight) {
-            clearInterval(timer);
-            resolve();
-          }
-        }, 100);
-      });
-    });
-
-    const LOGO_ICON = `<svg width="18" height="17" viewBox="0 0 43 40" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#c0)"><path d="M42.99 39.33L35.52 32.73C42.53 25.1 42.23 13.47 34.62 6.19C26.7-1.4 13.86-1.4 5.94 6.19C-1.98 13.77-1.98 26.06 5.94 33.65C9.9 37.44 15.09 39.33 20.28 39.33H42.99ZM29.4 11.19C34.19 15.78 34.42 23.07 30.09 27.92L11.17 11.19C16.2 6.37 24.36 6.37 29.4 11.19Z" fill="url(#fi0)"/><path d="M11.17 11.19C8.83 13.42 7.39 16.51 7.39 19.91C7.39 26.73 13.16 32.26 20.28 32.26C24.21 32.26 27.72 30.57 30.09 27.92L11.17 11.19Z" fill="url(#fi1)"/><path opacity="0.8" d="M29.4 11.19C34.19 15.78 34.42 23.07 30.09 27.92L35.52 32.73C42.53 25.1 42.23 13.47 34.62 6.19" fill="url(#fi2)"/></g><defs><linearGradient id="fi0" x1="7.05" y1="39.43" x2="36.12" y2="9.06" gradientUnits="userSpaceOnUse"><stop offset="0.07" stop-color="#00F"/><stop offset="0.5" stop-color="#ED4CCE"/><stop offset="1" stop-color="#FFE91F"/></linearGradient><linearGradient id="fi1" x1="7.01" y1="21.72" x2="29.71" y2="21.72" gradientUnits="userSpaceOnUse"><stop stop-color="#1E1E95"/><stop offset="0.94" stop-color="#ED4CCE" stop-opacity="0.5"/></linearGradient><linearGradient id="fi2" x1="35.75" y1="30.92" x2="45.21" y2="19.56" gradientUnits="userSpaceOnUse"><stop stop-color="#00F"/><stop offset="0.41" stop-color="#FC6AD4" stop-opacity="0.2"/><stop offset="0.89" stop-color="#FFDE1D" stop-opacity="0"/></linearGradient><clipPath id="c0"><rect width="43" height="39" fill="white" transform="translate(0 0.5)"/></clipPath></defs></svg>`;
-
-    const LOGO_TEXT = `<svg width="80" height="12" viewBox="0 0 172 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#ct0)"><path d="M24.5449 22.6748L21.0807 19.9424C23.2115 17.8773 24.528 15.07 24.528 11.9783C24.5322 5.64884 19.03 0.5 12.2661 0.5C5.50224 0.5 0 5.64884 0 11.9783C0 18.3077 5.50224 23.4566 12.2661 23.4566C15.3084 23.4566 18.0933 22.4142 20.241 20.6887L23.8023 23.5039L24.5449 22.6787V22.6748ZM12.2661 1.58189C18.3929 1.58189 23.3761 6.24506 23.3761 11.9783C23.3761 14.8054 22.1651 17.368 20.1988 19.2475L3.27434 5.87785C5.29549 3.27579 8.57405 1.58189 12.2661 1.58189ZM19.3465 19.9819C17.4224 21.4744 14.954 22.3747 12.2661 22.3747C6.13939 22.3747 1.15615 17.7115 1.15615 11.9783C1.15615 10.0909 1.70046 8.31803 2.64142 6.79391L19.3465 19.9858V19.9819Z" fill="#333"/><path d="M47.5202 0.768497V14.6593C47.5202 18.9118 43.8324 22.3747 39.2964 22.3747C34.7604 22.3747 31.0726 18.9118 31.0726 14.6593V0.768497H29.9207V14.6593C29.9207 19.5081 34.1275 23.4566 39.3006 23.4566C44.4738 23.4566 48.6806 19.512 48.6806 14.6593V0.768497H47.5287H47.5202Z" fill="#333"/><path d="M147.071 0.768497V14.6593C147.071 18.9118 143.383 22.3747 138.847 22.3747C134.311 22.3747 130.623 18.9118 130.623 14.6593V0.768497H129.471V14.6593C129.471 19.5081 133.678 23.4566 138.851 23.4566C144.025 23.4566 148.231 19.512 148.231 14.6593V0.768497H147.079H147.071Z" fill="#333"/><path d="M99.0699 0.768497V21.1704L82.2087 0.768497H81.4661V23.0459H82.5631V2.8691L99.2344 23.0499H100.167V0.768497H99.0699Z" fill="#333"/><path d="M75.2045 23.0341H76.4956L64.6008 0.768497H63.7274L51.8284 23.0341H53.1195L57.3306 15.1489H70.9892L75.2003 23.0341H75.2045ZM64.1662 2.36764L70.4195 14.067H57.9171L64.1704 2.36764H64.1662Z" fill="#333"/><path d="M123.906 0.768497H105.724V1.75167H114.269V23.0499H115.361V1.75167H123.906V0.768497Z" fill="#333"/><path d="M171.354 15.0068C170.932 14.3355 170.316 13.767 169.531 13.3129C168.768 12.8706 167.823 12.4995 166.734 12.2073C165.658 11.9191 164.447 11.6506 163.13 11.4018C161.822 11.157 160.687 10.9043 159.755 10.6516C158.839 10.4028 158.08 10.1027 157.506 9.75923C156.949 9.42755 156.531 9.01691 156.27 8.53914C156.004 8.05743 155.869 7.44146 155.869 6.71099C155.869 5.98052 156.008 5.26189 156.282 4.66567C156.552 4.07339 156.983 3.55614 157.569 3.12575C158.16 2.68747 158.932 2.3479 159.86 2.11494C160.801 1.87803 161.953 1.75562 163.282 1.75562C164.612 1.75562 165.835 1.92541 166.814 2.26103C167.78 2.5927 168.73 3.22446 169.629 4.12867L169.84 4.33794L170.671 3.5127L170.485 3.32712C169.523 2.35579 168.443 1.65691 167.278 1.24232C166.122 0.831674 164.755 0.626352 163.211 0.626352C161.919 0.626352 160.742 0.760601 159.704 1.0212C158.658 1.28575 157.746 1.68455 156.995 2.2018C156.236 2.72695 155.645 3.3824 155.236 4.14446C154.826 4.90652 154.62 5.79099 154.62 6.77416C154.62 7.75734 154.814 8.52335 155.189 9.16695C155.569 9.81056 156.139 10.3515 156.881 10.774C157.603 11.1846 158.497 11.5282 159.531 11.7888C160.548 12.0454 161.734 12.2902 163.05 12.5153C164.392 12.7561 165.578 13.0246 166.569 13.3089C167.54 13.5853 168.35 13.9288 168.97 14.3197C169.574 14.7027 170.025 15.1608 170.316 15.682C170.607 16.2032 170.751 16.8626 170.751 17.6325C170.751 19.1882 170.122 20.3175 168.827 21.0796C167.51 21.8574 165.675 22.2523 163.375 22.2523C161.611 22.2523 160.021 21.9996 158.645 21.5021C157.274 21.0045 155.983 20.1912 154.814 19.0737L154.624 18.896L153.675 19.6502L153.898 19.8555C155.194 21.044 156.616 21.9285 158.13 22.4813C159.641 23.0341 161.392 23.3144 163.341 23.3144C166 23.3144 168.118 22.8209 169.645 21.8535C171.207 20.8624 171.996 19.4094 171.996 17.5378C171.996 16.5309 171.78 15.678 171.354 15.0028V15.0068Z" fill="#333"/></g><defs><clipPath id="ct0"><rect width="172" height="23" fill="white" transform="translate(0 0.5)"/></clipPath></defs></svg>`;
-
     await page.pdf({
       path: outputFile,
       format: "A4",
-      margin: { top: "60px", right: "50px", bottom: "80px", left: "50px" },
+      margin: { top: "35px", right: "45px", bottom: "80px", left: "45px" },
       printBackground: true,
       displayHeaderFooter: true,
       headerTemplate: `<span></span>`,
@@ -153,18 +130,17 @@ async function generatePdf(puppeteer, locale, version) {
           color: #666;
           width: 100%;
           padding: 8px 0 0;
-          margin: 0 76px;
-          border-top: 1px solid #d1d5db;
+          margin: 0 71px;
+          border-top: 1px solid #E8E8E8;
           display: flex;
           justify-content: space-between;
           align-items: center;
         ">
-          <div style="display: flex; align-items: center; gap: 6px;">
-            ${LOGO_ICON}
-            ${LOGO_TEXT}
-          </div>
+          <span style="color: #FF6B35; font-size: 16px; font-family: 'IBM Plex Mono', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; line-height: 35.1px; letter-spacing: 2.56px;">
+            QUANTUS.NETWORK
+          </span>
 
-          <div style="font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;">
+          <div style="font-size: 16px; font-family: 'IBM Plex Mono', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;">
             <span class="pageNumber"></span> / <span class="totalPages"></span>
           </div>
         </div>

website/src/components/features/whitepaper/WhitepaperContent.astro

@@ -1,48 +1,93 @@
 ---
+import { applyStyles } from "@/utils/apply-styles";
+
 export interface Props {
   class?: string;
+  styleVersion?: "v1" | "v2";
 }
 
-const { class: className = "" } = Astro.props;
+const { class: className = "", styleVersion = "v1" } = Astro.props;
+
+const v1 = applyStyles([
+  "prose prose-invert max-w-none [&>*:first-child]:mt-0",
+  "prose-headings:font-semibold prose-headings:tracking-tight",
+  "prose-h2:mt-12 prose-h2:mb-4 prose-h2:scroll-mt-24 prose-h2:border-white/10 prose-h2:pb-3 prose-h2:text-2xl lg:prose-h2:text-3xl",
+  "prose-h3:mt-8 prose-h3:mb-3 prose-h3:scroll-mt-24 prose-h3:text-xl lg:prose-h3:text-2xl",
+  "prose-h4:mt-6 prose-h4:mb-2 prose-h4:scroll-mt-24 prose-h4:text-lg",
+  "prose-p:leading-relaxed prose-p:text-white/70",
+  "prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline",
+  "prose-strong:text-white/90",
+  "prose-li:text-white/70 prose-li:marker:text-white/30",
+  "prose-ol:text-white/70 prose-ul:text-white/70",
+  "prose-code:rounded prose-code:bg-white/10 prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:text-pink-300 prose-code:before:content-none prose-code:after:content-none",
+  "prose-pre:rounded-lg prose-pre:border prose-pre:border-white/10 prose-pre:bg-white/5",
+  "prose-table:overflow-hidden prose-table:rounded-lg prose-table:border prose-table:border-white/10",
+  "prose-th:border-b prose-th:border-white/10 prose-th:bg-white/5 prose-th:px-4 prose-th:py-3 prose-th:text-left prose-th:text-sm prose-th:font-semibold prose-th:text-white/80",
+  "prose-td:border-b prose-td:border-white/5 prose-td:px-4 prose-td:py-3 prose-td:text-sm prose-td:text-white/60",
+  "prose-hr:border-white/10",
+  "prose-blockquote:border-l-blue-500/40 prose-blockquote:text-white/60",
+  "prose-img:rounded-lg prose-img:border prose-img:border-white/10",
+
+  "print:prose-headings:text-black",
+  "print:prose-p:text-[#333] print:prose-strong:text-black",
+  "print:prose-a:text-blue-700 print:prose-a:underline",
+  "print:prose-li:text-[#333] print:prose-li:marker:text-[#555]",
+  "print:prose-ol:text-[#333] print:prose-ul:text-[#333]",
+  "print:prose-code:text-[#c7254e] print:prose-code:bg-[#f9f2f4]",
+  "print:prose-pre:bg-[#f6f8fa] print:prose-pre:border-[#d0d7de]",
+  "print:prose-table:border-[#d0d7de]",
+  "print:prose-th:text-black print:prose-th:bg-[#f6f8fa] print:prose-th:border-[#d0d7de]",
+  "print:prose-td:text-[#333] print:prose-td:border-[#e1e4e8]",
+  "print:prose-hr:border-[#d0d7de]",
+  "print:prose-blockquote:border-l-blue-600 print:prose-blockquote:text-[#555]",
+  "print:prose-img:border-[#d0d7de]",
+  "print:prose-h2:border-[#d0d7de]",
+  className,
+]);
+
+const v2 = applyStyles([
+  "prose prose-invert max-w-none [&>*:first-child]:mt-0",
+  "prose-headings:font-semibold prose-headings:tracking-tight",
+  "prose-h2:mt-12 prose-h2:mb-4 prose-h2:scroll-mt-24 prose-h2:pb-3",
+  "prose-h3:mt-8 prose-h3:mb-3 prose-h3:scroll-mt-24 prose-h3:font-whitepaper-section-title",
+  "prose-h4:mt-6 prose-h4:mb-2 prose-h4:scroll-mt-24 prose-h4:font-whitepaper-sub-section-title prose-h4:text-whitepaper-primary",
+  "prose-p:font-whitepaper-section-paragraph prose-p:text-white/70",
+  "prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline",
+  "prose-strong:text-white/90",
+  "prose-ul:[&_li]:list-none prose-ul:p-0 prose-ul:[&_li]:before:content-['—'] prose-ul:[&_li]:before:mr-2 prose-ul:[&_li]:before:text-whitepaper-primary",
+  "prose-li:text-white/70 prose-li:font-whitepaper-section-paragraph prose-li:p-0",
+  "prose-ol:text-white/70 prose-ul:text-white/70",
+  "prose-code:font-whitepaper-code prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none",
+  "prose-pre:border-l-2 prose-pre:rounded-none prose-pre:border-whitepaper-primary prose-pre:bg-white/10!",
+  "prose-table:overflow-hidden prose-table:rounded-lg prose-table:border prose-table:border-white/10",
+  "prose-th:border-b prose-th:border-white/10 prose-th:bg-white/5 prose-th:px-4 prose-th:py-3 prose-th:text-left prose-th:text-sm prose-th:font-semibold prose-th:text-white/80",
+  "prose-td:border-b prose-td:border-white/5 prose-td:px-4 prose-td:py-3 prose-td:text-sm prose-td:text-white/60",
+  "prose-hr:border-white/10",
+  "prose-blockquote:border-l-whitepaper-primary prose-blockquote:font-whitepaper-blockquote prose-blockquote:border-l-2 prose-blockquote:text-white/60 prose-blockquote:[&>p::before]:content-none  prose-blockquote:[&>p::after]:content-none prose-blockquote:[&>p]:not-italic",
+  "prose-img:rounded-lg prose-img:border prose-img:border-white/10",
+
+  "print:prose-h2:text-whitepaper-body-light",
+  "print:prose-h3:text-whitepaper-body-light",
+  "print:prose-h4:text-whitepaper-primary",
+  "print:prose-p:text-whitepaper-body print:prose-strong:text-black",
+  "print:prose-a:text-blue-700 print:prose-a:underline",
+  "print:prose-li:text-[#333] print:prose-li:marker:text-[#555]",
+  "print:prose-ol:text-[#333] print:prose-ul:text-[#333]",
+  "print:prose-code:text-whitepaper-body-light",
+  "print:prose-pre:bg-whitepaper-pre-background!",
+  "print:prose-table:border-[#d0d7de]",
+  "print:prose-th:text-black print:prose-th:bg-[#f6f8fa] print:prose-th:border-[#d0d7de]",
+  "print:prose-td:text-[#333] print:prose-td:border-[#e1e4e8]",
+  "print:prose-hr:border-[#d0d7de]",
+  "print:prose-blockquote:text-whitepaper-body-light",
+  "print:prose-img:border-[#d0d7de]",
+  "print:prose-h2:border-[#d0d7de]",
+  className,
+]);
+
+const appliedStyles = styleVersion === "v1" ? v1 : v2;
 ---
 
-<article
-  class:list={[
-    "prose prose-invert max-w-none [&>*:first-child]:mt-0",
-    "prose-headings:font-semibold prose-headings:tracking-tight",
-    "prose-h2:mt-12 prose-h2:mb-4 prose-h2:scroll-mt-24 prose-h2:border-white/10 prose-h2:pb-3 prose-h2:text-2xl lg:prose-h2:text-3xl",
-    "prose-h3:mt-8 prose-h3:mb-3 prose-h3:scroll-mt-24 prose-h3:text-xl lg:prose-h3:text-2xl",
-    "prose-h4:mt-6 prose-h4:mb-2 prose-h4:scroll-mt-24 prose-h4:text-lg",
-    "prose-p:leading-relaxed prose-p:text-white/70",
-    "prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline",
-    "prose-strong:text-white/90",
-    "prose-li:text-white/70 prose-li:marker:text-white/30",
-    "prose-ol:text-white/70 prose-ul:text-white/70",
-    "prose-code:rounded prose-code:bg-white/10 prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:text-pink-300 prose-code:before:content-none prose-code:after:content-none",
-    "prose-pre:rounded-lg prose-pre:border prose-pre:border-white/10 prose-pre:bg-white/5",
-    "prose-table:overflow-hidden prose-table:rounded-lg prose-table:border prose-table:border-white/10",
-    "prose-th:border-b prose-th:border-white/10 prose-th:bg-white/5 prose-th:px-4 prose-th:py-3 prose-th:text-left prose-th:text-sm prose-th:font-semibold prose-th:text-white/80",
-    "prose-td:border-b prose-td:border-white/5 prose-td:px-4 prose-td:py-3 prose-td:text-sm prose-td:text-white/60",
-    "prose-hr:border-white/10",
-    "prose-blockquote:border-l-blue-500/40 prose-blockquote:text-white/60",
-    "prose-img:rounded-lg prose-img:border prose-img:border-white/10",
-
-    "print:prose-headings:text-black",
-    "print:prose-p:text-[#333] print:prose-strong:text-black",
-    "print:prose-a:text-blue-700 print:prose-a:underline",
-    "print:prose-li:text-[#333] print:prose-li:marker:text-[#555]",
-    "print:prose-ol:text-[#333] print:prose-ul:text-[#333]",
-    "print:prose-code:text-[#c7254e] print:prose-code:bg-[#f9f2f4]",
-    "print:prose-pre:bg-[#f6f8fa] print:prose-pre:border-[#d0d7de]",
-    "print:prose-table:border-[#d0d7de]",
-    "print:prose-th:text-black print:prose-th:bg-[#f6f8fa] print:prose-th:border-[#d0d7de]",
-    "print:prose-td:text-[#333] print:prose-td:border-[#e1e4e8]",
-    "print:prose-hr:border-[#d0d7de]",
-    "print:prose-blockquote:border-l-blue-600 print:prose-blockquote:text-[#555]",
-    "print:prose-img:border-[#d0d7de]",
-    "print:prose-h2:border-[#d0d7de]",
-    className,
-  ]}
->
+<article class:list={appliedStyles}>
   <slot />
 </article>

website/src/components/features/whitepaper/WhitepaperHeader.astro

@@ -15,6 +15,8 @@ export interface Props {
   pdfHref: string;
   locale: Locale;
   t: (key: string) => string;
+  /** When set with pdf cover, hide header in print so the cover replaces it. */
+  class?: string;
 }
 
 const {
@@ -28,13 +30,17 @@ const {
   pdfHref,
   locale,
   t,
+  class: className = "",
 } = Astro.props;
 
 const displayDate = updatedDate ?? publishedDate;
 ---
 
 <header
-  class="mb-10 border-b border-white/10 pb-10 print:border-black/10"
+  class:list={[
+    "mb-10 border-b border-white/10 pb-10 print:border-black/10",
+    className,
+  ]}
   id="top"
 >
   <div class="flex flex-col gap-4">

website/src/components/features/whitepaper/WhitepaperPrintCover.astro

@@ -0,0 +1,100 @@
+---
+import type { Locale } from "@/utils/i18n";
+import { formatDate } from "@/utils/i18n";
+
+export interface Props {
+  version: string;
+
+  publishedDate: Date;
+  updatedDate?: Date;
+  locale: Locale;
+  t: (key: string) => string;
+}
+
+const { version, publishedDate, updatedDate, locale, t } = Astro.props;
+
+const displayDate = updatedDate ?? publishedDate;
+const formattedDate = formatDate(displayDate, locale, {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+});
+---
+
+<div
+  class="whitepaper-print-cover not-prose hidden print:flex print:min-h-[calc(100vh-70px)] print:flex-col"
+  aria-hidden="true"
+>
+  <div class="flex flex-1 flex-col">
+    <div class="flex flex-col">
+      <span class="font-whitepaper-cover-version text-whitepaper-cover-label"
+        >{t("whitepaper.whitepaper")} / V{version}</span
+      >
+
+      <h1 class="font-whitepaper-cover-title text-whitepaper-primary">
+        Quantus
+      </h1>
+
+      <p class="font-whitepaper-cover-tagline text-whitepaper-cover-tagline">
+        {t("whitepaper.tag_line")}
+      </p>
+    </div>
+
+    <div class="mt-20 flex gap-20">
+      <div class="flex flex-col gap-1">
+        <p class="font-whitepaper-cover-credit-label text-whitepaper-primary">
+          {t("whitepaper.published")}
+        </p>
+
+        <p
+          class="font-whitepaper-cover-credit-content text-whitepaper-cover-label"
+        >
+          {formattedDate}
+        </p>
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <p class="font-whitepaper-cover-credit-label text-whitepaper-primary">
+          {t("whitepaper.version")}
+        </p>
+
+        <p
+          class="font-whitepaper-cover-credit-content text-whitepaper-cover-label"
+        >
+          {version}
+        </p>
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <p class="font-whitepaper-cover-credit-label text-whitepaper-primary">
+          {t("whitepaper.classification")}
+        </p>
+
+        <p
+          class="font-whitepaper-cover-credit-content text-whitepaper-cover-label"
+        >
+          Public
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex w-full flex-1 items-end">
+    <img
+      src="/whitepaper/v0.3.3/whitepaper-cover-decoration.webp"
+      alt="Decoration"
+      class="h-full w-full object-cover"
+    />
+  </div>
+</div>
+
+<style>
+  @media print {
+    .whitepaper-print-cover {
+      page-break-after: always;
+      break-after: page;
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+    }
+  }
+</style>