import React from "react";
import { Image } from "../../components/Image";
import Content from "../../content/about/index.mdx";
import styles from "./index.module.css";
import { Button } from "../../components/Button";
import { SocialLinks } from "../../components/SocialLinks";

export default function AboutUs() {
  return (
    <div>
      <div className={styles.flexBoxTitle}>
        <h1 className={styles.title}>About Us!</h1>
      </div>
      <div className={styles.flexBox}>
        <Image src="/about/codey.svg" className={styles.codey} />
      </div>
      <div className={styles.headings}>
        <div className={styles.text}>
          <Content />
        </div>
      </div>
      <div className={styles.mailingList}>
        <h2>Connect with us!</h2>
        <p>
          Drop by any of our social media outlets to learn more about us, keep
          up-to-date with our upcoming events, or to chat with our members!
        </p>
        <SocialLinks color="gradient" size="big" />
        <p>Send feedback through our Feedback Form </p>
        <h2>Join our Mailing List!</h2>
        <form action="">
          <div>
            <input type="text" placeholder="Full Name*" required />
          </div>
          <div>
            <input type="text" placeholder="Email*" required />
          </div>
          <Button>Subscribe</Button>
        </form>
      </div>
    </div>
  );
}

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