delete

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+/out

README.md

@@ -1,3 +1,3 @@
 # leoncloud_temeplate
 
-LeonCloud（https://jjmm.ink/）的模板
+LeonCloud（https://jjmm.ink/）的模板

app/awa/first/page.tsx

@@ -0,0 +1,20 @@
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { Container } from '@mui/material';
+
+export default function First() {
+  return (
+    <div>
+      <Container maxWidth="md" sx={{ py: { xs: 7, md: 16 }, textAlign: 'center' }}>
+      <Box sx={{ width: '100%', maxWidth: 500 }}>
+        <Typography variant='h1'>
+          First
+        </Typography><br />
+        <Typography>
+          在<code>/awa</code>底下的第一个页面
+        </Typography>
+      </Box>
+      </Container>
+    </div>
+  )
+}

app/awa/second/page.tsx

@@ -0,0 +1,20 @@
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { Container } from '@mui/material';
+
+export default function Second() {
+  return (
+    <div>
+      <Container maxWidth="md" sx={{ py: { xs: 7, md: 16 }, textAlign: 'center' }}>
+      <Box sx={{ width: '100%', maxWidth: 500 }}>
+        <Typography variant='h1'>
+          Second
+        </Typography><br />
+        <Typography>
+          在<code>/awa</code>底下的第二个页面
+        </Typography>
+      </Box>
+      </Container>
+    </div>
+  )
+}

app/awa/third/page.tsx

@@ -0,0 +1,20 @@
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { Container } from '@mui/material';
+
+export default function Third() {
+  return (
+    <div>
+      <Container maxWidth="md" sx={{ py: { xs: 7, md: 16 }, textAlign: 'center' }}>
+      <Box sx={{ width: '100%', maxWidth: 500 }}>
+        <Typography variant='h1'>
+          Third
+        </Typography><br />
+        <Typography>
+          在<code>/awa</code>底下的第三个页面
+        </Typography>
+      </Box>
+      </Container>
+    </div>
+  )
+}

app/components/ClientLayout.tsx

@@ -0,0 +1,507 @@
+"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 Container from "@mui/material/Container";
+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";
+import Drawer from "@mui/material/Drawer";
+import IconButton from "@mui/material/IconButton";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import Divider from "@mui/material/Divider";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+
+function colorLog(message: string, color: 'reset' | 'red' | 'green' | 'yellow' | 'blue') {
+    const colors = {
+        reset: '\x1b[0m',
+        red: '\x1b[31m',
+        green: '\x1b[32m',
+        yellow: '\x1b[33m',
+        blue: '\x1b[34m'
+    };
+    console.log(`${colors[color]}%s${colors.reset}`, message);
+}
+
+// 自定义内容标题样式
+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 [mobileDrawerOpen, setMobileDrawerOpen] = React.useState(false);
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  // 监听窗口大小变化，判断是否为移动设备
+  React.useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768); // 768px为移动端断点
+    };
+    
+    // 初始化时判断
+    handleResize();
+    
+    // 添加事件监听器
+    window.addEventListener('resize', handleResize);
+    
+    // 清理函数
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  // 定义顶栏导航项的类型
+  interface NavItem {
+    id: string;
+    label: string;
+    href: string;
+    type: 'link' | 'menu';
+    children?: NavItem[];
+  }
+
+  // 定义导航项目菜单的类型
+  interface ProjectItem {
+    id: string;
+    label: string;
+    href: string;
+    category: string;
+  }
+
+  // 动态定义顶部导航链接
+  const navItems: NavItem[] = [
+    {
+      id: 'home',
+      label: 'LeonCloud',
+      href: '/',
+      type: 'link'
+    },
+    {
+      id: 'link',
+      label: 'Link',
+      href: '/test',
+      type: 'link'
+    },
+    {
+      id: 'Menu',
+      label: 'Menu',
+      href: '',
+      type: 'menu'
+    },
+    // {
+    //   id: 'id',
+    //   label: 'label',
+    //   href: '/href',
+    //   type: 'link'
+    // }
+  ];
+
+  // 动态定义项目列表
+  const projectItems: ProjectItem[] = [
+    {
+      id: 'first',
+      label: 'First',
+      href: '/awa/first',
+      category: '1'
+    },
+    {
+      id: 'second',
+      label: 'Second',
+      href: '/awa/second',
+      category: '1'
+    },
+    {
+      id: 'third',
+      label: 'Third',
+      href: '/awa/third',
+      category: '2'
+    }
+  ];
+
+  // 按分类组织项目
+  const projectsByCategory = projectItems.reduce((acc, item) => {
+    if (!acc[item.category]) {
+      acc[item.category] = [];
+    }
+    acc[item.category].push(item);
+    return acc;
+  }, {} as Record<string, ProjectItem[]>);
+
+  // 侧边栏开关控制
+  const toggleDrawer = (open: boolean) => () => {
+    setMobileDrawerOpen(open);
+  };
+
+  // 侧边栏项目点击处理
+  const handleDrawerItemClick = (href: string) => {
+    window.location.href = href;
+    setMobileDrawerOpen(false);
+  };
+
+  // 分类展开状态管理 - 现在在projectsByCategory定义之后初始化
+  const [expandedCategories, setExpandedCategories] = React.useState<Record<string, boolean>>({
+    // 直接初始化所有已知分类为展开状态
+    'Web': true,
+    '其它': true
+  });
+  
+  // 项目部分的展开状态管理
+  const [projectsExpanded, setProjectsExpanded] = React.useState(false);
+
+  // 切换分类展开/收缩状态
+  const toggleCategory = (category: string) => {
+    setExpandedCategories(prev => ({
+      ...prev,
+      [category]: !prev[category]
+    }));
+  };
+
+  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="fixed" sx={{ 
+          zIndex: 1100, 
+          backdropFilter: 'blur(12px)',
+          // backgroundColor: 'rgba(30, 30, 30, 0.8)', // 添加半透明背景色以显示模糊效果
+        }}>
+          <Toolbar>
+            {/* 响应式顶栏 - 移动端显示汉堡菜单，桌面端显示完整导航 */}
+            <Box sx={{ display: "flex", alignItems: "center", flexGrow: 1 }}>
+              {/* 移动端：汉堡菜单按钮 */}
+              {isMobile && (
+                <IconButton
+                  color="inherit"
+                  aria-label="打开菜单"
+                  edge="start"
+                  onClick={toggleDrawer(true)}
+                  sx={{ mr: 2 }}
+                >
+                  <Box sx={{ 
+                    display: 'flex', 
+                    flexDirection: 'column', 
+                    justifyContent: 'space-between', 
+                    width: 24, 
+                    height: 18 
+                  }}>
+                    <Box sx={{ height: 2, bgcolor: 'white', width: '100%' }} />
+                    <Box sx={{ height: 2, bgcolor: 'white', width: '100%' }} />
+                    <Box sx={{ height: 2, bgcolor: 'white', width: '100%' }} />
+                  </Box>
+                </IconButton>
+              )}
+
+              {/* 首页链接（在所有设备上都显示） */}
+              <Typography
+                variant={isMobile ? "h6" : "h6"}
+                component="div"
+                sx={{ 
+                  cursor: 'pointer',
+                  '&:hover': {
+                    opacity: 0.8
+                  }
+                }}
+                onClick={() => (window.location.href = '/')}
+              >
+                LeonCloud
+              </Typography>
+
+              {/* 桌面端：完整导航链接 */}
+              {!isMobile && (
+                <Box sx={{ display: "flex", alignItems: "center", ml: 2 }}>
+                  {navItems.filter(item => item.id !== 'home').map((item) => {
+                    if (item.type === 'link') {
+                      return (
+                        <Typography
+                          key={item.id}
+                          variant="body1"
+                          component="div"
+                          sx={{ 
+                            mr: 2, 
+                            cursor: 'pointer',
+                            '&:hover': {
+                              opacity: 0.8
+                            }
+                          }}
+                          onClick={() => (window.location.href = item.href)}
+                        >
+                          {item.label}
+                        </Typography>
+                      );
+                    } else if (item.type === 'menu') {
+                      return (
+                        <Button
+                          key={item.id}
+                          id="menu-appbar"
+                          aria-controls="menu-appbar"
+                          aria-haspopup="true"
+                          onClick={handleMenu}
+                          color="inherit"
+                        >
+                          <Typography variant="body1" component="span">
+                            {item.label}
+                          </Typography>
+                        </Button>
+                      );
+                    }
+                    return null;
+                  })}
+                </Box>
+              )}
+            </Box>
+
+            {/* 桌面端：项目下拉菜单 */}
+            {!isMobile && (
+              <Menu
+                id="menu-appbar"
+                anchorEl={anchorEl}
+                keepMounted
+                open={Boolean(anchorEl)}
+                onClose={handleClose}
+              >
+                {Object.entries(projectsByCategory).map(([category, items]) => (
+                  <React.Fragment key={category}>
+                    <StyledListHeader>{category}</StyledListHeader>
+                    {items.map((project) => (
+                      <MenuItem
+                        key={project.id}
+                        onClick={() => {
+                          window.location.href = project.href;
+                          handleClose();
+                        }}
+                      >
+                        {project.label}
+                      </MenuItem>
+                    ))}
+                  </React.Fragment>
+                ))}
+              </Menu>
+            )}
+           </Toolbar>
+          </AppBar>
+      </Box>
+
+      {/* 移动端侧边栏 */}
+      <Drawer
+        anchor="left"
+        open={mobileDrawerOpen}
+        onClose={toggleDrawer(false)}
+      >
+        <Box sx={{ width: 250 }} role="presentation">
+          {/* 侧边栏头部 */}
+          <Box sx={{ 
+            bgcolor: 'primary.main', 
+            color: 'white', 
+            p: 2, 
+            display: 'flex', 
+            justifyContent: 'space-between', 
+            alignItems: 'center'
+          }}>
+            <Typography variant="h6">导航菜单</Typography>
+            <IconButton
+              edge="end"
+              color="inherit"
+              onClick={toggleDrawer(false)}
+              aria-label="关闭菜单"
+            >
+              <ChevronRightIcon />
+            </IconButton>
+          </Box>
+          
+          <Divider />
+          
+          {/* 侧边栏导航链接 */}
+          <List>
+            {navItems.filter(item => item.id !== 'home').map((item) => {
+              if (item.type === 'link') {
+                return (
+                  <ListItem 
+                    component="a"
+                    href={item.href}
+                    key={item.id}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleDrawerItemClick(item.href);
+                    }}
+                  >
+                    <ListItemText primary={item.label} />
+                  </ListItem>
+                );
+              } else if (item.type === 'menu') {
+                return (
+                  <React.Fragment key={item.id}>
+                    <ListItem 
+                      component="div"
+                      onClick={() => setProjectsExpanded(prev => !prev)}
+                      sx={{ 
+                        pl: 1, 
+                        cursor: 'pointer',
+                        '&:hover': { backgroundColor: 'rgba(0,0,0,0.04)' },
+                        display: 'flex',
+                        alignItems: 'center',
+                        backgroundColor: 'rgba(0,0,0,0.02)',
+                        fontWeight: 'bold'
+                      }}
+                    >
+                      <ChevronRightIcon 
+                        fontSize="small" 
+                        sx={{ 
+                          mr: 1,
+                          transform: projectsExpanded ? 'rotate(90deg)' : 'none',
+                          transition: 'transform 0.2s ease-in-out'
+                        }} 
+                      />
+                      <ListItemText 
+                        primary={item.label} 
+                      />
+                    </ListItem>
+                    {projectsExpanded && Object.entries(projectsByCategory).map(([category, projects]) => (
+                      <React.Fragment key={category}>
+                        <ListItem 
+                          component="div"
+                          onClick={() => toggleCategory(category)}
+                          sx={{ 
+                            pl: 2, 
+                            cursor: 'pointer',
+                            '&:hover': { backgroundColor: 'rgba(0,0,0,0.04)' },
+                            display: 'flex',
+                            alignItems: 'center'
+                          }}
+                        >
+                          <ChevronRightIcon 
+                            fontSize="small" 
+                            sx={{ 
+                              mr: 1,
+                              transform: expandedCategories[category] ? 'rotate(90deg)' : 'none',
+                              transition: 'transform 0.2s ease-in-out'
+                            }} 
+                          />
+                          <ListItemText 
+                            primary={category} 
+                            primaryTypographyProps={{ fontSize: '0.7rem' }}
+                          />
+                        </ListItem>
+                        {expandedCategories[category] && projects.map((project) => (
+                          <ListItem 
+                            component="a"
+                            href={project.href}
+                            key={project.id}
+                            onClick={(e) => {
+                              e.preventDefault();
+                              handleDrawerItemClick(project.href);
+                            }}
+                            sx={{ pl: 6 }}
+                          >
+                            <ListItemText primary={project.label} />
+                          </ListItem>
+                        ))}
+                      </React.Fragment>
+                    ))}
+                  </React.Fragment>
+                );
+              }
+              return null;
+            })}
+          </List>
+        </Box>
+      </Drawer>
+
+      {/* 为固定顶栏添加足够的顶部空间 */}
+      <Box sx={{ pt: { xs: 8, sm: 6 } }}>
+        {children}
+      </Box>
+      
+      {/* 页脚区域 */}
+      <Box sx={{ bgcolor: 'primary.dark', color: 'white', py: 8, px: 2 }}>
+        <Container maxWidth="lg">
+          <Box sx={{ 
+            display: 'flex', 
+            flexDirection: { xs: 'column', md: 'row' },
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            mb: 6
+          }}>
+            <Typography variant="h5" gutterBottom fontWeight="bold">
+              Test
+            </Typography>
+            <Typography variant="body1" sx={{ opacity: 0.8 }}>
+              这是页脚
+            </Typography>
+          </Box>
+          
+          <Box sx={{ 
+            height: 1, 
+            bgcolor: 'white', 
+            opacity: 0.1, 
+            mb: 6 
+          }}></Box>
+          
+          <Typography variant="body2" align="center" paragraph>
+            © {new Date().getFullYear()} Test. 保留所有权利。
+          </Typography>
+          <Typography variant="caption" align="center" color="rgba(255,255,255,0.7)">
+            你可以在ClientLayout.tsx修改这个页脚
+          </Typography>
+        </Container>
+      </Box>
+    </ThemeProvider>
+  );
+};
+
+export default ClientLayout;

app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

app/layout.tsx

@@ -0,0 +1,29 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+// 禁用Google字体加载，避免构建错误
+
+// 导出元数据
+export const metadata: Metadata = {
+  title: "Test模板",
+  description: "这是一个模板，改编于LeonCloud官网（https://jjmm.ink/）",
+};
+
+// 导入客户端组件
+import ClientLayout from './components/ClientLayout';
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html>
+      <body>
+        <ClientLayout>
+          {children}
+        </ClientLayout>
+      </body>
+    </html>
+  );
+}

app/not-found.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import React from 'react';
+import { Container, Typography, Button, Box, useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { ArrowBack } from '@mui/icons-material';
+import Link from 'next/link';
+import ClientLayout from './components/ClientLayout';
+
+const NotFoundPage: React.FC = () => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isMedium = useMediaQuery(theme.breakpoints.down('md'));
+
+  return (
+    <Container maxWidth="md" sx={{ py: { xs: 8, md: 16 }, textAlign: 'center' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: '60vh',
+          gap: { xs: 4, md: 6 },
+        }}
+      >
+        {/* 404 大号数字 */}
+        <Typography
+          variant={isMobile ? 'h1' : 'h1'}
+          component="h1"
+          sx={{
+            fontWeight: 700,
+            fontSize: isMobile ? '5rem' : isMedium ? '8rem' : '10rem',
+            color: theme.palette.primary.main,
+            opacity: 0.8,
+            lineHeight: 1,
+            letterSpacing: '-0.05em',
+            textShadow: '2px 2px 4px rgba(0,0,0,0.1)',
+          }}
+        >
+          404
+        </Typography>
+
+        {/* 错误标题 */}
+        <Typography
+          variant={isMobile ? 'h5' : 'h4'}
+          component="h2"
+          sx={{
+            fontWeight: 600,
+            color: theme.palette.text.primary,
+            mb: 2,
+          }}
+        >
+          页面未找到
+        </Typography>
+
+        {/* 错误描述 */}
+        <Typography
+          variant="body1"
+          sx={{
+            maxWidth: '600px',
+            color: theme.palette.text.secondary,
+            mb: 6,
+            fontSize: isMobile ? '1rem' : '1.125rem',
+          }}
+        >
+          抱歉，您访问的页面不存在或已被移除。请检查您的链接是否正确，或返回首页继续浏览。
+        </Typography>
+
+        {/* 返回首页按钮 */}
+        <Button
+          component={Link}
+          href="/"
+          variant="contained"
+          startIcon={<ArrowBack />}
+          sx={{
+            px: { xs: 4, md: 6 },
+            py: { xs: 1.5, md: 2 },
+            borderRadius: '9999px',
+            fontSize: { xs: '0.9rem', md: '1rem' },
+            fontWeight: 600,
+            textTransform: 'none',
+            transition: 'all 0.3s ease',
+            '&:hover': {
+              transform: 'translateY(-2px)',
+              boxShadow: '0 10px 20px rgba(0,0,0,0.1)',
+            },
+          }}
+        >
+          返回首页
+        </Button>
+      </Box>
+    </Container>
+  );
+};
+
+export default NotFoundPage;

app/page.tsx

@@ -0,0 +1,20 @@
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { Container } from '@mui/material';
+
+export default function Home() {
+  return (
+    <div>
+      <Container maxWidth="md" sx={{ py: { xs: 7, md: 16 }, textAlign: 'center' }}>
+      <Box sx={{ width: '100%', maxWidth: 500 }}>
+        <Typography variant='h1'>
+          这是主页
+        </Typography><br />
+        <Typography>
+          这个模板主要是mui库，官网：https://mui.com/material-ui/
+        </Typography>
+      </Box>
+      </Container>
+    </div>
+  )
+}

app/test/page.tsx

@@ -0,0 +1,20 @@
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { Container } from '@mui/material';
+
+export default function Test() {
+  return (
+    <div>
+      <Container maxWidth="md" sx={{ py: { xs: 7, md: 16 }, textAlign: 'center' }}>
+      <Box sx={{ width: '100%', maxWidth: 500 }}>
+        <Typography variant='h1'>
+          这是一个测试页面
+        </Typography><br />
+        <Typography>
+          这个测试页面位于<code>/test</code>
+        </Typography>
+      </Box>
+      </Container>
+    </div>
+  )
+}

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  "output": "export",
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "leon_official",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "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/lab": "^7.0.1-beta.19",
+    "@mui/material": "^7.3.5",
+    "next": "16.0.3",
+    "react": "19.2.0",
+    "react-dom": "19.2.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}