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 @@
+
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 @@
+
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 @@
+
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() {
} />
+
+ } />
+
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..3ea06ae
--- /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 (
+
+
+ {props.label}
+
+ );
+}
+
+export default FolderLink;
diff --git a/src/pages/resources/ResourceLink.css b/src/pages/resources/ResourceLink.css
new file mode 100644
index 0000000..dba6af4
--- /dev/null
+++ b/src/pages/resources/ResourceLink.css
@@ -0,0 +1,59 @@
+.resource-link {
+ @apply
+ flex
+ flex-row
+ justify-start
+ items-center
+ gap-4
+ w-full
+ 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
+ break-all
+ truncate
+ 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..771af0b
--- /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 (
+
+
+ {props.label}
+
+ );
+}
+
+export default ResourceLink;
diff --git a/src/pages/resources/index.css b/src/pages/resources/index.css
new file mode 100644
index 0000000..c1c60df
--- /dev/null
+++ b/src/pages/resources/index.css
@@ -0,0 +1,106 @@
+.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
+ max-w-[75vw]
+ md:w-[16rem]
+ lg:w-[24rem]
+ ;
+}
diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx
new file mode 100644
index 0000000..1c3db41
--- /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 (
+
+
+ Resources
+
+
+
+
+
+
+
+
Study Planner
+
Chart out your academic journey.
+
+
+ }>
+
+
+
+
+
SEP Points Tracker
+
Monitor your SEP points.
+
+
+ }>
+
+
+
+
+
+ );
+}
+
+export default Resources;