feat: update home design and start adding new domain to presentation (#…

…103)
zorn · Dec 18, 2024 · 55bf064 · 55bf064
1 parent a3ab45c
commit 55bf064
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 26 deletions.
diff --git a/lib/flick_web/components/core_components.ex b/lib/flick_web/components/core_components.ex
@@ -232,8 +232,8 @@ defmodule FlickWeb.CoreComponents do
     <button
       type={@type}
       class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
-        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "phx-submit-loading:opacity-75 rounded-lg bg-teal-500 hover:bg-teal-600 py-2 px-3",
+        "text-sm font-semibold leading-6 text-white active:text-white/80 ring-1 ring-inset ring-teal-600 shadow",
         @class
       ]}
       {@rest}

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="shadow-none">
+          <.link navigate={~p"/ballot/new"}>
+            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/layouts/root.html.heex b/lib/flick_web/components/layouts/root.html.heex
@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
-    <.live_title suffix=" · Flick">
-      <%= assigns[:page_title] || "Flick" %>
+    <.live_title suffix=" · RankedVoting.app">
+      <%= assigns[:page_title] || "RankedVoting.app" %>
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>

diff --git a/lib/flick_web/components/ui.ex b/lib/flick_web/components/ui.ex
@@ -0,0 +1,25 @@
+defmodule FlickWeb.UI do
+  @moduledoc """
+  Domain-specific components to express the the UI for Flick.
+  """
+
+  use Phoenix.Component
+  use FlickWeb, :verified_routes
+
+  alias Phoenix.LiveView.Rendered
+  alias Phoenix.LiveView.Socket
+
+  slot :inner_block, required: true
+  attr :rest, :global
+
+  @spec page_column(Socket.assigns()) :: Rendered.t()
+  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
@@ -9,18 +9,63 @@ defmodule FlickWeb.IndexLive do
 
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
-    {:ok, socket}
+    socket
+    |> assign(page_title: "Home")
+    |> ok()
   end
 
   @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 id="welcome-copy">
+        <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.
+        </p>
 
-      <p><.link navigate={~p"/ballot/new"}>Create a ballot</.link> and try it out.</p>
+        <p>
+          In a <strong>ranked vote</strong>, voters provide ranked preferences instead of selecting a single choice, which ultimately results in a <strong>better consensus outcome</strong>.
+        </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 and derive a winner with a point-based system.</li>
+        </ol>
+      </section>
+
+      <section>
+        <p class="font-bold">What is ranked voting good for?</p>
+
+        <ul>
+          <li>Pick a book for a book club.</li>
+          <li>Select a movie for family night.</li>
+          <li>Choose a vacation destination for a large group.</li>
+          <li>Decide on a new logo for a company.</li>
+          <li>Prioritize technical debt projects.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h3 class="mb-1">Free and Open Source</h3>
+
+        <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

diff --git a/test/flick_web/live/index_live_test.exs b/test/flick_web/live/index_live_test.exs
@@ -15,7 +15,7 @@ defmodule FlickWeb.IndexLiveTest do
     {:ok, view, _html} = live(conn, ~p"/")
 
     expected_welcome_copy =
-      "Flick is an application that allows you to create ballots that capture ranked votes."
+      "This site helps people quickly create, run, and tally ranked voting ballots."
 
     assert view |> element("#welcome-copy") |> render() =~ expected_welcome_copy
   end