www
/
www-new
12
3
Fork 5
Code Issues 58 Pull Requests 42 Projects Releases Wiki Activity

Add about us page desktop shapes background

This commit is contained in:
Amy 2021-08-23 01:38:54 -04:00
parent ef3c8d2eac
commit 7ae5ff3b03
5 changed files with 134 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/ShapesBackground.tsx
View File

@ -41,7 +41,8 @@ export type ShapeType =
| "plus"
| "ring"
| "triangle"
| "waves";
| "waves"
| "waveBig";
export type ShapesConfig = {
[key in ShapeType]?: CSSProperties[];

3
pages/about/index.module.css
View File

@ -1,5 +1,5 @@
.page {
margin-bottom: calc(20rem / 16);
margin: calc(20rem / 16) 0;
}
.title {
@ -10,7 +10,6 @@
.content {
color: var(--text);
background-color: var(--primary-background);
}
.content span {

78
pages/about/index.tsx
View File

@ -4,6 +4,7 @@ import { ConnectWithUs } from "@/components/ConnectWithUs";
import { DefaultLayout } from "@/components/DefaultLayout";
import { EmailSignup } from "@/components/EmailSignup";
import { Image } from "@/components/Image";
import { GetShapesConfig } from "@/components/ShapesBackground";
import Content from "../../content/about/index.mdx";
@ -30,3 +31,80 @@ export default function AboutUs() {
AboutUs.Layout = function AboutUsLayout(props: { children: React.ReactNode }) {
return <div className={styles.page}>{props.children}</div>;
};
AboutUs.getShapesConfig = (() => {
const desktopConfig = {
cross: [
{
top: "calc(16rem / 16)",
left: "calc(-78rem / 16)",
width: "calc(150rem / 16)",
height: "calc(150rem / 16)",
transform: "rotate(30deg)",
},
],
dots: [
{
top: "calc(520rem / 16)",
right: "calc(-120rem / 16)",
width: "calc(292rem / 16)",
height: "calc(330rem / 16)",
transform: "rotate(-29deg)",
},
],
hash: [
{
top: "calc(528rem / 16)",
left: "60vw",
width: "calc(60rem / 16)",
height: "calc(60rem / 16)",
},
{
bottom: "calc(520rem / 16)",
right: "80vw",
width: "calc(60rem / 16)",
height: "calc(60rem / 16)",
},
],
triangle: [
{
top: "calc(554rem / 16)",
right: "80vw",
width: "calc(68rem / 16)",
height: "calc(68rem / 16)",
transform: "rotate(-26deg)",
},
{
top: "calc(2190rem / 16)",
right: "4vw",
width: "calc(68rem / 16)",
height: "calc(68rem / 16)",
transform: "rotate(-26deg)",
},
],
waves: [
{
top: "calc(1300rem / 16)",
left: "2vw",
width: "calc(102rem / 16)",
height: "calc(50rem / 16)",
},
],
wavesBig: [
{
top: "calc(42rem / 16)",
right: "calc(-160rem / 16)",
width: "calc(376rem / 16)",
height: "calc(132rem / 16)",
},
{
bottom: "calc(40rem / 16)",
left: "calc(-174rem / 16)",
width: "calc(376rem / 16)",
height: "calc(132rem / 16)",
},
],
};
return desktopConfig;
}) as GetShapesConfig;

82
public/images/shapes/cross.svg
View File

@ -1,34 +1,50 @@
<svg width="130" height="130" viewBox="0 0 130 130" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 16.1855H29.3959" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.1846 29.3959V3" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M35.5347 16.1855H61.9306" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M48.7192 29.3959V3" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M68.0684 16.1855H94.4643" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M81.2529 29.3959V3" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M100.604 16.1855H127" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M113.789 29.3959V3" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 48.7207H29.3959" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.1846 61.9311V35.5352" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M35.5347 48.7207H61.9306" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M48.7192 61.9311V35.5352" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M68.0684 48.7207H94.4643" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M81.2529 61.9311V35.5352" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M100.604 48.7207H127" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M113.789 61.9311V35.5352" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 81.2539H29.3959" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.1846 94.4643V68.0684" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M35.5347 81.2539H61.9306" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M48.7192 94.4643V68.0684" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M68.0684 81.2539H94.4643" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M81.2529 94.4643V68.0684" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M100.604 81.2539H127" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M113.789 94.4643V68.0684" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 113.789H29.3959" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.1846 126.999V100.604" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M35.5347 113.789H61.9306" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M48.7192 126.999V100.604" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M68.0684 113.789H94.4643" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M81.2529 126.999V100.604" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M100.604 113.789H127" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M113.789 126.999V100.604" stroke="black" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<svg width="213" height="183" viewBox="0 0 213 183" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M91.3398 16.4819L116.275 17.0557" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M104.134 31.9237L103.457 1.64575" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M122.073 17.1893L147.008 17.763" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M134.866 32.6317L134.188 2.35364" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M152.808 17.8965L177.743 18.4701" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M165.6 33.3389L164.923 3.06079" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M183.542 18.6033L208.477 19.1771" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M196.336 34.0449L195.659 3.76709" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M92.1738 53.8025L117.109 54.3762" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M104.968 69.2444L104.291 38.9663" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M61.6533 53.1L86.5884 53.6736" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M74.4459 68.5422L73.7686 38.2643" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M31.1299 52.3983L56.0651 52.972" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M43.9245 67.8395L43.2471 37.5615" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M122.908 54.5085L147.843 55.0822" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M135.701 69.9508L135.023 39.6727" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M153.643 55.2159L178.578 55.7897" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M166.435 70.6582L165.758 40.3802" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M184.378 55.922L209.313 56.4958" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M197.171 71.364L196.494 41.0861" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M93.0107 91.1217L117.946 91.6954" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M105.803 106.564L105.126 76.286" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M62.4893 90.4198L87.4245 90.9935" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M75.2838 105.86L74.6064 75.5825" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M31.9668 89.7175L56.9021 90.2914" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M44.7603 105.159L44.083 74.8807" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.44434 89.0162L26.3795 89.5899" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.2379 104.457L13.5605 74.1792" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M123.743 91.8296L148.678 92.4033" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M136.537 107.271L135.859 76.9927" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M154.477 92.5358L179.412 93.1096" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M167.27 107.977L166.593 77.699" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M185.211 93.243L210.146 93.8168" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M198.004 108.685L197.326 78.4071" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M93.8438 128.439L118.779 129.013" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M106.636 143.882L105.959 113.604" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M94.6807 165.73L119.616 166.304" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M107.473 181.172L106.796 150.894" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M63.3232 127.736L88.2585 128.31" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M76.1158 143.178L75.4385 112.9" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M124.579 129.145L149.514 129.719" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M137.373 144.587L136.695 114.309" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M125.345 163.431L150.28 164.005" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M138.137 178.874L137.46 148.596" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M155.313 129.852L180.249 130.426" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M168.106 145.295L167.429 115.017" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M186.049 130.558L210.984 131.132" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M198.842 146L198.164 115.722" stroke="black" stroke-width="2.58283" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

4
public/images/shapes/wavesBig.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="386" height="202" viewBox="0 0 386 202" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M221.271 50.532L216.667 48.5827L221.271 50.532ZM168.395 54.1229L163.893 56.298L168.395 54.1229ZM220.296 52.8367L215.691 50.8874L220.296 52.8367ZM115.325 51.8264L119.762 54.1313L115.325 51.8264ZM113.474 55.3882L117.912 57.6931L113.474 55.3882ZM54.809 48.9023L50.3069 51.0774L50.3069 51.0774L54.809 48.9023ZM50.3069 51.0774L53.0477 56.7505L62.0519 52.4004L59.3112 46.7273L50.3069 51.0774ZM117.912 57.6931L119.762 54.1313L110.888 49.5214L109.037 53.0832L117.912 57.6931ZM163.151 54.7618L163.893 56.298L172.897 51.9479L172.155 50.4117L163.151 54.7618ZM224.9 54.7861L225.876 52.4814L216.667 48.5827L215.691 50.8874L224.9 54.7861ZM225.876 52.4814C233.047 35.544 256.502 34.1238 265.664 50.0724L274.336 45.0912C261.056 21.9758 227.06 24.0341 216.667 48.5827L225.876 52.4814ZM163.893 56.298C176.422 82.2314 213.671 81.3083 224.9 54.7861L215.691 50.8874C207.815 69.4916 181.686 70.1392 172.897 51.9479L163.893 56.298ZM119.762 54.1313C128.971 36.4027 154.46 36.7731 163.151 54.7618L172.155 50.4117C159.884 25.0108 123.892 24.4878 110.888 49.5214L119.762 54.1313ZM53.0477 56.7505C66.0396 83.6424 104.144 84.1962 117.912 57.6931L109.037 53.0832C99.0644 72.2813 71.4629 71.8802 62.0519 52.4004L53.0477 56.7505ZM59.3112 46.7273C47.6386 22.5664 13.5558 21.6627 0.619446 45.1712L9.38055 49.9923C18.4012 33.5996 42.1675 34.2297 50.3069 51.0774L59.3112 46.7273Z" fill="black"/>
<path d="M226.325 142.45L221.888 140.145L226.325 142.45ZM278.653 143.21L274.151 145.385L278.653 143.21ZM168.55 145.199L164.048 147.374L168.55 145.199ZM165.809 139.526L161.307 141.701L165.809 139.526ZM161.307 141.701L164.048 147.374L173.052 143.024L170.311 137.351L161.307 141.701ZM228.912 148.317L230.762 144.755L221.888 140.145L220.037 143.707L228.912 148.317ZM274.151 145.385L274.893 146.922L283.897 142.571L283.155 141.035L274.151 145.385ZM335.9 145.41L336.876 143.105L327.667 139.206L326.691 141.511L335.9 145.41ZM336.876 143.105C344.047 126.167 367.502 124.747 376.664 140.696L385.336 135.715C372.056 112.599 338.06 114.658 327.667 139.206L336.876 143.105ZM274.893 146.922C287.422 172.855 324.671 171.932 335.9 145.41L326.691 141.511C318.815 160.115 292.686 160.763 283.897 142.571L274.893 146.922ZM230.762 144.755C239.971 127.026 265.46 127.397 274.151 145.385L283.155 141.035C270.884 115.634 234.892 115.111 221.888 140.145L230.762 144.755ZM164.048 147.374C177.04 174.266 215.144 174.82 228.912 148.317L220.037 143.707C210.064 162.905 182.463 162.504 173.052 143.024L164.048 147.374ZM170.311 137.351C158.639 113.19 124.556 112.286 111.619 135.795L120.381 140.616C129.401 124.223 153.168 124.853 161.307 141.701L170.311 137.351Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB