support.tsx

import {
  Accordion,
  AccordionButton,
  AccordionIcon,
  AccordionItem,
  AccordionPanel,
  Box,
  Container,
  Heading,
  Link,
  Spacer,
  VStack,
} from "@chakra-ui/react";

export function meta() {
  return [
    {
      title: "Support - Car Crushers",
    },
  ];
}

export default function () {
  return (
    <Container
      borderRadius="12px"
      borderWidth="1px"
      maxW="container.md"
      mt="8vh"
    >
      <VStack w="100%" spacing={3}>
        <Spacer />
        <Heading alignSelf="start" pl="2.5%" size="md">
          What do you need help with?
        </Heading>
        <Spacer />
        <Accordion textAlign="left" w="100%">
          <AccordionItem>
            <h2>
              <AccordionButton>
                <Box as="span" flex="1" textAlign="left">
                  I want to report someone exploiting
                </Box>
                <AccordionIcon />
              </AccordionButton>
            </h2>
            <AccordionPanel>
              To report a player,{" "}
              <Link color="#646cff" href="/report">
                head to our report page.
              </Link>
            </AccordionPanel>
          </AccordionItem>
          <AccordionItem>
            <h2>
              <AccordionButton>
                <Box as="span" flex="1" textAlign="left">
                  I want a data rollback or transfer
                </Box>
                <AccordionIcon />
              </AccordionButton>
            </h2>
            <AccordionPanel>
              Please join our{" "}
              <Link
                color="#646cff"
                href="https://discord.com/invite/carcrushers"
              >
                Discord server
              </Link>{" "}
              and contact ModMail.
            </AccordionPanel>
          </AccordionItem>
          <AccordionItem>
            <h2>
              <AccordionButton>
                <Box as="span" flex="1" textAlign="left">
                  I want to appeal my ban
                </Box>
                <AccordionIcon />
              </AccordionButton>
            </h2>
            <AccordionPanel>
              If you were banned from our Discord server,{" "}
              <Link color="#646cff" href="/appeals">
                use this form
              </Link>
              . If you were banned from the game,{" "}
              <Link
                color="#646cff"
                href="https://www.roblox.com/games/527921900/Car-Crushers-2-Appeals"
              >
                fill out the form here
              </Link>
              .
            </AccordionPanel>
          </AccordionItem>
          <AccordionItem>
            <h2>
              <AccordionButton>
                <Box as="span" flex="1" textAlign="left">
                  I want to apply for a staff position
                </Box>
                <AccordionIcon />
              </AccordionButton>
            </h2>
            <AccordionPanel>
              Most staff position openings will be announced in our{" "}
              <Link
                color="#646cff"
                href="https://discord.com/invite/carcrushers"
              >
                Discord server
              </Link>
              . Forum mod openings are generally announced on the forum.
            </AccordionPanel>
          </AccordionItem>
          <AccordionItem>
            <h2>
              <AccordionButton>
                <Box as="span" flex="1" textAlign="left">
                  My problem is not listed
                </Box>
                <AccordionIcon />
              </AccordionButton>
            </h2>
            <AccordionPanel>
              Join our{" "}
              <Link
                color="#646cff"
                href="https://discord.com/invite/carcrushers"
              >
                Discord server
              </Link>{" "}
              and open a ticket with ModMail.
            </AccordionPanel>
          </AccordionItem>
        </Accordion>
        <Spacer />
        <Spacer />
      </VStack>
    </Container>
  );
}