60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import React, { HTMLAttributes } from "react";
|
|
import { MDXProvider } from "@mdx-js/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 (
|
|
<MDXProvider components={{ h2: H2, p: Text, div: Div }}>
|
|
<div>
|
|
<h1 className={styles.title}>About Us!</h1>
|
|
</div>
|
|
<div>
|
|
<Image src="/about/codey.svg" className={styles.codey} />
|
|
</div>
|
|
<div className={styles.headings}>
|
|
<Content />
|
|
</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>
|
|
</MDXProvider>
|
|
);
|
|
}
|
|
|
|
/*to be replaced by css rules in about-us.module.css*/
|
|
function H2(props: HTMLAttributes<HTMLHeadingElement>) {
|
|
return <h2 {...props} className={styles.headings} />;
|
|
}
|
|
|
|
function Text(props: HTMLAttributes<HTMLParagraphElement>) {
|
|
return <p {...props} className={styles.text} />;
|
|
}
|
|
|
|
function Div(props: HTMLAttributes<HTMLHeadingElement>) {
|
|
return <div {...props} className={styles.bubble} />;
|
|
}
|
|
|
|
// function AboutUsCodey() {
|
|
// return <Image src="images/about/codey.svg" className={styles.codey} />;
|
|
// }
|