added 404 page and styling
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Shahan Nedadahandeh 2022-03-09 17:43:19 -05:00
parent d04115fb12
commit 8486160c2a
3 changed files with 85 additions and 0 deletions

46
images/codey-404.svg Normal file
View File

@ -0,0 +1,46 @@
<svg width="480" height="416" viewBox="0 0 480 416" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M166.919 8.38971C166.919 8.38971 184.826 16.5757 193.669 25.1719C206.257 37.4097 215.095 64.6937 215.095 64.6937L149.959 80.5247C149.959 80.5247 146.445 52.0777 152.013 35.2962C155.796 23.8951 166.919 8.38971 166.919 8.38971Z" fill="#5CAFF9"/>
<path d="M170.859 25.217C170.859 25.217 183.513 30.2017 189.682 35.61C198.464 43.3092 204.303 60.81 204.303 60.81L157.483 72.1894C157.483 72.1894 155.468 53.8434 159.739 42.8874C162.641 35.4441 170.859 25.217 170.859 25.217Z" fill="white"/>
<path d="M281.363 8.38971C281.363 8.38971 263.455 16.5757 254.613 25.1719C242.025 37.4097 233.187 64.6937 233.187 64.6937L298.322 80.5247C298.322 80.5247 301.837 52.0777 296.269 35.2962C292.486 23.8951 281.363 8.38971 281.363 8.38971Z" fill="#5CAFF9"/>
<path d="M276.563 25.5863C276.563 25.5863 262.974 31.3619 256.308 37.5217C246.817 46.291 240.332 66.0249 240.332 66.0249L290.193 78.1433C290.193 78.1433 292.604 57.5141 288.195 45.2718C285.2 36.9545 276.563 25.5863 276.563 25.5863Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M300.337 360.459C285.821 369.813 269.244 374.979 251.049 374.979C183.31 374.979 111.131 336.278 118.798 210.649C120.307 201.079 121.688 191.887 123.012 183.078C136.843 91.0491 144.371 40.9609 224.184 40.9609C290.204 40.9609 310.472 91.7198 331.249 143.75C337.699 159.904 344.199 176.182 352.132 191.1C399.106 208.421 423.715 244.862 423.715 288.05C423.715 343.921 378.469 358.546 300.337 360.459Z" fill="#5CAFF9"/>
<path d="M200.986 273.319L160.569 313.736C160.569 313.736 65.5694 212.893 65.674 209.514C65.7787 206.134 86.2033 184.4 90.9346 184.253C93.5518 184.172 130.803 214.514 159.162 239.857C188.402 262.128 200.986 273.319 200.986 273.319Z" fill="#5CAFF9"/>
<mask id="mask0_4972_883" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="117" y="40" width="307" height="335">
<path fill-rule="evenodd" clip-rule="evenodd" d="M299.78 360.459C285.264 369.813 268.687 374.979 250.492 374.979C182.753 374.979 110.574 336.278 118.242 210.649C119.75 201.079 121.131 191.887 122.455 183.078C136.287 91.0491 143.815 40.9609 223.627 40.9609C289.647 40.9609 309.916 91.7198 330.692 143.75C337.143 159.905 343.642 176.182 351.576 191.101C398.548 208.422 423.157 244.863 423.157 288.05C423.157 343.921 377.911 358.546 299.78 360.459Z" fill="#5CAFF9"/>
</mask>
<g mask="url(#mask0_4972_883)">
<path d="M213.538 260.386C218.509 332.013 257.002 398.795 193.206 372.195C177.005 370.951 153.414 332.013 148.442 260.386C143.471 188.758 158.12 124.657 204.507 121.438C229.719 119.688 257.937 134.908 250.754 178.056C247.205 199.375 211.86 236.217 213.538 260.386Z" fill="white"/>
</g>
<ellipse cx="418.355" cy="223.748" rx="61.3259" ry="67.2798" fill="#5CAFF9"/>
<circle cx="156.38" cy="105.86" r="41.6778" stroke="#2A2A62" stroke-width="5.95397"/>
<circle cx="256.408" cy="103.478" r="41.6778" stroke="#2A2A62" stroke-width="5.95397"/>
<path d="M195.081 116.576C195.081 116.576 202.286 114.79 206.989 114.79C211.691 114.79 218.896 116.576 218.896 116.576V123.721C218.896 123.721 211.662 122.53 206.989 122.53C202.315 122.53 195.081 123.721 195.081 123.721V116.576Z" fill="#2A2A62"/>
<path d="M359.365 262.142L424.859 291.912C424.859 291.912 426.05 320.491 409.974 342.52C393.898 364.55 368.296 371.099 368.296 371.099C368.296 371.099 283.933 398.146 281.344 396.756C278.755 395.365 263.864 369.532 264.172 365.43C264.343 363.161 286.155 341.535 308.161 327.04C312.328 262.142 359.365 262.142 359.365 262.142Z" fill="#5CAFF9"/>
<path d="M214.692 273.636L278.436 283.749C278.436 283.749 256.89 389.786 253.859 391.136C250.828 392.485 217.469 387.925 214.019 384.815C212.111 383.095 212.508 345.381 214.775 315.727C213.735 286.772 214.692 273.636 214.692 273.636Z" fill="#5CAFF9"/>
<path d="M237.354 153.491C239.14 160.041 220.871 170.556 205.68 167.369C190.489 164.182 180.093 152.453 182.46 141.171C184.826 129.89 199.06 123.328 214.251 126.515C221.278 129.676 222.453 133.208 226.637 137.416C231.544 142.352 233.068 145.935 237.354 153.491Z" fill="white"/>
<ellipse cx="180.792" cy="118.363" rx="9.52635" ry="10.7171" fill="#2A2A62"/>
<ellipse cx="248.666" cy="118.363" rx="9.52635" ry="10.7171" fill="#2A2A62"/>
<ellipse cx="204.012" cy="132.653" rx="11.3125" ry="7.14476" fill="#2A2A62"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M236.929 156.683C233.896 159.072 229.958 160.956 226.04 162.423C221.03 164.3 216.25 166.082 209.965 165.4C193.946 163.662 183.817 153.861 185.042 142.581C185.933 134.368 193.586 128.034 203.865 125.869C190.097 125.656 181.957 133.231 180.75 144.359C179.437 156.455 191.358 167.67 207.376 169.409C220.566 170.84 232.42 165.401 236.929 156.683Z" fill="#2A2A62"/>
<ellipse cx="180.549" cy="97.4212" rx="9.52635" ry="5.95397" transform="rotate(10.8273 180.549 97.4212)" fill="white"/>
<ellipse rx="9.52635" ry="5.95397" transform="matrix(-0.982198 0.18785 0.18785 0.982198 245.802 97.9139)" fill="white"/>
<circle cx="139.267" cy="117.866" r="59" transform="rotate(43.0508 139.267 117.866)" fill="#5CAFF9"/>
<path d="M113.619 169.171L92.8985 152.289L47.9406 207.468C43.2787 213.19 44.1378 221.607 49.8596 226.269C55.5813 230.931 63.9988 230.072 68.6607 224.35L113.619 169.171Z" fill="#525284"/>
<path d="M113.619 169.171L92.8985 152.289L47.9406 207.468C43.2787 213.19 44.1378 221.607 49.8596 226.269C55.5813 230.931 63.9988 230.072 68.6607 224.35L113.619 169.171Z" fill="url(#paint0_linear_4972_883)"/>
<path d="M113.619 169.171L92.8985 152.289L47.9406 207.468C43.2787 213.19 44.1378 221.607 49.8596 226.269C55.5813 230.931 63.9988 230.072 68.6607 224.35L113.619 169.171Z" fill="url(#paint1_linear_4972_883)"/>
<rect width="11.6204" height="60.4262" rx="5.04898" transform="matrix(-0.775252 -0.631652 -0.631652 0.775252 101.345 172.283)" fill="#2A2A62"/>
<ellipse cx="141" cy="119.5" rx="29" ry="32.5" fill="#2A2A62"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M98.1645 168.674C70.1705 145.865 65.9669 104.682 88.7756 76.6877C111.584 48.6937 152.768 44.4902 180.762 67.2989C208.756 90.1076 212.96 131.291 190.151 159.285C167.342 187.279 126.158 191.483 98.1645 168.674ZM105.441 159.744C82.3795 140.954 78.9166 107.026 97.7066 83.9642C116.497 60.9025 150.424 57.4396 173.486 76.2296C196.548 95.0196 200.01 128.947 181.22 152.009C162.43 175.071 128.503 178.534 105.441 159.744Z" fill="#2B2B62"/>
<path d="M204.268 139.652C204.268 139.652 205.568 157.795 191.591 150.171" stroke="#2A2A62" stroke-width="4.06935" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M217.372 151.476C214.959 153.283 209.01 155.571 202.358 151.446C203.928 149.387 206.122 146.912 208.573 144.876C211.82 142.18 215.016 140.668 217.616 141.067C218.924 141.267 219.436 141.746 219.683 142.148C219.98 142.632 220.143 143.416 220.015 144.581C219.769 146.819 218.551 149.527 217.372 151.476Z" fill="#FFB8B8" stroke="#2A2A62" stroke-width="4.06935"/>
<defs>
<linearGradient id="paint0_linear_4972_883" x1="39.2789" y1="234.886" x2="86.1372" y2="174.817" gradientUnits="userSpaceOnUse">
<stop offset="0.431264" stop-color="#2A2A62"/>
<stop offset="1" stop-color="#2A2A62" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_4972_883" x1="115.828" y1="145.303" x2="74.7726" y2="202.052" gradientUnits="userSpaceOnUse">
<stop offset="0.431264" stop-color="#2A2A62"/>
<stop offset="1" stop-color="#2A2A62" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 7.3 KiB

15
pages/404.module.css Normal file
View File

@ -0,0 +1,15 @@
.container{
display:flex;
align-items: center;
justify-content: center;
}
.codey{
width: calc(380rem / 16);
}
@media only screen and (max-width: calc(768rem / 16)) {
.container{
flex-direction: column;
}
}

24
pages/404.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from "react";
import { Image } from "@/components/Image";
import { Link } from "@/components/Link";
import { Title } from "@/components/Title";
import styles from "./404.module.css";
export default function Custom404() {
return (
<div className={styles.container}>
<div className={styles.text}>
<Title>Error 404</Title>
<h2>Error 404</h2>
<h1>We couldnt find the page youre looking for!</h1>
<p>
Were working on it, but in the meantime,{" "}
<Link href="/">click here to go back to the main page.</Link>{" "}
</p>
</div>
<Image src="images/codey-404.svg" className={styles.codey} />
</div>
);
}