Landing page generator (#20)

Author: chrisgreg

bloom_site/lib/bloom_site_web/components/gradient_blob.ex

@@ -0,0 +1,53 @@
+defmodule BloomSiteWeb.Components.GradientBlob do
+  use Phoenix.Component
+
+  @doc """
+  Renders a gradient blob component with a randomly generated polygon shape.
+
+  ## Assigns
+
+  - `position`: The position of the blob. Can be either "top" or "bottom". Default is "top".
+  - `offset`: The offset of the blob from the top or bottom edge in rem units. Default is 0.
+  - `width`: The width of the blob in rem units. Default is 36.
+  - `rotate`: The rotation of the blob in degrees. Default is 0.
+  - `from_color`: The starting color of the gradient. Default is "#ff80b5".
+  - `to_color`: The ending color of the gradient. Default is "#9089fc".
+  - `seed`: A seed value used to generate the random polygon shape. Default is 0.
+  """
+  attr :position, :string, default: "top"
+  attr :offset, :integer, default: 0
+  attr :width, :integer, default: 36
+  attr :rotate, :integer, default: 0
+  attr :from_color, :string, default: "#ff80b5"
+  attr :to_color, :string, default: "#9089fc"
+  attr :seed, :integer, default: 0
+
+  def gradient_blob(assigns) do
+    position_style = get_position_style(assigns.position, assigns.offset)
+    width_style = "width: #{assigns.width}rem;"
+    rotate_style = "rotate: #{assigns.rotate}deg;"
+    polygon = generate_polygon(assigns.seed)
+
+    ~H"""
+    <div class="pointer-events-none absolute left-0 right-0 -z-50 transform translate-z-0 overflow-hidden blur-2xl max-w-full" style={"#{position_style} #{width_style}"} aria-hidden="true">
+      <div class="relative left-1/2 aspect-[1155/678] -translate-x-1/2 opacity-30" style={"background-image: linear-gradient(to top right, #{@from_color}, #{@to_color}); clip-path: polygon(#{polygon}); #{rotate_style}"}>
+      </div>
+    </div>
+    """
+  end
+
+  defp get_position_style("top", offset), do: "top: -#{offset}rem;"
+  defp get_position_style("bottom", offset), do: "bottom: -#{offset}rem;"
+
+  defp generate_polygon(seed) do
+    :rand.seed(:exsss, {seed, seed, seed})
+    num_points = Enum.random(5..10)
+    points =
+      for _ <- 1..num_points do
+        x = :rand.uniform() * 100
+        y = :rand.uniform() * 100
+        "#{x}% #{y}%"
+      end
+    Enum.join(points, ", ")
+  end
+end

bloom_site/lib/bloom_site_web/components/hero.ex

@@ -8,18 +8,24 @@ defmodule BloomSiteWeb.Components.Hero do
   attr(:class, :string, default: "", doc: "CSS class for the hero component")
   slot(:inner_block, required: true, doc: "Main content block of the hero component")
   slot(:subtitle, required: false, doc: "Subtitle content block")
+  slot(:announcement_badge, required: false, doc: "Annoucement badge content block")
   slot(:actions, required: false, doc: "Action buttons or links")
 
   def hero(assigns) do
     ~H"""
-    <div class={["container mx-auto px-4 py-8", @class]}>
-      <div class="text-8xl text-center font-bold text-pretty">
+    <div class={["container mx-auto max-w-4xl py-12", @class]}>
+      <div class="hidden sm:mb-8 sm:flex sm:justify-center">
+        <div :if={@announcement_badge != []} class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
+          <%= render_slot(@announcement_badge) %>
+        </div>
+      </div>
+      <div class="text-8xl text-center font-bold text-pretty tracking-tight text-gray-900">
         <h1><%= render_slot(@inner_block) %></h1>
       </div>
-      <div class="mt-6 text-center text-2xl flex justify-center font-medium text-pretty">
+      <div class="mt-6 text-center text-2xl flex leading-8 text-gray-600 justify-center font-medium text-pretty">
         <%= render_slot(@subtitle) %>
       </div>
-      <div class="mt-14 flex justify-center flex-row gap-4 items-center">
+      <div class="mt-16 flex justify-center flex-row gap-x-6 items-center">
         <%= render_slot(@actions) %>
       </div>
     </div>

bloom_site/lib/bloom_site_web/router.ex

@@ -25,6 +25,10 @@ defmodule BloomSiteWeb.Router do
     live "/", LandingLive, :home
     live "/showcase", ShowcaseLive
     live_storybook("/storybook", backend_module: Elixir.BloomSiteWeb.Storybook)
+
+    live_session :landing do
+      live "/landing_page", LandingPageLive
+    end
   end
 
   # Other scopes may use custom stacks.

bloom_site/storybook/bloom_components/gradient_blob.story.exs

@@ -0,0 +1,21 @@
+defmodule BloomSite.Storybook.BloomComponents.GradientBlob do
+  use PhoenixStorybook.Story, :component
+
+  def function, do: &BloomSiteWeb.Components.GradientBlob.gradient_blob/1
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        slots: []
+      },
+      %Variation{
+        id: :with_seed,
+        slots: [],
+        attributes: %{
+          seed: 10
+        }
+      }
+    ]
+  end
+end

bloom_site/storybook/bloom_components/hero.story.exs

@@ -24,6 +24,13 @@ defmodule BloomSite.Storybook.BloomComponents.Hero do
           "Hero",
           ~s|<:actions><button class="border px-4 py-1 bg-black text-white rounded text-lg" phx-click="go">Go</button></:actions>|
         ]
+      },
+      %Variation{
+        id: :with_announcement_label,
+        slots: [
+          "Hero",
+          ~s|<:announcement_badge>We just launched! <a class="text-blue-500" href="#">Read more here</a></:announcement_badge>|
+        ]
       }
     ]
   end

bloom_site/storybook/examples/landing_page_generator.story.exs

@@ -0,0 +1,70 @@
+defmodule Storybook.Examples.LandingPageGenerator do
+  use PhoenixStorybook.Story, :example
+  import BloomSiteWeb.CoreComponents
+  import BloomSiteWeb.Components.{Hero, GradientBlob}
+
+  alias Phoenix.LiveView.JS
+
+  def doc do
+    "You can create a landing page for your site complete with an Ecto backed waitlist for your users by running `mix bloom.landing_page`."
+  end
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok,
+     assign(socket,
+       form: nil
+     )}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div class="bg-transparent">
+      <div class="relative isolate px-6 pt-14 lg:px-8">
+        <.gradient_blob position="top" seed={6} offset="0" width={80} rotate={10} />
+        <.hero>
+          Some sort of really interesting hero title
+          <:subtitle>
+            Here's where you put something else to really make people realise the value of your product
+          </:subtitle>
+          <:announcement_badge>
+            Announcing our next round of funding or something.
+            <a href="#" class="font-semibold text-violet-500">
+              <span class="absolute inset-0" aria-hidden="true"></span>Read more
+              <span aria-hidden="true">&rarr;</span>
+            </a>
+          </:announcement_badge>
+          <:actions>
+            <div class="mt-10 flex items-center justify-center gap-x-6">
+              <.form
+                for={@form}
+                phx-submit="register_interest"
+                class="flex items-center justify-center  space-x-4 flex-row"
+              >
+                <input
+                  type="email"
+                  field={:email}
+                  value=""
+                  name="email"
+                  placeholder="Enter your email"
+                  required
+                  class="w-72 rounded-md border-gray-300 shadow-sm focus:border-violet-600 focus:ring-violet-500 sm:text-sm !mt-0"
+                />
+                <button
+                  type="submit"
+                  class="rounded-md bg-violet-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-violet-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500"
+                >
+                  Join Waitlist
+                </button>
+              </.form>
+            </div>
+          </:actions>
+        </.hero>
+        <.gradient_blob position="bottom" seed={831} offset="33" width={80} rotate={-20} />
+      </div>
+    </div>
+    """
+  end
+
+end

lib/bloom/components/gradient_blob.ex

@@ -0,0 +1,62 @@
+defmodule Bloom.Components.GradientBlob do
+  use Phoenix.Component
+
+  @doc """
+  Renders a gradient blob component with a randomly generated polygon shape.
+
+  ## Assigns
+
+  - `position`: The position of the blob. Can be either "top" or "bottom". Default is "top".
+  - `offset`: The offset of the blob from the top or bottom edge in rem units. Default is 0.
+  - `width`: The width of the blob in rem units. Default is 36.
+  - `rotate`: The rotation of the blob in degrees. Default is 0.
+  - `from_color`: The starting color of the gradient. Default is "#ff80b5".
+  - `to_color`: The ending color of the gradient. Default is "#9089fc".
+  - `seed`: A seed value used to generate the random polygon shape. Default is 0.
+  """
+  attr(:position, :string, default: "top")
+  attr(:offset, :integer, default: 0)
+  attr(:width, :integer, default: 36)
+  attr(:rotate, :integer, default: 0)
+  attr(:from_color, :string, default: "#ff80b5")
+  attr(:to_color, :string, default: "#9089fc")
+  attr(:seed, :integer, default: 0)
+
+  def gradient_blob(assigns) do
+    position_style = get_position_style(assigns.position, assigns.offset)
+    width_style = "width: #{assigns.width}rem;"
+    rotate_style = "rotate: #{assigns.rotate}deg;"
+    polygon = generate_polygon(assigns.seed)
+
+    ~H"""
+    <div
+      class="translate-z-0 pointer-events-none absolute right-0 left-0 -z-50 max-w-full transform overflow-hidden blur-2xl"
+      style={"#{position_style} #{width_style}"}
+      aria-hidden="true"
+    >
+      <div
+        class="aspect-[1155/678] relative left-1/2 -translate-x-1/2 opacity-30"
+        style={"background-image: linear-gradient(to top right, #{@from_color}, #{@to_color}); clip-path: polygon(#{polygon}); #{rotate_style}"}
+      >
+      </div>
+    </div>
+    """
+  end
+
+  defp get_position_style("top", offset), do: "top: -#{offset}rem;"
+  defp get_position_style("bottom", offset), do: "bottom: -#{offset}rem;"
+
+  defp generate_polygon(seed) do
+    :rand.seed(:exsss, {seed, seed, seed})
+    num_points = Enum.random(5..10)
+
+    points =
+      for _ <- 1..num_points do
+        x = :rand.uniform() * 100
+        y = :rand.uniform() * 100
+        "#{x}% #{y}%"
+      end
+
+    Enum.join(points, ", ")
+  end
+end

lib/bloom/components/hero.ex

@@ -1,25 +1,34 @@
 defmodule Bloom.Components.Hero do
   use Phoenix.Component
 
-  @moduledoc """
+  @doc """
   Hero component
   """
 
   attr(:class, :string, default: "", doc: "CSS class for the hero component")
   slot(:inner_block, required: true, doc: "Main content block of the hero component")
   slot(:subtitle, required: false, doc: "Subtitle content block")
+  slot(:announcement_badge, required: false, doc: "Annoucement badge content block")
   slot(:actions, required: false, doc: "Action buttons or links")
 
   def hero(assigns) do
     ~H"""
-    <div class={["container mx-auto px-4 py-8", @class]}>
-      <div class="text-pretty text-center text-8xl font-bold">
+    <div class={["container mx-auto max-w-4xl py-32 sm:py-48 lg:py-56", @class]}>
+      <div class="hidden sm:mb-8 sm:flex sm:justify-center">
+        <div
+          :if={@announcement_badge != []}
+          class="ring-gray-900/10 relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 hover:ring-gray-900/20"
+        >
+          <%= render_slot(@announcement_badge) %>
+        </div>
+      </div>
+      <div class="text-pretty text-center text-6xl font-bold tracking-tight text-gray-900">
         <h1><%= render_slot(@inner_block) %></h1>
       </div>
-      <div class="text-pretty mt-6 flex justify-center text-center text-2xl font-medium">
+      <div class="text-pretty mt-6 flex justify-center text-center text-lg font-medium leading-8 text-gray-600">
         <%= render_slot(@subtitle) %>
       </div>
-      <div class="mt-14 flex flex-row items-center justify-center gap-4">
+      <div class="mt-6 flex flex-row items-center justify-center gap-x-6">
         <%= render_slot(@actions) %>
       </div>
     </div>

lib/tasks/landing_page.ex

@@ -0,0 +1,55 @@
+defmodule Mix.Tasks.Bloom.LandingPage do
+  @moduledoc "Mix task to generate Landing Page with Ecto Waitlist for your application"
+  use Mix.Task
+
+  @doc """
+  Run the mix task to generate the landing page.
+
+  ## Examples
+
+      iex> Mix.Tasks.Bloom.LandingPage.run([])
+  """
+  @impl true
+  def run(args) do
+    case args do
+      ["help"] ->
+        print_usage_and_components()
+
+      _ ->
+        install_landing_page()
+    end
+  end
+
+  defp install_landing_page do
+    env = Mix.env() |> Atom.to_string()
+    project_name = Mix.Project.config()[:app] |> Atom.to_string() |> String.downcase()
+    files_path = "_build/#{env}/lib/bloom/priv/templates/landing_page"
+    module_name = project_name |> Macro.camelize()
+
+    component_dir = component_dir(project_name)
+    File.mkdir_p(component_dir)
+
+    File.ls!(files_path)
+    |> Enum.each(fn file ->
+      source_file = "#{files_path}/#{file}"
+
+      source_code =
+        EEx.eval_file(source_file, module_name: module_name, assigns: %{module_name: module_name})
+
+      target_path = "#{component_dir}/#{file}"
+      File.write!(target_path, source_code)
+
+      Mix.shell().info("Successfully generated #{target_path} ✅")
+    end)
+
+    Mix.shell().info(
+      "Landing page generated - don't forget to run the migration specified in the waitlist.ex module"
+    )
+  end
+
+  defp print_usage_and_components do
+    Mix.shell().info("Usage: mix bloom.landing_page - requires hero and gradient_blob components")
+  end
+
+  defp component_dir(app_name), do: "lib/#{app_name}_web/live" |> String.downcase()
+end

priv/templates/avatar.ex

@@ -44,13 +44,13 @@ defmodule <%= @module_name %>Web.Components.Avatar do
   attr(:rest, :global)
 
   def avatar(assigns) do
+    image =
+      assigns[:img_src] ||
+        "https://api.dicebear.com/8.x/#{assigns[:style]}/svg?seed=#{assigns[:name]}"
+
     ~H"""
-    <div class={["flex items-center w-12 h-12", @class]} {@rest}>
-      <img
-        src={@img_src || "https://api.dicebear.com/7.x/#{@style}/svg?seed=#{@name}"}
-        alt={"#{@name} avatar"}
-        class="rounded-lg"
-      />
+    <div class={["flex h-12 w-12 items-center", @class]} {@rest}>
+      <img src={image} alt={"#{@name} avatar"} class="rounded-lg" />
     </div>
     """
   end