Feat/mentor and director help

app/(pages)/(hackers)/(hub)/page.tsx

@@ -1,15 +1,15 @@
-import PrizeTracks from '@pages/(hackers)/_components/PrizeTracks/PrizeTracks';
+// import PrizeTracks from '@pages/(hackers)/_components/PrizeTracks/PrizeTracks';
 import BeginnersSection from '@pages/(hackers)/_components/BeginnersSection/BeginnersSection';
 import Discord from '@pages/(hackers)/_components/StayUpToDate/Discord';
 import Footer from '@components/Footer/Footer';
 import Hero from '../_components/Hero/Hero';
-import Contact from '@pages/(hackers)/_components/Contact/Contact';
 // import IndexHero from '@pages/(hackers)/_components/IndexHero/IndexHero';
 // import IndexHeroContentHacking from '@pages/(hackers)/_components/DOE/Hacking/IndexHeroContentHacking';
 // import IndexHeroContentJudging from '@pages/(hackers)/_components/DOE/Judging/IndexHeroContentJudging';
 import ClientTimeProtectedDisplay from '@pages/_components/TimeProtectedDisplay/ClientTimeProtectedDisplay';
 import TableNumberCheckin from '@pages/(hackers)/_components/TableNumberCheckin/TableNumberCheckin';
 import TableNumberContextProvider from '@pages/_contexts/TableNumberContext';
+import MDHelp from '@pages/(hackers)/_components/MentorAndDirectorHelp/MDHelp';
 
 export default function Page() {
   return (
@@ -29,9 +29,9 @@ export default function Page() {
         </ClientTimeProtectedDisplay>
       </TableNumberContextProvider>
       <BeginnersSection />
-      <Contact />
+      <MDHelp />
       <Discord />
-      <PrizeTracks />
+      {/* <PrizeTracks /> */}
       <Footer />
     </main>
   );

app/(pages)/(hackers)/_components/MentorAndDirectorHelp/MDHelp.tsx

@@ -0,0 +1,44 @@
+import { Card } from './MDHelpCards';
+
+// Items for Mapping
+const items = [
+  {
+    title: 'Mentor Help',
+    description:
+      'Stuck on a problem and need guidance? Contact a HackDavis mentor through our discord.',
+    image: '/components/MDHelp/cow.svg',
+    link: 'https://discord.gg/wc6QQEc',
+    linkName: 'CONTACT A MENTOR',
+  },
+  {
+    title: 'Director Help',
+    description:
+      'Got questions about this event? Contact a HackDavis director through our discord.',
+    image: '/components/MDHelp/duck.svg',
+    link: 'https://discord.gg/wc6QQEc',
+    linkName: 'CONTACT A DIRECTOR',
+  },
+];
+
+export default function cardTest() {
+  return (
+    <div className="flex bg-[#FAFAFF]">
+      {/* Main Content */}
+      <main className="flex px-[5%] py-[10%] w-full">
+        {/* Items Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-10 w-full 2xl:flex items-center">
+          {items.map((item, index) => (
+            <Card
+              key={index}
+              image={item.image}
+              title={item.title}
+              description={item.description}
+              link={item.link}
+              linkName={item.linkName}
+            />
+          ))}
+        </div>
+      </main>
+    </div>
+  );
+}

app/(pages)/(hackers)/_components/MentorAndDirectorHelp/MDHelpCards.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import Image from 'next/image';
+import { Plus_Jakarta_Sans, DM_Mono } from 'next/font/google';
+
+// Fonts
+const plusJakarta = Plus_Jakarta_Sans({
+  subsets: ['latin'],
+  weight: ['400', '500', '600'],
+});
+
+const dmMono = DM_Mono({
+  subsets: ['latin'],
+  weight: ['500'],
+});
+
+export interface CardProps {
+  image: string;
+  title: string;
+  description: string;
+  link?: string;
+  linkName: string;
+}
+
+// Mentor and Director Card Component
+export const Card: React.FC<CardProps> = ({
+  image,
+  title,
+  description,
+  link = '#',
+  linkName,
+}) => {
+  return (
+    <div className="flex flex-col w-full rounded-2xl">
+      {/* Image */}
+      <div className="relative w-full">
+        <Image
+          src={image}
+          alt={image}
+          width={1}
+          height={1}
+          className="w-full h-auto m-0 rounded-t-2xl"
+        />
+      </div>
+
+      {/* Card Descriptions */}
+      <div className="h-full rounded-b-2xl flex flex-col px-6 pt-4 md:pt-[30px] pb-8 bg-[#FFFFFF] ">
+        {/* Card Title */}
+        <h2
+          className={`${plusJakarta.className} font-semibold text-[#3F3F3F] text-[22px] md:text-[32px] mb-4 md:mb-7 leading-normal tracking-[0.44px]`}
+        >
+          {title}
+        </h2>
+
+        {/* Card Description */}
+        <p
+          className={`${plusJakarta.className} font-normal text-[#606269] text-4 mb-8 md:mb-16`}
+        >
+          {description}
+        </p>
+
+        {/* Card Links */}
+        <div className="flex items-end mt-auto">
+          <Image
+            src="/components/MDHelp/arrow.svg"
+            alt={image}
+            width={1}
+            height={1}
+            className="w-6 h-auto m-0"
+          />
+
+          <a
+            href={link}
+            className={`${dmMono.className} leading-none m-0.5 text-[#3F3F3F] font-medium border-b border-[#3F3F3F]`}
+            target="_blank"
+          >
+            {linkName}
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};

app/(pages)/(hackers)/_components/StayUpToDate/Discord.tsx

@@ -5,11 +5,11 @@ import TextCard from '../BeginnersSection/TextCard';
 export default function Discord() {
   return (
     <div className="flex flex-col md:flex-row items-center justify-between px-[5%] py-[10%] gap-12 md:gap-0 bg-[#0B2638]">
-      <div className="flex-1">
+      <div className="flex-1 flex justify-start">
         <TextCard
           short_text="JOIN US"
           title="Stay Up To Date"
-          long_text="Get our announcements updates in our discord and instagram."
+          long_text="Get our live announcement updates in our discord, and connect with other hackers, mentors, and directors!"
           button_text="JOIN DISCORD"
           button_link="https://discord.gg/wc6QQEc"
           button_color="9EE7E5"

auth.ts

@@ -97,4 +97,4 @@ export const { auth, handlers, signIn, signOut } = NextAuth({
     },
   },
   secret: process.env.AUTH_SECRET,
-});
+});