add resources page

frontend/next.config.js

@@ -1,5 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  experimental: {
+    optimizePackageImports: ['icon-library'],
+  },
   env: {
   }, 
   images: {
@@ -28,4 +31,9 @@ const nextConfig = {
   output: 'standalone'
 }
 
-module.exports = nextConfig
+// const withBundleAnalyzer = require('@next/bundle-analyzer')({
+//   enabled: process.env.ANALYZE === 'true',
+// })
+
+// module.exports = withBundleAnalyzer(nextConfig)
+module.exports = nextConfig

frontend/package.json

@@ -9,8 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@mui/material": "^6.1.0",
+    "@next/bundle-analyzer": "^15.0.3",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-select": "^2.1.1",
@@ -39,7 +38,6 @@
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "3.4.11",
     "tailwindcss-animate": "^1.0.7",
-    "triple-beam": "^1.4.1",
     "typescript": "5.6.2"
   },
   "devDependencies": {

frontend/src/app/layout.tsx

@@ -4,7 +4,7 @@ import PlausibleProvider from 'next-plausible'
 
 export const metadata = {
   title: "Langara Computer Science Club",
-  description: "Website for Langara Computer Science Club.",
+  description: "The official website of the Langara Computer Science Club.",
 }
 
 export default function RootLayout({

frontend/src/app/page.tsx

@@ -6,17 +6,6 @@ import NavBar from './shared_components/header/NavBar';
 
 export default function Home() {
 
-    // useEffect(() => {
-    //     function handleResize() {
-    //         setIsWideScreen(window.innerWidth >= 768); // Adjust the breakpoint as needed
-    //     }
-
-    //     handleResize(); // Set initial state
-
-    //     window.addEventListener('resize', handleResize);
-    //     return () => window.removeEventListener('resize', handleResize);
-    // }, []);
-
     return (
         <div className='h-screen w-full bg-body-gray'>
             <main className="grid grid-rows-[10vh_1fr] dark max-[600px]:grid-rows-[20vh_1fr] h-full w-full overflow-y-visible overflow-x-hidden">

frontend/src/app/resources/ResourcesPage.tsx

@@ -0,0 +1,57 @@
+import { Link } from "lucide-react"
+import ResourceButton from "./resourceButton";
+
+export default async function ResourcesPage() {
+
+    return (
+        <div className="flex flex-col gap-3">
+            <h1 className="text-3xl font-semibold pt-4">Resources</h1>
+
+            <p>The Langara Computer Science Club has a list of resources gathered by students for students.</p>
+
+            <br></br>
+            <h2 className="text-2xl font-semibold pt-4">SFU & UBC Transfer Guides</h2>
+            <p>Over the years, several Langara alumni have spent a generous amount of time compiling their experiences into transfer guides with advice, common pitfalls, and other recommendations. A list of these can be found below.</p>
+            <p>The LCSC also holds a Transfer Panel in November of each year where you can connect with Langara alumni who have successfully went through the steps of transferring from Langara.</p>
+            {/* <p>You can find more information at the link below:</p> */}
+            <ResourceButton text="Transfer Resources" link="https://langaracs.notion.site/Transfer-Information-a0548da4b3084681868381310c604c34"></ResourceButton>
+
+            <br></br>
+            <h2 className="text-2xl font-semibold pt-4">Langara Course Planner</h2>
+            <p>The Langara Course Planner is an unofficial website that you can use to help plan your courses at Langara. It aggregates information about course attributes, transfer agreements, previous offerings, and more and lets you plan your courses using a visually based approach.</p>
+            <ResourceButton text="Langara Course Planner" link="https://planner.langaracs.ca"></ResourceButton>
+
+            <br></br>
+            <h2 className="text-2xl font-semibold pt-4">Course Outlines</h2>
+            <p>If you would like more information about the structure of a course, check out the #course-outlines channel on our discord server. We have course outlines for almost all computer science courses as well as some other courses.</p>
+            <ResourceButton text="LCSC Discord" link="https://discord.gg/langara-computer-science-club-753037165050593300"></ResourceButton>
+
+
+
+
+            <br></br>
+            <h2 className="text-2xl font-semibold pt-4">Langara Course API</h2>
+            <p>The Langara Course API is a non-official REST API that provides information about courses at Langara. Check it out at the link below.</p>
+            <ResourceButton text="Langara Course API" link="https://coursesapi.langaracs.ca"></ResourceButton>
+
+            <br></br>
+            <h2 className="text-2xl font-semibold pt-4">Non LCSC Resources</h2>
+            <p>These resources are not offered by the LCSC, but you may find them helpful:</p>
+
+
+            <p className="text-l font-semibold pt-4">Linkedin Learning Pro</p>
+            <p>You get free access to LinkedIn Learning through Langara. This includes training, courses, and certificats, all of which you can get completely for free.</p>
+            <ResourceButton text="LinkedIn Learning" link="https://langara.ca/information-technology/it-services/teaching-learning-tools/linkedin-learning.html"></ResourceButton>
+
+
+            <p className="text-l font-semibold pt-4">Textbook Lookup</p>
+            <p>You can lookup which textbook is used for a course through the Langara Bookstore website.</p>
+            <ResourceButton text="Langara Bookstore" link="https://mycampusstore.langara.bc.ca/buy_courselisting.asp?selTerm=3%7C8"></ResourceButton>
+
+            <p className="text-l font-semibold pt-4">Github Student Developer Pack</p>
+            <p>Free access to tons of software, notably free domains, free cloud credits, and much more.</p>
+            <ResourceButton text="Github Student Developer Pack" link="https://education.github.com/pack"></ResourceButton>
+
+        </div>
+    );
+}

frontend/src/app/resources/page.tsx

@@ -0,0 +1,16 @@
+import ResourcesPage from './ResourcesPage';
+import NavBar from "../shared_components/header/NavBar";
+import Footer from "../shared_components/footer/Footer";
+
+export default function Page() {
+    return (
+        <main className="grid grid-rows-[10vh_1fr] bg-body-gray  max-[600px]:grid-rows-[20vh_1fr]">
+            <NavBar/>
+            <div className="p-[20px] pt-5 max-w-6xl mx-auto"> 
+
+                <ResourcesPage />
+            </div>
+            <Footer />
+        </main>
+    );
+}

frontend/src/app/resources/resourceButton.tsx

@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+interface ResourceButtonProps {
+  link: string;
+  text: string;
+}
+
+export default function ResourceButton({ text, link }: ResourceButtonProps) {
+  return (
+    <Link href={link} target="_blank" className="w-fit">
+      <button className="bg-lang-orange p-2 border-1 border-white hover:bg-lang-orange rounded text-white h-10 font-bold">
+        {text}
+      </button>
+    </Link>
+  );
+}
+

frontend/src/app/shared_components/footer/Footer.tsx

@@ -1,5 +1,4 @@
 import { Button } from "@/components/ui/button";
-import React from "react";
 import SocialIcons from "../SocialIcons";
 import Link from "next/link";
 

frontend/src/app/shared_components/header/NavBar.tsx

@@ -5,19 +5,14 @@ import Menu from "../Menu";
 import NavButton from "./NavButton";
 
 export default function NavBar() {
-    const Pages = new Map<string, string>([
-        ["Home", "/"],
-        ["About", "/about"],
-        ["Events", "/events"]
-    ]);
-
-    const navButtons = Array.from(Pages).map(([key, value]) => (
-        <NavButton
-            Label={key}
-            key={key}
-            EndPoint={value}
-        />
-    ));
+    const navButtons = (
+        <>
+            <NavButton Label="Home" key="Home" EndPoint="/" />
+            <NavButton Label="About" key="About" EndPoint="/about" />
+            <NavButton Label="Events" key="Events" EndPoint="/events" />
+            <NavButton Label="Resources" key="Resources" EndPoint="/resources" />
+        </>
+    );
 
     return (
         <div>
@@ -36,7 +31,7 @@ export default function NavBar() {
                         </div>
                     </div>
                     <div className="dropdown lg:hidden">
-                        <Menu Buttons={navButtons} />
+                        <Menu Buttons={Array.isArray(navButtons) ? navButtons : [navButtons]} />
                     </div>
                 </div>
             </nav>