feat: moving content around, added DividerBox

Author: TimPietrusky

src/components/boxes.tsx

@@ -1,4 +1,4 @@
-import { Paper, PaperProps } from "@mui/material";
+import { Divider, DividerProps, Paper, PaperProps } from "@mui/material";
 import { styled } from "@mui/material/styles";
 
 export const SectionBox = styled(Paper)<PaperProps>(({ theme }) => ({
@@ -20,3 +20,10 @@ export const HighlightBox = styled(Paper)<PaperProps>(({ theme }) => ({
  borderImage: `linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%)`,
  borderImageSlice: 1,
 }));
+
+export const DividerBox = styled(Divider)<DividerProps>(({ theme }) => ({
+ marginTop: 20,
+ marginBottom: 20,
+ background: "transparent",
+ border: "none",
+}));

src/components/example-components.tsx

@@ -1,15 +1,23 @@
-import { Typography } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 import Huggingface from "./huggingface/huggingface";
 import { SectionBox } from "./boxes";
 
 export default function ExampleComponents() {
  return (
  <>
  <SectionBox>
- <Typography component="h2" variant="h3" sx={{ textAlign: "center" }}>
- Example Components
- </Typography>
+ <Stack spacing={2}>
+ <Typography component="h2" variant="h3" sx={{ textAlign: "center" }}>
+ Components
+ </Typography>
+
+ <Typography variant="body1">
+ Unsure where to begin? Our pre-built components are at your service,
+ offering a jumpstart for your ML demo.
+ </Typography>
+ </Stack>
  </SectionBox>
+
  <Huggingface />
  </>
  );

src/components/getting-started.tsx

@@ -24,16 +24,8 @@ import { HighlightBox } from "./boxes";
 export default function GettingStarted() {
  return (
  <>
- <Stack sx={{ alignItems: "center", mb: 2 }}>
- <HighlightBox>
- <Typography variant="h5" component="p">
- Run your ML demo with ease in a Next.js/React environment
- </Typography>
- </HighlightBox>
- </Stack>
-
  <Grid container spacing={2}>
- <Grid item sm={8} lg={6}>
+ <Grid item sm={8} lg={6} sx={{ justifyContent: "center" }}>
  <Paper sx={{ p: 2 }}>
  <List disablePadding>
  <ListSubheader>Features</ListSubheader>
@@ -98,8 +90,7 @@ export default function GettingStarted() {
  <SyncIcon />
  </ListItemIcon>
  <ListItemText>
- Sync your repo on GitHub with your 🤗 Space via a GitHub
- Action
+ Sync your repo on GitHub with your 🤗 Space
  </ListItemText>
  </ListItem>
  <ListItem>
@@ -115,40 +106,28 @@ export default function GettingStarted() {
  <Grid item sm={4} lg={3}>
  <Stack gap={2}>
  <Paper sx={{ p: 2 }}>
- <Stack gap={2}>
- <Button
- startIcon={<ContentCopyIcon />}
- variant="contained"
- href="https://huggingface.co/spaces/failfast/nextjs-docker-starter?duplicate=true"
- target="_blank"
- rel="noopener"
- >
- Duplicate space
- </Button>
-
- <Button
- href="https://github.com/failfa-st/nextjs-docker-starter"
+ <Typography variant="body1">
+ Explore our{" "}
+ <Link
+ href="https://huggingface.co/spaces/failfast/nextjs-docker-starter/blob/main/README.md"
  target="_blank"
  rel="noopener"
  >
- Contribute on GitHub
- </Button>
- </Stack>
- </Paper>
-
- <Paper sx={{ p: 2 }}>
- <Typography variant="body1">
- Get started with the{" "}
- <Link href="https://huggingface.co/spaces/failfast/nextjs-docker-starter/blob/main/README.md">
  README
- </Link>
+ </Link>{" "}
+ for a comprehensive guide on local development, Docker
+ utilization, secret management, and GitHub-based Space control.
  </Typography>
  </Paper>
 
  <Paper sx={{ p: 2 }}>
  <Typography variant="body1">
  Something missing?{" "}
- <Link href="https://huggingface.co/spaces/failfast/nextjs-docker-starter/discussions">
+ <Link
+ href="https://huggingface.co/spaces/failfast/nextjs-docker-starter/discussions"
+ target="_blank"
+ rel="noopener"
+ >
  Please let us know!
  </Link>
  </Typography>

src/components/title.tsx

@@ -1,18 +1,19 @@
-import { Link, Typography } from "@mui/material";
-import { Box } from "@mui/material";
+import { Button, Link, Paper, Stack, Typography } from "@mui/material";
+import { HighlightBox } from "./boxes";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 
 export default function Title() {
  return (
- <Box
+ <Stack
+ spacing={4}
  sx={{
- display: "flex",
  justifyContent: "center",
  alignItems: "center",
- minHeight: "20vh",
+ minHeight: "40vh",
+ p: 4,
  }}
  >
- <Typography variant="h2" component="h1">
- {" "}
+ <Typography variant="h1" component="h1">
  <Link
  href="https://nextjs.org"
  target="_blank"
@@ -29,6 +30,33 @@ export default function Title() {
  Spaces
  </Link>
  </Typography>
- </Box>
+
+ <HighlightBox>
+ <Typography variant="h5" component="p">
+ Run your ML demo with ease in a Next.js/React environment
+ </Typography>
+ </HighlightBox>
+
+ <Stack gap={2} direction="row">
+ <Button
+ startIcon={<ContentCopyIcon />}
+ variant="contained"
+ href="https://huggingface.co/spaces/failfast/nextjs-docker-starter?duplicate=true"
+ target="_blank"
+ rel="noopener"
+ color="secondary"
+ >
+ Duplicate space
+ </Button>
+
+ <Button
+ href="https://github.com/failfa-st/nextjs-docker-starter"
+ target="_blank"
+ rel="noopener"
+ >
+ Contribute on GitHub
+ </Button>
+ </Stack>
+ </Stack>
  );
 }

src/lib/theme.ts

@@ -41,12 +41,18 @@ const theme = extendTheme({
  },
  typography: {
  ...roboto.style,
+ h1: {
+ fontSize: "5.25em",
+ },
  },
  components: {
  MuiLink: {
  styleOverrides: {
  root: {
  textDecoration: "none",
+ ":hover": {
+ textDecoration: "underline",
+ },
  },
  },
  },

src/pages/index.tsx

@@ -6,6 +6,7 @@ import Huggingface from "@/components/huggingface/huggingface";
 import GettingStarted from "@/components/getting-started";
 import ExampleComponents from "@/components/example-components";
 import { Stack } from "@mui/material";
+import { DividerBox } from "@/components/boxes"
 
 export default function Home() {
  return (
@@ -22,6 +23,8 @@ export default function Home() {
 
  <GettingStarted />
 
+ <DividerBox />
+
  <ExampleComponents />
  </Stack>
  </Container>