Beginners & Discord: finished dev and mobile

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

@@ -1,7 +1,8 @@
 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 Footer from '@pages/_components/Footer/Footer';
 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';
@@ -29,6 +30,7 @@ export default function Page() {
       </TableNumberContextProvider>
       <BeginnersSection />
       <Contact />
+      <Discord />
       <PrizeTracks />
       <Footer />
     </main>

app/(pages)/(hackers)/_components/2025BeginnersSection/BeginnersSection.tsx

@@ -0,0 +1,55 @@
+import styles from './BeginnersSection.module.scss';
+import Image from 'next/image';
+import Link from 'next/link';
+import hackathon from 'public/hackers/mvp/hackathon.svg';
+import arrow from 'public/hackers/mvp/arrow.svg';
+import grass_detail_light from 'public/hackers/mvp/grass_detail_light.svg';
+import grass_detail_dark from 'public/hackers/mvp/grass_detail_dark.svg';
+
+export default function BeginnersSection() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.main_content}>
+        <div>
+          <p className={styles.top_line}>
+            NOT SURE WHERE TO START? DON'T WORRY, WE GOT YOU :)
+          </p>
+          <h1>For beginners</h1>
+          <p className={styles.description}>
+            We've created a <strong>Starter kit</strong> for all beginner
+            hackers to get their hack started! Inside includes: resources, past
+            winning hacks, and more.
+          </p>
+        </div>
+        <div className={styles.hackathon_cont}>
+          <div className={styles.hack_img}>
+            <Image src={hackathon} alt="hackathon" fill />
+            <Image
+              src={grass_detail_light}
+              alt="grass detail"
+              className={styles.grass_light}
+            />
+          </div>
+          <div className={styles.button}>
+            <Link href="/starter-kit" className="h-full w-full">
+              <button>
+                <Image src={arrow} alt="arrow" />
+                TAKE ME TO THE STARTER KIT!
+              </button>
+            </Link>
+            <Image
+              src={grass_detail_light}
+              alt="grass detail"
+              className={styles.grass_light}
+            />
+            <Image
+              src={grass_detail_dark}
+              alt="grass detail"
+              className={styles.grass_dark}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(pages)/(hackers)/_components/BeginnersSection/BeginnersSection.tsx

@@ -1,53 +1,41 @@
-import styles from './BeginnersSection.module.scss';
 import Image from 'next/image';
-import Link from 'next/link';
-import hackathon from 'public/hackers/mvp/hackathon.svg';
-import arrow from 'public/hackers/mvp/arrow.svg';
-import grass_detail_light from 'public/hackers/mvp/grass_detail_light.svg';
-import grass_detail_dark from 'public/hackers/mvp/grass_detail_dark.svg';
+import grass_top from 'public/hackers/mvp/beginners/grass_top.svg';
+import mobile_grass_top from 'public/hackers/mvp/beginners/mobile_grass_top.svg';
+import mascots from 'public/hackers/mvp/beginners/mascots.svg';
+import TextCard from './TextCard';
 
 export default function BeginnersSection() {
   return (
-    <div className={styles.container}>
-      <div className={styles.main_content}>
-        <div>
-          <p className={styles.top_line}>
-            NOT SURE WHERE TO START? DON'T WORRY, WE GOT YOU :)
-          </p>
-          <h1>For beginners</h1>
-          <p className={styles.description}>
-            We've created a <strong>Starter kit</strong> for all beginner
-            hackers to get their hack started! Inside includes: resources, past
-            winning hacks, and more.
-          </p>
+    <div className="bg-[#F1FFCC]">
+      <Image
+        src={grass_top}
+        alt="grass detail lining top of section"
+        className="hidden md:block w-full h-auto"
+      />
+      <Image
+        src={mobile_grass_top}
+        alt="grass detail lining top of section"
+        className="md:hidden w-full h-auto"
+      />
+      <div className="flex flex-col md:flex-row items-center justify-between px-[5%] py-[10%] gap-12 md:gap-0">
+        <div className="flex-1 flex justify-center md:justify-start">
+          <Image
+            src={mascots}
+            width={424}
+            height={611}
+            alt="four hackdavis mascots looking at a computer"
+          />
         </div>
-        <div className={styles.hackathon_cont}>
-          <div className={styles.hack_img}>
-            <Image src={hackathon} alt="hackathon" fill />
-            <Image
-              src={grass_detail_light}
-              alt="grass detail"
-              className={styles.grass_light}
-            />
-          </div>
-          <div className={styles.button}>
-            <Link href="/starter-kit" className="h-full w-full">
-              <button>
-                <Image src={arrow} alt="arrow" />
-                TAKE ME TO THE STARTER KIT!
-              </button>
-            </Link>
-            <Image
-              src={grass_detail_light}
-              alt="grass detail"
-              className={styles.grass_light}
-            />
-            <Image
-              src={grass_detail_dark}
-              alt="grass detail"
-              className={styles.grass_dark}
-            />
-          </div>
+        <div className="flex flex-1 justify-end">
+          <TextCard
+            short_text="CHECK IT OUT"
+            title="For Beginners"
+            long_text="We’ve created a Starter kit for all beginner hackers to get their hack started! Inside includes: resources, past winning hacks, and more."
+            button_text="STARTER KIT"
+            button_link="/starter-kit"
+            button_color="D1F76E"
+            text_color="1A3819"
+          />
         </div>
       </div>
     </div>

app/(pages)/(hackers)/_components/BeginnersSection/TextCard.tsx

@@ -0,0 +1,47 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import button_arrow from 'public/hackers/mvp/beginners/button_arrow.svg';
+
+interface TextCardProps {
+  short_text: string;
+  title: string;
+  long_text: string;
+  button_text: string;
+  button_link: string;
+  button_color: string;
+  text_color: string;
+  is_external?: boolean;
+}
+
+export default function TextCard({
+  short_text,
+  title,
+  long_text,
+  button_text,
+  button_link,
+  button_color,
+  text_color,
+  is_external = false,
+}: TextCardProps) {
+  return (
+    <div style={{ color: `#${text_color}` }} className="flex flex-col gap-4">
+      <p>{short_text}</p>
+      <h2 className="font-semibold">{title}</h2>
+      <p>{long_text}</p>
+      <Link
+        href={button_link}
+        target={is_external ? '_blank' : '_self'}
+        rel={is_external ? 'noopener noreferrer' : undefined}
+        className="mt-8"
+      >
+        <button
+          style={{ backgroundColor: `#${button_color}` }}
+          className="flex flex-row items-center justify-center gap-[10px] px-10 py-5 md:px-[50px] md:py-[40px] rounded-[1000px] text-[#003D3D] font-semibold"
+        >
+          {button_text}
+          <Image src={button_arrow} alt="small arrow" />
+        </button>
+      </Link>
+    </div>
+  );
+}

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

@@ -0,0 +1,30 @@
+import Image from 'next/image';
+import bunny_phone from 'public/hackers/mvp/discord/bunny_phone.svg';
+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">
+        <TextCard
+          short_text="JOIN US"
+          title="Stay Up To Date"
+          long_text="Get our announcements updates in our discord and instagram."
+          button_text="JOIN DISCORD"
+          button_link="https://discord.gg/wc6QQEc"
+          button_color="9EE7E5"
+          text_color="FFFFFF"
+          is_external={true}
+        />
+      </div>
+      <div className="flex-1 flex justify-center md:justify-end">
+        <Image
+          src={bunny_phone}
+          width={424}
+          height={611}
+          alt="large phone with hackdavis bunny mascot"
+        />
+      </div>
+    </div>
+  );
+}

app/(pages)/_components/Navbar/Navbar.tsx

@@ -78,12 +78,12 @@ export default function Navbar() {
       page: '/schedule',
       path: '/schedule',
     },
-    // {
-    //   ids: ['starter-kit'],
-    //   body: 'Starter Kit',
-    //   page: '/starter-kit',
-    //   path: '/starter-kit',
-    // },
+    {
+      ids: ['starter-kit'],
+      body: 'Starter Kit',
+      page: '/starter-kit',
+      path: '/starter-kit',
+    },
     // {
     //   ids: ['project-info'],
     //   body: 'Project Info',