Skip to content

Commit 2f754e9

Browse files
bubunyobubunyo
authored
Feat/prizes (#34)
* prizes * prizes * design for podium style prizes * remove somesections * add link to the prizes section
1 parent eda5d25 commit 2f754e9

File tree

4 files changed

+261
-0
lines changed

4 files changed

+261
-0
lines changed

‎app/controllers/homepage_controller.rb‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,7 @@ def index
44

55
def about
66
end
7+
8+
def prizes
9+
end
710
end

‎app/views/homepage/prizes.html.erb‎

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
<div class="mx-auto max-w-7xl px-4 py-8 sm:py-16">
2+
<!-- Header Section -->
3+
<div class="text-center mb-16">
4+
<h1 class="text-4xl sm:text-5xl font-bold tracking-tight text-gray-900">
5+
Prize Pool & Awards
6+
</h1>
7+
<p class="mt-6 text-xl text-gray-600 max-w-3xl mx-auto">
8+
Total Prize Pool: <span class="font-bold text-primary-600">$10,000</span>
9+
</p>
10+
<p class="mt-4 text-lg text-gray-600 max-w-4xl mx-auto">
11+
Our prize distribution rewards excellence across multiple dimensions while encouraging participation and innovation throughout the hackathon journey.
12+
</p>
13+
</div>
14+
15+
<!-- Overall Competition Prizes -->
16+
<section class="mb-20">
17+
<div class="bg-white rounded-2xl shadow-lg border border-primary-100/50 p-8 sm:p-12">
18+
<div class="text-center mb-12">
19+
<h2 class="text-3xl font-bold text-gray-900">
20+
Overall Competition Prizes
21+
</h2>
22+
</div>
23+
24+
<!-- Prize Steps -->
25+
<div class="flex justify-center items-end space-x-8 mb-12">
26+
<!-- 2nd Place -->
27+
<div class="text-center flex-1 max-w-xs">
28+
<div class="bg-gradient-to-t from-gray-300 to-gray-400 rounded-t-lg p-6 h-32 w-full flex flex-col justify-end items-center shadow-lg">
29+
<div class="w-12 h-12 bg-gray-600 rounded-full flex items-center justify-center mb-2">
30+
<span class="text-lg font-bold text-white">2nd</span>
31+
</div>
32+
</div>
33+
<div class="bg-white rounded-b-lg p-4 shadow-lg border-t-0">
34+
<h3 class="text-xl font-bold text-gray-900">$1,600</h3>
35+
<p class="text-sm text-gray-600 mt-1">Second-best overall solution</p>
36+
</div>
37+
</div>
38+
39+
<!-- 1st Place (Tallest) -->
40+
<div class="text-center flex-1 max-w-xs">
41+
<!-- Trophy Emoji -->
42+
<div class="text-4xl mb-2">🏆</div>
43+
<div class="bg-gradient-to-t from-yellow-400 to-yellow-500 rounded-t-lg p-6 h-40 w-full flex flex-col justify-end items-center shadow-lg">
44+
<div class="w-12 h-12 bg-yellow-600 rounded-full flex items-center justify-center mb-2">
45+
<span class="text-lg font-bold text-white">1st</span>
46+
</div>
47+
</div>
48+
<div class="bg-white rounded-b-lg p-4 shadow-lg border-t-0">
49+
<h3 class="text-2xl font-bold text-gray-900">$2,600</h3>
50+
<p class="text-sm text-gray-600 mt-1">Winner of the overall hackathon competition</p>
51+
</div>
52+
</div>
53+
54+
<!-- 3rd Place -->
55+
<div class="text-center flex-1 max-w-xs">
56+
<div class="bg-gradient-to-t from-orange-400 to-orange-500 rounded-t-lg p-6 h-24 w-full flex flex-col justify-end items-center shadow-lg">
57+
<div class="w-12 h-12 bg-orange-600 rounded-full flex items-center justify-center mb-2">
58+
<span class="text-lg font-bold text-white">3rd</span>
59+
</div>
60+
</div>
61+
<div class="bg-white rounded-b-lg p-4 shadow-lg border-t-0">
62+
<h3 class="text-xl font-bold text-gray-900">$1,100</h3>
63+
<p class="text-sm text-gray-600 mt-1">Third-best overall solution</p>
64+
</div>
65+
</div>
66+
</div>
67+
68+
<!-- Evaluation Criteria -->
69+
<div class="mt-12 bg-gray-50 rounded-xl p-6">
70+
<h4 class="text-xl font-bold text-gray-900 mb-6 text-center">Evaluation Criteria</h4>
71+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
72+
<div class="text-center">
73+
<div class="text-sm font-medium text-gray-900">Innovation</div>
74+
<div class="text-xs text-gray-600 mt-1">Novelty & creativity</div>
75+
</div>
76+
<div class="text-center">
77+
<div class="text-sm font-medium text-gray-900">Technical Excellence</div>
78+
<div class="text-xs text-gray-600 mt-1">Code quality & architecture</div>
79+
</div>
80+
<div class="text-center">
81+
<div class="text-sm font-medium text-gray-900">Impact Potential</div>
82+
<div class="text-xs text-gray-600 mt-1">Problem solving & sustainability</div>
83+
</div>
84+
<div class="text-center">
85+
<div class="text-sm font-medium text-gray-900">User Experience</div>
86+
<div class="text-xs text-gray-600 mt-1">Interface & accessibility</div>
87+
</div>
88+
<div class="text-center">
89+
<div class="text-sm font-medium text-gray-900">Presentation</div>
90+
<div class="text-xs text-gray-600 mt-1">Communication & delivery</div>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
</section>
96+
97+
<!-- Category Prizes -->
98+
<section class="mb-20">
99+
<div class="text-center mb-12">
100+
<h2 class="text-3xl font-bold text-gray-900">Category Prizes</h2>
101+
</div>
102+
103+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
104+
<!-- Best AI Implementation -->
105+
<div class="bg-white rounded-xl shadow-md border border-gray-200 p-6">
106+
<div class="text-center mb-6">
107+
<div class="w-16 h-16 mx-auto mb-4 bg-blue-500 rounded-full flex items-center justify-center">
108+
<span class="text-3xl">🤖</span>
109+
</div>
110+
<h3 class="text-xl font-bold text-gray-900">Best AI Implementation</h3>
111+
<p class="text-2xl font-bold text-blue-600 mt-2">$1,000</p>
112+
<p class="text-sm text-gray-600 mt-2">Most sophisticated and effective use of artificial intelligence</p>
113+
</div>
114+
</div>
115+
116+
<!-- Most Accessible Solution -->
117+
<div class="bg-white rounded-xl shadow-md border border-gray-200 p-6">
118+
<div class="text-center mb-6">
119+
<div class="w-16 h-16 mx-auto mb-4 bg-green-500 rounded-full flex items-center justify-center">
120+
<span class="text-3xl">♿</span>
121+
</div>
122+
<h3 class="text-xl font-bold text-gray-900">Most Accessible Solution</h3>
123+
<p class="text-2xl font-bold text-green-600 mt-2">$1,000</p>
124+
<p class="text-sm text-gray-600 mt-2">Best addresses accessibility constraints and inclusive design</p>
125+
</div>
126+
</div>
127+
128+
<!-- Best Cultural Integration -->
129+
<div class="bg-white rounded-xl shadow-md border border-gray-200 p-6">
130+
<div class="text-center mb-6">
131+
<div class="w-16 h-16 mx-auto mb-4 bg-purple-500 rounded-full flex items-center justify-center">
132+
<span class="text-3xl">🇬🇭</span>
133+
</div>
134+
<h3 class="text-xl font-bold text-gray-900">Best Cultural Integration</h3>
135+
<p class="text-2xl font-bold text-purple-600 mt-2">$600</p>
136+
<p class="text-sm text-gray-600 mt-2">Best incorporates Ghanaian cultural context and GSL authenticity</p>
137+
</div>
138+
</div>
139+
</div>
140+
</section>
141+
142+
<!-- People's Choice & Daily Bounties -->
143+
<section class="mb-20">
144+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
145+
<!-- People's Choice -->
146+
<div class="bg-white rounded-xl shadow-md border border-gray-200 p-8">
147+
<div class="text-center">
148+
<div class="w-20 h-20 mx-auto mb-6 bg-pink-500 rounded-full flex items-center justify-center">
149+
<svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 20 20">
150+
<path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"/>
151+
</svg>
152+
</div>
153+
<h3 class="text-2xl font-bold text-gray-900">People's Choice Award</h3>
154+
<p class="text-3xl font-bold text-pink-600 mt-2">$700</p>
155+
<p class="text-gray-600 mt-4">Selected by participant voting during final presentations</p>
156+
</div>
157+
</div>
158+
159+
<!-- Daily Bounties -->
160+
<div class="bg-white rounded-xl shadow-md border border-gray-200 p-8">
161+
<div class="text-center mb-6">
162+
<div class="w-20 h-20 mx-auto mb-6 bg-orange-500 rounded-full flex items-center justify-center">
163+
<svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 20 20">
164+
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
165+
</svg>
166+
</div>
167+
<h3 class="text-2xl font-bold text-gray-900">Daily Bounties</h3>
168+
<p class="text-3xl font-bold text-orange-600 mt-2">$1,500</p>
169+
</div>
170+
171+
<div class="space-y-4 mt-6">
172+
<div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
173+
<span class="font-medium text-gray-900">Day 1 - Most Creative Approach</span>
174+
<span class="font-bold text-orange-600">$400</span>
175+
</div>
176+
<div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
177+
<span class="font-medium text-gray-900">Day 2 - Best Progress/Iteration</span>
178+
<span class="font-bold text-orange-600">$500</span>
179+
</div>
180+
<div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
181+
<span class="font-medium text-gray-900">Day 3 - Best Pitch Delivery</span>
182+
<span class="font-bold text-orange-600">$500</span>
183+
</div>
184+
</div>
185+
</div>
186+
</div>
187+
</section>
188+
189+
<!-- Prize Rules & Information -->
190+
<section class="mb-20">
191+
<div class="bg-gray-50 rounded-2xl p-8 sm:p-12">
192+
<h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">Prize Distribution Rules</h2>
193+
194+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
195+
<div>
196+
<h3 class="text-xl font-bold text-gray-900 mb-4">Eligibility & Restrictions</h3>
197+
<ul class="space-y-2 text-gray-700">
198+
<li class="flex items-start space-x-2">
199+
<span class="text-primary-600 mt-1">"</span>
200+
<span>Teams may win multiple category prizes but only one overall prize</span>
201+
</li>
202+
<li class="flex items-start space-x-2">
203+
<span class="text-primary-600 mt-1">"</span>
204+
<span>Daily bounties are independent and can be won alongside any other prizes</span>
205+
</li>
206+
<li class="flex items-start space-x-2">
207+
<span class="text-primary-600 mt-1">"</span>
208+
<span>All team members share prize money equally</span>
209+
</li>
210+
<li class="flex items-start space-x-2">
211+
<span class="text-primary-600 mt-1">"</span>
212+
<span>Winners must be present during award ceremony</span>
213+
</li>
214+
</ul>
215+
</div>
216+
</div>
217+
218+
<div class="mt-8 pt-8 border-t border-gray-200">
219+
<h3 class="text-xl font-bold text-gray-900 mb-4 text-center">Award Timeline</h3>
220+
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-center">
221+
<div class="p-4 bg-white rounded-lg">
222+
<div class="text-primary-600 font-bold">Daily</div>
223+
<div class="text-sm text-gray-600">Bounties announced each evening</div>
224+
</div>
225+
<div class="p-4 bg-white rounded-lg">
226+
<div class="text-primary-600 font-bold">Final Day</div>
227+
<div class="text-sm text-gray-600">Category and overall winners announced</div>
228+
</div>
229+
<div class="p-4 bg-white rounded-lg">
230+
<div class="text-primary-600 font-bold">30 Days</div>
231+
<div class="text-sm text-gray-600">Prize distribution post-hackathon</div>
232+
</div>
233+
</div>
234+
</div>
235+
</div>
236+
</section>
237+
238+
<!-- Call to Action -->
239+
<div class="text-center">
240+
<h2 class="text-3xl font-bold text-gray-900 mb-6">Ready to Compete?</h2>
241+
<p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
242+
Join us for 36 hours of innovation and compete for your share of the $10,000 prize pool while building solutions that can transform education and empower voices.
243+
</p>
244+
<%= link_to "Register Your Team",
245+
rodauth(:hacker).create_account_path,
246+
class: "inline-flex items-center rounded-xl bg-gradient-to-r from-primary-600 to-primary-500 px-8 py-4 text-lg font-semibold text-white shadow-md transition-all duration-300 ease-out hover:translate-y-[-2px] hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2" %>
247+
</div>
248+
</div>

‎app/views/layouts/application.html.erb‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,15 @@
295295
>
296296
Contact
297297
</a>
298+
<a
299+
href="<%= prizes_path %>"
300+
class="
301+
-mx-3 block rounded-lg px-3 py-2 text-base font-semibold text-gray-900
302+
hover:bg-gray-50
303+
"
304+
>
305+
Prizes
306+
</a>
298307
<a
299308
href="<%= rodauth(:hacker).create_account_path %>"
300309
class="

‎config/routes.rb‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
get "/about", to: "homepage#about"
1010
get "/contact", to: "homepage#contact"
11+
get "/prizes", to: "homepage#prizes"
1112

1213
get "/invitations/confirm/:token", to: "invitations#confirm", as: :confirm_invitation
1314
post "/invitations/confirm/:token/decline", to: "invitations#decline", as: :decline_invitation

0 commit comments

Comments
 (0)