feat(ui): revamp landing and docs experience for 0.8.0

packages/ui/src/components/footer/Footer.module.css

@@ -1,21 +1,18 @@
 .block {
   display: flex;
   background-color: var(--white);
-  border-bottom: var(--border);
   border-top: var(--border);
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0;
-  z-index: 100;
+  border-bottom: none;
 }
 
 .footer-container {
   display: flex;
   flex-direction: row;
   width: 100%;
   justify-content: space-between;
-  padding: 1.2rem 0;
+  padding: 1.5rem 0;
   align-items: center;
+  gap: 1.25rem;
 }
 
 .footer-logo {
@@ -24,7 +21,7 @@
   gap: 0.5rem;
   align-items: center;
   color: var(--black);
-  font-size: 1.85rem;
+  font-size: 1.75rem;
   cursor: pointer;
   border: none;
   background-color: var(--white);
@@ -35,11 +32,11 @@
   display: flex;
   color: var(--description);
   font-weight: 600;
-  font-size: 1.2rem;
+  font-size: 1.15rem;
   flex-direction: row;
-  gap: 1.25rem;
+  gap: 1.5rem;
   align-items: center;
-  padding: 0 30px;
+  padding: 0 1.25rem;
 }
 
 .footer-item {
@@ -55,7 +52,7 @@
 .footer-copyright,
 .footer-powered {
   color: var(--description);
-  font-size: 1.2rem;
+  font-size: 1.15rem;
   text-decoration: none;
   font-weight: bold;
   text-align: center;
@@ -73,9 +70,10 @@
 @media only screen and (max-width: 1024px) {
   .footer-container {
     flex-direction: column;
-    justify-content: space-around;
+    justify-content: center;
     align-items: center;
-    padding: 20px 0;
+    padding: 1.4rem 0;
+    gap: 0.85rem;
   }
 
   .footer-logo {
@@ -96,9 +94,11 @@
 
   .footer-items {
     display: flex;
-    flex-direction: column;
-    gap: 10px;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.9rem 1.1rem;
     align-items: center;
-    margin: 15px 0;
+    margin: 0.35rem 0;
+    padding: 0;
   }
 }

packages/ui/src/components/header/Header.module.css

@@ -13,18 +13,20 @@
   width: 100%;
   display: flex;
   justify-content: space-between;
-  padding: 1.2rem 0;
+  align-items: center;
+  min-height: 5.25rem;
+  padding: 0.9rem 0;
 }
 .mobile-header {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 0;
+  gap: 0.35rem;
 }
 .brand {
   display: flex;
   flex-direction: row;
-  gap: 0.5rem;
+  gap: 0.55rem;
   align-items: center;
   cursor: pointer;
   border: none;
@@ -38,7 +40,8 @@
 
 .brand-name {
   font-size: 2rem;
-  font-weight: bold;
+  font-weight: 700;
+  letter-spacing: -0.02em;
   color: var(--black);
 }
 
@@ -49,7 +52,7 @@
 }
 
 .ml {
-  margin-left: 1rem;
+  margin-left: 0.4rem;
 }
 
 .nav {
@@ -91,8 +94,12 @@
     gap: 1rem;
   }
 
+  .nav {
+    font-size: 1.05rem;
+  }
+
   .ml {
-    margin-left: 12px;
+    margin-left: 0.25rem;
   }
 }
 
@@ -125,7 +132,7 @@
 
   .brand-name {
     font-size: 1.6rem;
-    font-weight: bold;
+    font-weight: 700;
   }
 
   .hamburger-img {

packages/ui/src/page/documentation/CodeBlock.jsx

@@ -18,44 +18,75 @@ const CodeBlock = ({
     });
   };
 
-  const logos = {
-    javascript: CODEBLOCK.jsLogo,
-    python: CODEBLOCK.pythonLogo,
-    java: CODEBLOCK.javaLogo,
+  const languageLabelMap = {
+    curl: "cURL",
+    javascript: "JavaScript",
+    python: "Python",
+    java: "Java",
   };
 
+  const selectedCode = codeExamples[selectedLanguage] || "";
+  const codeLines = selectedCode.split("\n");
+
   return (
     <div className={styles["code-block-wrapper"]}>
       <div className={styles["code-block-header"]}>
-        <div className={styles["language-selector"]}>
-          {Object.keys(codeExamples).map((lang) => (
-            <button
-              key={`${id}-${lang}`}
-              onClick={() => setSelectedLanguage(lang)}
-              className={`${styles["language-button"]} ${
-                selectedLanguage === lang
-                  ? styles["language-button-active"]
-                  : ""
-              }`}
-            >
-              <img src={logos[lang]} alt={`${lang} logo`} />
-            </button>
-          ))}
+        <div className={styles["code-window-dots"]}>
+          <span></span>
+          <span></span>
+          <span></span>
         </div>
-      </div>
-      <pre className={styles["code-block"]}>
-        <div className={styles["copy-inside"]}>
-          <code>{codeExamples[selectedLanguage]}</code>
+
+        <div className={styles["code-header-actions"]}>
+          <div className={styles["language-selector"]}>
+            {Object.keys(codeExamples).map((lang) => (
+              <button
+                type="button"
+                key={`${id}-${lang}`}
+                aria-label={`${lang} logo`}
+                onClick={() => setSelectedLanguage(lang)}
+                className={`${styles["language-button"]} ${
+                  selectedLanguage === lang
+                    ? styles["language-button-active"]
+                    : ""
+                }`}
+              >
+                <span className={styles["language-label"]}>
+                  {languageLabelMap[lang] || lang}
+                </span>
+              </button>
+            ))}
+          </div>
+
           <button
-            onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
+            type="button"
+            className={styles["copy-button"]}
+            onClick={() => copyToClipboard(selectedCode)}
           >
             <img
               src={copyMessage ? CODEBLOCK.tick : CODEBLOCK.copycodeicon}
               alt="tick-copy-code"
               style={copyMessage ? {} : { cursor: "pointer" }}
             />
+            <span className={styles["copy-label"]}>
+              {copyMessage || "Copy"}
+            </span>
           </button>
         </div>
+      </div>
+
+      <pre className={styles["code-block"]}>
+        <code>
+          {codeLines.map((line, index) => (
+            <span
+              key={`${id}-${selectedLanguage}-${index}`}
+              className={styles["code-line"]}
+            >
+              <span className={styles["line-number"]}>{index + 1}</span>
+              <span className={styles["line-content"]}>{line || " "}</span>
+            </span>
+          ))}
+        </code>
       </pre>
     </div>
   );