import * as React from "react";
import Container from "@mui/material/Container";
import Box from "@mui/material/Box";
import Services from "~/components/Services";

export function meta() {
  return [
    { title: "Aetoskia Hideout" },
    {
      name: "description",
      content: "Welcome to Aetoskia's Hideout!",
    },
  ];
}

export default function Home() {
  return (
    <Container
      maxWidth={false}
    >
      <Box
        sx={{
          minHeight: "100vh",
          backgroundImage: "url('/header_sigil.png')",
          backgroundSize: "cover",
          backgroundRepeat: "no-repeat",
          backgroundPosition: "top center",
          display: "flex",
          flexDirection: "column",
        }}
      >
        <Box sx={{ flex: 1 }} />

        <Box sx={{ height: "60vh", overflowY: "auto" }}>
          <Services />
        </Box>
      </Box>
    </Container>
  );
}