NERI page

frontend/app/src/app/neri/page.tsx

@@ -0,0 +1,5 @@
+import { ClaimScreen } from "@/src/screens/ClaimScreen/ClaimScreen";
+
+export default function Page() {
+  return <ClaimScreen />;
+}

frontend/app/src/comps/Screen/Screen.tsx

@@ -89,49 +89,50 @@ export function Screen({
     },
   });
 
-  const headingElt = typeof heading === "object"
-      && heading !== null
-      && "title" in heading
-      && !isValidElement(heading)
-    ? (
-      <header
-        className={css({
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: 12,
-          paddingBottom: 8,
-        })}
-      >
-        <h1
+  const headingElt = heading === null
+    ? null
+    : typeof heading === "object"
+        && "title" in heading
+        && !isValidElement(heading)
+      ? (
+        <header
           className={css({
             display: "flex",
+            flexDirection: "column",
             alignItems: "center",
             justifyContent: "center",
-            fontSize: 28,
+            gap: 12,
+            paddingBottom: 8,
           })}
         >
-          {heading.title}
-        </h1>
-        {heading.subtitle && (
-          <div
+          <h1
             className={css({
-              maxWidth: 540,
-              textAlign: "center",
-              color: "contentAlt",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 28,
             })}
           >
-            {heading.subtitle}
-          </div>
-        )}
-      </header>
-    )
-    : (
-      <div style={{ width }}>
-        {heading}
-      </div>
-    );
+            {heading.title}
+          </h1>
+          {heading.subtitle && (
+            <div
+              className={css({
+                maxWidth: 540,
+                textAlign: "center",
+                color: "contentAlt",
+              })}
+            >
+              {heading.subtitle}
+            </div>
+          )}
+        </header>
+      )
+      : (
+        <div style={{ width }}>
+          {heading}
+        </div>
+      );
 
   return (
     <div

frontend/app/src/comps/TopBar/Menu.tsx

@@ -14,6 +14,7 @@ export type MenuItemType =
   | 'buy'
   | 'stream'
   | 'ecosystem'
+  | 'neri'
   // | 'stake';
 
 export type HrefTarget = '_self' | '_blank';

frontend/app/src/comps/TopBar/TopBar.tsx

@@ -17,9 +17,15 @@ import {
   IconEarn,
   IconStake as IconStream,
   IconStake as IconEcosystem,
+  TokenIcon,
   // IconLeverage,
   // IconStake,
 } from "@liquity2/uikit";
+
+// NERI token icon wrapper for menu
+function IconNeri() {
+  return <TokenIcon symbol="NERI" size={24} />;
+}
 import Link from "next/link";
 import { AccountButton } from "./AccountButton";
 import { Menu } from "./Menu";
@@ -34,6 +40,7 @@ const menuItems: ComponentProps<typeof Menu>["menuItems"] = [
   // [content.menu.multiply, "/multiply", IconLeverage, "multiply"],
   [content.menu.earn, "/earn", IconEarn, "earn", "_self"],
   [content.menu.ecosystem, "/ecosystem", IconEcosystem, "ecosystem", "_self"],
+  [content.menu.claim, "/neri", IconNeri, "neri", "_self"],
   [content.menu.stream, "https://app.superfluid.org/", IconStream, "stream", "_blank"],
   // [content.menu.stake, "/stake", IconStake, "stake"],
   // [content.menu.buy, buyPageUrl, IconStake, "buy", buyPageTarget],

frontend/app/src/content.tsx

@@ -17,6 +17,7 @@ export default {
     buy: "Buy USND",
     stream: "Stream",
     ecosystem: "Ecosystem",
+    claim: "NERI",
   },
 
   accountButton: {

frontend/app/src/contracts.ts

@@ -163,6 +163,7 @@ export const CONTRACT_ADDRESSES = {
   WETH: CONTRACT_WETH,
   YUSND: CONTRACT_YUSND,
   ShellToken: CONTRACT_SHELL_TOKEN,
+  NeriToken: "0x0000000000000000000000000000000000000000", // TODO: Replace with actual NERI token address
   GoSlowNft: "0x6da3c02293c96dfa5747b1739ebb492619222a8a",
 
   strategies: {

frontend/app/src/screens/ClaimScreen/ClaimScreen.css

@@ -0,0 +1,71 @@
+/* Floating snail animation */
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px) rotate(-3deg);
+  }
+  50% {
+    transform: translateY(-15px) rotate(3deg);
+  }
+}
+
+.floating-snail {
+  position: absolute;
+  animation: float ease-in-out infinite;
+}
+
+/* Hero snail float animation */
+.hero-snail {
+  position: relative;
+  animation: float 4s ease-in-out infinite;
+}
+
+/* Sparkle animation */
+@keyframes sparkle {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(1.2);
+  }
+}
+
+.sparkle {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: linear-gradient(135deg, #FFD700, #FFA500);
+  border-radius: 50%;
+  animation: sparkle ease-in-out infinite;
+}
+
+/* Confetti falling animation */
+@keyframes confetti-fall {
+  0% {
+    transform: translateY(-100vh) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100vh) rotate(720deg);
+    opacity: 0;
+  }
+}
+
+.confetti-piece {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  animation: confetti-fall linear forwards;
+}
+
+/* NERI amount gradient text */
+.neri-amount {
+  font-size: 36px;
+  font-weight: 700;
+  background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}