Skip to content

Commit 242e43d

Browse files
haylietanhaylietan
committed
Init files
1 parent 7f38d02 commit 242e43d

9 files changed

Lines changed: 380 additions & 2 deletions

File tree

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
import IdeateHero from './IdeateHero';
2+
import IdeateMentorCallout from './IdeateMentorCallout';
3+
import IdeatePrinciples from './IdeatePrinciples';
4+
import IdeateWinningHacks from './IdeateWinningHacks';
5+
16
export default function Ideate() {
2-
return <div>Ideate</div>;
7+
return (
8+
<div className="my-[100px] mx-[24px] p-[7%] md:mx-[60px] bg-[#F1FFCC] border-2 border border-black flex flex-col gap-[48px]">
9+
<IdeateHero />
10+
<IdeatePrinciples />
11+
<IdeateWinningHacks />
12+
<IdeateMentorCallout />
13+
</div>
14+
);
315
}

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Image from 'next/image';
2+
import podium from '@public/hackers/starter-kit/ideate/podium.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 gap-6 rounded-[28px] bg-[linear-gradient(135deg,rgba(255,255,255,0.62)_0%,rgba(245,255,208,0.7)_100%)] p-4 shadow-[0_16px_45px_rgba(175,209,87,0.12)] ring-1 ring-[#e7efb6] md:grid-cols-[minmax(0,1.1fr)_minmax(260px,0.9fr)] md:items-center md:p-6 lg:p-8">
9+
<div className="space-y-4 text-sm leading-7 text-[#5e6457] md:text-base">
10+
<p>
11+
A winnable idea is not always the most complicated one. It is clear,
12+
purposeful, and rooted in a real user need.
13+
</p>
14+
<p>
15+
When your team combines impact, audience awareness, and a unique
16+
angle, your project is much more likely to stand out to judges.
17+
</p>
18+
</div>
19+
<div className="relative mx-auto flex aspect-[1.25] w-full max-w-[360px] items-center justify-center overflow-hidden rounded-[26px] bg-[linear-gradient(180deg,#d4f5f7_0%,#d4f4de_100%)] p-4">
20+
<div className="absolute inset-x-[10%] bottom-[10%] h-[18%] rounded-full bg-[#b9e48e]/50 blur-2xl" />
21+
<Image
22+
src={podium}
23+
alt="HackDavis animals celebrating on a podium"
24+
className="relative h-full w-full object-contain"
25+
priority
26+
/>
27+
</div>
28+
</div>
29+
</IdeateSection>
30+
);
31+
}

‎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-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%)]">
15+
{visual}
16+
</div>
17+
<div className="space-y-2">
18+
<h3 className="font-metropolis text-lg font-semibold leading-tight md:text-xl">
19+
{title}
20+
</h3>
21+
<p className="text-sm leading-6 text-[#58635b] md:text-[0.95rem]">
22+
{description}
23+
</p>
24+
</div>
25+
</article>
26+
);
27+
}

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Image from 'next/image';
2+
import mentorGraphic from '@public/hackers/starter-kit/resources/rabbit_duck_mentor.svg';
3+
import IdeateSection from './IdeateSection';
4+
5+
export default function IdeateMentorCallout() {
6+
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]" />
11+
<Image
12+
src={mentorGraphic}
13+
alt="HackDavis mentor illustration"
14+
className="relative h-full w-full object-contain p-4"
15+
/>
16+
</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">
19+
No worries, we have a panel of industry mentors who are ready to
20+
lend you help at any part of your development process.
21+
</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>
27+
<a
28+
href="https://discord.gg/Ba5xAtf8"
29+
target="_blank"
30+
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"
32+
>
33+
Contact a mentor
34+
</a>
35+
</div>
36+
</div>
37+
</div>
38+
</IdeateSection>
39+
);
40+
}

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { AlertTriangle, Lightbulb, Target, Users } from 'lucide-react';
2+
import IdeateInfoCard from './IdeateInfoCard';
3+
import IdeateSection from './IdeateSection';
4+
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+
62+
const principles = [
63+
{
64+
title: 'Impact Level',
65+
description:
66+
'Does your project solve a real problem? Strong projects are rooted in something people actually need help with.',
67+
visual: <ImpactVisual />,
68+
},
69+
{
70+
title: 'Tailor for Audience',
71+
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 />,
74+
},
75+
{
76+
title: 'Set Yourself Apart',
77+
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 />,
80+
},
81+
];
82+
83+
export default function IdeatePrinciples() {
84+
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">
90+
{principles.map((principle) => (
91+
<IdeateInfoCard key={principle.title} {...principle} />
92+
))}
93+
</div>
94+
</IdeateSection>
95+
);
96+
}

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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+
return (
15+
<section className="flex flex-col gap-4 md:gap-6">
16+
<div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
17+
<div className="max-w-2xl">
18+
<p className="text-[0.6rem] font-jakarta uppercase tracking-[0.2em] text-text-gray md:text-xs">
19+
{eyebrow}
20+
</p>
21+
<h2 className="mt-1 font-metropolis text-2xl font-bold tracking-[0.02em] text-text-dark md:text-[2rem]">
22+
{title}
23+
</h2>
24+
</div>
25+
{action}
26+
</div>
27+
{children}
28+
</section>
29+
);
30+
}

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
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 { Button } from '@globals/components/ui/button';
4+
import IdeateSection from './IdeateSection';
5+
import WinningHackCard from './WinningHackCard';
6+
7+
const devPostLink =
8+
'https://hackdavis-2024.devpost.com/project-gallery?_gl=1%2A50gpw%2A_gcl_au%2AMTc2MTUwMzcxOS4xNzQwODA4MTQ4%2A_ga%2AMjEwNzI2OTk2My4xNzQwODA4MTQ4%2A_ga_0YHJK3Y10M%2AMTc0MDgwODE0Ny4xLjEuMTc0MDgwODE3OS4wLjAuMA';
9+
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+
27+
const winningHacks = [
28+
{
29+
award: 'Best Hack for Social Good',
30+
year: '2024',
31+
title: 'PatientSimAI',
32+
description:
33+
'PatientSimAI is a web app using AI and GPT-4 to simulate patient interactions, aiding clinical training, enhancing medical education, and building practical skills.',
34+
link: 'https://devpost.com/software/patientsimai',
35+
image: patientSimImage,
36+
},
37+
{
38+
award: 'Best Hack for Social Good',
39+
year: '2024',
40+
title: 'nomad /\\',
41+
description:
42+
'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.',
43+
link: 'https://devpost.com/software/nomad-xmlf65',
44+
image: nomadImage,
45+
},
46+
{
47+
award: 'Best AI Hack',
48+
year: '2023',
49+
title: 'SkinScreen',
50+
description:
51+
'SkinScreen used AI to measure skin lesion risk and help users identify potential skin conditions, making early awareness and accessible education easier.',
52+
link: devPostLink,
53+
visual: <SkinScreenVisual />,
54+
},
55+
];
56+
57+
export default function IdeateWinningHacks() {
58+
return (
59+
<IdeateSection
60+
eyebrow="Previous Winning Hacks"
61+
title="Reference what resonated before"
62+
action={
63+
<Button
64+
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"
67+
>
68+
<a href={devPostLink} target="_blank" rel="noopener noreferrer">
69+
See All
70+
</a>
71+
</Button>
72+
}
73+
>
74+
<div className="space-y-4">
75+
{winningHacks.map((hack) => (
76+
<WinningHackCard key={hack.title} {...hack} />
77+
))}
78+
</div>
79+
</IdeateSection>
80+
);
81+
}

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import Image, { StaticImageData } from 'next/image';
2+
import { ArrowUpRight } from 'lucide-react';
3+
4+
interface WinningHackCardProps {
5+
award: string;
6+
year: string;
7+
title: string;
8+
description: string;
9+
link: string;
10+
image?: StaticImageData;
11+
visual?: React.ReactNode;
12+
}
13+
14+
export default function WinningHackCard({
15+
award,
16+
year,
17+
title,
18+
description,
19+
link,
20+
image,
21+
visual,
22+
}: WinningHackCardProps) {
23+
return (
24+
<a
25+
href={link}
26+
target="_blank"
27+
rel="noopener noreferrer"
28+
className="group block"
29+
>
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]">
32+
{image ? (
33+
<Image
34+
src={image}
35+
alt={title}
36+
fill
37+
className="object-cover"
38+
sizes="(max-width: 768px) 100vw, 200px"
39+
/>
40+
) : (
41+
visual
42+
)}
43+
</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}
47+
</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]">
55+
{description}
56+
</p>
57+
</div>
58+
</article>
59+
</a>
60+
);
61+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import DesignResources from './DesignResources';
44
import DevResources from './DevResources';
5-
import Ideate from './Ideate';
5+
import Ideate from './Ideate/Ideate';
66
import Introduction from './Introduction';
77
import MoreTips from './MoreTips';
88
import TeamBuilding from './TeamBuilding';

0 commit comments

Comments
 (0)