feat: add about page

web/src/components/layouts/root-layout.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { NavLink } from "react-router";
 import { Outlet } from "react-router-dom";
 import { LanguageSwitcher } from "@/components/language-switcher";
@@ -5,12 +6,12 @@ import { ModeToggle } from "@/components/mode-toggle.tsx";
 import { ThemeProvider } from "@/components/theme-provider.tsx";
 import { Button } from "@/components/ui/button";
 import { Toaster } from "@/components/ui/sonner";
-import VersionBadge from "@/components/version-badge";
 import { GitHubIcon } from "@/icon";
 import { siteConfig } from "@/lib/config";
 import { MobileNav } from "../modile-nav";
 
 export default function RootLayout() {
+  const { t } = useTranslation("common");
   return (
     <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
       <Toaster />
@@ -19,25 +20,29 @@ export default function RootLayout() {
           <div className="flex items-center gap-2">
             <MobileNav className="flex lg:hidden" items={siteConfig.navItems} />
             <div className="hidden lg:flex">
-              <NavLink to="/" className="text-base sm:text-lg font-semibold text-center">
-                MemShellParty
+              <NavLink
+                to="/"
+                className="text-base sm:text-lg font-semibold text-center"
+              >
+                {siteConfig.name}
               </NavLink>
             </div>
             <nav className="items-center gap-0.5 hidden lg:flex">
               {siteConfig.navItems.map((item) => (
                 <Button key={item.href} variant="ghost" size="sm" asChild>
-                  <NavLink to={item.href}>{item.label}</NavLink>
+                  <NavLink to={item.href}>{t(item.label)}</NavLink>
                 </Button>
               ))}
             </nav>
             <div className="ml-auto flex items-center gap-2 md:flex-1 md:justify-end">
-              <VersionBadge />
               <LanguageSwitcher />
               <Button
                 variant="ghost"
                 size="icon"
                 className="size-8"
-                onClick={() => window.open("https://github.com/ReaJason/MemShellParty")}
+                onClick={() =>
+                  window.open("https://github.com/ReaJason/MemShellParty")
+                }
               >
                 <GitHubIcon />
               </Button>

web/src/components/ui/avatar.tsx

@@ -0,0 +1,51 @@
+import * as React from "react"
+import {Avatar as AvatarPrimitive} from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

web/src/components/version-badge.tsx

@@ -1,90 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { CircleX, LoaderCircle, RefreshCcw } from "lucide-react";
-import type React from "react";
-import { useTranslation } from "react-i18next";
-import { env } from "@/config";
-import { Button } from "./ui/button";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
-
-type VersionInfo = {
-  currentVersion: string;
-  latestVersion: string;
-  hasUpdate: boolean;
-};
-
-const VersionBadge: React.FC = () => {
-  const { isPending, data, isError } = useQuery<VersionInfo>({
-    queryKey: ["version"],
-    queryFn: async () => {
-      const response = await fetch(`${env.API_URL}/version`);
-      if (response.ok) {
-        return await response.json();
-      }
-      return "unknown";
-    },
-  });
-  const inProduction = env.MODE === "production";
-  const { t } = useTranslation();
-
-  return (
-    <div className="flex items-center space-x-2">
-      {isPending && (
-        <Button className="rounded-full" size="sm" variant="ghost">
-          <LoaderCircle className="h-3.5 w-3.5 animate-spin" />
-        </Button>
-      )}
-      {isError && (
-        <Button
-          className="rounded-full"
-          size="sm"
-          variant="ghost"
-          onClick={() => {
-            window.open("https://github.com/ReaJason/MemShellParty/releases");
-          }}
-        >
-          <CircleX className="h-3.5 w-3.5" />
-        </Button>
-      )}
-      {data?.hasUpdate && inProduction && (
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                className="rounded-full bg-yellow-500 text-white hover:bg-yellow-600 hover:text-white"
-                size="sm"
-                variant="ghost"
-                onClick={() => {
-                  window.open(`https://github.com/ReaJason/MemShellParty/releases/tag/v${data.latestVersion}`);
-                }}
-              >
-                <span className="flex items-center gap-1">
-                  <RefreshCcw className="h-3.5 w-3.5" />
-                  {t("version.updateAvailable")}
-                </span>
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>
-                {t("version.updateAvailableTooltip", {
-                  currentVersion: data.currentVersion,
-                  latestVersion: data.latestVersion,
-                })}
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      )}
-      {data && (!data.hasUpdate || !inProduction) && (
-        <Button
-          className="rounded-full text-xs bg-green-500 text-white hover:bg-green-600 hover:text-white"
-          size="sm"
-          variant="ghost"
-        >
-          <span>v{data?.currentVersion}</span>
-        </Button>
-      )}
-    </div>
-  );
-};
-
-export default VersionBadge;

web/src/lib/config.ts

@@ -17,5 +17,9 @@ export const siteConfig = {
       href: "/probeshell",
       label: "ProbeShellGenerator",
     },
+    {
+      href: "/about",
+      label: "about",
+    },
   ],
 };

web/src/pages/about.tsx

@@ -0,0 +1,342 @@
+import { useQuery } from "@tanstack/react-query";
+import { motion } from "framer-motion";
+import {
+  AlertCircle,
+  Code,
+  Download,
+  ExternalLink,
+  Github,
+  Globe,
+  Heart,
+  Mail,
+  Package,
+  Shield,
+  User,
+} from "lucide-react";
+import { LineShadowText } from "@/components/magicui/line-shadow-text";
+import { useTheme } from "@/components/theme-provider";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { env } from "@/config";
+import { siteConfig } from "@/lib/config";
+
+type VersionInfo = {
+  currentVersion: string;
+  latestVersion: string;
+  hasUpdate: boolean;
+  releaseUrl: string;
+};
+
+export default function AboutPage() {
+  const theme = useTheme();
+  const shadowColor = theme.theme === "dark" ? "#ffffff" : "#000000";
+  const {
+    data: updateInfo,
+    isPending,
+    error,
+  } = useQuery<VersionInfo>({
+    queryKey: ["version"],
+    queryFn: async () => {
+      const response = await fetch(`${env.API_URL}/version`);
+      if (response.ok) {
+        return await response.json();
+      }
+      return "unknown";
+    },
+  });
+  const inProduction = true;
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.5,
+      },
+    },
+  };
+
+  return (
+    <div className="min-h-screen font-sans bg-background text-foreground">
+      <section className="relative text-center py-20 overflow-hidden">
+        <div className="absolute top-0 left-0 w-full h-full bg-grid-black/[0.05] dark:bg-grid-white/[0.05] [mask-image:linear-gradient(to_bottom,white_10%,transparent_100%)]" />
+        <div className="container mx-auto px-4 relative z-10">
+          <motion.div
+            initial={{ opacity: 0, y: -50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            <div className="inline-flex items-center px-4 py-2 rounded-full border sm:h-8 mb-8 transition-colors dark:bg-red-900/20 dark:border-red-800 dark:text-red-300 bg-red-50 border-red-200 text-red-700">
+              <Shield className="w-4 h-4 mr-2" />
+              <span className="text-sm">
+                For Security Research & Authorized Testing Only
+              </span>
+            </div>
+            <h1 className="text-5xl md:text-7xl font-bold mb-8">
+              <span className="dark:text-white text-gray-900">
+                MemShell
+                <LineShadowText className="italic" shadowColor={shadowColor}>
+                  Party
+                </LineShadowText>
+              </span>
+            </h1>
+            <p className="text-xl md:text-2xl mb-12 max-w-4xl mx-auto leading-relaxed text-muted-foreground">
+              A self-hosted, visual platform for one-click generation of Java
+              memory shells for common middleware and frameworks. The ultimate
+              learning platform for security researchers.
+            </p>
+          </motion.div>
+        </div>
+      </section>
+
+      {updateInfo?.hasUpdate && inProduction && (
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="container mx-auto px-4 mb-8"
+        >
+          <Alert className="border-green-500 bg-green-50 dark:bg-green-900/20 w-auto">
+            <AlertCircle className="h-4 w-4 text-green-600 dark:text-green-400" />
+            <AlertDescription className="flex items-center justify-between flex-wrap gap-4">
+              <span className="text-green-800 dark:text-green-300">
+                New version {updateInfo.latestVersion} is available! (Current:{" "}
+                {updateInfo.currentVersion})
+              </span>
+              <a
+                href={siteConfig.latestRelease}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Button
+                  size="sm"
+                  className="bg-green-600 hover:bg-green-700 text-white"
+                >
+                  <Download className="mr-2 h-4 w-4" />
+                  View Release
+                </Button>
+              </a>
+            </AlertDescription>
+          </Alert>
+        </motion.div>
+      )}
+
+      <motion.section
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="container mx-auto px-4 py-16"
+      >
+        <div className="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
+          <motion.div variants={itemVariants}>
+            <Card className="h-full">
+              <CardContent className="p-6">
+                <div className="flex items-center mb-4">
+                  <Package className="w-6 h-6 mr-3 text-primary" />
+                  <h2 className="text-2xl font-bold">Version</h2>
+                </div>
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center py-2 border-b border-border/50">
+                    <span className="text-muted-foreground">
+                      Current Version
+                    </span>
+                    <Badge variant="secondary">
+                      {updateInfo?.currentVersion || "v0.0.0"}
+                    </Badge>
+                  </div>
+                  <div className="flex justify-between items-center py-2 border-b border-border/50">
+                    <span className="text-muted-foreground">
+                      Latest Version
+                    </span>
+                    {isPending && (
+                      <span className="text-sm text-gray-500">Checking...</span>
+                    )}
+                    {error && (
+                      <Badge variant="destructive">{error.message}</Badge>
+                    )}
+                    {updateInfo && !error && (
+                      <Badge variant="outline">
+                        {updateInfo.latestVersion}
+                      </Badge>
+                    )}
+                  </div>
+                  <div className="flex justify-between items-center py-2 border-b border-border/50">
+                    <span className="text-muted-foreground">License</span>
+                    <Badge variant="outline">MIT License</Badge>
+                  </div>
+                </div>
+              </CardContent>
+              <CardFooter className="flex justify-between">
+                <span className="text-xs text-gray-500">
+                  Last test time: {new Date().toLocaleString()}
+                </span>
+              </CardFooter>
+            </Card>
+          </motion.div>
+
+          <motion.div variants={itemVariants}>
+            <Card className="h-full">
+              <CardContent className="p-6">
+                <div className="flex items-center mb-4">
+                  <User className="w-6 h-6 mr-3 text-primary" />
+                  <h2 className="text-2xl font-bold">Author</h2>
+                </div>
+                <div className="space-y-4">
+                  <div className="flex items-center gap-3">
+                    <Avatar className="w-16 h-16">
+                      <AvatarImage src="https://cdn.jsdelivr.net/gh/ReaJason/blog_imgs/default/blog_avatar.jpg" />
+                      <AvatarFallback>RJ</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <h3 className="font-semibold text-lg">
+                        {siteConfig.author}
+                      </h3>
+                      <p className="text-sm text-muted-foreground">
+                        {siteConfig.authorIntro}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="space-y-2 pt-2">
+                    <a
+                      href={siteConfig.blog}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors"
+                    >
+                      <Globe className="w-4 h-4" />
+                      <span className="text-sm">reajason.eu.org</span>
+                      <ExternalLink className="w-3 h-3" />
+                    </a>
+                    <a
+                      href={siteConfig.authorGithub}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors"
+                    >
+                      <Github className="w-4 h-4" />
+                      <span className="text-sm">github.com/ReaJason</span>
+                      <ExternalLink className="w-3 h-3" />
+                    </a>
+                    <div className="flex items-center gap-2 text-muted-foreground">
+                      <Mail className="w-4 h-4" />
+                      <span className="text-sm">Contact via GitHub</span>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        </div>
+      </motion.section>
+
+      <motion.section
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.8, delay: 0.6 }}
+        className="container mx-auto px-4 py-16"
+      >
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl font-bold mb-4">Resources & Links</h2>
+            <p className="text-muted-foreground">
+              Explore documentation and contribute to the project
+            </p>
+          </div>
+          <div className="grid md:grid-cols-3 gap-6">
+            <Card className="group hover:shadow-lg transition-shadow">
+              <CardContent className="p-6">
+                <Code className="w-10 h-10 mb-4 text-primary group-hover:scale-110 transition-transform" />
+                <h3 className="font-semibold text-lg mb-2">Documentation</h3>
+                <p className="text-sm text-muted-foreground mb-4">
+                  Comprehensive guides and API references for using
+                  MemShellParty effectively.
+                </p>
+                <a
+                  href={siteConfig.docSite}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary hover:underline text-sm font-medium flex items-center gap-1"
+                >
+                  Read Docs <ExternalLink className="w-3 h-3" />
+                </a>
+              </CardContent>
+            </Card>
+
+            <Card className="group hover:shadow-lg transition-shadow">
+              <CardContent className="p-6">
+                <Github className="w-10 h-10 mb-4 text-primary group-hover:scale-110 transition-transform" />
+                <h3 className="font-semibold text-lg mb-2">Source Code</h3>
+                <p className="text-sm text-muted-foreground mb-4">
+                  View the source code, report issues, and contribute to the
+                  development.
+                </p>
+                <a
+                  href={siteConfig.github}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary hover:underline text-sm font-medium flex items-center gap-1"
+                >
+                  View Repository <ExternalLink className="w-3 h-3" />
+                </a>
+              </CardContent>
+            </Card>
+
+            <Card className="group hover:shadow-lg transition-shadow">
+              <CardContent className="p-6">
+                <Heart className="w-10 h-10 mb-4 text-primary group-hover:scale-110 transition-transform" />
+                <h3 className="font-semibold text-lg mb-2">Support</h3>
+                <p className="text-sm text-muted-foreground mb-4">
+                  Star the project on GitHub and share it with the security
+                  community.
+                </p>
+                <a
+                  href={siteConfig.github}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary hover:underline text-sm font-medium flex items-center gap-1"
+                >
+                  Star on GitHub <ExternalLink className="w-3 h-3" />
+                </a>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </motion.section>
+
+      <footer className="border-t py-8 mt-16">
+        <div className="container mx-auto px-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between text-center sm:text-left">
+          <div>
+            <p className="text-sm font-semibold">{siteConfig.name}</p>
+            <p className="text-xs text-muted-foreground">
+              Built with ❤️ by{" "}
+              <a
+                href={siteConfig.blog}
+                rel="noreferrer noopener"
+                target="_blank"
+                className="font-medium hover:text-primary transition-colors"
+              >
+                {siteConfig.author}
+              </a>
+            </p>
+          </div>
+          <div className="text-xs text-muted-foreground">
+            © 2025 {siteConfig.name}. For authorized security testing only.
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

web/src/router.tsx

@@ -4,6 +4,7 @@ import { env } from "@/config";
 import MemShellPage from "@/pages/memshell";
 import ProbeShellPage from "@/pages/probeshell";
 import type { MemShellFormSchema } from "@/types/schema";
+import AboutPage from "@/pages/about";
 
 // Function to parse URL parameters into form default values
 const parseUrlParams = (
@@ -89,6 +90,10 @@ export const router = createHashRouter(
           path: "probeshell",
           element: <ProbeShellPage />,
         },
+        {
+          path: "about",
+          element: <AboutPage />,
+        },
       ],
     },
   ],