using Image tag, changed about page route in Navbar, moved SocialLinks out of mdx file
This commit is contained in:
Linna Luo
parent
6a628b2c99
commit
aa7f1c11d5
|
|
@ -20,12 +20,12 @@ const menu: NavLink[] = [
|
|||
},
|
||||
{
|
||||
name: "About",
|
||||
route: "/about",
|
||||
route: "/about-us",
|
||||
submenu: [
|
||||
{
|
||||
name: "About Us",
|
||||
route: "/about/about-us",
|
||||
},
|
||||
// {
|
||||
// name: "About Us",
|
||||
// route: "/about/about-us",
|
||||
// },
|
||||
{
|
||||
name: "Meet the Team",
|
||||
route: "/about/team",
|
||||
|
|
|
|||
|
|
@ -57,16 +57,4 @@ Our office phone number is (519) 888-4567 x33870.
|
|||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
## Connect with us!
|
||||
|
||||
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!
|
||||
|
||||
<SocialLinks color="gradient" size="big" />
|
||||
|
||||
Send feedback through our Feedback Form
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
.title {
|
||||
color: var(--purple-2);
|
||||
font-size: 48px;
|
||||
position: relative;
|
||||
bottom: -160px;
|
||||
}
|
||||
|
||||
.headings {
|
||||
color: var(--blue-2);
|
||||
font-size: 24px;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.headings li {
|
||||
font-size: 16px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.title,
|
||||
.bubble > * {
|
||||
margin: 2rem auto;
|
||||
max-width: calc(806rem / 16);
|
||||
padding: 0 calc(60rem / 16);
|
||||
}
|
||||
|
||||
.bubble {
|
||||
padding: calc(48rem / 16) 0 calc(48rem / 16);
|
||||
margin: calc(16rem / 16) 0;
|
||||
}
|
||||
|
||||
/*box-sizing: border box*/
|
||||
.bubble:nth-child(odd) {
|
||||
background-color: #e1eefa;
|
||||
}
|
||||
|
||||
.codey {
|
||||
transform: rotate(1.91deg);
|
||||
position: relative;
|
||||
left: calc(1020rem / 16);
|
||||
margin-bottom: -280px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.mailingList {
|
||||
margin: 4rem auto;
|
||||
max-width: calc(806rem / 16);
|
||||
padding: 0 calc(60rem / 16);
|
||||
}
|
||||
|
||||
.mailingList form > * {
|
||||
margin: 0.5rem auto;
|
||||
}
|
||||
|
||||
.mailingList form input {
|
||||
border-radius: 16px;
|
||||
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);
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
import React, { HTMLAttributes } from "react";
|
||||
import { MDXProvider } from "@mdx-js/react";
|
||||
import { Image } from "../components/Image";
|
||||
import Content from "../content/about-us.mdx";
|
||||
import styles from "./about-us.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} />;
|
||||
// }
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<svg width="426" height="382" viewBox="0 0 426 382" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M113.558 10.8628C113.558 10.8628 129.8 18.9517 137.681 27.1402C148.899 38.7976 156.201 64.1977 156.201 64.1977L95.7251 76.7795C95.7251 76.7795 93.3614 50.4717 99.0044 35.1866C102.838 24.8021 113.558 10.8628 113.558 10.8628Z" fill="#5CAFF9"/>
|
||||
<path d="M116.672 26.4829C116.672 26.4829 128.173 31.4622 133.689 36.6325C141.541 43.9931 146.382 60.2906 146.382 60.2906L102.911 69.3346C102.911 69.3346 101.618 52.3758 105.888 42.4163C108.789 35.65 116.672 26.4829 116.672 26.4829Z" fill="white"/>
|
||||
<path d="M218.963 14.3746C218.963 14.3746 202.219 21.3645 193.811 29.0104C181.842 39.8953 172.865 64.7529 172.865 64.7529L232.37 81.3321C232.37 81.3321 236.479 55.2399 231.866 39.6132C228.732 28.9965 218.963 14.3746 218.963 14.3746Z" fill="#5CAFF9"/>
|
||||
<path d="M214.018 30.0666C214.018 30.0666 201.325 34.9691 194.996 40.4378C185.986 48.2231 179.407 66.1992 179.407 66.1992L224.958 78.8904C224.958 78.8904 227.812 59.9647 224.127 48.5541C221.623 40.8019 214.018 30.0666 214.018 30.0666Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M225.972 329.248C212.324 337.127 196.902 341.216 180.143 340.658C117.755 338.579 52.4242 301.928 63.2107 190.376C64.8835 181.907 66.4285 173.77 67.9089 165.973C83.3761 84.5078 91.7944 40.1695 165.302 42.6186C226.107 44.6444 243.27 90.4325 260.863 137.367C266.325 151.939 271.828 166.622 278.692 180.139C321.442 196.993 343.027 230.174 341.747 268.604C340.09 318.317 297.986 329.944 225.972 329.248Z" fill="#5CAFF9"/>
|
||||
<path d="M119.093 217.606L143.895 264.073C143.895 264.073 29.5229 320.806 26.5712 319.808C23.6196 318.81 9.93068 294.977 11.0696 290.766C11.6996 288.437 48.4349 263.725 78.3802 245.514C105.854 225.702 119.093 217.606 119.093 217.606Z" fill="#5CAFF9"/>
|
||||
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="57" y="39" width="292" height="307">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M225.458 329.231C211.811 337.11 196.389 341.199 179.629 340.641C117.241 338.562 51.9105 301.911 62.697 190.359C64.3698 181.89 65.9148 173.753 67.3952 165.956C82.8624 84.4907 91.2807 40.1524 164.788 42.6015C225.594 44.6273 242.756 90.4154 260.349 137.35C265.811 151.922 271.315 166.605 278.179 180.123C320.927 196.977 342.512 230.158 341.232 268.587C339.575 318.3 297.472 329.926 225.458 329.231Z" fill="#5CAFF9"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<path d="M148.762 244.382C151.143 310.505 184.546 373.192 126.606 346.736C111.723 345.093 91.1894 308.507 88.8085 242.385C86.4277 176.263 101.887 117.674 144.708 116.133C167.983 115.295 193.505 130.178 185.565 169.697C181.642 189.224 147.959 222.071 148.762 244.382Z" fill="white"/>
|
||||
</g>
|
||||
<ellipse cx="332.275" cy="170.962" rx="56.5131" ry="61.9998" transform="rotate(-33.1205 332.275 170.962)" fill="#5CAFF9"/>
|
||||
<circle cx="100.864" cy="100.31" r="38.6503" transform="rotate(1.9082 100.864 100.31)" stroke="#2A2A62" stroke-width="5"/>
|
||||
<circle cx="193.063" cy="101.185" r="38.6503" transform="rotate(1.9082 193.063 101.185)" stroke="#2A2A62" stroke-width="5"/>
|
||||
<path d="M136.178 111.367C136.178 111.367 142.869 109.943 147.2 110.088C151.531 110.232 158.112 112.098 158.112 112.098L157.893 118.679C157.893 118.679 151.267 117.36 146.962 117.216C142.658 117.073 135.958 117.948 135.958 117.948L136.178 111.367Z" fill="#2A2A62"/>
|
||||
<path d="M271.308 310.166L248.723 247.836C248.723 247.836 266.785 228.637 291.656 225.035C316.528 221.432 337.339 234.08 337.339 234.08C337.339 234.08 409.514 272.235 410.266 274.836C411.018 277.438 403.593 303.893 400.692 306.333C399.087 307.683 370.785 307.246 347.056 302.087C301.614 341.156 271.308 310.166 271.308 310.166Z" fill="#5CAFF9"/>
|
||||
<path d="M172.509 270.177L200.515 322.647C200.515 322.647 110.607 365.763 107.931 364.286C105.254 362.809 90.0591 335.757 90.4265 331.493C90.6297 329.134 118.568 308.459 141.621 293.638C162.323 276.776 172.509 270.177 172.509 270.177Z" fill="#5CAFF9"/>
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M170.825 144.56C171.865 161.827 150.758 165.001 137.081 161.745C123.408 158.381 119.112 141.868 121.6 131.827C124.092 121.679 137.091 116.189 150.765 119.552C157.015 122.668 157.987 125.824 161.623 129.822C165.887 134.38 167.178 137.654 170.825 144.56Z" fill="white"/>
|
||||
<path d="M141.115 131.186C146.759 131.374 151.431 128.637 151.55 125.072C151.669 121.507 147.19 118.465 141.545 118.277C135.901 118.089 131.229 120.826 131.11 124.391C130.991 127.956 135.471 130.998 141.115 131.186Z" fill="#2A2A62"/>
|
||||
<path d="M170.128 152.613C167.352 155.105 163.626 157.027 160.134 158.419C155.547 160.312 151.183 161.998 145.503 161.162C131.041 158.849 122.248 148.002 123.833 135.993C124.879 127.196 132.098 120.652 141.425 118.701C128.953 118.07 121.369 125.895 119.895 137.8C118.282 150.67 128.638 163.077 143.1 165.39C154.884 167.29 165.728 161.836 170.128 152.613Z" fill="#2A2A62"/>
|
||||
<path d="M131.13 95.2212C132.088 92.4076 129.216 88.8838 124.714 87.3506C120.212 85.8173 115.786 86.8552 114.828 89.6688C113.87 92.4824 116.742 96.0063 121.244 97.5395C125.746 99.0728 130.172 98.0348 131.13 95.2212Z" fill="white"/>
|
||||
<path d="M178.486 100.648C183.082 99.4252 186.188 96.1051 185.424 93.2326C184.66 90.3602 180.314 89.023 175.718 90.246C171.122 91.469 168.016 94.7891 168.781 97.6615C169.545 100.534 173.89 101.871 178.486 100.648Z" fill="white"/>
|
||||
<path opacity="0.5" d="M140.954 136.026L148.317 144.564L139.384 154.067L131.825 141.753L140.954 136.026Z" fill="#5CAFF9"/>
|
||||
<path d="M141.114 131.184C141.114 131.184 140.05 146.98 156.086 140.837" stroke="#2A2A62" stroke-width="2.01439" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M141.191 128.926C141.191 128.926 140.593 146.892 127.644 137.953" stroke="#2A2A62" stroke-width="2.01439" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M148.396 142.197C148.396 142.197 139.557 168.289 131.334 140.337" stroke="#2A2A62" stroke-width="2.01439" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M164.211 111.417C162.945 114.669 165.931 117.715 168.068 115.36C169.668 113.679 171.77 112.363 174.34 112.448C176.782 112.53 178.792 113.983 180.276 115.766C182.258 118.086 185.189 115.063 184.136 111.908C183.545 110.328 182.703 108.566 181.464 107.138C175.644 100.357 167.795 104.256 164.905 109.88C164.631 110.391 164.357 110.902 164.211 111.417Z" fill="#2A2A62"/>
|
||||
<path d="M110.422 109.625C109.156 112.877 112.142 115.923 114.279 113.568C115.879 111.887 117.981 110.571 120.551 110.656C122.993 110.738 125.003 112.191 126.487 113.974C128.469 116.294 131.4 113.271 130.347 110.116C129.756 108.536 128.914 106.774 127.675 105.346C121.855 98.5649 114.005 102.464 111.116 108.088C110.842 108.599 110.568 109.11 110.422 109.625Z" fill="#2A2A62"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="74.8087" height="78.1455" fill="white" transform="translate(110.945 86.3469) rotate(1.9082)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.7 KiB |
Loading…
Reference in New Issue