Cam hack splash page design

package.json

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

src/app.css

@@ -1,65 +1,294 @@
 @import "tailwindcss";
 
 @theme {
-  --font-playpen: Ubuntu Mono, monospace;
+  --font-mono: "JetBrains Mono", "Fira Code", "Ubuntu Mono", monospace;
+  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
+  --color-neon-green: #00ff88;
+  --color-neon-cyan: #00ffcc;
+  --color-dark-void: #0a0a0a;
+  --color-dark-surface: #111111;
+  --color-dark-elevated: #1a1a1a;
+  --color-dark-border: #2a2a2a;
+}
+
+@font-face {
+  font-family: "Space Grotesk";
+  font-style: normal;
+  font-weight: 300 700;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url("https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxjPVmUsaaDhw.woff2")
+    format("woff2");
 }
 
 html {
   scroll-behavior: smooth;
   overscroll-behavior: none;
 }
 
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-neon-green) var(--color-dark-void);
+}
+
 body {
-  @apply font-playpen flex min-h-screen flex-col text-slate-800;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  background-color: var(--color-dark-void);
+  font-family: var(--font-mono);
+  color: white;
+  background: linear-gradient(
+    180deg,
+    var(--color-dark-void) 0%,
+    #0f0f12 50%,
+    var(--color-dark-void) 100%
+  );
+}
+
+.neon-text {
+  color: var(--color-neon-green);
+  text-shadow:
+    0 0 10px var(--color-neon-green),
+    0 0 20px var(--color-neon-green),
+    0 0 40px var(--color-neon-green),
+    0 0 80px var(--color-neon-green);
+}
+
+.neon-text-subtle {
+  color: var(--color-neon-green);
+  text-shadow:
+    0 0 5px var(--color-neon-green),
+    0 0 10px var(--color-neon-green);
+}
+
+.neon-border {
+  border: 1px solid var(--color-neon-green);
+  box-shadow:
+    0 0 5px var(--color-neon-green),
+    inset 0 0 5px rgba(0, 255, 136, 0.1);
+}
+
+.neon-glow {
+  box-shadow:
+    0 0 20px rgba(0, 255, 136, 0.3),
+    0 0 40px rgba(0, 255, 136, 0.1);
 }
 
-.theme-bg-gradient {
-  background-image: linear-gradient(120deg, #86e293 0%, #86e6c6 100%);
+.glass-panel {
+  background: rgba(17, 17, 17, 0.8);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(0, 255, 136, 0.2);
 }
 
-a.theme-hyperlink {
-  @apply text-emerald-600 hover:text-emerald-700;
+.gradient-text {
+  background: linear-gradient(
+    135deg,
+    var(--color-neon-green) 0%,
+    var(--color-neon-cyan) 100%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.theme-hyperlink {
+  color: var(--color-neon-green);
+  transition: all 0.3s;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+.theme-hyperlink:hover {
+  color: var(--color-neon-cyan);
+  text-shadow: 0 0 10px var(--color-neon-green);
 }
 
 section {
-  @apply p-4 text-lg sm:px-8;
+  position: relative;
+  z-index: 10;
+  padding: 1rem;
+  font-size: 1.125rem;
+}
+
+@media (min-width: 640px) {
+  section {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
 }
 
 h1 {
-  @apply text-4xl font-bold;
+  font-family: var(--font-display);
+  font-size: 2.25rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  margin-bottom: 1rem;
 }
 
 h2 {
-  @apply text-3xl font-bold;
+  font-family: var(--font-display);
+  font-size: 1.875rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  margin-bottom: 1rem;
 }
 
 h3 {
-  @apply text-2xl font-bold;
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
 }
 
 h4 {
-  @apply text-xl font-bold;
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
 }
 
 h5 {
-  @apply text-lg font-bold;
+  font-family: var(--font-display);
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
 }
 
 h6 {
-  @apply text-base font-bold;
+  font-family: var(--font-display);
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
 }
 
-h1,
-h2,
-h3,
 p,
 ul {
-  @apply mb-4;
+  margin-bottom: 1rem;
 }
 
-h4,
-h5,
-h6,
 li {
-  @apply mb-2;
+  margin-bottom: 0.5rem;
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes pulse-glow {
+  0%,
+  100% {
+    box-shadow:
+      0 0 20px rgba(0, 255, 136, 0.3),
+      0 0 40px rgba(0, 255, 136, 0.1);
+  }
+  50% {
+    box-shadow:
+      0 0 40px rgba(0, 255, 136, 0.5),
+      0 0 80px rgba(0, 255, 136, 0.2);
+  }
+}
+
+@keyframes glitch {
+  0% {
+    clip-path: inset(40% 0 61% 0);
+    transform: translate(-2px, 2px);
+  }
+  20% {
+    clip-path: inset(92% 0 1% 0);
+    transform: translate(1px, -1px);
+  }
+  40% {
+    clip-path: inset(43% 0 1% 0);
+    transform: translate(-1px, 2px);
+  }
+  60% {
+    clip-path: inset(25% 0 58% 0);
+    transform: translate(2px, 1px);
+  }
+  80% {
+    clip-path: inset(54% 0 7% 0);
+    transform: translate(-2px, -2px);
+  }
+  100% {
+    clip-path: inset(58% 0 43% 0);
+    transform: translate(2px, 1px);
+  }
+}
+
+@keyframes scan-line {
+  0% {
+    top: -100%;
+  }
+  100% {
+    top: 100%;
+  }
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 3s ease-in-out infinite;
+}
+
+.hover-lift {
+  transition: all 0.5s;
+}
+
+.hover-lift:hover {
+  transform: translateY(-10px) scale(1.02);
+  box-shadow: 0 20px 40px rgba(0, 255, 136, 0.2);
+}
+
+.card {
+  background: rgba(17, 17, 17, 0.8);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(0, 255, 136, 0.2);
+  position: relative;
+  overflow: hidden;
+  border-radius: 1rem;
+  padding: 1.5rem;
+  transition: all 0.5s;
+}
+
+.card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(0, 255, 136, 0.1),
+    transparent
+  );
+  transition: 0.5s;
+}
+
+.card:hover::before {
+  left: 100%;
+}
+
+.card:hover {
+  border-color: rgba(0, 255, 136, 0.5);
+  box-shadow:
+    0 0 30px rgba(0, 255, 136, 0.2),
+    inset 0 0 20px rgba(0, 255, 136, 0.05);
 }

src/lib/components/FAQ.svelte

@@ -9,8 +9,8 @@
       <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!
+    runs over a weekend and is a great way to learn new skills, meet new people, and
+    have fun!
   </FAQuestion>
   <FAQuestion>
     {#snippet question()}