feat: moving content around, added DividerBox

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,4 +1,4 @@
-import { Typography } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 import Huggingface from "./huggingface/huggingface";
 import { SectionBox } from "./boxes";
 
@@ -6,10 +6,18 @@ 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>