app/consts.ts

@@ -1 +0,0 @@
-export const SITE_NAME = "Goatshed";

app/consts.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import TwitterIcon from "@mui/icons-material/Twitter";
+import CoffeeIcon from "@mui/icons-material/Coffee";
+
+export interface RelatedAccount {
+  icon: ReactNode;
+  platform: string;
+  accountName: string;
+  link: string;
+}
+
+export const SITE_NAME = "Goatshed";
+
+export const RELATED_ACCOUNTS: RelatedAccount[] = [
+  { icon: <GitHubIcon />, platform: "GitHub", accountName: "@smartsheep-hq", link: "https://github.com/smartsheep-hq" },
+  { icon: <TwitterIcon />, platform: "Twitter", accountName: "@littlesheepovo", link: "https://twitter.com/littlesheepovo" },
+  { icon: <CoffeeIcon />, platform: "Ko-fi", accountName: "@littlesheep2code", link: "https://ko-fi.com/littlesheep2code" },
+];

app/page.tsx

@@ -1,35 +1,74 @@
-import { Container, Typography } from "@mui/material";
+import {
+  Avatar,
+  Box,
+  Button,
+  Card, colors,
+  Container,
+  Grid,
+  List,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemText,
+  Typography
+} from "@mui/material";
+import { RELATED_ACCOUNTS } from "@/app/consts";
+import Image from "next/image";
+import Link from "next/link";
 
 export default function Home() {
   return (
-    <Container>
+    <Container sx={{ scrollBehavior: "smooth", px: 5 }}>
+      <Grid
+        container
+        id="introduce"
+        alignItems="center"
+        sx={{ height: "calc(100vh - 64px)" }}
+      >
+        <Grid item xs={12} md={6} sx={{ textAlign: { xs: "center", md: "initial" } }}>
+          <Typography variant="h3" component="h1" gutterBottom>你好呀 👋</Typography>
           <Typography paragraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            欢迎来到 SmartSheep Studio 的官方网站！在这里了解，订阅，跟踪我们的最新消息。
-        tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
+            接触我们最大的官方社区，并且尝试最新产品，参与各种活动，提供反馈，让我们更好的服务您。
-        enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
-        imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
-        Convallis convallis tellus id interdum velit laoreet id donec ultrices.
-        Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
-        adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra
-        nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum
-        leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis
-        feugiat vivamus at augue. At augue eget arcu dictum varius duis at
-        consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
-        sapien faucibus et molestie ac.
           </Typography>
+          <Button variant="contained" href="#about-us" size="large">探索更多</Button>
+        </Grid>
+        <Grid item xs={12} md={6} sx={{ display: "flex", justifyContent: "end" }}>
+          <Box>
+            <Image src="smartsheep.svg" alt="Logo" width={256} height={256} />
+          </Box>
+        </Grid>
+      </Grid>
+
+      <Grid
+        container
+        id="about-us"
+        alignItems="center"
+        sx={{ height: "calc(100vh - 64px)" }}
+      >
+        <Grid item xs={12} md={6} sx={{ display: "flex", justifyContent: "start" }}>
+          <Card sx={{ flexGrow: 1, mr: { xs: 0, md: 8 } }}>
+            <List sx={{ width: "100%", bgcolor: "background.paper" }}>
+              {RELATED_ACCOUNTS.map((item, idx) => (
+                <Link key={idx} href={item.link} target="_blank" passHref>
+                  <ListItemButton>
+                    <ListItemAvatar>
+                      <Avatar sx={{ bgcolor: colors.blueGrey[700] }}>{item.icon}</Avatar>
+                    </ListItemAvatar>
+                    <ListItemText primary={item.platform} secondary={item.accountName} />
+                  </ListItemButton>
+                </Link>
+              ))}
+            </List>
+          </Card>
+        </Grid>
+        <Grid item xs={12} md={6} sx={{ textAlign: { xs: "center", md: "initial" } }}>
+          <Typography variant="h3" component="h1" gutterBottom>关于我们</Typography>
           <Typography paragraph>
-        Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
+            我们是一群充满活力、对开源充满热情的开发者。成立于 2019 年。自那年起我们一直在开发让人喜欢的开源软件。
-        eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
+            在我们这里，“取之于开源，用之于开源” 不仅是原则，更是我们信仰的座右铭。
-        neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
-        tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis
-        sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi
-        tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit
-        gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem
-        et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis
-        tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
-        eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
-        posuere sollicitudin aliquam ultrices sagittis orci a.
           </Typography>
+        </Grid>
+      </Grid>
     </Container>
   );
 }

components/AppShell.tsx

@@ -64,7 +64,6 @@ const AppMain = styled("main", { shouldForwardProp: (prop) => prop !== "open" })
 
   return ({
     flexGrow: 1,
-    padding: theme.spacing(3),
     transition: theme.transitions.create("margin", {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen
@@ -92,19 +91,19 @@ export default function AppShell({ children }: {
 
   useEffect(() => {
     documentWindow = window;
-  })
+  });
 
   return (
-    <Box sx={{ display: "flex" }}>
+    <>
       <HideOnScroll window={() => documentWindow}>
-        <ShellAppBar open={open}>
+        <ShellAppBar open={open} position="fixed">
-          <Toolbar>
+          <Toolbar sx={{ height: 64 }}>
             <IconButton
               size="large"
               edge="start"
               color="inherit"
               aria-label="menu"
-              sx={{ mr: 2 }}
+              sx={{ ml: isMobile ? 0.5 : 0, mr: 2 }}
             >
               <Image src="smartsheep.svg" alt="Logo" width={32} height={32} />
             </IconButton>
@@ -127,12 +126,15 @@ export default function AppShell({ children }: {
         </ShellAppBar>
       </HideOnScroll>
 
+      <Box sx={{ display: "flex" }}>
         <AppMain open={open}>
           <AppNavigationHeader />
+
           {children}
         </AppMain>
 
         <NavigationDrawer open={open} onClose={() => setOpen(false)} />
       </Box>
+    </>
   );
 }

components/NavigationDrawer.tsx

@@ -18,14 +18,27 @@ import {
   useMediaQuery
 } from "@mui/material";
 import { theme } from "@/app/theme";
+import { ReactNode } from "react";
+import HomeIcon from "@mui/icons-material/Home";
+import Link from "next/link";
+
+export interface NavigationItem {
+  icon: ReactNode;
+  title: string;
+  link: string;
+}
 
 export const DRAWER_WIDTH = 320;
+export const NAVIGATION_ITEMS: NavigationItem[] = [
+  { icon: <HomeIcon />, title: "首页", link: "/" }
+];
 
 export const AppNavigationHeader = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   padding: theme.spacing(0, 1),
   justifyContent: "flex-start",
+  height: 64,
   ...theme.mixins.toolbar
 }));
 
@@ -45,28 +58,13 @@ export function AppNavigation({ showClose, onClose }: {
       </AppNavigationHeader>
       <Divider />
       <List>
-        {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
+        {NAVIGATION_ITEMS.map((item, idx) => (
-          <ListItem key={text} disablePadding>
+          <Link key={idx} href={item.link} passHref>
             <ListItemButton>
-              <ListItemIcon>
+              <ListItemIcon>{item.icon}</ListItemIcon>
-                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+              <ListItemText primary={item.title} />
-              </ListItemIcon>
-              <ListItemText primary={text} />
             </ListItemButton>
-          </ListItem>
+          </Link>
-        ))}
-      </List>
-      <Divider />
-      <List>
-        {["All mail", "Trash", "Spam"].map((text, index) => (
-          <ListItem key={text} disablePadding>
-            <ListItemButton>
-              <ListItemIcon>
-                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-              </ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItemButton>
-          </ListItem>
         ))}
       </List>
     </>