feat: Add open source page

src/app/open-source/ProjectCard.tsx

@@ -0,0 +1,41 @@
+import Button from '@/components/Button';
+import FancyRectangle from '@/components/FancyRectangle';
+import type { Project } from '@/data/projects';
+import Image from 'next/image';
+import { FaGithub } from 'react-icons/fa';
+
+export default function ProjectCard({ project }: { project: Project }) {
+    return (
+        <FancyRectangle colour="white" offset="8" rounded fullWidth>
+            <div className="w-full gap-6 rounded-xl bg-white p-4 text-black">
+                <Image
+                    src={`/images/projects/${project.image}`}
+                    alt={`${project.title}`}
+                    width={450}
+                    height={450}
+                    className="w-full shrink-0 rounded-lg border-[3px] border-black bg-white object-contain"
+                />
+                <div className="mt-4 space-y-2 md:space-y-4">
+                    <div className="gap-6">
+                        <div className="space-y-2">
+                            <h4 className="text-2xl font-bold md:pb-1 md:text-3xl">
+                                {project.title}
+                            </h4>
+                            <p>{project.description}</p>
+                        </div>
+                    </div>
+                    <Button
+                        colour="orange"
+                        href={project.githubLink}
+                        width="w-full"
+                        size="small"
+                        targetBlank={true}
+                    >
+                        <FaGithub className="mr-2 inline-block text-xl md:text-2xl" />
+                        View on GitHub
+                    </Button>
+                </div>
+            </div>
+        </FancyRectangle>
+    );
+}

src/app/open-source/page.tsx

@@ -0,0 +1,98 @@
+import Title from '@/components/Title';
+import { PROJECTS } from '@/data/projects';
+import type { Metadata } from 'next';
+import ProjectCard from './ProjectCard';
+
+export const metadata: Metadata = {
+    title: 'Open Source',
+};
+
+export default function OpenSourcePage() {
+    return (
+        <main className="relative">
+            <div className="h-full">
+                <div className="mb-8 flex justify-center">
+                    <Title colour="purple">Open Source</Title>
+                </div>
+                <div className="container mx-auto px-4">
+                    <section className="mb-8">
+                        <h2 className="mb-4 text-2xl font-bold">Who is the Open Source Team?</h2>
+                        <p className="text-lg md:text-xl">
+                            The CS Club Open Source Team is a place for creative and inventive
+                            students who want to build innovative open-source software together. We
+                            are a new team currently working on a few projects, but we have many
+                            more exciting projects planned for the future!
+                        </p>
+                    </section>
+                    <section className="mb-8">
+                        <h2 className="mb-4 text-2xl font-bold">Our Projects</h2>
+                        <div className="grid gap-8 sm:grid-cols-1 md:grid-cols-2">
+                            {PROJECTS.map((project, i) => (
+                                <ProjectCard key={i} project={project} />
+                            ))}
+                        </div>
+                    </section>
+                    <section className="mb-8">
+                        <h2 className="mb-4 text-2xl font-bold">How to join?</h2>
+                        <p className="text-lg md:text-xl">
+                            Looking to join an active and welcoming student developer community?
+                            We&apos;re always on the lookout for enthusiastic and creative students
+                            to join us, learn, and contribute to making useful open-source projects.
+                            Join our team by filling out{' '}
+                            <a
+                                href="https://docs.google.com/forms/d/e/1FAIpQLSe2uvnn4qW95yJ7TzyDo7QMjzhkawvdERRDmeBLMwloi-nqjg/viewform?usp=sf_link"
+                                className="underline"
+                            >
+                                this Google Form
+                            </a>
+                            .
+                        </p>
+                    </section>
+                    <section className="mb-8">
+                        <h2 className="mb-4 text-2xl font-bold">
+                            Contributing Guidelines & Code of Conduct
+                        </h2>
+                        <p className="text-lg md:text-xl">
+                            The CS Club Open Source Team follows our{' '}
+                            <a
+                                href="https://github.com/compsci-adl/.github/blob/main/CONTRIBUTING.md"
+                                className="underline"
+                            >
+                                Contributing Guidelines
+                            </a>{' '}
+                            and{' '}
+                            <a
+                                href="https://github.com/compsci-adl/.github/blob/main/CODE_OF_CONDUCT.md"
+                                className="underline"
+                            >
+                                Code of Conduct
+                            </a>
+                            .
+                        </p>
+                    </section>
+                    <section className="mb-8">
+                        <h2 className="mb-4 text-2xl font-bold">Contact Us</h2>
+                        <p className="mt-2 text-lg md:text-xl">
+                            The open-source managers are{' '}
+                            <a href="https://github.com/phoenixpereira" className="underline">
+                                Phoenix Pereira
+                            </a>{' '}
+                            and{' '}
+                            <a href="https://github.com/jsun969" className="underline">
+                                Justin Sun
+                            </a>
+                            .
+                        </p>
+                        <p className="mt-2 text-lg md:text-xl">
+                            If you have any queries, please contact us via{' '}
+                            <a className="underline" href="mailto:[email protected]">
+                                [email protected]
+                            </a>
+                            .
+                        </p>
+                    </section>
+                </div>
+            </div>
+        </main>
+    );
+}

src/components/Button.tsx

@@ -13,6 +13,7 @@ interface ButtonProps {
     loading?: boolean;
     size?: 'base' | 'small';
     font?: string;
+    targetBlank?: boolean;
 }
 
 const Button = ({
@@ -25,6 +26,7 @@ const Button = ({
     loading,
     font,
     size = 'base',
+    targetBlank = false,
 }: ButtonProps) => {
     const isAnchor = !!href;
     const Component = isAnchor ? 'a' : 'button';
@@ -35,7 +37,18 @@ const Button = ({
                 href={isAnchor ? href : undefined}
                 onClick={onClick}
                 type={isAnchor ? undefined : type}
-                className={`${width} ${font ?? 'text-lg md:text-base'} ${BG_COLOURS[colour]} ${isAnchor ? 'hover:bg-yellow' : 'hover:enabled:bg-yellow'} whitespace-nowrap border-2 border-black  ${size == 'base' ? 'px-16 text-lg' : 'px-4 text-sm'} py-4 font-bold transition-colors duration-300 disabled:cursor-wait disabled:grayscale md:px-2 md:py-1 md:text-base lg:px-6 lg:py-2`}
+                target={isAnchor && targetBlank ? '_blank' : undefined}
+                rel={isAnchor && targetBlank ? 'noopener noreferrer' : undefined}
+                className={`
+                    ${width} ${font ?? 'text-lg md:text-base'} ${BG_COLOURS[colour]} 
+                    ${isAnchor ? 'hover:bg-yellow' : 'hover:enabled:bg-yellow'} 
+                    whitespace-nowrap border-2 border-black 
+                    ${size === 'base' ? 'px-16 text-lg' : 'px-4 text-sm'} flex 
+                    items-center justify-center py-4 
+                    font-bold transition-colors 
+                    duration-300 disabled:cursor-wait disabled:grayscale md:px-2 md:py-1
+                    md:text-base lg:px-6 lg:py-2
+                `}
                 disabled={loading}
             >
                 {children}

src/components/Header/components/Links.tsx

@@ -31,18 +31,20 @@ export function MenuLinks({ data, onClick }: { data: HeaderData; onClick?: () =>
     );
 }
 
-const LINKS = ['about', 'events', 'sponsors', 'contact'];
+const LINKS = [
+    { title: 'About', href: '/about' },
+    { title: 'Events', href: '/events' },
+    { title: 'Sponsors', href: '/sponsors' },
+    { title: 'Open Source', href: '/open-source' },
+    { title: 'Contact', href: '/contact' },
+];
+
 export function Links({ onClick }: { onClick?: () => void }) {
     return (
         <>
             {LINKS.map((link, i) => (
-                <Link
-                    href={`/${link}`}
-                    className="block capitalize hover:underline"
-                    onClick={onClick}
-                    key={i}
-                >
-                    {link}
+                <Link href={link.href} className="block hover:underline" onClick={onClick} key={i}>
+                    {link.title}
                 </Link>
             ))}
         </>

src/data/projects.ts

@@ -0,0 +1,21 @@
+export interface Project {
+    title: string;
+    description: string;
+    image: string;
+    githubLink: string;
+}
+
+export const PROJECTS: Project[] = [
+    {
+        title: 'CS Club Website',
+        description: "The Computer Science Club's website.",
+        image: 'website.png',
+        githubLink: 'https://github.com/compsci-adl/website',
+    },
+    {
+        title: 'DuckBot',
+        description: "A Discord bot for the CS Club's Discord Server.",
+        image: 'duckbot.png',
+        githubLink: 'https://github.com/compsci-adl/duckbot',
+    },
+];