Waitlist Page

package.json

@@ -22,6 +22,7 @@
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/adapter-netlify": "^2.0.6",
     "@sveltejs/kit": "^1.5.0",
+    "@tailwindcss/forms": "^0.5.3",
     "@types/cookie": "^0.5.1",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",

src/app.css

@@ -153,4 +153,11 @@
   .text-large {
     @apply text-p-x-large leading-[33.6px];
   }
+
+  input[type="text"],
+  input[type="number"],
+  textarea,
+  select {
+    @apply bg-bg rounded-lg border-2 border-rose;
+  }
 }

src/lib/components/index/conference-info.svelte

@@ -16,6 +16,5 @@
     Join in on conversation around building and implementing the tools that improve
     the software development experience.
   </p>
-  <!-- TODO: Update Join waitlist URL -->
-  <PrimaryButton href="/" text="Join the waitlist" />
+  <PrimaryButton href="/join" text="Join the waitlist" />
 </div>

src/lib/components/layout/faqs.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { FAQ } from "$lib/types/faq";
+
+  export let faqs: FAQ[];
+</script>
+
+<div class="flex flex-col items-center space-y-8">
+  <h1 class="font-bold text-4xl">FAQs</h1>
+
+  <div class="grid gap-x-8 gap-y-10 grid-flow-row-dense grid-cols-2">
+    {#each faqs as faq}
+      <div class="max-w-sm">
+        <h4 class="font-bold text-xl">{faq.title}</h4>
+        <p class="text-lg">{faq.description}</p>
+      </div>
+    {/each}
+  </div>
+</div>

src/lib/components/layout/join-us.svelte

@@ -52,7 +52,7 @@
       </div>
     </div>
 
-    <PrimaryButton text="Join the waitlist" />
+    <PrimaryButton href="/join" text="Join the waitlist" />
 
     <div class="flex gap-4 items-center">
       <div class="w-8 h-8 mb-auto mt-1">

src/lib/components/layout/nav.svelte

@@ -17,8 +17,7 @@
   >
     <CDEUniverse />
     <div class="hidden items-center gap-x-small lg:flex">
-      <!-- TODO: Update URL when ready -->
-      <SecondaryButton href="/" text="Join waitlist" isDisabled={false} />
+      <SecondaryButton href="/join" text="Join waitlist" isDisabled={false} />
     </div>
   </div>
 </nav>

src/lib/components/layout/speakers.svelte

@@ -72,7 +72,7 @@
   </div>
 </div>
 
-<style>
+<style lang="postcss">
   .social-link {
     @apply w-5 h-5 block;
   }

src/lib/components/layout/waitlist.svelte

@@ -0,0 +1,62 @@
+<script>
+  import PrimaryButton from "../library/primary-button.svelte";
+  import OpenGraph from "../library/open-graph.svelte";
+</script>
+
+<OpenGraph
+  data={{
+    title: "Join the waitlist",
+    description: "Join the waitlist for CDE Universe 2023",
+  }}
+/>
+
+<div class="flex flex-col items-start gap-10 ">
+  <h1 class="text-7xl md:text-8xl font-normal mx-auto">Join the waitlist</h1>
+
+  <p class="text-xl mx-auto">Apply below for a ticket to CDE Universe 2023.</p>
+
+  <form class="grid grid-cols-2 gap-10 max-w-xl mx-auto">
+    <label>
+      Full Name*
+      <input type="text" />
+    </label>
+
+    <label>
+      Work e-mail*
+      <input type="text" />
+    </label>
+
+    <label>
+      Company website*
+      <input type="text" />
+    </label>
+
+    <label>
+      Role*
+      <select>
+        <option value="SOMETHING">Role</option>
+      </select>
+    </label>
+
+    <label class="col-span-2">
+      What do you want to learn?*
+      <textarea rows="6" />
+    </label>
+
+    <p class="col-span-2 text-xs">
+      By submitting this form, I confirm that I acknowledge the collection and
+      processing of personal data by CDE universe, as further described in the
+      <a href="/privacy">Privacy Policy</a>.
+    </p>
+
+    <div>
+      <PrimaryButton text="Submit" />
+    </div>
+  </form>
+</div>
+
+<style lang="postcss">
+  label {
+    @apply flex flex-col gap-2;
+  }
+</style>

src/lib/data.ts

@@ -1,4 +1,5 @@
 import type { Speaker } from "./types/speakers";
+import type { FAQ } from "./types/faq";
 
 export const speakers: Speaker[] = [
   {
@@ -74,3 +75,34 @@ export const speakers: Speaker[] = [
     github: "gitpod",
   },
 ];
+
+export const faqs: FAQ[] = [
+  {
+    title: "Who will be invited to join?",
+    description:
+      "CDE Universe is for anyone building and implementing for a better software development experience. Platform engineers, DevOps, and developer experience engineers, will all be in attendance.",
+  },
+  {
+    title: "Why should I join?",
+    description:
+      "CDE Universe is small and curated. Connect with leading minds across the developer tool space. Learn best practices in cloud development, CDE adoption and emerging technologies that enable better software development.",
+  },
+  {
+    title: "When will I hear back regarding attendance?",
+    description:
+      "Remaining tickets will be released on a weekly basis. You'll hear back about your application within 7 days.",
+  },
+  {
+    title: "Is the conference free?",
+    description: "Yes, the event is free for participants.",
+  },
+  {
+    title: "Will there be recordings?",
+    description: "Yes, talks will be recorded.",
+  },
+  {
+    title: "Can I attend virtually as well?",
+    description:
+      "No, this is an in-person event. Recordings will be up on our YouTube channel after the event.",
+  },
+];

src/lib/types/faq.d.ts

@@ -0,0 +1,4 @@
+export interface FAQ {
+  title: string;
+  description: string;
+}

src/routes/join/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import Waitlist from "$lib/components/layout/waitlist.svelte";
+  import Faqs from "$lib/components/layout/faqs.svelte";
+  import { faqs } from "$lib/data";
+</script>
+
+<div class="max-w-5xl mx-auto space-y-36 pt-16 pb-36">
+  <Waitlist />
+  <Faqs {faqs} />
+</div>

tailwind.config.cjs

@@ -72,7 +72,7 @@ const config = {
     },
   },
 
-  plugins: [],
+  plugins: [require("@tailwindcss/forms")],
 };
 
 module.exports = config;