mirror of
https://github.com/ReaJason/MemShellParty.git
synced 2026-09-23 23:41:52 +08:00
feat: add about page
This commit is contained in:
ReaJason
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user