From 4c0908555ba304cd512f86ef8139c83bc4f09b21 Mon Sep 17 00:00:00 2001
From: Leslie Yip <leslieyip02@gmail.com>
Date: Wed, 28 Feb 2024 02:05:12 +0800
Subject: [PATCH 1/3] KAN-13 Create resources page

---
 public/folder_icon.svg               |  12 ++++
 public/planner_icon.svg              |  26 +++++++
 public/sep_icon.svg                  |  31 ++++++++
 src/App.jsx                          |   5 +-
 src/pages/index.ts                   |   3 +-
 src/pages/resources/FolderLink.css   |  45 ++++++++++++
 src/pages/resources/FolderLink.tsx   |  18 +++++
 src/pages/resources/ResourceLink.css |  57 +++++++++++++++
 src/pages/resources/ResourceLink.tsx |  20 ++++++
 src/pages/resources/index.css        | 104 +++++++++++++++++++++++++++
 src/pages/resources/index.tsx        |  82 +++++++++++++++++++++
 11 files changed, 401 insertions(+), 2 deletions(-)
 create mode 100644 public/folder_icon.svg
 create mode 100644 public/planner_icon.svg
 create mode 100644 public/sep_icon.svg
 create mode 100644 src/pages/resources/FolderLink.css
 create mode 100644 src/pages/resources/FolderLink.tsx
 create mode 100644 src/pages/resources/ResourceLink.css
 create mode 100644 src/pages/resources/ResourceLink.tsx
 create mode 100644 src/pages/resources/index.css
 create mode 100644 src/pages/resources/index.tsx

diff --git a/public/folder_icon.svg b/public/folder_icon.svg
new file mode 100644
index 0000000..ad63998
--- /dev/null
+++ b/public/folder_icon.svg
@@ -0,0 +1,12 @@
+<svg width="120" height="92" viewBox="0 0 120 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.96" clip-path="url(#clip0_361_898)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.87109 4C5.66195 4 3.87109 5.79086 3.87109 8V20V21V88C3.87109 90.2091 5.66195 92 7.87109 92H116C118.209 92 120 90.2091 120 88V16C120 13.7909 118.209 12 116 12H48.0457L43.7719 5.74374C43.0266 4.65261 41.7904 4 40.469 4H7.87109Z" fill="#365486"/>
+<path d="M4 0.5H36.5979C37.7542 0.5 38.8358 1.07103 39.488 2.02577L44.0161 8.65448V13C44.0161 14.933 42.4491 16.5 40.5161 16.5H0.5V4C0.5 2.067 2.067 0.5 4 0.5Z" fill="#FFBD44" stroke="#333333"/>
+<path d="M115.629 12V84C115.629 85.933 114.062 87.5 112.129 87.5H3.99999C2.067 87.5 0.5 85.933 0.5 84V16.5H36.4543C38.0293 16.5 39.4896 15.6766 40.3048 14.3289L43.8303 8.5H112.129C114.062 8.5 115.629 10.067 115.629 12Z" fill="#FFE978" stroke="#333333"/>
+</g>
+<defs>
+<clipPath id="clip0_361_898">
+<rect width="120" height="92" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/planner_icon.svg b/public/planner_icon.svg
new file mode 100644
index 0000000..79aa66f
--- /dev/null
+++ b/public/planner_icon.svg
@@ -0,0 +1,26 @@
+<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_350_819)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M157.74 51.2131C162.159 51.2131 165.74 47.6314 165.74 43.2131V18.2928C165.74 13.8746 162.159 10.2928 157.74 10.2928H20.2894C15.8712 10.2928 12.2894 13.8746 12.2894 18.2928V43.2131C12.2894 47.6314 15.8712 51.2131 20.2894 51.2131H27.6631C27.6439 51.629 27.6343 52.0551 27.6343 52.4918C27.6343 69.8184 42.8232 98.8417 64.5465 112.593C42.8233 126.345 27.6343 155.368 27.6343 172.695C27.6343 173.132 27.644 173.558 27.6631 173.974H20.2891C15.8708 173.974 12.2891 177.555 12.2891 181.974V206.894C12.2891 211.312 15.8708 214.894 20.2891 214.894H157.74C162.158 214.894 165.74 211.312 165.74 206.894V181.974C165.74 177.555 162.158 173.974 157.74 173.974H150.366C150.385 173.558 150.395 173.132 150.395 172.695C150.395 155.368 135.206 126.345 113.483 112.593C135.206 98.8417 150.395 69.8184 150.395 52.4918C150.395 52.0551 150.385 51.629 150.366 51.2131H157.74Z" fill="#365486"/>
+<mask id="path-3-inside-1_350_819" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.912 27.0901C37.2141 26.112 19.3418 25.4042 19.3418 44.1991C19.3418 61.5256 34.5306 90.5488 56.2537 104.301C34.5307 118.052 19.3419 147.075 19.3419 164.402C19.3419 183.197 37.2141 182.489 61.912 181.511C67.8398 181.276 74.1608 181.026 80.7222 181.026C87.2837 181.026 93.6046 181.276 99.5324 181.511C124.23 182.489 142.103 183.197 142.103 164.402C142.103 147.075 126.914 118.052 105.191 104.301C126.914 90.5487 142.103 61.5256 142.103 44.1991C142.103 25.4042 124.23 26.112 99.5323 27.0901C93.6046 27.3249 87.2836 27.5752 80.7222 27.5752C74.1607 27.5752 67.8398 27.3249 61.912 27.0901Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.912 27.0901C37.2141 26.112 19.3418 25.4042 19.3418 44.1991C19.3418 61.5256 34.5306 90.5488 56.2537 104.301C34.5307 118.052 19.3419 147.075 19.3419 164.402C19.3419 183.197 37.2141 182.489 61.912 181.511C67.8398 181.276 74.1608 181.026 80.7222 181.026C87.2837 181.026 93.6046 181.276 99.5324 181.511C124.23 182.489 142.103 183.197 142.103 164.402C142.103 147.075 126.914 118.052 105.191 104.301C126.914 90.5487 142.103 61.5256 142.103 44.1991C142.103 25.4042 124.23 26.112 99.5323 27.0901C93.6046 27.3249 87.2836 27.5752 80.7222 27.5752C74.1607 27.5752 67.8398 27.3249 61.912 27.0901Z" fill="white"/>
+<path d="M61.912 27.0901L61.8724 28.0894L61.912 27.0901ZM56.2537 104.301L56.7886 105.145L58.1233 104.301L56.7886 103.456L56.2537 104.301ZM61.912 181.511L61.8725 180.512L61.8725 180.512L61.912 181.511ZM99.5324 181.511L99.572 180.512L99.572 180.512L99.5324 181.511ZM105.191 104.301L104.656 103.456L103.321 104.301L104.656 105.145L105.191 104.301ZM99.5323 27.0901L99.5719 28.0894L99.5323 27.0901ZM20.3418 44.1991C20.3418 39.66 21.4185 36.423 23.2993 34.0861C25.1852 31.7429 27.9748 30.1859 31.6271 29.1948C38.9988 27.1945 49.4571 27.5977 61.8724 28.0894L61.9516 26.0909C49.669 25.6045 38.8421 25.1647 31.1033 27.2646C27.2002 28.3237 23.9782 30.0527 21.7412 32.8322C19.4991 35.6181 18.3418 39.3407 18.3418 44.1991H20.3418ZM56.7886 103.456C46.0946 96.6858 36.9687 86.1257 30.5149 75.0857C24.0516 64.0294 20.3418 52.6194 20.3418 44.1991H18.3418C18.3418 53.1054 22.2264 64.8702 28.7883 76.095C35.3597 87.3362 44.6898 98.1635 55.7188 105.145L56.7886 103.456ZM20.3419 164.402C20.3419 155.982 24.0516 144.572 30.515 133.515C36.9687 122.475 46.0946 111.915 56.7886 105.145L55.7188 103.456C44.6898 110.438 35.3597 121.265 28.7883 132.506C22.2265 143.731 18.3419 155.496 18.3419 164.402H20.3419ZM61.8725 180.512C49.4571 181.003 38.9989 181.407 31.6271 179.406C27.9749 178.415 25.1852 176.858 23.2993 174.515C21.4186 172.178 20.3419 168.941 20.3419 164.402H18.3419C18.3419 169.26 19.4991 172.983 21.7413 175.769C23.9782 178.548 27.2003 180.277 31.1033 181.336C38.8422 183.436 49.6691 182.997 61.9516 182.51L61.8725 180.512ZM80.7222 180.026C74.138 180.026 67.7978 180.277 61.8725 180.512L61.9516 182.51C67.8818 182.275 74.1836 182.026 80.7222 182.026V180.026ZM99.572 180.512C93.6466 180.277 87.3065 180.026 80.7222 180.026V182.026C87.2609 182.026 93.5626 182.275 99.4928 182.51L99.572 180.512ZM141.103 164.402C141.103 168.941 140.026 172.178 138.145 174.515C136.259 176.858 133.47 178.415 129.817 179.406C122.446 181.407 111.987 181.003 99.572 180.512L99.4928 182.51C111.775 182.997 122.602 183.436 130.341 181.336C134.244 180.277 137.466 178.548 139.703 175.769C141.945 172.983 143.103 169.26 143.103 164.402H141.103ZM104.656 105.145C115.35 111.915 124.476 122.475 130.929 133.515C137.393 144.572 141.103 155.982 141.103 164.402H143.103C143.103 155.496 139.218 143.731 132.656 132.506C126.085 121.265 116.755 110.438 105.726 103.456L104.656 105.145ZM141.103 44.1991C141.103 52.6194 137.393 64.0293 130.929 75.0856C124.476 86.1256 115.35 96.6857 104.656 103.456L105.726 105.145C116.755 98.1635 126.085 87.3362 132.656 76.095C139.218 64.8702 143.103 53.1054 143.103 44.1991H141.103ZM99.5719 28.0894C111.987 27.5977 122.446 27.1945 129.817 29.1948C133.47 30.1859 136.259 31.7429 138.145 34.0861C140.026 36.423 141.103 39.66 141.103 44.1991H143.103C143.103 39.3407 141.945 35.6181 139.703 32.8322C137.466 30.0527 134.244 28.3237 130.341 27.2646C122.602 25.1647 111.775 25.6045 99.4928 26.0909L99.5719 28.0894ZM80.7222 28.5752C87.3064 28.5752 93.6466 28.324 99.5719 28.0894L99.4928 26.0909C93.5626 26.3258 87.2608 26.5752 80.7222 26.5752V28.5752ZM61.8724 28.0894C67.7978 28.324 74.1379 28.5752 80.7222 28.5752V26.5752C74.1835 26.5752 67.8818 26.3258 61.9516 26.0909L61.8724 28.0894Z" fill="#333333" mask="url(#path-3-inside-1_350_819)"/>
+<path d="M47.4749 78.9914C47.4749 72.0025 69.8427 78.9914 80.0832 78.9914C90.3236 78.9914 115.249 72.0025 115.249 78.9914C115.249 85.9803 90.3236 104.3 80.0832 104.3C69.8427 104.3 47.4749 85.9803 47.4749 78.9914Z" fill="#FFE978"/>
+<path d="M120.366 161.801C120.366 177.177 102.332 172.768 80.0856 172.768C57.839 172.768 39.8047 177.177 39.8047 161.801C39.8047 146.425 57.839 127.318 80.0856 127.318C102.332 127.318 120.366 146.425 120.366 161.801Z" fill="#FFE978"/>
+<rect x="4.50098" y="166.181" width="152.451" height="39.9203" rx="7.5" fill="#FFBD44" stroke="#333333"/>
+<rect x="156.951" y="42.4203" width="152.451" height="39.9203" rx="7.5" transform="rotate(-180 156.951 42.4203)" fill="#FFBD44" stroke="#333333"/>
+<ellipse cx="184.325" cy="191.062" rx="51.6347" ry="49.2515" fill="#365486"/>
+<circle cx="178.275" cy="184.219" r="51.4402" fill="#FF605C" stroke="#333333"/>
+<circle cx="178.275" cy="184.219" r="41.5522" fill="white"/>
+<circle cx="178.274" cy="184.218" r="31.1641" fill="#FF605C"/>
+<circle cx="178.275" cy="184.218" r="20.7761" fill="white"/>
+<circle cx="178.276" cy="184.218" r="10.388" fill="#FF605C"/>
+<path d="M183.487 184.402L178.58 184.143L180.809 179.764L225.133 154.174L225.346 154.051L225.379 153.807L225.874 150.077L229.264 148.12L230.211 154.126L230.241 154.316L230.391 154.437L235.119 158.261L231.729 160.218L228.251 158.782L228.024 158.688L227.811 158.811L183.487 184.402Z" fill="#94A6B5" stroke="#333333"/>
+</g>
+<defs>
+<clipPath id="clip0_350_819">
+<rect width="240" height="240" rx="7" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/sep_icon.svg b/public/sep_icon.svg
new file mode 100644
index 0000000..bf57d95
--- /dev/null
+++ b/public/sep_icon.svg
@@ -0,0 +1,31 @@
+<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="94.4528" cy="89.4537" r="80.071" fill="#365486"/>
+<circle cx="89.071" cy="84.071" r="79.571" fill="#61AFEF" stroke="#333333"/>
+<mask id="path-4-inside-1_350_847" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M62.4795 8.5208C65.2584 30.7985 77.8935 82.028 102.577 65.1586C135.292 42.8007 171.28 88.6532 162.68 115.077C162.812 114.959 162.944 114.832 163.075 114.695C166.984 105.261 169.14 94.918 169.14 84.071C169.14 39.849 133.291 4 89.0695 4C79.7484 4 70.7993 5.5927 62.4795 8.5208Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M62.4795 8.5208C65.2584 30.7985 77.8935 82.028 102.577 65.1586C135.292 42.8007 171.28 88.6532 162.68 115.077C162.812 114.959 162.944 114.832 163.075 114.695C166.984 105.261 169.14 94.918 169.14 84.071C169.14 39.849 133.291 4 89.0695 4C79.7484 4 70.7993 5.5927 62.4795 8.5208Z" fill="#98C379"/>
+<path d="M62.4795 8.5208L62.1475 7.57752L61.3874 7.84502L61.4872 8.64458L62.4795 8.5208ZM102.577 65.1586L102.013 64.3329L102.577 65.1586ZM162.68 115.077L161.729 114.767L160.588 118.274L163.345 115.824L162.68 115.077ZM163.075 114.695L163.797 115.388L163.927 115.252L163.999 115.078L163.075 114.695ZM61.4872 8.64458C62.883 19.8344 66.755 38.3345 73.4156 51.9591C76.7374 58.754 80.8251 64.4893 85.7803 67.4193C88.2796 68.8972 91.0059 69.6643 93.9439 69.4801C96.875 69.2963 99.9425 68.1704 103.141 65.9842L102.013 64.3329C99.0409 66.3641 96.314 67.3275 93.8187 67.484C91.3302 67.64 88.998 66.9985 86.7982 65.6977C82.3552 63.0706 78.4822 57.7692 75.2124 51.0807C68.6899 37.7385 64.8549 19.4849 63.4718 8.39702L61.4872 8.64458ZM103.141 65.9842C111.097 60.5468 119.207 59.2761 126.783 60.7908C134.385 62.3108 141.513 66.6503 147.415 72.5329C153.316 78.4138 157.948 85.795 160.573 93.315C163.202 100.844 163.792 108.431 161.729 114.767L163.631 115.386C165.869 108.511 165.185 100.457 162.462 92.6559C159.735 84.8457 154.938 77.2067 148.827 71.1163C142.718 65.0276 135.253 60.4446 127.175 58.8296C119.071 57.2095 110.414 58.5914 102.013 64.3329L103.141 65.9842ZM163.345 115.824C163.498 115.688 163.649 115.542 163.797 115.388L162.354 114.003C162.239 114.122 162.127 114.231 162.016 114.329L163.345 115.824ZM168.14 84.071C168.14 94.7844 166.01 104.998 162.152 114.313L163.999 115.078C167.957 105.525 170.14 95.0516 170.14 84.071H168.14ZM89.0695 5C132.739 5 168.14 40.4013 168.14 84.071H170.14C170.14 39.2967 133.844 3 89.0695 3V5ZM62.8115 9.46409C71.0261 6.57301 79.863 5 89.0695 5V3C79.6338 3 70.5725 4.6124 62.1475 7.57752L62.8115 9.46409Z" fill="#333333" mask="url(#path-4-inside-1_350_847)"/>
+<mask id="path-6-inside-2_350_847" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.9261 150.211C22.8387 135.79 9 111.547 9 84.0711C9 75.891 10.2266 67.9974 12.506 60.5642C19.2518 61.4765 19.1942 66.406 19.1126 73.3974C18.9845 84.3689 18.7971 100.418 44.749 113.991C55.5721 119.651 51.0637 129.72 47.1808 138.393C45.1064 143.026 43.2105 147.261 43.9261 150.211Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.9261 150.211C22.8387 135.79 9 111.547 9 84.0711C9 75.891 10.2266 67.9974 12.506 60.5642C19.2518 61.4765 19.1942 66.406 19.1126 73.3974C18.9845 84.3689 18.7971 100.418 44.749 113.991C55.5721 119.651 51.0637 129.72 47.1808 138.393C45.1064 143.026 43.2105 147.261 43.9261 150.211Z" fill="#98C379"/>
+<path d="M43.9261 150.211L43.3616 151.037L45.5118 152.507L44.8979 149.976L43.9261 150.211ZM12.506 60.5642L12.64 59.5732L11.7988 59.4595L11.55 60.271L12.506 60.5642ZM19.1126 73.3974L20.1125 73.4091L20.1125 73.4091L19.1126 73.3974ZM44.749 113.991L44.2856 114.877L44.2856 114.877L44.749 113.991ZM47.1808 138.393L48.0935 138.802L47.1808 138.393ZM44.4906 149.386C23.664 135.143 10 111.203 10 84.0711H8C8 111.891 22.0133 136.437 43.3616 151.037L44.4906 149.386ZM10 84.0711C10 75.9915 11.2115 68.1966 13.4621 60.8574L11.55 60.271C9.24177 67.7982 8 75.7905 8 84.0711H10ZM12.372 61.5552C13.9429 61.7676 15.0298 62.2023 15.7994 62.7739C16.5594 63.3384 17.0771 64.0862 17.4313 65.0471C18.1716 67.0549 18.1543 69.8183 18.1127 73.3858L20.1125 73.4091C20.1525 69.9851 20.2048 66.7881 19.3079 64.3552C18.8435 63.0958 18.1158 62.0032 16.9919 61.1683C15.8776 60.3406 14.442 59.8169 12.64 59.5732L12.372 61.5552ZM18.1127 73.3858C18.0487 78.8645 17.9572 85.8251 21.2386 93.1286C24.5314 100.458 31.1583 108.012 44.2856 114.877L45.2124 113.105C32.3878 106.398 26.1324 99.1407 23.063 92.309C19.9821 85.4518 20.0484 78.9018 20.1125 73.4091L18.1127 73.3858ZM44.2856 114.877C46.8551 116.221 48.4409 117.786 49.3662 119.456C50.2921 121.128 50.6027 122.989 50.4815 125.002C50.2351 129.092 48.2313 133.6 46.2681 137.984L48.0935 138.802C50.0132 134.514 52.2051 129.65 52.4778 125.122C52.6162 122.826 52.2672 120.567 51.1158 118.487C49.9638 116.407 48.0544 114.591 45.2124 113.105L44.2856 114.877ZM46.2681 137.984C45.2373 140.287 44.2192 142.558 43.555 144.628C42.8974 146.677 42.5292 148.694 42.9542 150.447L44.8979 149.976C44.6074 148.778 44.8293 147.202 45.4594 145.239C46.0829 143.295 47.0499 141.133 48.0935 138.802L46.2681 137.984Z" fill="#333333" mask="url(#path-6-inside-2_350_847)"/>
+<mask id="path-8-inside-3_350_847" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M150.404 135.547C135.716 153.03 113.69 164.142 89.0692 164.142C83.1033 164.142 77.2899 163.49 71.6963 162.252C76.5747 152.849 86.9336 143.197 93.5109 143.197C113.85 143.197 122.113 137.663 127.972 133.738C133.39 130.108 136.753 127.856 145.71 132.633C147.397 133.533 148.965 134.515 150.404 135.547Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M150.404 135.547C135.716 153.03 113.69 164.142 89.0692 164.142C83.1033 164.142 77.2899 163.49 71.6963 162.252C76.5747 152.849 86.9336 143.197 93.5109 143.197C113.85 143.197 122.113 137.663 127.972 133.738C133.39 130.108 136.753 127.856 145.71 132.633C147.397 133.533 148.965 134.515 150.404 135.547Z" fill="#98C379"/>
+<path d="M150.404 135.547L151.169 136.19L151.864 135.363L150.986 134.734L150.404 135.547ZM71.6963 162.252L70.8086 161.792L70.2091 162.948L71.4803 163.229L71.6963 162.252ZM93.5109 143.197L93.5109 142.197H93.5109V143.197ZM127.972 133.738L128.528 134.569L128.528 134.569L127.972 133.738ZM145.71 132.633L145.239 133.516L145.239 133.516L145.71 132.633ZM149.638 134.904C135.132 152.17 113.382 163.142 89.0692 163.142V165.142C113.998 165.142 136.299 153.89 151.169 136.19L149.638 134.904ZM89.0692 163.142C83.1765 163.142 77.4354 162.498 71.9123 161.276L71.4803 163.229C77.1444 164.482 83.0302 165.142 89.0692 165.142V163.142ZM72.584 162.713C74.9621 158.129 78.6927 153.46 82.6323 149.945C84.6001 148.189 86.5991 146.74 88.4841 145.735C90.3813 144.723 92.0948 144.197 93.5109 144.197V142.197C91.6384 142.197 89.5905 142.878 87.5431 143.97C85.4835 145.068 83.3547 146.62 81.3008 148.452C77.197 152.114 73.3089 156.972 70.8086 161.792L72.584 162.713ZM93.5109 144.197C103.773 144.197 111.038 142.801 116.502 140.883C121.97 138.964 125.589 136.538 128.528 134.569L127.415 132.907C124.496 134.863 121.053 137.166 115.84 138.996C110.624 140.827 103.588 142.197 93.5109 142.197L93.5109 144.197ZM128.528 134.569C131.281 132.725 133.29 131.399 135.671 131.021C138.003 130.65 140.853 131.176 145.239 133.516L146.18 131.751C141.609 129.313 138.299 128.577 135.357 129.046C132.462 129.506 130.081 131.121 127.415 132.907L128.528 134.569ZM145.239 133.516C146.887 134.395 148.417 135.353 149.821 136.359L150.986 134.734C149.512 133.677 147.907 132.672 146.18 131.751L145.239 133.516Z" fill="#333333" mask="url(#path-8-inside-3_350_847)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M178.472 125.503C177.367 125.503 176.472 126.399 176.472 127.503V135.102C176.472 136.207 177.367 137.102 178.472 137.102H179.634V149.755H163.709C162.604 149.755 161.709 150.651 161.709 151.755V230.905C161.709 232.009 162.604 232.905 163.709 232.905H171.2V234.309C171.2 235.413 172.095 236.309 173.2 236.309H179.593C180.698 236.309 181.593 235.413 181.593 234.309V232.905H211.268V234.309C211.268 235.413 212.163 236.309 213.268 236.309H219.661C220.766 236.309 221.661 235.413 221.661 234.309V232.905H229C230.105 232.905 231 232.009 231 230.905V151.755C231 150.651 230.105 149.755 229 149.755H214.431V137.102H214.54C215.645 137.102 216.54 136.207 216.54 135.102V127.503C216.54 126.399 215.645 125.503 214.54 125.503H178.472ZM204.941 137.102H204.322C203.218 137.102 202.322 136.207 202.322 135.102V134.884C202.322 133.78 201.427 132.884 200.322 132.884H192.689C191.585 132.884 190.689 133.78 190.689 134.884V135.102C190.689 136.207 189.794 137.102 188.689 137.102H188.07V149.755H204.941V137.102Z" fill="#365486"/>
+<rect x="200.619" y="127.508" width="8.48987" height="20.0886" fill="white" stroke="#333333"/>
+<rect x="175.312" y="127.508" width="7.43544" height="20.0886" fill="white" stroke="#333333"/>
+<rect x="157.387" y="145.433" width="68.2911" height="82.1494" rx="1.5" fill="#FFBD44" stroke="#333333"/>
+<path d="M206.444 228.022H216.838V229.487C216.838 230.591 215.943 231.487 214.838 231.487H208.444C207.34 231.487 206.444 230.591 206.444 229.487V228.022Z" fill="black"/>
+<path d="M166.376 228.022H176.77V229.487C176.77 230.591 175.874 231.487 174.77 231.487H168.376C167.271 231.487 166.376 230.591 166.376 229.487V228.022Z" fill="black"/>
+<path d="M173.649 121.181H209.718C210.546 121.181 211.218 121.853 211.218 122.681V130.28C211.218 131.108 210.546 131.78 209.718 131.78H199.5C198.672 131.78 198 131.108 198 130.28V130.062C198 128.681 196.881 127.562 195.5 127.562H187.867C186.487 127.562 185.367 128.681 185.367 130.062V130.28C185.367 131.108 184.696 131.78 183.867 131.78H173.649C172.821 131.78 172.149 131.108 172.149 130.28V122.681C172.149 121.853 172.821 121.181 173.649 121.181Z" fill="#94A6B5" stroke="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M125.305 167.709C123.096 167.709 121.305 169.5 121.305 171.709V182.48H117.277H106.535H98.4482C96.2391 182.48 94.4482 184.271 94.4482 186.48V232.194C94.4482 234.403 96.2391 236.194 98.4482 236.194H106.535H117.277H157.563H168.305H176.391C178.6 236.194 180.391 234.403 180.391 232.194V186.48C180.391 184.271 178.6 182.48 176.391 182.48H168.305H157.563H153.534V171.709C153.534 169.5 151.743 167.709 149.534 167.709H125.305ZM145.476 182.48V177.766C145.476 176.661 144.581 175.766 143.476 175.766H131.362C130.258 175.766 129.362 176.661 129.362 177.766V182.48H145.476Z" fill="#365486"/>
+<rect x="89.5488" y="177.581" width="84.9423" height="52.714" rx="3.5" fill="#CE8055" stroke="#333333"/>
+<rect x="101.634" y="177.581" width="9.74279" height="52.714" fill="#CB8F6C" stroke="#333333"/>
+<rect x="152.663" y="177.581" width="9.74279" height="52.714" fill="#CB8F6C" stroke="#333333"/>
+<path d="M119.905 162.81H144.134C146.067 162.81 147.634 164.377 147.634 166.31V177.924H140.577V172.367C140.577 170.986 139.457 169.867 138.077 169.867H125.962C124.582 169.867 123.462 170.986 123.462 172.367V177.924H116.405V166.31C116.405 164.377 117.972 162.81 119.905 162.81Z" fill="#CB8F6C" stroke="#333333"/>
+</svg>
diff --git a/src/App.jsx b/src/App.jsx
index 8e60e98..b50057b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useLocation, Routes, Route } from 'react-router-dom';
-import { About, Home, Privacy } from './pages';
+import { About, Home, Privacy, Resources } from './pages';
 import NavigationBar from './layout/NavigationBar';
 import Footer from './layout/Footer';
 import './App.css';
@@ -20,6 +20,9 @@ function App() {
         <Routes>
           <Route path='/about' element={<About />} />
         </Routes>
+        <Routes>
+          <Route path='/resources' element={<Resources />} />
+        </Routes>
       </main>
 
       <Footer />
diff --git a/src/pages/index.ts b/src/pages/index.ts
index 35fca35..58ff18a 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -1,5 +1,6 @@
 import About from './about';
 import Home from './home';
 import Privacy from './privacy';
+import Resources from './resources/index';
 
-export { About, Home, Privacy };
+export { About, Home, Privacy, Resources };
diff --git a/src/pages/resources/FolderLink.css b/src/pages/resources/FolderLink.css
new file mode 100644
index 0000000..6cc3ef1
--- /dev/null
+++ b/src/pages/resources/FolderLink.css
@@ -0,0 +1,45 @@
+.folder-link {
+  @apply
+    flex
+    flex-col
+    justify-center
+    items-center
+    gap-2
+    w-36
+    p-4
+    mx-2
+    text-lg
+    hover:scale-[1.1]
+    transition-all
+    duration-100
+    ease-out
+  ;
+}
+
+.folder-link>p {
+  @apply
+    relative
+    text-center
+    w-fit
+  ;
+}
+
+.folder-link>p::before {
+  content: '';
+
+  @apply
+    absolute
+    block
+    w-full
+    h-0.5
+    bottom-0
+    left-0
+    bg-outline
+    transition-transform
+    duration-300
+    ease-out
+    scale-x-0
+    origin-top-left
+    hover:md:scale-x-100
+  ;
+}
diff --git a/src/pages/resources/FolderLink.tsx b/src/pages/resources/FolderLink.tsx
new file mode 100644
index 0000000..723e981
--- /dev/null
+++ b/src/pages/resources/FolderLink.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import './FolderLink.css';
+
+interface FolderLinkProps {
+  label: string;
+  link: string;
+}
+
+function FolderLink(props: FolderLinkProps) {
+  return (
+    <a className='folder-link' href={props.link} target='blank'>
+      <img src='folder_icon.svg'></img>
+      <p>{props.label}</p>
+    </a>
+  );
+}
+
+export default FolderLink;
diff --git a/src/pages/resources/ResourceLink.css b/src/pages/resources/ResourceLink.css
new file mode 100644
index 0000000..6f225e3
--- /dev/null
+++ b/src/pages/resources/ResourceLink.css
@@ -0,0 +1,57 @@
+.resource-link {
+  @apply
+    flex
+    flex-row
+    justify-start
+    items-center
+    gap-4
+    px-6
+    py-4
+    text-lg
+    bg-white
+    rounded-2xl
+    border-outline
+    border-2
+    overflow-hidden
+    drop-shadow-window
+    hover:scale-[1.1]
+    transition-all
+    duration-100
+    ease-out
+  ;
+}
+
+.resource-link-icon {
+  @apply
+    text-primary
+    text-2xl
+  ;
+}
+
+.resource-link>p {
+  @apply
+    relative
+    text-nowrap
+    text-ellipsis
+  ;
+}
+
+.resource-link>p::before {
+  content: '';
+
+  @apply
+    absolute
+    block
+    w-full
+    h-0.5
+    bottom-0
+    left-0
+    bg-outline
+    transition-transform
+    duration-300
+    ease-out
+    scale-x-0
+    origin-top-left
+    hover:md:scale-x-100
+  ;
+}
diff --git a/src/pages/resources/ResourceLink.tsx b/src/pages/resources/ResourceLink.tsx
new file mode 100644
index 0000000..284c434
--- /dev/null
+++ b/src/pages/resources/ResourceLink.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { IconType } from "react-icons";
+import './ResourceLink.css';
+
+interface ResourceLink {
+  label: string;
+  link: string;
+  icon: IconType;
+}
+
+function ResourceLink(props: ResourceLink) {
+  return (
+    <a className='resource-link' href={props.link} target='blank'>
+      <props.icon className='resource-link-icon' />
+      <p>{props.label}</p>
+    </a>
+  );
+}
+
+export default ResourceLink;
diff --git a/src/pages/resources/index.css b/src/pages/resources/index.css
new file mode 100644
index 0000000..5a8626c
--- /dev/null
+++ b/src/pages/resources/index.css
@@ -0,0 +1,104 @@
+.resources {
+  @apply
+    flex
+    flex-col
+    justify-center
+    items-center
+    gap-8
+    mt-8
+    mb-16
+    md:mb-32
+  ;
+}
+
+.resources>h1 {
+  @apply
+    mx-8
+    md:mx-64
+    text-3xl
+    font-bold
+    text-center
+    text-primary
+  ;
+}
+
+.resources>section {
+  @apply
+    h-fit
+  ;
+}
+
+.resource-window-container {
+  @apply
+    flex
+    flex-col
+    gap-8
+  ;
+}
+
+.resource-window-content {
+  @apply
+    w-[75vw]
+    md:w-[24rem]
+    lg:w-[32rem]
+    px-8
+    py-16
+    md:py-8
+    lg:py-2
+    flex
+    flex-col
+    md:flex-row
+    justify-start
+    items-center
+  ;
+}
+
+.resource-window-content>img {
+  @apply
+    h-36
+    lg:h-56
+    p-0
+    md:p-4
+    lg:p-12
+  ;
+}
+
+.resource-window-text>h4 {
+  @apply
+    text-xl
+    font-bold
+  ;
+}
+
+.resource-window-text>button {
+  @apply
+    mt-4
+    px-6
+    py-3
+    bg-primary
+    text-white
+    font-subheading
+    enabled:hover:scale-[1.1]
+    enabled:hover:shadow-lg
+    transition-all
+    duration-100
+    ease-out
+  ;
+}
+
+.resource-window-text>button:disabled {
+  @apply
+    bg-slate-500
+    opacity-80
+  ;
+}
+
+.resource-link-container {
+  @apply
+    flex
+    flex-col
+    gap-8
+    w-full
+    md:w-fit
+  ;
+}
diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx
new file mode 100644
index 0000000..28b6c21
--- /dev/null
+++ b/src/pages/resources/index.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import WindowCard from '../../layout/WindowCard';
+import { FaTelegramPlane } from 'react-icons/fa';
+import { SiLinktree } from "react-icons/si";
+import './index.css';
+import ResourceLink from './ResourceLink';
+import FolderLink from './FolderLink';
+
+function Resources() {
+  return (
+    <div className='resources'>
+      <h1>
+        Resources
+      </h1>
+
+      <section className='md:items-start'>
+        <div className='resource-window-container'>
+          <WindowCard content={<div className='resource-window-content'>
+            <img src='planner_icon.svg'></img>
+            <div className='resource-window-text'>
+              <h4>Study Planner</h4>
+              <p>Chart out your academic journey.</p>
+              <button disabled>Coming Soon!</button>
+            </div>
+          </div>}></WindowCard>
+
+          <WindowCard content={<div className='resource-window-content'>
+            <img src='sep_icon.svg'></img>
+            <div className='resource-window-text'>
+              <h4>SEP Points Tracker</h4>
+              <p>Monitor your SEP points.</p>
+              <button disabled>Coming Soon!</button>
+            </div>
+          </div>}></WindowCard>
+        </div>
+
+        <div className='resource-link-container'>
+          <ResourceLink
+            label='t.me/nuscomputingclub'
+            link='https://t.me/nuscomputingclub'
+            icon={FaTelegramPlane}
+          ></ResourceLink>
+          <ResourceLink
+            label='t.me/nus_soc_printer_bot'
+            link='https://t.me/nus_soc_printer_bot'
+            icon={FaTelegramPlane}
+          ></ResourceLink>
+          <ResourceLink
+            label='linktr.ee/nuscomputingclub'
+            link='https://linktr.ee/nuscomputingclub'
+            icon={SiLinktree}
+          ></ResourceLink>
+
+          <div className='flex flex-col'>
+            <div className='flex flex-row justify-center'>
+              <FolderLink
+                label='Photos'
+                link='https://www.flickr.com/photos/137141057@N04/albums/'
+              ></FolderLink>
+              <FolderLink
+                label='Maps'
+                link='https://www.comp.nus.edu.sg/maps/venues/'
+              ></FolderLink>
+            </div>
+            <div className='flex flex-row justify-center'>
+              <FolderLink
+                label='Merch'
+                link='https://nusfastpay.nus.edu.sg/ccmerch/menu'
+              ></FolderLink>
+              <FolderLink
+                label='Others'
+                link='/'
+              ></FolderLink>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default Resources;

From 31e4d1683044fc9cf5b5c0f4e2e4453a727bd4e7 Mon Sep 17 00:00:00 2001
From: Leslie Yip <leslieyip02@gmail.com>
Date: Wed, 28 Feb 2024 02:08:35 +0800
Subject: [PATCH 2/3] Lint

---
 src/pages/resources/FolderLink.tsx   | 2 +-
 src/pages/resources/ResourceLink.tsx | 4 ++--
 src/pages/resources/index.tsx        | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/resources/FolderLink.tsx b/src/pages/resources/FolderLink.tsx
index 723e981..3ea06ae 100644
--- a/src/pages/resources/FolderLink.tsx
+++ b/src/pages/resources/FolderLink.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 import './FolderLink.css';
 
 interface FolderLinkProps {
diff --git a/src/pages/resources/ResourceLink.tsx b/src/pages/resources/ResourceLink.tsx
index 284c434..771af0b 100644
--- a/src/pages/resources/ResourceLink.tsx
+++ b/src/pages/resources/ResourceLink.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { IconType } from "react-icons";
+import React from 'react';
+import { IconType } from 'react-icons';
 import './ResourceLink.css';
 
 interface ResourceLink {
diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx
index 28b6c21..1c3db41 100644
--- a/src/pages/resources/index.tsx
+++ b/src/pages/resources/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import WindowCard from '../../layout/WindowCard';
 import { FaTelegramPlane } from 'react-icons/fa';
-import { SiLinktree } from "react-icons/si";
+import { SiLinktree } from 'react-icons/si';
 import './index.css';
 import ResourceLink from './ResourceLink';
 import FolderLink from './FolderLink';

From 3b0b9db62ec07d51e08a72dd9efafc0f0b52264d Mon Sep 17 00:00:00 2001
From: Leslie Yip <leslieyip02@gmail.com>
Date: Wed, 28 Feb 2024 23:28:01 +0800
Subject: [PATCH 3/3] Fix style

---
 src/pages/resources/ResourceLink.css | 4 +++-
 src/pages/resources/index.css        | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/resources/ResourceLink.css b/src/pages/resources/ResourceLink.css
index 6f225e3..dba6af4 100644
--- a/src/pages/resources/ResourceLink.css
+++ b/src/pages/resources/ResourceLink.css
@@ -5,6 +5,7 @@
     justify-start
     items-center
     gap-4
+    w-full
     px-6
     py-4
     text-lg
@@ -31,7 +32,8 @@
 .resource-link>p {
   @apply
     relative
-    text-nowrap
+    break-all
+    truncate
     text-ellipsis
   ;
 }
diff --git a/src/pages/resources/index.css b/src/pages/resources/index.css
index 5a8626c..c1c60df 100644
--- a/src/pages/resources/index.css
+++ b/src/pages/resources/index.css
@@ -99,6 +99,8 @@
     flex-col
     gap-8
     w-full
-    md:w-fit
+    max-w-[75vw]
+    md:w-[16rem]
+    lg:w-[24rem]
   ;
 }