Repository: ar-io/arns-react
Pull request #754: fix(landing pages): add 404 page
Author: login: atticusofsparta
Created: 2025-05-02T15:49:25Z | Merged: 2025-05-02T18:46:31Z



<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a dedicated 404/info page for ArNS featuring responsive layout, interactive tooltips, and dynamic domain-based links.
- **Documentation**
  - Added a detailed README covering project structure, asset hosting on Arweave, and coding standards for the 404 page.
- **Style**
  - Enhanced styling with Tailwind CSS, semi-transparent backgrounds, blur effects, and fade-in animations on both landing and 404 pages.
- **Refactor**
  - Improved dynamic link updates and tooltip behavior for clearer user guidance and contextual accuracy.
- **Bug Fixes**
  - Enhanced browser compatibility with updated meta tags and refined image sources and positioning.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/404_page/README.md b/404_page/README.md
new file mode 100644
index 000000000..616a7faab
--- /dev/null
+++ b/404_page/README.md
@@ -0,0 +1,33 @@
+### Current version is [not deployed]
+
+# ArNS 404 Page
+
+## Project Structure
+
+- `index.html`: The main HTML document containing the structure and content of
+  the landing page.
+
+### Asset Hosting
+
+- All contributed assets (e.g., images, scripts, stylesheets) must be uploaded
+  to Arweave. This ensures that the assets remain permanently available.
+- Replace local or external asset URLs with the corresponding Arweave URLs in
+  your contributions.
+
+### Code Contributions
+
+- **HTML**: Adhere to HTML5 standards, ensuring your code is semantic and
+  accessible.
+- **CSS**: This project uses Tailwind CSS. Utilize Tailwind's utility classes to
+  maintain consistency and efficiency.
+- **JavaScript**: Write modular, well-commented code for maintainability and
+  clarity.
+
+## Resources
+
+- Ar.io Logo:
+  [https://arweave.net/DOwkxvmB8-6CthRSS1LsLP-0hAXHjYcS0y5EexyxOGs](https://arweave.net/DOwkxvmB8-6CthRSS1LsLP-0hAXHjYcS0y5EexyxOGs)
+- Rocket Image:
+  [https://arweave.net/0gKVk4wKDtPdgRwXt8ypIDH7Xj870i59n7kxeoAroOc](https://arweave.net/0gKVk4wKDtPdgRwXt8ypIDH7Xj870i59n7kxeoAroOc)
+- Tailwind CSS Script:
+  [https://arweave.net/RjXXBjP2GCZZUg4gSW1Hyr9GtLG-o59QCHrKiITtpQw](https://arweave.net/RjXXBjP2GCZZUg4gSW1Hyr9GtLG-o59QCHrKiITtpQw)
diff --git a/404_page/index.html b/404_page/index.html
new file mode 100644
index 000000000..c15859a93
--- /dev/null
+++ b/404_page/index.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/svg"
+      href="https://arweave.net/DOwkxvmB8-6CthRSS1LsLP-0hAXHjYcS0y5EexyxOGs"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <script src="https://arweave.net/RjXXBjP2GCZZUg4gSW1Hyr9GtLG-o59QCHrKiITtpQw"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          borderWidth: {
+            1: '1px',
+          },
+          extend: {
+            colors: {
+              primary: '#FFBB38',
+              background: '#141416',
+              surface: '#222224',
+              surfaceSecondary: '#2E2E30',
+              textPrimary: '#F5F5F5',
+              textSubtle: '#7A7A7C',
+            },
+          },
+        },
+      };
+      function updateLinks() {
+        const domainText = document.getElementById('domain-name');
+        const fullDomain = window.location.host;
+        const [arnsDomain, ...gatewayPieces] = fullDomain.split('.');
+
+        domainText.innerText = arnsDomain;
+
+        const gatewayHost = gatewayPieces.join('.');
+        const allLinks = document.querySelectorAll('a');
+        allLinks.forEach((link) => {
+          allLinks.forEach((link) => {
+            link.href = link.href
+              .replace('<GATEWAY_HOST>', gatewayHost)
+              .replace('<ARNS_NAME>', arnsDomain);
+
+            link.target = '_blank';
+          });
+        });
+      }
+      window.addEventListener('load', () => {
+        updateLinks();
+      });
+    </script>
+    <style>
+      .tippy-box {
+        width: fit-content;
+        background-color: #222224;
+        color: #f5f5f5;
+        border: 1px solid #2e2e30;
+        border-radius: 8px;
+      }
+
+      @media (max-width: 640px) {
+        #text-card {
+          animation: fade-in 1s ease-in-out;
+        }
+
+        @keyframes fade-in {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+      }
+    </style>
+    <title>ArNS - Arweave Name System</title>
+  </head>
+  <body
+    class="bg-background flex flex-row m-0 p-0 box-border h-screen w-screen fixed"
+  >
+    <div
+      id="astronaut-image"
+      class="sm:w-full absolute md:w-fit md:relative h-full"
+    >
+      <img
+        src="https://arweave.net/ZUxr5bSRFh-D8zF8Y8Bkq64QskV8YCZMpJuooqFY-aY"
+        alt="astronaut"
+        class="sm:w-full md:w-fit h-full"
+      />
+
+      <div
+        id="logo-badge"
+        class="flex flex-col h-full md:w-65 justify-center absolute right-0 top-0"
+      >
+        <img
+          class="invisible md:visible rounded bg-surface p-4 h-fit relative -right-1/2"
+          src="https://arweave.net/DOwkxvmB8-6CthRSS1LsLP-0hAXHjYcS0y5EexyxOGs"
+          alt="logo"
+          width="65px"
+          height="65px"
+        />
+      </div>
+    </div>
+
+    <div
+      id="text-container"
+      class="absolute w-full md:static md:w-2/3 h-full flex flex-row justify-center items-center content-center"
+      style="flex-wrap: wrap"
+    >
+      <img
+        src="https://arweave.net/At1eNgYl43Rc6XhMRo88blSSUv84rFMkPaMklN143zQ"
+        class="hidden sm:block absolute top-0 right-0 h-full"
+        draggable="false"
+      />
+      <!-- text area -->
+      <div
+        id="text-card"
+        class="bg-background/70 backdrop-blur-lg sm:backdrop-blur-none md:bg-transparent relative md:static content-center m-5 p-5 h-fit sm:min-h-fit sm:h-4/5 gap-10 flex flex-col md:justify-between md:w-2/3 md:h-1/3 rounded"
+      >
+        <div
+          class="flex flex-col sm:flex-row gap-4 sm:gap-2 items-center justify-center sm:items-center sm:justify-start w-fit mx-auto sm:mx-0 mt-10 sm:mt-0"
+        >
+          <span id="wayfinder-link" class="text-textSubtle cursor-pointer"
+            >ar://</span
+          >
+          <span
+            class="w-fit text-sm break-all text-wrap text-textPrimary border-1 border-surfaceSecondary px-3 py-1 rounded-full mx-auto md:m-0 bg-surface"
+          >
+            <a
+              id="domain-name"
+              href="https://arns.<GATEWAY_HOST>/#/register/<ARNS_NAME>"
+              target="_blank"
+              >arns</a
+            >
+          </span>
+        </div>
+
+        <h2
+          class="text-textPrimary text-4xl md:text-5xl font-bold w-fit text-center md:text-start mx-auto md:m-0"
+        >
+          Make this domain space yours.
+        </h2>
+        <p
+          class="text-textSubtle text-center md:text-start w-fit mx-auto md:m-0"
+        >
+          The Arweave Name System is a simple way to name and find things stored
+          on the permaweb. It's a smart contract based system that helps you
+          find your data, apps, or websites on Arweave easily.
+        </p>
+        <a
+          href="https://arns.<GATEWAY_HOST>"
+          id="domain-link"
+          class="bg-primary text-black fill-black w-full sm:fill-primary sm:bg-transparent gap-2 rounded p-3 sm:pl-0 font-bold sm:text-primary sm:w-fit flex flex-row items-center justify-center mx-auto md:m-0"
+        >
+          Get yours now&nbsp;
+          <svg
+            width="12"
+            height="10"
+            viewBox="0 0 12 10"
+            fill="current"
+            xmlns="http://www.w3.org/2000/svg"
+            class="m-auto hidden sm:block"
+          >
+            <path
+              d="M11.8538 5.35375L7.35375 9.85375C7.25993 9.94757 7.13268 10.0003 7 10.0003C6.86732 10.0003 6.74007 9.94757 6.64625 9.85375C6.55243 9.75993 6.49972 9.63269 6.49972 9.5C6.49972 9.36732 6.55243 9.24007 6.64625 9.14625L10.2931 5.5H0.5C0.367392 5.5 0.240215 5.44733 0.146447 5.35356C0.0526785 5.25979 0 5.13261 0 5C0 4.86739 0.0526785 4.74022 0.146447 4.64645C0.240215 4.55268 0.367392 4.5 0.5 4.5H10.2931L6.64625 0.853753C6.55243 0.759933 6.49972 0.632685 6.49972 0.500003C6.49972 0.367321 6.55243 0.240074 6.64625 0.146253C6.74007 0.052433 6.86732 -0.000274658 7 -0.000274658C7.13268 -0.000274658 7.25993 0.052433 7.35375 0.146253L11.8538 4.64625C11.9002 4.69269 11.9371 4.74783 11.9623 4.80853C11.9874 4.86923 12.0004 4.9343 12.0004 5C12.0004 5.06571 11.9874 5.13077 11.9623 5.19147C11.9371 5.25217 11.9002 5.30732 11.8538 5.35375Z"
+              fill="current"
+            />
+          </svg>
+        </a>
+        <img
+          class="md:hidden mx-auto absolute right-0 left-0 rounded bg-surface p-3 h-fit md:relative"
+          src="https://arweave.net/DOwkxvmB8-6CthRSS1LsLP-0hAXHjYcS0y5EexyxOGs"
+          alt="logo"
+          width="50px"
+          height="50px"
+          style="top: -25px"
+        />
+      </div>
+    </div>
+
+    <script src="https://unpkg.com/@popperjs/core@2"></script>
+    <script src="https://unpkg.com/tippy.js@6"></script>
+    <script>
+      tippy('#domain-name', {
+        content: 'Register',
+        arrow: false,
+      });
+      tippy('#wayfinder-link', {
+        interactive: true,
+        allowHTML: true,
+        arrow: false,
+        content: () => {
+          const fullDomain = window.location.host;
+          const [arnsDomain, ...gatewayPieces] = fullDomain.split('.');
+          const gatewayHost = gatewayPieces.join('.');
+          return `
+        <div class="text-sm break-words p-1 text-center">
+          
+        The Wayfinder Protocol enables browsers and apps to resolve <a href="https://docs.${gatewayHost}/concepts/wayfinder" target="_blank" class="text-primary">ar://</a> links into Arweave-hosted content through flexible, decentralized gateway routing for improved accessibility and reliability.
+        <br/><br/>
+       <a href="https://docs.${gatewayHost}/concepts/wayfinder" target="_blank" class="text-primary">Read more</a>
+        </div>`;
+        },
+      });
+    </script>
+  </body>
+</html>
diff --git a/landing_page/index.html b/landing_page/index.html
index 4821156e6..67d157a27 100644
--- a/landing_page/index.html
+++ b/landing_page/index.html
@@ -8,6 +8,7 @@
       href="https://arweave.net/DOwkxvmB8-6CthRSS1LsLP-0hAXHjYcS0y5EexyxOGs"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <script src="https://arweave.net/RjXXBjP2GCZZUg4gSW1Hyr9GtLG-o59QCHrKiITtpQw"></script>
     <script>
       tailwind.config = {
@@ -27,25 +28,59 @@
           },
         },
       };
-      window.addEventListener('load', () => {
+      function updateLinks() {
         const domainText = document.getElementById('domain-name');
-        const fullDomain = window.location.origin.replace(/^https?:\/\//, '');
-        const arnsDomain = fullDomain.split('.')[0];
+        const fullDomain = window.location.host;
+        const [arnsDomain, ...gatewayPieces] = fullDomain.split('.');
+
         domainText.innerText = arnsDomain;
+
+        const gatewayHost = gatewayPieces.join('.');
+        const allLinks = document.querySelectorAll('a');
+        allLinks.forEach((link) => {
+          link.href = link.href
+            .replace('<GATEWAY_HOST>', gatewayHost)
+            .replace('<ARNS_NAME>', arnsDomain);
+
+          link.target = '_blank';
+        });
+      }
+      window.addEventListener('load', () => {
+        updateLinks();
       });
     </script>
+    <style>
+      .tippy-box {
+        width: fit-content;
+        background-color: #222224;
+        color: #f5f5f5;
+        border: 1px solid #2e2e30;
+        border-radius: 8px;
+      }
+      @media (max-width: 640px) {
+        #text-card {
+          animation: fade-in 1s ease-in-out;
+        }
+
+        @keyframes fade-in {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+      }
+    </style>
     <title>ArNS - Arweave Name System</title>
   </head>
   <body
     class="bg-background flex flex-row m-0 p-0 box-border h-screen w-screen fixed"
   >
-    <div
-      id="rocket-image"
-      class="sm:w-full absolute md:w-fit md:relative h-full"
-    >
+    <div id="bull-image" class="sm:w-full absolute md:w-fit md:relative h-full">
       <img
-        src="https://arweave.net/0gKVk4wKDtPdgRwXt8ypIDH7Xj870i59n7kxeoAroOc"
-        alt="rocket"
+        src="https://arweave.net/dYuIOAQ-ON40ICTXhwgnuaZty1Yulb9ZPgrJ6_WH6Mw"
+        alt="bull"
         class="sm:w-full md:w-fit h-full"
       />
 
@@ -68,26 +103,38 @@
       class="absolute w-full md:static md:w-2/3 h-full flex flex-row justify-center content-center"
       style="flex-wrap: wrap"
     >
+      <img
+        src="https://arweave.net/At1eNgYl43Rc6XhMRo88blSSUv84rFMkPaMklN143zQ"
+        class="hidden sm:block absolute top-0 right-0 h-full"
+        draggable="false"
+      />
       <!-- text area -->
       <div
         id="text-card"
-        class="bg-background relative md:static content-center m-5 p-5 h-4/5 gap-5 flex flex-col md:justify-between md:w-2/3 md:h-1/3 rounded"
+        class="bg-background/70 backdrop-blur-lg sm:backdrop-blur-none md:bg-transparent relative md:static content-center m-5 p-5 h-fit sm:h-4/5 gap-10 flex flex-col md:justify-between md:w-2/3 md:h-1/3 rounded"
       >
-        <span
-          class="w-fit text-sm break-all text-wrap text-textPrimary border-1 border-surfaceSecondary p-3 rounded-full mx-auto md:m-0"
+        <div
+          class="flex flex-col sm:flex-row gap-4 sm:gap-2 items-center justify-center sm:items-center sm:justify-start w-fit mx-auto sm:mx-0 mt-10 sm:mt-0"
         >
-          <a
-            href="https://docs.ar.io/wayfinder/#wayfinder-protocol"
-            class="text-primary"
-            >ar://</a
+          <span id="wayfinder-link" class="text-textSubtle cursor-pointer"
+            >ar://</span
           >
-          <span id="domain-name">arns</span>
-        </span>
+          <span
+            class="w-fit text-sm break-all text-wrap text-textPrimary border-1 border-surfaceSecondary px-3 py-1 rounded-full mx-auto md:m-0 bg-surface"
+          >
+            <a
+              id="domain-name"
+              href="https://arns.<GATEWAY_HOST>/#/manage/names/<ARNS_NAME>"
+              target="_blank"
+              >arns</a
+            >
+          </span>
+        </div>
 
         <h2
           class="text-textPrimary text-4xl md:text-5xl font-bold w-fit text-center md:text-start mx-auto md:m-0"
         >
-          Future home of something quite cool.
+          Future home of something rather bullish.
         </h2>
         <p
           class="text-textSubtle text-center md:text-start w-fit mx-auto md:m-0"
@@ -97,9 +144,9 @@
           find your data, apps, or websites on Arweave easily.
         </p>
         <a
-          href="https://arns.app"
+          href="https://arns.<GATEWAY_HOST>"
           id="domain-link"
-          class="text-primary w-fit flex flex-row mx-auto md:m-0"
+          class="bg-primary text-black fill-black w-full sm:fill-primary sm:bg-transparent gap-2 rounded p-3 sm:pl-0 font-bold sm:text-primary sm:w-fit flex flex-row items-center justify-center mx-auto md:m-0"
         >
           Get yours now&nbsp;
           <svg
@@ -108,7 +155,7 @@
             viewBox="0 0 12 10"
             fill="current"
             xmlns="http://www.w3.org/2000/svg"
-            class="fill-primary m-auto"
+            class="m-auto hidden sm:block"
           >
             <path
               d="M11.8538 5.35375L7.35375 9.85375C7.25993 9.94757 7.13268 10.0003 7 10.0003C6.86732 10.0003 6.74007 9.94757 6.64625 9.85375C6.55243 9.75993 6.49972 9.63269 6.49972 9.5C6.49972 9.36732 6.55243 9.24007 6.64625 9.14625L10.2931 5.5H0.5C0.367392 5.5 0.240215 5.44733 0.146447 5.35356C0.0526785 5.25979 0 5.13261 0 5C0 4.86739 0.0526785 4.74022 0.146447 4.64645C0.240215 4.55268 0.367392 4.5 0.5 4.5H10.2931L6.64625 0.853753C6.55243 0.759933 6.49972 0.632685 6.49972 0.500003C6.49972 0.367321 6.55243 0.240074 6.64625 0.146253C6.74007 0.052433 6.86732 -0.000274658 7 -0.000274658C7.13268 -0.000274658 7.25993 0.052433 7.35375 0.146253L11.8538 4.64625C11.9002 4.69269 11.9371 4.74783 11.9623 4.80853C11.9874 4.86923 12.0004 4.9343 12.0004 5C12.0004 5.06571 11.9874 5.13077 11.9623 5.19147C11.9371 5.25217 11.9002 5.30732 11.8538 5.35375Z"
@@ -117,14 +164,40 @@
           </svg>
         </a>
         <img
-          class="md:hidden mx-auto absolute right-0 left-0 rounded bg-surface p-4 h-fit md:relative"
+          class="md:hidden mx-auto absolute right-0 left-0 rounded bg-surface p-3 h-fit md:relative"
           src="https://arweave.net/DOwkxvmB8-6CthRSS1LsLP-0hAXHjYcS0y5EexyxOGs"
           alt="logo"
-          width="65px"
-          height="65px"
-          style="bottom: -30px"
+          width="50px"
+          height="50px"
+          style="top: -25px"
         />
       </div>
     </div>
+
+    <script src="https://unpkg.com/@popperjs/core@2"></script>
+    <script src="https://unpkg.com/tippy.js@6"></script>
+    <script>
+      tippy('#domain-name', {
+        content: 'Details',
+        arrow: false,
+      });
+      tippy('#wayfinder-link', {
+        interactive: true,
+        allowHTML: true,
+        arrow: false,
+        content: () => {
+          const fullDomain = window.location.host;
+          const [arnsDomain, ...gatewayPieces] = fullDomain.split('.');
+          const gatewayHost = gatewayPieces.join('.');
+          return `
+        <div class="text-sm break-words p-1 text-center">
+          
+        The Wayfinder Protocol enables browsers and apps to resolve <a href="https://docs.${gatewayHost}/concepts/wayfinder" target="_blank" class="text-primary">ar://</a> links into Arweave-hosted content through flexible, decentralized gateway routing for improved accessibility and reliability.
+        <br/><br/>
+       <a href="https://docs.${gatewayHost}/concepts/wayfinder" target="_blank" class="text-primary">Read more</a>
+        </div>`;
+        },
+      });
+    </script>
   </body>
 </html>


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 6**

<details>
<summary>🧹 Nitpick comments (9)</summary><blockquote>

<details>
<summary>landing_page/index.html (6)</summary><blockquote>

`80-85`: **Enhance alt text for the main image**  
The `<img>` for the bull uses `alt="bull"`. For better accessibility, provide a more descriptive alt text, such as `alt="Bull illustration representing a bullish future"`.

---

`114-114`: **Improve readability of utility classes**  
The `class` list on `#text-card` is very long. Consider splitting it across multiple lines or extracting shared groups into a reusable component or CSS class for maintainability.

---

`122-130`: **Extract repeated styling into a component**  
The span wrapping the domain link has many utility classes. If this pattern repeats across pages, extract it into a shared component or CSS class. Also, verify whether both `break-all` and `text-wrap` are needed, as they can conflict.

---

`168-173`: **Move inline positioning to Tailwind or CSS**  
Using `style="top: -25px"` for the mobile logo mixes inline styles with utility classes. Consider using Tailwind’s transform utilities (e.g., `-translate-y-1/2`) or adding a custom CSS rule.

---

`177-178`: **Pin exact versions for Popper.js and Tippy.js**  
Floating imports (`@2`, `@6`) may lead to unintended updates. For reproducibility and security audits, specify exact minor/patch versions (e.g., `@2.11.8`, `@6.3.1`).

---

`184-199`: **Remove leading newline in Wayfinder tooltip content**  
The template string for the Wayfinder tooltip starts with a newline and extra indentation, which may introduce unwanted whitespace. Trim or remove the leading newline:
```diff
-return `
-        <div class="text-sm break-words p-1 text-center">
+return `<div class="text-sm break-words p-1 text-center">
```

</blockquote></details>
<details>
<summary>404_page/index.html (3)</summary><blockquote>

`32-36`: **Use `hostname` instead of `host`**  
Replace `window.location.host` with `window.location.hostname` to avoid including ports in the split logic.

---

`39-40`: **Scope dynamic link replacement**  
Updating all `<a>` tags can unintentionally mutate external links. Consider targeting only your placeholders (e.g., `document.querySelectorAll('a[data-arns-link]')`).

---

`189-206`: **Trim leading newline in Wayfinder tooltip content**  
As in the main page, remove the leading newline in the tooltip’s template string to avoid extra whitespace:
```diff
-return `
-        <div class="text-sm break-words p-1 text-center">
+return `<div class="text-sm break-words p-1 text-center">
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 05d5b29f28c30489d09ad698b5078150cca9d15d and 46a845b7a86226cf836e16fc9968f18a69fd35f4.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `404_page/README.md` (1 hunks)
* `404_page/index.html` (1 hunks)
* `landing_page/index.html` (6 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🪛 LanguageTool</summary>

<details>
<summary>404_page/README.md</summary>

[uncategorized] ~7-~7: Loose punctuation mark.
Context: ...ge  ## Project Structure  - `index.html`: The main HTML document containing the s...

(UNLIKELY_OPENING_PUNCTUATION)

</details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (2)</summary>

* GitHub Check: build_and_test / lint_test_build
* GitHub Check: lint_test_build

</details>

<details>
<summary>🔇 Additional comments (6)</summary><blockquote>

<details>
<summary>404_page/README.md (1)</summary>

`1-34`: **Comprehensive and clear README**  
The README accurately describes the project structure, asset hosting requirements, and coding guidelines. It aligns with our standards and provides contributors with clear instructions on using Arweave URLs and Tailwind CSS.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 LanguageTool</summary>

[uncategorized] ~7-~7: Loose punctuation mark.
Context: ...ge  ## Project Structure  - `index.html`: The main HTML document containing the s...

(UNLIKELY_OPENING_PUNCTUATION)

</details>

</details>

</details>
<details>
<summary>landing_page/index.html (2)</summary>

`11-11`: **Review IE compatibility meta tag necessity**  
The `X-UA-Compatible` meta tag targets legacy IE browsers, which are no longer widely used. Please confirm whether IE support is still required; otherwise, consider removing it to simplify the head section.

---

`180-183`: **Approve basic tooltip on domain name**  
The simple tooltip for `#domain-name` with content “Details” is clear and correctly implemented.

</details>
<details>
<summary>404_page/index.html (3)</summary>

`11-11`: **Review IE compatibility meta tag necessity**  
As on the landing page, verify if IE support is still needed. If not, remove the `X-UA-Compatible` tag to streamline the head.

---

`186-189`: **Approve basic tooltip on domain name**  
The simple “Register” tooltip is concise and correctly implemented with Tippy.js.

---

`41-48`: _⚠️ Potential issue_

**Fix nested `forEach` bug in `updateLinks`**  
The inner `allLinks.forEach` duplicates iteration. Only one loop is needed.  
  
Apply this diff:
```diff
-        allLinks.forEach((link) => {
-          allLinks.forEach((link) => {
-            link.href = link.href
+        allLinks.forEach((link) => {
+            link.href = link.href
               .replace('<GATEWAY_HOST>', gatewayHost)
               .replace('<ARNS_NAME>', arnsDomain);
            link.target = '_blank';
-          });
-        });
+        });
```  



> Likely an incorrect or invalid review comment.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-02T15:53:04Z
user: login: kunstmusik
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-02T18:40:11Z

Review comments:
diff_hunk: @@ -27,25 +28,59 @@
           },
         },
       };
-      window.addEventListener('load', () => {
+      function updateLinks() {
         const domainText = document.getElementById('domain-name');
-        const fullDomain = window.location.origin.replace(/^https?:\/\//, '');
-        const arnsDomain = fullDomain.split('.')[0];
+        const fullDomain = window.location.host;
+        const [arnsDomain, ...gatewayPieces] = fullDomain.split('.');
+
path: landing_page/index.html
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Use `hostname` instead of `host`**  
`window.location.host` can include a port number (e.g., `example.com:8080`), which will bleed into your `gatewayHost`. Switching to `window.location.hostname` ensures only the domain is processed.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-02T15:53:02Z
author_association: CONTRIBUTOR
diff_hunk: @@ -27,25 +28,59 @@
           },
         },
       };
-      window.addEventListener('load', () => {
+      function updateLinks() {
         const domainText = document.getElementById('domain-name');
-        const fullDomain = window.location.origin.replace(/^https?:\/\//, '');
-        const arnsDomain = fullDomain.split('.')[0];
+        const fullDomain = window.location.host;
+        const [arnsDomain, ...gatewayPieces] = fullDomain.split('.');
+
         domainText.innerText = arnsDomain;
+
+        const gatewayHost = gatewayPieces.join('.');
path: landing_page/index.html
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Scope dynamic link updates to relevant anchors**  
`updateLinks` currently selects and mutates all `<a>` elements, including external or analytics links. To avoid unintended modifications, consider adding a data attribute or specific class to target only your placeholder links (e.g., `a[data-arns-link]`).

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-05-02T15:53:03Z
author_association: CONTRIBUTOR
diff_hunk: @@ -97,9 +144,9 @@
           find your data, apps, or websites on Arweave easily.
         </p>
         <a
-          href="https://arns.app"
+          href="https://arns.<GATEWAY_HOST>"
           id="domain-link"
-          class="text-primary w-fit flex flex-row mx-auto md:m-0"
+          class="bg-primary text-black fill-black w-full sm:fill-primary sm:bg-transparent gap-2 rounded p-3 sm:pl-0 text-bold sm:text-primary sm:w-fit flex flex-row items-center justify-center mx-auto md:m-0"
         >
path: landing_page/index.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Replace invalid Tailwind class `text-bold`**  
Tailwind uses `font-bold` for bold text. The class `text-bold` is not valid and has no effect.  
  
Apply this diff:
```diff
- class="bg-primary text-black fill-black w-full sm:fill-primary sm:bg-transparent gap-2 rounded p-3 sm:pl-0 text-bold sm:text-primary sm:w-fit flex flex-row items-center justify-center mx-auto md:m-0"
+ class="bg-primary text-black fill-black w-full sm:fill-primary sm:bg-transparent gap-2 rounded p-3 sm:pl-0 font-bold sm:text-primary sm:w-fit flex flex-row items-center justify-center mx-auto md:m-0"
```  


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
          href="https://arns.<GATEWAY_HOST>"
          id="domain-link"
          class="bg-primary text-black fill-black w-full sm:fill-primary sm:bg-transparent gap-2 rounded p-3 sm:pl-0 font-bold sm:text-primary sm:w-fit flex flex-row items-center justify-center mx-auto md:m-0"
        >
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commit 700ba47
created_at: 2025-05-02T15:53:03Z
author_association: CONTRIBUTOR
diff_hunk: @@ -68,26 +103,38 @@
       class="absolute w-full md:static md:w-2/3 h-full flex flex-row justify-center content-center"
       style="flex-wrap: wrap"
     >
+      <img
+        src="https://arweave.net/At1eNgYl43Rc6XhMRo88blSSUv84rFMkPaMklN143zQ"
+        class="absolute top-0 right-0 h-full xs:hidden"
+        draggable="false"
+      />
path: landing_page/index.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Fix non-standard Tailwind breakpoint `xs:hidden`**  
Tailwind’s default breakpoints start at `sm`. The class `xs:hidden` has no effect. To hide this decorative image on small screens, use:
```diff
- class="absolute top-0 right-0 h-full xs:hidden"
+ class="hidden sm:block absolute top-0 right-0 h-full"
```  



<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
      <img
        src="https://arweave.net/At1eNgYl43Rc6XhMRo88blSSUv84rFMkPaMklN143zQ"
        class="hidden sm:block absolute top-0 right-0 h-full"
        draggable="false"
      />
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commit 700ba47
created_at: 2025-05-02T15:53:03Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/svg"
+      href="https://arweave.net/DOwkxvmB8-6CthRSS1LsLP-0hAXHjYcS0y5EexyxOGs"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <script src="https://arweave.net/RjXXBjP2GCZZUg4gSW1Hyr9GtLG-o59QCHrKiITtpQw"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          borderWidth: {
+            1: '1px',
+          },
+          extend: {
+            colors: {
+              primary: '#FFBB38',
+              background: '#141416',
+              surface: '#222224',
+              surfaceSecondary: '#2E2E30',
+              textPrimary: '#F5F5F5',
+              textSubtle: '#7A7A7C',
+            },
+          },
+        },
+      };
+      function updateLinks() {
+        const domainText = document.getElementById('domain-name');
+        const fullDomain = window.location.host;
+        const [arnsDomain, ...gatewayPieces] = fullDomain.split('.');
+
+        domainText.innerText = arnsDomain;
+
+        const gatewayHost = gatewayPieces.join('.');
+        const allLinks = document.querySelectorAll('a');
+        allLinks.forEach((link) => {
+          allLinks.forEach((link) => {
+            link.href = link.href
+              .replace('<GATEWAY_HOST>', gatewayHost)
+              .replace('<ARNS_NAME>', arnsDomain);
+
+            link.target = '_blank';
+          });
+        });
+      }
+      window.addEventListener('load', () => {
+        updateLinks();
+      });
+    </script>
+    <style>
+      .tippy-box {
+        width: fit-content;
+        background-color: #222224;
+        color: #f5f5f5;
+        border: 1px solid #2e2e30;
+        border-radius: 8px;
+      }
+
+      @media (max-width: 640px) {
+        #text-card {
+          animation: fade-in 1s ease-in-out;
+        }
+
+        @keyframes fade-in {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+      }
+    </style>
+    <title>ArNS - Arweave Name System</title>
+  </head>
+  <body
+    class="bg-background flex flex-row m-0 p-0 box-border h-screen w-screen fixed"
+  >
+    <div
+      id="astronaut-image"
+      class="sm:w-full absolute md:w-fit md:relative h-full"
+    >
+      <img
+        src="https://arweave.net/ZUxr5bSRFh-D8zF8Y8Bkq64QskV8YCZMpJuooqFY-aY"
+        alt="astronaut"
+        class="sm:w-full md:w-fit h-full"
+      />
+
+      <div
+        id="logo-badge"
+        class="flex flex-col h-full md:w-65 justify-center absolute right-0 top-0"
+      >
+        <img
+          class="invisible md:visible rounded bg-surface p-4 h-fit relative -right-1/2"
+          src="https://arweave.net/DOwkxvmB8-6CthRSS1LsLP-0hAXHjYcS0y5EexyxOGs"
+          alt="logo"
+          width="65px"
+          height="65px"
+        />
+      </div>
+    </div>
+
+    <div
+      id="text-container"
+      class="absolute w-full md:static md:w-2/3 h-full flex flex-row justify-center items-center content-center"
+      style="flex-wrap: wrap"
+    >
+      <img
+        src="https://arweave.net/At1eNgYl43Rc6XhMRo88blSSUv84rFMkPaMklN143zQ"
+        class="absolute top-0 right-0 h-full xs:hidden"
+        draggable="false"
+      />
path: 404_page/index.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Correct non-standard Tailwind breakpoint `xs:hidden`**  
Tailwind’s default breakpoints start at `sm`. The class `xs:hidden` has no effect. Use `hidden sm:block` (or the intended variant) to control visibility.

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commit 700ba47
created_at: 2025-05-02T15:53:03Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/svg"
+      href="https://arweave.net/DOwkxvmB8-6CthRSS1LsLP-0hAXHjYcS0y5EexyxOGs"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <script src="https://arweave.net/RjXXBjP2GCZZUg4gSW1Hyr9GtLG-o59QCHrKiITtpQw"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          borderWidth: {
+            1: '1px',
+          },
+          extend: {
+            colors: {
+              primary: '#FFBB38',
+              background: '#141416',
+              surface: '#222224',
+              surfaceSecondary: '#2E2E30',
+              textPrimary: '#F5F5F5',
+              textSubtle: '#7A7A7C',
+            },
+          },
+        },
+      };
+      function updateLinks() {
+        const domainText = document.getElementById('domain-name');
+        const fullDomain = window.location.host;
+        const [arnsDomain, ...gatewayPieces] = fullDomain.split('.');
+
+        domainText.innerText = arnsDomain;
+
+        const gatewayHost = gatewayPieces.join('.');
+        const allLinks = document.querySelectorAll('a');
+        allLinks.forEach((link) => {
+          allLinks.forEach((link) => {
+            link.href = link.href
+              .replace('<GATEWAY_HOST>', gatewayHost)
+              .replace('<ARNS_NAME>', arnsDomain);
+
+            link.target = '_blank';
+          });
+        });
+      }
+      window.addEventListener('load', () => {
+        updateLinks();
+      });
+    </script>
+    <style>
+      .tippy-box {
+        width: fit-content;
+        background-color: #222224;
+        color: #f5f5f5;
+        border: 1px solid #2e2e30;
+        border-radius: 8px;
+      }
+
+      @media (max-width: 640px) {
+        #text-card {
+          animation: fade-in 1s ease-in-out;
+        }
+
+        @keyframes fade-in {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+      }
+    </style>
+    <title>ArNS - Arweave Name System</title>
+  </head>
+  <body
+    class="bg-background flex flex-row m-0 p-0 box-border h-screen w-screen fixed"
+  >
+    <div
+      id="astronaut-image"
+      class="sm:w-full absolute md:w-fit md:relative h-full"
+    >
+      <img
+        src="https://arweave.net/ZUxr5bSRFh-D8zF8Y8Bkq64QskV8YCZMpJuooqFY-aY"
+        alt="astronaut"
+        class="sm:w-full md:w-fit h-full"
+      />
+
+      <div
+        id="logo-badge"
+        class="flex flex-col h-full md:w-65 justify-center absolute right-0 top-0"
+      >
+        <img
+          class="invisible md:visible rounded bg-surface p-4 h-fit relative -right-1/2"
+          src="https://arweave.net/DOwkxvmB8-6CthRSS1LsLP-0hAXHjYcS0y5EexyxOGs"
+          alt="logo"
+          width="65px"
+          height="65px"
+        />
+      </div>
+    </div>
+
+    <div
+      id="text-container"
+      class="absolute w-full md:static md:w-2/3 h-full flex flex-row justify-center items-center content-center"
+      style="flex-wrap: wrap"
+    >
+      <img
+        src="https://arweave.net/At1eNgYl43Rc6XhMRo88blSSUv84rFMkPaMklN143zQ"
+        class="absolute top-0 right-0 h-full xs:hidden"
+        draggable="false"
+      />
+      <!-- text area -->
+      <div
+        id="text-card"
+        class="bg-background/70 backdrop-blur-lg sm:backdrop-blur-none md:bg-transparent relative md:static content-center m-5 p-5 h-fit sm:min-h-fit sm:h-4/5 gap-10 flex flex-col md:justify-between md:w-2/3 md:h-1/3 rounded"
+      >
+        <div
+          class="flex flex-col sm:flex-row gap-4 sm:gap-2 items-center justify-center sm:items-center sm:justify-start w-fit mx-auto sm:mx-0 mt-10 sm:mt-0"
+        >
+          <span id="wayfinder-link" class="text-textSubtle cursor-pointer"
+            >ar://</span
+          >
+          <span
+            class="w-fit text-sm break-all text-wrap text-textPrimary border-1 border-surfaceSecondary px-3 py-1 rounded-full mx-auto md:m-0 bg-surface"
+          >
+            <a
+              id="domain-name"
+              href="https://arns.<GATEWAY_HOST>/#/register/<ARNS_NAME>"
+              target="_blank"
+              >arns</a
+            >
+          </span>
+        </div>
+
+        <h2
+          class="text-textPrimary text-4xl md:text-5xl font-bold w-fit text-center md:text-start mx-auto md:m-0"
+        >
+          Make this domain space yours.
+        </h2>
+        <p
+          class="text-textSubtle text-center md:text-start w-fit mx-auto md:m-0"
+        >
+          The Arweave Name System is a simple way to name and find things stored
+          on the permaweb. It's a smart contract based system that helps you
+          find your data, apps, or websites on Arweave easily.
+        </p>
+        <a
+          href="https://arns.<GATEWAY_HOST>"
+          id="domain-link"
+          class="bg-primary text-black fill-black w-full sm:fill-primary sm:bg-transparent gap-2 rounded p-3 sm:pl-0 text-bold sm:text-primary sm:w-fit flex flex-row items-center justify-center mx-auto md:m-0"
+        >
path: 404_page/index.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Replace invalid Tailwind class `text-bold`**  
The CTA link’s bold styling uses `text-bold`, which is not a valid utility. Switch to `font-bold`.

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commit 700ba47
created_at: 2025-05-02T15:53:03Z
author_association: CONTRIBUTOR

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-05-02T15:49:31Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

This update introduces a new README file and a standalone 404/info HTML page for the Arweave Name System (ArNS) project, providing documentation and a branded user experience for missing or informational pages. Additionally, the landing page HTML is enhanced with improved browser compatibility, dynamic link generation based on the current domain, updated imagery, animated and responsive styling, and interactive tooltips explaining key concepts. Both HTML pages utilize Tailwind CSS and Tippy.js for styling and tooltips, and ensure all assets are referenced via Arweave URLs for permanence.

## Changes

| File(s)                    | Change Summary                                                                                                         |
|---------------------------|------------------------------------------------------------------------------------------------------------------------|
| 404_page/README.md         | New README added, documenting project structure, asset requirements, coding guidelines, and key Arweave resource URLs. |
| 404_page/index.html        | New 404/info HTML page for ArNS with Tailwind CSS, dynamic link logic, tooltips, and branded responsive layout.        |
| landing_page/index.html    | Enhanced HTML: improved compatibility, dynamic link logic, updated imagery and text, responsive styling, and interactive tooltips.|

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant Browser
    participant HTML Page
    participant Arweave Gateway

    User->>Browser: Requests 404 or landing page URL
    Browser->>HTML Page: Loads index.html
    HTML Page->>Browser: Runs script to extract subdomain and gateway host
    HTML Page->>HTML Page: Updates anchor hrefs with dynamic values
    HTML Page->>HTML Page: Initializes tooltips (Tippy.js)
    HTML Page->>Arweave Gateway: Loads assets via Arweave URLs
    User->>HTML Page: Interacts with tooltips and links
    HTML Page->>Browser: Opens registration/docs in new tab as needed
```

## Poem

> 🐇  
> A hop to the future, a leap to the sky,  
> With tooltips and Tailwind, we’re ready to fly!  
> The bull takes the stage, the astronaut waves,  
> ArNS domains—forever they’ll stay.  
> Links now adapt, tooltips explain,  
> On Arweave they live, immune to the rain!  
>

<!-- walkthrough_end -->


---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 46a845b7a86226cf836e16fc9968f18a69fd35f4 and 700ba470923177bd97580ffe5567da8635e79618.

</details>

<details>
<summary>📒 Files selected for processing (2)</summary>

* `404_page/index.html` (1 hunks)
* `landing_page/index.html` (6 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (2)</summary>

* landing_page/index.html
* 404_page/index.html

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (2)</summary>

* GitHub Check: build_and_test / lint_test_build
* GitHub Check: lint_test_build

</details>

</details>
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=ar-io/arns-react&utm_content=754):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-02T15:56:30Z
body: Visit the preview URL for this PR (updated for commit 700ba47):

[https://arns-portal--pr754-pe-8029-landing-page-0zlpr4ju.web.app](https://arns-portal--pr754-pe-8029-landing-page-0zlpr4ju.web.app)

<sub>(expires Fri, 16 May 2025 18:15:25 GMT)</sub>

<sub>🔥 via [Firebase Hosting GitHub Action](https://github.com/marketplace/actions/deploy-to-firebase-hosting) 🌎</sub>

<sub>Sign: 1f59769442cb89cf2a92042a342e51fe94047b94</sub>
author_association: NONE