Skip to content

Commit 36e9e22

Browse files
committed
faq design upgrade
1 parent 3b59219 commit 36e9e22

File tree

6 files changed

+99
-78
lines changed

6 files changed

+99
-78
lines changed

src/eventdata/FAQComponents/FAQDeadline.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
<p>
66
Registration for participants, volunteers, mentors, judges, workshop hosts, and photographers
77
opens on
8-
<strong>NOT DECIDED FOR HACK TJ 12.0 YET</strong> .
8+
<strong>January 24th</strong> .
99
</p>
1010

1111
<p class="mt-2">
1212
Registration for participants closes on
13-
<strong>NOT DECIDED FOR HACK TJ 12.0 YET</strong> — will be a hard deadline; we do not accept submissions after this time.
13+
<strong>February 10th</strong> — will be a hard deadline; we do not accept submissions after this time.
1414
</p>
1515
<p class="mt-2">
1616
Judges, mentors, and volunteers will be able to register until the start of the event.

src/eventdata/FAQComponents/FAQPrizes.svelte

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@
55
<li class="mt-1">Web App</li>
66
<li class="mt-1">Mobile App</li>
77
<li class="mt-1">Machine Learning/Artificial Intelligence</li>
8-
<li class="mt-1">Design</li>
8+
<li class="mt-1">Best UI/UX</li>
99
<li class="mt-1">Social Impact</li>
1010
<li class="mt-1 mb-3">Beginner Hack (first-year coder teams)</li>
11+
<li class="mt-1">and perhaps more ...</li>
1112
</ul>
1213

1314
<p>

src/eventdata/FAQComponents/FAQRegister.svelte

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

55
<ol class="list-decimal">
66
<li>
7-
On <strong>NOT DECIDED FOR HACK TJ 12.0 YET</strong>, a button will appear at
7+
On <strong>January 24th</strong>, a button will appear at
88
the top of this site. Click it.
99
</li>
1010
<li class="mt-2">You will be redirected to a page where you can click the appropriate form.</li>

src/eventdata/FAQComponents/FAQWhen.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
</script>
44

55
<p>
6-
<strong>Please note that the exact dates for HackTJ 12.0 are not yet finalized.</strong>
6+
<strong>Save the Date! HackTJ 12.0 will be held March 8-9th 2025!</strong>
77
</p>

src/eventdata/faq.js

Lines changed: 60 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,63 @@
1-
/**
2-
* This File contains all information needed for the FAQ page
3-
*/
4-
51
import { FAQCodeOfConduct, FAQDeadline, FAQPrizes, FAQRegister, FAQWhen } from './FAQComponents';
62

7-
/**
8-
* Each object should be in the format
9-
* {question, answer} or {question, answerCoponent}
10-
* answer will just be a simple string, while answerComponent is a svelte component in FAQComponents
11-
* Reasons we might want to use FAQComponents is so we can do things like links and lists
12-
*/
13-
143
export default [
15-
{
16-
question: 'What is HackTJ?',
17-
answer:
18-
'HackTJ is a student-run hackathon where you will have 24 hours to learn how to code and/or work with your friends to make your idea come to life.'
19-
},
20-
{
21-
question: 'When is HackTJ?',
22-
answerComponent: FAQWhen
23-
},
24-
{
25-
question: 'Who can attend?',
26-
answer:
27-
"HackTJ is open to all current high school students attending Fairfax County Public Schools. If you're not a high school student but would like to attend, consider coming as a judge, mentor, or volunteer."
28-
},
29-
{
30-
question: 'Is there any cost?',
31-
answer: 'Nope! Thanks to our sponsors, HackTJ is completely free!'
32-
},
33-
{
34-
question: 'Is there a deadline?',
35-
answerComponent: FAQDeadline
36-
},
37-
{
38-
question: 'Is there a code of conduct?',
39-
answerComponent: FAQCodeOfConduct
40-
},
41-
{
42-
question: "Isn't hacking illegal?",
43-
answer:
44-
'In the context of a hackathon, "hacking" is to build a real application over the length of the event. It\'s important to not confuse this with illegal hacking, which is gaining unauthorized access to a computer.'
45-
},
46-
{
47-
question: 'Do I need a team?',
48-
answer:
49-
"If you already have a team of 2-4 people you want to work with, that's awesome! If not don't worry because we'll have an opportunity for people to join a team if they need one."
50-
},
51-
{
52-
question: 'What prizes can I win?',
53-
answerComponent: FAQPrizes
54-
},
55-
{
56-
question: 'How do I register?',
57-
answerComponent: FAQRegister
58-
},
59-
{
60-
question: 'How are ticket decisions made?',
61-
answer:
62-
'Tickets decisions are made based on a variety of factors, including the registration time. Sign up quickly to increase the chance that you are given a HackTJ 12.0 ticket!'
63-
}
64-
];
4+
{
5+
category: "About HackTJ",
6+
questions: [
7+
{
8+
question: 'What is HackTJ?',
9+
answer: 'HackTJ is a student-run hackathon where you will have 24 hours to learn how to code and/or work with your friends to make your idea come to life.'
10+
},
11+
{
12+
question: 'When is HackTJ?',
13+
answerComponent: FAQWhen
14+
},
15+
{
16+
question: "Isn't hacking illegal?",
17+
answer: 'In the context of a hackathon, "hacking" is to build a real application over the length of the event. It\'s important to not confuse this with illegal hacking, which is gaining unauthorized access to a computer.'
18+
},
19+
{
20+
question: 'Is there a code of conduct?',
21+
answerComponent: FAQCodeOfConduct
22+
}
23+
]
24+
},
25+
{
26+
category: "Registration",
27+
questions: [
28+
{
29+
question: 'How do I register?',
30+
answerComponent: FAQRegister
31+
},
32+
{
33+
question: 'Is there a deadline?',
34+
answerComponent: FAQDeadline
35+
},
36+
{
37+
question: 'How are ticket decisions made?',
38+
answer: 'Tickets decisions are made based on a variety of factors, including the registration time. Sign up quickly to increase the chance that you are given a HackTJ 12.0 ticket!'
39+
},
40+
{
41+
question: 'Is there any cost?',
42+
answer: 'Nope! Thanks to our sponsors, HackTJ is completely free!'
43+
}
44+
]
45+
},
46+
{
47+
category: "Prizes and Eligibility",
48+
questions: [
49+
{
50+
question: 'What prizes can I win?',
51+
answerComponent: FAQPrizes
52+
},
53+
{
54+
question: 'Who can attend?',
55+
answer: "HackTJ is open to all current high school students attending Fairfax County Public Schools. If you're not a high school student but would like to attend, consider coming as a judge, mentor, or volunteer."
56+
},
57+
{
58+
question: 'Do I need a team?',
59+
answer: "If you already have a team of 2-4 people you want to work with, that's awesome! If not don't worry because we'll have an opportunity for people to join a team if they need one."
60+
}
61+
]
62+
}
63+
];

src/routes/faq.svelte

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<script>
22
import { base } from '$app/paths';
3-
43
import Home from '@svicons/ionicons-solid/home.svelte';
54
import Footer from '../components/Footer.svelte';
6-
import { faq } from '../eventdata';
5+
import faq from '../eventdata/faq';
76
</script>
87

98
<section class="text-blueberry-200 flex flex-col justify-between min-h-screen">
@@ -15,20 +14,42 @@
1514
</div>
1615
<h1 class="text-5xl font-black text-white">FAQ</h1>
1716
</div>
18-
<div class="w-full mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-16">
19-
{#each faq as { question, answer, answerComponent }}
20-
<div class="text-white">
21-
<h3 class="font-bold text-xl whitespace-pre-wrap">{question}</h3>
22-
<div class="mt-1">
23-
{#if answer}
24-
<p>{answer}</p>
25-
{:else if answerComponent}
26-
<svelte:component this={answerComponent} />
27-
{/if}
17+
<div class="w-full mt-8 space-y-8">
18+
{#each faq as { category, questions }}
19+
<div class="bg-blackberry-800 rounded-lg overflow-hidden">
20+
<h2 class="text-2xl font-bold text-white p-4 bg-blackberry-700">{category}</h2>
21+
<div class="space-y-2 p-4">
22+
{#each questions as { question, answer, answerComponent }}
23+
<details class="bg-blackberry-600 rounded-lg overflow-hidden">
24+
<summary class="flex justify-between items-center p-4 cursor-pointer">
25+
<h3 class="font-bold text-xl text-white">{question}</h3>
26+
<svg class="w-6 h-6 text-white transition-transform duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
27+
<polyline points="6 9 12 15 18 9"></polyline>
28+
</svg>
29+
</summary>
30+
<div class="p-4 bg-blackberry-500 text-white">
31+
{#if answer}
32+
<p>{answer}</p>
33+
{:else if answerComponent}
34+
<svelte:component this={answerComponent} />
35+
{/if}
36+
</div>
37+
</details>
38+
{/each}
2839
</div>
2940
</div>
3041
{/each}
3142
</div>
3243
</div>
3344
<Footer class="mt-8" />
3445
</section>
46+
47+
<style>
48+
details > summary::-webkit-details-marker {
49+
display: none;
50+
}
51+
52+
details[open] > summary > svg {
53+
transform: rotate(180deg);
54+
}
55+
</style>

0 commit comments

Comments
 (0)