Backmerge main into staging

.env.example

@@ -1,2 +1,9 @@
-NEXT_PUBLIC_APP_URL="https://app.metanames.app"
-NEXT_PUBLIC_ENV="test"
+# MetaNames Landing Page Environment Variables
+
+# Public variables (exposed to client)
+NEXT_PUBLIC_API_URL=
+NEXT_PUBLIC_SITE_URL=https://metanames.app
+NEXT_PUBLIC_ANALYTICS_ID=
+
+# Private variables (server-side only)
+# API Keys, secrets, etc.

.github/workflows/deploy.yml

@@ -1,24 +1,23 @@
-name: Deploy
+name: Build
 on:
   push:
     branches: [main, staging]
   pull_request:
     types: [opened, synchronize, reopened]
   workflow_dispatch:
 jobs:
-  deploy:
+  build:
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, '[skip ci]')"
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
-      - name: Deploy to Vercel Action
-        uses: BetaHuhn/deploy-to-vercel-action@v1
+        uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          GITHUB_TOKEN: ${{ secrets.GH_PAT }}
-          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
-          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-          VERCEL_SCOPE: ${{ secrets.VERCEL_SCOPE }}
-          PRODUCTION: ${{ github.ref == 'refs/heads/main' && 'true' || 'false' }}
-          ALIAS_DOMAINS: ${{ github.ref == 'refs/heads/staging' && 'test.metanames.app' || '' }}
+          node-version: '20'
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build

app/api/stats/route.ts

@@ -1,6 +1,25 @@
 import { getMetaNamesStats } from "@/lib/metanames";
 
+export const dynamic = "force-dynamic";
+export const revalidate = 60; // Revalidate every 60 seconds
+
 export async function GET() {
-  const stats = await getMetaNamesStats();
-  return Response.json(stats);
+  try {
+    const stats = await getMetaNamesStats();
+
+    return Response.json(stats, {
+      status: 200,
+      headers: {
+        "Cache-Control": "public, s-maxage=60, stale-while-revalidate=300",
+        "CDN-Cache-Control": "public, max-age=60",
+      },
+    });
+  } catch (error) {
+    console.error("Failed to fetch stats:", error);
+
+    return Response.json(
+      { error: "Failed to fetch stats", message: error instanceof Error ? error.message : "Unknown error" },
+      { status: 500 }
+    );
+  }
 }

app/error.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/Button";
+import { FaHome, FaArrowLeft } from "react-icons/fa";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="min-h-screen bg-primary flex items-center justify-center px-4">
+      <div className="text-center max-w-md">
+        <h1 className="text-6xl font-bold text-white mb-4">Oops!</h1>
+        <p className="text-white/70 text-lg mb-8">
+          Something went wrong. We're working on fixing it.
+        </p>
+
+        {error?.digest && (
+          <p className="text-white/40 text-sm mb-8">
+            Error ID: {error.digest}
+          </p>
+        )}
+
+        <div className="flex gap-4 justify-center">
+          <Button
+            onClick={reset}
+            variant="primary"
+          >
+            Try Again
+          </Button>
+          <Link href="/">
+            <Button
+              variant="secondary"
+              icon={<FaHome />}
+            >
+              Home
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

app/global-error.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useEffect } from "react";
+import { Button } from "@/components/Button";
+import { FaHome, FaRedo } from "react-icons/fa";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error("Global error:", error);
+  }, [error]);
+
+  return (
+    <html>
+      <body className="min-h-screen bg-primary flex items-center justify-center">
+        <div className="text-center max-w-md px-4">
+          <h1 className="text-5xl md:text-7xl font-bold text-white mb-6">
+            💥
+          </h1>
+          <h2 className="text-2xl font-semibold text-white mb-4">
+            Something went wrong
+          </h2>
+          <p className="text-white/60 mb-8">
+            We encountered an unexpected error. Please try again or return home.
+          </p>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button
+              onClick={reset}
+              variant="primary"
+              icon={<FaRedo />}
+            >
+              Try Again
+            </Button>
+            <a href="/">
+              <Button
+                variant="secondary"
+                icon={<FaHome />}
+              >
+                Go Home
+              </Button>
+            </a>
+          </div>
+        </div>
+      </body>
+    </html>
+  );
+}

app/globals.css

@@ -27,7 +27,7 @@
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
 
-    --primary: 210 40% 98%;
+    --primary: 263 70% 50%;
     --primary-foreground: 222.2 47.4% 11.2%;
 
     --secondary: 217.2 32.6% 17.5%;
@@ -46,7 +46,97 @@
   * {
     @apply border-border;
   }
+  html {
+    scroll-behavior: smooth;
+  }
   body {
     @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+
+  /* Focus styles for accessibility */
+  :focus-visible {
+    @apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-background;
+  }
+
+  /* Skip link for accessibility */
+  .skip-link {
+    @apply absolute -top-10 left-4 z-50 bg-primary text-white px-4 py-2 rounded transition-all;
+  }
+  .skip-link:focus {
+    @apply top-4;
+  }
+}
+
+/* Animation utilities */
+@layer utilities {
+  .animate-fade-in {
+    animation: fadeIn 0.6s ease-out forwards;
+  }
+
+  .animate-slide-up {
+    animation: slideUp 0.6s ease-out forwards;
+  }
+
+  .animate-float {
+    animation: float 6s ease-in-out infinite;
+  }
+
+  .animate-gradient {
+    background-size: 200% 200%;
+    animation: gradient 8s ease infinite;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
   }
 }

app/layout.tsx

@@ -1,6 +1,6 @@
 import { Analytics } from "@vercel/analytics/react";
 import type { Metadata, Viewport } from "next";
-import { Inter } from "next/font/google";
+import { Plus_Jakarta_Sans } from "next/font/google";
 import "./globals.css";
 
 import { Footer } from "@/components/Footer";
@@ -9,15 +9,73 @@ import { cn } from "@/lib/utils";
 
 import Providers from "./providers";
 
-const font = Inter({
+const font = Plus_Jakarta_Sans({
   subsets: ["latin"],
   variable: "--font-sans",
 });
 
 export const metadata: Metadata = {
-  title: "Meta Names",
+  title: {
+    default: "MetaNames | DNS for Partisia Blockchain",
+    template: "%s | MetaNames",
+  },
   description:
-    "Meta Names offers a cutting-edge DNS solution on the Partisia blockchain, specifically designed for the Web3 environment. It simplifies the process of blockchain integration for developers through a user-friendly SDK, enabling easy access and management of decentralized domain names. This service streamlines the development of Web3 applications by providing seamless domain management and enhanced user experience, making blockchain technology more accessible and efficient for developers.",
+    "Meta Names offers a cutting-edge DNS solution on the Partisia blockchain. Simplify blockchain integration for Web3 developers with our user-friendly SDK. Manage decentralized domain names seamlessly.",
+  keywords: [
+    "DNS",
+    "Partisia Blockchain",
+    "Web3",
+    "Blockchain域名",
+    "Decentralized DNS",
+    "Web3 domains",
+    "Crypto domain",
+    ".mpc",
+    "Partisia",
+  ],
+  authors: [{ name: "MetaNames Team" }],
+  creator: "MetaNames",
+  metadataBase: new URL("https://metanames.app"),
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "black-translucent",
+    title: "MetaNames",
+  },
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: "https://metanames.app",
+    siteName: "MetaNames",
+    title: "MetaNames | DNS for Partisia Blockchain",
+    description:
+      "Cutting-edge DNS solution on Partisia Blockchain. Simplify Web3 domain management with our developer-friendly SDK.",
+    images: [
+      {
+        url: "/og-image.png",
+        width: 1200,
+        height: 630,
+        alt: "MetaNames - DNS for Partisia Blockchain",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "MetaNames | DNS for Partisia Blockchain",
+    description:
+      "Cutting-edge DNS solution on Partisia Blockchain. Simplify Web3 domain management.",
+    images: ["/og-image.png"],
+    creator: "@metanames",
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+    },
+  },
 };
 
 export const viewport: Viewport = {
@@ -32,7 +90,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <head />
+      <head>
+        <link rel="icon" href="/favicon.ico" sizes="any" />
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+        <link rel="manifest" href="/manifest.json" />
+      </head>
       <body
         className={cn(
           "min-h-screen bg-background font-sans antialiased",