improve landing

src/activitys/LandingActivity/components/FAQ.tsx

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { alpha, styled, SxProps } from "@mui/material/styles";
+import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
+import MuiAccordion, { AccordionProps } from "@mui/material/Accordion";
+import MuiAccordionSummary, { AccordionSummaryProps } from "@mui/material/AccordionSummary";
+import MuiAccordionDetails from "@mui/material/AccordionDetails";
+import Typography from "@mui/material/Typography";
+import { Markup } from "@Components/Markdown";
+import { Box } from "@mui/material";
+
+const Accordion = styled((props: AccordionProps) => <MuiAccordion disableGutters elevation={0} square {...props} />)(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+
+  backgroundColor: alpha(theme.palette.background.paper, 0.6),
+  backdropFilter: "saturate(180%) blur(20px)",
+  "&:not(:last-child)": {
+    borderBottom: 0,
+  },
+  "&:last-child": {
+    borderRadius: "0px 0px 8px 8px",
+  },
+  "&:first-child": {
+    borderRadius: "8px 8px 0px 0px",
+  },
+  "&::before": {
+    display: "none",
+  },
+}));
+
+const AccordionSummary = styled((props: AccordionSummaryProps) => (
+  <MuiAccordionSummary expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: "0.9rem" }} />} {...props} />
+))(({ theme }) => ({
+  backgroundColor: "none",
+
+  flexDirection: "row-reverse",
+  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
+    transform: "rotate(90deg)",
+  },
+  "& .MuiAccordionSummary-content": {
+    marginLeft: theme.spacing(1),
+  },
+}));
+
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+  padding: theme.spacing(2),
+  backgroundColor: "none",
+}));
+
+interface FAQItem {
+  q: string;
+  a: string;
+}
+interface FAQProps {
+  items: FAQItem[];
+  sx?: SxProps;
+}
+
+const FAQ = (props: FAQProps) => {
+  const [expanded, setExpanded] = React.useState<number | false>(0);
+
+  const handleChange = (panel: number) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+    setExpanded(newExpanded ? panel : false);
+  };
+
+  return (
+    <Box sx={props.sx}>
+      {props.items.map((item, index) => (
+        <Accordion expanded={expanded === index} onChange={handleChange(index)}>
+          <AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
+            <Typography>{item.q}</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Typography component={Markup}>{item.a}</Typography>
+          </AccordionDetails>
+        </Accordion>
+      ))}
+    </Box>
+  );
+};
+
+export { FAQ };

src/activitys/LandingActivity/components/GridCard.tsx

@@ -0,0 +1,46 @@
+import { useTheme } from "@Hooks/useTheme";
+import { alpha } from "@mui/material";
+import Card from "@mui/material/Card";
+import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Grid";
+
+interface GridCardProps {
+  title?: string;
+  description?: string;
+}
+
+const GridCard = (props: GridCardProps) => {
+  const { theme } = useTheme();
+
+  return (
+    <Grid
+      item
+      xs={12}
+      sm={6}
+      md={4}
+      lg={5}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Card
+        sx={{
+          p: 2,
+          height: "100%",
+          backgroundImage: "none",
+          backgroundColor: alpha(theme.palette.background.paper, 0.6),
+          backdropFilter: "saturate(180%) blur(20px)",
+          outlineOffset: -1,
+          outline: `1px solid ${theme.palette.divider} !important`,
+        }}
+      >
+        <Typography sx={{ color: "text.secondary", mb: 1.5 }}>{props.title}</Typography>
+        <Typography variant="body2">{props.description}</Typography>
+      </Card>
+    </Grid>
+  );
+};
+
+export { GridCard, GridCardProps };

src/activitys/LandingActivity/components/GridImage.tsx

@@ -0,0 +1,55 @@
+import { Image } from "@Components/dapi/Image";
+import { useTheme } from "@Hooks/useTheme";
+import { alpha } from "@mui/material";
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
+
+interface GridImageProps {
+  src?: string;
+  alt?: string;
+}
+
+const GridImage = (props: GridImageProps) => {
+  const { theme } = useTheme();
+
+  return (
+    <Grid
+      item
+      xs={6}
+      sm={6}
+      md={4}
+      lg={4}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Card
+        sx={{
+          p: 2,
+          height: "100%",
+          backgroundImage: "none",
+          backgroundColor: alpha(theme.palette.background.paper, 0.6),
+          backdropFilter: "saturate(180%) blur(20px)",
+          borderRadius: theme.shape.borderRadius / theme.shape.borderRadius,
+          outlineOffset: -1,
+          outline: `1px solid ${theme.palette.divider} !important`,
+        }}
+      >
+        <Image
+          noOutline
+          alt={props.alt}
+          src={props.src}
+          sx={{
+            width: "100%",
+            height: "100%",
+            borderRadius: theme.shape.borderRadius / theme.shape.borderRadius,
+          }}
+        />
+      </Card>
+    </Grid>
+  );
+};
+
+export { GridImage, GridImageProps };

src/activitys/LandingActivity/components/LandingToolbar.tsx

@@ -0,0 +1,165 @@
+import * as React from "react";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import Menu from "@mui/material/Menu";
+import MenuIcon from "@mui/icons-material/Menu";
+import Container from "@mui/material/Container";
+import Avatar from "@mui/material/Avatar";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
+import MenuItem from "@mui/material/MenuItem";
+import CodeRoundedIcon from "@mui/icons-material/CodeRounded";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import { os } from "@Native/Os";
+import { StyledMenu } from "@Components/DropdownButton";
+import { useTheme } from "@Hooks/useTheme";
+import { alpha } from "@mui/material";
+import { view } from "@Native/View";
+
+interface LandingPageMenuItem {
+  title: string;
+  onClick?: React.MouseEventHandler<HTMLLIElement | HTMLButtonElement>;
+}
+
+interface LandigToolbarProps {
+  menuItems: LandingPageMenuItem[];
+}
+
+function LandingToolbar(props: LandigToolbarProps) {
+  const { theme } = useTheme();
+  const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
+
+  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElNav(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  return (
+    <AppBar
+      position="static"
+      sx={{ paddingTop: `${view.getWindowTopInsets()}px`, backgroundImage: "none", backgroundColor: "transparent", boxShadow: "none" }}
+    >
+      <Container maxWidth="xl">
+        <Toolbar disableGutters>
+          <CodeRoundedIcon sx={{ display: { xs: "none", md: "flex" }, mr: 1 }} />
+          <Typography
+            variant="h6"
+            noWrap
+            component="a"
+            href="#app-bar-with-responsive-menu"
+            sx={{
+              mr: 2,
+              display: { xs: "none", md: "flex" },
+              fontFamily: "monospace",
+              fontWeight: 700,
+              letterSpacing: ".3rem",
+              color: "inherit",
+              textDecoration: "none",
+            }}
+          >
+            MMRL
+          </Typography>
+
+          <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
+            <IconButton
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleOpenNavMenu}
+              color="inherit"
+            >
+              <MenuIcon />
+            </IconButton>
+            <StyledMenu
+              id="menu-appbar"
+              anchorEl={anchorElNav}
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "left",
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "left",
+              }}
+              open={Boolean(anchorElNav)}
+              onClose={handleCloseNavMenu}
+              sx={{
+                display: { xs: "block", md: "none" },
+                "& .MuiPaper-root": {
+                  backgroundColor: alpha(theme.palette.background.paper, 0.6),
+                  backdropFilter: "saturate(180%) blur(20px)",
+                  outlineOffset: -1,
+                  outline: `1px solid ${theme.palette.divider} !important`,
+                },
+              }}
+            >
+              {props.menuItems.map((menuItem) => (
+                <MenuItem
+                  key={menuItem.title}
+                  onClick={(e) => {
+                    handleCloseNavMenu();
+                    menuItem.onClick && menuItem.onClick(e);
+                  }}
+                >
+                  <Typography sx={{ textAlign: "center" }}>{menuItem.title}</Typography>
+                </MenuItem>
+              ))}
+            </StyledMenu>
+          </Box>
+          <CodeRoundedIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1 }} />
+          <Typography
+            variant="h5"
+            noWrap
+            component="a"
+            href="#app-bar-with-responsive-menu"
+            sx={{
+              mr: 2,
+              display: { xs: "flex", md: "none" },
+              flexGrow: 1,
+              fontFamily: "monospace",
+              fontWeight: 700,
+              letterSpacing: ".3rem",
+              color: "inherit",
+              textDecoration: "none",
+            }}
+          >
+            MMRL
+          </Typography>
+          <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
+            {props.menuItems.map((menuItem) => (
+              <Button
+                key={menuItem.title}
+                onClick={(e) => {
+                  handleCloseNavMenu();
+                  menuItem.onClick && menuItem.onClick(e);
+                }}
+                sx={{ my: 2, color: "white", display: "block" }}
+              >
+                {menuItem.title}
+              </Button>
+            ))}
+          </Box>
+          <Box sx={{ flexGrow: 0 }}>
+            <IconButton
+              onClick={() => {
+                os.openURL("https://github.com/DerGoogler/MMRL", "_blank");
+              }}
+              sx={{ p: 0 }}
+            >
+              <GitHubIcon />
+            </IconButton>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+}
+export { LandingToolbar };

src/activitys/LandingActivity/components/SectionHeader.tsx

@@ -0,0 +1,13 @@
+import { styled, Typography } from "@mui/material";
+
+const SectionHeader = styled(Typography)(({ theme }) => ({
+  marginTop: theme.spacing(8),
+  [theme.breakpoints.up("md")]: {
+    fontSize: "25px",
+  },
+
+  fontSize: "1.5rem",
+  textAlign: "center",
+}));
+
+export { SectionHeader };