WIP on landing page improvements.

zorn · Dec 10, 2024 · d9498cf · d9498cf
1 parent a3ab45c
commit d9498cf
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 20 deletions.
diff --git a/lib/flick_web/components/layouts/app.html.heex b/lib/flick_web/components/layouts/app.html.heex
@@ -1,18 +1,39 @@
-<header class="px-4 sm:px-6 lg:px-8">
-  <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
-    <div class="flex items-center gap-4">
-      <.link href={~p"/"}>Flick</.link>
+<%!-- Logo and Navigation --%>
+<section class="bg-gradient-to-r from-teal-500 to-blue-500 py-4">
+  <FlickWeb.UI.page_column>
+    <div class="text-4xl">
+      <div class="flex justify-between">
+        <.link
+          class="font-bold text-white drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]"
+          href={~p"/"}
+        >
+          RankedVoting<span class="text-2xl">.app</span>
+        </.link>
+        <.button class="bg-blue-700 hover:bg-blue-800 text-white">
+          <.link navigate={~p"/ballot/new"} class="no-underline">
+            Create Ballot
+          </.link>
+        </.button>
+      </div>
     </div>
-    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
-      <a href="https://github.com/zorn/flick" class="hover:text-zinc-700">
-        GitHub
-      </a>
-    </div>
-  </div>
-</header>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
-  <div class="mx-auto max-w-5xl">
+  </FlickWeb.UI.page_column>
+</section>
+
+<%!-- Page Content --%>
+<section>
+  <FlickWeb.UI.page_column class="my-4">
     <.flash_group flash={@flash} />
     <%= @inner_content %>
-  </div>
-</main>
+  </FlickWeb.UI.page_column>
+</section>
+
+<%!-- Footer --%>
+<section class="mt-8">
+  <hr class="mb-4" />
+  <FlickWeb.UI.page_column class="text-center">
+    <a href="https://github.com/zorn/flick" class="underline">
+      GitHub Project
+    </a>
+    &bull; <a href="mailto:[email protected]" class="underline">Contact</a>
+  </FlickWeb.UI.page_column>.
+</section>
diff --git a/lib/flick_web/components/ui.ex b/lib/flick_web/components/ui.ex
@@ -0,0 +1,21 @@
+defmodule FlickWeb.UI do
+  @moduledoc """
+  Domain-specific components to express the the UI for Flick.
+  """
+
+  use Phoenix.Component
+  use FlickWeb, :verified_routes
+
+  slot :inner_block, required: true
+  attr :rest, :global
+
+  def page_column(assigns) do
+    ~H"""
+    <div class="max-w-2xl mx-auto px-4">
+      <div {@rest}>
+        <%= render_slot(@inner_block) %>
+      </div>
+    </div>
+    """
+  end
+end
diff --git a/lib/flick_web/live/index_live.ex b/lib/flick_web/live/index_live.ex
@@ -15,12 +15,56 @@ defmodule FlickWeb.IndexLive do
   @impl Phoenix.LiveView
   def render(assigns) do
     ~H"""
-    <div class="prose">
-      <p id="welcome-copy">
-        Flick is an application that allows you to create ballots that capture ranked votes.
-      </p>
+    <div class="prose prose-p:leading-6 prose-li:my-0">
+      <section>
+        <p>
+          Many traditional voting systems ask for a single choice per voter, and the winner is chosen based on the number of votes cast for any single choice. In a ranked vote, voters provide ranked preferences instead of selecting a single choice, which ultimately results in a better consensus outcome.
+        </p>
 
-      <p><.link navigate={~p"/ballot/new"}>Create a ballot</.link> and try it out.</p>
+        <p>
+          This site helps people quickly create, run, and tally ranked voting ballots. It is free to use and open source. No accounts are required to create or vote on a ballot.
+        </p>
+
+        <p class="font-bold">How it works:</p>
+
+        <ol>
+          <li>
+            <.link navigate={~p"/ballot/new"}>Create a ballot</.link>
+            with a question and possible answers.
+          </li>
+          <li>Publish the ballot, creating a link to share with voters.</li>
+          <li>Tally the votes an derive a winner with a point-based system.</li>
+        </ol>
+      </section>
+
+      <section>
+        <p class="font-bold">Use cases:</p>
+
+        <ul>
+          <li>Pick a book for a book club.</li>
+          <li>Select a movie for movie night.</li>
+          <li>Choose a vacation destination for a large group.</li>
+          <li>Decide on a new logo for a company.</li>
+          <li>Prioritize a technical debt projects.</li>
+        </ul>
+      </section>
+
+      <%!-- TODO: Sample voting page photos? --%>
+      <%!-- Sample results page? --%>
+      <%!-- Could be real pages or photos. --%>
+      <%!-- Photos would probably be easier to do for now, with an automated demo ballot in the future? --%>
+
+      <section>
+        <h2 class="mb-1">Free and Open Source</h2>
+
+        <p>
+          The open source project that powers this site is called <a href="https://github.com/zorn/flick">Flick</a>. It is written in
+          <a href="https://elixir-lang.org/">Elixir</a>
+          and <a href="https://www.phoenixframework.org/">Phoenix Live View</a>. It was initially built to help the
+          <a href="https://elixirbookclub.github.io/website/">Elixir Book Club</a>
+          pick books, but is shared with all to use and learn from.
+        </p>
+      </section>
     </div>
     """
   end