✨ Landing page

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>
-      <Typography paragraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        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>
-      <Typography paragraph>
-        Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
-        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>
+    <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>
+            欢迎来到 SmartSheep Studio 的官方网站！在这里了解，订阅，跟踪我们的最新消息。
+            接触我们最大的官方社区，并且尝试最新产品，参与各种活动，提供反馈，让我们更好的服务您。
+          </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>
+            我们是一群充满活力、对开源充满热情的开发者。成立于 2019 年。自那年起我们一直在开发让人喜欢的开源软件。
+            在我们这里，“取之于开源，用之于开源” 不仅是原则，更是我们信仰的座右铭。
+          </Typography>
+        </Grid>
+      </Grid>
     </Container>
   );
 }