From b352aa64cefae2653dbbed4e2b917b28d1599b4e Mon Sep 17 00:00:00 2001
From: Linna Luo <linnaluo18@gmail.com>
Date: Wed, 18 Aug 2021 18:40:54 -0400
Subject: [PATCH] initial commit for advice page

---
 components/Navbar.tsx                   |  4 +++
 content/advice/advice.mdx               |  0
 pages/resources/advice/index.module.css | 22 ++++++++++++
 pages/resources/advice/index.tsx        | 19 ++++++++++
 public/resources/advice/codey.svg       | 46 +++++++++++++++++++++++++
 5 files changed, 91 insertions(+)
 create mode 100644 content/advice/advice.mdx
 create mode 100644 pages/resources/advice/index.module.css
 create mode 100644 pages/resources/advice/index.tsx
 create mode 100644 public/resources/advice/codey.svg

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 3d83bc18..b7f695a0 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -70,6 +70,10 @@ const menu: Menu = [
         name: "CS Club Wiki",
         route: "https://wiki.csclub.uwaterloo.ca",
       },
+      {
+        name: "Advice",
+        route: "/resources/advice",
+      },
     ],
   },
 ];
diff --git a/content/advice/advice.mdx b/content/advice/advice.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/resources/advice/index.module.css b/pages/resources/advice/index.module.css
new file mode 100644
index 00000000..ea89d520
--- /dev/null
+++ b/pages/resources/advice/index.module.css
@@ -0,0 +1,22 @@
+.titleContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: calc(32rem / 16);
+  border-bottom: calc(1rem / 16) solid var(--primary-heading);
+}
+
+.title {
+  padding-right: calc(40rem / 16);
+}
+
+.adviceBarContainer {
+  display: flex;
+  justify-content: flex-start;
+  padding-top: calc(24rem / 16);
+}
+
+.adviceBarContainer > a {
+  padding-right: calc(48rem / 16);
+}
diff --git a/pages/resources/advice/index.tsx b/pages/resources/advice/index.tsx
new file mode 100644
index 00000000..9de42786
--- /dev/null
+++ b/pages/resources/advice/index.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import { Image } from "@/components/Image";
+import { Link } from "@/components/Link"
+
+import styles from "./index.module.css"
+
+export default function Advice () {
+  return (<> <div className={styles.titleContainer}>
+    <h1 className={styles.title}>Waterloo Undergraduate Advice</h1>
+    <Image src="/resources/advice/codey.svg" />
+    </div>
+    <div className={styles.adviceBarContainer}>
+      <Link href="">Coop Advice</Link>
+      <Link href="">Academic Advice</Link>
+      <Link href="">Additional Resources</Link>
+    </div>
+    </>);
+}
\ No newline at end of file
diff --git a/public/resources/advice/codey.svg b/public/resources/advice/codey.svg
new file mode 100644
index 00000000..0171213c
--- /dev/null
+++ b/public/resources/advice/codey.svg
@@ -0,0 +1,46 @@
+<svg width="169" height="163" viewBox="0 0 169 163" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.1318 66.5245L70.2133 88.0394C70.2133 88.0394 28.4074 122.339 26.9088 122.011C25.4103 121.683 15.1879 110.702 14.9829 108.564C14.8695 107.382 27.1912 93.1679 37.5648 82.5335C46.5531 71.2481 51.1318 66.5245 51.1318 66.5245Z" fill="#1482E3"/>
+<path d="M60.4613 97.6825L86.017 109.299C86.017 109.299 86.4817 120.45 80.2089 129.046C73.9361 137.642 63.9461 140.198 63.9461 140.198C63.9461 140.198 31.0273 150.752 30.0172 150.209C29.007 149.667 23.1963 139.586 23.3166 137.986C23.3831 137.1 31.8943 128.662 40.4812 123.006C42.1073 97.6825 60.4613 97.6825 60.4613 97.6825Z" fill="#1482E3"/>
+<ellipse cx="145.07" cy="87.295" rx="23.9295" ry="26.2528" fill="#1482E3"/>
+<path d="M46.9551 3.26573C46.9551 3.26573 53.9427 6.45994 57.3931 9.81421C62.305 14.5894 65.7535 25.2357 65.7535 25.2357L40.3375 31.413C40.3375 31.413 38.9662 20.3129 41.1388 13.7647C42.6149 9.31597 46.9551 3.26573 46.9551 3.26573Z" fill="#5CAFF9"/>
+<path d="M48.4921 9.82917C48.4921 9.82917 53.4296 11.7742 55.8366 13.8845C59.2634 16.8888 61.5419 23.7176 61.5419 23.7176L43.2726 28.1579C43.2726 28.1579 42.4862 20.9993 44.1529 16.7242C45.2852 13.8198 48.4921 9.82917 48.4921 9.82917Z" fill="white"/>
+<path d="M91.6162 3.26573C91.6162 3.26573 84.6286 6.45993 81.1782 9.81421C76.2663 14.5894 72.8178 25.2357 72.8178 25.2357L98.2338 31.413C98.2338 31.413 99.6051 20.3129 97.4325 13.7647C95.9564 9.31597 91.6162 3.26573 91.6162 3.26573Z" fill="#5CAFF9"/>
+<path d="M89.7404 9.97088C89.7404 9.97088 84.4379 12.2245 81.8366 14.6281C78.1333 18.0499 75.6027 25.7501 75.6027 25.7501L95.0585 30.4788C95.0585 30.4788 95.9995 22.4292 94.2791 17.6522C93.1103 14.4068 89.7404 9.97088 89.7404 9.97088Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M99.0148 140.643C93.3509 144.293 86.8827 146.308 79.7832 146.308C53.3514 146.308 25.1868 131.207 28.1788 82.1864C28.7673 78.4523 29.3064 74.8653 29.8229 71.4283C35.22 35.5182 38.1575 15.9736 69.3004 15.9736C95.0616 15.9736 102.97 35.7799 111.077 56.0822C113.595 62.3863 116.131 68.7382 119.227 74.5598C137.555 81.319 147.156 95.5379 147.156 112.389C147.156 134.19 129.502 139.897 99.0148 140.643Z" fill="#5CAFF9"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="27" y="15" width="120" height="132">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M98.8031 140.644C93.1393 144.293 86.6712 146.309 79.5718 146.309C53.14 146.309 24.9753 131.207 27.9673 82.1868C28.5558 78.4527 29.0949 74.8657 29.6115 71.4287C35.0086 35.5185 37.946 15.974 69.0889 15.974C94.8502 15.974 102.759 35.7803 110.866 56.0826C113.383 62.387 115.92 68.7391 119.016 74.561C137.342 81.3205 146.944 95.539 146.944 112.39C146.944 134.19 129.289 139.897 98.8031 140.644Z" fill="#5CAFF9"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M65.1466 101.592C67.0865 129.541 82.1064 155.6 57.2131 145.221C50.8915 144.735 41.686 129.541 39.7461 101.592C37.8063 73.643 43.5225 48.6306 61.6226 47.3743C71.4607 46.6915 82.4714 52.6303 79.6685 69.4668C78.2836 77.7856 64.4921 92.1616 65.1466 101.592Z" fill="white"/>
+</g>
+<circle cx="42.8409" cy="41.2967" r="16.4244" fill="white" fill-opacity="0.25" stroke="#2A2A62" stroke-width="2"/>
+<circle cx="81.8702" cy="40.3646" r="16.4244" fill="white" fill-opacity="0.25" stroke="#2A2A62" stroke-width="2"/>
+<path d="M57.9399 45.4759C57.9399 45.4759 60.7516 44.7789 62.5865 44.7789C64.4213 44.7789 67.233 45.4759 67.233 45.4759V48.2638C67.233 48.2638 64.4101 47.7992 62.5865 47.7992C60.7628 47.7992 57.9399 48.2638 57.9399 48.2638V45.4759Z" fill="#2A2A62"/>
+<path d="M72.2703 59.6207C72.9709 66.8501 63.8639 68.4768 57.8859 67.302C51.908 66.082 49.8064 59.2592 50.7404 54.9667C51.6745 50.6742 57.2321 48.1891 63.21 49.4091C65.9655 50.6291 66.4325 51.9394 68.0671 53.566C69.9819 55.4186 70.589 56.7741 72.2703 59.6207Z" fill="white"/>
+<path d="M59.1916 54.4221C61.642 54.4221 63.6284 53.2083 63.6284 51.7111C63.6284 50.2138 61.642 49 59.1916 49C56.7413 49 54.7549 50.2138 54.7549 51.7111C54.7549 53.2083 56.7413 54.4221 59.1916 54.4221Z" fill="#2A2A62"/>
+<path d="M72.0818 63.0058C70.9142 64.0902 69.3263 64.9487 67.8318 65.5813C65.8703 66.4398 64.0022 67.2079 61.527 66.9368C55.2221 66.1686 51.2524 61.7406 51.7194 56.68C52.0464 52.9749 55.082 50.1282 59.0985 49.1794C53.6809 49.089 50.5052 52.4778 50.0381 57.4933C49.5244 62.9154 54.1947 67.976 60.4995 68.7442C65.6835 69.3767 70.3071 66.9368 72.0818 63.0058Z" fill="#2A2A62"/>
+<path d="M59.1919 54.4258C59.1919 54.4258 58.9584 61.0679 65.8237 58.2664" stroke="#2A2A62" stroke-width="3.06671" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M59.1922 53.4694C59.1922 53.4694 59.1922 61.0151 53.4478 57.4455" stroke="#2A2A62" stroke-width="3.06671" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M122.046 102.281L147.601 113.898C147.601 113.898 148.066 125.049 141.793 133.645C135.521 142.241 125.531 144.797 125.531 144.797C125.531 144.797 92.6118 155.351 91.6016 154.808C90.5915 154.266 84.7807 144.185 84.9011 142.585C84.9676 141.699 93.4788 133.261 102.066 127.605C103.692 102.281 122.046 102.281 122.046 102.281Z" fill="#5CAFF9"/>
+<ellipse cx="52.2742" cy="38.0042" rx="3.71721" ry="2.32326" transform="rotate(10.8273 52.2742 38.0042)" fill="white"/>
+<ellipse rx="3.71721" ry="2.32326" transform="matrix(-0.982197 0.187851 0.187848 0.982198 77.7336 38.1933)" fill="white"/>
+<path d="M96.1392 83.3516L79.2147 108.795C79.2147 108.795 45.3163 83.5934 45.4585 82.106C45.6007 80.6186 54.1928 67.1924 56.0363 66.204C57.0561 65.6572 70.6245 71.5456 80.8867 77.0026C91.5837 80.9541 96.1392 83.3516 96.1392 83.3516Z" fill="#5CAFF9"/>
+<path d="M83.9814 44.5283C82.4347 46.6211 78.0746 49.5511 73.0086 44.5283" stroke="#2A2A62" stroke-width="2.752" stroke-linecap="round"/>
+<path d="M55.3403 44.5216C54.0955 46.595 50.5864 49.4977 46.509 44.5216" stroke="#2A2A62" stroke-width="2.752" stroke-linecap="round"/>
+<circle cx="22.7226" cy="68.4719" r="3.51679" transform="rotate(-28.4134 22.7226 68.4719)" fill="#2A2A62"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9942 59.3844C25.9297 56.1954 26.169 52.0928 24.2658 48.5749C21.4125 43.3008 14.8239 41.3383 9.54972 44.1916C4.27555 47.045 2.31308 53.6336 5.1664 58.9078C7.0648 62.4168 10.6167 64.4599 14.3348 64.594L16.4948 68.5867L26.1475 63.3646L23.9942 59.3844Z" fill="#FFD25F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9942 59.3844C25.9297 56.1954 26.169 52.0928 24.2658 48.5749C21.4125 43.3008 14.8239 41.3383 9.54972 44.1916C4.27555 47.045 2.31308 53.6336 5.1664 58.9078C7.0648 62.4168 10.6167 64.4599 14.3348 64.594L16.4948 68.5867L26.1475 63.3646L23.9942 59.3844Z" fill="url(#paint0_radial)" fill-opacity="0.5"/>
+<path d="M19.7554 67.8638C18.4719 65.4914 15.6613 60.2961 14.6865 58.4942C13.468 56.2419 10.4428 56.3644 10.3482 58.512C10.2432 60.8981 14.8745 60.0617 16.3361 58.9603C17.7978 57.859 17.1861 53.0657 15.3529 54.0575C13.3284 55.1528 16.0634 59.0303 18.5884 57.7419C21.1134 56.4535 22.0383 53.3522 20.3099 52.3851C19.0346 51.6715 15.3008 53.3871 23.0887 66.0604" stroke="#2A2A62" stroke-width="1.06708"/>
+<path d="M15.8638 67.3304L25.4735 62.1316L27.0007 64.9543C27.4493 65.7836 27.1407 66.8197 26.3114 67.2684L19.7049 70.8424C18.8756 71.2911 17.8395 70.9825 17.3909 70.1532L15.8638 67.3304Z" fill="#525284"/>
+<path d="M11.292 46.0471C14.0638 44.8322 20.3952 44.0881 23.5461 50.8307" stroke="url(#paint1_linear)" stroke-width="1.49392" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(16.3054 56.1049) rotate(-94.6765) scale(13.3169 10.2037)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint1_linear" x1="21.7332" y1="36.7882" x2="18.6363" y2="50.6531" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>