init

app/components/ClientLayout.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import React from "react";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import { styled } from "@mui/material/styles";
+import ListSubheader from "@mui/material/ListSubheader";
+import useScrollTrigger from "@mui/material/useScrollTrigger";
+
+// 自定义内容标题样式
+const StyledListHeader = styled(ListSubheader)({
+  backgroundImage: "var(--Paper-overlay)",
+});
+
+// 创建MUI主题
+const theme = createTheme({
+  typography: {
+    fontFamily: "inherit",
+  },
+});
+
+interface ClientLayoutProps {
+  children: React.ReactNode;
+}
+
+// 客户端组件负责MUI主题和UI组件
+const ClientLayout: React.FC<ClientLayoutProps> = ({ children }) => {
+  // 将hooks移到组件内部
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  interface Props {
+    /**
+     * Injected by the documentation to work in an iframe.
+     * You won't need it on your project.
+     */
+    window?: () => Window;
+    children?: React.ReactElement<{ elevation?: number }>;
+  }
+
+  // function ElevationScroll(props: Props) {
+  //   const { children, window } = props;
+  //   // Note that you normally won't need to set the window ref as useScrollTrigger
+  //   // will default to window.
+  //   // This is only being set here because the demo is in an iframe.
+  //   const trigger = useScrollTrigger({
+  //     disableHysteresis: true,
+  //     threshold: 0,
+  //     target: window ? window() : undefined,
+  //   });
+
+  //   return children
+  //     ? React.cloneElement(children, {
+  //         elevation: trigger ? 4 : 0,
+  //       })
+  //     : null;
+  // }
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Box sx={{ flexGrow: 1 }}>
+        <AppBar position="static">
+          <Toolbar>
+            {/* 左侧区域：Logo和项目按钮 */}
+            <Box sx={{ display: "flex", alignItems: "center" }}>
+              <Typography
+                variant="h6"
+                component="div"
+                sx={{ mr: 2, cursor: 'pointer' }}
+                onClick={() => (window.location.href = "/")}
+              >
+                LeonCloud
+              </Typography>
+              <Button
+                id="menu-appbar"
+                aria-controls="menu-appbar"
+                aria-haspopup="true"
+                onClick={handleMenu}
+                color="inherit"
+              >
+                <Typography variant="body1" component="span">
+                  项目
+                </Typography>
+              </Button>
+            </Box>
+
+            {/* 右侧区域留空，让左侧内容靠左 */}
+            <Box sx={{ flexGrow: 1 }} />
+
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorEl}
+              // anchorOrigin={{
+              //   vertical: 'top',
+              //   horizontal: 'left',
+              // }}
+              keepMounted
+              // transformOrigin={{
+              //   vertical: 'top',
+              //   horizontal: 'left',
+              // }}
+              open={Boolean(anchorEl)}
+              onClose={handleClose}
+            >
+              <StyledListHeader>Web</StyledListHeader>
+              <MenuItem
+                onClick={() => (window.location.href = "/project/leonpan")}
+              >
+                LeonPan
+              </MenuItem>
+              {/* <MenuItem onClick={handleClose}>My account</MenuItem> */}
+            </Menu>
+          </Toolbar>
+        </AppBar>
+      </Box>
+      {children}
+    </ThemeProvider>
+  );
+};
+
+export default ClientLayout;

app/layout.tsx

@@ -1,33 +1,28 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+// 禁用Google字体加载，避免构建错误
 
+// 导出元数据
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "LeonCloud官网",
+  description: "LeonCloud（原LeonWeb）官网",
 };
 
+// 导入客户端组件
+import ClientLayout from './components/ClientLayout';
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html>
+      <body>
+        <ClientLayout>
+          {children}
+        </ClientLayout>
       </body>
     </html>
   );

app/page.tsx

@@ -1,65 +1,404 @@
-import Image from "next/image";
+
+
+'use client';
+
+import { Box, Container, Typography, Card, CardContent, CardMedia, Button, useMediaQuery, useTheme } from '@mui/material';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
+import PublicIcon from '@mui/icons-material/Public';
+import WindowIcon from '@mui/icons-material/Window';
+
+
 
 export default function Home() {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isTablet = useMediaQuery(theme.breakpoints.down('md'));
+
+  // 功能数据
+  const features = [
+    {
+      icon: <PublicIcon fontSize="large" color="primary" style={{ fontSize: isMobile ? 32 : 48 }} />,
+      title: "云端访问",
+      description: "随时随地访问您的项目和文件，无需担心设备限制"
+    },
+    {
+      icon: <WindowIcon fontSize="large" color="primary" style={{ fontSize: isMobile ? 32 : 48 }} />,
+      title: "响应式设计",
+      description: "完美适配各种设备，从手机到桌面电脑"
+    },
+    {
+      icon: <AttachFileIcon fontSize="large" color="primary" style={{ fontSize: isMobile ? 32 : 48 }} />,
+      title: "文件管理",
+      description: "高效管理您的所有项目文件，支持多种格式"
+    }
+  ];
+
+  // 项目数据
+  const projects = [
+    {
+      name: "LeonPan",
+      description: "个人项目展示平台",
+      image: "/projects/leonpan/logo.png",
+      href: "/project/leonpan"
+    }
+  ];
+
+  // 扩展服务类别数据
+  const services = [
+    {
+      name: "云盘服务",
+      description: "安全可靠的云存储解决方案",
+      icon: <AttachFileIcon />
+    },
+    {
+      name: "社区论坛",
+      description: "用户交流与分享的平台",
+      icon: <PublicIcon />
+    },
+    {
+      name: "编程语言",
+      description: "创新的编程语言开发",
+      icon: <WindowIcon />
+    },
+    {
+      name: "操作系统",
+      description: "轻量级操作系统解决方案",
+      icon: <WindowIcon />
+    },
+    {
+      name: "我的世界服务器",
+      description: "稳定高效的游戏服务器",
+      icon: <PublicIcon />
+    },
+    {
+      name: "加密语言",
+      description: "安全通信解决方案",
+      icon: <AttachFileIcon />
+    }
+  ];
+
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+    <Box sx={{ minHeight: '100vh', bgcolor: 'background.default' }}>
+      {/* 英雄区域 */}
+      <Box sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        py: isMobile ? 10 : 16,
+        px: 2,
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden',
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: 'radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%)',
+          zIndex: 1
+        }
+      }}>
+        <Container maxWidth="md" sx={{ position: 'relative', zIndex: 2 }}>
+          <Typography 
+            variant={isMobile ? "h3" : "h2"} 
+            component="h1" 
+            gutterBottom 
+            fontWeight="bold"
+            sx={{ mb: 3 }}
           >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+            LeonCloud
+          </Typography>
+          <Typography 
+            variant={isMobile ? "h6" : "h5"} 
+            paragraph 
+            sx={{ mb: 6, opacity: 0.9 }}
           >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
+            LeonMMcoset的所有产品的运营商
+          </Typography>
+          <Typography 
+            variant="body1" 
+            paragraph 
+            sx={{ 
+              maxWidth: 600, 
+              mx: 'auto', 
+              opacity: 0.8, 
+              mb: 8,
+              fontSize: isMobile ? '1rem' : '1.1rem'
+            }}
+          >
+            覆盖云盘、论坛、编程语言、操作系统、我的世界服务器、加密语言等各种服务
+          </Typography>
+          <Typography 
+            variant="body1" 
+            paragraph 
+            sx={{ 
+              fontWeight: 'bold',
+              fontSize: isMobile ? '1rem' : '1.1rem',
+              backgroundColor: 'rgba(255,255,255,0.1)',
+              py: 2,
+              px: 4,
+              borderRadius: 2,
+              display: 'inline-block'
+            }}
+          >
+            我们的宗旨是给用户提供简单、安全、高效、全方面的服务
+          </Typography>
+        </Container>
+      </Box>
+
+      {/* 服务介绍区域 */}
+      <Box sx={{ py: isMobile ? 8 : 12, px: 2 }}>
+        <Container maxWidth="lg">
+          <Typography 
+            variant={isMobile ? "h4" : "h3"} 
+            component="h2" 
+            align="center" 
+            gutterBottom 
+            fontWeight="bold"
+            sx={{ mb: 6 }}
+          >
+            我们的服务
+          </Typography>
+          
+          <Box sx={{ 
+            display: 'flex', 
+            flexWrap: 'wrap', 
+            justifyContent: 'center',
+            gap: { xs: 3, md: 4 }
+          }}>
+            {services.map((service, index) => (
+              <Box 
+                key={index} 
+                sx={{
+                  width: { xs: '100%', sm: 'calc(50% - 16px)', md: 'calc(33.333% - 16px)' },
+                  maxWidth: { xs: '100%', sm: 400, md: 350 },
+                  bgcolor: 'background.paper',
+                  borderRadius: 3,
+                  boxShadow: 2,
+                  p: 4,
+                  transition: 'all 0.3s ease',
+                  '&:hover': {
+                    transform: 'translateY(-5px)',
+                    boxShadow: 4,
+                  },
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  textAlign: 'center'
+                }}
+              >
+                <Box sx={{ 
+                  mb: 3, 
+                  color: 'primary.main',
+                  fontSize: isMobile ? 2.5 : 3
+                }}>
+                  {service.icon}
+                </Box>
+                <Typography variant="h6" gutterBottom fontWeight="bold">
+                  {service.name}
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                  {service.description}
+                </Typography>
+              </Box>
+            ))}
+          </Box>
+        </Container>
+      </Box>
+
+      {/* 项目展示区域 */}
+      <Box sx={{ 
+        py: isMobile ? 8 : 12, 
+        px: 2,
+        bgcolor: 'grey.50'
+      }}>
+        <Container maxWidth="lg">
+          <Typography 
+            variant={isMobile ? "h4" : "h3"} 
+            component="h2" 
+            align="center" 
+            gutterBottom 
+            fontWeight="bold"
+            sx={{ mb: 6 }}
+          >
+            精选项目
+          </Typography>
+          
+          <Box sx={{ 
+            display: 'flex', 
+            justifyContent: 'center',
+            gap: 4
+          }}>
+            {projects.map((project, index) => (
+              <Card 
+                key={index} 
+                sx={{
+                  width: { xs: '100%', sm: 400, md: 500 },
+                  maxWidth: '100%',
+                  borderRadius: 3,
+                  boxShadow: 3,
+                  transition: 'all 0.3s ease',
+                  '&:hover': {
+                    transform: 'translateY(-5px)',
+                    boxShadow: 6,
+                  }
+                }}
+              >
+                <CardMedia
+                  component="img"
+                  height={200}
+                  image={project.image}
+                  alt={project.name}
+                  sx={{ objectFit: 'contain', padding: 3, bgcolor: 'background.paper' }}
+                />
+                <CardContent sx={{ textAlign: 'center' }}>
+                  <Typography variant="h5" component="h3" gutterBottom fontWeight="bold">
+                    {project.name}
+                  </Typography>
+                  <Typography variant="body1" color="text.secondary" paragraph sx={{ mb: 3 }}>
+                    {project.description}
+                  </Typography>
+                  <Button 
+                    variant="contained" 
+                    color="primary" 
+                    size="large"
+                    href={project.href}
+                    fullWidth
+                    sx={{ py: 1.2 }}
+                  >
+                    查看详情
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </Box>
+        </Container>
+      </Box>
+
+      {/* 优势亮点 */}
+      <Box sx={{ py: isMobile ? 8 : 12, px: 2 }}>
+        <Container maxWidth="lg">
+          <Typography 
+            variant={isMobile ? "h4" : "h3"} 
+            component="h2" 
+            align="center" 
+            gutterBottom 
+            fontWeight="bold"
+            sx={{ mb: 6 }}
+          >
+            我们的优势
+          </Typography>
+          
+          <Box sx={{ 
+            display: 'flex', 
+            flexWrap: 'wrap', 
+            justifyContent: 'center',
+            gap: { xs: 4, md: 6 }
+          }}>
+            <Box sx={{ 
+              width: { xs: '100%', md: '45%' },
+              maxWidth: 500,
+              textAlign: isMobile ? 'center' : 'left',
+              mb: { xs: 4, md: 0 }
+            }}>
+              {features.map((feature, index) => (
+                <Box 
+                  key={index} 
+                  sx={{
+                    display: 'flex',
+                    flexDirection: isMobile ? 'column' : 'row',
+                    alignItems: isMobile ? 'center' : 'flex-start',
+                    mb: 4,
+                    gap: 3
+                  }}
+                >
+                  <Box sx={{ color: 'primary.main' }}>
+                    {feature.icon}
+                  </Box>
+                  <Box>
+                    <Typography variant="h6" gutterBottom fontWeight="bold">
+                      {feature.title}
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                      {feature.description}
+                    </Typography>
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+            
+            <Box sx={{ 
+              width: { xs: '100%', md: '45%' },
+              maxWidth: 500,
+              bgcolor: 'primary.main',
+              color: 'white',
+              p: 6,
+              borderRadius: 3,
+              boxShadow: 4,
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center'
+            }}>
+              <Typography variant={isMobile ? "h5" : "h4"} gutterBottom fontWeight="bold">
+                我们的承诺
+              </Typography>
+              <Box sx={{ height: 2, bgcolor: 'white', opacity: 0.3, mb: 4 }}></Box>
+              <ul style={{ paddingLeft: isMobile ? 0 : 20, margin: 0, listStyleType: isMobile ? 'none' : 'disc' }}>
+                <li style={{ marginBottom: 16, fontSize: isMobile ? '0.9rem' : '1rem' }}>
+                  简单易用的界面设计
+                </li>
+                <li style={{ marginBottom: 16, fontSize: isMobile ? '0.9rem' : '1rem' }}>
+                  企业级安全保障
+                </li>
+                <li style={{ marginBottom: 16, fontSize: isMobile ? '0.9rem' : '1rem' }}>
+                  高效稳定的系统性能
+                </li>
+                <li style={{ marginBottom: 16, fontSize: isMobile ? '0.9rem' : '1rem' }}>
+                  全方面的服务支持
+                </li>
+                <li style={{ fontSize: isMobile ? '0.9rem' : '1rem' }}>
+                  持续创新的技术研发
+                </li>
+              </ul>
+            </Box>
+          </Box>
+        </Container>
+      </Box>
+
+      {/* 页脚区域 */}
+      <Box sx={{ bgcolor: 'primary.dark', color: 'white', py: 8, px: 2 }}>
+        <Container maxWidth="lg">
+          <Box sx={{ 
+            display: 'flex', 
+            flexDirection: isMobile ? 'column' : 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            mb: 6
+          }}>
+            <Typography variant="h5" gutterBottom fontWeight="bold">
+              LeonCloud
+            </Typography>
+            <Typography variant="body1" sx={{ opacity: 0.8 }}>
+              LeonMMcoset的所有产品的运营商
+            </Typography>
+          </Box>
+          
+          <Box sx={{ 
+            height: 1, 
+            bgcolor: 'white', 
+            opacity: 0.1, 
+            mb: 6 
+          }}></Box>
+          
+          <Typography variant="body2" align="center" paragraph>
+            © {new Date().getFullYear()} LeonCloud. 保留所有权利。
+          </Typography>
+          <Typography variant="caption" align="center" color="rgba(255,255,255,0.7)">
+            我们的宗旨是给用户提供简单、安全、高效、全方面的服务
+          </Typography>
+        </Container>
+      </Box>
+    </Box>
   );
-}
+}

app/project/leonpan/page.tsx

@@ -0,0 +1,357 @@
+'use client';
+
+import { Box, Container, Typography, Card, CardContent, CardMedia, Button, useMediaQuery, useTheme, Tabs, Tab } from '@mui/material';
+import { Code, Star, Download, GitHub, Link, Monitor, Smartphone, Storage } from '@mui/icons-material';
+import { useState } from 'react';
+
+export default function LeonPan() {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isTablet = useMediaQuery(theme.breakpoints.down('md'));
+  const [currentTab, setCurrentTab] = useState(0);
+
+  // 项目截图
+  const screenshots = [
+    '/projects/leonpan/img1.png',
+    '/projects/leonpan/img2.png',
+    '/projects/leonpan/img3.png'
+  ];
+
+  // 功能特点
+  const features = [
+    {
+      icon: <Monitor color="primary" style={{ fontSize: isMobile ? 24 : 32 }} />,
+      title: "Web支持",
+      description: "无需安装任何客户端就可以快速使用"
+    },
+    {
+      icon: <Smartphone color="primary" style={{ fontSize: isMobile ? 24 : 32 }} />,
+      title: "PC客户端",
+      description: "完美适配Windows 10以上的系统"
+    },
+    {
+      icon: <Storage color="primary" style={{ fontSize: isMobile ? 24 : 32 }} />,
+      title: "精美设计",
+      description: "提供简洁而专业的用户界面，操作方便"
+    },
+    {
+      icon: <Code color="primary" style={{ fontSize: isMobile ? 24 : 32 }} />,
+      title: "开源可定制",
+      description: "基于GPLv3协议开源，可自由修改和定制"
+    }
+  ];
+
+  // 技术栈
+  // const techStack = [
+  //   { name: "Go", level: 90 },
+  //   { name: "Vue.js", level: 85 },
+  //   { name: "Element UI", level: 80 },
+  //   { name: "MySQL", level: 75 },
+  //   { name: "Redis", level: 70 }
+  // ];
+
+  return (
+    <Box sx={{ minHeight: '100vh', bgcolor: 'background.default' }}>
+      {/* 项目头部 */}
+      <Box sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        py: isMobile ? 8 : 12,
+        px: 2,
+        textAlign: 'center',
+        position: 'relative',
+        overflow: 'hidden',
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          bottom: -50,
+          right: -50,
+          width: 200,
+          height: 200,
+          borderRadius: '50%',
+          bgcolor: 'rgba(255,255,255,0.1)',
+        }
+      }}>
+        <Container maxWidth="md" sx={{ position: 'relative', zIndex: 1 }}>
+          <Typography variant={isMobile ? "h3" : "h2"} component="h1" gutterBottom fontWeight="bold">
+            LeonPan
+          </Typography>
+          <Typography variant="body1" paragraph sx={{ maxWidth: 600, mx: 'auto', opacity: 0.9 }}>
+            LeonPan是一个开源项目，改编自Cloudreve开源项目，使用GPLv3协议开源。提供强大的文件管理功能。
+          </Typography>
+          <Box sx={{ mt: 4, display: 'flex', flexWrap: 'wrap', gap: 2, justifyContent: 'center' }}>
+            <Button 
+              variant="contained" 
+              color="secondary" 
+              size={isMobile ? "small" : "medium"}
+              startIcon={<GitHub />}
+              sx={{ px: 3 }}
+              onClick={() => window.open('http://leonmmcoset.jjxmm.win:2000/leonmmcoset/leonpan', '_blank')}
+            >
+              Git仓库
+            </Button>
+            <Button 
+              variant="outlined" 
+              color="inherit" 
+              size={isMobile ? "small" : "medium"}
+              startIcon={<Download />}
+              sx={{ px: 3, borderColor: 'white', color: 'white', '&:hover': { borderColor: 'rgba(255,255,255,0.8)' } }}
+              onClick={() => window.open('http://leonmmcoset.jjxmm.win:5212/', '_blank')}
+            >
+              进入LeonAPP
+            </Button>
+          </Box>
+        </Container>
+      </Box>
+
+      {/* 项目概述 */}
+      <Box sx={{ py: isMobile ? 6 : 10, px: 2 }}>
+        <Container maxWidth="lg">
+          <Box sx={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 4 : 6, alignItems: 'center', width: '100%' }}>
+            <Box sx={{ width: '100%' }}>
+              <Typography variant={isMobile ? "h4" : "h3"} component="h2" gutterBottom fontWeight="bold">
+                项目概述
+              </Typography>
+              <Typography variant="body1" paragraph sx={{ mb: 3, color: 'text.secondary' }}>
+                LeonPan是基于Cloudreve开发的文件管理系统，提供了丰富的功能和友好的用户界面。
+                它支持多种存储方式，包括本地存储、对象存储等，可以满足不同用户的需求。
+              </Typography>
+              <Typography variant="body1" paragraph sx={{ mb: 3, color: 'text.secondary' }}>
+                项目致力于提供安全、稳定、高效的文件管理解决方案，适用于个人用户和团队协作场景。
+              </Typography>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mt: 4 }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  <Star color="secondary" fontSize="small" style={{ fontSize: 16 }} />
+                  <Typography variant="body2">开源免费</Typography>
+                </Box>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  <Code color="primary" fontSize="small" style={{ fontSize: 16 }} />
+                  <Typography variant="body2">GPLv3协议</Typography>
+                </Box>
+              </Box>
+            </Box>
+            <Box sx={{ width: '100%' }}>
+              <Card sx={{ boxShadow: 4, borderRadius: 2, overflow: 'hidden' }}>
+                <CardMedia
+                  component="img"
+                  height={isMobile ? 200 : 300}
+                  image={screenshots[0]}
+                  alt="LeonPan 截图"
+                  sx={{ objectFit: 'cover' }}
+                />
+              </Card>
+              </Box>
+            </Box>
+        </Container>
+      </Box>
+
+      {/* 功能特点 */}
+      <Box sx={{ py: isMobile ? 6 : 10, px: 2, bgcolor: 'grey.50' }}>
+        <Container maxWidth="lg">
+          <Typography variant={isMobile ? "h4" : "h3"} component="h2" align="center" gutterBottom fontWeight="bold">
+            功能特点
+          </Typography>
+          <Typography variant="body1" align="center" paragraph sx={{ mb: 8, maxWidth: 600, mx: 'auto', color: 'text.secondary' }}>
+            LeonPan提供丰富的功能，满足您的文件管理需求
+          </Typography>
+          
+          <Box sx={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: isMobile ? 3 : 4, width: '100%' }}>
+            {features.map((feature, index) => (
+              <Box sx={{ width: isMobile ? '100%' : 'calc(50% - 16px)', key: index }}>
+                <Card sx={{ 
+                  height: '100%', 
+                  display: 'flex', 
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  padding: 3,
+                  boxShadow: 2,
+                  borderRadius: 2,
+                  transition: 'transform 0.3s, box-shadow 0.3s',
+                  '&:hover': {
+                    transform: 'translateY(-3px)',
+                    boxShadow: 4,
+                  }
+                }}>
+                  <Box sx={{ mr: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', minWidth: 60 }}>
+                    {feature.icon}
+                  </Box>
+                  <Box>
+                    <Typography variant="h6" component="h3" gutterBottom fontWeight="bold">
+                      {feature.title}
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                      {feature.description}
+                    </Typography>
+                  </Box>
+                </Card>
+              </Box>
+            ))}
+          </Box>
+        </Container>
+      </Box>
+
+      {/* 截图展示 */}
+      <Box sx={{ py: isMobile ? 6 : 10, px: 2 }}>
+        <Container maxWidth="lg">
+          <Typography variant={isMobile ? "h4" : "h3"} component="h2" align="center" gutterBottom fontWeight="bold">
+            界面展示
+          </Typography>
+          <Typography variant="body1" align="center" paragraph sx={{ mb: 8, maxWidth: 600, mx: 'auto', color: 'text.secondary' }}>
+            查看LeonPan的精美界面
+          </Typography>
+
+          {/* 截图切换标签 */}
+          {!isMobile && (
+            <Box sx={{ mb: 4, display: 'flex', justifyContent: 'center' }}>
+              <Tabs
+                value={currentTab}
+                onChange={(_, newValue) => setCurrentTab(newValue)}
+                variant="scrollable"
+                scrollButtons="auto"
+                indicatorColor="primary"
+                textColor="primary"
+              >
+                {screenshots.map((_, index) => (
+                  <Tab key={index} label={`截图 ${index + 1}`} />
+                ))}
+              </Tabs>
+            </Box>
+          )}
+
+          {/* 主要截图展示 */}
+          <Box sx={{ textAlign: 'center' }}>
+            <Card sx={{ display: 'inline-block', boxShadow: 5, borderRadius: 2, overflow: 'hidden', maxWidth: '100%' }}>
+              <CardMedia
+                component="img"
+                height={isMobile ? 250 : 400}
+                image={screenshots[currentTab]}
+                alt={`LeonPan 截图 ${currentTab + 1}`}
+                sx={{ objectFit: 'contain', maxWidth: '100%' }}
+              />
+            </Card>
+          </Box>
+
+          {/* 移动端缩略图导航 */}
+          {isMobile && (
+            <Box sx={{ mt: 4, display: 'flex', gap: 2, justifyContent: 'center', overflowX: 'auto', pb: 2 }}>
+              {screenshots.map((screenshot, index) => (
+                <Button
+                  key={index}
+                  variant={currentTab === index ? "contained" : "outlined"}
+                  size="small"
+                  onClick={() => setCurrentTab(index)}
+                  sx={{
+                    minWidth: 60,
+                    height: 60,
+                    p: 1,
+                    border: currentTab === index ? 0 : 1,
+                  }}
+                >
+                  <img
+                    src={screenshot}
+                    alt={`缩略图 ${index + 1}`}
+                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                  />
+                </Button>
+              ))}
+            </Box>
+          )}
+        </Container>
+      </Box>
+
+      {/* 技术栈 */}
+      {/* <Box sx={{ py: isMobile ? 6 : 10, px: 2, bgcolor: 'grey.50' }}>
+        <Container maxWidth="lg">
+          <Typography variant={isMobile ? "h4" : "h3"} component="h2" align="center" gutterBottom fontWeight="bold">
+            技术栈
+          </Typography>
+          <Typography variant="body1" align="center" paragraph sx={{ mb: 8, maxWidth: 600, mx: 'auto', color: 'text.secondary' }}>
+            LeonPan基于现代技术栈开发，保证系统的高性能和稳定性
+          </Typography>
+          
+          <Box sx={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: isMobile ? 3 : 4, width: '100%' }}>
+            {techStack.map((tech, index) => (
+              <Box sx={{ width: isMobile ? '100%' : isTablet ? 'calc(50% - 16px)' : 'calc(33.333% - 20px)', key: index }}>
+                <Card sx={{ 
+                  height: '100%', 
+                  boxShadow: 2,
+                  borderRadius: 2,
+                  transition: 'transform 0.3s, box-shadow 0.3s',
+                  '&:hover': {
+                    transform: 'translateY(-3px)',
+                    boxShadow: 4,
+                  }
+                }}>
+                  <CardContent>
+                    <Typography variant="h6" component="h3" gutterBottom fontWeight="bold">
+                      {tech.name}
+                    </Typography>
+                    <Box sx={{ mt: 2 }}>
+                      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+                        <Typography variant="caption" color="text.secondary" sx={{ minWidth: 40 }}>
+                          熟练度
+                        </Typography>
+                        <Typography variant="caption" color="text.secondary">
+                          {tech.level}%
+                        </Typography>
+                      </Box>
+                      <Box sx={{ 
+                        width: '100%', 
+                        height: 8, 
+                        bgcolor: 'grey.200', 
+                        borderRadius: 4,
+                        overflow: 'hidden'
+                      }}>
+                        <Box sx={{
+                          width: `${tech.level}%`,
+                          height: '100%',
+                          bgcolor: 'primary.main',
+                          borderRadius: 4,
+                          transition: 'width 0.5s ease-in-out'
+                        }} />
+                      </Box>
+                    </Box>
+                  </CardContent>
+                </Card>
+              </Box>
+            ))}
+          </Box>
+        </Container>
+      </Box> */}
+
+      {/* 行动号召 */}
+      <Box sx={{ py: isMobile ? 8 : 12, px: 2, bgcolor: 'primary.main', color: 'white', textAlign: 'center' }}>
+        <Container maxWidth="md">
+          <Typography variant={isMobile ? "h4" : "h3"} component="h2" gutterBottom fontWeight="bold">
+            开始使用 LeonPan
+          </Typography>
+          <Typography variant="body1" paragraph sx={{ mb: 6, opacity: 0.9 }}>
+            立即体验LeonPan带来的高效文件管理体验，开源免费，功能强大
+          </Typography>
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3, justifyContent: 'center' }}>
+            <Button 
+              variant="contained" 
+              color="secondary" 
+              size={isMobile ? "small" : "large"}
+              startIcon={<GitHub />}
+              sx={{ px: 4, py: 1.5 }}
+              onClick={() => window.open('http://leonmmcoset.jjxmm.win:2000/leonmmcoset/leonpan', '_blank')}
+            >
+              访问Git仓库
+            </Button>
+            <Button 
+              variant="outlined" 
+              color="inherit" 
+              size={isMobile ? "small" : "large"}
+              startIcon={<Download />}
+              sx={{ px: 4, py: 1.5, borderColor: 'white', color: 'white', '&:hover': { borderColor: 'rgba(255,255,255,0.8)' } }}
+              onClick={() => window.open('http://leonmmcoset.jjxmm.win:5212/', '_blank')}
+            >
+              立即访问LeonAPP
+            </Button>
+          </Box>
+        </Container>
+      </Box>
+    </Box>
+  );
+}

package.json

@@ -9,6 +9,11 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/base": "^5.0.0-beta.70",
+    "@mui/icons-material": "^7.3.5",
+    "@mui/material": "^7.3.5",
     "next": "16.0.3",
     "react": "19.2.0",
     "react-dom": "19.2.0"