import { Section } from '@/components/Section/Section'
import { Container } from '@/components/Container/Container'
import { Title } from '@/components/Title/Title'
import { Row } from '@/components/Flex/Row'
import { Col } from '@/components/Flex/Col'

export default function Custom404() {
  return (
    <>
      <Section>
        <Container>
          <Title title={"Seite nicht gefunden"} />

          <p>
            Error <strong>404</strong>: Die von Ihnen angeforderte Seite existiert leider nicht.
          </p>

            <Title title={"Mögliche Gründe"} size={"sm"} fontStyle={"sans-serif"}/>

            <ul>
              <li>Die URL wurde falsch eingegeben.</li>
              <li>Die Seite wurde verschoben oder entfernt.</li>
              <li>Der Link ist veraltet.</li>
            </ul>

        </Container>
      </Section>
      <Section backgroundColor={"off-white"}>
        <Container>
          <Row>
            <Col>
              <p>
                Glorreicher heiliger Antonius, du hast die göttliche Macht ausgeübt,
                verlorene Dinge wiederzufinden. Hilf uns, die Gnade Gottes
                wiederzuerlangen und mach mich stark im Dienst an Gott und an den
                Tugenden. Lass&apos; mich das Verlorene wiederfinden und zeige mir so
                deine Güte.
              </p>
            </Col>
            <Col>
              <></>
            </Col>
          </Row>

        </Container>
      </Section>
    </>
  )
}