chore(docs): new ensnode.io UI/UX refinements

CLAUDE.md

@@ -1 +1 @@
-AGENTS.md
+AGENTS.md

docs/ensnode.io/src/components/overrides/Hero.astro

@@ -1,20 +1,12 @@
 ---
 import { Image } from "astro:assets";
 import { Balancer } from "react-wrap-balancer";
-import backgroundImage from "@assets/hero_bg_image.png";
 import heroImage from "@assets/hero_image.png";
 import { legacyButtonVariants } from "@namehash/namehash-ui/legacy";
 ---
 
 <section
-  class="w-full h-screen flex flex-col flex-nowrap justify-center items-center bg-black relative">
-  <Image
-    src={backgroundImage}
-    alt=""
-    aria-hidden="true"
-    class="absolute w-full h-screen z-0 object-center object-cover select-none"
-    quality={100}
-  />
+  class="w-full h-screen flex flex-col flex-nowrap justify-center items-center bg-[#011A25] relative overflow-hidden">
   <div
     class="w-full max-w-[1280px] flex flex-col lg:flex-row justify-center sm:justify-between items-center gap-10 px-5 sm:px-8 max-lg:pt-20 max-sm:pb-8">
     <div
@@ -37,22 +29,38 @@ import { legacyButtonVariants } from "@namehash/namehash-ui/legacy";
         class={legacyButtonVariants({
           variant: "secondary",
           size: "medium",
-          className: "hover:bg-gray-100",
+          className: "hover:bg-gray-100 relative z-10",
         })}>
         Quickstart guide
       </a>
+      <div class="sm:hidden relative w-full max-w-[300px] pt-2 flex items-center justify-center">
+        <div
+          aria-hidden="true"
+          class="absolute -translate-x-1/10 inset-0 -z-0 m-auto aspect-square w-[130%] rounded-full
+                           bg-[radial-gradient(circle,rgba(24,125,176,0.45)_0%,rgba(24,125,176,0.4)_40%,transparent_70%)]
+                           blur-3xl">
+        </div>
+        <Image
+          src={heroImage}
+          alt="ENSv2 badge"
+          class="relative z-10 w-full h-auto object-contain"
+          quality={100}
+        />
+      </div>
+    </div>
+    <div class="relative shrink-0 hidden sm:flex items-center justify-center">
+      <div
+        aria-hidden="true"
+        class="absolute -translate-x-1/10 inset-0 -z-0 m-auto aspect-square w-[130%] max-w-[700px] rounded-full
+           bg-[radial-gradient(circle,rgba(24,125,176,0.45)_0%,rgba(24,125,176,0.4)_40%,transparent_70%)]
+           blur-3xl">
+      </div>
       <Image
         src={heroImage}
         alt="ENSv2 badge"
-        class="sm:hidden w-full max-w-[300px] pt-2 h-auto object-contain"
+        class="relative z-10 w-full max-w-[400px] lg:max-w-[490px] h-auto object-contain"
         quality={100}
       />
     </div>
-    <Image
-      src={heroImage}
-      alt="ENSv2 badge"
-      class="hidden sm:block w-full max-w-[400px] lg:max-w-[505px] h-auto object-contain relative z-10"
-      quality={100}
-    />
   </div>
 </section>

docs/ensnode.io/src/components/walkthroughs/enskit/v1.13.1.mdx

@@ -1,4 +1,4 @@
-import { LinkCard, Steps } from "@astrojs/starlight/components";
+import { LinkCard, Steps, Aside } from "@astrojs/starlight/components";
 import IntegrateHostedEnsNodeTip from "@components/molecules/IntegrateHostedEnsNodeTip.astro";
 
 `enskit` is the React toolkit for ENSv2 development. It provides a fully typed Omnigraph API client (powered by [`urql`](https://nearform.com/open-source/urql/) and [`gql.tada`](https://gql-tada.0no.co/)), the `OmnigraphProvider`, and the `useOmnigraphQuery` hook for writing type-safe ENS queries with editor autocomplete, Relay-style pagination, and Omnigraph-specific cache directives.
@@ -25,9 +25,13 @@ npm install
 npm install enskit@1.13.1 enssdk@1.13.1
 ```
 
-:::caution[Pin exact versions]
-Always pin **exact** versions (no `^` or `~`) of `enskit` and `enssdk`, and keep them on the same version. The Omnigraph GraphQL schema is bundled inside `enssdk` and consumed by the `gql.tada` TypeScript plugin to type your queries — a minor or patch bump can change the schema and silently drift your generated types away from your queries. Locking exact versions keeps types and runtime in sync, and matched to the ENSNode version your hosted instance runs.
-:::
+<Aside type="caution" title="Pin exact versions">
+  Always pin **exact** versions (no `^` or `~`) of `enskit` and `enssdk`, and keep them on the same
+  version. The Omnigraph GraphQL schema is bundled inside `enssdk` and consumed by the `gql.tada`
+  TypeScript plugin to type your queries — a minor or patch bump can change the schema and silently
+  drift your generated types away from your queries. Locking exact versions keeps types and runtime
+  in sync, and matched to the ENSNode version your hosted instance runs.
+</Aside>
 
 ## 3. Configure the `gql.tada` TypeScript plugin
 
@@ -97,9 +101,13 @@ export function App() {
 
 Create `src/DomainView.tsx`. We'll start with the simplest possible query — look up the `eth` Domain and render its owner and protocol version.
 
-:::tip[InterpretedName]
-An **InterpretedName** is a Name whose labels are each either normalized or represented as an [encoded labelhash](/docs/reference/terminology#encoded-labelhash) (e.g. `[abcd...].eth`) — the canonical, lossless form ENSNode uses to identify a Name. `asInterpretedName("eth")` brands a known-safe string as one; for user input, validate first. See [Interpreted Name](/docs/reference/terminology#interpreted-name) in the terminology reference.
-:::
+<Aside type="tip" title="InterpretedName">
+  An **InterpretedName** is a Name whose labels are each either normalized or represented as an
+  [encoded labelhash](/docs/reference/terminology#encoded-labelhash) (e.g. `[abcd...].eth`) — the
+  canonical, lossless form ENSNode uses to identify a Name. `asInterpretedName("eth")` brands a
+  known-safe string as one; for user input, validate first. See [Interpreted
+  Name](/docs/reference/terminology#interpreted-name) in the terminology reference.
+</Aside>
 
 ```tsx title="src/DomainView.tsx"
 import { graphql, useOmnigraphQuery } from "enskit/react/omnigraph";

docs/ensnode.io/src/components/walkthroughs/enskit/v1.15.0.mdx

@@ -1,4 +1,4 @@
-import { LinkCard, Steps } from "@astrojs/starlight/components";
+import { LinkCard, Steps, Aside } from "@astrojs/starlight/components";
 import IntegrateHostedEnsNodeTip from "@components/molecules/IntegrateHostedEnsNodeTip.astro";
 
 `enskit` is the React toolkit for ENSv2 development. It provides a fully typed Omnigraph API client (powered by [`urql`](https://nearform.com/open-source/urql/) and [`gql.tada`](https://gql-tada.0no.co/)), the `OmnigraphProvider`, and the `useOmnigraphQuery` hook for writing type-safe ENS queries with editor autocomplete, Relay-style pagination, and Omnigraph-specific cache directives.
@@ -25,9 +25,13 @@ npm install
 npm install enskit@1.15.0 enssdk@1.15.0
 ```
 
-:::caution[Pin exact versions]
-Always pin **exact** versions (no `^` or `~`) of `enskit` and `enssdk`, and keep them on the same version. The Omnigraph GraphQL schema is bundled inside `enssdk` and consumed by the `gql.tada` TypeScript plugin to type your queries — a minor or patch bump can change the schema and silently drift your generated types away from your queries. Locking exact versions keeps types and runtime in sync, and matched to the ENSNode version your hosted instance runs.
-:::
+<Aside type="caution" title="Pin exact versions">
+  Always pin **exact** versions (no `^` or `~`) of `enskit` and `enssdk`, and keep them on the same
+  version. The Omnigraph GraphQL schema is bundled inside `enssdk` and consumed by the `gql.tada`
+  TypeScript plugin to type your queries — a minor or patch bump can change the schema and silently
+  drift your generated types away from your queries. Locking exact versions keeps types and runtime
+  in sync, and matched to the ENSNode version your hosted instance runs.
+</Aside>
 
 ## 3. Configure the `gql.tada` TypeScript plugin
 
@@ -97,9 +101,13 @@ export function App() {
 
 Create `src/DomainView.tsx`. We'll start with the simplest possible query — look up the `eth` Domain and render its owner and protocol version.
 
-:::tip[InterpretedName]
-An **InterpretedName** is a Name whose labels are each either normalized or represented as an [encoded labelhash](/docs/reference/terminology#encoded-labelhash) (e.g. `[abcd...].eth`) — the canonical, lossless form ENSNode uses to identify a Name. `asInterpretedName("eth")` brands a known-safe string as one; for user input, validate first. See [Interpreted Name](/docs/reference/terminology#interpreted-name) in the terminology reference.
-:::
+<Aside type="tip" title="InterpretedName">
+  An **InterpretedName** is a Name whose labels are each either normalized or represented as an
+  [encoded labelhash](/docs/reference/terminology#encoded-labelhash) (e.g. `[abcd...].eth`) — the
+  canonical, lossless form ENSNode uses to identify a Name. `asInterpretedName("eth")` brands a
+  known-safe string as one; for user input, validate first. See [Interpreted
+  Name](/docs/reference/terminology#interpreted-name) in the terminology reference.
+</Aside>
 
 ```tsx title="src/DomainView.tsx"
 import { graphql, useOmnigraphQuery } from "enskit/react/omnigraph";

docs/ensnode.io/src/components/walkthroughs/enssdk/v1.13.1.mdx

@@ -1,4 +1,4 @@
-import { LinkCard } from "@astrojs/starlight/components";
+import { LinkCard, Aside } from "@astrojs/starlight/components";
 import IntegrateHostedEnsNodeTip from "@components/molecules/IntegrateHostedEnsNodeTip.astro";
 
 `enssdk` is the foundational TypeScript/JavaScript SDK for ENS development. It's a fully modular and tree-shakeable modern TypeScript/JavaScript package that provides ENS-specific types and helpers — usable from any JS runtime, browser or server.
@@ -30,9 +30,13 @@ npm install enssdk@1.13.1
 npm install -D tsx typescript @types/node
 ```
 
-:::caution[Pin exact versions]
-Always pin an **exact** version (no `^` or `~`) of `enssdk`. The Omnigraph GraphQL schema is bundled inside `enssdk` and consumed by the `gql.tada` TypeScript plugin to type your queries — a minor or patch bump can change the schema and silently drift your generated types away from your queries. Locking the exact version keeps types and runtime in sync, and matched to the ENSNode version your hosted instance runs.
-:::
+<Aside type="caution" title="Pin exact versions">
+  Always pin an **exact** version (no `^` or `~`) of `enssdk`. The Omnigraph GraphQL schema is
+  bundled inside `enssdk` and consumed by the `gql.tada` TypeScript plugin to type your queries — a
+  minor or patch bump can change the schema and silently drift your generated types away from your
+  queries. Locking the exact version keeps types and runtime in sync, and matched to the ENSNode
+  version your hosted instance runs.
+</Aside>
 
 ## 3. Configure the `gql.tada` TypeScript plugin
 
@@ -103,9 +107,13 @@ const client = createEnsNodeClient({ url: ENSNODE_URL }).extend(omnigraph);
 
 Add your first query — look up the `eth` Domain and print its owner and protocol version.
 
-:::tip[InterpretedName]
-An **InterpretedName** is a Name whose labels are each either normalized or represented as an [encoded labelhash](/docs/reference/terminology#encoded-labelhash) (e.g. `[abcd...].eth`) — the canonical, lossless form ENSNode uses to identify a Name. `asInterpretedName("eth")` brands a known-safe string as one; for user input, validate first. See [Interpreted Name](/docs/reference/terminology#interpreted-name) in the terminology reference.
-:::
+<Aside type="tip" title="InterpretedName">
+  An **InterpretedName** is a Name whose labels are each either normalized or represented as an
+  [encoded labelhash](/docs/reference/terminology#encoded-labelhash) (e.g. `[abcd...].eth`) — the
+  canonical, lossless form ENSNode uses to identify a Name. `asInterpretedName("eth")` brands a
+  known-safe string as one; for user input, validate first. See [Interpreted
+  Name](/docs/reference/terminology#interpreted-name) in the terminology reference.
+</Aside>
 
 ```ts title="src/index.ts"
 // existing imports...

docs/ensnode.io/src/components/walkthroughs/enssdk/v1.15.0.mdx

@@ -1,4 +1,4 @@
-import { LinkCard } from "@astrojs/starlight/components";
+import { LinkCard, Aside } from "@astrojs/starlight/components";
 import IntegrateHostedEnsNodeTip from "@components/molecules/IntegrateHostedEnsNodeTip.astro";
 
 `enssdk` is the foundational TypeScript/JavaScript SDK for ENS development. It's a fully modular and tree-shakeable modern TypeScript/JavaScript package that provides ENS-specific types and helpers — usable from any JS runtime, browser or server.
@@ -30,9 +30,13 @@ npm install enssdk@1.15.0
 npm install -D tsx typescript @types/node
 ```
 
-:::caution[Pin exact versions]
-Always pin an **exact** version (no `^` or `~`) of `enssdk`. The Omnigraph GraphQL schema is bundled inside `enssdk` and consumed by the `gql.tada` TypeScript plugin to type your queries — a minor or patch bump can change the schema and silently drift your generated types away from your queries. Locking the exact version keeps types and runtime in sync, and matched to the ENSNode version your hosted instance runs.
-:::
+<Aside type="caution" title="Pin exact versions">
+  Always pin an **exact** version (no `^` or `~`) of `enssdk`. The Omnigraph GraphQL schema is
+  bundled inside `enssdk` and consumed by the `gql.tada` TypeScript plugin to type your queries — a
+  minor or patch bump can change the schema and silently drift your generated types away from your
+  queries. Locking the exact version keeps types and runtime in sync, and matched to the ENSNode
+  version your hosted instance runs.
+</Aside>
 
 ## 3. Configure the `gql.tada` TypeScript plugin
 
@@ -103,9 +107,13 @@ const client = createEnsNodeClient({ url: ENSNODE_URL }).extend(omnigraph);
 
 Add your first query — look up the `eth` Domain and print its owner and protocol version.
 
-:::tip[InterpretedName]
-An **InterpretedName** is a Name whose labels are each either normalized or represented as an [encoded labelhash](/docs/reference/terminology#encoded-labelhash) (e.g. `[abcd...].eth`) — the canonical, lossless form ENSNode uses to identify a Name. `asInterpretedName("eth")` brands a known-safe string as one; for user input, validate first. See [Interpreted Name](/docs/reference/terminology#interpreted-name) in the terminology reference.
-:::
+<Aside type="tip" title="InterpretedName">
+  An **InterpretedName** is a Name whose labels are each either normalized or represented as an
+  [encoded labelhash](/docs/reference/terminology#encoded-labelhash) (e.g. `[abcd...].eth`) — the
+  canonical, lossless form ENSNode uses to identify a Name. `asInterpretedName("eth")` brands a
+  known-safe string as one; for user input, validate first. See [Interpreted
+  Name](/docs/reference/terminology#interpreted-name) in the terminology reference.
+</Aside>
 
 ```ts title="src/index.ts"
 // existing imports...

docs/ensnode.io/src/components/walkthroughs/quickstart/v1.13.1.mdx

@@ -6,11 +6,13 @@ import OmnigraphAPIExample from "@components/organisms/OmnigraphAPIExample.astro
 
 [ENSv2](https://ens.domains/ensv2) is the next generation of the [Ethereum Name Service](https://ens.domains) — a protocol upgrade that fundamentally changes how the ENS protocol works.
 
-:::tip[Prepare for ENSv2]
+<Aside type="tip" title="Prepare for ENSv2">
 The ENSv2 upgrade to the ENS protocol is coming **Summer 2026**! Your app, regardless of how it interacts with names, needs to be updated to avoid being left behind.
 
-<a href="/docs/integrate/ensv2-readiness">Learn more about ENSv2 Readiness</a>
-:::
+<a href="/docs/integrate/ensv2-readiness">
+  Learn more about ENSv2 Readiness
+</a>
+</Aside>
 
 ## What is the ENS Omnigraph?
 

docs/ensnode.io/src/components/walkthroughs/quickstart/v1.15.0.mdx

@@ -6,11 +6,13 @@ import OmnigraphAPIExample from "@components/organisms/OmnigraphAPIExample.astro
 
 [ENSv2](https://ens.domains/ensv2) is the next generation of the [Ethereum Name Service](https://ens.domains) — a protocol upgrade that fundamentally changes how the ENS protocol works.
 
-:::tip[Prepare for ENSv2]
+<Aside type="tip" title="Prepare for ENSv2">
 The ENSv2 upgrade to the ENS protocol is coming **Summer 2026**! Your app, regardless of how it interacts with names, needs to be updated to avoid being left behind.
 
-<a href="/docs/integrate/ensv2-readiness">Learn more about ENSv2 Readiness</a>
-:::
+<a href="/docs/integrate/ensv2-readiness">
+  Learn more about ENSv2 Readiness
+</a>
+</Aside>
 
 ## What is the ENS Omnigraph?
 

docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/account-domains.mdx

@@ -7,6 +7,10 @@ sidebar:
 
 import { Tabs, TabItem } from "@astrojs/starlight/components";
 
+:::caution[`unigraph` plugin required]
+Using the Unigraph SQL requires that you have the `unigraph` plugin activated in your ENSNode instance. [Learn more](/docs/services/ensindexer/usage/configuration)
+:::
+
 Count the Domains owned by an address, grouped by Domain `type` (`ENSv1Domain` vs `ENSv2Domain`) — a single query spanning both protocol versions. See [Connect](/docs/integrate/unigraph/examples) for setup.
 
 <Tabs syncKey="unigraph-client">

docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/domain-by-name.mdx

@@ -7,6 +7,10 @@ sidebar:
 
 import { Tabs, TabItem } from "@astrojs/starlight/components";
 
+:::caution[`unigraph` plugin required]
+Using the Unigraph SQL requires that you have the `unigraph` plugin activated in your ENSNode instance. [Learn more](/docs/services/ensindexer/usage/configuration)
+:::
+
 Fetch a Domain by its canonical name. Because `canonical_name` is materialized across both ENSv1 and ENSv2, the same lookup works regardless of protocol version. See [Connect](/docs/integrate/unigraph/examples) for setup.
 
 <Tabs syncKey="unigraph-client">