Skip to content

Commit dd9ba8c

Browse files
haylietanmichelleyeoh
haylietan
and
michelleyeoh
authored
462 starterkit green section (#464)
* File structure * Init files * Winnable idea desktop + mobile * Updated mentor, prev winning * Updated Mentor mobile * clean up styling * fix links * added conditional rendering for ideate section card --------- Co-authored-by: michelleyeoh <michellew.yeoh@gmail.com>
1 parent fe47692 commit dd9ba8c

17 files changed

Lines changed: 624 additions & 5 deletions

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

Lines changed: 0 additions & 3 deletions
This file was deleted.

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import IdeateHero from './IdeateHero';
2+
import IdeateMentorCallout from './IdeateMentorCallout';
3+
import IdeatePrinciples from './IdeatePrinciples';
4+
import IdeateWinningHacks from './IdeateWinningHacks';
5+
6+
export default function Ideate() {
7+
return (
8+
<div className="flex flex-col gap-[112px] bg-[#F1FFCC] py-[7%] px-[4%] md:gap-[144px]">
9+
<IdeateHero />
10+
<IdeatePrinciples />
11+
<IdeateWinningHacks />
12+
<IdeateMentorCallout />
13+
</div>
14+
);
15+
}

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import Image from 'next/image';
2+
import podium from '@public/hackers/starter-kit/ideate/WinnableIdea.svg';
3+
import IdeateSection from './IdeateSection';
4+
5+
export default function IdeateHero() {
6+
return (
7+
<IdeateSection eyebrow="Ideate" title="What is a winnable idea?">
8+
<div className="grid items-start gap-8 md:grid-cols-[minmax(0,1fr)_minmax(320px,0.95fr)] md:gap-12 lg:gap-16">
9+
<div className="max-w-[34rem] pt-[5%] self-start space-y-6 text-[1rem] text-[#5e6457]">
10+
<p>
11+
A winnable idea is{' '}
12+
<span className="underline decoration-[#a7ae85] decoration-[1.5px] underline-offset-[0.18em]">
13+
not
14+
</span>{' '}
15+
always the most complicated one. It is clear, purposeful, and rooted
16+
in a real user need.
17+
</p>
18+
<p>
19+
When your team combines impact, audience awareness, and a unique
20+
angle, your project is much more likely to stand out to judges.
21+
</p>
22+
</div>
23+
<div className="relative mx-auto flex aspect-[1.48] w-full max-w-[33rem] items-end justify-center overflow-hidden rounded-[26px] bg-[#D5FDFF] md:self-end md:justify-self-end">
24+
<Image
25+
src={podium}
26+
alt="HackDavis animals celebrating on a podium"
27+
className="relative z-10 h-auto w-full self-end object-contain px-3 pt-3 md:px-5 md:pt-5"
28+
/>
29+
</div>
30+
</div>
31+
</IdeateSection>
32+
);
33+
}

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
interface IdeateInfoCardProps {
2+
visual: React.ReactNode;
3+
title: string;
4+
description: string;
5+
}
6+
7+
export default function IdeateInfoCard({
8+
visual,
9+
title,
10+
description,
11+
}: IdeateInfoCardProps) {
12+
return (
13+
<article className="flex h-full flex-col gap-5">
14+
<div className="relative flex aspect-[1.22] items-center justify-center overflow-hidden rounded-[22px] bg-[#cfeff3]">
15+
{visual}
16+
</div>
17+
<div className="space-y-3">
18+
<h3 className="font-jakarta text-[1.25rem] font-semibold text-[#1F1F1F]">
19+
{title}
20+
</h3>
21+
<p className="max-w-[20rem] text-[1rem] text-[#000000a6]">
22+
{description}
23+
</p>
24+
</div>
25+
</article>
26+
);
27+
}

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import Image from 'next/image';
2+
import { ArrowRight } from 'lucide-react';
3+
import mentorGraphic from '@public/hackers/starter-kit/ideate/TalkMentor.svg';
4+
import IdeateSection from './IdeateSection';
5+
6+
export default function IdeateMentorCallout() {
7+
const mentorDiscordLink = 'https://discord.gg/wc6QQEc';
8+
return (
9+
<IdeateSection eyebrow=" " title="">
10+
<div className="grid items-start gap-8 md:grid-cols-[minmax(320px,0.95fr)_minmax(0,1fr)] md:gap-10 lg:gap-14">
11+
<div className="relative order-1 mx-auto flex aspect-[1.72] w-full max-w-[44rem] items-center justify-center overflow-hidden rounded-[28px] bg-[#E4FFFE] md:order-1 md:mx-0">
12+
<Image
13+
src={mentorGraphic}
14+
alt="HackDavis mentor illustration"
15+
className="relative h-full w-full object-contain"
16+
/>
17+
</div>
18+
<div className="order-2 flex flex-col gap-6 md:order-2">
19+
<p className="text-[1rem] font-dm-mono uppercase text-[#00000066]">
20+
Still Feel Stuck?
21+
</p>
22+
<p className="max-w-[38rem] text-[#656565] text-[1rem]">
23+
No worries, we have a panel of industry mentors who are ready to
24+
lend you help at any part of your development process.
25+
</p>
26+
<div className="hidden rounded-[20px] bg-[#E9FBBA] px-6 py-5 text-[#000000a6] md:block md:px-8 md:py-6">
27+
<p className="text-[1rem]">
28+
<span className="italic">Note:</span> If you have any questions
29+
regarding hackathon events, please contact a{' '}
30+
<a
31+
href="https://discord.gg/Ba5xAtf8"
32+
target="_blank"
33+
rel="noopener noreferrer"
34+
className="underline underline-offset-4"
35+
>
36+
director
37+
</a>
38+
.
39+
</p>
40+
</div>
41+
<div className="pt-1">
42+
<a
43+
href={mentorDiscordLink}
44+
target="_blank"
45+
rel="noopener noreferrer"
46+
className="inline-flex items-center gap-3 font-dm-mono text-[1.125rem] uppercase text-[#3F3F3F] underline underline-offset-4 transition hover:opacity-75"
47+
>
48+
<ArrowRight className="h-5 w-5" />
49+
Contact a mentor
50+
</a>
51+
</div>
52+
</div>
53+
</div>
54+
</IdeateSection>
55+
);
56+
}

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import Image from 'next/image';
2+
import impactImage from '@public/hackers/starter-kit/ideate/Impact.svg';
3+
import audienceImage from '@public/hackers/starter-kit/ideate/Audience.svg';
4+
import apartImage from '@public/hackers/starter-kit/ideate/Apart.svg';
5+
import IdeateInfoCard from './IdeateInfoCard';
6+
import IdeateSection from './IdeateSection';
7+
8+
const principles = [
9+
{
10+
title: 'Impact Level',
11+
description:
12+
'Does your product solve a real problem? Strong projects are rooted in something people actually need help with!',
13+
visual: (
14+
<Image
15+
src={impactImage}
16+
alt="Impact level illustration"
17+
className="h-full w-full object-cover"
18+
/>
19+
),
20+
},
21+
{
22+
title: 'Tailor for Audience',
23+
description:
24+
'Who are your users? What are their pain points? Know who you’re building for. The clearer your user is, the easier it is to make smart product decisions.',
25+
visual: (
26+
<Image
27+
src={audienceImage}
28+
alt="Audience illustration"
29+
className="h-full w-full object-cover"
30+
/>
31+
),
32+
},
33+
{
34+
title: 'Set Yourself Apart',
35+
description:
36+
'What makes your solution unique? Find your twist. Your project does not need to be huge, but it should have something that makes people remember it.',
37+
visual: (
38+
<Image
39+
src={apartImage}
40+
alt="Set yourself apart illustration"
41+
className="h-full w-full object-cover"
42+
/>
43+
),
44+
},
45+
];
46+
47+
export default function IdeatePrinciples() {
48+
return (
49+
<IdeateSection eyebrow="While Brainstorming" title="Keep these in mind...">
50+
<div className="grid gap-10 md:grid-cols-3 md:gap-6">
51+
{principles.map((principle) => (
52+
<IdeateInfoCard key={principle.title} {...principle} />
53+
))}
54+
</div>
55+
</IdeateSection>
56+
);
57+
}

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
interface IdeateSectionProps {
2+
eyebrow: string;
3+
title: string;
4+
children: React.ReactNode;
5+
action?: React.ReactNode;
6+
}
7+
8+
export default function IdeateSection({
9+
eyebrow,
10+
title,
11+
children,
12+
action,
13+
}: IdeateSectionProps) {
14+
const normalizedEyebrow = eyebrow.trim();
15+
const normalizedTitle = title.trim();
16+
const hasHeaderContent =
17+
Boolean(normalizedEyebrow) || Boolean(normalizedTitle) || Boolean(action);
18+
19+
return (
20+
<section className="flex flex-col gap-4 md:gap-6">
21+
{hasHeaderContent ? (
22+
<div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
23+
<div className="max-w-2xl">
24+
{normalizedEyebrow ? (
25+
<p className="text-[1rem] font-dm-mono uppercase text-[#00000066]">
26+
{normalizedEyebrow}
27+
</p>
28+
) : null}
29+
{normalizedTitle ? (
30+
<h2 className="mt-1 font-jakarta text-[28px] font-semibold text-[#3F3F3F] md:text-[32px]">
31+
{normalizedTitle}
32+
</h2>
33+
) : null}
34+
</div>
35+
{action}
36+
</div>
37+
) : null}
38+
{children}
39+
</section>
40+
);
41+
}

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import patientSimImage from '@public/hackers/starter-kit/ideate/patient_sim_ai.png';
2+
import nomadImage from '@public/hackers/starter-kit/ideate/nomad.png';
3+
import skinScreenImage from '@public/hackers/starter-kit/ideate/SkinScreen.png';
4+
import { ArrowUpRight } from 'lucide-react';
5+
import { Button } from '@globals/components/ui/button';
6+
import IdeateSection from './IdeateSection';
7+
import WinningHackCard from './WinningHackCard';
8+
9+
const devPostLink = 'https://hackdavis-2024.devpost.com/project-gallery';
10+
11+
const winningHacks = [
12+
{
13+
award: 'Best Hack for Social Good',
14+
year: '2024',
15+
title: 'PatientSimAI',
16+
description:
17+
'PatientSimAI is a web app using AI and GPT-4 to simulate patient interactions, aiding clinical training, enhancing medical education, and building practical skills.',
18+
link: 'https://devpost.com/software/patientsimai',
19+
image: patientSimImage,
20+
},
21+
{
22+
award: 'Best Hack for Social Good',
23+
year: '2024',
24+
title: 'nomad /\\',
25+
description:
26+
'Users can place pins for homeless individuals or lost animals, alerting organizations to assist. The app also encourages donations, volunteering, and offers local business rewards.',
27+
link: 'https://devpost.com/software/nomad-xmlf65',
28+
image: nomadImage,
29+
},
30+
{
31+
award: 'Best Health Hack',
32+
year: '2023',
33+
title: 'SkinScreen',
34+
description:
35+
'SkinScreen is a mobile app that uses deep learning to analyze photos of skin lesions and identify potential skin conditions, helping users detect possible skin cancer early and access educational resources for better skin health.',
36+
link: devPostLink,
37+
image: skinScreenImage,
38+
},
39+
];
40+
41+
export default function IdeateWinningHacks() {
42+
return (
43+
<IdeateSection
44+
eyebrow=""
45+
title="Previous winning hacks"
46+
action={
47+
<Button
48+
asChild
49+
variant="default"
50+
className="h-11 rounded-full border-0 bg-[#3c3b3a] px-5 text-sm font-semibold text-white shadow-none hover:bg-[#2f2e2d] md:px-6"
51+
>
52+
<a href={devPostLink} target="_blank" rel="noopener noreferrer">
53+
<ArrowUpRight className="h-4 w-4" />
54+
See All
55+
</a>
56+
</Button>
57+
}
58+
>
59+
<div className="space-y-4 md:space-y-3">
60+
{winningHacks.map((hack) => (
61+
<WinningHackCard key={hack.title} {...hack} />
62+
))}
63+
</div>
64+
</IdeateSection>
65+
);
66+
}

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import Image, { StaticImageData } from 'next/image';
2+
3+
interface WinningHackCardProps {
4+
award: string;
5+
year: string;
6+
title: string;
7+
description: string;
8+
link: string;
9+
image?: StaticImageData;
10+
visual?: React.ReactNode;
11+
}
12+
13+
export default function WinningHackCard({
14+
award,
15+
year,
16+
title,
17+
description,
18+
link,
19+
image,
20+
visual,
21+
}: WinningHackCardProps) {
22+
return (
23+
<a
24+
href={link}
25+
target="_blank"
26+
rel="noopener noreferrer"
27+
className="group block"
28+
>
29+
<article className="flex flex-col gap-4 rounded-[20px] bg-white px-4 py-4 shadow-[0_12px_35px_rgba(134,137,116,0.08)] md:flex-row md:items-center md:gap-6 md:px-4 md:py-3">
30+
<div className="relative flex aspect-[1.5] w-full items-center justify-center overflow-hidden rounded-[14px] bg-[#f8f8fb] ring-1 ring-[#efefef] md:w-[240px] md:flex-shrink-0">
31+
{image ? (
32+
<Image
33+
src={image}
34+
alt={title}
35+
fill
36+
className="object-contain"
37+
sizes="(max-width: 768px) 100vw, 240px"
38+
/>
39+
) : (
40+
visual
41+
)}
42+
</div>
43+
<div className="flex flex-1 flex-col gap-2 md:gap-3">
44+
<p className="font-dm-mono text-[1rem] uppercase text-[#00000066]">
45+
{award} {year}
46+
</p>
47+
<h3 className="font-metropolis text-[1.25rem] font-semibold text-[#1F1F1F]">
48+
{title}
49+
</h3>
50+
<p className="max-w-[42rem] text-[1rem] text-[#000000a6]">
51+
{description}
52+
</p>
53+
</div>
54+
</article>
55+
</a>
56+
);
57+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import mascots from '@public/hackers/starter-kit/introduction/startkit_mascots.s
33

44
export default function Introduction() {
55
return (
6-
<div className="my-[100px] mx-[60px] gap-[32px] md:gap-[8%] flex flex-col md:flex-row items-center">
6+
<div className="py-[7%] px-[4%] gap-[32px] md:gap-[8%] flex flex-col md:flex-row items-center">
77
<div className="flex-1">
88
<Image src={mascots} alt="hackdavis mascots looking at computer" />
99
</div>

0 commit comments

Comments
 (0)