+ ![]({~p"/images/bloom.png"})
- <.gradient_text from_color="rose-400" to_color="purple-500">Bloom
- <:subtitle>
- The opinionated, open-source extension to Phoenix Core Components.
- Install a copy of each component using the mix command in seconds.
- Yours to edit and customise. - - <:actions> -
<.flash_group flash={@flash} />
<%= @inner_content %>
diff --git a/bloom_site/lib/bloom_site_web/live/landing_live.html.heex b/bloom_site/lib/bloom_site_web/live/landing_live.html.heex
index 7adb4f7..d86a6d3 100644
--- a/bloom_site/lib/bloom_site_web/live/landing_live.html.heex
+++ b/bloom_site/lib/bloom_site_web/live/landing_live.html.heex
@@ -1,460 +1,462 @@
-<.hero class="max-w-4xl text-pretty">
-
- <.gradient_text from_color="rose-400" to_color="purple-500">Bloom
- <:subtitle>
- The opinionated, open-source extension to Phoenix Core Components.- Install a copy of each component using the mix command in seconds.
- Yours to edit and customise. - - <:actions> -
- <.link href="/storybook">
- <.glow_button>
- View Components & Storybook
-
-
- <.link href="https://github.com/chrisgreg/bloom">
- <.glow_button from_color="white" to_color="white" class="hover:bg-zinc-700">
- Github
-
-
-
-
-
+
+ <.hero class="max-w-4xl text-pretty">
+
+ <.gradient_text from_color="rose-400" to_color="purple-500">Bloom
+ <:subtitle>
+ The opinionated, open-source extension to Phoenix Core Components.
+ Install a copy of each component using the mix command in seconds.
+ Yours to edit and customise. + + <:actions> +
-
-
-
-
-
-
-
- <.gradient_text from_color="rose-400" to_color="purple-500" class="font-semibold text-3xl">
- Missing a component you want? This is Open Source!
+
+
-
+ <.hero>
+ <.gradient_text from_color="rose-400" to_color="purple-500">Showcase
+ <:subtitle>
+ Some Phoenix projects using Bloom components
+
+
+
+
+
+
+ """
+ end
+
+ attr(:image_url, :string, required: true)
+ slot(:name, required: true)
+ slot(:description, required: true)
+ defp showcase_entry(assigns) do
+ ~H"""
+
+ """
+ end
+end
diff --git a/bloom_site/lib/bloom_site_web/router.ex b/bloom_site/lib/bloom_site_web/router.ex
index 8a98739..849eb91 100644
--- a/bloom_site/lib/bloom_site_web/router.ex
+++ b/bloom_site/lib/bloom_site_web/router.ex
@@ -23,6 +23,7 @@ defmodule BloomSiteWeb.Router do
pipe_through :browser
live "/", LandingLive, :home
+ live "/showcase", ShowcaseLive
live_storybook("/storybook", backend_module: Elixir.BloomSiteWeb.Storybook)
end
diff --git a/bloom_site/mix.lock b/bloom_site/mix.lock
index 656fbab..83ba2ef 100644
--- a/bloom_site/mix.lock
+++ b/bloom_site/mix.lock
@@ -1,5 +1,5 @@
%{
- "bloom": {:hex, :bloom, "0.0.5", "e0a28fe99f9cdf7b4737b754edeb9b8a9cf6502ced9b54526fdf8fadeeb65ba9", [:mix], [{:phoenix, "~> 1.7.6", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_html_helpers, "~> 1.0", [hex: :phoenix_html_helpers, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.20", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "2655b2fe0694e45e13580d4154c7bf40812b04935e21b9e50828726f20e870fe"},
+ "bloom": {:hex, :bloom, "0.0.7", "4c1955fcaccfcc60015ab951415f40d18a79b04c8eaab6d8024cd3ff87b8a297", [:mix], [{:phoenix, "~> 1.7.6", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, ">= 3.3.3", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.20", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "3dc428dfba23c157c7696906213da817be5595442b7ab00fefcd5039401de5c7"},
"castore": {:hex, :castore, "1.0.7", "b651241514e5f6956028147fe6637f7ac13802537e895a724f90bf3e36ddd1dd", [:mix], [], "hexpm", "da7785a4b0d2a021cd1292a60875a784b6caef71e76bf4917bdee1f390455cf5"},
"cowboy": {:hex, :cowboy, "2.12.0", "f276d521a1ff88b2b9b4c54d0e753da6c66dd7be6c9fca3d9418b561828a3731", [:make, :rebar3], [{:cowlib, "2.13.0", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "1.8.0", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "8a7abe6d183372ceb21caa2709bec928ab2b72e18a3911aa1771639bef82651e"},
"cowboy_telemetry": {:hex, :cowboy_telemetry, "0.4.0", "f239f68b588efa7707abce16a84d0d2acf3a0f50571f8bb7f56a15865aae820c", [:rebar3], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7d98bac1ee4565d31b62d59f8823dfd8356a169e7fcbb83831b8a5397404c9de"},
diff --git a/bloom_site/priv/static/images/showcase/mealmind.png b/bloom_site/priv/static/images/showcase/mealmind.png
new file mode 100644
index 0000000..fd2a840
Binary files /dev/null and b/bloom_site/priv/static/images/showcase/mealmind.png differ
diff --git a/bloom_site/priv/static/images/showcase/uini.png b/bloom_site/priv/static/images/showcase/uini.png
new file mode 100644
index 0000000..188e609
Binary files /dev/null and b/bloom_site/priv/static/images/showcase/uini.png differ
+ <.gradient_text from_color="rose-400" to_color="purple-500">Bloom
+ <:subtitle>
+ The opinionated, open-source extension to Phoenix Core Components.+ Install a copy of each component using the mix command in seconds.
+ Yours to edit and customise. + + <:actions> +
+ <.link href="/storybook">
+ <.glow_button>
+ View Components & Storybook
+
+
+ <.link href="https://github.com/chrisgreg/bloom">
+ <.glow_button from_color="white" to_color="white" class="hover:bg-zinc-700">
+ Github
+
+
+
+
+
-- <.gradient_text> - Use in seconds - -
- Install the dependency, use the mix task, customise, use. -
- + + + + -
- <.code_snippet>
- defp deps do
- [
- {:bloom, "~> 0.0.7"},
- ]
- end
-
- <.code_snippet>
- mix bloom.install code_snippet
-
-
+ + <.gradient_text> + Use in seconds + +
+ Install the dependency, use the mix task, customise, use. +
+ -- <.gradient_text> - Avatars! Avatars! - -
- From dicebear.fm (or your own images) -
- +
+ <.code_snippet>
+ defp deps do
+ [
+ {:bloom, "~> 0.0.7"},
+ ]
+ end
+
+ <.code_snippet>
+ mix bloom.install code_snippet
+
+
-
- <.avatar name="Alice" style="adventurer" />
- <.avatar name="Bob" style="adventurer-neutral" />
- <.avatar name="Charlie" style="avataaars" />
- <.avatar name="Diana" style="avataaars-neutral" />
- <.avatar name="Ethan" style="big-ears" />
- <.avatar name="Fiona" style="big-ears-neutral" />
- <.avatar name="George" style="big-smile" />
- <.avatar name="Hannah" style="bottts" />
- <.avatar name="Ian" style="bottts-neutral" />
- <.avatar name="Julia" style="croodles" />
- <.avatar name="Kevin" style="croodles-neutral" />
- <.avatar name="Liam" style="fun-emoji" />
- <.avatar name="Mia" style="icons" />
- <.avatar name="Noah" style="identicon" />
- <.avatar name="Olivia" style="initials" />
- <.avatar name="Parker" style="lorelei" />
- <.avatar name="Quinn" style="lorelei-neutral" />
- <.avatar name="Ruby" style="micah" />
- <.avatar name="Sam" style="miniavs" />
- <.avatar name="Tina" style="notionists" />
- <.avatar name="Umar" style="notionists-neutral" />
- <.avatar name="Violet" style="open-peeps" />
- <.avatar name="Will" style="personas" />
- <.avatar name="Xena" style="pixel-art" />
- <.avatar name="Yara" style="pixel-art-neutral" />
- <.avatar name="Zack" style="rings" />
- <.avatar name="Amelia" style="shapes" />
- <.avatar name="Ben" style="thumbs" />
- <.avatar name="Ben" img_src="https://picsum.photos/64" />
-
+ + <.gradient_text> + Avatars! Avatars! + +
+ From dicebear.fm (or your own images) +
+ -- <.gradient_text> - Look, a bento grid Phoenix Component! - -
- For showing off features, or just for fun. -
- +
+ <.avatar name="Alice" style="adventurer" />
+ <.avatar name="Bob" style="adventurer-neutral" />
+ <.avatar name="Charlie" style="avataaars" />
+ <.avatar name="Diana" style="avataaars-neutral" />
+ <.avatar name="Ethan" style="big-ears" />
+ <.avatar name="Fiona" style="big-ears-neutral" />
+ <.avatar name="George" style="big-smile" />
+ <.avatar name="Hannah" style="bottts" />
+ <.avatar name="Ian" style="bottts-neutral" />
+ <.avatar name="Julia" style="croodles" />
+ <.avatar name="Kevin" style="croodles-neutral" />
+ <.avatar name="Liam" style="fun-emoji" />
+ <.avatar name="Mia" style="icons" />
+ <.avatar name="Noah" style="identicon" />
+ <.avatar name="Olivia" style="initials" />
+ <.avatar name="Parker" style="lorelei" />
+ <.avatar name="Quinn" style="lorelei-neutral" />
+ <.avatar name="Ruby" style="micah" />
+ <.avatar name="Sam" style="miniavs" />
+ <.avatar name="Tina" style="notionists" />
+ <.avatar name="Umar" style="notionists-neutral" />
+ <.avatar name="Violet" style="open-peeps" />
+ <.avatar name="Will" style="personas" />
+ <.avatar name="Xena" style="pixel-art" />
+ <.avatar name="Yara" style="pixel-art-neutral" />
+ <.avatar name="Zack" style="rings" />
+ <.avatar name="Amelia" style="shapes" />
+ <.avatar name="Ben" style="thumbs" />
+ <.avatar name="Ben" img_src="https://picsum.photos/64" />
+
-<.bento_grid>
- <.bento_card
- name="Calendar Item"
- icon="hero-calendar"
- description="All the components in Bloom."
- row_start={1}
- row_end={3}
- col_start={1}
- col_end={2}
- >
- <.button class="border-white text-white font-medium text-xs items-center gap-2 flex flex-row">
- Here's a button <.icon name="hero-arrow-right" class="h-4 w-4" />
-
-
- <.bento_card
- name="Bell Bento"
- icon="hero-bell"
- description="All the components in Bloom."
- row_start={1}
- row_end={1}
- col_start={2}
- col_end={4}
- >
- <.button class="border-white text-white font-semibold">
- Here's a button
-
-
- <.bento_card
- name="Some sort of hat"
- icon="hero-academic-cap"
- description="All the components in Bloom."
- row_start={3}
- row_end={4}
- col_start={1}
- col_end={2}
- >
- <.button class="border-white text-white font-semibold">
- Here's a button
-
-
- <.bento_card
- name="Cloud Infrastructure"
- icon="hero-cloud"
- description="All the components in Bloom."
- row_start={2}
- row_end={4}
- col_start={2}
- col_end={3}
- >
- <.button class="border-white text-white font-semibold">
- Here's a button
-
-
- <.bento_card
- name="Tournament"
- icon="hero-trophy"
- description="All the components in Bloom."
- row_start={2}
- row_end={4}
- col_start={3}
- col_end={4}
- >
- <.button class="border-white text-white font-semibold">
- Here's a button
-
-
-
+ + <.gradient_text> + Look, a bento grid Phoenix Component! + +
+ For showing off features, or just for fun. +
+ -- <.gradient_text> - Marquee & Card Components - -
- Think social proof, showing company logos, and more. -
- -
- <.marquee repeat={5} vertical={false} pause_on_hover={true} reverse={true}>
- <.card
- image="https://picsum.photos/64"
- title="Jack"
- subheading="@faketwitter"
- body="This is so cool."
- />
- <.card
- image="https://picsum.photos/64"
- title="Chris"
- subheading="@codestirring"
- body="Whoa, it's like shadcn for Elixir and Phoenix!"
- />
- <.card
- image="https://picsum.photos/64"
- title="Rhiannon"
- subheading="@rhiality"
- body="Just run mix bloom.install card"
- />
-
- <.marquee repeat={5} vertical={false} pause_on_hover={true} reverse={false}>
- <.card
- image="https://picsum.photos/64"
- title="Penny"
- subheading="@widmore4eva"
- body="I love that I can customise each component 🤩"
- />
- <.card
- image="https://picsum.photos/64"
- title="Desmond"
- subheading="@hatchlover"
- body="This will save me so much time!"
- />
- <.card
- image="https://picsum.photos/64"
- title="Ben Linus"
- subheading="@jacob_fan_23"
- body="Open source so anyone can use it for free!"
- />
-
-
+ <.bento_grid>
+ <.bento_card
+ name="Calendar Item"
+ icon="hero-calendar"
+ description="All the components in Bloom."
+ row_start={1}
+ row_end={3}
+ col_start={1}
+ col_end={2}
+ >
+ <.button class="border-white text-white font-medium text-xs items-center gap-2 flex flex-row">
+ Here's a button <.icon name="hero-arrow-right" class="h-4 w-4" />
+
+
+ <.bento_card
+ name="Bell Bento"
+ icon="hero-bell"
+ description="All the components in Bloom."
+ row_start={1}
+ row_end={1}
+ col_start={2}
+ col_end={4}
+ >
+ <.button class="border-white text-white font-semibold">
+ Here's a button
+
+
+ <.bento_card
+ name="Some sort of hat"
+ icon="hero-academic-cap"
+ description="All the components in Bloom."
+ row_start={3}
+ row_end={4}
+ col_start={1}
+ col_end={2}
+ >
+ <.button class="border-white text-white font-semibold">
+ Here's a button
+
+
+ <.bento_card
+ name="Cloud Infrastructure"
+ icon="hero-cloud"
+ description="All the components in Bloom."
+ row_start={2}
+ row_end={4}
+ col_start={2}
+ col_end={3}
+ >
+ <.button class="border-white text-white font-semibold">
+ Here's a button
+
+
+ <.bento_card
+ name="Tournament"
+ icon="hero-trophy"
+ description="All the components in Bloom."
+ row_start={2}
+ row_end={4}
+ col_start={3}
+ col_end={4}
+ >
+ <.button class="border-white text-white font-semibold">
+ Here's a button
+
+
+
-
-
-
-
-
- <.gradient_text from_color="rose-400" to_color="purple-500" class="font-semibold text-3xl">
- Missing a component you want? This is Open Source!
+
+ <.gradient_text>
+ Marquee & Card Components
+
+ Think social proof, showing company logos, and more. +
- <.link href="https://github.com/chrisgreg/bloom/issues"> - <.button class="border-white w-fit mx-auto px-6 py-4 flex flex-row gap-2 items-center text-white text-lg"> - Request or add components here <.icon name="hero-arrow-right" class="h-6 w-6" /> - - -
+ <.marquee repeat={5} vertical={false} pause_on_hover={true} reverse={true}>
+ <.card
+ image="https://picsum.photos/64"
+ title="Jack"
+ subheading="@faketwitter"
+ body="This is so cool."
+ />
+ <.card
+ image="https://picsum.photos/64"
+ title="Chris"
+ subheading="@codestirring"
+ body="Whoa, it's like shadcn for Elixir and Phoenix!"
+ />
+ <.card
+ image="https://picsum.photos/64"
+ title="Rhiannon"
+ subheading="@rhiality"
+ body="Just run mix bloom.install card"
+ />
+
+ <.marquee repeat={5} vertical={false} pause_on_hover={true} reverse={false}>
+ <.card
+ image="https://picsum.photos/64"
+ title="Penny"
+ subheading="@widmore4eva"
+ body="I love that I can customise each component 🤩"
+ />
+ <.card
+ image="https://picsum.photos/64"
+ title="Desmond"
+ subheading="@hatchlover"
+ body="This will save me so much time!"
+ />
+ <.card
+ image="https://picsum.photos/64"
+ title="Ben Linus"
+ subheading="@jacob_fan_23"
+ body="Open source so anyone can use it for free!"
+ />
+
+
-
+
+
+
+
-
-
+
+
\ No newline at end of file
diff --git a/bloom_site/lib/bloom_site_web/live/showcase_live.ex b/bloom_site/lib/bloom_site_web/live/showcase_live.ex
new file mode 100644
index 0000000..715c15c
--- /dev/null
+++ b/bloom_site/lib/bloom_site_web/live/showcase_live.ex
@@ -0,0 +1,57 @@
+defmodule BloomSiteWeb.ShowcaseLive do
+ use BloomSiteWeb, :live_view
+ import Phoenix.Component
+ import BloomSiteWeb.Components.Hero
+ import BloomSiteWeb.Components.GradientText
+
+ def mount(_params, _session, socket) do
+ {:ok, socket}
+ end
+
+ def render(assigns) do
+ ~H"""
+
+
+
+ <.showcase_entry image_url="/images/showcase/uini.png" url="https://uini.io?utm_source=bloom">
+ <:name>Uini
+ <:description>AI-powered user-research tool
+
+ <.showcase_entry image_url="/images/showcase/mealmind.png" url="https://mealmind.io?utm_source=bloom">
+ <:name>mealmind
+ <:description>AI-powered meal planning
+
+
+