About Us page #70
|
@ -1,28 +1,21 @@
|
|||
.title {
|
||||
color: var(--purple-2);
|
||||
font-size: 48px;
|
||||
margin: 2rem auto;
|
||||
max-width: calc(806rem / 16);
|
||||
}
|
||||
|
||||
.headings {
|
||||
.headings h2 {
|
||||
color: var(--blue-2);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.headings li {
|
||||
.text,
|
||||
.text li {
|
||||
font-size: 16px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 2rem auto;
|
||||
max-width: calc(806rem / 16);
|
||||
}
|
||||
|
||||
.divs {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
@ -38,10 +31,6 @@
|
|||
background-color: #e1eefa;
|
||||
} */
|
||||
|
||||
.content {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.flexBox {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
@ -63,10 +52,10 @@
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
/*for temp mailing list components*/
|
||||
.mailingList {
|
||||
margin: 4rem auto;
|
||||
max-width: calc(806rem / 16);
|
||||
/* padding: 0 calc(60rem / 16); */
|
||||
}
|
||||
|
||||
.mailingList form > * {
|
||||
|
|
|
@ -8,50 +8,41 @@ import { SocialLinks } from "../../components/SocialLinks";
|
|||
|
||||
export default function AboutUs() {
|
||||
return (
|
||||
<MDXProvider components={{ h2: H2, p: Text, div: Div }}>
|
||||
<DefaultLayout>
|
||||
<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.content}>
|
||||
<div className={styles.headings}>
|
||||
<div className={styles.headings}>
|
||||
<div className={styles.text}>
|
||||
<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>
|
||||
</div>
|
||||
</MDXProvider>
|
||||
<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>
|
||||
</DefaultLayout>
|
||||
);
|
||||
}
|
||||
|
||||
/*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.divs} />;
|
||||
function DefaultLayout(props: { children: React.ReactNode }) {
|
||||
return <div>{props.children}</div>;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue