PhiaUi.Components.Marketing (phia_ui v0.1.17)

Copy Markdown View Source

Marketing page section components.

Provides reusable marketing page building blocks:

Summary

Functions

Renders a full-width call-to-action banner.

Renders a partner/client logo strip.

Renders an email subscribe section with input and button.

Renders a pricing tier comparison layout.

Renders a website footer with link columns, logo, copyright, and social icons.

Functions

cta_section(assigns)

Renders a full-width call-to-action banner.

Examples

<.cta_section title="Ready to get started?">
  <:actions>
    <button>Sign Up Free</button>
  </:actions>
</.cta_section>

<.cta_section title="Join us" variant={:filled} description="Start today.">
  <:actions>
    <button>Get Started</button>
  </:actions>
</.cta_section>

Attributes

  • title (:string) (required)
  • description (:string) - Defaults to nil.
  • variant (:atom) - Defaults to :default. Must be one of :default, :filled, or :gradient.
  • align (:atom) - Defaults to :center. Must be one of :center, :start, or :split.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • actions - CTA buttons.
  • media - Optional media content (for split layout).

logo_cloud(assigns)

Renders a partner/client logo strip.

Examples

<.logo_cloud title="Trusted by">
  <img src="/logos/acme.svg" alt="Acme" class="h-8" />
  <img src="/logos/globex.svg" alt="Globex" class="h-8" />
</.logo_cloud>

<.logo_cloud layout={:grid} columns={4} grayscale>
  <img src="/logos/a.svg" alt="A" />
  <img src="/logos/b.svg" alt="B" />
</.logo_cloud>

Attributes

  • title (:string) - Defaults to nil.
  • layout (:atom) - Defaults to :inline. Must be one of :grid, or :inline.
  • columns (:integer) - Defaults to 5.
  • grayscale (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required) - Logo images.

newsletter_cta(assigns)

Renders an email subscribe section with input and button.

Examples

<.newsletter_cta
  title="Stay updated"
  description="Get the latest news."
  on_submit="subscribe"
/>

Attributes

  • title (:string) - Defaults to nil.
  • description (:string) - Defaults to nil.
  • placeholder (:string) - Defaults to "Enter your email".
  • button_label (:string) - Defaults to "Subscribe".
  • on_submit (:string) (required) - Phoenix event name for form submit.
  • input_name (:string) - Defaults to "email".
  • layout (:atom) - Defaults to :inline. Must be one of :stacked, or :inline.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • disclaimer - Legal text below the form.

pricing_table(assigns)

Renders a pricing tier comparison layout.

Examples

<.pricing_table title="Pricing" description="Choose a plan." columns={3}>
  <div>Free Tier</div>
  <div>Pro Tier</div>
  <div>Enterprise Tier</div>
</.pricing_table>

Attributes

  • title (:string) - Defaults to nil.
  • description (:string) - Defaults to nil.
  • columns (:integer) - Defaults to 3.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • toggle - Billing toggle (monthly/yearly switch).
  • inner_block (required) - Pricing tier cards.
  • footer - Footer content below tiers.

site_footer(assigns)

Renders a website footer with link columns, logo, copyright, and social icons.

Examples

<.site_footer>
  <:logo>
    <img src="/logo.svg" alt="Acme" class="h-8" />
  </:logo>
  <:columns title="Product">
    <a href="/features">Features</a>
    <a href="/pricing">Pricing</a>
  </:columns>
  <:columns title="Company">
    <a href="/about">About</a>
    <a href="/blog">Blog</a>
  </:columns>
  <:social>
    <a href="https://twitter.com">Twitter</a>
  </:social>
  <:bottom>
    <p>2026 Acme Inc. All rights reserved.</p>
  </:bottom>
</.site_footer>

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • logo - Logo/brand area.
  • columns - Link columns. Accepts attributes:
    • title (:string) (required)
  • bottom - Bottom bar (copyright, legal links).
  • social - Social media icons.