177 lines
7.1 KiB
Svelte
177 lines
7.1 KiB
Svelte
<script lang="ts">
|
|
import GoogleButton from '$lib/components/GoogleButton.svelte';
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>CodeQuest</title>
|
|
</svelte:head>
|
|
|
|
<div class="relative overflow-hidden min-h-[70vh]">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div
|
|
class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-lg lg:w-full lg:pb-28 xl:max-w-xl xl:pb-32 "
|
|
>
|
|
<main
|
|
class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28"
|
|
>
|
|
<div class="sm:text-center lg:text-left">
|
|
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl">
|
|
<div class="hidden lg:block">
|
|
<span class="block">Solve Some Problems</span>
|
|
<span class="block text-indigo-600">Hone Your Skills</span>
|
|
</div>
|
|
</h1>
|
|
<p
|
|
class="mt-3 text-base text-gray-500 text-center lg:text-left
|
|
sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-lg lg:mx-0"
|
|
>
|
|
CodeQuest is a challenge of 10 different programming puzzles.
|
|
<br />
|
|
Designed to be open and accessible to all.
|
|
<br />
|
|
Open to <i>any</i> language and technology you like.
|
|
</p>
|
|
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
|
|
<div class="rounded-md shadow w-48 md:w-auto mx-auto md:m-0">
|
|
<a href="#details" class="btn px-8 py-3 md:px-10 md:py-4 text-lg rounded">
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<div class="lg:absolute lg:inset-y-0 lg:right-3 lg:w-1/2">
|
|
<img
|
|
class="h-56 w-full object-fit sm:h-72 md:h-96 lg:w-full lg:h-full"
|
|
src="/undraw_code_inspection.svg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="slant bg-indigo-200">
|
|
<div class="wrapper">
|
|
<div
|
|
id="details"
|
|
class="container mx-auto md:min-h-[40vh] p-12 md:p-0 md:flex items-center justify-evenly flex-row-reverse gap-12 lg:gap-8"
|
|
>
|
|
<div class="mt-8 md:mt-8 w-full md:max-w-sm lg:max-w-lg">
|
|
<div class="text-center md:text-left">
|
|
<h1 class=" tracking-tight font-semibold text-gray-900 text-3xl flex items-center">
|
|
How it Works
|
|
<!-- prettier-ignore -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 mt-[5px] ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
|
</svg>
|
|
</h1>
|
|
</div>
|
|
<p class="lg:text-lg font-medium mt-2">
|
|
CodeQuest is not like most other programming competitions. Instead, it is heavily inspired
|
|
by the <a href="https://adventofcode.com">Advent of Code </a>. Instead of submitting code
|
|
which will be tested and evaluated by CodeQuest, <i>only your final answers</i> will be
|
|
validated to an input you can inspect and verify.
|
|
<br /> <br />
|
|
This is an opportunity for you to use tools that
|
|
<strong>you enjoy</strong>, and demonstrate your skills and expertise.
|
|
</p>
|
|
<a class="flex items-center mt-2" href="/about">
|
|
Learn More
|
|
<!-- prettier-ignore -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-[2px]" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg>
|
|
</a>
|
|
</div>
|
|
<div class="mt-16 md:mt-8">
|
|
<img
|
|
class="w-96 object-fit md:w-96 lg:h-80 lg:h-full lg:max-w-lg md:scale-x-[-1]"
|
|
src="/undraw_thought_process.svg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-indigo-100 pt-[7vw]">
|
|
<div
|
|
class="container mx-auto lg:min-h-[40vh] p-12 md:p-0 lg:flex items-end justify-evenly gap-12 lg:gap-8"
|
|
>
|
|
<div class="mt-8 w-full md:max-w-lg mx-auto lg:mx-0 lg:max-w-lg">
|
|
<div class="text-center lg:text-left">
|
|
<h1
|
|
class=" tracking-tight font-semibold text-gray-900 text-3xl flex items-center flex gap-2"
|
|
>
|
|
Details
|
|
<!-- prettier-ignore -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 mt-.5 ml-1" viewBox="0 0 20 20" fill="currentColor"> <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" /> <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" /> </svg>
|
|
</h1>
|
|
</div>
|
|
<p class="lg:text-lg font-medium mt-2">
|
|
<strong>CodeQuest</strong> will be hosted on Friday, April 29 in F-201. We highly encourage everyone
|
|
to join. The entire competition will take place over approximately 2 hours, where we will spend
|
|
10-15 minutes preparing and geting ready, before the competition of 90 minutes will start. Please
|
|
try to get here by 15:15 so we can finish by 5pm!
|
|
</p>
|
|
<a class="flex items-center mt-2" href="/#">
|
|
Calendar Invite
|
|
<!-- prettier-ignore -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-[2px]" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg>
|
|
</a>
|
|
</div>
|
|
<div class="mt-8 w-full md:max-w-lg mx-auto lg:mx-0 lg:max-w-lg">
|
|
<div class="text-center lg:text-left">
|
|
<h1
|
|
class="tracking-tight font-semibold text-gray-900 text-3xl flex items-center gap flex-2"
|
|
>
|
|
Contest Prizes
|
|
<!-- prettier-ignore -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 mt-.5 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /> </svg>
|
|
</h1>
|
|
</div>
|
|
<p class="lg:text-lg font-medium mt-2">
|
|
While we encourage everyone to join and have fun, prizes will be awarded. We want to
|
|
recognize, promote, and encourage students who have cultivated their programming skills both
|
|
within class, and outside of school.
|
|
<br />
|
|
</p>
|
|
<div class="mt-2">
|
|
<strong>Top 3 Performance Prizes</strong>
|
|
<ol class="list-decimal font-medium ml-6">
|
|
<li>IDR 350,000</li>
|
|
<li>IDR 125,000</li>
|
|
<li>IDR 75,000</li>
|
|
</ol>
|
|
</div>
|
|
<a class="flex items-center mt-2" href="/about">
|
|
Learn More
|
|
<!-- prettier-ignore -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-[2px]" viewBox="0 0 20 20" fill="currentColor" > <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="border-indigo-400 border-2 max-w-xs mx-auto my-12 lg:my-24" />
|
|
|
|
<div class="mt-8 md:mt-8 w-full md:max-w-sm lg:max-w-lg mx-auto">
|
|
<h1 class="text-center tracking-tight font-semibold text-gray-900 text-2xl">Join Now</h1>
|
|
<p class="mt-2 pb-8 text-center">
|
|
Log in with your JIS Email and join CodeQuest!
|
|
<br />
|
|
<br />
|
|
<GoogleButton />
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<style lang="postcss">
|
|
.slant {
|
|
clip-path: polygon(0 7vw, 0 100%, 100% calc(100% - 7vw), 100% 0);
|
|
margin: 0 0 -7vw;
|
|
}
|
|
|
|
.slant .wrapper {
|
|
padding: 9vw 0;
|
|
}
|
|
</style>
|