set up starter kit ui

app/(pages)/(hackers)/(hub)/starter-kit/page.tsx

@@ -1,9 +1,11 @@
 'use client';
-import { ParentCarousel } from '../../_components/StarterKit/ParentCarousel';
+import { ParentCarousel } from '../../_components/StarterKit2025/ParentCarousel';
+import StarterKit from '@pages/(hackers)/_components/StarterKit/StarterKit';
 
 export default function Page() {
   return (
     <div id="starter-kit">
+      <StarterKit />
       <ParentCarousel />
     </div>
   );

app/(pages)/(hackers)/_components/HomeHacking/ScheduleSneakPeek.tsx

@@ -7,7 +7,7 @@ import CalendarItem from '@pages/(hackers)/_components/Schedule/CalendarItem';
 import {
   EventEntry,
   useScheduleSneakPeekData,
-} from '../../../_hooks/useScheduleSneakPeekData';
+} from '@hooks/useScheduleSneakPeekData';
 import { useSharedNow } from '@pages/_hooks/useScheduleSharedNow';
 
 import sleeping_cow from '@public/hackers/hero/sleeping_cow.svg';

app/(pages)/(hackers)/_components/ProjectInfo/JudgingInfo/JudgingInfo.tsx

@@ -8,8 +8,8 @@ import ImportantAnnouncement from './JudgingSteps/ImportantAnnouncement/Importan
 import DemoTime from './JudgingSteps/DemoTime/DemoTime';
 import Break from './JudgingSteps/Break/Break';
 import ClosingCeremony from './JudgingSteps/ClosingCeremony/ClosingCeremony';
-import ResourceHelp from '../../StarterKit/Resources/ResourceHelp';
-import StarterKitSlide from '../../StarterKit/StarterKitSlide';
+import ResourceHelp from '../../StarterKit2025/Resources/ResourceHelp';
+import StarterKitSlide from '../../StarterKit2025/StarterKitSlide';
 import styles from './JudgingInfo.module.scss';
 
 const accordionItems: AccordionItemInt[] = [

app/(pages)/(hackers)/_components/ProjectInfo/SubmissionInfo/SubmissionInfo.tsx

@@ -4,8 +4,8 @@ import Image from 'next/image';
 import ProjectInfoAccordion, {
   AccordionItemInt,
 } from '../ProjectInfoAccordion/ProjectInfoAccordion';
-import ResourceHelp from '../../StarterKit/Resources/ResourceHelp';
-import StarterKitSlide from '../../StarterKit/StarterKitSlide';
+import ResourceHelp from '../../StarterKit2025/Resources/ResourceHelp';
+import StarterKitSlide from '../../StarterKit2025/StarterKitSlide';
 import SubmissionTips from './SubmissionSteps/DevpostSubmission/SubmissionTips';
 import Clarifications from './SubmissionSteps/SubmissionClarification/Clarifications';
 

app/(pages)/(hackers)/_components/ProjectInfo/SubmissionInfo/SubmissionSteps/DevpostSubmission/SubmissionTips.tsx

@@ -1,4 +1,4 @@
-import StarterKitSlide from '@pages/(hackers)/_components/StarterKit/StarterKitSlide';
+import StarterKitSlide from '@pages/(hackers)/_components/StarterKit2025/StarterKitSlide';
 import styles from './SubmissionTips.module.scss';
 import Animals from 'public/hackers/project-info/peepingAnimals.png';
 import Image from 'next/image';

app/(pages)/(hackers)/_components/ProjectInfo/SubmissionInfo/SubmissionSteps/SubmissionClarification/Clarifications.jsx

@@ -1,4 +1,4 @@
-import StarterKitSlide from '@pages/(hackers)/_components/StarterKit/StarterKitSlide';
+import StarterKitSlide from '@pages/(hackers)/_components/StarterKit2025/StarterKitSlide';
 import styles from './Clarifications.module.scss';
 
 export default function Clarifications() {

app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx

@@ -0,0 +1,3 @@
+export default function DesignResources() {
+  return <div>Design Resources</div>;
+}

app/(pages)/(hackers)/_components/StarterKit/DevResources.tsx

@@ -0,0 +1,3 @@
+export default function DevResources() {
+  return <div>Dev Resources</div>;
+}

app/(pages)/(hackers)/_components/StarterKit/Ideate.tsx

@@ -0,0 +1,3 @@
+export default function Ideate() {
+  return <div>Ideate</div>;
+}

app/(pages)/(hackers)/_components/StarterKit/Introduction.tsx

@@ -0,0 +1,22 @@
+import Image from 'next/image';
+import mascots from '@public/hackers/starter-kit/introduction/startkit_mascots.svg';
+
+export default function Introduction() {
+  return (
+    <div className="my-[100px] mx-[60px] gap-[32px] md:gap-[8%] flex flex-col md:flex-row items-center">
+      <div className="flex-1">
+        <Image src={mascots} alt="hackdavis mascots looking at computer" />
+      </div>
+      <div className="flex-1">
+        <p className="font-dm-mono text-[16px] text-[#A5A5A5]">HACKATHON 101</p>
+        <h3 className="font-jakarta text-[28px] md:text-[32px] font-medium">
+          Starter Kit
+        </h3>
+        <p className="font-jakarta text-[16px] text-[#656565]">
+          New to hacking? No problem. This kit is your field guide to navigating
+          the weekend, finding your team, and shipping your first project.
+        </p>
+      </div>
+    </div>
+  );
+}

app/(pages)/(hackers)/_components/StarterKit/MoreTips.tsx

@@ -0,0 +1,3 @@
+export default function MoreTips() {
+  return <div>More Tips</div>;
+}

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

@@ -0,0 +1,73 @@
+'use client';
+
+import DesignResources from './DesignResources';
+import DevResources from './DevResources';
+import Ideate from './Ideate';
+import Introduction from './Introduction';
+import MoreTips from './MoreTips';
+import TeamBuilding from './TeamBuilding';
+
+const sections = [
+  {
+    title: 'Introduction',
+    id: 'starter-kit-introduction',
+    Component: Introduction,
+  },
+  {
+    title: 'Team Building',
+    id: 'starter-kit-team-building',
+    Component: TeamBuilding,
+  },
+  {
+    title: 'Ideate',
+    id: 'starter-kit-ideate',
+    Component: Ideate,
+  },
+  {
+    title: 'Design Resources',
+    id: 'starter-kit-design-resources',
+    Component: DesignResources,
+  },
+  {
+    title: 'Dev Resources',
+    id: 'starter-kit-dev-resources',
+    Component: DevResources,
+  },
+  {
+    title: 'More Tips',
+    id: 'starter-kit-more-tips',
+    Component: MoreTips,
+  },
+];
+
+function scrollToSection(id: string) {
+  const element = document.getElementById(id);
+  if (!element) return;
+  element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}
+
+export default function StarterKit() {
+  return (
+    <div className="flex flex-row">
+      <div className="hidden md:flex px-[20px] mt-[100px] gap-[30px] flex-col">
+        {sections.map((section) => (
+          <button
+            key={section.id}
+            type="button"
+            onClick={() => scrollToSection(section.id)}
+            className="font-dm-mono text-[16px] text-[#ACACB9] uppercase text-left"
+          >
+            {section.title}
+          </button>
+        ))}
+      </div>
+      <div>
+        {sections.map(({ id, Component }) => (
+          <section key={id} id={id} className="scroll-mt-[100px]">
+            <Component />
+          </section>
+        ))}
+      </div>
+    </div>
+  );
+}

app/(pages)/(hackers)/_components/StarterKit/TeamBuilding.tsx

@@ -0,0 +1,3 @@
+export default function TeamBuilding() {
+  return <div>Team Building</div>;
+}

app/(pages)/(hackers)/_components/StarterKit/ParentCarousel.tsx → app/(pages)/(hackers)/_components/StarterKit2025/ParentCarousel.tsx

@@ -8,10 +8,10 @@ import { type CarouselApi } from '@globals/components/ui/carousel';
 import AutoHeight from 'embla-carousel-auto-height';
 import { Button } from '@globals/components/ui/button';
 
-import LetsBegin from '../../_components/StarterKitStages/LetsBegin';
-import FindATeam from '../../_components/StarterKitStages/FindATeam';
-import Ideate from '../../_components/StarterKitStages/Ideate';
-import Resources from '../../_components/StarterKitStages/Resources';
+import LetsBegin from './StarterKitStages/LetsBegin';
+import FindATeam from './StarterKitStages/FindATeam';
+import Ideate from './StarterKitStages/Ideate';
+import Resources from './StarterKitStages/Resources';
 
 import {
   Carousel,

app/(pages)/(hackers)/_components/StarterKitStages/FindATeam.tsx → app/(pages)/(hackers)/_components/StarterKit2025/StarterKitStages/FindATeam.tsx

@@ -1,7 +1,7 @@
-import StarterKitSlide from '../StarterKit/StarterKitSlide';
-import EventPosting from '../StarterKit/EventPosting/EventPosting';
-import FindTheRightFit from '../StarterKit/FindTheRightFit/FindTheRightFit';
-import UseOurDiscordComponent from '../StarterKit/UseOurDiscord/UseOurDiscord';
+import StarterKitSlide from '../StarterKitSlide';
+import EventPosting from '../EventPosting/EventPosting';
+import FindTheRightFit from '../FindTheRightFit/FindTheRightFit';
+import UseOurDiscordComponent from '../UseOurDiscord/UseOurDiscord';
 
 export default function FindATeam() {
   return (

app/(pages)/(hackers)/_components/StarterKitStages/Ideate.tsx → app/(pages)/(hackers)/_components/StarterKit2025/StarterKitStages/Ideate.tsx

@@ -1,7 +1,7 @@
-import StarterKitSlide from '../StarterKit/StarterKitSlide';
-import PreviousHacks from '../StarterKit/PreviousHacks';
-import Brainstorm from '../StarterKit/Brainstorm';
-import MentorResources from '../StarterKit/Resources/MentorResources';
+import StarterKitSlide from '../StarterKitSlide';
+import PreviousHacks from '../PreviousHacks';
+import Brainstorm from '../Brainstorm';
+import MentorResources from '../Resources/MentorResources';
 
 export default function Ideate() {
   return (

app/(pages)/(hackers)/_components/StarterKitStages/LetsBegin.tsx → app/(pages)/(hackers)/_components/StarterKit2025/StarterKitStages/LetsBegin.tsx

@@ -1,6 +1,6 @@
-import StarterKitSlide from '../StarterKit/StarterKitSlide';
-import EventPosting from '../StarterKit/EventPosting/EventPosting';
-import WorkshopSlides from '../StarterKit/WorkshopSlides/WorkshopSlides';
+import StarterKitSlide from '../StarterKitSlide';
+import EventPosting from '../EventPosting/EventPosting';
+import WorkshopSlides from '../WorkshopSlides/WorkshopSlides';
 
 export default function LetsBegin() {
   return (

app/(pages)/(hackers)/_components/StarterKitStages/Resources.tsx → app/(pages)/(hackers)/_components/StarterKit2025/StarterKitStages/Resources.tsx

@@ -1,8 +1,8 @@
-import StarterKitSlide from '../StarterKit/StarterKitSlide';
-import ResourceHelp from '../StarterKit/Resources/ResourceHelp';
-import DesignersResources from '../StarterKit/Resources/DesignersResources';
-import DevelopersResources from '../StarterKit/Resources/DevelopersResources';
-import MentorResources from '../StarterKit/Resources/MentorResources';
+import StarterKitSlide from '../StarterKitSlide';
+import ResourceHelp from '../Resources/ResourceHelp';
+import DesignersResources from '../Resources/DesignersResources';
+import DevelopersResources from '../Resources/DevelopersResources';
+import MentorResources from '../Resources/MentorResources';
 
 export default function Resources() {
   return (

app/(pages)/judges/(app)/_components/Landing/Questions.tsx

@@ -4,7 +4,7 @@ import mascots_around_couch from '@public/judges/landing/mascots_around_couch.sv
 export default function Questions() {
   return (
     <div className="bg-white rounded-[32px] py-[34px] px-[30px] text-[#3F3F3F]">
-      <p className="font-semibold text-[22px]">Question?</p>
+      <p className="font-semibold text-[22px]">Questions?</p>
       <p className="text-[18px]">
         Please ask a HackDavis director (dark blue shirt)!
       </p>