Cam hack splash page design

package.json

@@ -26,7 +26,8 @@
   "type": "module",
   "dependencies": {
     "@sveltejs/adapter-node": "^5.2.14",
-    "@tailwindcss/vite": "^4.1.11"
+    "@tailwindcss/vite": "^4.1.11",
+    "three": "^0.182.0"
   },
   "prettier": {
     "plugins": [

src/app.css

@@ -1,7 +1,10 @@
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');
+
 @import "tailwindcss";
 
 @theme {
   --font-playpen: Ubuntu Mono, monospace;
+  --font-display: "Orbitron", "Ubuntu Mono", monospace;
 }
 
 html {
@@ -11,30 +14,41 @@ html {
 
 body {
   @apply font-playpen flex min-h-screen flex-col text-slate-800;
+  background: radial-gradient(ellipse at top, #0f172a 0%, #020617 100%);
+  background-attachment: fixed;
 }
 
 .theme-bg-gradient {
-  background-image: linear-gradient(120deg, #86e293 0%, #86e6c6 100%);
+  background-image: linear-gradient(120deg, #10b981 0%, #059669 50%, #86e6c6 100%);
+}
+
+.theme-bg-glow {
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(134, 230, 198, 0.1) 100%);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(16, 185, 129, 0.2);
 }
 
 a.theme-hyperlink {
-  @apply text-emerald-600 hover:text-emerald-700;
+  @apply text-emerald-400 hover:text-emerald-300 transition-colors;
 }
 
 section {
-  @apply p-4 text-lg sm:px-8;
+  @apply p-4 text-lg sm:px-8 relative;
 }
 
 h1 {
   @apply text-4xl font-bold;
+  font-family: "Orbitron", "Ubuntu Mono", monospace;
 }
 
 h2 {
   @apply text-3xl font-bold;
+  font-family: "Orbitron", "Ubuntu Mono", monospace;
 }
 
 h3 {
   @apply text-2xl font-bold;
+  font-family: "Orbitron", "Ubuntu Mono", monospace;
 }
 
 h4 {
@@ -63,3 +77,44 @@ h6,
 li {
   @apply mb-2;
 }
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes glow {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(16, 185, 129, 0.8);
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+.animate-glow {
+  animation: glow 3s ease-in-out infinite;
+}
+
+.animate-slide-in {
+  animation: slideInUp 0.8s ease-out forwards;
+}

src/lib/components/AboutNew.svelte

@@ -0,0 +1,60 @@
+<script>
+  import { onMount } from 'svelte';
+
+  let visible = false;
+
+  onMount(() => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          visible = true;
+        }
+      });
+    }, { threshold: 0.1 });
+
+    const section = document.querySelector('#about');
+    if (section) {
+      observer.observe(section);
+    }
+
+    return () => observer.disconnect();
+  });
+</script>
+
+<div id="about" class="relative py-20">
+  <div class="absolute inset-0 bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900"></div>
+
+  <div class="relative z-10 mx-auto max-w-7xl px-4 sm:px-8">
+    <h2 class="mb-12 text-center text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400 drop-shadow-lg">
+      About
+    </h2>
+
+    <div class="space-y-6">
+      <div
+        class="rounded-2xl border border-emerald-500/30 bg-slate-900/50 p-8 backdrop-blur-sm transition-all duration-500 hover:border-emerald-400/50 hover:shadow-2xl hover:shadow-emerald-500/20"
+        style="animation-delay: 0.2s; opacity: {visible ? 1 : 0};"
+        class:animate-slide-in={visible}
+      >
+        <p class="text-xl leading-relaxed text-slate-200">
+          Cam Hack is a 2 day hackathon for the innovative minds at the University of
+          Cambridge. Over an action-packed weekend, students come together to design
+          and build technology projects from the ground up. We welcome participants
+          ranging from curious beginners to seasoned coders. Expect plenty of free
+          stash, food, and mini-events throughout this hackathon.
+        </p>
+      </div>
+
+      <div
+        class="rounded-2xl border border-emerald-500/30 bg-gradient-to-br from-emerald-500/10 to-cyan-500/10 p-8 backdrop-blur-sm transition-all duration-500 hover:border-emerald-400/50 hover:shadow-2xl hover:shadow-emerald-500/20"
+        style="animation-delay: 0.4s; opacity: {visible ? 1 : 0};"
+        class:animate-slide-in={visible}
+      >
+        <p class="text-xl font-semibold leading-relaxed text-emerald-200">
+          For the winning team, each person will receive £200 and can choose from a
+          range of prizes including: smartwatches, Steam vouchers, Amazon vouchers, or
+          Sony XM4 headphones.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

src/lib/components/FAQNew.svelte

@@ -0,0 +1,144 @@
+<script>
+  import { onMount } from 'svelte';
+  import FAQuestion from "$lib/components/FAQuestion.svelte";
+
+  let visible = false;
+
+  onMount(() => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          visible = true;
+        }
+      });
+    }, { threshold: 0.1 });
+
+    const section = document.querySelector('#faq');
+    if (section) {
+      observer.observe(section);
+    }
+
+    return () => observer.disconnect();
+  });
+</script>
+
+<div id="faq" class="relative py-20">
+  <div class="absolute inset-0 bg-gradient-to-b from-slate-900 via-slate-800/50 to-slate-900"></div>
+
+  <div class="relative z-10 mx-auto max-w-7xl px-4 sm:px-8"
+       style="opacity: {visible ? 1 : 0};"
+       class:animate-slide-in={visible}>
+    <h2 class="mb-12 text-center text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400 drop-shadow-lg">
+      FAQ
+    </h2>
+
+    <div class="space-y-4">
+      <FAQuestion>
+        {#snippet question()}
+          <span>What is a hackathon?</span>
+        {/snippet}
+        A hackathon is an event where people collaborate to create new projects! It usually
+        runs over a weekend and is a great way to learn new skills, meet new people,
+        and have fun!
+      </FAQuestion>
+
+      <FAQuestion>
+        {#snippet question()}
+          <span>What are the hackathon tracks?</span>
+        {/snippet}
+        All projects submit to a main track, which aligns with the overall theme of the
+        event (to be revealed on the day). Participants can optionally submit the same
+        project to one or more secondary tracks, whose themes extend the main theme in
+        some way. Participants who opt into secondary tracks are eligible for both the
+        main track and secondary track prizes.
+      </FAQuestion>
+
+      <FAQuestion>
+        {#snippet question()}
+          <span>Can I participate remotely?</span>
+        {/snippet}
+        While online participation is not allowed, it's okay to leave the venue for some
+        time to hack elsewhere. We hope to see you at the Computer Lab!
+      </FAQuestion>
+
+      <FAQuestion>
+        {#snippet question()}
+          <span>How much does it cost?</span>
+        {/snippet}
+        Entry is free and includes food, drinks, and of course, stash!
+      </FAQuestion>
+
+      <FAQuestion>
+        {#snippet question()}
+          <span>Where is it?</span>
+        {/snippet}
+        Cam Hack 2025 will be in the Computer Laboratory, also known as the
+        <a href="https://maps.app.goo.gl/185n4bsvv7AXw3FM7" class="font-semibold text-emerald-400 transition-colors hover:text-emerald-300">
+          William Gates Building
+        </a>.
+      </FAQuestion>
+
+      <FAQuestion>
+        {#snippet question()}
+          <span>I don't have a team!</span>
+        {/snippet}
+        If you don't have a team yet, don't hesitate to look around in our
+        <a target="_blank" class="font-semibold text-emerald-400 transition-colors hover:text-emerald-300" href="/discord">
+          Discord server
+        </a>. It's also common to form teams at the event itself!
+      </FAQuestion>
+
+      <FAQuestion>
+        {#snippet question()}
+          <span>How do I sign up?</span>
+        {/snippet}
+        Signups are now closed. We look forward to seeing you at the event!
+      </FAQuestion>
+
+      <FAQuestion>
+        {#snippet question()}
+          <span>I've never hacked before!</span>
+        {/snippet}
+        That's completely fine! Teams often have hackers with a mix of experience, including
+        beginners.
+      </FAQuestion>
+
+      <FAQuestion>
+        {#snippet question()}
+          <span>Will there be food?</span>
+        {/snippet}
+        Yes! We will provide meals, as well as lots of snacks throughout the event! Please
+        let us know if you have any dietary requirements in the sign up form.
+      </FAQuestion>
+
+      <FAQuestion>
+        {#snippet question()}
+          <span>Can I submit to multiple tracks?</span>
+        {/snippet}
+        Yes, projects can be submitted to multiple tracks.
+      </FAQuestion>
+
+      <FAQuestion>
+        {#snippet question()}
+          <span>What can I win?</span>
+        {/snippet}
+        For the winning team, each person will receive £200 and can choose from a range
+        of prizes including: smartwatches, Steam vouchers, Amazon vouchers, or Sony XM4
+        headphones.
+      </FAQuestion>
+
+      <FAQuestion>
+        {#snippet question()}
+          <span>You didn't answer my questions!</span>
+        {/snippet}
+        You can ask us anything in our
+        <a target="_blank" href="/discord" class="font-semibold text-emerald-400 transition-colors hover:text-emerald-300">
+          Discord server
+        </a>! You can also email us at
+        <a href="mailto:camhack@cucats.org" class="font-semibold text-emerald-400 transition-colors hover:text-emerald-300">
+          camhack@cucats.org
+        </a>, or speak to us in person at the event, where we will be happy to answer.
+      </FAQuestion>
+    </div>
+  </div>
+</div>

src/lib/components/FAQuestion.svelte

@@ -2,28 +2,23 @@
   import { slide } from "svelte/transition";
   import Chevron from "$lib/components/Chevron.svelte";
 
-  /**
-   * @typedef {Object} Props
-   * @property {import('svelte').Snippet} [question]
-   * @property {import('svelte').Snippet} [children]
-   */
-
-  /** @type {Props} */
   let { question, children } = $props();
 
   let expanded = $state(false);
 </script>
 
-<div class="mb-4">
+<div class="group mb-4 overflow-hidden rounded-xl border border-emerald-500/20 bg-slate-900/50 backdrop-blur-sm transition-all hover:border-emerald-400/50">
   <button
-    class="mb-2 cursor-pointer font-bold"
+    class="flex w-full cursor-pointer items-center justify-between p-6 text-left text-xl font-bold text-emerald-300 transition-colors hover:text-emerald-200"
     onclick={() => (expanded = !expanded)}
   >
-    {@render question()}
+    <span>
+      {@render question()}
+    </span>
     <Chevron {expanded} />
   </button>
   {#if expanded}
-    <div class="mb-2" transition:slide>
+    <div class="px-6 pb-6 text-lg text-slate-200" transition:slide>
       {@render children()}
     </div>
   {/if}