Skip to content

Commit fe22a91

Browse files
haylietanhaylietan
committed
Updated mentor, prev winning
1 parent 90bdafa commit fe22a91

11 files changed

Lines changed: 224 additions & 129 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import IdeateWinningHacks from './IdeateWinningHacks';
55

66
export default function Ideate() {
77
return (
8-
<div className="my-[100px] mx-[24px] p-[7%] md:mx-[60px] bg-[#F1FFCC] flex flex-col gap-[48px]">
8+
<div className="my-[100px] ml-[24px] mr-0 flex flex-col gap-[72px] bg-[#F1FFCC] p-[7%] pr-[7%] md:ml-[60px] md:mr-0 md:gap-[96px]">
99
<IdeateHero />
1010
<IdeatePrinciples />
1111
<IdeateWinningHacks />

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ export default function IdeateInfoCard({
1010
description,
1111
}: IdeateInfoCardProps) {
1212
return (
13-
<article className="flex h-full flex-col gap-3 rounded-[24px] bg-[#f8ffd5] p-3 text-text-dark shadow-[0_10px_35px_rgba(123,173,52,0.10)] ring-1 ring-[#dcecad] md:p-4">
14-
<div className="relative flex aspect-[1.05] items-center justify-center overflow-hidden rounded-[20px] bg-[linear-gradient(180deg,#d8f6ff_0%,#bbf1e3_100%)]">
13+
<article className="flex h-full flex-col gap-5 text-text-dark">
14+
<div className="relative flex aspect-[1.22] items-center justify-center overflow-hidden rounded-[22px] bg-[#cfeff3]">
1515
{visual}
1616
</div>
17-
<div className="space-y-2">
18-
<h3 className="font-metropolis text-lg font-semibold leading-tight md:text-xl">
17+
<div className="space-y-3">
18+
<h3 className="font-metropolis text-[1.35rem] font-semibold leading-tight md:text-[1.6rem]">
1919
{title}
2020
</h3>
21-
<p className="text-sm leading-6 text-[#58635b] md:text-[0.95rem]">
21+
<p className="max-w-[20rem] text-[1rem] leading-[1.15] text-[#58635b] md:text-[1.05rem]">
2222
{description}
2323
</p>
2424
</div>

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

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,50 @@
11
import Image from 'next/image';
2-
import mentorGraphic from '@public/hackers/starter-kit/resources/rabbit_duck_mentor.svg';
2+
import { ArrowRight } from 'lucide-react';
3+
import mentorGraphic from '@public/hackers/starter-kit/ideate/TalkMentor.svg';
34
import IdeateSection from './IdeateSection';
45

56
export default function IdeateMentorCallout() {
67
return (
7-
<IdeateSection eyebrow="Still Feel Stuck?" title="Talk with a mentor">
8-
<div className="grid gap-5 rounded-[28px] bg-[linear-gradient(135deg,#d9f5f2_0%,#edf8bb_100%)] p-4 shadow-[0_16px_45px_rgba(175,209,87,0.14)] ring-1 ring-[#dcecad] md:grid-cols-[minmax(260px,0.95fr)_minmax(0,1.05fr)] md:items-center md:p-6 lg:p-8">
9-
<div className="relative order-2 mx-auto flex aspect-[1.4] w-full max-w-[360px] items-center justify-center overflow-hidden rounded-[24px] bg-[#d9f5f2] md:order-1">
10-
<div className="absolute right-10 top-8 h-28 w-28 rounded-full border-2 border-[#8ccfdd]" />
8+
<IdeateSection eyebrow=" " title="">
9+
<div className="grid items-start gap-8 md:grid-cols-[minmax(320px,0.95fr)_minmax(0,1fr)] md:gap-10 lg:gap-14">
10+
<div className="relative order-2 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">
1111
<Image
1212
src={mentorGraphic}
1313
alt="HackDavis mentor illustration"
14-
className="relative h-full w-full object-contain p-4"
14+
className="relative h-full w-full object-contain"
1515
/>
1616
</div>
17-
<div className="order-1 flex flex-col gap-4 md:order-2">
18-
<p className="text-sm leading-7 text-[#5e6457] md:text-base">
17+
<div className="order-1 flex flex-col gap-6 md:order-2">
18+
<p className="text-[0.6rem] font-jakarta uppercase tracking-[0.2em] text-text-gray md:text-xs">
19+
Still Feel Stuck?
20+
</p>
21+
<p className="max-w-[38rem] text-[0.92rem] leading-[1.3] text-[#5e6457] md:text-[1rem] lg:text-[1.08rem]">
1922
No worries, we have a panel of industry mentors who are ready to
2023
lend you help at any part of your development process.
2124
</p>
22-
<p className="text-sm leading-7 text-[#5e6457] md:text-base">
23-
Have a question regarding hackathon events, project direction, or
24-
technical blockers? Reach out and we&apos;ll get you connected.
25-
</p>
26-
<div>
25+
<div className="rounded-[24px] bg-[#eef8bf] px-6 py-5 text-[#5e6457] md:px-8 md:py-6">
26+
<p className="text-[1rem] leading-[1.3] md:text-[1.18rem]">
27+
<span className="italic">Note:</span> If you have any questions
28+
regarding hackathon events, please contact a{' '}
29+
<a
30+
href="https://discord.gg/Ba5xAtf8"
31+
target="_blank"
32+
rel="noopener noreferrer"
33+
className="underline underline-offset-4"
34+
>
35+
director
36+
</a>
37+
.
38+
</p>
39+
</div>
40+
<div className="pt-1">
2741
<a
2842
href="https://discord.gg/Ba5xAtf8"
2943
target="_blank"
3044
rel="noopener noreferrer"
31-
className="inline-flex rounded-full bg-[#f4f8ce] px-5 py-3 font-metropolis text-sm font-semibold tracking-[0.02em] text-text-dark ring-1 ring-[#d7df9c] transition hover:-translate-y-0.5 hover:bg-[#eef4b5] md:text-base"
45+
className="inline-flex items-center gap-3 font-dm-mono text-[1.05rem] uppercase tracking-[0.12em] text-text-dark underline underline-offset-4 transition hover:opacity-75 md:text-[1.18rem]"
3246
>
47+
<ArrowRight className="h-5 w-5" />
3348
Contact a mentor
3449
</a>
3550
</div>

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

Lines changed: 30 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,53 @@
1-
import { AlertTriangle, Lightbulb, Target, Users } from 'lucide-react';
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';
25
import IdeateInfoCard from './IdeateInfoCard';
36
import IdeateSection from './IdeateSection';
47

5-
function ImpactVisual() {
6-
return (
7-
<div className="relative flex h-full w-full items-center justify-center">
8-
<div className="absolute h-24 w-24 rounded-full bg-white/60 blur-xl" />
9-
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,#7de0ef_0,#7de0ef_8%,transparent_8.5%)] bg-[length:20px_20px] opacity-30" />
10-
<div className="relative flex h-24 w-24 items-center justify-center rounded-full bg-white/70 shadow-[0_12px_25px_rgba(77,183,217,0.25)]">
11-
<Lightbulb className="h-10 w-10 text-[#f1ad2f]" strokeWidth={2.2} />
12-
</div>
13-
<div className="absolute left-5 top-5 rounded-full bg-[#f6a7d1] p-2 text-[#8b3f70] shadow-sm">
14-
<Users className="h-4 w-4" />
15-
</div>
16-
<div className="absolute bottom-5 right-5 rounded-full bg-[#fff4b3] p-2 text-[#8a6d12] shadow-sm">
17-
<AlertTriangle className="h-4 w-4" />
18-
</div>
19-
</div>
20-
);
21-
}
22-
23-
function AudienceVisual() {
24-
return (
25-
<div className="relative flex h-full w-full items-center justify-center">
26-
<div className="absolute left-6 top-7 h-16 w-16 rounded-full bg-[#7fcb5b]" />
27-
<div className="absolute right-8 top-8 h-14 w-14 rounded-full bg-white/90" />
28-
<div className="absolute bottom-7 left-1/2 h-20 w-24 -translate-x-1/2 rounded-[999px_999px_16px_16px] bg-[#f8cf67]" />
29-
<div className="absolute left-4 top-5 rounded-full bg-[#c9f4ff] p-2 text-[#4c9bb8]">
30-
<Users className="h-4 w-4" />
31-
</div>
32-
<div className="absolute right-5 top-5 rounded-full bg-[#f6a7d1] p-2 text-[#8b3f70]">
33-
<Target className="h-4 w-4" />
34-
</div>
35-
<div className="absolute bottom-5 left-4 h-8 w-8 rounded-full border border-[#8bc7d4] bg-transparent" />
36-
<div className="absolute bottom-7 left-6 h-4 w-4 rounded-full border border-[#8bc7d4] bg-transparent" />
37-
<div className="absolute top-10 left-11 h-3 w-3 rounded-full bg-[#243a3a]" />
38-
<div className="absolute top-10 right-12 h-3 w-3 rounded-full bg-[#243a3a]" />
39-
</div>
40-
);
41-
}
42-
43-
function StandOutVisual() {
44-
return (
45-
<div className="relative flex h-full w-full items-center justify-center">
46-
<div className="absolute left-8 top-8 rounded-full bg-[#d9fff2] p-3 text-[#1d8f95] shadow-sm">
47-
<Users className="h-5 w-5" />
48-
</div>
49-
<div className="absolute right-8 top-7 rounded-full bg-[#f6a7d1] p-3 text-[#8b3f70] shadow-sm">
50-
<Lightbulb className="h-5 w-5" />
51-
</div>
52-
<div className="absolute bottom-7 left-8 rounded-full bg-[#f9f3a6] p-3 text-[#8a6d12] shadow-sm">
53-
<Target className="h-5 w-5" />
54-
</div>
55-
<div className="absolute bottom-5 right-7 flex h-14 w-14 items-center justify-center rounded-full bg-[#7fcb5b] text-white shadow-sm">
56-
<span className="text-xl">+</span>
57-
</div>
58-
</div>
59-
);
60-
}
61-
628
const principles = [
639
{
6410
title: 'Impact Level',
6511
description:
66-
'Does your project solve a real problem? Strong projects are rooted in something people actually need help with.',
67-
visual: <ImpactVisual />,
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+
),
6820
},
6921
{
7022
title: 'Tailor for Audience',
7123
description:
72-
'Who are your users? What are their pain points? When you build for a specific need, the value is much easier to see.',
73-
visual: <AudienceVisual />,
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+
),
7432
},
7533
{
7634
title: 'Set Yourself Apart',
7735
description:
78-
'What makes your solution unique? Find your hook. Your project does not need to be huge, but it should feel memorable and purposeful.',
79-
visual: <StandOutVisual />,
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+
),
8044
},
8145
];
8246

8347
export default function IdeatePrinciples() {
8448
return (
85-
<IdeateSection
86-
eyebrow="Rules of Brainstorming"
87-
title="Keep these in mind..."
88-
>
89-
<div className="grid gap-4 md:grid-cols-3 md:gap-5">
49+
<IdeateSection eyebrow="While Brainstorming" title="Keep these in mind...">
50+
<div className="grid gap-10 md:grid-cols-3 md:gap-6">
9051
{principles.map((principle) => (
9152
<IdeateInfoCard key={principle.title} {...principle} />
9253
))}

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

Lines changed: 11 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,14 @@
11
import patientSimImage from '@public/hackers/starter-kit/ideate/patient_sim_ai.png';
22
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';
35
import { Button } from '@globals/components/ui/button';
46
import IdeateSection from './IdeateSection';
57
import WinningHackCard from './WinningHackCard';
68

79
const devPostLink =
810
'https://hackdavis-2024.devpost.com/project-gallery?_gl=1%2A50gpw%2A_gcl_au%2AMTc2MTUwMzcxOS4xNzQwODA4MTQ4%2A_ga%2AMjEwNzI2OTk2My4xNzQwODA4MTQ4%2A_ga_0YHJK3Y10M%2AMTc0MDgwODE0Ny4xLjEuMTc0MDgwODE3OS4wLjAuMA';
911

10-
function SkinScreenVisual() {
11-
return (
12-
<div className="relative h-full w-full overflow-hidden bg-[linear-gradient(135deg,#1f2455_0%,#0b1730_40%,#3a4f8c_100%)]">
13-
<div className="absolute -left-5 top-6 h-24 w-24 rounded-full bg-[#8392ff]/30 blur-2xl" />
14-
<div className="absolute right-4 top-4 h-20 w-20 rounded-full bg-[#7bd4ff]/20 blur-2xl" />
15-
<div className="absolute left-6 top-8 h-[78%] w-[34%] rounded-[18px] border border-white/10 bg-[#111830] shadow-[0_10px_25px_rgba(0,0,0,0.35)]" />
16-
<div className="absolute left-[22%] top-12 h-[58%] w-[22%] rounded-[14px] border border-white/10 bg-[#1d2852]" />
17-
<div className="absolute right-[17%] top-9 h-[74%] w-[28%] rounded-[18px] border border-white/10 bg-[#141d3d]" />
18-
<div className="absolute left-8 top-12 h-4 w-16 rounded-full bg-white/10" />
19-
<div className="absolute left-[25%] top-16 h-3 w-8 rounded-full bg-[#78c9ff]/60" />
20-
<div className="absolute right-[20%] top-14 h-16 w-16 rounded-full border border-[#7bd4ff]/40" />
21-
<div className="absolute right-[22%] top-16 h-12 w-12 rounded-full bg-[radial-gradient(circle,#8ae1ff_0%,#8ae1ff_25%,transparent_26%)]" />
22-
<div className="absolute right-[21%] bottom-9 h-10 w-14 rounded-[10px] bg-white/10" />
23-
</div>
24-
);
25-
}
26-
2712
const winningHacks = [
2813
{
2914
award: 'Best Hack for Social Good',
@@ -44,34 +29,35 @@ const winningHacks = [
4429
image: nomadImage,
4530
},
4631
{
47-
award: 'Best AI Hack',
32+
award: 'Best Health Hack',
4833
year: '2023',
4934
title: 'SkinScreen',
5035
description:
51-
'SkinScreen used AI to measure skin lesion risk and help users identify potential skin conditions, making early awareness and accessible education easier.',
36+
'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.',
5237
link: devPostLink,
53-
visual: <SkinScreenVisual />,
38+
image: skinScreenImage,
5439
},
5540
];
5641

5742
export default function IdeateWinningHacks() {
5843
return (
5944
<IdeateSection
60-
eyebrow="Previous Winning Hacks"
61-
title="Reference what resonated before"
45+
eyebrow=""
46+
title="Previous winning hacks"
6247
action={
6348
<Button
6449
asChild
65-
variant="outline"
66-
className="h-10 rounded-full border-[#2d3230] bg-transparent px-5 text-sm font-medium text-[#2d3230] shadow-none hover:bg-[#2d3230] hover:text-white"
50+
variant="default"
51+
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"
6752
>
6853
<a href={devPostLink} target="_blank" rel="noopener noreferrer">
54+
<ArrowUpRight className="h-4 w-4" />
6955
See All
7056
</a>
7157
</Button>
7258
}
7359
>
74-
<div className="space-y-4">
60+
<div className="space-y-4 md:space-y-3">
7561
{winningHacks.map((hack) => (
7662
<WinningHackCard key={hack.title} {...hack} />
7763
))}

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

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Image, { StaticImageData } from 'next/image';
2-
import { ArrowUpRight } from 'lucide-react';
32

43
interface WinningHackCardProps {
54
award: string;
@@ -27,31 +26,28 @@ export default function WinningHackCard({
2726
rel="noopener noreferrer"
2827
className="group block"
2928
>
30-
<article className="flex flex-col gap-4 rounded-[24px] bg-white/95 p-3 shadow-[0_12px_40px_rgba(134,137,116,0.12)] ring-1 ring-[#edf0d7] transition-transform duration-200 hover:-translate-y-1 md:flex-row md:items-center md:gap-5 md:p-4">
31-
<div className="relative flex aspect-[1.45] w-full items-center justify-center overflow-hidden rounded-[18px] bg-[linear-gradient(180deg,#f7f7ff_0%,#eff3ff_100%)] md:w-[200px]">
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)] transition-transform duration-200 hover:-translate-y-1 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">
3231
{image ? (
3332
<Image
3433
src={image}
3534
alt={title}
3635
fill
37-
className="object-cover"
38-
sizes="(max-width: 768px) 100vw, 200px"
36+
className="object-contain"
37+
sizes="(max-width: 768px) 100vw, 240px"
3938
/>
4039
) : (
4140
visual
4241
)}
4342
</div>
44-
<div className="flex flex-1 flex-col gap-2">
45-
<p className="text-[0.62rem] font-jakarta uppercase tracking-[0.18em] text-text-gray md:text-[0.7rem]">
46-
{award} • {year}
43+
<div className="flex flex-1 flex-col gap-2 md:gap-3">
44+
<p className="font-dm-mono text-[0.72rem] uppercase tracking-[0.16em] text-[#aaaaaa] md:text-[0.82rem]">
45+
{award} {year}
4746
</p>
48-
<div className="flex items-start justify-between gap-3">
49-
<h3 className="font-metropolis text-xl font-semibold leading-tight text-text-dark md:text-2xl">
50-
{title}
51-
</h3>
52-
<ArrowUpRight className="mt-1 h-5 w-5 flex-shrink-0 text-[#6b7170] transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
53-
</div>
54-
<p className="text-sm leading-6 text-[#58635b] md:text-[0.95rem]">
47+
<h3 className="font-metropolis text-[1.15rem] font-semibold leading-none text-text-dark md:text-[1.6rem]">
48+
{title}
49+
</h3>
50+
<p className="max-w-[42rem] text-[0.98rem] leading-[1.1] text-[#6b6b6b] md:text-[1.05rem]">
5551
{description}
5652
</p>
5753
</div>

‎public/hackers/starter-kit/ideate/Apart.svg‎

Lines changed: 33 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)