diff --git a/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx b/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx deleted file mode 100644 index 4c7626c9..00000000 --- a/app/(pages)/(hackers)/_components/StarterKit/DesignResources.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function DesignResources() { - return
Design Resources
; -} diff --git a/app/(pages)/(hackers)/_components/StarterKit/DevResources.tsx b/app/(pages)/(hackers)/_components/StarterKit/DevResources.tsx deleted file mode 100644 index 6e3a3d40..00000000 --- a/app/(pages)/(hackers)/_components/StarterKit/DevResources.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function DevResources() { - return
Dev Resources
; -} diff --git a/app/(pages)/(hackers)/_components/StarterKit/Resources/DesignDevResources.tsx b/app/(pages)/(hackers)/_components/StarterKit/Resources/DesignDevResources.tsx new file mode 100644 index 00000000..dcc21b7e --- /dev/null +++ b/app/(pages)/(hackers)/_components/StarterKit/Resources/DesignDevResources.tsx @@ -0,0 +1,245 @@ +'use client'; + +import Image from 'next/image'; + +// 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'; +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/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/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'; + +// 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'; +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/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/designResources/timeline.svg'; + +// Extra +//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 DesignDevResources() { + // 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 */} +
+

+ Design Tips +

+ +
+ + {/** Section 3 */} +
+ +
+ + {/** Section 4 */} +
+ +
+ + {/** Section 5 */} +
+ +
+ + {/** Section 6 */} +
+ +
+ + {/** Section 7 */} +
+

+ OUR RECOMMENDED BREAKDOWN TO +

+

+ Keep track of time +

+ timeline +
+
+ ); +} diff --git a/app/(pages)/(hackers)/_components/StarterKit/Resources/Resources.tsx b/app/(pages)/(hackers)/_components/StarterKit/Resources/Resources.tsx new file mode 100644 index 00000000..e7f0124a --- /dev/null +++ b/app/(pages)/(hackers)/_components/StarterKit/Resources/Resources.tsx @@ -0,0 +1,58 @@ +import Image from 'next/image'; +import type { StaticImageData } from 'next/image'; + +import arrow from '@public/hackers/starter-kit/designResources/arrow_icon.svg'; + +interface Link { + type: string; + title: string; + description: string; + image: StaticImageData; + buttonName: string; + link: string; + alt: string; +} + +function Link({ link }: { link: Link }) { + return ( +
+ {link.alt} +
+

{link.type}

+

{link.title}

+

{link.description}

+ +
+
+ ); +} + +export function Resources({ + title, + link1, + link2, +}: { + title: string; + link1: Link; + link2: Link; +}) { + return ( +
+

+ {title} +

+ + +
+ ); +} diff --git a/app/(pages)/(hackers)/_components/StarterKit/Resources/Responsibilities.tsx b/app/(pages)/(hackers)/_components/StarterKit/Resources/Responsibilities.tsx new file mode 100644 index 00000000..6d6bef11 --- /dev/null +++ b/app/(pages)/(hackers)/_components/StarterKit/Resources/Responsibilities.tsx @@ -0,0 +1,121 @@ +import Image from 'next/image'; +import type { StaticImageData } from 'next/image'; +import { useRef, useState } from 'react'; + +interface Responsibility { + icon: StaticImageData; + title: string; + description: string; +} + +// shi figure out that bar!!!!!! +export 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}

+
+ {`${title} + +
+
+
+
+
+ {responsibilities.map((responsibility, index) => ( +
+
+ {`${responsibility.title} + {index == responsibilityIndex ? ( +

+ {responsibility.title} +

+ ) : ( +

+ {responsibility.title} +

+ )} +
+ {index == responsibilityIndex && ( +

+ {responsibility.description} +

+ )} +
+ ))} +
+
+
+
+ ); +} diff --git a/app/(pages)/(hackers)/_components/StarterKit/Resources/Tips.tsx b/app/(pages)/(hackers)/_components/StarterKit/Resources/Tips.tsx new file mode 100644 index 00000000..69c771a3 --- /dev/null +++ b/app/(pages)/(hackers)/_components/StarterKit/Resources/Tips.tsx @@ -0,0 +1,67 @@ +import Image from 'next/image'; +import type { StaticImageData } from 'next/image'; + +interface Tip { + icon?: StaticImageData; + title?: string; + tip: string; +} + +export function Tips({ + image, + subtitle, + title, + description, + tips, + reverse, +}: { + image: StaticImageData; + subtitle: string; + title: string; + description: string; + tips: Tip[]; + reverse: boolean; +}) { + return ( +
+ {`${title} +
+

{subtitle}

+

{title}

+

{description}

+
+ {tips.map((tip, index) => ( +
+ {tip.icon ? ( + {`${tip.title} + ) : ( +

{`0${index + 1}.`}

+ )} +
+

+ {tip.title && ( + + {tip.title}: + + )}{' '} + {tip.tip} +

+
+
+ ))} +
+
+ ); +} diff --git a/app/(pages)/(hackers)/_components/StarterKit/StarterKit.tsx b/app/(pages)/(hackers)/_components/StarterKit/StarterKit.tsx index 96332955..66b39450 100644 --- a/app/(pages)/(hackers)/_components/StarterKit/StarterKit.tsx +++ b/app/(pages)/(hackers)/_components/StarterKit/StarterKit.tsx @@ -1,7 +1,6 @@ 'use client'; -import DesignResources from './DesignResources'; -import DevResources from './DevResources'; +import DesignDevResources from './Resources/DesignDevResources'; import Ideate from './Ideate/Ideate'; import Introduction from './Introduction'; import MoreTips from './MoreTips'; @@ -10,36 +9,44 @@ import TeamBuilding from './TeamBuilding'; const sections = [ { title: 'Introduction', - id: 'starter-kit-introduction', + id: 'introduction', Component: Introduction, }, { title: 'Team Building', - id: 'starter-kit-team-building', + id: 'team-building', Component: TeamBuilding, }, { title: 'Ideate', - id: 'starter-kit-ideate', + id: 'ideate', Component: Ideate, }, + // Resources section has two subsections (Design and Dev), so it's handled differently in the sidebar and component rendering { title: 'Design Resources', - id: 'starter-kit-design-resources', - Component: DesignResources, - }, - { - title: 'Dev Resources', - id: 'starter-kit-dev-resources', - Component: DevResources, + id: 'design-resources', + Component: DesignDevResources, }, { title: 'More Tips', - id: 'starter-kit-more-tips', + id: 'more-tips', Component: MoreTips, }, ]; +// Separate links for the Design Resources section in the sidebar +const designResourceLinks = [ + { + title: 'Design Resources', + id: 'design-resources', + }, + { + title: 'Dev Resources', + id: 'dev-resources', + }, +]; + function scrollToSection(id: string) { const element = document.getElementById(id); if (!element) return; @@ -49,17 +56,31 @@ function scrollToSection(id: string) { export default function StarterKit() { return (
-
- {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 }) => ( diff --git a/public/hackers/starter-kit/designResources/arrow_icon.svg b/public/hackers/starter-kit/designResources/arrow_icon.svg new file mode 100644 index 00000000..6e1703f1 --- /dev/null +++ b/public/hackers/starter-kit/designResources/arrow_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/hackers/starter-kit/designResources/auth0.svg b/public/hackers/starter-kit/designResources/auth0.svg new file mode 100644 index 00000000..826de569 --- /dev/null +++ b/public/hackers/starter-kit/designResources/auth0.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/hackers/starter-kit/designResources/designer_responsibilities.svg b/public/hackers/starter-kit/designResources/designer_responsibilities.svg new file mode 100644 index 00000000..9a41d5cc --- /dev/null +++ b/public/hackers/starter-kit/designResources/designer_responsibilities.svg @@ -0,0 +1,132 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/hackers/starter-kit/designResources/designer_tips1.svg b/public/hackers/starter-kit/designResources/designer_tips1.svg new file mode 100644 index 00000000..ff8554a8 --- /dev/null +++ b/public/hackers/starter-kit/designResources/designer_tips1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/hackers/starter-kit/designResources/designer_tips2.svg b/public/hackers/starter-kit/designResources/designer_tips2.svg new file mode 100644 index 00000000..456f2d75 --- /dev/null +++ b/public/hackers/starter-kit/designResources/designer_tips2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/hackers/starter-kit/designResources/developer_responsibilities.svg b/public/hackers/starter-kit/designResources/developer_responsibilities.svg new file mode 100644 index 00000000..c9bbf73a --- /dev/null +++ b/public/hackers/starter-kit/designResources/developer_responsibilities.svg @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/hackers/starter-kit/designResources/divider.svg b/public/hackers/starter-kit/designResources/divider.svg new file mode 100644 index 00000000..2e5e0b56 --- /dev/null +++ b/public/hackers/starter-kit/designResources/divider.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/hackers/starter-kit/designResources/figma_beginners.svg b/public/hackers/starter-kit/designResources/figma_beginners.svg new file mode 100644 index 00000000..ab245ee3 --- /dev/null +++ b/public/hackers/starter-kit/designResources/figma_beginners.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/hackers/starter-kit/designResources/figma_shapes.svg b/public/hackers/starter-kit/designResources/figma_shapes.svg new file mode 100644 index 00000000..11db21c9 --- /dev/null +++ b/public/hackers/starter-kit/designResources/figma_shapes.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/hackers/starter-kit/designResources/mongodb.svg b/public/hackers/starter-kit/designResources/mongodb.svg new file mode 100644 index 00000000..0fc9e7fc --- /dev/null +++ b/public/hackers/starter-kit/designResources/mongodb.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/hackers/starter-kit/designResources/scroll_bar1.svg b/public/hackers/starter-kit/designResources/scroll_bar1.svg new file mode 100644 index 00000000..4b16caff --- /dev/null +++ b/public/hackers/starter-kit/designResources/scroll_bar1.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/hackers/starter-kit/designResources/tabler_brand-figma.svg b/public/hackers/starter-kit/designResources/tabler_brand-figma.svg new file mode 100644 index 00000000..0560fa2f --- /dev/null +++ b/public/hackers/starter-kit/designResources/tabler_brand-figma.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/hackers/starter-kit/designResources/tabler_brand-github.svg b/public/hackers/starter-kit/designResources/tabler_brand-github.svg new file mode 100644 index 00000000..9c4ae3c2 --- /dev/null +++ b/public/hackers/starter-kit/designResources/tabler_brand-github.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/hackers/starter-kit/designResources/tabler_device-desktop-code.svg b/public/hackers/starter-kit/designResources/tabler_device-desktop-code.svg new file mode 100644 index 00000000..feb13ae4 --- /dev/null +++ b/public/hackers/starter-kit/designResources/tabler_device-desktop-code.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/hackers/starter-kit/designResources/tabler_image-in-picture.svg b/public/hackers/starter-kit/designResources/tabler_image-in-picture.svg new file mode 100644 index 00000000..0ee3b76a --- /dev/null +++ b/public/hackers/starter-kit/designResources/tabler_image-in-picture.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/hackers/starter-kit/designResources/tabler_message-chatbot.svg b/public/hackers/starter-kit/designResources/tabler_message-chatbot.svg new file mode 100644 index 00000000..9a585fbb --- /dev/null +++ b/public/hackers/starter-kit/designResources/tabler_message-chatbot.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/hackers/starter-kit/designResources/tabler_presentation-analytics.svg b/public/hackers/starter-kit/designResources/tabler_presentation-analytics.svg new file mode 100644 index 00000000..07993a8c --- /dev/null +++ b/public/hackers/starter-kit/designResources/tabler_presentation-analytics.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/hackers/starter-kit/designResources/tabler_shape.svg b/public/hackers/starter-kit/designResources/tabler_shape.svg new file mode 100644 index 00000000..0f2ebc54 --- /dev/null +++ b/public/hackers/starter-kit/designResources/tabler_shape.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/hackers/starter-kit/designResources/tabler_sparkles-2.svg b/public/hackers/starter-kit/designResources/tabler_sparkles-2.svg new file mode 100644 index 00000000..4c7675c4 --- /dev/null +++ b/public/hackers/starter-kit/designResources/tabler_sparkles-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/hackers/starter-kit/designResources/tabler_text-size.svg b/public/hackers/starter-kit/designResources/tabler_text-size.svg new file mode 100644 index 00000000..74ef7406 --- /dev/null +++ b/public/hackers/starter-kit/designResources/tabler_text-size.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/hackers/starter-kit/designResources/tabler_writing-sign.svg b/public/hackers/starter-kit/designResources/tabler_writing-sign.svg new file mode 100644 index 00000000..937ffeee --- /dev/null +++ b/public/hackers/starter-kit/designResources/tabler_writing-sign.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/hackers/starter-kit/designResources/timeline.svg b/public/hackers/starter-kit/designResources/timeline.svg new file mode 100644 index 00000000..7ed89c02 --- /dev/null +++ b/public/hackers/starter-kit/designResources/timeline.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + +