Skip to content

Commit

Permalink
faq design upgrade
Browse files Browse the repository at this point in the history
  • Loading branch information
ssbdragonfly committed Sep 21, 2024
1 parent 3b59219 commit 36e9e22
Show file tree
Hide file tree
Showing 6 changed files with 99 additions and 78 deletions.
4 changes: 2 additions & 2 deletions src/eventdata/FAQComponents/FAQDeadline.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
<p>
Registration for participants, volunteers, mentors, judges, workshop hosts, and photographers
opens on
<strong>NOT DECIDED FOR HACK TJ 12.0 YET</strong> .
<strong>January 24th</strong> .
</p>

<p class="mt-2">
Registration for participants closes on
<strong>NOT DECIDED FOR HACK TJ 12.0 YET</strong> — will be a hard deadline; we do not accept submissions after this time.
<strong>February 10th</strong> — will be a hard deadline; we do not accept submissions after this time.
</p>
<p class="mt-2">
Judges, mentors, and volunteers will be able to register until the start of the event.
Expand Down
3 changes: 2 additions & 1 deletion src/eventdata/FAQComponents/FAQPrizes.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@
<li class="mt-1">Web App</li>
<li class="mt-1">Mobile App</li>
<li class="mt-1">Machine Learning/Artificial Intelligence</li>
<li class="mt-1">Design</li>
<li class="mt-1">Best UI/UX</li>
<li class="mt-1">Social Impact</li>
<li class="mt-1 mb-3">Beginner Hack (first-year coder teams)</li>
<li class="mt-1">and perhaps more ...</li>
</ul>

<p>
Expand Down
2 changes: 1 addition & 1 deletion src/eventdata/FAQComponents/FAQRegister.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<ol class="list-decimal">
<li>
On <strong>NOT DECIDED FOR HACK TJ 12.0 YET</strong>, a button will appear at
On <strong>January 24th</strong>, a button will appear at
the top of this site. Click it.
</li>
<li class="mt-2">You will be redirected to a page where you can click the appropriate form.</li>
Expand Down
2 changes: 1 addition & 1 deletion src/eventdata/FAQComponents/FAQWhen.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
</script>

<p>
<strong>Please note that the exact dates for HackTJ 12.0 are not yet finalized.</strong>
<strong>Save the Date! HackTJ 12.0 will be held March 8-9th 2025!</strong>
</p>
121 changes: 60 additions & 61 deletions src/eventdata/faq.js
Original file line number Diff line number Diff line change
@@ -1,64 +1,63 @@
/**
* This File contains all information needed for the FAQ page
*/

import { FAQCodeOfConduct, FAQDeadline, FAQPrizes, FAQRegister, FAQWhen } from './FAQComponents';

/**
* Each object should be in the format
* {question, answer} or {question, answerCoponent}
* answer will just be a simple string, while answerComponent is a svelte component in FAQComponents
* Reasons we might want to use FAQComponents is so we can do things like links and lists
*/

export default [
{
question: 'What is HackTJ?',
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.'
},
{
question: 'When is HackTJ?',
answerComponent: FAQWhen
},
{
question: 'Who can attend?',
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."
},
{
question: 'Is there any cost?',
answer: 'Nope! Thanks to our sponsors, HackTJ is completely free!'
},
{
question: 'Is there a deadline?',
answerComponent: FAQDeadline
},
{
question: 'Is there a code of conduct?',
answerComponent: FAQCodeOfConduct
},
{
question: "Isn't hacking illegal?",
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.'
},
{
question: 'Do I need a team?',
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."
},
{
question: 'What prizes can I win?',
answerComponent: FAQPrizes
},
{
question: 'How do I register?',
answerComponent: FAQRegister
},
{
question: 'How are ticket decisions made?',
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!'
}
];
{
category: "About HackTJ",
questions: [
{
question: 'What is HackTJ?',
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.'
},
{
question: 'When is HackTJ?',
answerComponent: FAQWhen
},
{
question: "Isn't hacking illegal?",
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.'
},
{
question: 'Is there a code of conduct?',
answerComponent: FAQCodeOfConduct
}
]
},
{
category: "Registration",
questions: [
{
question: 'How do I register?',
answerComponent: FAQRegister
},
{
question: 'Is there a deadline?',
answerComponent: FAQDeadline
},
{
question: 'How are ticket decisions made?',
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!'
},
{
question: 'Is there any cost?',
answer: 'Nope! Thanks to our sponsors, HackTJ is completely free!'
}
]
},
{
category: "Prizes and Eligibility",
questions: [
{
question: 'What prizes can I win?',
answerComponent: FAQPrizes
},
{
question: 'Who can attend?',
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."
},
{
question: 'Do I need a team?',
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."
}
]
}
];
45 changes: 33 additions & 12 deletions src/routes/faq.svelte
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<script>
import { base } from '$app/paths';
import Home from '@svicons/ionicons-solid/home.svelte';
import Footer from '../components/Footer.svelte';
import { faq } from '../eventdata';
import faq from '../eventdata/faq';
</script>

<section class="text-blueberry-200 flex flex-col justify-between min-h-screen">
Expand All @@ -15,20 +14,42 @@
</div>
<h1 class="text-5xl font-black text-white">FAQ</h1>
</div>
<div class="w-full mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-16">
{#each faq as { question, answer, answerComponent }}
<div class="text-white">
<h3 class="font-bold text-xl whitespace-pre-wrap">{question}</h3>
<div class="mt-1">
{#if answer}
<p>{answer}</p>
{:else if answerComponent}
<svelte:component this={answerComponent} />
{/if}
<div class="w-full mt-8 space-y-8">
{#each faq as { category, questions }}
<div class="bg-blackberry-800 rounded-lg overflow-hidden">
<h2 class="text-2xl font-bold text-white p-4 bg-blackberry-700">{category}</h2>
<div class="space-y-2 p-4">
{#each questions as { question, answer, answerComponent }}
<details class="bg-blackberry-600 rounded-lg overflow-hidden">
<summary class="flex justify-between items-center p-4 cursor-pointer">
<h3 class="font-bold text-xl text-white">{question}</h3>
<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">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</summary>
<div class="p-4 bg-blackberry-500 text-white">
{#if answer}
<p>{answer}</p>
{:else if answerComponent}
<svelte:component this={answerComponent} />
{/if}
</div>
</details>
{/each}
</div>
</div>
{/each}
</div>
</div>
<Footer class="mt-8" />
</section>

<style>
details > summary::-webkit-details-marker {
display: none;
}
details[open] > summary > svg {
transform: rotate(180deg);
}
</style>

0 comments on commit 36e9e22

Please sign in to comment.