Use ConnectWithUs and EmailSignup components on the /about page (#93)

Reviewed-on: www/www-new#93
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
amy-random-shapes
Aditya Thakral 1 year ago committed by Amy
parent ed3c3939e5
commit 1ff1c7f78d
  1. 1
      components/DefaultLayout.module.css
  2. 31
      pages/about/index.module.css
  3. 30
      pages/about/index.tsx

@ -2,5 +2,4 @@
margin: 0 auto;
max-width: calc(800rem / 16);
padding: 0 calc(20rem / 16);
padding-bottom: calc(20rem / 16);
}

@ -1,3 +1,7 @@
.page {
margin-bottom: calc(20rem / 16);
}
.title {
height: calc(80rem / 16);
margin-top: auto;
@ -31,33 +35,6 @@
height: calc(400rem / 16);
}
/*for temp mailing list components*/
.mailingList {
margin: calc(4rem / 16) auto;
max-width: calc(806rem / 16);
}
.mailingList form > * {
margin: calc(0.5rem / 16) auto;
}
.mailingList form input {
border-radius: calc(16rem / 16);
padding: calc(8rem / 16) 0;
}
.mailingList form input[type="text"] {
/*temporary hard coding of font*/
font-family: Poppins;
font-style: normal;
padding: 0 calc(8rem / 16);
}
.mailingList h2 {
color: var(--blue-2);
}
/*for temp mailing list components*/
@media only screen and (max-width: calc(768rem / 16)) {
.titleContainer {
display: flex;

@ -2,8 +2,9 @@ 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";
import { ConnectWithUs } from "components/ConnectWithUs";
import { EmailSignup } from "components/EmailSignup";
import { DefaultLayout } from "components/DefaultLayout";
export default function AboutUs() {
return (
@ -15,29 +16,14 @@ export default function AboutUs() {
<div className={styles.content}>
<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>
<DefaultLayout>
<ConnectWithUs />
<EmailSignup />
</DefaultLayout>
</>
);
}
AboutUs.Layout = function AboutUsLayout(props: { children: React.ReactNode }) {
return <div>{props.children}</div>;
return <div className={styles.page}>{props.children}</div>;
};

Loading…
Cancel
Save