Style home with event and ticket details

assets/css/app.css

@@ -3,3 +3,19 @@
 @import "tailwindcss/utilities";
 
 /* This file is for your main application CSS */
+@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@1,100&family=Libre+Baskerville:wght@700&family=M+PLUS+Rounded+1c&family=Montserrat:ital@1&family=Open+Sans:ital@1&family=Poppins:wght@400;600;700&family=Questrial&family=Roboto&display=swap");
+
+.poppins-light {
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+}
+
+.poppins-regular {
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+}
+
+.poppins-bold {
+  font-family: "Poppins", sans-serif;
+  font-weight: 700;
+}

lib/elixir_conf_africa/events.ex

@@ -7,6 +7,7 @@ defmodule ElixirConfAfrica.Events do
   alias ElixirConfAfrica.Repo
 
   alias ElixirConfAfrica.Events.Event
+  alias ElixirConfAfrica.TicketTypes.TicketType
 
   @doc """
   Returns the list of events.
@@ -21,6 +22,26 @@ defmodule ElixirConfAfrica.Events do
     Repo.all(from e in Event, order_by: [desc: e.id])
   end
 
+  def get_elixir_conf_event_and_ticket_types do
+    get_elixir_conf_event()
+    |> Repo.preload(:ticket_types)
+  end
+
+  defp get_elixir_conf_event do
+    Repo.get_by(Event, name: "ElixirConf Africa 2024")
+  end
+
+  def get_all_available_tickets do
+    get_elixir_conf_event = get_elixir_conf_event()
+
+    query =
+      from t in TicketType,
+        where: t.event_id == ^get_elixir_conf_event.id,
+        select: sum(t.number)
+
+    Repo.one(query)
+  end
+
   @doc """
   Gets a single event.
 

lib/elixir_conf_africa_web/components/layouts/app.html.heex

@@ -1,31 +1,5 @@
-<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">
-      <a href="/">
-        <img src={~p"/images/logo.svg"} width="36" />
-      </a>
-      <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
-        v<%= Application.spec(:phoenix, :vsn) %>
-      </p>
-    </div>
-    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
-      <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
-        @elixirphoenix
-      </a>
-      <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
-        GitHub
-      </a>
-      <a
-        href="https://hexdocs.pm/phoenix/overview.html"
-        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
-      >
-        Get Started <span aria-hidden="true">&rarr;</span>
-      </a>
-    </div>
-  </div>
-</header>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
-  <div class="mx-auto max-w-2xl">
+<main>
+  <div>
     <.flash_group flash={@flash} />
     <%= @inner_content %>
   </div>

lib/elixir_conf_africa_web/live/home_live/index.ex

@@ -0,0 +1,14 @@
+defmodule ElixirConfAfricaWeb.HomeLive.Index do
+  use ElixirConfAfricaWeb, :live_view
+  alias ElixirConfAfrica.Events
+
+  def mount(_params, _session, socket) do
+    elixir_conf_africa_event = Events.get_elixir_conf_event_and_ticket_types()
+    availabe_tickets = Events.get_all_available_tickets()
+
+    {:ok,
+     socket
+     |> assign(:available_tickets, availabe_tickets)
+     |> assign(:event, elixir_conf_africa_event)}
+  end
+end

lib/elixir_conf_africa_web/live/home_live/index.html.heex

@@ -0,0 +1,143 @@
+<div class="flex flex-col w-[100%]">
+  <div class="w-[90%] mx-auto h-[60px] flex justify-between items-center ">
+    <img
+      src="images/elixirconflogo.svg"
+      class="md:w-[160px] w-[127px] h-[23px] object-cover  md:h-[29px] "
+      alt=""
+    />
+    <div class="flex gap-4 items-center">
+      <button class="text-white bg-[#AD3989] border-[1px] w-[130px] text-sm h-[34px] flex gap-2 items-center justify-center rounded-[4px]">
+        <p>Become speaker</p>
+      </button>
+      <div class="flex gap-1 items-center">
+        <p>Logout</p>
+        <img src="images/logout_icon.svg" class="w-[20px] object-contain h-[20px] " alt="" />
+      </div>
+    </div>
+  </div>
+  <div
+    class="w-[100%] md:-mb-16  -mb-12 flex justify-center items-center text-white md:text-6xl text-2xl font-bold   h-[164px]"
+    style="background-image: url('/images/elixirconfbg.png');
+       background-size: cover;
+       background-position: center;"
+  >
+    ElixirConf Africa 2024
+  </div>
+  <div class="md:w-[144px] w-[91px] h-[91px] -md:mb-8  md:ml-12 ml-6 md:h-[144px] rounded-full ">
+    <img
+      src="images/Avatar.svg"
+      class="md:w-[144px] md:h-[144px] h-[91px] w-[91px] rounded-full object-cover"
+      alt=""
+    />
+  </div>
+  <div class="w-[100%]  pb-12 flex flex-col  px-4  justify-end items-end ">
+    <div class="md:flex hidden  flex-col items-end">
+      <div class="flex gap-2 items-center">
+        <p class="text-[#202020] poppins-regular">Backend Engineer</p>
+        <p class="text-[#AD8AA2] poppins-light">:Profession</p>
+      </div>
+      <div class="flex gap-2 items-center">
+        <p class="text-[#202020] poppins-regular">Backend Engineer</p>
+        <p class="text-[#AD8AA2] poppins-light">:Profession</p>
+      </div>
+    </div>
+    <div class="flex w-[100%] md:hidden  justify-start my-4 gap-2">
+      Backend Engineer at Wezacare Solutions
+    </div>
+
+    <div class="flex gap-4  items-center">
+      <div class="w-[117px] h-[28px] flex justify-center gap-2 items-center border-[1px] border-[#8FCCA0]  rounded-[50px]">
+        <img src="images/attending.svg" class="w-[12px] h-[12px] " alt="" />
+        <p class="text-[#8FCCA0] poppins-regular">Attending</p>
+      </div>
+      <div class="w-[230px] h-[26px] poppins-light rounded-[50px] flex text-sm justify-center bg-[#9AD7D8] items-center">
+        <img src="images/calendar.svg" class="w-[12px] h-[12px] " alt="" />
+        <p>June 19 2024 | June 23 2024</p>
+      </div>
+    </div>
+  </div>
+  <div class="w-[90%] poppins-regular  flex md:gap-8 gap-4 items-center mx-auto">
+    <p>
+      Details
+    </p>
+    <p>
+      Cart
+    </p>
+    <p>
+      Payment
+    </p>
+    <p>
+      Payment Details
+    </p>
+  </div>
+</div>
+
+<%!-- navbar --%>
+
+<div class=" bg-[#F2F2F2]/50 py-12 pt-5">
+  <div class="w-[90%]  flex mx-auto">
+    <div class="w-[100%]  flex md:flex-row gap-8 flex-col justify-between items-start">
+      <div class="md:w-[30%] h-[377px] w-[100%] bg-white rounded-[8px] flex flex-col gap-4 p-4 border-[1px] border-[#E6E6E6] ">
+        <p class="text-[20px]  poppins-bold leading-[36px]">
+          Event Information
+        </p>
+        <div class="grid poppins-light grid-cols-2 gap-4 w-[100%]">
+          <div class="flex flex-col gap-1">
+            <p>Start Date</p>
+            <p class="poppins-regular "><%= @event.start_date %></p>
+          </div>
+          <div class="flex flex-col gap-1">
+            <p>End Date</p>
+            <p class="poppins-regular "><%= @event.start_date %></p>
+          </div>
+          <div class="flex flex-col gap-1">
+            <p>Event Type</p>
+            <p class="poppins-regular "><%= @event.event_type %></p>
+          </div>
+          <div class="flex flex-col gap-1">
+            <p>Available Tickets</p>
+            <p class="poppins-regular "><%= @available_tickets %></p>
+          </div>
+        </div>
+        <div class="flex poppins-light flex-col gap-1">
+          <p>Location</p>
+          <p class="poppins-regular"><%= @event.location %></p>
+        </div>
+        <div class="flex flex-col gap-1">
+          <p>Hosted by</p>
+          <p class="poppins-regular ">Elixir Conf Africa</p>
+        </div>
+      </div>
+      <div class="md:w-[65%]  w-[100%] md:h-[505px] bg-white rounded-[8px] border-[1px] border-[#E6E6E6]  flex flex-col gap-4 p-4 ">
+        <p class="poppins-bold text-xl">Available Tickets</p>
+
+        <div class="grid md:grid-cols-2 gap-8 w-[100%]">
+          <%= for ticket_type <- @event.ticket_types do %>
+            <div class="w-[100%] border-[#E6E6E6] border-[1px] rounded-[8px]  h-[170px] flex flex-col justify-between p-3">
+              <div class="flex  poppins-regular justify-between w-[100%]">
+                <p class="text-[#AD3989]"><%= ticket_type.name %></p>
+                <p class="text-[#4D4D4D]"><%= ticket_type.number %>Tickets</p>
+              </div>
+              <p class="poppins-light text-sm text-[#4D4D4D]">
+                <%= ticket_type.description %>
+              </p>
+              <div class="flex items-center justify-between w-[100%]">
+                <p class="poppins-bold text-xl">KSH <%= ticket_type.price %></p>
+                <div class="flex gap-3 poppins-regular items-center">
+                  <button class="p-4 border-[1px] w-[73px] text-sm h-[34px] border-[#AD3989] text-[#AD3989]  flex gap-2 items-center justify-center rounded-[4px]">
+                    <p>+</p>
+                    <p>Cart</p>
+                  </button>
+                  <button class="p-4 border-[1px] w-[87px] text-xs h-[34px] bg-[#AD3989] text-white gap-2   flex items-center justify-center rounded-[4px]">
+                    Get
+                    <p>Ticket</p>
+                  </button>
+                </div>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

lib/elixir_conf_africa_web/router.ex

@@ -19,6 +19,8 @@ defmodule ElixirConfAfricaWeb.Router do
 
     get "/", PageController, :home
 
+    live "/home", HomeLive.Index, :index
+
     live "/events", EventLive.Index, :index
     live "/events/new", EventLive.Index, :new
     live "/events/:id/edit", EventLive.Index, :edit