import React from "react";

import { ConnectWithUs } from "@/components/ConnectWithUs";
import { DefaultLayout } from "@/components/DefaultLayout";
import { EmailSignup } from "@/components/EmailSignup";
import { Image } from "@/components/Image";

import Content from "../../content/about/index.mdx";

import styles from "./index.module.css";

export default function AboutUs() {
  return (
    <>
      <div className={styles.titleContainer}>
        <h1 className={styles.title}>About Us!</h1>
        <Image src="/about/codey.svg" className={styles.codey} />
      </div>
      <div className={styles.content}>
        <Content />
      </div>
      <DefaultLayout>
        <ConnectWithUs />
        <EmailSignup />
      </DefaultLayout>
    </>
  );
}

AboutUs.Layout = function AboutUsLayout(props: { children: React.ReactNode }) {
  return <div className={styles.page}>{props.children}</div>;
};