- {tip.icon ?
:
{`0${index + 1}.`}
}
+
+ {tip.icon ? (
+
+ ) : (
+
{`0${index + 1}.`}
+ )}
-
{tip.title && {tip.title}:} {tip.tip}
+
+ {tip.title && (
+
+ {tip.title}:
+
+ )}{' '}
+ {tip.tip}
+
))}
@@ -177,116 +274,208 @@ function Tips({image, subtitle, title, description, tips, reverse} : {image: Sta
);
}
-
export default function Ideate() {
// Data
const designer_responsibilities = [
- {icon: writing_sign, title: "Research problem statement", description: "A problem statement should include: background, people affected, and the impact of the problem."},
- {icon: figma, title: "Craft UI/UX visuals", description: "Create wireframes, mockups, and prototypes that bring the product vision to life."},
- {icon: sparkles, title: "Iterate on feedback & refine", description: "Collaborate with your team, gather insights, and polish the design through multiple iterations."},
- {icon: presentation_analytics, title: "Create presentation & pitch", description: "Be prepared to present design decisions, rationale, and final deliverables to the judges!"},
- ]
+ {
+ icon: writing_sign,
+ title: 'Research problem statement',
+ description:
+ 'A problem statement should include: background, people affected, and the impact of the problem.',
+ },
+ {
+ icon: figma,
+ title: 'Craft UI/UX visuals',
+ description:
+ 'Create wireframes, mockups, and prototypes that bring the product vision to life.',
+ },
+ {
+ icon: sparkles,
+ title: 'Iterate on feedback & refine',
+ description:
+ 'Collaborate with your team, gather insights, and polish the design through multiple iterations.',
+ },
+ {
+ icon: presentation_analytics,
+ title: 'Create presentation & pitch',
+ description:
+ 'Be prepared to present design decisions, rationale, and final deliverables to the judges!',
+ },
+ ];
const developer_responsibilities = [
- {icon: writing_sign, title: "Plan out system design", description: "Figure out what tech stack and technologies you want to use for your product."},
- {icon: github, title: "Set up codebase scaffolding", description: "Create a GitHub repo and initialize the project so your team can collaborate."},
- {icon: message_chatbot, title: "Divide and conquer", description: "Split the product into features and assign tasks so teammates can build in parallel."},
- {icon: desktop_code, title: "Build a functioning demo", description: "Implement core features and ensure you have a working product ready for presentations."},
- ]
+ {
+ icon: writing_sign,
+ title: 'Plan out system design',
+ description:
+ 'Figure out what tech stack and technologies you want to use for your product.',
+ },
+ {
+ icon: github,
+ title: 'Set up codebase scaffolding',
+ description:
+ 'Create a GitHub repo and initialize the project so your team can collaborate.',
+ },
+ {
+ icon: message_chatbot,
+ title: 'Divide and conquer',
+ description:
+ 'Split the product into features and assign tasks so teammates can build in parallel.',
+ },
+ {
+ icon: desktop_code,
+ title: 'Build a functioning demo',
+ description:
+ 'Implement core features and ensure you have a working product ready for presentations.',
+ },
+ ];
const design_tips1 = [
- {tip: "Go in the left panel and navigate to Assets"},
- {tip: "Press Add more libraries"},
- {tip: "Click UI Kits on the left panel in the Libraries Module"},
- {tip: "Add your preferred library to your design file!"},
- ]
+ { tip: 'Go in the left panel and navigate to Assets' },
+ { tip: 'Press Add more libraries' },
+ { tip: 'Click UI Kits on the left panel in the Libraries Module' },
+ { tip: 'Add your preferred library to your design file!' },
+ ];
const design_tips2 = [
- {icon: shape, title: "Iconify", tip: "A library of 100,000+ icons."},
- {icon: image_in_picture, title: "Remove BG", tip: "Removes the background of any photo instantly."},
- {icon: text_size, title: "Stark", tip: "Checks if your text is readable for accessibility."},
- ]
+ { icon: shape, title: 'Iconify', tip: 'A library of 100,000+ icons.' },
+ {
+ icon: image_in_picture,
+ title: 'Remove BG',
+ tip: 'Removes the background of any photo instantly.',
+ },
+ {
+ icon: text_size,
+ title: 'Stark',
+ tip: 'Checks if your text is readable for accessibility.',
+ },
+ ];
const designer_link1 = {
- type: "FIGMA COURSE",
- title: "Figma for Beginners",
- description: "New to Figma? This hands-on course offers a quick tour of key features, while guiding you through designing a portfolio website from scratch.",
+ type: 'FIGMA COURSE',
+ title: 'Figma for Beginners',
+ description:
+ 'New to Figma? This hands-on course offers a quick tour of key features, while guiding you through designing a portfolio website from scratch.',
image: figma_beginners_image,
- buttonName: "Start Course",
- link: "https://help.figma.com/hc/en-us/sections/30880632542743-Figma-Design-for-beginners",
- alt: "Figma Design For Beginners course preview image",
- }
+ buttonName: 'Start Course',
+ link: 'https://help.figma.com/hc/en-us/sections/30880632542743-Figma-Design-for-beginners',
+ alt: 'Figma Design For Beginners course preview image',
+ };
const designer_link2 = {
- type: "FIGMA BLOG",
- title: "What is Product Design?",
- description: "How can you create the best product or service for your users? This article by Figma explains how Product Design is the process of developing experiences to meet user needs and align with business goals + strategies.",
+ type: 'FIGMA BLOG',
+ title: 'What is Product Design?',
+ description:
+ 'How can you create the best product or service for your users? This article by Figma explains how Product Design is the process of developing experiences to meet user needs and align with business goals + strategies.',
image: figma_shapes,
- buttonName: "Read",
- link: "https://www.figma.com/resource-library/what-is-product-design/",
- alt: "What is product design blog post preview image",
- }
+ buttonName: 'Read',
+ link: 'https://www.figma.com/resource-library/what-is-product-design/',
+ alt: 'What is product design blog post preview image',
+ };
const developer_link1 = {
- type: "MLH STARTER KIT",
- title: "Get Started with MongoDB",
- description: "Whether you are new to MongoDB or looking for a little inspiration to get your hackathon project started, the MongoDB Developer Center has all the latest MongoDB tutorials, videos and code examples featuring over a dozen programming languages, and even more technology integrations!",
+ type: 'MLH STARTER KIT',
+ title: 'Get Started with MongoDB',
+ description:
+ 'Whether you are new to MongoDB or looking for a little inspiration to get your hackathon project started, the MongoDB Developer Center has all the latest MongoDB tutorials, videos and code examples featuring over a dozen programming languages, and even more technology integrations!',
image: mongodb,
- buttonName: "Read",
- link: "https://news.mlh.io/read-and-write-to-a-mongodb-atlas-database-in-minutes-04-19-2023?utm_source=mlh&utm_medium=referral&utm_content=MongoDB+Starter+Kit",
- alt: "MongoDB logo",
- }
+ buttonName: 'Read',
+ link: 'https://news.mlh.io/read-and-write-to-a-mongodb-atlas-database-in-minutes-04-19-2023?utm_source=mlh&utm_medium=referral&utm_content=MongoDB+Starter+Kit',
+ alt: 'MongoDB logo',
+ };
const developer_link2 = {
- type: "MLH STARTER KIT",
- title: "Get Started with Authentication",
- description: "Auth0 is an easy to use authentication and authorization platform! If your hackathon project requires a log in and sign up workflow, Auth0 supports this functionality straight out of the box. Best of all, it’s simple and free to get started.",
+ type: 'MLH STARTER KIT',
+ title: 'Get Started with Authentication',
+ description:
+ 'Auth0 is an easy to use authentication and authorization platform! If your hackathon project requires a log in and sign up workflow, Auth0 supports this functionality straight out of the box. Best of all, it’s simple and free to get started.',
image: auth0,
- buttonName: "Read",
- link: "https://news.mlh.io/enable-user-authentication-for-your-hackathon-project-in-as-little-as-ten-minutes-05-12-2023?utm_source=mlh&utm_medium=referral&utm_content=Auth0+Starter+Kit",
- alt: "Auth0 logo",
-
- }
+ buttonName: 'Read',
+ link: 'https://news.mlh.io/enable-user-authentication-for-your-hackathon-project-in-as-little-as-ten-minutes-05-12-2023?utm_source=mlh&utm_medium=referral&utm_content=Auth0+Starter+Kit',
+ alt: 'Auth0 logo',
+ };
return (
-
- {/** Section 1 */}
-
-
-
+
+ {/** Section 1 */}
+
+
+
- {/** Section 2 */}
-
+ {/** Section 2 */}
+
- {/** Section 3 */}
-
-
-
+ {/** Section 3 */}
+
+
+
- {/** Section 4 */}
-
-
-
+ {/** Section 4 */}
+
+
+
- {/** Section 5 */}
-
-
-
+ {/** Section 5 */}
+
+
+
- {/** Section 6 */}
-
-
-
+ {/** Section 6 */}
+
+
+
- {/** Section 7 */}
-
-
OUR RECOMMENDED BREAKDOWN TO
-
Keep track of time
-
+ {/** Section 7 */}
+
+
+ OUR RECOMMENDED BREAKDOWN TO
+
+
+ Keep track of time
+
+
+
-
);
}
From 6c38913bdaf297c2adfefe3f38380a3382f8facf Mon Sep 17 00:00:00 2001
From: phlangiee <174984579+phlangiee@users.noreply.github.com>
Date: Tue, 7 Apr 2026 18:35:46 -0700
Subject: [PATCH 11/19] moved everything to design resources
---
.../StarterKit/DesignResources.tsx | 480 +++++++++++++++++-
.../_components/StarterKit/Ideate.tsx | 480 +-----------------
2 files changed, 480 insertions(+), 480 deletions(-)
diff --git a/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx b/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx
index 4c7626c9a..5824c473e 100644
--- a/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx
+++ b/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx
@@ -1,3 +1,481 @@
+'use client';
+
+import Image from 'next/image';
+import type { StaticImageData } from 'next/image'; // why statuc image data?
+import { useState, useRef } from 'react';
+
+// Icons
+import writing_sign from '@public/hackers/starter-kit/ideate/tabler_writing-sign.svg';
+import presentation_analytics from '@public/hackers/starter-kit/ideate/tabler_presentation-analytics.svg';
+import sparkles from '@public/hackers/starter-kit/ideate/tabler_sparkles-2.svg';
+import figma from '@public/hackers/starter-kit/ideate/tabler_brand-figma.svg';
+
+import github from '@public/hackers/starter-kit/ideate/tabler_brand-github.svg';
+import desktop_code from '@public/hackers/starter-kit/ideate/tabler_device-desktop-code.svg';
+import message_chatbot from '@public/hackers/starter-kit/ideate/tabler_message-chatbot.svg';
+
+import text_size from '@public/hackers/starter-kit/ideate/tabler_text-size.svg';
+import image_in_picture from '@public/hackers/starter-kit/ideate/tabler_image-in-picture.svg';
+import shape from '@public/hackers/starter-kit/ideate/tabler_shape.svg';
+
+import arrow from '@public/hackers/starter-kit/ideate/arrow_icon.svg';
+
+// Big Images
+import designer_responsibilities_image from '@public/hackers/starter-kit/ideate/designer_responsibilities.svg';
+import developer_responsibilities_image from '@public/hackers/starter-kit/ideate/developer_responsibilities.svg';
+import designer_tips1_image from '@public/hackers/starter-kit/ideate/designer_tips1.svg';
+import designer_tips2_image from '@public/hackers/starter-kit/ideate/designer_tips2.svg';
+
+import figma_beginners_image from '@public/hackers/starter-kit/ideate/figma_beginners.svg';
+import figma_shapes from '@public/hackers/starter-kit/ideate/figma_shapes.svg';
+import mongodb from '@public/hackers/starter-kit/ideate/mongodb.svg';
+import auth0 from '@public/hackers/starter-kit/ideate/auth0.svg';
+
+import timeline from '@public/hackers/starter-kit/ideate/timeline.svg';
+
+// Extra
+//import scroll_bar1 from '@public/hackers/starter-kit/ideate/scroll_bar1.svg';
+//import divider from '@public/hackers/starter-kit/ideate/divider.svg';
+
+interface Link {
+ type: string;
+ title: string;
+ description: string;
+ image: StaticImageData;
+ buttonName: string;
+ link: string;
+ alt: string;
+}
+
+function Link({ link }: { link: Link }) {
+ return (
+
+
+
+
{link.type}
+
{link.title}
+
{link.description}
+
+
+
+ );
+}
+
+function Resources({
+ title,
+ link1,
+ link2,
+}: {
+ title: string;
+ link1: Link;
+ link2: Link;
+}) {
+ return (
+
+ );
+}
+
+interface Responsibility {
+ icon: StaticImageData;
+ title: string;
+ description: string;
+}
+
+// shi figure out that bar!!!!!!
+function Responsibilities({
+ image,
+ title,
+ responsibilities,
+ reverse,
+}: {
+ image: StaticImageData;
+ title: string;
+ responsibilities: Responsibility[];
+ reverse: boolean;
+}) {
+ const sectionRef = useRef
(null);
+ const scrollRef = useRef(null);
+
+ const [responsibilityIndex] = useState(0);
+ const [scrollPos] = useState(50);
+
+ /*useEffect(() => {
+ const onPageScroll = () => {
+ const section = sectionRef.current.scrollTo();
+ const scrollContainer = scrollRef.current;
+ if (!section) return;
+
+ const rect = section.getBoundingClientRect();
+ const anchorY = window.innerHeight * 0.35;
+ const traveled = anchorY - rect.top;
+ const rawProgress = traveled / Math.max(rect.height, 1);
+ const progress = Math.min(Math.max(rawProgress, 0), 0.999);
+ const nextIndex = Math.floor(progress * responsibilities.length);
+ const clampedIndex = Math.max(0, Math.min(responsibilities.length - 1, nextIndex));
+
+ setResponsibilityIndex(clampedIndex);
+
+ if (scrollContainer) {
+ const maxHeight = scrollContainer.clientHeight;
+ const fillProgress = responsibilities.length > 1 ? clampedIndex / (responsibilities.length - 1) : 0;
+ setScrollPos(fillProgress * maxHeight);
+ }
+ };
+
+ onPageScroll();
+ window.addEventListener("scroll", onPageScroll, { passive: true });
+ //window.addEventListener("resize", onPageScroll);
+
+ return () => {
+ window.removeEventListener("scroll", onPageScroll);
+ //window.removeEventListener("resize", onPageScroll);
+ };
+ }, );//[responsibilities.length]);*/
+
+ return (
+
+
IDEATE
+
{title}
+
+
+
+
+
+
+ {responsibilities.map((responsibility, index) => (
+
+
+
+ {index == responsibilityIndex ? (
+
+ {responsibility.title}
+
+ ) : (
+
+ {responsibility.title}
+
+ )}
+
+ {index == responsibilityIndex && (
+
+ {responsibility.description}
+
+ )}
+
+ ))}
+
+
+
+
+
+
+
{subtitle}
+
{title}
+
{description}
+
+ {tips.map((tip, index) => (
+
+ {tip.icon ? (
+
+ ) : (
+
{`0${index + 1}.`}
+ )}
+
+
+ {tip.title && (
+
+ {tip.title}:
+
+ )}{' '}
+ {tip.tip}
+
+
+
+ ))}
+
+
Design Resources
;
+ // Data
+ const designer_responsibilities = [
+ {
+ icon: writing_sign,
+ title: 'Research problem statement',
+ description:
+ 'A problem statement should include: background, people affected, and the impact of the problem.',
+ },
+ {
+ icon: figma,
+ title: 'Craft UI/UX visuals',
+ description:
+ 'Create wireframes, mockups, and prototypes that bring the product vision to life.',
+ },
+ {
+ icon: sparkles,
+ title: 'Iterate on feedback & refine',
+ description:
+ 'Collaborate with your team, gather insights, and polish the design through multiple iterations.',
+ },
+ {
+ icon: presentation_analytics,
+ title: 'Create presentation & pitch',
+ description:
+ 'Be prepared to present design decisions, rationale, and final deliverables to the judges!',
+ },
+ ];
+
+ const developer_responsibilities = [
+ {
+ icon: writing_sign,
+ title: 'Plan out system design',
+ description:
+ 'Figure out what tech stack and technologies you want to use for your product.',
+ },
+ {
+ icon: github,
+ title: 'Set up codebase scaffolding',
+ description:
+ 'Create a GitHub repo and initialize the project so your team can collaborate.',
+ },
+ {
+ icon: message_chatbot,
+ title: 'Divide and conquer',
+ description:
+ 'Split the product into features and assign tasks so teammates can build in parallel.',
+ },
+ {
+ icon: desktop_code,
+ title: 'Build a functioning demo',
+ description:
+ 'Implement core features and ensure you have a working product ready for presentations.',
+ },
+ ];
+
+ const design_tips1 = [
+ { tip: 'Go in the left panel and navigate to Assets' },
+ { tip: 'Press Add more libraries' },
+ { tip: 'Click UI Kits on the left panel in the Libraries Module' },
+ { tip: 'Add your preferred library to your design file!' },
+ ];
+
+ const design_tips2 = [
+ { icon: shape, title: 'Iconify', tip: 'A library of 100,000+ icons.' },
+ {
+ icon: image_in_picture,
+ title: 'Remove BG',
+ tip: 'Removes the background of any photo instantly.',
+ },
+ {
+ icon: text_size,
+ title: 'Stark',
+ tip: 'Checks if your text is readable for accessibility.',
+ },
+ ];
+
+ const designer_link1 = {
+ type: 'FIGMA COURSE',
+ title: 'Figma for Beginners',
+ description:
+ 'New to Figma? This hands-on course offers a quick tour of key features, while guiding you through designing a portfolio website from scratch.',
+ image: figma_beginners_image,
+ buttonName: 'Start Course',
+ link: 'https://help.figma.com/hc/en-us/sections/30880632542743-Figma-Design-for-beginners',
+ alt: 'Figma Design For Beginners course preview image',
+ };
+
+ const designer_link2 = {
+ type: 'FIGMA BLOG',
+ title: 'What is Product Design?',
+ description:
+ 'How can you create the best product or service for your users? This article by Figma explains how Product Design is the process of developing experiences to meet user needs and align with business goals + strategies.',
+ image: figma_shapes,
+ buttonName: 'Read',
+ link: 'https://www.figma.com/resource-library/what-is-product-design/',
+ alt: 'What is product design blog post preview image',
+ };
+
+ const developer_link1 = {
+ type: 'MLH STARTER KIT',
+ title: 'Get Started with MongoDB',
+ description:
+ 'Whether you are new to MongoDB or looking for a little inspiration to get your hackathon project started, the MongoDB Developer Center has all the latest MongoDB tutorials, videos and code examples featuring over a dozen programming languages, and even more technology integrations!',
+ image: mongodb,
+ buttonName: 'Read',
+ link: 'https://news.mlh.io/read-and-write-to-a-mongodb-atlas-database-in-minutes-04-19-2023?utm_source=mlh&utm_medium=referral&utm_content=MongoDB+Starter+Kit',
+ alt: 'MongoDB logo',
+ };
+
+ const developer_link2 = {
+ type: 'MLH STARTER KIT',
+ title: 'Get Started with Authentication',
+ description:
+ 'Auth0 is an easy to use authentication and authorization platform! If your hackathon project requires a log in and sign up workflow, Auth0 supports this functionality straight out of the box. Best of all, it’s simple and free to get started.',
+ image: auth0,
+ buttonName: 'Read',
+ link: 'https://news.mlh.io/enable-user-authentication-for-your-hackathon-project-in-as-little-as-ten-minutes-05-12-2023?utm_source=mlh&utm_medium=referral&utm_content=Auth0+Starter+Kit',
+ alt: 'Auth0 logo',
+ };
+
+ return (
+
+ {/** Section 1 */}
+
+
+
+
+ {/** Section 2 */}
+
+
+ {/** Section 3 */}
+
+
+
+
+ {/** Section 4 */}
+
+
+
+
+ {/** Section 5 */}
+
+
+
+
+ {/** Section 6 */}
+
+
+
+
+ {/** Section 7 */}
+
+
+ OUR RECOMMENDED BREAKDOWN TO
+
+
+ Keep track of time
+
+
+
+
-
-
-
{link.type}
-
{link.title}
-
{link.description}
-
-
-
-
IDEATE
-
{title}
-
-
-
-
-
-
- {responsibilities.map((responsibility, index) => (
-
-
-
- {index == responsibilityIndex ? (
-
- {responsibility.title}
-
- ) : (
-
- {responsibility.title}
-
- )}
-
- {index == responsibilityIndex && (
-
- {responsibility.description}
-
- )}
-
- ))}
-
-
-
-
-
-
-
{subtitle}
-
{title}
-
{description}
-
- {tips.map((tip, index) => (
-
- {tip.icon ? (
-
- ) : (
-
{`0${index + 1}.`}
- )}
-
-
- {tip.title && (
-
- {tip.title}:
-
- )}{' '}
- {tip.tip}
-
-
-
- ))}
-
-
- {/** Section 1 */}
-
-
-
-
- {/** Section 2 */}
-
-
- {/** Section 3 */}
-
-
-
-
- {/** Section 4 */}
-
-
-
-
- {/** Section 5 */}
-
-
-
-
- {/** Section 6 */}
-
-
-
-
- {/** Section 7 */}
-
-
- OUR RECOMMENDED BREAKDOWN TO
-
-
- Keep track of time
-
-
-
-
Ideate
;
}
From b735a9b5e8484dfd5b81cdedf86dd31f9c4ea6aa Mon Sep 17 00:00:00 2001
From: phlangiee <174984579+phlangiee@users.noreply.github.com>
Date: Tue, 7 Apr 2026 18:36:03 -0700
Subject: [PATCH 12/19] deleted my comment
---
.../(hackers)/_components/StarterKit/DesignResources.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx b/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx
index 5824c473e..b95f18b01 100644
--- a/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx
+++ b/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx
@@ -1,7 +1,7 @@
'use client';
import Image from 'next/image';
-import type { StaticImageData } from 'next/image'; // why statuc image data?
+import type { StaticImageData } from 'next/image';
import { useState, useRef } from 'react';
// Icons
From 269baab8dcd8b3ad71d1178a385120aec1f420db Mon Sep 17 00:00:00 2001
From: michelleyeoh
Date: Tue, 7 Apr 2026 21:20:06 -0700
Subject: [PATCH 13/19] moved images to new folder
---
.../StarterKit/DesignResources.tsx | 46 +++++++++----------
.../arrow_icon.svg | 0
.../{ideate => designResources}/auth0.svg | 0
.../designer_responsibilities.svg | 0
.../designer_tips1.svg | 0
.../designer_tips2.svg | 0
.../developer_responsibilities.svg | 0
.../{ideate => designResources}/divider.svg | 0
.../figma_beginners.svg | 0
.../figma_shapes.svg | 0
.../{ideate => designResources}/mongodb.svg | 0
.../scroll_bar1.svg | 0
.../tabler_brand-figma.svg | 0
.../tabler_brand-github.svg | 0
.../tabler_device-desktop-code.svg | 0
.../tabler_image-in-picture.svg | 0
.../tabler_message-chatbot.svg | 0
.../tabler_presentation-analytics.svg | 0
.../tabler_shape.svg | 0
.../tabler_sparkles-2.svg | 0
.../tabler_text-size.svg | 0
.../tabler_writing-sign.svg | 0
.../{ideate => designResources}/timeline.svg | 0
23 files changed, 23 insertions(+), 23 deletions(-)
rename public/hackers/starter-kit/{ideate => designResources}/arrow_icon.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/auth0.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/designer_responsibilities.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/designer_tips1.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/designer_tips2.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/developer_responsibilities.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/divider.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/figma_beginners.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/figma_shapes.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/mongodb.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/scroll_bar1.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/tabler_brand-figma.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/tabler_brand-github.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/tabler_device-desktop-code.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/tabler_image-in-picture.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/tabler_message-chatbot.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/tabler_presentation-analytics.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/tabler_shape.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/tabler_sparkles-2.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/tabler_text-size.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/tabler_writing-sign.svg (100%)
rename public/hackers/starter-kit/{ideate => designResources}/timeline.svg (100%)
diff --git a/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx b/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx
index b95f18b01..136525a2c 100644
--- a/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx
+++ b/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx
@@ -1,41 +1,41 @@
'use client';
import Image from 'next/image';
-import type { StaticImageData } from 'next/image';
+import type { StaticImageData } from 'next/image';
import { useState, useRef } from 'react';
// Icons
-import writing_sign from '@public/hackers/starter-kit/ideate/tabler_writing-sign.svg';
-import presentation_analytics from '@public/hackers/starter-kit/ideate/tabler_presentation-analytics.svg';
-import sparkles from '@public/hackers/starter-kit/ideate/tabler_sparkles-2.svg';
-import figma from '@public/hackers/starter-kit/ideate/tabler_brand-figma.svg';
+import writing_sign from '@public/hackers/starter-kit/designResources/tabler_writing-sign.svg';
+import presentation_analytics from '@public/hackers/starter-kit/designResources/tabler_presentation-analytics.svg';
+import sparkles from '@public/hackers/starter-kit/designResources/tabler_sparkles-2.svg';
+import figma from '@public/hackers/starter-kit/designResources/tabler_brand-figma.svg';
-import github from '@public/hackers/starter-kit/ideate/tabler_brand-github.svg';
-import desktop_code from '@public/hackers/starter-kit/ideate/tabler_device-desktop-code.svg';
-import message_chatbot from '@public/hackers/starter-kit/ideate/tabler_message-chatbot.svg';
+import github from '@public/hackers/starter-kit/designResources/tabler_brand-github.svg';
+import desktop_code from '@public/hackers/starter-kit/designResources/tabler_device-desktop-code.svg';
+import message_chatbot from '@public/hackers/starter-kit/designResources/tabler_message-chatbot.svg';
-import text_size from '@public/hackers/starter-kit/ideate/tabler_text-size.svg';
-import image_in_picture from '@public/hackers/starter-kit/ideate/tabler_image-in-picture.svg';
-import shape from '@public/hackers/starter-kit/ideate/tabler_shape.svg';
+import text_size from '@public/hackers/starter-kit/designResources/tabler_text-size.svg';
+import image_in_picture from '@public/hackers/starter-kit/designResources/tabler_image-in-picture.svg';
+import shape from '@public/hackers/starter-kit/designResources/tabler_shape.svg';
-import arrow from '@public/hackers/starter-kit/ideate/arrow_icon.svg';
+import arrow from '@public/hackers/starter-kit/designResources/arrow_icon.svg';
// Big Images
-import designer_responsibilities_image from '@public/hackers/starter-kit/ideate/designer_responsibilities.svg';
-import developer_responsibilities_image from '@public/hackers/starter-kit/ideate/developer_responsibilities.svg';
-import designer_tips1_image from '@public/hackers/starter-kit/ideate/designer_tips1.svg';
-import designer_tips2_image from '@public/hackers/starter-kit/ideate/designer_tips2.svg';
+import designer_responsibilities_image from '@public/hackers/starter-kit/designResources/designer_responsibilities.svg';
+import developer_responsibilities_image from '@public/hackers/starter-kit/designResources/developer_responsibilities.svg';
+import designer_tips1_image from '@public/hackers/starter-kit/designResources/designer_tips1.svg';
+import designer_tips2_image from '@public/hackers/starter-kit/designResources/designer_tips2.svg';
-import figma_beginners_image from '@public/hackers/starter-kit/ideate/figma_beginners.svg';
-import figma_shapes from '@public/hackers/starter-kit/ideate/figma_shapes.svg';
-import mongodb from '@public/hackers/starter-kit/ideate/mongodb.svg';
-import auth0 from '@public/hackers/starter-kit/ideate/auth0.svg';
+import figma_beginners_image from '@public/hackers/starter-kit/designResources/figma_beginners.svg';
+import figma_shapes from '@public/hackers/starter-kit/designResources/figma_shapes.svg';
+import mongodb from '@public/hackers/starter-kit/designResources/mongodb.svg';
+import auth0 from '@public/hackers/starter-kit/designResources/auth0.svg';
-import timeline from '@public/hackers/starter-kit/ideate/timeline.svg';
+import timeline from '@public/hackers/starter-kit/designResources/timeline.svg';
// Extra
-//import scroll_bar1 from '@public/hackers/starter-kit/ideate/scroll_bar1.svg';
-//import divider from '@public/hackers/starter-kit/ideate/divider.svg';
+//import scroll_bar1 from '@public/hackers/starter-kit/designResources/scroll_bar1.svg';
+//import divider from '@public/hackers/starter-kit/designResources/divider.svg';
interface Link {
type: string;
diff --git a/public/hackers/starter-kit/ideate/arrow_icon.svg b/public/hackers/starter-kit/designResources/arrow_icon.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/arrow_icon.svg
rename to public/hackers/starter-kit/designResources/arrow_icon.svg
diff --git a/public/hackers/starter-kit/ideate/auth0.svg b/public/hackers/starter-kit/designResources/auth0.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/auth0.svg
rename to public/hackers/starter-kit/designResources/auth0.svg
diff --git a/public/hackers/starter-kit/ideate/designer_responsibilities.svg b/public/hackers/starter-kit/designResources/designer_responsibilities.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/designer_responsibilities.svg
rename to public/hackers/starter-kit/designResources/designer_responsibilities.svg
diff --git a/public/hackers/starter-kit/ideate/designer_tips1.svg b/public/hackers/starter-kit/designResources/designer_tips1.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/designer_tips1.svg
rename to public/hackers/starter-kit/designResources/designer_tips1.svg
diff --git a/public/hackers/starter-kit/ideate/designer_tips2.svg b/public/hackers/starter-kit/designResources/designer_tips2.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/designer_tips2.svg
rename to public/hackers/starter-kit/designResources/designer_tips2.svg
diff --git a/public/hackers/starter-kit/ideate/developer_responsibilities.svg b/public/hackers/starter-kit/designResources/developer_responsibilities.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/developer_responsibilities.svg
rename to public/hackers/starter-kit/designResources/developer_responsibilities.svg
diff --git a/public/hackers/starter-kit/ideate/divider.svg b/public/hackers/starter-kit/designResources/divider.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/divider.svg
rename to public/hackers/starter-kit/designResources/divider.svg
diff --git a/public/hackers/starter-kit/ideate/figma_beginners.svg b/public/hackers/starter-kit/designResources/figma_beginners.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/figma_beginners.svg
rename to public/hackers/starter-kit/designResources/figma_beginners.svg
diff --git a/public/hackers/starter-kit/ideate/figma_shapes.svg b/public/hackers/starter-kit/designResources/figma_shapes.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/figma_shapes.svg
rename to public/hackers/starter-kit/designResources/figma_shapes.svg
diff --git a/public/hackers/starter-kit/ideate/mongodb.svg b/public/hackers/starter-kit/designResources/mongodb.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/mongodb.svg
rename to public/hackers/starter-kit/designResources/mongodb.svg
diff --git a/public/hackers/starter-kit/ideate/scroll_bar1.svg b/public/hackers/starter-kit/designResources/scroll_bar1.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/scroll_bar1.svg
rename to public/hackers/starter-kit/designResources/scroll_bar1.svg
diff --git a/public/hackers/starter-kit/ideate/tabler_brand-figma.svg b/public/hackers/starter-kit/designResources/tabler_brand-figma.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/tabler_brand-figma.svg
rename to public/hackers/starter-kit/designResources/tabler_brand-figma.svg
diff --git a/public/hackers/starter-kit/ideate/tabler_brand-github.svg b/public/hackers/starter-kit/designResources/tabler_brand-github.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/tabler_brand-github.svg
rename to public/hackers/starter-kit/designResources/tabler_brand-github.svg
diff --git a/public/hackers/starter-kit/ideate/tabler_device-desktop-code.svg b/public/hackers/starter-kit/designResources/tabler_device-desktop-code.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/tabler_device-desktop-code.svg
rename to public/hackers/starter-kit/designResources/tabler_device-desktop-code.svg
diff --git a/public/hackers/starter-kit/ideate/tabler_image-in-picture.svg b/public/hackers/starter-kit/designResources/tabler_image-in-picture.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/tabler_image-in-picture.svg
rename to public/hackers/starter-kit/designResources/tabler_image-in-picture.svg
diff --git a/public/hackers/starter-kit/ideate/tabler_message-chatbot.svg b/public/hackers/starter-kit/designResources/tabler_message-chatbot.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/tabler_message-chatbot.svg
rename to public/hackers/starter-kit/designResources/tabler_message-chatbot.svg
diff --git a/public/hackers/starter-kit/ideate/tabler_presentation-analytics.svg b/public/hackers/starter-kit/designResources/tabler_presentation-analytics.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/tabler_presentation-analytics.svg
rename to public/hackers/starter-kit/designResources/tabler_presentation-analytics.svg
diff --git a/public/hackers/starter-kit/ideate/tabler_shape.svg b/public/hackers/starter-kit/designResources/tabler_shape.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/tabler_shape.svg
rename to public/hackers/starter-kit/designResources/tabler_shape.svg
diff --git a/public/hackers/starter-kit/ideate/tabler_sparkles-2.svg b/public/hackers/starter-kit/designResources/tabler_sparkles-2.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/tabler_sparkles-2.svg
rename to public/hackers/starter-kit/designResources/tabler_sparkles-2.svg
diff --git a/public/hackers/starter-kit/ideate/tabler_text-size.svg b/public/hackers/starter-kit/designResources/tabler_text-size.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/tabler_text-size.svg
rename to public/hackers/starter-kit/designResources/tabler_text-size.svg
diff --git a/public/hackers/starter-kit/ideate/tabler_writing-sign.svg b/public/hackers/starter-kit/designResources/tabler_writing-sign.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/tabler_writing-sign.svg
rename to public/hackers/starter-kit/designResources/tabler_writing-sign.svg
diff --git a/public/hackers/starter-kit/ideate/timeline.svg b/public/hackers/starter-kit/designResources/timeline.svg
similarity index 100%
rename from public/hackers/starter-kit/ideate/timeline.svg
rename to public/hackers/starter-kit/designResources/timeline.svg
From 3f89765925404d4b5a0fbfafe816dc38e2e75ed7 Mon Sep 17 00:00:00 2001
From: michelleyeoh
Date: Tue, 7 Apr 2026 21:23:41 -0700
Subject: [PATCH 14/19] revert asset changes
---
.../table-number-checkin/diag-arrow.svg | 5 -
.../mascots-hanging-out.svg | 95 --------------
.../table-number-checkin/sleeping-frog.svg | 22 ----
public/hackers/table-number-checkin/stars.svg | 6 -
public/judges/projects/project-cow.svg | 119 +++++++++++++-----
5 files changed, 89 insertions(+), 158 deletions(-)
delete mode 100644 public/hackers/table-number-checkin/diag-arrow.svg
delete mode 100644 public/hackers/table-number-checkin/mascots-hanging-out.svg
delete mode 100644 public/hackers/table-number-checkin/sleeping-frog.svg
delete mode 100644 public/hackers/table-number-checkin/stars.svg
diff --git a/public/hackers/table-number-checkin/diag-arrow.svg b/public/hackers/table-number-checkin/diag-arrow.svg
deleted file mode 100644
index ebcc8fe0c..000000000
--- a/public/hackers/table-number-checkin/diag-arrow.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/public/hackers/table-number-checkin/mascots-hanging-out.svg b/public/hackers/table-number-checkin/mascots-hanging-out.svg
deleted file mode 100644
index bc3909e47..000000000
--- a/public/hackers/table-number-checkin/mascots-hanging-out.svg
+++ /dev/null
@@ -1,95 +0,0 @@
-
diff --git a/public/hackers/table-number-checkin/sleeping-frog.svg b/public/hackers/table-number-checkin/sleeping-frog.svg
deleted file mode 100644
index 4deb77999..000000000
--- a/public/hackers/table-number-checkin/sleeping-frog.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
\ No newline at end of file
diff --git a/public/hackers/table-number-checkin/stars.svg b/public/hackers/table-number-checkin/stars.svg
deleted file mode 100644
index d51c422e3..000000000
--- a/public/hackers/table-number-checkin/stars.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
diff --git a/public/judges/projects/project-cow.svg b/public/judges/projects/project-cow.svg
index 3328476d6..088aa2e45 100644
--- a/public/judges/projects/project-cow.svg
+++ b/public/judges/projects/project-cow.svg
@@ -1,34 +1,93 @@
-
\ No newline at end of file
From 3ff8bc7d197537dc0273be43ca39587dc48c10de Mon Sep 17 00:00:00 2001
From: michelleyeoh
Date: Tue, 7 Apr 2026 21:24:39 -0700
Subject: [PATCH 15/19] added svg og
---
public/judges/projects/project-cow.svg | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/public/judges/projects/project-cow.svg b/public/judges/projects/project-cow.svg
index 088aa2e45..f0ae65eb8 100644
--- a/public/judges/projects/project-cow.svg
+++ b/public/judges/projects/project-cow.svg
@@ -90,4 +90,4 @@
-
\ No newline at end of file
+
From b04df6507bb89b530716c4f45114e64a734dc6cc Mon Sep 17 00:00:00 2001
From: michelleyeoh
Date: Tue, 7 Apr 2026 21:31:41 -0700
Subject: [PATCH 16/19] match padding and gap to green section
---
.../(hackers)/_components/StarterKit/DesignResources.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx b/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx
index 136525a2c..12617677a 100644
--- a/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx
+++ b/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx
@@ -396,7 +396,7 @@ export default function DesignResources() {
};
return (
-
+
{/** Section 1 */}
{/** Section 7 */}
-
+
OUR RECOMMENDED BREAKDOWN TO
From eb39c70a6eac6ca2ce861aec6b153a0f454bebe4 Mon Sep 17 00:00:00 2001
From: michelleyeoh
Date: Tue, 7 Apr 2026 21:38:55 -0700
Subject: [PATCH 17/19] split into files
---
.../{ => DesignResources}/DesignResources.tsx | 246 +-----------------
.../StarterKit/DesignResources/Resources.tsx | 58 +++++
.../DesignResources/Responsibilities.tsx | 121 +++++++++
.../StarterKit/DesignResources/Tips.tsx | 67 +++++
.../_components/StarterKit/StarterKit.tsx | 2 +-
5 files changed, 252 insertions(+), 242 deletions(-)
rename app/(pages)/(hackers)/_components/StarterKit/{ => DesignResources}/DesignResources.tsx (55%)
create mode 100644 app/(pages)/(hackers)/_components/StarterKit/DesignResources/Resources.tsx
create mode 100644 app/(pages)/(hackers)/_components/StarterKit/DesignResources/Responsibilities.tsx
create mode 100644 app/(pages)/(hackers)/_components/StarterKit/DesignResources/Tips.tsx
diff --git a/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx b/app/(pages)/(hackers)/_components/StarterKit/DesignResources/DesignResources.tsx
similarity index 55%
rename from app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx
rename to app/(pages)/(hackers)/_components/StarterKit/DesignResources/DesignResources.tsx
index 12617677a..d903e10e5 100644
--- a/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx
+++ b/app/(pages)/(hackers)/_components/StarterKit/DesignResources/DesignResources.tsx
@@ -1,8 +1,11 @@
'use client';
import Image from 'next/image';
-import type { StaticImageData } from 'next/image';
-import { useState, useRef } from 'react';
+
+// Components
+import { Resources } from './Resources';
+import { Responsibilities } from './Responsibilities';
+import { Tips } from './Tips';
// Icons
import writing_sign from '@public/hackers/starter-kit/designResources/tabler_writing-sign.svg';
@@ -18,8 +21,6 @@ import text_size from '@public/hackers/starter-kit/designResources/tabler_text-s
import image_in_picture from '@public/hackers/starter-kit/designResources/tabler_image-in-picture.svg';
import shape from '@public/hackers/starter-kit/designResources/tabler_shape.svg';
-import arrow from '@public/hackers/starter-kit/designResources/arrow_icon.svg';
-
// Big Images
import designer_responsibilities_image from '@public/hackers/starter-kit/designResources/designer_responsibilities.svg';
import developer_responsibilities_image from '@public/hackers/starter-kit/designResources/developer_responsibilities.svg';
@@ -37,243 +38,6 @@ import timeline from '@public/hackers/starter-kit/designResources/timeline.svg';
//import scroll_bar1 from '@public/hackers/starter-kit/designResources/scroll_bar1.svg';
//import divider from '@public/hackers/starter-kit/designResources/divider.svg';
-interface Link {
- type: string;
- title: string;
- description: string;
- image: StaticImageData;
- buttonName: string;
- link: string;
- alt: string;
-}
-
-function Link({ link }: { link: Link }) {
- return (
-
-
-
-
{link.type}
-
{link.title}
-
{link.description}
-
-
-
-
IDEATE
-
{title}
-
-
-
-
-
-
- {responsibilities.map((responsibility, index) => (
-
-
-
- {index == responsibilityIndex ? (
-
- {responsibility.title}
-
- ) : (
-
- {responsibility.title}
-
- )}
-
- {index == responsibilityIndex && (
-
- {responsibility.description}
-
- )}
-
- ))}
-
-
-
-
-
-
-
{subtitle}
-
{title}
-
{description}
-
- {tips.map((tip, index) => (
-
- {tip.icon ? (
-
- ) : (
-
{`0${index + 1}.`}
- )}
-
-
- {tip.title && (
-
- {tip.title}:
-
- )}{' '}
- {tip.tip}
-
-
-
- ))}
-
-
+
+
+
{link.type}
+
{link.title}
+
{link.description}
+
+
+
+
IDEATE
+
{title}
+
+
+
+
+
+
+ {responsibilities.map((responsibility, index) => (
+
+
+
+ {index == responsibilityIndex ? (
+
+ {responsibility.title}
+
+ ) : (
+
+ {responsibility.title}
+
+ )}
+
+ {index == responsibilityIndex && (
+
+ {responsibility.description}
+
+ )}
+
+ ))}
+
+
+
+
+
+
+
{subtitle}
+
{title}
+
{description}
+
+ {tips.map((tip, index) => (
+
+ {tip.icon ? (
+
+ ) : (
+
{`0${index + 1}.`}
+ )}
+
+
+ {tip.title && (
+
+ {tip.title}:
+
+ )}{' '}
+ {tip.tip}
+
+
+
+ ))}
+
+
Dev Resources
;
-}
diff --git a/app/(pages)/(hackers)/_components/StarterKit/DesignResources/DesignResources.tsx b/app/(pages)/(hackers)/_components/StarterKit/Resources/DesignDevResources.tsx
similarity index 98%
rename from app/(pages)/(hackers)/_components/StarterKit/DesignResources/DesignResources.tsx
rename to app/(pages)/(hackers)/_components/StarterKit/Resources/DesignDevResources.tsx
index d903e10e5..751271f5d 100644
--- a/app/(pages)/(hackers)/_components/StarterKit/DesignResources/DesignResources.tsx
+++ b/app/(pages)/(hackers)/_components/StarterKit/Resources/DesignDevResources.tsx
@@ -38,7 +38,7 @@ import timeline from '@public/hackers/starter-kit/designResources/timeline.svg';
//import scroll_bar1 from '@public/hackers/starter-kit/designResources/scroll_bar1.svg';
//import divider from '@public/hackers/starter-kit/designResources/divider.svg';
-export default function DesignResources() {
+export default function DesignDevResources() {
// Data
const designer_responsibilities = [
{
@@ -162,7 +162,7 @@ export default function DesignResources() {
return (
{/** Section 1 */}
-
+
{/** Section 5 */}
-
+
-
+
{sections.map((section) => (
- {sections.map((section) => (
-
- ))}
+ {sections.map((section) =>
+ // Render separate link for Design and Dev Resources in sidebar
+ section.id === 'design-resources' ? (
+ designResourceLinks.map((link) => (
+
+ ))
+ ) : (
+
+ )
+ )}
{sections.map(({ id, Component }) => (